/* PostKeep — postkeep.app
   One stylesheet for every page. Same-origin, no external fonts or CDN.

   Palette lives in :root as tokens; the dark scheme redefines only the tokens,
   so a rule is never written twice. Originally lifted from a pair of light/dark
   mock-ups that duplicated every rule; those have since been deleted, and this
   file is the only stylesheet. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Surface ladder. These must never collide: the page tone, the card that
     sits on it, and the recessed panels inside that card are four distinct
     steps. The mock had body and card both on --sf, i.e. the same colour, so
     a 1px border was the only thing separating a card from the page behind
     it. */
  --bg:#F1F4FC;      /* page */
  --bg2:#E7ECF8;     /* alternating section band */
  --sf:#FFFFFF;      /* card, raised */
  --sf2:#F2F5FC;     /* panel recessed into a card */
  --sf3:#E5EBF6;     /* deeper panel */
  --bd:#D7DEEF;
  --bd2:#B8C4DC;
  --card-shadow:0 1px 2px rgba(13,21,51,.05), 0 8px 20px rgba(13,21,51,.08);
  --ac:#5E72E8;
  --acl:#3B52D4;
  --acd:#DBE4FF;
  --t1:#0D1533;
  --t2:#3D4E7A;
  --t3:#8292BE;
  --ok:#16A34A;
  --okd:#DCFCE7;
  /* The nav was a hardcoded rgba in both mocks — the one value that did not
     come from a token, and so the one that could not follow the theme. */
  --nav-bg:rgba(255,255,255,.92);
  /* Icon palette. The mock used emoji, which carried their own colour and made
     each feature card distinguishable at a glance; one accent colour for all
     of them lost that. These are picked to hold up against both the white and
     the dark surface, so no icon needs a per-theme rule beyond the block
     below. */
  --i-blue:#3B6FE0;
  --i-purple:#7C4DEF;
  --i-green:#15A34A;
  --i-amber:#D97706;
  --i-teal:#0D9488;
  --i-pink:#DB2777;
  --i-sky:#0284C7;

  /* ═══════════════════════════════════════════════════════════════════════
     SCREENSHOT FRAME — tweak these, LIGHT MODE
     Applies to every phone screenshot on the site: hero, the three in
     "PostKeep solves this", the three in "One tap by you", and the
     post-launch strip. Dark-mode equivalents are in the block below.
     ═══════════════════════════════════════════════════════════════════════ */
  --shot-border-width: 2px;                    /* thickness of the outline */
  --shot-border-color: rgba(129, 134, 135, 0.765);     /* outline colour */
  --shot-shadow-x: 0px;                        /* shadow offset, sideways */
  --shot-shadow-y: 0px;                        /* shadow offset, downwards */
  --shot-shadow-blur: 22px;                    /* softness */
  --shot-shadow-spread: 0px;                   /* how far it extends */
  --shot-shadow-color: rgba(13,21,51,.22);     /* colour AND strength — the
                                                  alpha at the end is the
                                                  strength, 0 = invisible */
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root{
    /* Same ladder, and the page is pushed darker than the mock's so the card
       can be clearly lighter. On a dark background a shadow does almost
       nothing, so separation here comes from the surface step and the rim. */
    --bg:#0D1421;
    --bg2:#131C2C;
    --sf:#1E2A3F;
    --sf2:#26334A;
    --sf3:#2E3C55;
    --bd:#33415F;
    --bd2:#44557A;
    --card-shadow:0 2px 4px rgba(0,0,0,.34), 0 10px 24px rgba(0,0,0,.36);
    --ac:#7B8FF4;
    --acl:#9AAAF8;
    --acd:#1A2550;
    --t1:#E8EDFF;
    --t2:#8FA0CC;
    --t3:#4D5E8C;
    --ok:#22C55E;
    --okd:#0D2E1A;
    --nav-bg:rgba(10,15,28,.94);
    /* Lifted well above the light values — the same saturated colours go muddy
       against the dark surface. */
    --i-blue:#7CA2FF;
    --i-purple:#B79BFF;
    --i-green:#4ADE80;
    --i-amber:#FBBF24;
    --i-teal:#2DD4BF;
    --i-pink:#F472B6;
    --i-sky:#38BDF8;

    /* ═══ SCREENSHOT FRAME — tweak these, DARK MODE ═══
       The border should be the inverse of the light one:*/ 
    --shot-border-width: 2px;                    /* mirrors light */
    --shot-border-color: rgba(95, 136, 231, 0.55); 
    --shot-shadow-x: 0px;
    --shot-shadow-y: 0px;
    --shot-shadow-blur: 3px;
    --shot-shadow-spread: 3px;
    --shot-shadow-color: rgba(156, 179, 235, 0.642);
    color-scheme:dark;
  }
}

html{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
  color:var(--t1);
  line-height:1.6;
}

/* `height:auto` is not optional here. The img tags carry width/height
   attributes so the browser can reserve space before the file loads, and
   without this any CSS that sets only a width leaves the attribute height in
   force — which stretches the image instead of scaling it. */
img{max-width:100%;height:auto}

/* ── Icons ──
   Referenced from the <symbol> sprite at the top of each page. Sized in `em`
   so the existing font-size on each holder still controls them, and drawn in
   currentColor so they follow the theme with no dark-mode rules of their own. */
.sprite{display:none}
.icon{
  width:1em;height:1em;
  display:inline-block;vertical-align:-0.125em;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  flex-shrink:0;
}

/* Set on the holder, not the svg, so the tinted tile below can derive its
   background from the same colour. */
.ic-blue{color:var(--i-blue)}
.ic-purple{color:var(--i-purple)}
.ic-green{color:var(--i-green)}
.ic-amber{color:var(--i-amber)}
.ic-teal{color:var(--i-teal)}
.ic-pink{color:var(--i-pink)}
.ic-sky{color:var(--i-sky)}

/* Tinted tile, as the app's settings rows use. The tint is mixed from the
   icon's own colour, so adding a colour above needs no second declaration
   here. Where color-mix is unsupported the background simply does not apply
   and the coloured icon still reads correctly. */
.icon-tile{
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;flex-shrink:0;
  background:color-mix(in srgb, currentColor 13%, transparent);
}

/* Keyboard focus must stay visible — the form is the point of the page. */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--ac);outline-offset:2px;
}

/* ── Nav ── */
.lnav{
  position:sticky;top:0;z-index:50;
  background:var(--nav-bg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bd);
  min-height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;
}
.lnav-logo{font-size:20px;font-weight:700;color:var(--t1);letter-spacing:-.5px;text-decoration:none}
.lnav-logo em{color:var(--ac);font-style:normal}
.lnav-cta{
  display:inline-block;
  padding:9px 20px;border-radius:10px;background:var(--ac);
  color:#fff;font-size:14px;font-weight:600;border:none;cursor:pointer;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(94,114,232,.3);transition:background .12s;
}
.lnav-cta:hover{background:var(--acl)}

/* ── Hero ── */
.hero{
  padding:80px 48px 72px;
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:64px;
}
.hero-text{min-width:0}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--acd);color:var(--acl);
  font-size:13px;font-weight:600;
  padding:5px 14px;border-radius:20px;
  margin-bottom:28px;letter-spacing:.02em;
}
.hero-h1{
  font-size:52px;font-weight:800;color:var(--t1);
  line-height:1.08;letter-spacing:-.03em;margin-bottom:22px;
}
.hero-h1 em{font-style:normal;color:var(--ac)}
.hero-sub{
  font-size:18px;color:var(--t2);line-height:1.65;
  margin-bottom:36px;max-width:480px;
}
.email-form{
  display:flex;max-width:480px;margin:0 0 16px;
  border:1.5px solid var(--ac);border-radius:14px;overflow:hidden;
  box-shadow:0 4px 24px rgba(94,114,232,.18);
}
.email-input{
  flex:1;min-width:0;padding:14px 20px;font-size:16px;
  border:none;outline:none;color:var(--t1);background:var(--sf);
  font-family:inherit;
}
.email-input::placeholder{color:var(--t3)}
.email-btn{
  padding:14px 24px;background:var(--ac);color:#fff;
  font-size:15px;font-weight:600;border:none;cursor:pointer;
  white-space:nowrap;transition:background .12s;font-family:inherit;
}
.email-btn:hover{background:var(--acl)}
/* Bot trap. Never shown, never focusable — a submission carrying it is dropped
   server-side. `display:none` alone is what naive bots check for. */
.hp-field{
  position:absolute!important;left:-9999px!important;
  width:1px;height:1px;overflow:hidden;
}
.hero-footnote{font-size:13px;color:var(--t3)}
.hero-footnote strong{color:var(--t2)}
.hero-screenshot{
  flex-shrink:0;
  /* The shadow used to live here as a filter. It is on the image itself now,
     driven by the SCREENSHOT FRAME values at the top, so every screenshot on
     the site is tuned from one place. */
}
.hero-screenshot img{
  /* No explicit aspect-ratio: the browser derives it from the img's own
     width/height attributes, so swapping the screenshot cannot leave a stale
     ratio hardcoded here. */
  width:260px;height:auto;
  border-radius:40px;display:block;
}

/* Every screenshot's frame comes from here, so the tuning values above have a
   single place to land. */
.hero-screenshot img,
.payoff-item img,
.step-shot img,
.shot img{
  border:var(--shot-border-width) solid var(--shot-border-color);
  box-shadow:
    var(--shot-shadow-x) var(--shot-shadow-y)
    var(--shot-shadow-blur) var(--shot-shadow-spread)
    var(--shot-shadow-color);
}

/* ── Shared section styles ── */
.section{padding:64px 48px;border-top:1px solid var(--bd)}
.section.alt{background:var(--bg2)}
.section-label{font-size:12px;font-weight:700;color:var(--ac);text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}
.section-h2{font-size:34px;font-weight:800;color:var(--t1);letter-spacing:-.02em;line-height:1.2;margin-bottom:12px}
.section-sub{font-size:16px;color:var(--t2);line-height:1.65;max-width:560px}

/* ── Evidence grid ── */
.evidence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.evidence-card{border-radius:16px;overflow:hidden;border:1px solid var(--bd);background:var(--sf);box-shadow:var(--card-shadow)}
.ev-deleted{padding:16px;background:var(--sf2);border-bottom:1px solid var(--bd)}
.ev-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}
.ev-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;letter-spacing:.02em}
.ev-x{background:#1A1A2A;color:#E7E9EA}
.ev-rd{background:#FF4500;color:#fff}
.ev-thr{background:#000;color:#fff}
.ev-time{font-size:12px;color:var(--t3)}
.ev-notice{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:var(--sf3);border-radius:10px;border:1px solid var(--bd);
}
.ev-icon{
  width:32px;height:32px;border-radius:50%;background:var(--bd);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--t3);flex-shrink:0;
}
.ev-notice-text{font-size:13px;color:var(--t3);line-height:1.4}
.ev-notice-text strong{color:var(--t2);display:block;margin-bottom:2px}
.ev-saved{padding:16px;background:var(--sf)}
.ev-saved-label{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;color:var(--ok);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;
}
.ev-saved-label::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0}
.ev-saved-title{font-size:13px;font-weight:600;color:var(--t1);line-height:1.4;margin-bottom:4px}
.ev-saved-meta{font-size:12px;color:var(--t3)}

/* ── Platform silos ── */
.silo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;margin-bottom:32px}
.silo-card{border-radius:16px;border:1px solid var(--bd);background:var(--sf);overflow:hidden;box-shadow:var(--card-shadow)}
.silo-header{padding:14px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;gap:8px}
.silo-name{font-size:13px;font-weight:700;color:var(--t1)}
.silo-count{font-size:12px;color:var(--t3);white-space:nowrap}
.silo-search{margin:12px 16px;padding:8px 12px;background:var(--sf2);border-radius:8px;border:1px solid var(--bd);display:flex;align-items:center;gap:6px}
.silo-search-text{font-size:12px;color:var(--t3);font-style:italic}
.silo-item{padding:10px 16px;border-top:1px solid var(--sf2);display:flex;flex-direction:column;gap:2px}
.silo-item-title{font-size:12px;font-weight:600;color:var(--t2);line-height:1.3}
.silo-item-meta{font-size:11px;color:var(--t3)}

/* ── Payoff frame ── */
.payoff-frame{
  background:var(--acd);border:1.5px solid var(--ac);border-radius:20px;
  padding:32px 36px;
}
.payoff-label{font-size:12px;font-weight:700;color:var(--acl);text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px}
/* Three real screenshots side by side, one per claim. Vertical on a narrow
   screen. Replaced a single hand-drawn mock-up that stood in for all three. */
.payoff-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
.payoff-item{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;height:100%}
.payoff-item img,
.step-shot img{
  width:100%;height:auto;
  border-radius:20px;
}
.payoff-item img{max-width:233px}
.step-shot img{max-width:233px}
.payoff-item figcaption{font-size:13px;color:var(--t2);line-height:1.5;margin-bottom:18px;flex:1 0 auto}
.payoff-item strong{color:var(--t1);display:block;margin-bottom:3px;font-size:14px}

/* ── Sharing animation ──
   A saved post leaves the vault as a letter and arrives readable at the other
   end. It carries the one claim on this page a paragraph struggles with: that
   the recipient needs no account on the platform the post came from.

   Time-based, not scroll-driven. A scroll timeline is the tidier idea, but it
   renders a still frame wherever it is unsupported or wherever the range
   resolves to nothing — and an animation nobody sees is worse than none. The
   long rest between runs keeps it from reading as a flashing banner. */
.flight{
  /* Same four-column basis and gap as .feat-grid below, so the two end boxes
     are exactly the width of a "Share a post" card. The route takes the two
     middle columns, which also gives the letter a long way to travel. */
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px;align-items:stretch;
  margin:36px 0 8px;
}
.flight-end{
  background:var(--sf);border:1px solid var(--bd);border-radius:16px;
  padding:16px;box-shadow:var(--card-shadow);
  /* Stretched to match each other — the right-hand box carries a bubble and a
     tick, so left to itself it was noticeably taller. */
  display:flex;flex-direction:column;
}
.flight-end-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.flight-tile{
  width:30px;height:30px;font-size:15px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;
  background:color-mix(in srgb, currentColor 13%, transparent);
}
.flight-end-label{
  font-size:11px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.07em;
}
.flight-note{display:flex;align-items:center;gap:8px}
.flight-note-text{font-size:12px;color:var(--t3);line-height:1.3}
.flight-bubble{
  background:var(--acd);border-radius:14px 14px 14px 4px;
  padding:12px;display:flex;flex-direction:column;gap:7px;
}
.flight-card-bar{height:5px;border-radius:3px;background:var(--ac);opacity:.7}
.flight-card-bar--short{width:58%}
.flight-ok{
  display:flex;align-items:flex-start;gap:7px;
  font-size:12px;color:var(--ok);line-height:1.4;margin-top:10px;
}
.flight-ok .icon{width:14px;height:14px;stroke-width:3;margin-top:2px}

/* The route, and the letter that travels it. */
.flight-path{grid-column:2 / 4;position:relative;height:64px;align-self:center}
.flight-path::before{
  content:'';position:absolute;left:0;right:0;top:50%;
  border-top:2px dashed var(--bd2);
}
.flight-letter{
  position:absolute;top:50%;left:0;
  width:42px;height:30px;margin:-15px 0 0 0;
  overflow:visible;
  filter:drop-shadow(0 3px 8px rgba(13,21,51,.22));
}
.flight-letter-body{fill:var(--sf);stroke:var(--ac);stroke-width:2}
.flight-letter-flap{fill:none;stroke:var(--ac);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Still frame: delivered. That is the state that makes sense without motion,
   so reduced-motion users and any browser that skips the animation get the
   finished story rather than a half-sent letter. */
@media (prefers-reduced-motion:no-preference){
  .flight-letter{animation:letter-fly 7s cubic-bezier(.4,0,.2,1) infinite}
  .flight-bubble{animation:bubble-land 7s ease-out infinite}
  .flight-ok{animation:ok-show 7s ease-out infinite}
}

@keyframes letter-drop{
  0%      {transform:translateY(-38px) scale(.7);opacity:0}
  8%      {transform:translateY(-38px) scale(.9);opacity:1}
  32%     {transform:translateY(38px)  scale(.9);opacity:1}
  40%,100%{transform:translateY(38px)  scale(.7);opacity:0}
}
@keyframes letter-fly{
  0%      {left:0;transform:scale(.7);opacity:0}
  8%      {left:0;transform:scale(.9);opacity:1}
  32%     {left:calc(100% - 42px);transform:scale(.9);opacity:1}
  40%,100%{left:calc(100% - 42px);transform:scale(.7);opacity:0}
}
@keyframes bubble-land{
  0%,30%  {transform:scale(.94);opacity:.3}
  40%     {transform:scale(1);opacity:1}
  92%     {transform:scale(1);opacity:1}
  100%    {transform:scale(.94);opacity:.3}
}
@keyframes ok-show{
  0%,38%  {opacity:0;transform:translateY(4px)}
  50%,92% {opacity:1;transform:none}
  100%    {opacity:0;transform:translateY(4px)}
}

/* ── Features grid ── */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px;margin-bottom:20px}
.feat-item{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:14px;background:var(--sf);border:1px solid var(--bd);box-shadow:var(--card-shadow)}
.feat-icon{width:44px;height:44px;font-size:22px;line-height:1}
.feat-title{font-size:15px;font-weight:700;color:var(--t1)}
.feat-desc{font-size:13px;color:var(--t2);line-height:1.55}
.feat-pro{font-size:12px;color:var(--ac);font-weight:700}

/* ── Privacy strip ── */
.priv-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.priv-strip-item{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:14px;background:var(--sf);border:1px solid var(--bd);box-shadow:var(--card-shadow)}
.priv-strip-icon{width:40px;height:40px;font-size:20px;line-height:1}
.priv-strip-title{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:3px}
.priv-strip-desc{font-size:13px;color:var(--t2);line-height:1.5}

/* ── How it works ── */
/* Three named rows — heading, description, screenshot — so each step's parts
   line up with its neighbours'. Without this a title that wraps to two lines
   pushes that column's description and screenshot below the others. */
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto auto;
  gap:28px;margin-top:40px;
}
.step{
  display:grid;grid-template-columns:auto 1fr;
  gap:10px 12px;align-items:center;
}
@supports (grid-template-rows: subgrid){
  /* The step adopts the parent's rows instead of making its own, which is what
     makes the alignment hold across columns. Where subgrid is unsupported the
     steps simply stack as before — no worse than it was. */
  .step{grid-row:span 3;grid-template-rows:subgrid}
}
.step-num{
  grid-row:1;grid-column:1;
  /* Smaller than when it stood alone above the title — at 40px it outweighed
     the 17px heading it now sits beside. */
  width:32px;height:32px;border-radius:10px;
  background:var(--acd);color:var(--acl);
  font-size:15px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.step-title{grid-row:1;grid-column:2}
.step-desc,.step-shot{grid-column:1 / -1}
.step-title{font-size:17px;font-weight:700;color:var(--t1)}
.step-desc{font-size:14px;color:var(--t2);line-height:1.6}
.step-shot{margin:6px 0 0;text-align:center}

/* ── Screenshot strip (post-launch page only) ── */
.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.shot{margin:0;text-align:center}
.shot img{
  width:100%;max-width:240px;height:auto;
  border-radius:28px;
}
.shot figcaption{font-size:13px;color:var(--t3);margin-top:14px}

/* ── Nav links (post-launch page only) ── */
.lnav-links{display:flex;align-items:center;gap:28px}
.lnav-link{font-size:14px;color:var(--t2);text-decoration:none;font-weight:500;transition:color .15s}
.lnav-link:hover{color:var(--ac)}

/* ── App Store button ── */
.appstore-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:13px 24px;border-radius:14px;
  background:var(--t1);color:var(--bg);text-decoration:none;
  box-shadow:0 4px 24px rgba(13,21,51,.18);transition:opacity .12s;
  margin-bottom:16px;
}
.appstore-btn:hover{opacity:.88}
.appstore-btn .icon{width:26px;height:26px;stroke-width:1.5}
.appstore-text{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.appstore-sub{font-size:11px;opacity:.75;letter-spacing:.02em}
.appstore-name{font-size:18px;font-weight:700;letter-spacing:-.01em}

/* ── Pricing ── */
.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:700px;margin:40px auto 0}
.pricing-card{
  padding:32px;border-radius:20px;border:1px solid var(--bd);
  background:var(--sf);box-shadow:var(--card-shadow);
}
.pricing-card.featured{border:2px solid var(--ac);position:relative}
.pricing-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--ac);color:#fff;padding:4px 16px;border-radius:8px;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pricing-tier{font-size:16px;font-weight:700;color:var(--t2);margin-bottom:10px}
.pricing-price{font-size:40px;font-weight:800;color:var(--t1);letter-spacing:-.02em;line-height:1}
.pricing-price sup{font-size:20px;font-weight:700;vertical-align:top;margin-top:6px}
.pricing-period{font-size:13px;color:var(--t3);margin-top:4px;margin-bottom:4px}
.pricing-alt{font-size:12px;color:var(--t3);margin-bottom:24px}
.pricing-feats{margin-bottom:28px;display:flex;flex-direction:column;gap:0;list-style:none;padding:0}
.pricing-feat{display:flex;align-items:flex-start;gap:8px;padding:7px 0;font-size:14px;color:var(--t2);border-bottom:1px solid var(--sf2)}
.pricing-feat:last-child{border-bottom:none}
.pricing-check{color:var(--ok);flex-shrink:0;margin-top:4px;width:15px;height:15px;stroke-width:3}
.pricing-dash{color:var(--t3);flex-shrink:0;margin-top:3px}
/* Listed but not built yet. Muted marker rather than a green tick, so the row
   never reads as something the subscription already buys. */
.pricing-feat--soon{color:var(--t3)}
.pricing-soon{font-size:11px;font-weight:600;padding:1px 6px;border-radius:5px;background:var(--sf3);color:var(--t3);white-space:nowrap}
.pricing-btn{
  display:block;width:100%;padding:13px;border-radius:12px;border:none;
  font-size:15px;font-weight:700;cursor:pointer;text-align:center;
  text-decoration:none;transition:background .12s;font-family:inherit;
}
.pricing-btn.primary{background:var(--ac);color:#fff}
.pricing-btn.primary:hover{background:var(--acl)}
.pricing-btn.secondary{background:var(--sf2);color:var(--t1);border:1px solid var(--bd)}
.pricing-btn.secondary:hover{background:var(--sf3)}

/* ── FAQ ──
   <details>/<summary> rather than a button and a class toggle, so the
   accordion works with no JavaScript and arrives with correct keyboard and
   screen-reader behaviour already built in. */
.faq-list{max-width:680px;margin:40px auto 0}
.faq-item{border-bottom:1px solid var(--bd)}
.faq-item:last-child{border-bottom:none}
.faq-item summary{
  cursor:pointer;list-style:none;
  padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:16px;font-weight:700;color:var(--t1);
}
/* Safari draws its own triangle unless both of these are suppressed. */
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:''}
.faq-toggle{
  font-size:20px;color:var(--t3);flex-shrink:0;line-height:1;
  transition:transform .2s;
}
.faq-item[open] .faq-toggle{transform:rotate(45deg)}
.faq-a{font-size:14px;color:var(--t2);line-height:1.65;padding-bottom:20px}

/* ── Second CTA ── */
.cta2-wrap{
  text-align:center;padding:80px 48px;
  border-top:1px solid var(--bd);background:var(--bg);
}
.cta2-h{font-size:34px;font-weight:800;color:var(--t1);letter-spacing:-.02em;margin-bottom:12px}
.cta2-sub{font-size:16px;color:var(--t2);line-height:1.6;margin-bottom:32px;max-width:440px;margin-left:auto;margin-right:auto}
.cta2-wrap .email-form{margin-left:auto;margin-right:auto}
.cta2-note{font-size:13px;color:var(--t3)}

/* ── Prose pages (privacy, terms, support, press) ── */
.prose{max-width:720px;margin:0 auto;padding:64px 48px 80px}
.prose h1{font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.prose .updated{font-size:13px;color:var(--t3);margin-bottom:36px}
.prose h2{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:36px 0 10px}
.prose h3{font-size:17px;font-weight:700;margin:24px 0 8px}
.prose p,.prose li{font-size:16px;color:var(--t2);line-height:1.7}
.prose p{margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin-bottom:7px}
.prose a{color:var(--ac)}
.prose strong{color:var(--t1)}
.prose table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:15px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--bd);color:var(--t2)}
.prose th{color:var(--t1);font-weight:700}
.prose-callout{
  background:var(--sf);border:1px solid var(--bd);border-radius:14px;
  padding:18px 20px;margin-bottom:24px;box-shadow:var(--card-shadow);
}
.prose-callout p:last-child{margin-bottom:0}
/* Tables are the one thing allowed to scroll sideways on a narrow screen. */
.table-scroll{overflow-x:auto}

/* ── Footer ── */
.footer{
  padding:24px 48px;border-top:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  background:var(--sf);
}
.footer-logo{font-size:16px;font-weight:700;color:var(--t2);letter-spacing:-.3px}
.footer-logo em{color:var(--ac);font-style:normal}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-link{font-size:13px;color:var(--t3);text-decoration:none}
.footer-link:hover{color:var(--t2);text-decoration:underline}
.footer-copy{font-size:12px;color:var(--t3)}

/* ── Responsive ──
   The mocks were desktop-only: fixed 3- and 4-column grids and 48px gutters,
   which broke below roughly 900px. Most launch traffic arrives from social
   media on a phone, and the page's whole job is the signup form, so this is
   not cosmetic. */

@media (max-width:980px){
  .lnav{padding:0 24px}
  .hero{
    grid-template-columns:1fr;gap:40px;
    padding:56px 24px 56px;
  }
  .hero-h1{font-size:40px}
  .hero-screenshot{justify-self:center}
  .section{padding:48px 24px}
  .cta2-wrap{padding:56px 24px}
  .prose{padding:48px 24px 64px}
  .evidence-grid,.silo-grid,.steps{grid-template-columns:1fr}
  .steps{grid-template-rows:none}
  .step{grid-row:auto;grid-template-rows:auto}
  .shot-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .flight{grid-template-columns:1fr 150px 1fr;gap:20px}
  .flight-path{grid-column:auto}
  .payoff-inner{grid-template-columns:1fr;gap:32px}
  /* Three columns is unreadable at phone width, so the route turns vertical
     and the letter drops instead of crossing. */
  .flight{grid-template-columns:1fr;gap:10px}
  .flight-path{grid-column:auto}
  .flight-path{height:84px}
  .flight-path::before{
    left:50%;right:auto;top:0;bottom:0;
    border-top:none;border-left:2px dashed var(--bd2);
  }
  .flight-letter{left:50%;margin-left:-21px}
  @media (prefers-reduced-motion:no-preference){
    .flight-letter{animation-name:letter-drop}
  }

  @media (prefers-reduced-motion:no-preference){
    @supports (animation-timeline: view()){
      .flight-card{animation-name:flight-drop}
    }
  }
  .payoff-frame{padding:24px}
  .pricing-card{padding:26px}
  .footer{padding:24px}
}

@media (max-width:560px){
  .lnav{padding:0 20px}
  .lnav-cta{padding:8px 14px;font-size:13px}
  .hero-h1{font-size:32px}
  /* Body copy down one step on a phone. 16px suits a desktop measure of
     560px; across a ~330px card it reads oversized and costs extra lines.
     Headings, card text and the small print are already scaled and stay put.

     The email field is deliberately NOT included: iOS Safari zooms the whole
     page when a focused input is under 16px, which throws the layout out just
     as someone is trying to sign up. */
  .hero-sub,.section-sub,.cta2-sub,.prose p,.prose li{font-size:15px}
  .step-desc{font-size:13.5px}

  /* Phone hero: the screenshot moves up to sit directly under the headline,
     small. Stacked in source order it landed below the title, subtitle, form
     and footnote — far enough down that nobody scrolled to it, so the one
     picture of the product went unseen.

     `display:contents` dissolves the .hero-text box so its children become
     flex items of .hero itself and can be ordered individually. That keeps one
     <img> in the markup: duplicating it per breakpoint would mean two copies
     to keep in step, and a hidden one still costs a download on some
     browsers. .hero-text is a plain div, so removing its box drops no
     semantics. */
  .hero{
    display:flex;flex-direction:column;
    gap:0;padding:32px 20px 44px;
  }
  .hero-text{display:contents}
  .hero-eyebrow{order:1;margin-bottom:16px}
  .hero-h1{order:2;margin-bottom:20px}
  .hero-screenshot{order:3;align-self:center;margin-bottom:24px}
  .hero-sub{order:4;margin-bottom:24px}
  .hero .email-form{order:5}
  .hero-footnote{order:6}
  /* Small enough to read as a glimpse of the product rather than a slab that
     pushes the signup form off the screen. */
  .hero-screenshot img{width:187px;border-radius:26px}

  /* Side-by-side input and button leaves neither usable at this width. */
  .email-form{flex-direction:column;border-radius:12px}
  .email-btn{width:100%;padding:13px 16px}
  .section{padding:40px 20px}
  .section-h2,.cta2-h{font-size:26px}
  .cta2-wrap{padding:48px 20px}
  .prose{padding:36px 20px 56px}
  .prose h1{font-size:28px}
  .feat-grid,.priv-strip{grid-template-columns:1fr}
  .shot-grid{grid-template-columns:1fr;gap:32px}
  .payoff-item img{max-width:231px}
  .step-shot img{max-width:231px}
  .pricing-grid{grid-template-columns:1fr;gap:32px}
  .pricing-card{padding:24px}
  .pricing-price{font-size:34px}
  /* The nav links do not fit beside the logo and the button; the sections they
     point at are a short scroll away on a phone. */
  .lnav-links .lnav-link{display:none}
  .faq-item summary{font-size:15px;padding:16px 0}

  /* Cards inset a further 6% on a narrow screen. The section's own 20px
     gutter keeps prose off the edge; the cards want more, because a card is
     a box with its own padding and at full gutter width it reads as a slab
     spanning the whole display. Headings and body copy stay at the section
     gutter, so only the boxed content steps in.

     Width only — a card's height comes from its text, so a narrower card is
     a slightly taller one. There is no fixed ratio to preserve. */
  .evidence-grid,.silo-grid,.steps,.feat-grid,.priv-strip,.payoff-frame{
    width:94%;margin-left:auto;margin-right:auto;
  }
  .footer{padding:20px;flex-direction:column;align-items:flex-start;gap:12px}
}