/* ==========================================================================
   Bento — bentoai.dev
   Product-forward, premium dark. Geometric sans (Geist), one family.
   The only saturated color on the page is STATE color — and it only ever
   appears where it means something (a pane's status, a diff, the prompt).
   Everything else is graphite and near-white. No purple, no warm paper.
   ========================================================================== */

@font-face { font-family:"Geist"; src:url("/assets/fonts/geist-sans-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist"; src:url("/assets/fonts/geist-sans-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist"; src:url("/assets/fonts/geist-sans-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist"; src:url("/assets/fonts/geist-sans-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("/assets/fonts/geist-mono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("/assets/fonts/geist-mono-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }

:root {
  /* Cool graphite base — deeper and cleaner than the app's warm IDE shell. */
  --bg:        #0A0B0D;
  --bg-2:      #0D0E11;
  --surface:   #131519;
  --surface-2: #191C21;
  --surface-3: #212429;
  --line:      rgba(255,255,255,0.075);
  --line-2:    rgba(255,255,255,0.12);
  --line-3:    rgba(255,255,255,0.18);

  --ink:       #F4F5F7;
  --ink-dim:   #9EA2AB;
  --ink-mute:  #676B74;
  --ink-faint: #454951;

  /* Pane-state palette — the product's language, kept exact. The page's
     entire accent system. */
  --working: #0A84FF;
  --await:   #FF9F0A;
  --done:    #30D158;
  --idle:    #8A8F99;
  --emerald: #4ADE80;   /* brand spark: logo mark, prompt cursor — used sparingly */
  --del:     #FF6B6B;   /* diff semantics only */

  --sans: "Geist", system-ui, -apple-system, "Segoe UI", "PingFang SC", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --w: min(1120px, calc(100vw - 44px));
  --r: 14px;            /* consistent premium radius — no gimmick corners */
  --r-lg: 20px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Atmosphere: a single cool spotlight high behind the hero + faint grain.
   No colored blooms — restraint reads as premium. */
.atmosphere { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.atmosphere::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60rem 40rem at 50% -14rem, rgba(120,150,200,0.10), transparent 62%),
    radial-gradient(90rem 60rem at 50% -20rem, rgba(74,222,128,0.035), transparent 60%);
}
.atmosphere::after {
  content: ""; position: absolute; inset: 0; opacity: 0.028; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { width: var(--w); margin-inline: auto; }
.wrap.wide { width: min(1280px, calc(100vw - 40px)); }
a { color: inherit; text-decoration: none; }
b, strong { color: var(--ink); font-weight: 600; }
::selection { background: rgba(74,222,128,0.24); color: #fff; }

/* ---- Typography ---------------------------------------------------------- */
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
h1 { font-size: clamp(38px, 6.6vw, 82px); letter-spacing: -0.04em; line-height: 1.0; font-weight: 600; }
h2 { font-size: clamp(29px, 4.2vw, 50px); letter-spacing: -0.032em; }
h3 { font-size: 18px; letter-spacing: -0.02em; }

.kicker {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
  margin: 0 0 18px;
}
.kicker.state { color: var(--working); }
/* State words wear their own state colour. This is the one place on the page
   where accent is worth spending, because it isn't decoration: it teaches the
   reader the code — blue is working, amber wants you — a screen before the
   captures make them rely on it. Everywhere else stays graphite on purpose;
   a colour that means something cannot also be used for emphasis. */
.st { font-weight: 500; }
.st.w { color: var(--working); }
.st.a { color: var(--await); }
.st.d { color: var(--done); }
.st.i { color: var(--idle); }
.lede { font-size: clamp(16.5px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-dim); font-weight: 400; }
kbd {
  font-family: var(--mono); font-size: 0.82em; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 6px; padding: 1px 6px; color: var(--ink);
}
code { font-family: var(--mono); font-size: 0.88em; color: var(--emerald); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  padding: 12px 22px; border-radius: 11px; border: 1px solid transparent;
  cursor: pointer; transition: transform .18s var(--ease), background .18s, border-color .18s, box-shadow .18s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink); color: #0A0B0D; font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 24px rgba(0,0,0,0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 14px 34px rgba(0,0,0,0.5); }
.btn-ghost { background: rgba(255,255,255,0.03); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: var(--line-3); transform: translateY(-2px); }
.btn-nav { padding: 9px 18px; font-size: 14px; }

/* ---- Nav ----------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 50; padding: 14px 0; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.nav.stuck { background: rgba(10,11,13,0.72); backdrop-filter: saturate(160%) blur(16px); border-bottom-color: var(--line); }
.nav-in { width: var(--w); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; font-size: 17px; }
.logo img { width: 26px; height: 26px; border-radius: 7px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a:not(.btn) { color: var(--ink-dim); font-size: 14.5px; font-weight: 500; transition: color .18s; }
.nav-links a:not(.btn):hover { color: var(--ink); }

/* ---- Hero ----------------------------------------------------------------
   No badge above the H1. The pill-with-a-pulsing-dot ("✦ Free & open source")
   is the single most recognisable tell of a generated landing page, and it was
   carrying facts the trust strip already states. The headline now opens the
   page cold, and the same facts sit under the buttons as a quiet mono line —
   which is where a reader who has decided to act actually looks, and the form
   this page already uses at the bottom CTA. Top padding absorbs the ~63px the
   badge used to occupy, so the H1 doesn't crowd the nav. */
.hero { text-align: center; padding: clamp(88px, 15vh, 156px) 0 0; }
.hero h1 { max-width: 15ch; margin-inline: auto; }
.hero h1 em { font-style: normal; color: var(--emerald); }
.hero .sub { max-width: 40ch; margin: 26px auto 0; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; color: var(--ink-dim); }
.cta-row { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.cta-caption { margin-top: 18px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink-mute); }

/* ---- Product showcase (the hero's star) ---------------------------------- */
.showcase-wrap { width: min(1200px, calc(100vw - 32px)); margin: clamp(44px, 7vw, 84px) auto 0; position: relative; }
.showcase-wrap::before { /* soft floor glow under the window */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -6%; height: 40%;
  background: radial-gradient(60% 100% at 50% 0, rgba(120,150,200,0.16), transparent 70%);
  filter: blur(18px); z-index: -1;
}
/* The three devices. The bezels are drawn here rather than composited from
   product renders: Apple's device images sit behind a developer login and a
   separate marketing-use agreement, and an external asset would be blocked by
   the page's CSP regardless. Drawn, they also stay sharp at every size.

   Sizing is in `cqw` — 1em = 1% of the hero's width — so bezel thickness,
   corner radii and the notch scale with the artwork instead of turning into
   heavy black frames on a phone.

   The screen is NOT given an aspect-ratio: the image sits at its natural ratio
   and the bezel is padding around it. That is what guarantees no black bars —
   there is no box for the picture to fail to fill, whatever a future capture
   measures.

   Separation is the whole problem here. Bezel, screenshot and page background
   are all near-black, so three devices in front of each other read as one dark
   smudge. Three things fix it, and all three are needed:
     1. the bezel is a lit metal gradient, not flat black;
     2. a hairline rim of light traces each outer edge;
     3. each device casts a real shadow, offset toward the viewer, so the one
        in front visibly sits above the one behind. */
.showcase-wrap { container-type: inline-size; }
.family { position: relative; width: 100%; aspect-ratio: 1200 / 500; font-size: 1cqw; }
.dev { position: absolute; bottom: 0; }

.dev-screen {
  position: relative; padding: var(--bz);
  border-radius: calc(var(--scr) + var(--bz));
  background: linear-gradient(152deg, #5E636D 0%, #3B3F46 24%, #24272C 56%, #0F1114 100%);
}
.dev-screen img { display: block; width: 100%; height: auto; border-radius: var(--scr); }
/* Glass: a light raking across the top-left of the panel only. Kept under 10%
   or it fogs the terminal type underneath, which is the whole subject. */
.dev-screen::before {
  content: ""; position: absolute; inset: var(--bz); border-radius: var(--scr); z-index: 2;
  background: linear-gradient(146deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.07) 30%, rgba(255,255,255,0.01) 52%, transparent 70%);
  pointer-events: none;
}
/* Seats the screen into the bezel — without it the two dark surfaces meet with
   no edge and the panel looks painted on. */
.dev-screen::after {
  content: ""; position: absolute; inset: var(--bz); border-radius: var(--scr); z-index: 3;
  box-shadow: inset 0 0 0 0.1em rgba(0,0,0,1), inset 0 0.16em 0.5em rgba(0,0,0,0.8);
  pointer-events: none;
}

.dev-mac { left: 0; width: 70%; z-index: 1; --bz: 0.8em; --scr: 0.35em; }
.dev-mac .dev-screen {
  box-shadow: 0 0 0 0.06em rgba(255,255,255,0.26), 0 1.2em 1.6em -0.8em rgba(0,0,0,0.9), 0 5em 8em -2.2em rgba(0,0,0,1);
}
/* A base wider than the lid, with the thumb notch cut into its front edge —
   the two details that make the silhouette read as a laptop, not a monitor. */
.mac-foot {
  position: relative; width: 116%; margin-left: -8%; height: 1.15em;
  background: linear-gradient(180deg, #62666F 0%, #2F333A 40%, #101215 100%);
  border-radius: 0 0 0.7em 0.7em;
  box-shadow: 0 0 0 0.05em rgba(255,255,255,0.18), 0 2.4em 3.4em -1em rgba(0,0,0,0.95);
}
.mac-foot::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 11%; height: 0.42em; background: #0E1013; border-radius: 0 0 0.4em 0.4em;
}

/* Shadows on the two front devices are offset left and up: they fall across
   whatever is behind them, which is what separates the trio. */
.dev-ipad { right: 0; width: 38%; z-index: 2; --bz: 0.9em; --scr: 0.8em; }
.dev-ipad .dev-screen {
  box-shadow: 0 0 0 0.06em rgba(255,255,255,0.34), -0.7em 0.8em 1.2em -0.4em rgba(0,0,0,0.95), -2.6em 2.8em 6em -0.9em rgba(0,0,0,1);
}

.dev-iphone { right: 30%; width: 10%; z-index: 3; --bz: 0.55em; --scr: 1em; }
.dev-iphone .dev-screen {
  box-shadow: 0 0 0 0.055em rgba(255,255,255,0.4), -0.5em 0.6em 0.9em -0.3em rgba(0,0,0,0.95), -2em 2.2em 4.5em -0.6em rgba(0,0,0,1);
}
.island {
  position: absolute; z-index: 4; top: calc(var(--bz) + 0.45em); left: 50%;
  transform: translateX(-50%); width: 40%; height: 0.7em; border-radius: 1em; background: #000;
}

/* ---- Trust strip --------------------------------------------------------- */
.trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0;
  margin: clamp(56px, 8vw, 96px) auto 0; padding-top: 26px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-mute); letter-spacing: 0.01em; text-align: center;
}
.trust b { color: var(--ink-dim); font-weight: 500; }
.trust .sep { color: var(--ink-faint); margin: 0 14px; }

/* ---- Section rhythm ------------------------------------------------------ */
section { padding: clamp(64px, 8vw, 108px) 0; }
.section-head { max-width: 30ch; }
.section-head.center { max-width: none; text-align: center; }

/* ---- Problem ------------------------------------------------------------- */
.problem { text-align: center; }
.problem h2 { max-width: 18ch; margin: 0 auto; }
.problem .lede { max-width: 62ch; margin: 26px auto 0; }

/* ---- Pillars (product-forward feature moments) --------------------------- */
.pillar { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(32px, 4.4vw, 64px); align-items: center; }
.pillar.flip .pillar-copy { order: 2; }
.pillar-copy ul { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 16px; }
.pillar-copy li { position: relative; padding-left: 26px; color: var(--ink-dim); font-size: 15.5px; line-height: 1.55; }
.pillar-copy li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--emerald); }
.pillar-copy a { color: var(--emerald); border-bottom: 1px solid rgba(74,222,128,0.3); transition: border-color .18s; }
.pillar-copy a:hover { border-color: var(--emerald); }
.pillar h2 { margin-top: 6px; }
.pillar .lede { margin-top: 20px; max-width: 44ch; }

/* Media surfaces shared by the feature figures */
.media { margin: 0; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface), #0F1114); padding: 22px; box-shadow: 0 30px 80px -34px rgba(0,0,0,0.8); position: relative; overflow: hidden; }
.media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40rem 20rem at 80% -20%, rgba(120,150,200,0.08), transparent 60%); pointer-events: none; }
/* `bare` = the capture IS the figure: no inset frame, because a screenshot of a
   window sitting inside another framed box reads as a picture of a picture. */
.media.bare { padding: 0; background: var(--bg-2); }
.media img, .media video { display: block; width: 100%; height: auto; }
.media figcaption { padding: 16px 20px 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-mute); border-top: 1px solid var(--line); }
/* Portrait device capture: cap the height, or a 1:2.2 video sets the row height
   for the whole pillar and pushes the copy off the screen. */
/* ---- Two overlapping captures (Parallel vs Focus) ------------------------
   Side by side, neither one is big enough to read — the whole point of the
   comparison is that you can see the panes. Overlapped, each gets ~78% of the
   column instead of 48%, and the stagger says "two states of one thing" better
   than a pair of equal rectangles ever did. Parallel sits in front because it
   is the mode the product argues for. */
.compare { position: relative; margin: 0; aspect-ratio: 1 / 0.82; }
.cmp { position: absolute; border-radius: 12px; overflow: hidden; }
.cmp img { display: block; width: 100%; height: auto; }
.cmp-back  { top: 0; right: 0; width: 72%; z-index: 1;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 26px 50px -22px rgba(0,0,0,0.95); }
.cmp-front { bottom: 0; left: 0; width: 80%; z-index: 2;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.22), -10px 14px 24px -12px rgba(0,0,0,0.95), -22px 34px 70px -26px rgba(0,0,0,1); }
/* Labelled on the art, not under it: a caption below would be read as applying
   to both, and there is no room for two captions. */
.cmp-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink);
  background: rgba(10,11,13,0.72); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 100px; padding: 5px 12px;
}
/* Bottom-left is exactly where the front capture lands, so the back one labels
   itself in the opposite corner. */
.cmp-back .cmp-tag { top: 12px; right: 12px; left: auto; bottom: auto; }

/* ---- iPad with the phone staggered over it ------------------------------- */
.duo { position: relative; margin: 0; aspect-ratio: 1 / 0.76; }
.duo video { position: absolute; display: block; height: auto; border-radius: 14px; }
.duo-pad { top: 0; left: 0; width: 82%; z-index: 1;
  box-shadow: 0 26px 50px -22px rgba(0,0,0,0.95); }
.duo-phone { bottom: 0; right: 0; width: 25%; z-index: 2; border-radius: 18px;
  box-shadow: -8px 10px 18px -8px rgba(0,0,0,0.95), -20px 28px 56px -20px rgba(0,0,0,1); }

/* ---- Day to day ----------------------------------------------------------
   Full-width media, copy underneath, one chapter after another.
   This started as a three-up card grid and it was unreadable: each shot is a
   whole app window, five panes of 12px terminal type. At a third of the page
   it is a grey rectangle — the content that makes the feature legible IS the
   small text. So the media gets the full measure and the page gets taller.
   The copy sits centred and narrow under it, which is the only part of this
   borrowed from anyone: it is how a product page paces a long scroll. */
.daily-head { margin-bottom: clamp(44px, 6vw, 76px); }
.daily + .daily { margin-top: clamp(70px, 9vw, 132px); }
.daily-media {
  width: min(1200px, calc(100vw - 32px)); margin: 0 auto; position: relative;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 40px 110px -40px rgba(0,0,0,0.85);
}
.daily-media video, .daily-media img { display: block; width: 100%; height: auto; }

/* Crossfading stack. The captures are the same window at slightly different
   sizes, so the box is given one ratio and every frame is `contain`-ed into
   it — otherwise each slide would resize the page as it faded in. */
/* No frame around the slideshow. The four captures have four different aspect
   ratios, so `contain` always leaves a gap on two sides — and a border then
   outlines the empty box instead of the picture, which reads as a mistake.
   Unframed, the gap is just page. The videos keep their frame: they fill their
   box exactly, so there is nothing for a border to disagree with. */
.daily-media.plain { border: none; border-radius: 0; background: none; box-shadow: none; }
.slides { position: relative; aspect-ratio: 16 / 9.1; }
.slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .8s var(--ease);
}
.slides img.on { opacity: 1; }

.daily-copy { width: min(680px, calc(100vw - 44px)); margin: 0 auto; padding-top: clamp(28px, 3.4vw, 44px); text-align: center; }
.daily-copy h3 { font-size: clamp(24px, 2.9vw, 34px); letter-spacing: -0.028em; line-height: 1.12; margin-bottom: 14px; }
.daily-copy p { margin: 0; color: var(--ink-dim); font-size: clamp(15.5px, 1.35vw, 17.5px); line-height: 1.62; }
.daily-copy code { color: var(--emerald); }
/* Reserves its own line so the copy doesn't jump as the slide label changes. */
.slide-cap {
  min-height: 1.4em; margin: 0 0 12px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
  transition: opacity .3s var(--ease);
}

/* ---- Feature grid -------------------------------------------------------- */
.grid-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 52px; }
.cell { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 26px; transition: transform .2s var(--ease), border-color .2s, background .2s; }
.cell:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--surface-2); }
.cell.cell-2 { grid-column: span 2; }
.cell h3 { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.cell p { margin: 0; color: var(--ink-dim); font-size: 14.5px; line-height: 1.5; }
.cell a { color: var(--emerald); }
.cell code { color: var(--emerald); }

/* ---- Under the hood ------------------------------------------------------
   Three cards. The only thing ever wrong with this section was the HEADING:
   `.section-head` caps at 30ch, which broke "Built like a terminal, not a
   wrapper" across three lines. That is what `max-width: none` below fixes.
   (Four redesigns happened in between — cards → two-column doc → bare columns
   → one panel → a pillar — none of which were the problem.) */
.hood { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hood .section-head { max-width: none; }
.hood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(38px, 5vw, 52px); background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.hood-item { background: var(--bg); padding: clamp(24px, 2.6vw, 32px); }
.hood-item h3 { margin-bottom: 11px; }
.hood-item p { margin: 0; color: var(--ink-dim); font-size: 14.5px; line-height: 1.58; }
.hood-item code { color: var(--emerald); }
.hood-link { margin: clamp(28px, 4vw, 38px) 0 0; }
.hood-link a { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line-3); padding-bottom: 2px; }
.hood-link a:hover { border-color: var(--ink); }

/* ---- Privacy ------------------------------------------------------------- */
.privacy-card { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface), var(--bg-2)); padding: clamp(30px, 5vw, 52px); max-width: 820px; }
.privacy-card h2 { margin-bottom: 18px; }
.privacy-card p { margin: 0; color: var(--ink-dim); font-size: 16px; line-height: 1.65; }
/* Without this the "read the privacy page" link inherits body colour and is
   indistinguishable from the sentence around it. */
.privacy-card a { color: var(--emerald); }

/* ---- FAQ ----------------------------------------------------------------- */
.faq { max-width: 760px; margin: 44px auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 34px 22px 0; font-size: 17px; font-weight: 500; color: var(--ink); position: relative; transition: color .18s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--ink-mute); transition: transform .22s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--emerald); }
.faq p { margin: 0 0 22px; color: var(--ink-dim); font-size: 15px; line-height: 1.6; max-width: 64ch; }
.faq a { color: var(--emerald); }

/* ---- Final CTA ----------------------------------------------------------- */
.final { text-align: center; }
.final h2 { max-width: 20ch; margin: 0 auto; }
.brew { display: inline-flex; align-items: center; gap: 12px; margin: 34px auto 0; padding: 6px 6px 6px 16px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface); font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.brew button { font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--ink); background: var(--surface-3); border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 13px; cursor: pointer; transition: background .18s; }
.brew button:hover { background: var(--surface-2); }
.brew-label { display: block; margin-top: 12px; font-size: 12.5px; color: var(--ink-mute); }

/* ---- Footer -------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); padding: 40px 0; }
.foot-in { width: var(--w); margin-inline: auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--ink-mute); }
.foot-in a:not(.logo) { color: var(--ink-dim); transition: color .18s; }
.foot-in a:not(.logo):hover { color: var(--ink); }
.foot-in .logo { font-size: 15px; }
.foot-in .logo img { width: 22px; height: 22px; }
.foot-in .spacer { flex: 1; }

/* ---- Scroll reveal ------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.rise { opacity: 0; transform: translateY(20px); animation: rise .9s var(--ease) forwards; }
.rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; } .rise.d4 { animation-delay: .34s; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal, .rise { opacity: 1; transform: none; }
}

/* ---- Responsive ---------------------------------------------------------- */
.hide-sm { display: inline; }
@media (max-width: 860px) {
  .pillar, .pillar.flip .pillar-copy { grid-template-columns: 1fr; order: 0; }
  .pillar.flip .media { order: -1; }
  .grid-bento { grid-template-columns: 1fr 1fr; }
  .cell.cell-2 { grid-column: span 2; }
  .hood-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hide-sm { display: none; }
  /* At phone width a 10%-wide iPhone renders about 30px across: it reads as a
     speck and the trio just makes the Mac smaller. Show the Mac alone. */
  .dev-ipad, .dev-iphone { display: none; }
  .dev-mac { width: 100%; }
  .family { aspect-ratio: 1200 / 710; }
  .nav-links { gap: 16px; }
  .trust .sep { margin: 0 8px; }
  .grid-bento, .cell.cell-2 { grid-template-columns: 1fr; grid-column: auto; }
  /* A whole app window on a phone screen is a grey smudge either way; the
     caption and copy carry it, so just let the media be small and sharp. */
  .slides { aspect-ratio: 16 / 10; }
}

/* ---- Document pages (privacy, support) ----------------------------------
   Prose, not product. Same palette and type, narrower measure, no showcase
   furniture — these are pages people read once and leave. */
.doc { width: min(760px, calc(100vw - 44px)); margin: clamp(70px, 12vh, 130px) auto 0; }
.doc h1 { font-size: clamp(34px, 5vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 14px; }
.doc .stamp { color: var(--ink-mute); font-size: 14px; font-family: var(--mono); margin: 0 0 clamp(34px, 6vh, 54px); }
.doc h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 46px 0 14px; }
.doc h3 { font-size: 16px; font-weight: 600; margin: 28px 0 8px; color: var(--ink); }
.doc p, .doc li { color: var(--ink-dim); font-size: 16px; line-height: 1.7; }
.doc p { margin: 0 0 16px; }
.doc ul { margin: 0 0 16px; padding-left: 20px; }
.doc li { margin-bottom: 9px; }
.doc li::marker { color: var(--ink-faint); }
.doc b, .doc strong { color: var(--ink); font-weight: 500; }
.doc a { color: var(--emerald); text-decoration: underline; text-decoration-color: rgba(74,222,128,.32); text-underline-offset: 3px; }
.doc a:hover { text-decoration-color: var(--emerald); }
.doc code { font-family: var(--mono); font-size: 0.88em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--ink); }
.doc .summary { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); padding: 22px 26px; margin: 0 0 8px; }
.doc .summary p:last-child, .doc .summary ul:last-child { margin-bottom: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-dim); }
.doc th { color: var(--ink-mute); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.doc .foot-note { margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--ink-mute); font-size: 14px; }

/* ---- comparison table ---- */
.cmpt-scroll { overflow-x: auto; margin-top: 44px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); }
table.cmpt { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 900px; font-size: 15px; }
.cmpt th, .cmpt td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); white-space: nowrap; }
.cmpt th:first-child, .cmpt td:first-child { border-left: 0; }
.cmpt tbody tr:last-child th, .cmpt tbody tr:last-child td { border-bottom: 0; }
.cmpt thead th { font-size: 13.5px; color: var(--ink); font-weight: 600; padding: 16px 18px; background: var(--surface-3); border-bottom: 1px solid var(--line-3); }
.cmpt tbody tr:nth-child(even) th, .cmpt tbody tr:nth-child(even) td { background: rgba(255,255,255,0.022); }
.cmpt tbody tr:hover th, .cmpt tbody tr:hover td { background: rgba(255,255,255,0.045); }
.cmpt th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink); white-space: normal; min-width: 180px; }
.cmpt .me { background: rgba(48,209,88,0.07) !important; border-left: 1px solid rgba(48,209,88,0.28); }
.cmpt td.me + td, .cmpt th.me + th { border-left: 1px solid rgba(48,209,88,0.28); }
.cmpt thead .me { color: var(--done); background: rgba(48,209,88,0.12) !important; }
.cmpt tbody tr:nth-child(even) .me { background: rgba(48,209,88,0.09) !important; }
.cmpt tbody tr:hover .me { background: rgba(48,209,88,0.13) !important; }
.cmpt .y { color: var(--done); font-weight: 600; }
.cmpt .n { color: var(--ink-faint); }
.cmpt .note { display: block; font-size: 11.5px; color: var(--ink-mute); font-weight: 400; margin-top: 3px; }
.cmpt-foot { margin-top: 14px; font-size: 13.5px; color: var(--ink-mute); }