/* ===================================================================
   FatClipboard marketing site — 2026-08-31 redesign.

   Recreated from the `site-b-statement` design handoff. One long-scroll
   landing page; every color is a custom property on :root, overridden
   under [data-theme="dark"], so the theme toggle in the nav only ever
   flips one attribute on <html>.

   The site deliberately uses the pink (#FD105E) as its accent in BOTH
   themes, where the app's tailwind.config.js keeps navy for light mode.
   That divergence is intentional (see the handoff): the site gets one
   brand color, the app keeps its quieter light-mode chrome.

   Sizes below are the design's desktop values. Display type is wrapped
   in clamp() so it degrades on narrow screens while still hitting the
   exact specified size at the 1240px content width and above.
   =================================================================== */

:root {
  --bg:#F6F3ED;
  --surface:#FFFFFF;
  --surface2:#EFEBE3;
  --inset:#EAECEF;
  --ink:#313851;
  --muted:#666E85;
  --border:rgba(49,56,81,0.14);
  --hair:rgba(49,56,81,0.09);
  --accent:#FD105E;
  --accentHover:#D6094F;
  --accentFill:#FDE3EC;
  --steel:#C2CBD3;
  --deep:#313851;
  --deepInk:#F6F3ED;
  --deepMuted:#AEB5C6;
  --deepPanel:rgba(255,255,255,0.07);
  --shadow:0 2px 8px rgba(49,56,81,0.08), 0 40px 70px -34px rgba(49,56,81,0.5);

  --wrap:1240px;
  --pad:36px;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display:Newsreader, Georgia, "Times New Roman", serif;
  --ui:"Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

[data-theme="dark"] {
  --bg:#333333;
  --surface:#474747;
  --surface2:#3D3D3D;
  --inset:#414141;
  --ink:#F6F3ED;
  --muted:#A6A6A6;
  --border:rgba(255,255,255,0.13);
  --hair:rgba(255,255,255,0.08);
  --accent:#FD105E;
  --accentHover:#D6094F;
  --accentFill:#4A2233;
  --steel:#C2CBD3;
  --deep:#222222;
  --deepInk:#F6F3ED;
  --deepMuted:#A6A6A6;
  --deepPanel:rgba(255,255,255,0.06);
  --shadow:0 2px 8px rgba(0,0,0,0.5), 0 40px 70px -34px rgba(0,0,0,0.9);
}

* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--ink); }
img { max-width:100%; }

:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* Shared building blocks ------------------------------------------- */

.wrap { max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.section { max-width:var(--wrap); margin:0 auto; padding:96px var(--pad) 0; }

.mono {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

.display { font-family:var(--display); font-weight:500; }

.h2 {
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(38px, 5.2vw, 64px);
  line-height:1;
  letter-spacing:-0.035em;
  margin:0 0 44px;
  max-width:820px;
  text-wrap:balance;
}
.h2 .alt { color:var(--accent); }

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:16px;
  font-weight:600;
  padding:16px 28px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn-pink { background:var(--accent); color:#FFFFFF; }
.btn-pink:hover { background:var(--accentHover); color:#FFFFFF; }
.btn-ghost-deep { color:var(--deepInk); border-color:rgba(255,255,255,0.25); padding:16px 26px; }
.btn-ghost-deep:hover { border-color:#FFFFFF; color:#FFFFFF; }
/* On the navy/near-black slabs the pink button inverts to white instead of
   darkening — a darker pink loses too much contrast against --deep. */
.on-deep .btn-pink:hover { background:#FFFFFF; color:#313851; }

.check { display:flex; gap:10px; align-items:flex-start; }
.check i { color:var(--accent); flex:none; margin-top:3px; }

/* 1. Hero ----------------------------------------------------------- */

.hero-block { background:var(--deep); color:var(--deepInk); }

.nav {
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--pad);
  height:72px;
  display:flex;
  align-items:center;
  gap:34px;
}
/* The wordmark is a transparent PNG: "FAT" is white-filled with a black
   outline, "CLIPBOARD" is the brand pink. That holds on the navy nav and on
   the paper/charcoal footer alike, so one asset serves every placement and
   no theme-specific variant is needed. */
.logo { display:inline-flex; align-items:center; flex:none; }
.logo img { height:26px; width:auto; display:block; }
.site-footer .logo img { height:22px; }
@media (max-width:860px) { .logo img { height:22px; } }

.navlinks { display:flex; gap:26px; font-size:13.5px; color:var(--deepMuted); }
.navlinks a { color:inherit; }
.navlinks a:hover { color:#FFFFFF; }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:12px; }

.theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.2);
  background:transparent;
  color:var(--deepMuted);
  cursor:pointer;
  transition:color .16s ease, border-color .16s ease;
}
.theme-toggle:hover { color:#FFFFFF; border-color:#FFFFFF; }
.theme-toggle i { font-size:16px; }

.navcta {
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--accent);
  color:#FFFFFF;
  font-size:13.5px;
  font-weight:600;
  padding:11px 18px;
  border-radius:999px;
  transition:background-color .16s ease, color .16s ease;
}
.navcta:hover { background:#FFFFFF; color:#313851; }

.hero {
  max-width:var(--wrap);
  margin:0 auto;
  padding:64px var(--pad) 0;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:56px;
  align-items:end;
}
.hero-copy { padding-bottom:80px; }


.hero h1 {
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(52px, 8.4vw, 104px);
  line-height:0.9;
  letter-spacing:-0.04em;
  margin:0;
}
.hero h1 .alt { color:var(--accent); }
.hero-lead {
  font-size:19px;
  line-height:1.5;
  color:var(--deepMuted);
  max-width:460px;
  margin:28px 0 0;
  text-wrap:pretty;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

/* The panel overhangs the dark block onto the paper below. */
.hero-panel-slot { position:relative; transform:translateY(56px); }
.panel {
  background:var(--surface);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
/* ---- App panel, recreated -------------------------------------------
   A faithful rebuild of the quick panel rather than a screenshot. The app
   and this page declare the same font stack, so on a Windows visitor's
   machine this renders in the same Segoe UI Variable the app uses — which
   is the one thing a captured PNG cannot do. It also follows the theme,
   stays sharp at any DPI, and keeps its text selectable.

   Tokens below mirror the app's own: its panel background is the same warm
   paper as this page (cream / charcoal), its cards are pillTint in light and
   charcoalSurface in dark, and the active pill on a segmented control sits a
   step lighter again.
   -------------------------------------------------------------------- */
/* The app's own accent, which unlike this site's is navy in light mode and
   pink only in dark (see tailwind.config.js accent / accentDark). Scoped to
   the mockups so they render the product honestly while the page around them
   keeps its single pink brand colour. */
.panel.app, .fold, .mock { --appAccent:#313851; --appAccentFill:#E1E6EB; }
[data-theme="dark"] .panel.app,
[data-theme="dark"] .fold,
[data-theme="dark"] .mock { --appAccent:#FD105E; --appAccentFill:#4A2233; }

.panel.app {
  background:var(--bg);
  padding:14px;
  --card:#EAECEF;
  --cardOn:#FFFFFF;
  --cardLine:rgba(49,56,81,0.10);
}
[data-theme="dark"] .panel.app {
  --card:#474747;
  --cardOn:#5A5A5A;
  --cardLine:rgba(255,255,255,0.09);
}

.ap-top { display:flex; align-items:center; gap:10px; padding:2px 4px 16px; }
.ap-logo { height:17px; width:auto; display:block; }
.ap-pro {
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.08em; font-weight:500;
  padding:3px 9px; border-radius:999px; background:var(--card); color:var(--muted);
}
.ap-gear { margin-left:auto; color:var(--muted); font-size:15px; }

.ap-searchrow { display:flex; align-items:center; gap:8px; padding:0 4px 12px; }
.ap-search {
  flex:1; display:flex; align-items:center; gap:9px; min-width:0;
  background:var(--card); border-radius:999px; padding:10px 15px;
  font-size:13px; color:var(--muted);
}
.ap-seg2 { display:flex; align-items:center; gap:2px; background:var(--card); border-radius:999px; padding:3px; }
.ap-seg2 span { width:26px; height:26px; border-radius:999px; display:grid; place-items:center; color:var(--muted); font-size:12px; }
.ap-seg2 .on { background:var(--cardOn); color:var(--ink); }

.ap-rule { height:1px; background:var(--hair); margin:0 -14px 12px; }

.ap-tabs { display:flex; gap:4px; padding:0 4px 10px; }
.ap-tabs span { flex:1; text-align:center; font-size:12.5px; color:var(--muted); padding:8px 0; border-radius:999px; }
.ap-tabs .on { background:var(--cardOn); color:var(--ink); font-weight:600; }

.ap-subtabs { display:flex; gap:4px; background:var(--card); border-radius:12px; padding:4px; margin:0 4px 14px; }
.ap-subtabs span {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:12.5px; color:var(--muted); padding:8px 0; border-radius:9px;
}
.ap-subtabs .on { background:var(--cardOn); color:var(--ink); font-weight:600; }
.ap-subtabs i { font-size:11px; opacity:.75; }

.ap-label {
  font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:0 5px 6px;
}
.ap-card { background:var(--card); border-radius:12px; padding:0 12px; margin:0 2px 14px; }
.ap-card:last-child { margin-bottom:2px; }
.ap-row { padding:11px 0; }
.ap-row + .ap-row { border-top:1px solid var(--cardLine); }
.ap-text { font-size:12.5px; line-height:1.45; color:var(--ink); }
.ap-timerow { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:5px; }
.ap-time { font-size:10.5px; color:var(--muted); }
/* The row's action set. In the app these fade in on hover; laid out at rest
   here so the page actually shows what a row can do. The pink ones are the
   states this particular clip is in — pinned, and filed into a folder. */
.ap-actions { display:flex; gap:11px; flex:none; font-size:12.5px; color:var(--muted); }
.ap-actions .on { color:var(--appAccent); }

/* ---- Screenshots card (mirrors the Screenshots tab) ------------------ */
.shot-card { background:var(--surface); border-radius:14px; padding:12px; margin-top:12px; }
.shot-thumb {
  border-radius:10px; background:var(--inset); aspect-ratio:16/9;
  display:grid; place-items:center; padding:18px; overflow:hidden;
}
/* A small, readable document standing in for the captured screenshot, so the
   extracted text underneath visibly comes from something. Its colours are
   fixed rather than themed: a screenshot is a screenshot, and a captured
   invoice doesn't turn dark because the app is in dark mode. */
.thumb-doc {
  width:88%; max-width:340px;
  background:#FFFFFF; color:#313851;
  border-radius:6px; padding:16px 18px;
  box-shadow:0 1px 2px rgba(49,56,81,.10), 0 8px 20px -12px rgba(49,56,81,.35);
  font-family:var(--ui); font-variant-numeric:tabular-nums;
  --docLine:rgba(49,56,81,0.14);
  --docMuted:#8A90A2;
}
.td-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.td-title { font-size:11px; font-weight:700; letter-spacing:0.16em; }
.td-num { font-size:11px; font-weight:600; color:var(--docMuted); }
.td-org { font-size:12.5px; font-weight:600; margin-top:9px; }
.td-meta { font-size:9.5px; color:var(--docMuted); margin-top:2px; }
.td-rows { margin-top:11px; padding-top:8px; border-top:1px solid var(--docLine); display:grid; gap:5px; }
.td-rows div { display:flex; justify-content:space-between; gap:10px; font-size:9.5px; color:var(--docMuted); }
.td-total {
  display:flex; justify-content:space-between; gap:10px;
  margin-top:8px; padding-top:7px; border-top:1px solid var(--docLine);
  font-size:11px; font-weight:700;
}

.shot-ocr { font-size:13px; line-height:1.55; font-style:italic; color:var(--muted); margin:12px 2px 0; }
.shot-ocr mark { background:var(--appAccentFill); color:var(--appAccent); font-style:normal; padding:0 3px; border-radius:3px; }
.shot-more { display:inline-block; margin:7px 2px 0; font-size:13px; font-weight:600; color:var(--appAccent); font-style:normal; }
.shot-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin:12px 2px 2px; }
.shot-dims { font-size:12px; line-height:1.6; color:var(--muted); }
.shot-icons { display:flex; gap:13px; font-size:15px; color:var(--muted); flex:none; }
.shot-icons .on { color:var(--appAccent); }

/* ---- Screenshots section -------------------------------------------- */
.section-lead { font-size:17px; line-height:1.6; color:var(--muted); margin:0 0 44px; max-width:640px; text-wrap:pretty; }
.shots-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
/* Stretches to the mock's height and spreads the gaps, so the two columns
   finish level instead of the right one stopping short. */
.shots-points { display:grid; gap:14px; align-content:space-between; }

/* Each point is its own container so the three read as a set beside the
   mock, rather than as loose text floating next to a card. */
.shot-point {
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:20px 22px;
}
.shot-point .ico {
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--accentFill); color:var(--accent); font-size:17px;
}
.shot-point h3 { font-size:17px; font-weight:600; margin:1px 0 5px; letter-spacing:-0.01em; }
.shot-point p { font-size:15px; line-height:1.55; color:var(--muted); margin:0; text-wrap:pretty; }

/* The Pro line closes the set as a tinted callout rather than a rule. */
.shots-pro {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--accentFill); border-radius:16px; padding:17px 22px;
  font-size:14.5px; line-height:1.5; color:var(--ink);
}

@media (max-width:860px) {
  .shots-grid { grid-template-columns:1fr; }
}

.panel-search {
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px;
  border-bottom:1px solid var(--hair);
}
.panel-search i { font-size:15px; color:var(--muted); }
.panel-search span { flex:1; font-size:13.5px; color:var(--muted); }
.kbd {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.06em;
  color:var(--accent);
  background:var(--accentFill);
  padding:4px 8px;
  border-radius:6px;
  flex:none;
}
.panel-body { padding:14px 16px 18px; }
.panel-label {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.panel-label + .clip, .panel-label + .clips { margin-top:8px; }
.panel-label.spaced { margin-top:16px; }
.clips { display:grid; gap:8px; }
.clip {
  background:var(--inset);
  border-radius:12px;
  padding:12px 13px;
  color:var(--ink);
}
.clip-text { font-size:13px; line-height:1.5; }
.clip-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:9px;
  font-size:11px;
  color:var(--muted);
}
.clip-actions { display:flex; gap:10px; }
.clip-actions .pinned { color:var(--accent); }

/* 2. Value row ------------------------------------------------------ */

.value-row { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.value-card { border-radius:20px; padding:34px; }
.value-figure { font-family:var(--display); font-size:clamp(38px, 4.4vw, 54px); line-height:1; }
.value-card p { font-size:15px; line-height:1.55; margin:12px 0 0; }
.value-card.pink { background:var(--accent); color:#FFFFFF; }
.value-card.pink p { color:rgba(255,255,255,0.85); }
.value-card.paper { background:var(--surface); border:1px solid var(--border); }
.value-card.paper .value-figure { color:var(--accent); }
.value-card.paper p { color:var(--muted); }
.value-card.deep { background:var(--deep); color:var(--deepInk); }
.value-card.deep p { color:var(--deepMuted); }

/* 3. Category ticker ------------------------------------------------ */

.ticker {
  margin-top:96px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:22px 0;
  overflow:hidden;
}
.ticker-track { display:flex; width:max-content; animation:fcticker 38s linear infinite; }
/* Each run is forced to at least a full viewport wide, so the two of them
   always span 200vw and the -50% shift can never expose the end of the
   track. Without this the run is only as wide as its eight words, and on a
   monitor wider than that the loop ran out and left blank space (2026-08-31).
   When the content is naturally wider than the viewport the min-width does
   nothing and the runs stay their natural, equal widths, so the seam still
   lands exactly. */
.ticker-run {
  display:flex;
  align-items:center;
  justify-content:space-around;
  min-width:100vw;
  flex:none;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.ticker-run span { padding:0 26px; }
.ticker-run .dot { color:var(--accent); padding:0; }
@keyframes fcticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* 4. Features ------------------------------------------------------- */

.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:22px;
  padding:40px;
}
.card.deep { background:var(--deep); color:var(--deepInk); border-color:transparent; }
.card.wide {
  grid-column:1 / -1;
  padding:44px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:center;
}
.card .eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); }
.card h3 {
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(27px, 2.9vw, 34px);
  line-height:1.08;
  letter-spacing:-0.025em;
  margin:12px 0;
}
.card.wide h3 { font-size:clamp(30px, 3.3vw, 40px); line-height:1.05; margin:14px 0; }
.card p { font-size:15.5px; line-height:1.6; color:var(--muted); margin:0 0 24px; text-wrap:pretty; }
.card.wide p { font-size:16px; margin:0; max-width:430px; }
.card.deep p { color:var(--deepMuted); }

.eyebrow-row { display:flex; align-items:center; gap:10px; }
.chip-pro {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.08em;
  color:#FFFFFF;
  background:var(--accent);
  padding:3px 7px;
  border-radius:5px;
}

.mock { background:var(--inset); border-radius:16px; padding:16px; }
.mock-search {
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--surface);
  border-radius:10px;
  padding:11px 13px;
  font-size:13px;
  color:var(--ink);
}
.mock-search i { font-size:14px; color:var(--muted); }
.mock-result {
  margin-top:12px;
  background:var(--surface);
  border-radius:12px;
  padding:13px;
  display:flex;
  gap:12px;
}
.mock-thumb {
  width:86px;
  height:62px;
  flex:none;
  border-radius:8px;
  background:var(--inset);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
}
.mock-thumb i { font-size:22px; }
.mock-ocr { flex:1; font-family:var(--mono); font-size:11.5px; line-height:1.5; }
.mock-ocr mark { background:var(--accentFill); color:var(--accent); padding:0 3px; border-radius:3px; }
.mock-meta {
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:11px;
  color:var(--muted);
}
.mock-meta .icons { display:flex; gap:10px; }
.mock-meta .pinned { color:var(--accent); }

/* ---- Folders mock (mirrors the Folders tab, one folder open) --------- */
.fold { background:var(--inset); border-radius:14px; padding:12px; display:grid; gap:10px; }
.fold-open {
  display:flex; align-items:center; gap:10px;
  background:var(--appAccentFill); border:1px solid var(--appAccent);
  border-radius:10px; padding:11px 13px;
}
.fold-open .f, .fold-open .pin { color:var(--appAccent); }
.fold-row { display:flex; align-items:center; gap:10px; background:var(--surface); border-radius:10px; padding:10px 13px; }
.fold-row .f { color:var(--appAccent); }
.fold .nm { flex:1; font-size:13px; font-weight:600; min-width:0; }
.fold-row .nm { font-weight:400; }
.fold .ct { font-size:11.5px; color:var(--muted); }
.fold .chev { font-size:12px; color:var(--muted); }
.fold i { font-size:14px; flex:none; }

.fold-tools { display:flex; gap:8px; }
.fold-tools span {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--surface); border-radius:9px; padding:8px 0;
  font-size:11.5px; color:var(--muted);
}
.fold-label { font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }

.fold-seg { display:flex; gap:4px; background:var(--surface); border-radius:10px; padding:4px; }
.fold-seg span { flex:1; text-align:center; font-size:11.5px; color:var(--muted); padding:7px 0; border-radius:7px; }
.fold-seg .on { background:var(--inset); color:var(--ink); font-weight:600; }

/* The open folder's items, ringed in the accent the same way the app rings
   whichever folder you're inside. */
.fold-items { background:var(--surface); border:1px solid var(--appAccent); border-radius:12px; padding:0 13px; }
.fold-item { padding:11px 0; }
.fold-item + .fold-item { border-top:1px solid var(--hair); }
.fold-item .t { font-size:12.5px; font-weight:600; margin-bottom:3px; }
.fold-item p { font-size:12.5px; line-height:1.45; color:var(--ink); margin:0; }
.fold-more { display:inline-block; margin-top:5px; font-size:11.5px; font-weight:600; color:var(--appAccent); }
.fold-tmpl { color:var(--appAccent); font-size:12px; margin-right:5px; vertical-align:-1px; }

/* ---- Transform mock (mirrors the Transform tab) ---------------------- */
.tf-label {
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--deepMuted); margin:0 2px 8px;
}
.tf-label + * + .tf-label, .tf-label ~ .tf-label { margin-top:16px; }
.tf-label .aux { font-family:var(--ui); font-size:11.5px; letter-spacing:0; text-transform:none; }
.tf-input {
  background:var(--deepPanel); border-radius:12px; padding:13px 14px;
  font-size:13px; line-height:1.5; color:var(--deepInk); min-height:58px;
}
.tf-block { background:var(--deepPanel); border-radius:12px; padding:10px; }
.tf-seg { display:inline-flex; gap:3px; background:rgba(0,0,0,0.22); border-radius:999px; padding:3px; margin-bottom:10px; }
.tf-seg span { font-size:11.5px; padding:5px 13px; border-radius:999px; color:var(--deepMuted); }
.tf-seg .on { background:rgba(255,255,255,0.14); color:#FFFFFF; font-weight:600; }
.tf-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.tf-grid span {
  text-align:center; font-size:11.5px; padding:10px 6px; border-radius:9px;
  background:rgba(255,255,255,0.06); color:var(--deepMuted);
}
.tf-grid .on { background:var(--accent); color:#FFFFFF; font-weight:600; }
.tf-out {
  border:1px dashed rgba(255,255,255,0.22); border-radius:12px;
  padding:13px 14px; font-size:13px; line-height:1.5; color:var(--deepInk);
}

/* 5. Privacy -------------------------------------------------------- */

.privacy-slab {
  background:var(--accent);
  color:#FFFFFF;
  border-radius:24px;
  padding:64px 52px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.privacy-slab .eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.75); }
.privacy-slab h2 {
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(36px, 4.6vw, 56px);
  line-height:1;
  letter-spacing:-0.03em;
  margin:16px 0 0;
  text-wrap:balance;
}
.privacy-body { display:grid; gap:18px; padding-top:8px; }
.privacy-body p { font-size:17px; line-height:1.6; color:rgba(255,255,255,0.88); margin:0; text-wrap:pretty; }
.privacy-points { display:grid; gap:10px; font-size:15px; }
.privacy-points .check i { color:#FFFFFF; }

/* 6. Pricing -------------------------------------------------------- */

.pricing-sub { font-size:16px; color:var(--muted); margin:0 0 44px; }
.h2.tight { margin-bottom:12px; }
.plans { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.plan-label { font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.plan.deep .plan-label { color:var(--accent); }
.chip-trial {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.08em;
  color:#FFFFFF;
  background:var(--accent);
  padding:3px 8px;
  border-radius:999px;
}
.amount { font-family:var(--display); font-size:clamp(46px, 5.2vw, 64px); line-height:1; margin:14px 0 6px; }
.amount .per { font-size:20px; color:var(--muted); }
.plan.deep .amount .per { color:var(--deepMuted); }
.plan-note { font-size:14px; color:var(--muted); margin:0 0 26px; }
.plan.deep .plan-note { color:var(--deepMuted); }
.plan-points { display:grid; gap:11px; font-size:15px; }
/* Pro is additive -- say so once, above the list, rather than restating every
   free feature inside it. */
.plan-plus { font-size:13.5px; color:var(--deepMuted); margin:0 0 14px; }
.plan-cta {
  display:flex;
  justify-content:center;
  margin-top:32px;
  padding:15px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.plan-cta.outline { border:1px solid var(--border); color:var(--ink); }
.plan-cta.outline:hover { border-color:var(--ink); color:var(--ink); }
.plan-cta.pink { background:var(--accent); color:#FFFFFF; }
.plan-cta.pink:hover { background:#FFFFFF; color:#313851; }

/* 7. FAQ ------------------------------------------------------------ */

.faq-grid { display:grid; grid-template-columns:0.7fr 1.3fr; gap:56px; }
.faq-grid h2 {
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(34px, 4.3vw, 52px);
  line-height:1;
  letter-spacing:-0.03em;
  margin:0;
  text-wrap:balance;
}
.faq details { border-top:1px solid var(--border); padding:22px 0; }
.faq details:last-child { border-bottom:1px solid var(--border); }
.faq summary {
  font-size:17px;
  font-weight:600;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary i { font-size:15px; color:var(--accent); flex:none; transition:transform .18s ease; }
.faq details[open] summary i { transform:rotate(45deg); }
.faq p { font-size:15px; line-height:1.65; color:var(--muted); margin:12px 0 0; max-width:620px; }

/* 8. Download ------------------------------------------------------- */

.download-slab {
  background:var(--deep);
  color:var(--deepInk);
  border-radius:24px;
  padding:84px 52px;
  text-align:center;
}
.download-slab h2 {
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(40px, 5.8vw, 72px);
  line-height:0.98;
  letter-spacing:-0.035em;
  margin:0 0 16px;
  text-wrap:balance;
}
.download-slab p { font-size:17px; color:var(--deepMuted); margin:0 0 32px; }
.download-slab .btn { font-size:16.5px; padding:18px 34px; }
.download-slab .btn i { font-size:19px; }
.specs {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:26px;
  margin-top:26px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--deepMuted);
}

/* 9. Footer --------------------------------------------------------- */

.site-footer {
  max-width:var(--wrap);
  margin:0 auto;
  padding:44px var(--pad) 60px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
}
.footer-links { display:flex; flex-wrap:wrap; gap:22px; font-size:13.5px; color:var(--muted); }
.footer-links a { color:inherit; }
.footer-links a:hover { color:var(--ink); }
.copyright { margin-left:auto; font-size:12.5px; color:var(--muted); }

/* Responsive -------------------------------------------------------- */

@media (max-width:1080px) {
  .hero { grid-template-columns:1fr; gap:0; align-items:start; }
  .hero-copy { padding-bottom:48px; }
  .hero-panel-slot { transform:translateY(40px); max-width:520px; }
  .card.wide { grid-template-columns:1fr; gap:28px; }
  .card.wide p { max-width:none; }
  .privacy-slab { grid-template-columns:1fr; gap:28px; }
  .faq-grid { grid-template-columns:1fr; gap:28px; }
}

@media (max-width:860px) {
  :root { --pad:22px; }
  .navlinks { display:none; }
  .section { padding-top:72px; }
  .ticker { margin-top:72px; }
  .value-row { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:1fr; }
  .plans { grid-template-columns:1fr; }
  .privacy-slab { padding:44px 28px; }
  .download-slab { padding:56px 28px; }
  .card, .card.wide { padding:28px; }
  .value-card { padding:28px; }
  .copyright { margin-left:0; }
}

@media (max-width:480px) {
  .nav { gap:14px; height:64px; }
  .logo img { height:19px; }
  .navcta { font-size:12.5px; padding:9px 14px; }
  .theme-toggle { width:32px; height:32px; }
  .specs { gap:14px; }
}

@media (prefers-reduced-motion:reduce) {
  .ticker-track { animation:none; }
  * { transition:none !important; }
}