/* ══════════════════════════════════════════════════════════════════════════
   Denly – landing page styles
   Warm-dark system, matched to the product dashboard.
   Fonts self-hosted (fonts/fonts.css). No runtime CDN.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens (dark = default) ──────────────────────────────────────────────── */
:root{
  /* Graphite, matching the app's .theme-graphite surfaces exactly so the site and
     the product are the same colour. */
  --bg:#17181b; --bg-2:#1b1c20; --panel:#1f2125; --card:#25272c; --card-2:#2d3036; --raise:#383b42;
  --line:rgba(233,231,228,.08); --line-2:rgba(233,231,228,.15); --line-3:rgba(233,231,228,.22);
  /* --faint must clear 4.5:1 on --card (the darkest surface it lands on); it
     renders the price period + the tax/currency disclosure, which are the last
     things to shrug off. The app's graphite --faint (#726f68) is only 2.98:1
     there, so this is NOT copied from it - #94959b is 5.00:1 on --card and stays
     dimmer than --muted (6.01:1), keeping text > muted > faint intact. */
  --text:#eceae6; --muted:#a7a49d; --faint:#94959b;

  /* amber = "your move" – reserved for gates + primary CTA */
  --gate:#f0b545; --gate-strong:#f6c869; --gate-soft:rgba(240,181,69,.11); --gate-line:rgba(240,181,69,.4); --gate-ink:#2a1e05;
  /* teal/sage = agent working */
  --run:#8dbca6; --run-soft:rgba(141,188,166,.11); --run-line:rgba(141,188,166,.3);
  /* --bad-soft is here for /static/shared/task-ui.css: a failed run tints the
     stage chip and the pip it died on. Nothing on the landing shows a failure
     today, but the shared component must resolve on both pages or the first
     shot that does would render an unstyled chip. */
  --done:#84c082; --done-ink:#84c082; --done-soft:rgba(132,192,130,.14); --bad:#e08a6f; --bad-soft:rgba(224,138,111,.12);

  --accent:#f0b545; --accent-strong:#f6c869;

  --r:14px; --r-sm:9px; --r-lg:20px; --r-xl:26px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 34px rgba(0,0,0,.4);
  --shadow-lg:0 40px 90px rgba(0,0,0,.55);
  --maxw:1120px;
  --head:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
:root.light{
  --bg:#f4efe6; --bg-2:#efe9dd; --panel:#fbf8f2; --card:#ffffff; --card-2:#f6f1e8; --raise:#efe8db;
  --line:rgba(60,45,20,.10); --line-2:rgba(60,45,20,.17); --line-3:rgba(60,45,20,.26);
  --text:#2a2318; --muted:#6e6552; --faint:#6b6252;
  /* The light amber is darker than the dark theme's, not lighter: at #c98a12 it
     was 2.44:1 on --bg-2 as link/eyebrow text AND only 2.81:1 behind --gate-ink
     on the primary CTA. #8a5d05 clears 4.5:1 in both directions (4.76:1 as text
     on --bg-2, 5.44:1 for --gate-ink on the fill), so one token fixes both. */
  --gate:#8a5d05; --gate-strong:#6f4a03; --gate-soft:rgba(138,93,5,.13); --gate-line:rgba(138,93,5,.45); --gate-ink:#fff8e8;
  --run:#3d9b82; --run-soft:rgba(61,155,130,.12); --run-line:rgba(61,155,130,.32);
  --done:#4f9a4d; --done-ink:#367034; --done-soft:rgba(79,154,77,.14); --bad:#c85a3c; --bad-soft:rgba(200,90,60,.12);
  --accent:#8a5d05; --accent-strong:#6f4a03;
  --shadow:0 1px 2px rgba(60,45,20,.06), 0 12px 30px rgba(60,45,20,.09);
  --shadow-lg:0 40px 80px rgba(60,45,20,.18);
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{
  margin:0;font-family:var(--head);color:var(--text);background:var(--bg);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:radial-gradient(1200px 700px at 84% -8%, rgba(240,181,69,.06), transparent 60%);
  background-attachment:fixed;
}
:root.light body{background-image:radial-gradient(1200px 700px at 84% -8%, rgba(201,138,18,.07), transparent 60%);}
h1,h2,h3,h4,p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-strong)}
img,svg{display:block}
.mono{font-family:var(--mono);font-feature-settings:'tnum'}
::selection{background:var(--gate-soft)}
:focus-visible{outline:2px solid var(--gate);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gate);color:var(--gate-ink);padding:10px 16px;border-radius:10px;font-weight:700;z-index:200}
.skip:focus{left:16px}

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{position:relative}
.eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gate);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--gate-line)}
.section-head{max-width:640px;margin:0 0 44px}
.section-head h2{font-size:clamp(28px,4.2vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin-top:16px;text-wrap:balance}
.section-head p{font-size:clamp(16px,1.9vw,18.5px);color:var(--muted);margin-top:16px;line-height:1.55;text-wrap:pretty}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--head);font-size:15px;font-weight:700;padding:13px 22px;border-radius:12px;transition:.14s;white-space:nowrap;line-height:1;cursor:pointer;border:none}
.btn svg{flex:none}
.btn-primary{background:var(--gate);color:var(--gate-ink);box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 8px 22px rgba(240,181,69,.2)}
.btn-primary:hover{background:var(--gate-strong);color:var(--gate-ink);transform:translateY(-1px)}
.btn-ghost{background:var(--card);border:1px solid var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--line-3);background:var(--card-2);color:var(--text)}
.btn-lg{font-size:16px;padding:15px 26px}
.btn-block{width:100%}

/* ══ HEADER ══════════════════════════════════════════════════════════════════ */
.hdr{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
.hdr.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 90%,transparent)}
.hdr-in{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--text)}
.brand:hover{color:var(--text)}
.brand img{width:30px;height:30px;border-radius:8px}
.hdr-nav{display:flex;align-items:center;gap:4px;margin-left:12px}
.hdr-nav a{color:var(--muted);font-size:14.5px;font-weight:550;padding:8px 12px;border-radius:9px}
.hdr-nav a:hover{color:var(--text);background:var(--card)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.theme-btn{width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);background:var(--card);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.theme-btn:hover{color:var(--text);border-color:var(--line-3)}
.theme-btn .sun{display:none}
:root.light .theme-btn .sun{display:block}
:root.light .theme-btn .moon{display:none}
.menu-btn{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);background:var(--card);color:var(--text);align-items:center;justify-content:center;cursor:pointer;flex:none}

/* ══ HERO ════════════════════════════════════════════════════════════════════ */
.hero{padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.beta-pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--muted);background:var(--card);border:1px solid var(--line-2);padding:6px 13px 6px 10px;border-radius:20px}
/* Pricing beta banner: the plans below describe the future, and during the
   beta nothing is enforced – say so before anyone reads a single cap. Full
   container width, matching the price grid below it. (Distinct class: a legacy
   `.beta-banner` rule further down carries its own max-width.) */
.pricing-beta{display:flex;align-items:flex-start;gap:11px;margin:-22px 0 34px;padding:13px 16px;background:var(--card);border:1px solid var(--gate-line);border-radius:11px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.pricing-beta b{color:var(--gate)}
.pricing-beta .d{flex:none;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--run);box-shadow:0 0 0 3px var(--run-soft)}
.beta-pill b{color:var(--gate);font-weight:700}
.beta-pill .d{width:7px;height:7px;border-radius:50%;background:var(--run);box-shadow:0 0 0 3px var(--run-soft)}
.hero h1{font-size:clamp(34px,5.4vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:22px 0 0;text-wrap:balance}
.hero h1 .hl{color:var(--gate)}
.hero-sub{font-size:clamp(16.5px,2.1vw,20px);color:var(--muted);margin-top:22px;max-width:33ch;line-height:1.5;text-wrap:pretty}
.hero-cta{display:flex;align-items:center;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-note{margin-top:16px;font-family:var(--mono);font-size:12.5px;color:var(--faint);display:flex;align-items:center;gap:8px}
.hero-note svg{color:var(--run)}

/* hero trust triad card */
.triad{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line-2);border-radius:var(--r-xl);padding:8px;box-shadow:var(--shadow-lg)}
.triad-in{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--bg)}
.triad-row{display:flex;align-items:center;gap:15px;padding:19px 20px;border-bottom:1px solid var(--line)}
.triad-row:last-child{border-bottom:none}
.triad-ic{width:42px;height:42px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line-2);color:var(--gate)}
.triad-tx b{font-size:15.5px;font-weight:700;display:block;letter-spacing:-.01em}
.triad-tx span{font-size:13.5px;color:var(--muted);display:block;margin-top:2px;line-height:1.4}
.triad-tag{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--run);background:var(--run-soft);border:1px solid var(--run-line);padding:3px 9px;border-radius:20px;flex:none}

/* ══ INSTALL ═════════════════════════════════════════════════════════════════ */

/* ══ LOGO / SCOPE STRIP ══════════════════════════════════════════════════════ */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.strip-in{display:flex;align-items:center;gap:14px 34px;padding:20px 0;flex-wrap:wrap}
.strip-lbl{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.strip-item{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--muted)}
.strip-item svg{color:var(--faint)}
.strip-item .no{color:var(--faint);font-weight:500;text-decoration:line-through;text-decoration-color:var(--line-3)}

/* ══ PROBLEM ═════════════════════════════════════════════════════════════════ */
.problem{padding:clamp(56px,8vw,96px) 0}
.prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.prob-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 28px;position:relative}
.prob-card .tag{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--bad);display:inline-flex;align-items:center;gap:8px}
.prob-card h3{font-size:20px;font-weight:750;letter-spacing:-.02em;margin:14px 0 8px}
.prob-card p{font-size:15px;color:var(--muted);line-height:1.55}
.prob-card p b{color:var(--text);font-weight:650}
.prob-bridge{text-align:center;margin-top:36px;font-size:clamp(18px,2.6vw,24px);font-weight:700;letter-spacing:-.02em;color:var(--text);text-wrap:balance}
.prob-bridge .hl{color:var(--gate)}

/* ══ HOW IT WORKS ════════════════════════════════════════════════════════════ */
.how{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--line);background:var(--bg-2)}
.flow{display:flex;flex-direction:column;gap:0;margin-top:8px}
.flow-step{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:0 0 8px;position:relative}
.flow-rail{display:flex;flex-direction:column;align-items:center;gap:0}
.flow-pip{width:44px;height:44px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:15px;border:1px solid var(--line-2);background:var(--card);color:var(--muted);z-index:1}
.flow-step.gate .flow-pip{background:var(--gate);color:var(--gate-ink);border-color:var(--gate)}
.flow-step.agent .flow-pip{background:var(--card);color:var(--run);border-color:var(--run-line)}
.flow-line{flex:1;width:2px;background:var(--line-2);min-height:26px}
.flow-step:last-child .flow-line{display:none}
.flow-body{padding-bottom:30px;padding-top:8px}
.flow-who{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.flow-step.agent .flow-who{color:var(--run)}
.flow-step.gate .flow-who{color:var(--gate)}
.flow-body h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:6px 0 6px}
.flow-body p{font-size:15px;color:var(--muted);line-height:1.55;max-width:56ch}
.flow-body code{font-family:var(--mono);font-size:13px;background:var(--card-2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:var(--gate-strong)}

/* ══ DASHBOARD / PRODUCT SHOT ════════════════════════════════════════════════ */
.see{padding:clamp(56px,8vw,96px) 0}
.shot{margin-top:8px;background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line-2);border-radius:var(--r-xl);padding:10px;box-shadow:var(--shadow-lg)}
.shot-win{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg)}
.win-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.win-dots{display:flex;gap:7px}
.win-dots i{width:11px;height:11px;border-radius:50%;background:var(--line-3)}
.win-url{margin-left:10px;font-family:var(--mono);font-size:12px;color:var(--faint);display:flex;align-items:center;gap:7px}
.win-url b{color:var(--muted);font-weight:500}
.win-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.win-live .d{width:7px;height:7px;border-radius:50%;background:var(--run);box-shadow:0 0 0 3px var(--run-soft)}

.dash{display:grid;grid-template-columns:210px 1fr}
.dash-nav{background:var(--panel);border-right:1px solid var(--line);padding:14px 12px;display:flex;flex-direction:column;gap:3px}
.dn-org{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;margin-bottom:8px}
.dn-badge{width:28px;height:28px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:linear-gradient(150deg,var(--gate),#d88b1a);color:var(--gate-ink)}
.dn-org b{font-size:13.5px;font-weight:650;letter-spacing:-.01em}
.dn-org span{font-size:10.5px;color:var(--faint);display:block}
/* The workspace row opens a menu in the app, so it carries a caret; the signed-in
   account sits at the foot of the sidebar with the sign-out control beside it.
   Both were missing while the shot showed five screens the app no longer has. */
.dn-caret,.dn-out{margin-left:auto;flex:none;color:var(--faint)}
.dn-me{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;margin-top:auto;
  border-top:1px solid var(--line);padding-top:11px}
.dn-me b{font-size:12.5px;font-weight:650;letter-spacing:-.01em;display:block}
.dn-me span{font-family:var(--mono);font-size:10px;color:var(--faint);display:block}
.dn-badge.sm{width:24px;height:24px;border-radius:50%;font-size:11px;
  background:linear-gradient(150deg,var(--run),#5e9c81);color:var(--ink)}
/* the mock's app bar: the scope switcher that replaced the sidebar's project
   list. Sized to read at the shot's scale, not to match the app pixel for pixel. */
.dm-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line)}
.dm-proj{display:flex;align-items:center;gap:9px;padding:5px 9px 5px 6px;border-radius:11px;
  border:1px solid var(--line-2);background:var(--card);color:var(--faint)}
/* the app's pchip: the project's initial, tinted by its colour, ringed by runner
   state (teal live / amber stale / red offline). The ring is the status - there
   is no separate dot. */
.pchip{position:relative;width:30px;height:30px;border-radius:50%;flex:none;display:inline-flex;
  align-items:center;justify-content:center;font-weight:800;font-size:13px;letter-spacing:-.02em;
  box-shadow:0 0 0 2px var(--line-2)}
.pchip.live{box-shadow:0 0 0 2px var(--run)}
.pchip.stale{box-shadow:0 0 0 2px var(--gate)}
.pchip.offline{box-shadow:0 0 0 2px var(--bad)}
.dm-proj-t{display:flex;flex-direction:column;gap:1px;line-height:1.15}
.dm-proj-t b{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.dm-proj-t i{font-family:var(--mono);font-size:10px;font-style:normal;color:var(--faint)}
.dn-sec{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:12px 10px 5px}
/* .dn-item is gone: the sidebar's items are the app's own .nav-item now, from
   /static/shared/task-ui.css, rendered off the same DENLY_NAV list. */
.dot.live{background:var(--run);box-shadow:0 0 0 3px var(--run-soft)}
.dot.stale{background:var(--gate)}
.dot.offline{background:var(--faint)}

.dash-main{min-width:0;background:var(--bg)}

/* The board inside the shot.
   The cards, the sidebar items and the stat pills are NOT defined here. They
   come from /static/shared/task-ui.css, which the dashboard links too, and
   landing.js renders them through the same functions the dashboard calls. That
   is the whole point: the shot used to be a hand-copy under parallel class
   names (.trow, .tchip, .tcta) and it drifted every time the app moved. What's
   left below is only the scale-down - a shot is a smaller frame than the app. */
.dn-items{display:flex;flex-direction:column;gap:2px}
.dash-nav .nav-item{font-size:13px;padding:7px 9px;gap:9px;cursor:default}
.dash-nav .nav-item svg{width:15px;height:15px}
.dash-nav .ni-count{font-size:11px;min-width:18px;height:18px}
/* The filter bar is the middle of the real app bar, and it is most of its width:
   a magnifier, the scope chip the switcher pins into the query, and the
   placeholder. Inert here - it is a picture of a control, not a control. */
.dm-find{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:6px 11px;
  border-radius:10px;border:1px solid var(--line-2);background:var(--card);color:var(--faint);overflow:hidden}
.dm-find-chip{flex:none;font-family:var(--mono);font-size:10.5px;padding:2px 7px;border-radius:6px;
  background:var(--panel-2,rgba(255,255,255,.04));border:1px solid var(--line);color:var(--muted)}
.dm-find-ph{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-caret{flex:none;color:var(--faint)}
.dm-live{flex:none;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:11px;color:var(--muted)}
.dm-live .d{width:6px;height:6px;border-radius:50%;background:var(--run);box-shadow:0 0 0 3px var(--run-soft)}
.dm-new{flex:none;flex:none;padding:8px 13px;border-radius:10px;font-size:13px;font-weight:650;color:var(--gate-ink);background:var(--gate);white-space:nowrap}
.dm-board{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.dm-board .pl-card.cf .cf-tap{padding:14px 17px 13px;cursor:default}
.dm-board .pl-cta{cursor:default}
.shot .tb-stats{border-left:none;padding-left:10px;margin-left:6px}
.shot .tb-stat{padding:5px 9px}
.shot .tb-stat b{font-size:13px}
.shot .tb-stat span{font-size:11.5px}

.shot-cap{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:22px;flex-wrap:wrap}
.shot-cap span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.shot-cap .sw{width:11px;height:11px;border-radius:4px;flex:none}
.sw.gate{background:var(--gate)} .sw.run{background:var(--run)}

/* ══ TRUST / DATA BOUNDARY ═══════════════════════════════════════════════════ */
.trust{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--line);background:var(--bg-2)}
.bands{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;align-items:stretch}
.band{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:22px;background:var(--panel);display:flex;flex-direction:column}
.band.a{border-color:var(--run-line);background:linear-gradient(180deg,var(--run-soft),transparent 140px),var(--panel)}
.band.b{border-color:var(--gate-line);background:linear-gradient(180deg,var(--gate-soft),transparent 140px),var(--panel)}
.band.c{background:var(--panel)}
.band-h{display:flex;align-items:flex-start;gap:13px;margin-bottom:14px}
.band-ic{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center}
.band.a .band-ic{background:var(--run-soft);border:1px solid var(--run-line);color:var(--run)}
.band.b .band-ic{background:var(--gate-soft);border:1px solid var(--gate-line);color:var(--gate)}
.band.c .band-ic{background:var(--card);border:1px solid var(--line-2);color:var(--muted)}
.band-tag{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;display:inline-block;margin-bottom:5px}
.band-tag.a{color:var(--run)}.band-tag.b{color:var(--gate)}.band-tag.c{color:var(--faint)}
.band-h-tx b{font-size:15.5px;font-weight:750;letter-spacing:-.015em;display:block;line-height:1.2}
.band-h-tx small{display:block;color:var(--muted);font-size:12px;margin-top:4px;line-height:1.4}
.bli{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--text);line-height:1.35}
.bli:first-of-type{border-top:none}
.bli .bic{margin-top:1px;flex:none}
.band.a .bli .bic{color:var(--run)}
.band.b .bli .bic{color:var(--gate)}
.band.c .bli .bic{color:var(--faint)}
.bli small{display:block;color:var(--faint);font-size:11.5px;font-family:var(--mono);margin-top:3px}
.bli small.cipher{color:var(--gate);opacity:.65;letter-spacing:.04em}
.key-warn{margin-top:16px;display:flex;gap:14px;align-items:flex-start;background:linear-gradient(90deg,var(--gate-soft),transparent 70%),var(--card);border:1px solid var(--gate-line);border-radius:var(--r);padding:18px 20px}
.key-warn .kw-ic{flex:none;color:var(--gate);margin-top:2px}
.key-warn b{font-weight:750;font-size:15px}
.key-warn p{font-size:14px;color:var(--muted);line-height:1.55;margin-top:4px}
.key-warn p{max-width:none}
.trust-note{margin-top:24px;display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:18px 20px}
.trust-note .tn-ic{flex:none;color:var(--gate);margin-top:1px}
.trust-note b{font-weight:700}
.trust-note p{font-size:14px;color:var(--muted);line-height:1.55;margin-top:3px}

/* honest trade-off callout */
.tradeoff{margin-top:20px;background:linear-gradient(90deg,var(--gate-soft),transparent 70%),var(--card);border:1px solid var(--gate-line);border-radius:var(--r);padding:20px 22px;display:flex;gap:16px;align-items:flex-start}
.tradeoff .to-ic{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--gate);color:var(--gate-ink)}
.tradeoff h4{font-size:16px;font-weight:750;letter-spacing:-.01em}
.tradeoff p{font-size:14px;color:var(--muted);line-height:1.55;margin-top:5px}
.tradeoff p b{color:var(--text)}

/* ══ SETUP ═══════════════════════════════════════════════════════════════════ */
.setup{padding:clamp(56px,8vw,96px) 0}
.steps3{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.s3{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;position:relative;overflow:hidden}
.s3-n{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--gate-ink);background:var(--gate);width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.s3 h3{font-size:17px;font-weight:750;letter-spacing:-.01em;margin:16px 0 7px}
.s3 p{font-size:14px;color:var(--muted);line-height:1.5}
.s3 p code{font-family:var(--mono);font-size:12.5px;background:var(--card-2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:var(--gate-strong)}
.s3-mock{margin-top:16px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2);padding:13px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px}
.setup-foot{margin-top:24px;text-align:center;font-size:14.5px;color:var(--muted)}
.setup-foot b{color:var(--text);font-weight:700}
.setup-foot .prov{font-family:var(--mono);color:var(--run)}

/* compact proof points between the core product shot and data boundary */
.capabilities{padding:clamp(48px,7vw,76px) 0;border-top:1px solid var(--line)}
.section-head.compact{margin-bottom:24px}.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cap-grid article{padding:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.cap-grid h3{font-size:15px;margin:0 0 6px}.cap-grid p{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0}
/* The integrations card carries 15 guide links, so it takes the full row rather than wrapping them into a third of it. */
.cap-grid .cap-wide{grid-column:1/-1}
.cap-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cap-links a{padding:5px 11px;border:1px solid var(--line-2);border-radius:999px;background:var(--card-2);color:var(--muted);font-size:12.5px;text-decoration:none}
.cap-links a:hover{color:var(--text);border-color:var(--line-3)}
/* An inline link inside a paragraph cannot rely on amber alone: it is 1.35:1
   against the surrounding muted text (WCAG 1.4.1). The pills above are not in
   a text block and keep their border as the cue. */
.cap-grid p a{text-decoration:underline;text-underline-offset:2px}

/* ══ PRICING ═════════════════════════════════════════════════════════════════ */
.pricing{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--line);background:var(--bg-2)}
.billing-cycle{display:flex;width:max-content;margin:0 auto 8px;padding:4px;border:1px solid var(--line-2);border-radius:999px;background:var(--card)}
/* The `font:` shorthand resets line-height to normal, which is what collapsed
    these to ~30px. Set the parts and a min-height instead – this is the primary
   control of the pricing section, so it earns the full 44px target. */
.billing-cycle button{border:0;border-radius:999px;padding:0 20px;min-height:44px;background:transparent;color:var(--muted);font-family:var(--mono);font-size:12px;font-weight:600;line-height:1;cursor:pointer;touch-action:manipulation}
.billing-cycle button.active{background:var(--gate);color:var(--gate-ink)}
/* aria-disabled rather than [disabled]: a disabled button drops out of the tab
   order, which made its only explanation (a title tooltip) unreachable by
   keyboard and touch. The visible .cycle-hint carries the reason instead. */
.billing-cycle button[aria-disabled="true"]{cursor:not-allowed;opacity:.6}
.cycle-hint{display:block;margin:0 auto 4px;text-align:center;color:var(--muted);font:12px var(--mono)}
.pricing-status{min-height:2.6em;margin:0 auto 24px;text-align:center;color:var(--faint);font:12px var(--mono)}
.beta-banner{display:flex;align-items:center;gap:15px;background:linear-gradient(90deg,var(--gate-soft),transparent 80%),var(--card);border:1px solid var(--gate-line);border-radius:var(--r);padding:16px 20px;margin-bottom:26px;max-width:720px}
.beta-banner .bb-ic{width:38px;height:38px;border-radius:11px;flex:none;background:var(--gate);color:var(--gate-ink);display:flex;align-items:center;justify-content:center}
.beta-banner b{font-weight:750;font-size:15px}
.beta-banner p{font-size:13.5px;color:var(--muted);margin-top:2px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1180px}
.pcard{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column}
.pcard.pro{position:relative;background:linear-gradient(180deg,var(--panel),var(--card))}
.pcard-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pcard-name{margin:0;font-size:15px;font-weight:700;letter-spacing:.01em}
.pcard.pro .pcard-name{color:var(--gate)}
.pcard-future{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line-2);border-radius:20px;padding:3px 9px}
.pcard-price{display:flex;align-items:baseline;gap:6px;margin:18px 0 4px}
.pcard-price .amt{font-family:var(--head);font-size:44px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:3.5ch;display:inline-block}
.pcard-price .per{font-family:var(--mono);font-size:13px;color:var(--faint)}
.pcard-tagline{font-size:13.5px;color:var(--muted);min-height:20px}
.pfeat{list-style:none;padding:0;margin:22px 0 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.pfeat li{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--text)}
.pfeat li svg{flex:none;margin-top:2px;color:var(--done-ink)}
.pfeat li.muted{color:var(--faint)}
.pfeat li.muted svg{color:var(--faint)}
.pfeat li b{font-weight:700}
.pcard .btn{margin-top:auto}
.pcard-soon{margin-top:auto;text-align:center;font-family:var(--mono);font-size:12.5px;color:var(--faint);border:1px dashed var(--line-3);border-radius:12px;padding:13px}
.markup-note{margin-top:24px;display:flex;align-items:center;gap:14px;max-width:1180px;background:var(--done-soft);border:1px solid var(--done);border-radius:var(--r);padding:18px 22px}
.markup-note .mn-ic{width:40px;height:40px;border-radius:11px;flex:none;background:var(--done);color:var(--gate-ink);display:flex;align-items:center;justify-content:center}
.markup-note b{font-weight:750;font-size:15.5px;letter-spacing:-.01em}
.markup-note p{font-size:13.5px;color:var(--muted);margin-top:2px}

/* ══ FAQ ═════════════════════════════════════════════════════════════════════ */
.faq{padding:clamp(56px,8vw,96px) 0}
.faq-list{max-width:780px;margin:8px auto 0;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;gap:16px;padding:20px 4px;background:none;border:none;cursor:pointer;text-align:left;color:var(--text);font-family:var(--head)}
.faq-h{margin:0;font-size:inherit;font-weight:inherit}
.faq-q>span:first-child{font-size:16.5px;font-weight:650;letter-spacing:-.01em;flex:1}
.faq-q .pm{width:26px;height:26px;border-radius:8px;border:1px solid var(--line-2);flex:none;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.2s}
.faq-item.open .pm{background:var(--gate);border-color:var(--gate);color:var(--gate-ink);transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .28s ease,visibility 0s .28s}
.faq-item.open .faq-a{visibility:visible;transition:max-height .28s ease,visibility 0s}
.faq-a-in{padding:0 4px 22px;font-size:15px;color:var(--muted);line-height:1.6;max-width:64ch}
.faq-a-in b{color:var(--text);font-weight:650}
.faq-a-in code{font-family:var(--mono);font-size:13px;background:var(--card-2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:var(--gate-strong)}

/* ══ CTA BAND ════════════════════════════════════════════════════════════════ */
.ctaband{padding:clamp(56px,8vw,90px) 0}
.ctaband-in{background:linear-gradient(150deg,var(--panel),var(--bg-2));border:1px solid var(--line-2);border-radius:var(--r-xl);padding:clamp(36px,6vw,64px);text-align:center;position:relative;overflow:hidden}
.ctaband-in::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 300px at 50% -30%,var(--gate-soft),transparent 70%);pointer-events:none}
.ctaband h2{font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.08;text-wrap:balance;position:relative}
.ctaband p{font-size:17px;color:var(--muted);margin-top:16px;position:relative}
.ctaband .hero-cta{justify-content:center;position:relative}

/* ══ FOOTER ══════════════════════════════════════════════════════════════════ */
.ft{border-top:1px solid var(--line);background:var(--bg-2);padding:44px 0 30px}
.ft-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid var(--line)}
.ft-brand{max-width:300px}
.ft-brand .brand{margin-bottom:12px}
.ft-brand p{font-size:13.5px;color:var(--faint);line-height:1.55}
.ft-cols{display:flex;gap:56px;flex-wrap:wrap}
.ft-col h3{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
/* One column heading is a link (/guides); it must not read as a different
   kind of thing from the four that are not. */
.ft-col h3 a{display:inline;font:inherit;padding:0;color:inherit;text-decoration:none}
.ft-col h3 a:hover{color:var(--text)}
.ft-col a{display:block;font-size:14px;color:var(--muted);padding:11px 0}
.ft-col a:hover{color:var(--text)}
.ft-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;flex-wrap:wrap}
.ft-bot span{font-size:13px;color:var(--faint)}
.ft-scope{font-family:var(--mono);font-size:12px;color:var(--faint);display:flex;gap:16px;flex-wrap:wrap}

/* ══ MOBILE ══════════════════════════════════════════════════════════════════ */
.mobile-nav{position:fixed;inset:0;z-index:120;background:var(--bg);padding:22px 24px;display:none;flex-direction:column;gap:6px}
.mobile-nav.open{display:flex}
.mobile-nav .mn-head{display:flex;align-items:center;margin-bottom:18px}
.mobile-nav .mn-head .close{margin-left:auto;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);background:var(--card);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer}
.mobile-nav a{font-size:20px;font-weight:650;color:var(--text);padding:14px 0;border-bottom:1px solid var(--line)}
.mobile-nav .btn{margin-top:20px}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .triad{max-width:520px}
  .prob-grid,.price-grid{grid-template-columns:1fr}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .bands{grid-template-columns:1fr;gap:14px}
  .steps3{grid-template-columns:1fr}
  .dash-nav{display:none}
  .dash{grid-template-columns:1fr}
}
/* The full header - brand, six nav links, theme, Sign in, CTA - needs about
   1040px. It used to collapse at 760, so every width from 761 to 1040 (iPad
   portrait among them) scrolled sideways. Collapse it while it still fits
   rather than at a width that looks like a phone. */
@media (max-width:1040px){
  .hdr-nav{display:none}
  .menu-btn{display:inline-flex}
  .hdr-right .btn-ghost{display:none}
}
@media (max-width:760px){
  .cap-grid{grid-template-columns:1fr}
  .shot{padding:6px}
  .win-url b{display:none}
  .dm-board{padding:11px 12px}
  .dm-board .pl-card.cf .cf-tap{padding:13px 14px 12px}
  /* The stat pills and the New task button both want the bar's right edge; on a
     phone the pills go and the switcher + button stay, which is the app's own
     @media (max-width:860px) rule. */
  .shot .tb-stats{display:none}
}
/* The header's four items - brand, theme, CTA, hamburger - need 428px at the
   440px gutter, so every phone narrower than that scrolled sideways and clipped
   the hamburger. The CTA is the one that goes: the hero repeats it above the
   fold, and the drawer carries it full-width. */
@media (max-width:560px){
  .hdr-right .btn-primary{display:none}
}
@media (max-width:440px){
  .container{padding:0 18px}
  .hero-cta .btn{width:100%}
}

@keyframes breathe{0%,100%{opacity:1}50%{opacity:.4}}
/* Clamping duration alone left `breathe` at iteration-count:infinite, so the
    opacity cycle ran ~1000x/second – a strobe, for the people who asked for less
   motion. Cap the iteration count and the transitions too. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}