/* ==========================================================================
   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; }
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); }
.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 ---------------------------------------------------------------- */
.hero { text-align: center; padding: clamp(48px, 9vh, 104px) 0 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-dim); background: rgba(255,255,255,0.04);
  border: 1px solid var(--line); border-radius: 100px; padding: 7px 15px 7px 12px;
  margin-bottom: 30px;
}
.eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 0 rgba(74,222,128,0.5); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.45); } 70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,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;
}
.showcase {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, #141619, #0F1114);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 40px 120px -30px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,0,0,0.4);
  overflow: hidden;
}
.win-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.015); }
.traffic { display: flex; gap: 8px; }
.traffic i { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-3); }
.traffic i:nth-child(1){ background:#FF5F57; } .traffic i:nth-child(2){ background:#FEBC2E; } .traffic i:nth-child(3){ background:#28C840; }
.win-title { font-family: var(--mono); font-size: 12.5px; color: var(--ink-mute); letter-spacing: 0.01em; }
.win-title b { color: var(--ink-dim); font-weight: 500; }
.win-seg { margin-left: auto; display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 2px; font-family: var(--mono); font-size: 11px; }
.win-seg span { padding: 4px 10px; border-radius: 6px; color: var(--ink-mute); }
.win-seg span.on { background: var(--surface-3); color: var(--ink); }

.work { display: grid; grid-template-columns: 172px 1fr; min-height: 428px; }
.side { border-right: 1px solid var(--line); padding: 14px 10px; background: rgba(0,0,0,0.18); }
.side-h { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); padding: 4px 8px 10px; }
.side-row { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 8px; font-size: 13px; color: var(--ink-dim); }
.side-row.sel { background: rgba(255,255,255,0.05); color: var(--ink); }
.side-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.w { background: var(--working); box-shadow: 0 0 8px rgba(10,132,255,0.6); }
.dot.a { background: var(--await);  box-shadow: 0 0 8px rgba(255,159,10,0.6); }
.dot.d { background: var(--done); }
.dot.i { background: var(--idle); }

.panes { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: var(--line); }
.pane { background: linear-gradient(180deg, #101215, #0D0F12); display: flex; flex-direction: column; min-height: 0; }
.pbar { display: flex; align-items: center; gap: 8px; padding: 9px 13px; font-size: 12.5px; font-weight: 500; color: var(--ink-dim); border-bottom: 1px solid var(--line); position: relative; }
.pbar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2.5px; }
.pbar .g { width: 13px; height: 13px; flex: none; display: grid; place-items: center; }
.pbar.w::before { background: var(--working); } .pbar.w { background: rgba(10,132,255,0.06); }
.pbar.a::before { background: var(--await); }   .pbar.a { background: rgba(255,159,10,0.07); }
.pbar.d::before { background: var(--done); }     .pbar.d { background: rgba(48,209,88,0.05); }
.pbar.i::before { background: var(--idle); }
.pbar .tag { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.pbar.w .tag { color: var(--working); } .pbar.a .tag { color: var(--await); } .pbar.d .tag { color: var(--done); } .pbar.i .tag { color: var(--idle); }
.pbody { padding: 13px; display: flex; flex-direction: column; gap: 9px; flex: 1; font-size: 12px; }
.line { color: var(--ink-dim); line-height: 1.5; }
.line .mut { color: var(--ink-mute); }
.stream { position: relative; }
.stream::after { content: "▍"; color: var(--working); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.tool { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); overflow: hidden; }
.tool-h { display: flex; align-items: center; gap: 7px; padding: 7px 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-dim); border-bottom: 1px solid var(--line); }
.tool-h .spin { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--working); border-top-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tool-h .ok { color: var(--done); }
.diff { font-family: var(--mono); font-size: 11px; line-height: 1.7; padding: 8px 10px; }
.diff .d { color: var(--del); } .diff .a { color: var(--done); } .diff .d, .diff .a { display: block; }
.perm { padding: 10px; }
.perm-q { font-size: 12px; color: var(--ink); margin-bottom: 9px; }
.perm-btns { display: flex; gap: 6px; }
.pbtn { font-size: 11px; font-weight: 500; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line-2); color: var(--ink-dim); }
.pbtn.ok { background: var(--await); border-color: var(--await); color: #241703; font-weight: 600; }
.pane.magnet { box-shadow: 0 0 0 1px var(--await) inset, 0 0 30px -6px rgba(255,159,10,0.35); animation: magnet 3s var(--ease) infinite; z-index: 1; }
@keyframes magnet { 0%,100% { box-shadow: 0 0 0 1px rgba(255,159,10,0.55) inset, 0 0 22px -8px rgba(255,159,10,0.25); } 50% { box-shadow: 0 0 0 1px rgba(255,159,10,0.9) inset, 0 0 34px -4px rgba(255,159,10,0.5); } }
.composer { margin-top: auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 11px; color: var(--ink-mute); font-size: 12px; }
.composer .mic { margin-left: auto; width: 14px; height: 14px; opacity: 0.5; }

/* ---- 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(80px, 12vw, 150px) 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; }
.tabs { display: inline-flex; gap: 6px; margin-bottom: 38px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tabs .t { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
.tabs .t i { width: 7px; height: 7px; border-radius: 50%; background: var(--idle); }
.tabs .t.hot { background: rgba(255,159,10,0.1); color: var(--await); }
.tabs .t.hot i { background: var(--await); box-shadow: 0 0 9px rgba(255,159,10,0.7); animation: dotpulse 2s infinite; }
@keyframes dotpulse { 50% { opacity: 0.4; } }

/* ---- Pillars (product-forward feature moments) --------------------------- */
.pillar { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(36px, 6vw, 88px); 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; }

/* states figure */
.state-list { display: grid; gap: 10px; }
.srow { display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); position: relative; }
.srow::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; }
.srow .nm { font-size: 14px; color: var(--ink); }
.srow .lb { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.srow .sd { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.srow.w::before { background: var(--working); } .srow.w .sd { background: var(--working); box-shadow: 0 0 10px rgba(10,132,255,0.6); } .srow.w .lb { color: var(--working); }
.srow.a::before { background: var(--await); }  .srow.a .sd { background: var(--await); box-shadow: 0 0 10px rgba(255,159,10,0.6); } .srow.a .lb { color: var(--await); } .srow.a { box-shadow: 0 0 0 1px rgba(255,159,10,0.35) inset; }
.srow.d::before { background: var(--done); }   .srow.d .sd { background: var(--done); } .srow.d .lb { color: var(--done); }
.srow.i::before { background: var(--idle); }   .srow.i .sd { background: var(--idle); } .srow.i .lb { color: var(--ink-mute); }

/* conversation figure */
.conv { display: grid; gap: 12px; }
.conv .msg { color: var(--ink-dim); font-size: 13px; line-height: 1.55; }
.conv .tool { background: var(--bg-2); }
.conv .perm-card { border: 1px solid rgba(255,159,10,0.4); border-radius: 11px; background: rgba(255,159,10,0.05); padding: 13px; }

/* voice figure */
.voice { display: grid; place-items: center; gap: 20px; padding: 18px 0 6px; text-align: center; }
.mic-big { position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-2); }
.mic-big .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--emerald); opacity: 0; animation: ripple 2.6s var(--ease) infinite; }
.mic-big .ring.r2 { animation-delay: .8s; } .mic-big .ring.r3 { animation-delay: 1.6s; }
@keyframes ripple { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.1); opacity: 0; } }
.transcript { font-size: 15px; color: var(--ink); max-width: 30ch; line-height: 1.5; }
.transcript .cur { color: var(--ink-mute); }
.vhints { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.vchip { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); background: var(--surface); border: 1px solid var(--line); border-radius: 100px; padding: 6px 12px; }
.vchip b { color: var(--emerald); font-weight: 500; }

/* continuity figure */
.devices { display: grid; grid-template-columns: 1fr auto 0.5fr; align-items: center; gap: 16px; }
.screen { border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); padding: 12px; display: grid; gap: 7px; }
.screen.phone { border-radius: 16px; padding: 10px; }
.screen .r { height: 9px; border-radius: 3px; background: var(--surface-3); position: relative; }
.screen .r.w { background: linear-gradient(90deg, rgba(10,132,255,0.5), var(--surface-3)); }
.screen .r.a { background: linear-gradient(90deg, rgba(255,159,10,0.55), var(--surface-3)); }
.screen .r.d { background: linear-gradient(90deg, rgba(48,209,88,0.45), var(--surface-3)); }
.enc { display: grid; place-items: center; gap: 6px; }
.enc .lk { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--emerald); }
.enc em { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--ink-mute); font-style: normal; writing-mode: horizontal-tb; }
.dev-cap { margin: 18px 0 0; font-size: 13px; color: var(--ink-mute); text-align: center; }
.ios-box { margin-top: 30px; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); font-size: 14.5px; color: var(--ink-dim); line-height: 1.55; }
.ios-box b { display: inline; }
.ios-box a { display: inline-block; margin-top: 8px; color: var(--emerald); font-size: 13.5px; }

/* ---- 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; }

/* ---- Under the hood ------------------------------------------------------ */
.hood { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hood-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 48px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.hood-item { background: var(--bg); padding: 34px; }
.hood-item h3 { margin-bottom: 12px; }
.hood-item p { margin: 0; color: var(--ink-dim); font-size: 14.5px; line-height: 1.55; }
.hood-item a { color: var(--emerald); }
.hood-link { margin: 34px 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; }

/* ---- 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; }
  .work { grid-template-columns: 1fr; }
  .side { display: none; }
}
@media (max-width: 560px) {
  .hide-sm { display: none; }
  .nav-links { gap: 16px; }
  .trust .sep { margin: 0 8px; }
  .grid-bento, .cell.cell-2 { grid-template-columns: 1fr; grid-column: auto; }
  .panes { grid-template-columns: 1fr; grid-template-rows: none; }
  .pane:nth-child(n+3) { display: none; }  /* show working + waiting on tiny screens */
  .devices { grid-template-columns: 1fr; }
  .enc em { writing-mode: horizontal-tb; }
}

/* ---- 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; }