/* =============================================================================
   OpenGoose.AI — marketing site design system  ·  "Ink & Paper"
   Self-hosted Google Sans Flex (Lato fallback). Monochrome by design, à la
   deepmind.google: white + cool-grey surfaces, near-black ink (#121317), and
   NO brand accent colour in the chrome. Colour appears only in the model
   logos. Ink + typography carry the page. Light theme only. No third-party
   CDN, no scroll-hijacking animation.

   Type scale — anchored to values measured on deepmind.google (2026-07,
   getComputedStyle; they use the very same Google Sans Flex). Our hero runs
   one step larger (up to 4.35rem) to carry the wider 1280px column:
     display 56px  w300  ls ≈0        lh 1.00   (the bigger, the LIGHTER)
     h2      32px  w500  ls -0.017em  lh 1.06
     h3/card 20px  w500  ls ≈0        lh 1.45
     body  17.5px  w400  ls +0.012em  lh 1.45   (slight POSITIVE tracking)
     nav   14.5px  w500  — pill hover
     button 14.5px w450  — full pill (r 9999), padding 8×16
   Nothing on their site is heavier than 500. We follow the same rule: large
   text gets lighter (350 for the hero), UI text tops out at 500, and body
   copy carries a hint of positive tracking. The variable font makes the
   in-between grades (350/450/550) render exactly.
   ========================================================================== */

/* ---- Self-hosted brand type (no font-CDN request) ------------------------
   Primary: Google Sans Flex — the DeepMind typeface, released under the SIL
   Open Font License (Nov 2025), free for commercial use. Bundled locally
   (fonts/google-sans-flex.woff2, the latin weight-axis subset from the
   @fontsource-variable/google-sans-flex package) to keep the "no third-party
   CDN" privacy stance. Variable font — one file covers the whole weight axis.
   Lato below stays as the fallback while the font loads. */
@font-face{font-family:'Google Sans Flex';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/google-sans-flex.woff2') format('woff2');}
/* Fallback: self-hosted Lato */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/lato-regular.woff') format('woff');}
@font-face{font-family:'Lato';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/lato-semibold.woff') format('woff');}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/lato-bold.woff') format('woff');}

:root{
  /* Cool-neutral surfaces (Google grey ramp) */
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f8f9fa; --surface-3:#f1f3f4;
  --ink:#121317; --muted:#5f636b; --faint:#90969e;
  --border:#e8eaed; --border-strong:#d4d8dd;
  /* Radii: small controls / cards / large media blocks. Buttons are always
     full pills (999px) and don't use these tokens. */
  --radius:12px; --radius-lg:20px; --radius-xl:28px;
  --nav-h:70px;            /* sticky-nav height (anchor scroll offsets) */
  /* Content column. 1280 keeps measure comfortable at 13" while not reading
     as a thin strip on wide desktops (deepmind.google sits at ~1296). */
  --maxw:1280px; --ease:cubic-bezier(.16,1,.3,1);
  --font:'Google Sans Flex','Lato',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --shadow-sm:0 1px 2px rgba(20,22,26,.05);
  /* Layered low-alpha shadow reserved for the hero mock (contact + key +
     ambient) — everything else on the page is flat (DeepMind uses tone, not
     elevation). */
  --shadow-mock:0 1px 2px rgba(20,22,26,.05),0 12px 28px -16px rgba(20,22,26,.1),0 36px 72px -28px rgba(20,22,26,.2);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Desktop reads best one notch larger: the page was designed/reviewed at
   110% browser zoom, where the density feels right. CSS zoom performs the
   same layout-affecting scale the browser control does (standardized 2024;
   Chrome/Safari/Edge, Firefox 126+ — older engines simply ignore it and get
   the 100% design). Scoped to desktop widths so phone and tablet keep their
   native density; media queries evaluate against the UNzoomed viewport, so
   every breakpoint below behaves exactly as written. */
@media (min-width:1024px){html{zoom:1.1}}
html,body{overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400;
  line-height:1.55;font-size:17px;letter-spacing:.011em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
/* Headings: the bigger, the lighter. h1 350 / h2 400 / h3 500 — nothing
   heavier than 500 anywhere in the chrome. Slight negative tracking only on
   the big sizes; small headings sit at neutral tracking. */
h1{font-weight:350;line-height:1.05;letter-spacing:-.012em;margin:0;text-wrap:balance}
h2{font-weight:400;line-height:1.1;letter-spacing:-.016em;margin:0;text-wrap:balance}
h3{font-weight:500;line-height:1.3;letter-spacing:-.004em;margin:0}
p{margin:0;text-wrap:pretty}
/* "Bold" inline text: 550 reads as emphasis next to 400 body without the
   heavy 700 the browser would synthesise by default. */
b,strong{font-weight:550}
::selection{background:var(--ink);color:#fff}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---- Layout primitives --------------------------------------------------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* Model-logo sprite host: visually hidden but never display:none — Safari
   drops <use>-referenced gradients defined inside a display:none subtree. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.section{padding:92px 0}
.section--tight{padding:56px 0}
.section-head{max-width:680px}
.section-head h2{font-size:clamp(1.95rem,3.4vw,2.6rem)}
.section-head p{color:var(--muted);font-size:1.1rem;margin-top:14px;max-width:56ch}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center p{margin-left:auto;margin-right:auto}

/* ---- Buttons --------------------------------------------------------------
   Full pills, weight 450, no hover lift — hover changes tone only. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:inherit;
  font-weight:450;font-size:.92rem;letter-spacing:.01em;line-height:1;padding:.62rem 1.25rem;
  border-radius:999px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#33363d}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn-ghost:hover{background:rgba(18,19,23,.05)}
.btn-lg{font-size:1rem;padding:.8rem 1.55rem}
.btn-block{width:100%}

/* ---- Brand mark (the same animated mark chat.opengoose.ai uses) -----------
   Goose PNG + a "thinking" scribble that traces over the head-tangle on a
   loop (hover speeds it up and lifts the goose). Path and timings are copied
   verbatim from the app's sign-in page so both surfaces feel like one brand.
   The wordmark is a single ink colour — ".AI" is part of the name, not an
   accent. */
.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand__goose{position:relative;width:30px;display:inline-block;line-height:0}
.brand__goose img{width:100%;height:auto;transform-origin:60% 55%;transition:transform .25s var(--ease),filter .25s var(--ease)}
.brand__scribble{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.brand__scribble path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30 70;animation:brand-scribble 1.7s linear infinite}
.brand:hover .brand__goose img{transform:scale(1.08) translateY(-1px);filter:drop-shadow(0 2px 6px rgba(18,19,23,.28))}
.brand:hover .brand__scribble path{animation-duration:.85s}
@keyframes brand-scribble{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.brand__scribble path{animation:none}}
.brand__word{font-weight:500;font-size:1.22rem;letter-spacing:-.01em;color:var(--ink)}

/* ---- Navbar --------------------------------------------------------------
   Transparent at the top so it blends into the page (à la deepmind.google).
   On scroll a frosted panel fades in — and, like DeepMind, its bottom edge
   fades out through a gradient mask (no hard divider line). The frosted layer
   lives on a ::before pseudo so the nav content stays fully opaque above it. */
.nav{position:sticky;top:0;z-index:60;background:transparent}
.nav::before{content:'';position:absolute;inset:0 0 -22px 0;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity .3s var(--ease);
  background:linear-gradient(to bottom,rgba(255,255,255,.85),rgba(255,255,255,.72) 55%,rgba(255,255,255,0));
  -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent);
  mask-image:linear-gradient(to bottom,#000 58%,transparent)}
.nav--scrolled::before{opacity:1}
.nav__inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:18px 24px 12px;display:flex;align-items:center;gap:18px}
.nav__links{display:flex;align-items:center;gap:2px;margin-left:14px}
/* Menu items: translucent rounded pill on hover, exactly the DeepMind nav. */
.nav__links a{color:var(--ink);font-weight:500;font-size:.92rem;padding:.5rem .85rem;border-radius:999px;
  transition:background .18s var(--ease)}
.nav__links a:hover{background:rgba(18,19,23,.06)}
.nav__spacer{flex:1}
.nav__cta{display:flex;align-items:center;gap:10px}
/* Language picker — globe pill that opens a frosted-glass panel (the
   deepmind.google dropdown grammar: translucent white, heavy blur, large
   radius, soft distant shadow, rounded option rows with a check on the
   current language). Wired by assets/i18n.js; hidden until then so a no-JS
   visitor never sees a dead control. */
.nav__lang{position:relative;display:none}
.nav__lang.is-ready{display:block}
.nav__lang-btn{display:inline-flex;align-items:center;gap:.35rem;border:0;background:transparent;cursor:pointer;
  color:var(--muted);font-family:inherit;font-size:.92rem;font-weight:500;padding:.5rem .75rem;border-radius:999px;
  transition:background .18s var(--ease),color .18s var(--ease)}
.nav__lang-btn:hover,.nav__lang.open .nav__lang-btn{background:rgba(18,19,23,.06);color:var(--ink)}
.nav__lang-btn svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav__lang-btn .nav__lang-caret{width:11px;height:11px;transition:transform .18s var(--ease)}
.nav__lang.open .nav__lang-caret{transform:rotate(180deg)}
.nav__lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:184px;padding:6px;
  border-radius:18px;border:1px solid rgba(18,19,23,.08);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 24px 48px -20px rgba(20,22,26,.28),0 4px 14px rgba(20,22,26,.07);
  opacity:0;visibility:hidden;transform:translateY(-4px) scale(.98);transform-origin:top right;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.nav__lang.open .nav__lang-menu{opacity:1;visibility:visible;transform:none}
.nav__lang-menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:450;color:var(--ink);text-align:left;padding:9px 12px;border-radius:12px;
  transition:background .15s var(--ease)}
.nav__lang-menu button:hover{background:rgba(18,19,23,.06)}
.nav__lang-menu .check{width:15px;height:15px;flex:0 0 auto;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.nav__lang-menu button[aria-selected="true"]{font-weight:500}
.nav__lang-menu button[aria-selected="true"] .check{opacity:1}
/* Language row inside the burger panel (≤900px) — the bar has no room for
   the frosted dropdown on small screens, so the choice lives with the nav
   links. It is COLLAPSED by default: one "Language · English" row whose tap
   reveals the option rows inline (an always-expanded language pair reads as
   clutter in a menu). i18n.js wires it and keeps [data-lang-label] current;
   hidden until wired (.is-ready) so a no-JS visitor never sees a dead row. */
.nav__menu-lang{display:none;margin-top:8px;padding-top:10px;border-top:1px solid var(--border)}
.nav__menu-lang-btn{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:500;color:var(--ink);text-align:left;padding:.7rem .85rem;border-radius:var(--radius);
  transition:background .18s var(--ease)}
.nav__menu-lang-btn:hover{background:rgba(18,19,23,.06)}
.nav__menu-lang-btn .globe{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav__menu-lang-cur{margin-left:auto;font-weight:450;color:var(--muted)}
.nav__menu-lang-btn .caret{width:11px;height:11px;flex:0 0 auto;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s var(--ease)}
.nav__menu-lang.open .nav__menu-lang-btn .caret{transform:rotate(180deg)}
.nav__menu-lang-opts{display:none;padding:2px 0 4px}
.nav__menu-lang.open .nav__menu-lang-opts{display:block}
.nav__menu-lang-opts button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:450;color:var(--ink);text-align:left;padding:.6rem .85rem;border-radius:var(--radius);
  transition:background .15s var(--ease)}
.nav__menu-lang-opts button:hover{background:rgba(18,19,23,.06)}
.nav__menu-lang-opts .check{width:15px;height:15px;flex:0 0 auto;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.nav__menu-lang-opts button[aria-selected="true"]{font-weight:500}
.nav__menu-lang-opts button[aria-selected="true"] .check{opacity:1}
.nav__burger{display:none;margin-left:auto;background:none;border:1px solid var(--border-strong);
  border-radius:10px;width:40px;height:38px;cursor:pointer;align-items:center;justify-content:center}
.nav__burger span,.nav__burger span::before,.nav__burger span::after{content:'';display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:.2s var(--ease)}
.nav__burger span::before{position:absolute;top:-6px}.nav__burger span::after{position:absolute;top:6px}

/* ---- Hero ------------------------------------------------------------------
   Content-sized, not viewport-sized. The old 100svh treatment pinned the
   "works with" strip to the fold, but on tall/wide windows it stretched a
   ~560px composition across ~900px and the slack read as dead space above
   and below the copy. Fixed vertical rhythm keeps the composition tight at
   every window size, and on large screens the strip + feature grid peeking
   above the fold is a better scroll cue than a hard bottom edge. */
.hero__inner{width:100%;padding:72px 0 96px}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(48px,5vw,84px);align-items:center;width:100%}
.hero h1{font-size:clamp(2.7rem,5vw,4.35rem)}
/* CJK display sizes run one step smaller with a touch more leading — ideographs
   have no ascender rhythm, so latin-sized display type reads oversized and
   wraps into orphan characters on phones. */
html:lang(zh-Hans) .hero h1{font-size:clamp(2.35rem,4.6vw,4.05rem);line-height:1.16}
html:lang(zh-Hans) h2{line-height:1.22}
.hero__lede{color:var(--muted);font-size:1.14rem;line-height:1.6;margin:22px 0 0;max-width:40ch}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.hero__note{margin-top:18px;color:var(--faint);font-size:.9rem}
.hero__visual{position:relative}

/* The one-line thesis under the lede. The key word carries a hand-drawn
   scribble underline — the same gesture as the goose's thinking scribble, so
   the brand mark and the message share a pen. Drawn as a background image on
   an ::after so the i18n textContent swap can never delete it. */
.hero__thesis{margin:18px 0 30px;font-weight:500;color:var(--ink);font-size:1.08rem}
.scribble-u{position:relative;white-space:nowrap}
.scribble-u::after{content:'';position:absolute;left:-2%;right:-2%;bottom:-.34em;height:.42em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 18 3, 36 8.5, 58 5.5 S 96 3.5, 118 6.5' fill='none' stroke='%23121317' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* Inline model mentions in the lede: brand mark + name, sized to the text.
   The icon hangs off the baseline like a character (display:inline + a small
   negative vertical-align — the classic baseline-safe trick), so the line
   reads as prose, not as a row of chips. */
.hero__lede .mname{font-weight:500;color:var(--ink);white-space:nowrap}
.hero__lede .mname svg{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.18em;margin-right:.3em}

/* Chat mockup card (hand-built, no screenshot). The window tells the product
   story in one glance: the SAME prompt answered by two models, each reply
   signed with its maker's coloured mark, and a composer whose model chip
   shows — and implies you can switch — what you're talking to. */
.mock{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-mock);overflow:hidden}
/* Window chrome: white bar, hairline seam, small soft traffic-light dots. */
.mock__bar{position:relative;display:flex;align-items:center;gap:6px;padding:14px 18px;border-bottom:1px solid var(--border)}
.mock__dot{width:8px;height:8px;border-radius:50%;background:var(--border-strong)}
.mock__title{position:absolute;left:50%;transform:translateX(-50%);font-size:.78rem;font-weight:500;letter-spacing:.01em;color:var(--muted);white-space:nowrap}
/* Flex column with the composer pinned to the bottom: during playback the
   replies grow line by line, and this keeps the composer perfectly still
   inside the height-locked body (messages grow downward toward it). */
.mock__body{padding:22px 22px 18px;display:flex;flex-direction:column}
.mock__composer{margin-top:auto}
/* User turns: ink pill, right-aligned. */
.msg--user{width:fit-content;max-width:78%;margin-left:auto;background:var(--ink);color:var(--bg);
  padding:9px 15px;border-radius:18px 18px 6px 18px;font-size:.92rem;line-height:1.5}
/* Model turns: no bubble — a byline (mark + name) over plain text, the way
   the app itself renders replies. */
.msg--ai{margin:18px 0 22px}
.msg__byline{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:500;letter-spacing:.01em;color:var(--muted);margin-bottom:8px}
.msg__byline svg{width:15px;height:15px;flex:0 0 auto}
.msg__text{color:var(--ink);font-size:.95rem;line-height:1.6;max-width:95%}
/* ---- Hero mock playback (wired by site.js) ---------------------------------
   The window replays the conversation on a loop: each user turn slides in,
   the model "thinks" (shimmer), then the reply streams in character by
   character while the composer chip switches to the model that's answering.
   The markup ships fully rendered — no JS, reduced-motion, and crawlers all
   see the finished conversation; site.js measures and locks the body height
   before hiding anything, so replay never reflows the page below. */
.msg{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.msg.is-hidden{opacity:0;transform:translateY(7px)}
/* "Thinking…" placeholder: a text shimmer sweeping left→right, the same
   status grammar the app itself uses before the first token arrives. */
.msg__think{display:inline-block;
  background:linear-gradient(90deg,var(--faint) 0%,var(--faint) 35%,var(--ink) 50%,var(--faint) 65%,var(--faint) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:think-shimmer 1.25s linear infinite}
@keyframes think-shimmer{from{background-position:120% 0}to{background-position:-100% 0}}
/* Streaming caret while a reply is typing (an ::after, so the text node can
   grow freely under it). */
.msg--typing .msg__text::after{content:'';display:inline-block;width:2px;height:.95em;background:var(--ink);
  margin-left:3px;vertical-align:-.12em;animation:mock-caret 1.1s steps(2,start) infinite}
@keyframes mock-caret{to{visibility:hidden}}
/* Composer chip pops when the model switches — the product story in 300ms. */
.composer__model.is-switching{animation:chip-pop .3s var(--ease)}
@keyframes chip-pop{40%{transform:scale(1.08)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .msg__think,.msg--typing .msg__text::after,.composer__model.is-switching{animation:none}
}
/* Composer: the stacked two-row card modern AI apps ship — prompt line on
   top, controls underneath: a model chip carrying the CURRENT model's mark
   and name (the visible name is what sells "switchable"), then mic + send. */
.mock__composer{border:1px solid var(--border-strong);border-radius:18px;padding:12px 12px 10px 14px;margin-top:4px}
.composer__input{color:var(--faint);font-size:.92rem;line-height:1.4;margin-bottom:12px}
.composer__row{display:flex;align-items:center;gap:8px}
.composer__model{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border-radius:999px;padding:5px 10px;font-size:.78rem;font-weight:500;color:var(--ink)}
.composer__model .logo{width:14px;height:14px;flex:0 0 auto}
.composer__model .caret{width:10px;height:10px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.composer__spacer{flex:1}
.composer__mic{display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--muted)}
.composer__mic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.composer__send{width:28px;height:28px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.composer__send svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- "Works with" strip ------------------------------------------------------
   A bare logo line that closes the hero — no band fill, no rule. The coloured
   marks are separation enough; a grey box here read as a heavy, unexplained
   "zone" between the hero and the first section. */
.models{background:transparent}
.models__inner{max-width:var(--maxw);margin:0 auto;padding:0 24px 64px;display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;justify-content:center}
.models__label{color:var(--faint);font-size:.85rem;font-weight:450}
.chip{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-weight:450;font-size:.98rem;transition:color .18s var(--ease)}
/* Real brand marks (@lobehub/icons, same set the app ships). Colour is baked
   into the sprite symbols, so a chip is just a sized <use> stamp. */
.chip__logo{width:20px;height:20px;flex:0 0 auto}
.chip:hover{color:var(--ink)}

/* ---- Feature grid ---------------------------------------------------------
   Flat tonal tiles on a white page — DeepMind card grammar: grey surface,
   large radius, no border, no shadow; hover deepens the tone. Icons sit bare
   on the tile (no chip box), drawn in ink. */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.card{background:var(--surface-2);border-radius:var(--radius-lg);padding:28px 26px;
  transition:background .2s var(--ease)}
.card:hover{background:var(--surface-3)}
.card__icon{margin-bottom:18px}
.card__icon svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.16rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.98rem;line-height:1.55}
/* A quiet row of brand marks under a card's copy — the only colour on the
   grid, carried (as everywhere) by the logos themselves. */
.card__logos{display:flex;align-items:center;gap:10px;margin-top:16px}
.card__logos svg{width:18px;height:18px;flex:0 0 auto}

/* ---- Split feature rows (About) ------------------------------------------ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split + .split{margin-top:44px}
.split--rev .split__media{order:2}
.split__media{background:var(--surface-2);border-radius:var(--radius-lg);padding:26px;min-height:220px;
  display:flex;align-items:center;justify-content:center}
.split h3{font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:450;margin-bottom:12px}
.split p{color:var(--muted);font-size:1.06rem}
.split ul{list-style:none;padding:0;margin:16px 0 0}
.split li{display:flex;gap:10px;align-items:flex-start;margin:9px 0;color:var(--ink);font-size:1rem}

/* Checkmark bullets (shared by About lists and pricing plans). Drawn with a
   CSS mask over currentColor so the same rule works on light and dark cards —
   the tick simply inherits the list item's text colour. */
.split li::before,.plan__feats li::before{content:'';flex:0 0 auto;width:16px;height:16px;margin-top:4px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- Home "a closer look" mocks --------------------------------------------
   Three miniature product surfaces, hand-built like the hero mock (no
   screenshots): a model picker, in-chat image generation, and the memory
   panel. They all share .tourmock — a small white card sitting on the tonal
   split__media tile. Mock copy stays in English in every locale, like the
   hero window: these read as product screenshots, not page prose. */
.split__kicker{font-size:.8rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.split__media--tall{min-height:300px;padding:34px}
#tour .split{margin-top:56px}
.tourmock{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);width:min(340px,100%);padding:10px}
.tourmock__head{font-size:.78rem;font-weight:500;letter-spacing:.01em;color:var(--faint);padding:6px 12px 8px}
/* Model picker rows — the current model carries a tonal fill and a check. */
.pick__row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:.92rem;font-weight:450;color:var(--ink)}
.pick__row svg:first-child{width:16px;height:16px;flex:0 0 auto}
.pick__row .check{margin-left:auto;width:15px;height:15px;flex:0 0 auto;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.pick__row--on{background:var(--surface-3)}
.pick__row--on .check{opacity:1}
/* In-chat image generation — prompt pill above the finished picture (a real
   generated image; colour is content here, the same rule that lets the model
   logos carry colour). */
.gen{display:flex;flex-direction:column;gap:16px;padding:4px}
.gen__prompt{width:fit-content;max-width:88%;margin-left:auto;background:var(--ink);color:#fff;
  padding:8px 14px;border-radius:16px 16px 5px 16px;font-size:.88rem;line-height:1.45}
.gen__img{position:relative;border-radius:14px;overflow:hidden}
.gen__img img{display:block;width:100%;height:auto}
.gen__tag{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.92);border-radius:999px;padding:4px 11px;font-size:.74rem;font-weight:500;color:var(--ink)}
/* Memory panel rows — the newest memory is highlighted with a tonal fill. */
.mem__row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;font-size:.9rem;line-height:1.45;color:var(--ink)}
.mem__row svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mem__row--new{background:var(--surface-3)}
.mem__badge{margin-left:auto;align-self:center;font-size:.72rem;font-weight:500;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:2px 8px;white-space:nowrap}
.mem__row--new .mem__badge{background:#fff}

/* ---- Connector marquee ------------------------------------------------------
   Two counter-drifting rows of official app marks, contained in one large
   rounded tonal shell (the Typeless grammar) rather than bleeding to the
   viewport edges. Each row holds its tile set TWICE and slides -50%, so the
   loop is seamless; rows fade out at the shell's edges through a mask. Pure
   CSS animation; reduced-motion pins it still. */
.mq-shell{margin-top:44px;border-radius:var(--radius-xl);background:var(--surface-2);padding:26px 0;overflow:hidden}
.mq{overflow:hidden;display:grid;gap:14px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.mq__track{display:flex;gap:14px;width:max-content;animation:mq-drift 56s linear infinite}
.mq__track--rev{animation-direction:reverse;animation-duration:64s}
@keyframes mq-drift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq__track{animation:none}}
/* App tiles: white cards on the tonal shell, official-coloured marks
   (non-square viewBoxes centre themselves via preserveAspectRatio). */
.mq__tile{flex:0 0 auto;width:64px;height:64px;border-radius:16px;background:var(--surface);
  box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center}
.mq__tile svg{width:30px;height:30px}

/* ---- Testimonials -----------------------------------------------------------
   A full-bleed tonal band with WHITE quote cards — the inverse of the
   feature grid (grey cards on white), which keeps the page's surfaces
   alternating and gives the quotes their own quiet room. Avatars are
   initial monograms on soft tints (no stock faces). */
#voices{background:var(--surface-2)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.quote{background:var(--surface);border-radius:var(--radius-lg);padding:26px 24px;display:flex;flex-direction:column;gap:18px}
.quote p{color:var(--ink);font-size:1rem;line-height:1.6;flex:1}
.quote p::before{content:'\201C'}
.quote p::after{content:'\201D'}
.quote__who{display:flex;align-items:center;gap:11px}
.quote__ava{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:500;background:var(--tint,var(--surface-3));color:var(--tint-ink,var(--ink))}
.quote__name{font-size:.92rem;font-weight:500;line-height:1.3}
.quote__role{font-size:.84rem;color:var(--muted)}

/* ---- Privacy band ---------------------------------------------------------
   One dark, round-cornered statement block — left-aligned editorial copy,
   neutral whites (no warm tints). */
.band{background:var(--ink);color:#fff;border-radius:var(--radius-xl);padding:clamp(40px,5vw,64px)}
.band h2{font-size:clamp(1.8rem,3.2vw,2.4rem);color:#fff;max-width:24ch}
.band p{color:rgba(255,255,255,.72);font-size:1.12rem;max-width:60ch;margin-top:16px}

/* ---- Pricing ------------------------------------------------------------- */
.toggle{display:inline-flex;align-items:center;gap:12px;margin:6px 0 34px;color:var(--muted);font-weight:450;font-size:.95rem}
.toggle__switch{width:52px;height:30px;border-radius:999px;background:var(--border-strong);border:none;position:relative;cursor:pointer;transition:background .2s var(--ease)}
.toggle__switch::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease)}
.toggle__switch[aria-checked="true"]{background:var(--ink)}
.toggle__switch[aria-checked="true"]::after{transform:translateX(22px)}
.toggle .on{color:var(--ink);font-weight:500}
.save{color:var(--ink);font-weight:500;background:var(--surface-3);border-radius:999px;padding:2px 9px;font-size:.8rem}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{background:var(--surface-2);border-radius:var(--radius-lg);padding:30px 28px;display:flex;flex-direction:column}
/* Featured plan: inverted ink card — tone does the emphasis, not ornament. */
.plan--featured{background:var(--ink);color:#fff}
.plan--featured h3{color:#fff}
.plan--featured .plan__desc{color:rgba(255,255,255,.72)}
.plan--featured .plan__per,.plan--featured .plan__billed{color:rgba(255,255,255,.55)}
.plan--featured .plan__feats li{color:#fff}
.plan--featured .btn-primary{background:#fff;color:var(--ink)}
.plan--featured .btn-primary:hover{background:#eceef0}
.plan__tag{display:inline-flex;align-self:flex-start;background:rgba(255,255,255,.14);color:#fff;
  font-size:.74rem;font-weight:500;letter-spacing:.02em;padding:4px 11px;border-radius:999px;margin-bottom:14px}
.plan h3{font-size:1.25rem}
.plan__desc{color:var(--muted);font-size:.96rem;margin:6px 0 16px;min-height:44px}
.plan__price{display:flex;align-items:baseline;gap:6px}
/* Big numbers set light — the Google way of pricing typography. */
.plan__amt{font-size:2.9rem;font-weight:330;letter-spacing:-.02em;line-height:1}
.plan__per{color:var(--faint);font-size:.95rem}
.plan__billed{color:var(--faint);font-size:.85rem;margin-top:6px;min-height:20px}
.plan .btn{margin:20px 0 6px}
.plan__feats{list-style:none;padding:0;margin:14px 0 0}
.plan__feats li{display:flex;gap:9px;align-items:flex-start;margin:9px 0;color:var(--ink);font-size:.96rem}

/* ---- Download cards ------------------------------------------------------ */
.dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.dl__card{background:var(--surface-2);border-radius:var(--radius-lg);padding:30px 26px;text-align:center;
  display:flex;flex-direction:column;transition:background .2s var(--ease)}
.dl__card:hover{background:var(--surface-3)}
/* Platform marks on the tiles: stroke glyphs (web) and official filled logos
   (Apple / Google Play) share one size; the fill/stroke mode is explicit per
   icon so a logo never inherits the wrong paint. */
.dl__icon{width:36px;height:36px;margin:4px auto 16px;display:block}
.dl__icon--stroke{stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dl__icon--fill{fill:var(--ink)}
.dl__card h3{font-size:1.16rem;margin-bottom:6px}
.dl__card p{color:var(--muted);font-size:.95rem;margin-bottom:18px;flex:1}
/* One consistent action per platform: a primary pill with the platform mark
   inside (the Claude-download-page grammar) — no mixed button colours. */
.dl__card .btn{gap:.55rem}
.btn__logo{width:16px;height:16px;flex:0 0 auto}
.btn__logo--stroke{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn__logo--fill{fill:currentColor}
.tag-soon{display:inline-block;font-size:.82rem;font-weight:450;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:5px 14px}

/* ---- App-store badges (official badge style, own footer column) ---------- */
.footer__stores{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:5px}
.footer__stores a{line-height:0;transition:opacity .18s var(--ease)}
.footer__stores a:hover{opacity:.85}
.footer__stores img{height:40px;width:auto;display:block}

/* ---- CTA band ------------------------------------------------------------ */
.cta{text-align:center}
.cta h2{font-size:clamp(2rem,3.8vw,2.9rem)}
.cta p{color:var(--muted);font-size:1.12rem;margin:14px auto 28px;max-width:46ch}
.cta .hero__cta{justify-content:center}

/* ---- FAQ -------------------------------------------------------------------
   Laid out as a two-column spread inside .faq-grid: the section heading sits
   in the left column, the accordion in the right. (A centred 760px list under
   a left-aligned heading read as misaligned on wide screens.) */
.faq-grid{display:grid;grid-template-columns:.85fr 1.5fr;gap:clamp(32px,5vw,88px);align-items:start}
.faq-grid .section-head{max-width:none}
.faq{max-width:760px;margin:6px 0 0}
.faq details{border-bottom:1px solid var(--border);padding:18px 4px}
.faq summary{cursor:pointer;font-weight:500;font-size:1.04rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--muted);font-weight:400;font-size:1.2rem;line-height:1;transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin-top:12px;font-size:1rem;max-width:64ch}
/* Inline links inside running text stay recognisable without colour. */
.faq p a,.section-head p a,.split p a{text-decoration:underline;text-underline-offset:3px}

/* ---- Footer -------------------------------------------------------------- */
.footer{border-top:1px solid var(--border);background:var(--surface);margin-top:20px}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:56px 24px 44px;display:grid;grid-template-columns:1.3fr repeat(3,.8fr) auto;gap:32px}
.footer__brandcol p{color:var(--muted);font-size:.95rem;margin:14px 0 18px;max-width:34ch}
.footer__social{display:flex;gap:10px}
.footer__social a{width:38px;height:38px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);
  transition:background .18s var(--ease),color .18s var(--ease)}
.footer__social a:hover{color:var(--ink);background:var(--surface-2)}
.footer__social svg{width:17px;height:17px;fill:currentColor}
.footer__col h4{font-size:.92rem;font-weight:500;letter-spacing:.02em;color:var(--muted);margin:0 0 14px}
.footer__col a{display:block;color:var(--ink);font-size:.98rem;padding:5px 0;transition:color .18s var(--ease)}
.footer__col a:hover{color:var(--muted)}
/* Copyright sits under the brand block (Notion-style) — no extra divider bar. */
.footer__copy{color:var(--faint);font-size:.88rem;margin:22px 0 0}

/* ---- Responsive ------------------------------------------------------------
   The nav collapses to the burger at 900px, not 640: with four links, the
   language pill and the CTA the full bar needs ~780px, so the 641–900 band
   used to overflow the viewport (the classic "page renders zoomed-out /
   shoved left" failure on tablets and phone-landscape). */
@media (max-width:900px){
  .nav__links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--bg);border-bottom:1px solid var(--border);padding:10px 20px 16px;gap:2px;margin:0}
  .nav__links.open{display:flex}
  .nav__links a{padding:.7rem .85rem;border-radius:var(--radius)}
  .nav__lang.is-ready{display:none}
  .nav__menu-lang.is-ready{display:block}
  .nav__burger{display:inline-flex;flex:0 0 auto}
  .hero__inner{padding:44px 0 60px}
  .hero__grid{grid-template-columns:1fr;gap:36px}
  /* Stacked hero: the mock card centres itself (left-pinned at 460px it read
     as listing to the left on tablets / phone-landscape). */
  .hero__visual{max-width:460px;margin-left:auto;margin-right:auto}
  .features,.plans,.dl{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:24px}
  .split--rev .split__media{order:0}
  .split__media--tall{min-height:240px;padding:26px}
  .faq-grid{grid-template-columns:1fr;gap:12px}
  .quotes{grid-template-columns:1fr}
  .mq-shell{margin-top:32px;border-radius:22px;padding:18px 0}
  .mq__tile{width:56px;height:56px;border-radius:14px}
  .mq__tile svg{width:26px;height:26px}
  .footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .section{padding:60px 0}
  .nav__inner{padding:14px 16px 10px;gap:8px}
  .nav__cta .btn{padding:.55rem .9rem}
  .footer__inner{grid-template-columns:1fr 1fr;gap:24px}
  .hero__inner{padding:28px 0 48px}
  .models__inner{gap:12px 18px;padding:18px 20px}
  /* Phones centre the hero + section heads. The desktop page balances its
     left-ragged editorial type against the mock card in the RIGHT grid
     column; stacked into one column that counterweight is gone and every
     block hugging the left edge read as a page listing to one side
     (user-reported, 2026-07). Body copy inside cards / split rows stays
     left-set — centring is for the display blocks only. */
  .hero__copy{text-align:center}
  .hero__lede{margin-left:auto;margin-right:auto}
  .hero__cta{justify-content:center}
  .section-head{text-align:center;margin-left:auto;margin-right:auto}
  .section-head p{margin-left:auto;margin-right:auto}
}
/* Very narrow phones: shave the brand so brand + CTA + burger always fit. */
@media (max-width:400px){
  .brand__word{font-size:1.12rem}
  .nav__cta .btn{padding:.5rem .8rem}
}