/* Layout: a deep-green stage (the app icon's ground) opens and closes the page; between them a calm, green-tinted paper
   with one idea per band. The ring of five accents is the only ornament, and it always surrounds a person. */
:root {
  --ground-1: #01523E;
  --ground-2: #0A7356;
  --paper: #F3F7F4;
  --surface: #FFFFFF;
  --ink: #14201B;
  --ink-soft: #4F5E57;
  --line: #DCE6E0;
  --brand: #006C51;
  --brand-tint: #C0F2DC;
  --on-stage: #FFFFFF;
  --on-stage-soft: rgba(255,255,255,.78);
  --yellow-1: #FFE07A; --yellow-2: #FFB627;
  --coral-1: #FF9A8B; --coral-2: #FF5A6E;
  --violet-1: #D9A6FF; --violet-2: #9B5CF6;
  --sky-1: #8FD3FF; --sky-2: #3A8DFF;
  --mint-1: #9CFAD2; --mint-2: #22D69B;
  --accent-ink: #00382A;
  --shadow: 0 24px 60px -24px rgba(1, 60, 44, .35);
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --radius-card: 24px;
  --radius-panel: 32px;
  --max: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0D1512; --surface: #16201C; --ink: #E8F0EC; --ink-soft: #A3B3AB; --line: #25332D;
    --brand: #6DDBB4; --brand-tint: #0F3A2D; --shadow: 0 24px 60px -24px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0D1512; --surface: #16201C; --ink: #E8F0EC; --ink-soft: #A3B3AB; --line: #25332D;
  --brand: #6DDBB4; --brand-tint: #0F3A2D; --shadow: 0 24px 60px -24px rgba(0,0,0,.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--paper); color: var(--ink);
  font: 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--mint-2); outline-offset: 3px; border-radius: 12px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; text-wrap: balance; margin: 0; letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; }
h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: 24px; }
.eyebrow { font: 600 .8rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; }
section { padding-block: clamp(64px, 9vw, 112px); }
.section-head { display: grid; gap: 16px; margin-bottom: 48px; max-width: 760px; }

/* ---------- Stage (hero and closing band) ---------- */
.stage {
  position: relative; overflow: hidden; color: var(--on-stage);
  background: linear-gradient(170deg, var(--ground-1), var(--ground-2));
  isolation: isolate;
}
.stage::before, .stage::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; z-index: -1;
}
.stage::before { width: 420px; height: 420px; background: var(--sky-2); top: -140px; right: -80px; }
.stage::after { width: 360px; height: 360px; background: var(--coral-2); bottom: -180px; left: -120px; opacity: .3; }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 1.25rem/1 var(--display); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; }
.nav-links { display: flex; gap: 28px; font-weight: 500; }
.nav-links a { text-decoration: none; color: var(--on-stage-soft); }
.nav-links a:hover { color: var(--on-stage); }
@media (max-width: 760px) { .nav-links { display: none; } }

.hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 48px; padding-block: 40px 96px; }
.hero h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); font-weight: 800; letter-spacing: -.035em; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--yellow-1), var(--mint-1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy { display: grid; gap: 24px; min-width: 0; }
.hero-copy .lead { color: var(--on-stage-soft); }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-bottom: 72px; } }

.stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px;
  background: var(--on-stage); color: var(--ground-1); font-weight: 700; text-decoration: none;
  transition: transform .2s ease;
}
.store.ghost { background: transparent; color: var(--on-stage); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.store:hover { transform: translateY(-2px); }
.store svg { width: 20px; height: 20px; }
.note { font-size: .9rem; color: var(--on-stage-soft); }

/* Phone with the real Today screen */
.hero-visual { position: relative; display: grid; place-items: center; min-height: 560px; }
.ring {
  position: absolute; width: min(520px, 92vw); aspect-ratio: 1; max-width: 100%; border-radius: 50%;
  background: conic-gradient(var(--yellow-2), var(--coral-2), var(--violet-2), var(--sky-2), var(--mint-2), var(--yellow-2));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  opacity: .9; animation: spin 80s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ring, .orbit { animation: none !important; } }
.av {
  --a1: var(--mint-1); --a2: var(--mint-2); --t: var(--accent-ink);
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--a1), var(--a2)); color: var(--t); font: 700 .85rem/1 var(--body);
}
.av.yellow { --a1: var(--yellow-1); --a2: var(--yellow-2); --t: #3D2A00; }
.av.coral { --a1: var(--coral-1); --a2: var(--coral-2); --t: #fff; }
.av.violet { --a1: var(--violet-1); --a2: var(--violet-2); --t: #fff; }
.av.sky { --a1: var(--sky-1); --a2: var(--sky-2); --t: #fff; }

/* ---------- The gap ---------- */
.gap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 820px) { .gap-grid { grid-template-columns: 1fr; } }
.contact-card, .circle-card {
  border-radius: var(--radius-card); padding: 28px; display: grid; gap: 18px; align-content: start;
  background: var(--surface); border: 1px solid var(--line);
}
.circle-card { box-shadow: var(--shadow); border-color: transparent; }
.card-tag { font: 600 .78rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.contact-line { display: flex; justify-content: space-between; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--line); font-size: .98rem; }
.contact-line:last-child { border-bottom: 0; }
.contact-line span:first-child { color: var(--ink-soft); }
.missing { color: var(--ink-soft); font-style: italic; }
.people { display: grid; gap: 12px; }
.person { display: flex; gap: 12px; align-items: center; }
.person b { display: block; font-weight: 600; }
.person span { font-size: .9rem; color: var(--ink-soft); }
.person .when { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--brand); white-space: nowrap; }

/* ---------- Why it matters ---------- */
.why { background: var(--surface); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }
.why-item { display: grid; gap: 12px; align-content: start; }
.why-item .dot { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.why-item .dot svg { width: 22px; height: 22px; }
.why-item p { color: var(--ink-soft); }
.quote {
  margin-top: 56px; border-radius: var(--radius-panel); padding: clamp(28px, 5vw, 48px);
  background: var(--brand-tint); display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
}
.quote p { font: 600 clamp(1.25rem, 2.4vw, 1.7rem)/1.35 var(--display); letter-spacing: -.01em; }
.quote small { display: block; margin-top: 12px; font: 500 .95rem/1.4 var(--body); color: var(--ink-soft); }
@media (max-width: 640px) { .quote { grid-template-columns: 1fr; } }
.bubble { width: 84px; height: 84px; border-radius: 28px 28px 28px 8px; background: linear-gradient(160deg, var(--ground-1), var(--ground-2)); display: grid; place-items: center; }
.bubble svg { width: 40px; height: 40px; }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step { border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); padding: 28px; display: grid; gap: 14px; align-content: start; }
.step-num { font: 800 .9rem/1 var(--display); color: var(--brand); }
.step p { color: var(--ink-soft); }
.example { border-radius: 16px; background: var(--paper); padding: 14px 16px; font-size: .92rem; line-height: 1.45; }
.example em { font-style: normal; font-weight: 600; color: var(--brand); }

/* ---------- Dictation ---------- */
.dictation { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .dictation { grid-template-columns: 1fr; } }
.said {
  border-radius: var(--radius-card); padding: 28px; background: linear-gradient(160deg, var(--ground-1), var(--ground-2)); color: #fff;
  font: 500 1.25rem/1.5 var(--display); position: relative; display: grid; gap: 18px;
}
.said .mic { display: inline-flex; align-items: center; gap: 8px; font: 600 .8rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--on-stage-soft); }
.said .mic i { width: 10px; height: 10px; border-radius: 50%; background: var(--coral-2); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .said .mic i { animation: none; } }
.found { display: grid; gap: 10px; margin-top: 16px; }
.chip-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; }
.chip-row b { font-weight: 600; }
.chip-row span { color: var(--ink-soft); font-size: .92rem; }
.chip-row .date { margin-left: auto; font-weight: 600; font-size: .9rem; color: var(--brand); white-space: nowrap; }
.badge-pro { display: inline-block; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--violet-1), var(--violet-2)); color: #fff; font: 700 .78rem/1.3 var(--body); vertical-align: middle; }
.on-device { margin-top: 18px; font-size: .95rem; color: var(--ink-soft); }

/* ---------- Features ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }
.feature { background: var(--surface); border-radius: var(--radius-card); padding: 26px; display: grid; gap: 12px; align-content: start; border: 1px solid var(--line); }
.feature p { color: var(--ink-soft); font-size: .98rem; }
.tile { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.tile svg { width: 23px; height: 23px; }
.g-yellow { background: linear-gradient(135deg, var(--yellow-1), var(--yellow-2)); color: #3D2A00; }
.g-coral { background: linear-gradient(135deg, var(--coral-1), var(--coral-2)); }
.g-violet { background: linear-gradient(135deg, var(--violet-1), var(--violet-2)); }
.g-sky { background: linear-gradient(135deg, var(--sky-1), var(--sky-2)); }
.g-mint { background: linear-gradient(135deg, var(--mint-1), var(--mint-2)); color: var(--accent-ink); }
.g-ground { background: linear-gradient(160deg, var(--ground-1), var(--ground-2)); }
.langs { display: grid; gap: 6px; font-size: .92rem; }
.langs span { background: var(--paper); border-radius: 12px; padding: 8px 12px; }
.langs abbr { text-decoration: none; font-weight: 700; color: var(--brand); margin-right: 6px; font-size: .78rem; }

/* ---------- Privacy ---------- */
.privacy { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .privacy { grid-template-columns: 1fr; } }
.promises { display: grid; gap: 0; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.promise { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.promise:last-child { border-bottom: 0; }
.promise svg { width: 24px; height: 24px; color: var(--brand); margin-top: 2px; }
.promise b { display: block; font-weight: 600; }
.promise span { color: var(--ink-soft); font-size: .96rem; }

/* ---------- Pricing ---------- */
.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 820px) { .pricing { grid-template-columns: 1fr; } }
.plan { border-radius: var(--radius-panel); padding: 32px; display: grid; gap: 20px; align-content: start; background: var(--surface); border: 1px solid var(--line); }
.plan.pro { background: linear-gradient(170deg, var(--ground-1), var(--ground-2)); color: #fff; border: 0; box-shadow: var(--shadow); }
.plan h3 { font-size: 1.6rem; display: flex; align-items: center; gap: 10px; }
.price { font: 800 2.6rem/1 var(--display); letter-spacing: -.03em; }
.price small { font: 500 1rem/1 var(--body); opacity: .75; letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.plan li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.plan li svg { width: 18px; height: 18px; margin-top: 4px; color: var(--brand); }
.plan.pro li svg { color: var(--mint-1); }
.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.option { border-radius: 16px; background: rgba(255,255,255,.12); padding: 12px; display: grid; gap: 2px; }
.option b { font: 700 1.15rem/1.2 var(--display); }
.option span { font-size: .8rem; color: var(--on-stage-soft); }
@media (max-width: 420px) { .options { grid-template-columns: 1fr; } }
.trial { font-weight: 600; color: var(--mint-1); }
.option s { font: 500 .8rem/1 var(--body); color: var(--on-stage-soft); }
.plan-launch { font-size: .9rem; color: var(--on-stage-soft); margin-top: -6px; }
.plan-note { font-size: .92rem; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 820px; }
details { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 0 24px; }
summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 500 1.5rem/1 var(--body); color: var(--brand); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding-bottom: 20px; color: var(--ink-soft); max-width: 65ch; }

/* ---------- Closing ---------- */
.closing { text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding-block: 88px; }
.closing h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.closing p { color: var(--on-stage-soft); margin-top: 16px; max-width: 52ch; font-size: 1.1rem; }
@media (max-width: 820px) { .closing { grid-template-columns: 1fr; } }
.mini-ring { width: 180px; height: 180px; position: relative; }
.orbit { position: absolute; inset: 0; animation: spin 40s linear infinite; }
.orbit .av { position: absolute; width: 44px; height: 44px; box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.center-person { position: absolute; inset: 50px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.center-person svg { width: 44px; height: 44px; color: var(--ground-1); }
@media (max-width: 820px) { .mini-ring { display: none; } }
footer { padding-block: 28px 40px; border-top: 1px solid rgba(255,255,255,.15); display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; font-size: .9rem; color: var(--on-stage-soft); }
footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--on-stage); }

/* ---------- Real screenshots ---------- */
.shot {
  display: block; width: 100%; height: auto; border-radius: 36px; background: #0B1411;
  padding: 8px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.55);
}
.hero-phones { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: min(540px, 100%); }
.hero-phones figure { margin: 0; display: grid; gap: 10px; justify-items: center; }
.hero-phones figure:first-child { transform: translateY(28px) rotate(-3deg); z-index: 1; }
.hero-phones figure:last-child { transform: translateX(-14%) rotate(3deg); }
.hero-phones figcaption { font: 600 .8rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--on-stage-soft); }
.hero-phones .shot { max-width: 260px; }

/* Language switch */
.langs-nav { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.12); }
.langs-nav a { text-decoration: none; padding: 6px 10px; border-radius: 999px; font: 600 .82rem/1 var(--body); color: var(--on-stage-soft); }
.langs-nav a[aria-current="page"] { background: var(--on-stage); color: var(--ground-1); }
.nav-right { display: flex; align-items: center; gap: 24px; }

/* Gallery */
.gallery-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; }
.gallery-head .section-head { margin-bottom: 0; }
.platform { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.platform button {
  font: 600 .95rem/1 var(--body); border: 0; background: transparent; color: var(--ink-soft); padding: 10px 18px;
  border-radius: 999px; cursor: pointer;
}
.platform button[aria-pressed="true"] { background: var(--brand); color: var(--surface); }
.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 820px) { .screens { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; } }
.screens figure { margin: 0; display: grid; gap: 16px; align-content: start; scroll-snap-align: center; min-width: 0; }
.screens .shot { max-width: 300px; margin-inline: auto; }
.screens figcaption { display: grid; gap: 4px; text-align: center; }
.screens figcaption b { font: 700 1.1rem/1.3 var(--display); }
.screens figcaption span { color: var(--ink-soft); font-size: .95rem; }
.widget-band {
  margin-top: 56px; border-radius: var(--radius-panel); padding: clamp(24px, 4vw, 40px);
  background: linear-gradient(160deg, #1d2a4a, #0f1a2e 60%, #0b1411); color: #fff;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center;
}
.widget-band p { color: rgba(255,255,255,.78); margin-top: 10px; }
.widget-band img { width: 100%; max-width: 520px; height: auto; justify-self: center; filter: drop-shadow(0 20px 30px rgba(0,0,0,.4)); }
@media (max-width: 820px) { .widget-band { grid-template-columns: 1fr; } }

/* ---------- Legal pages ---------- */
.legal-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; padding-top: 28px; }
.legal-date { color: var(--on-stage-soft); margin: 12px 0 0; padding-bottom: 56px; }
.legal { max-width: 760px; padding-block: 48px 72px; font-size: 1.04rem; line-height: 1.65; }
.legal h2 { font-size: 1.45rem; font-weight: 700; margin: 40px 0 10px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal b { color: var(--ink); }
.legal ul { padding-left: 1.2em; margin: 10px 0; }
.legal li { margin: 6px 0; }
.legal a { color: var(--ink); text-underline-offset: 3px; }
.legal-lead { font-size: 1.18rem; color: var(--ink) !important; }