/* ==========================================================================
   Cramlio — shared foundations + landing page
   Palette: paper + ink + one highlighter yellow.

   The highlighter is an accent, not a decoration. It marks the one hero
   phrase, the logo, things you must know, and a test that is close. Everything
   else is carried by type, spacing and rules.
   ========================================================================== */

:root{
  --paper:      #F4F3ED;
  --paper-lo:   #EBE9DF;
  --card:       #FFFFFF;

  --ink:        #131C2B;
  --ink-hover:  #22324A;
  --ink-deep:   #0B1220;
  --ink-panel:  #15202F;
  --ink-line:   rgba(255,255,255,.09);
  --ink-line-2: rgba(255,255,255,.16);

  --muted:      #56636F;
  --muted-lo:   #616D7A;   /* 4.6:1 on paper — safe for small text */
  --muted-dk:   #94A3B4;   /* for use on the dark surfaces only */

  --rule:       #DCD9CD;
  --rule-soft:  #E6E3D9;
  --rule-hard:  #C9C4B4;   /* control borders that need to read as clickable */

  --marker:     #FFE04D;
  --marker-dk:  #E9C520;

  --good:       #2E9E6B;
  --good-lo:    #7FD3AC;
  --warn:       #D9741F;
  --warn-lo:    #F0A868;

  --serif: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1160px;
  --gut: 20px;
  --r: 14px;       /* surfaces: cards, panels */
  --r-ctl: 10px;   /* controls: buttons, inputs, choices */
  --r-sm: 9px;

  --ease: cubic-bezier(.2,.7,.2,1);

  --shadow: 0 1px 2px rgba(19,28,43,.05), 0 8px 24px -12px rgba(19,28,43,.16);
  --shadow-lg: 0 2px 4px rgba(19,28,43,.05), 0 24px 56px -24px rgba(19,28,43,.30);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: `hidden` would make body a scroll container and break the sticky nav */
  overflow-x:clip;
}

/* the sticky nav would otherwise sit on top of every anchor target */
[id]{ scroll-margin-top:86px; }

h1,h2,h3{
  font-family:var(--serif); font-weight:700;
  line-height:1.06; letter-spacing:-.025em; margin:0;
  text-wrap:balance;
}
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
cite{ font-style:normal; }

a{ color:inherit; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--marker); color:var(--ink); }

:focus-visible{
  outline:2.5px solid var(--ink);
  outline-offset:3px;
  border-radius:4px;
}
.dark :focus-visible, .foot :focus-visible{ outline-color:var(--marker); }

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-999px; top:8px; z-index:200;
  background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:8px;
  text-decoration:none; font-weight:600;
}
.skip:focus{ left:12px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:760px; }
@media (min-width:720px){ :root{ --gut:28px; } }

/* ---------- type scale ---------- */
.h2{
  font-size:clamp(1.85rem, 5vw, 2.85rem);
  letter-spacing:-.032em;
  max-width:20ch;
}
.h2--light{ color:#F7F6F1; }
/* headings that set their own line breaks size down and opt out of the measure cap */
.h2--break{
  max-width:none;
  font-size:clamp(1.7rem, 4.5vw, 2.6rem);
}
.h2--break br{ display:none; }
@media (min-width:700px){ .h2--break br{ display:inline; } }

.lede{
  margin-top:18px;
  max-width:54ch;
  font-size:clamp(1.02rem, 2vw, 1.16rem);
  color:var(--muted);
}
.lede--light{ color:var(--muted-dk); }

/* ---------- buttons ----------
   primary   .btn--ink   one per view, the thing to do next
   secondary .btn--line  a real alternative
   tertiary  .linkbtn    (app.css) small text actions
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  min-height:48px;
  font-family:var(--sans); font-weight:600; font-size:1rem;
  letter-spacing:-.006em; line-height:1.2;
  padding:12px 22px;
  border-radius:var(--r-ctl);
  border:1.5px solid transparent;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .14s ease, background-color .16s ease, border-color .16s ease,
    box-shadow .16s ease, color .16s ease;
}
.btn--ink{
  background:var(--ink); color:#FBFAF6;
  box-shadow:0 1px 0 rgba(19,28,43,.28), 0 6px 16px -10px rgba(19,28,43,.5);
}
.btn--ink:hover{ background:var(--ink-hover); }
.btn--ink:active{ transform:translateY(1px); background:var(--ink-deep); box-shadow:0 0 0 rgba(19,28,43,0); }

/* disabled reads as unavailable, not as a faded primary */
.btn--ink:disabled, .btn--ink:disabled:hover{
  background:#D3CFC2; color:#FBFAF6;
  box-shadow:none; transform:none; cursor:not-allowed;
}

.btn--line{ background:transparent; color:var(--ink); border-color:var(--rule-hard); }
.btn--line:hover{ border-color:var(--ink); background:var(--card); }
.btn--line:active{ transform:translateY(1px); }

.btn--sm{ min-height:40px; padding:8px 16px; font-size:.94rem; }

/* destructive: only ever inside a confirmation, never on the page itself */
.btn--danger{ background:#A5361F; color:#FFF8F5; box-shadow:0 1px 0 rgba(90,20,10,.3); }
.btn--danger:hover{ background:#8E2C18; }
.btn--danger:active{ transform:translateY(1px); }
.btn--danger:disabled, .btn--danger:disabled:hover{ background:#C9978B; box-shadow:none; transform:none; cursor:progress; }

@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } .btn:active{ transform:none; } }

/* a quiet inline text link, used sparingly */
.textlink{
  font-weight:600; font-size:.97rem; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--rule-hard);
  text-underline-offset:4px; text-decoration-thickness:1.5px;
  transition:text-decoration-color .15s ease;
}
.textlink:hover{ text-decoration-color:var(--ink); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(244,243,237,.9);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background-color .2s ease;
}
.nav.is-stuck{ border-bottom-color:var(--rule); }
.nav__inner{ display:flex; align-items:center; gap:20px; height:66px; }

.brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; margin-right:auto; }
.brand__mark{
  display:block; width:26px; height:26px; flex:none;
  object-fit:contain;
}
.brand__word{
  font-family:var(--serif); font-weight:700; font-size:1.22rem; letter-spacing:-.035em;
}

.nav__links{ display:none; gap:28px; }
.nav__links a{
  text-decoration:none; font-size:.95rem; font-weight:500; color:var(--muted);
  padding:4px 0;
  background:linear-gradient(var(--ink), var(--ink)) left bottom / 0 1.5px no-repeat;
  transition:color .15s ease, background-size .2s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background-size:100% 1.5px; }

@media (min-width:860px){ .nav__links{ display:flex; } }

/* ---------- scroll reveals: a few large blocks only, set up by script.js ---------- */
.js-motion [data-reveal]{
  opacity:0; transform:translateY(14px);
  transition:opacity .42s ease, transform .42s var(--ease);
}
.js-motion [data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js-motion [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ padding:clamp(40px, 7vw, 92px) 0 clamp(56px, 7vw, 92px); }

/* wide enough that each sentence of the headline holds one line on desktop */
.hero__copy{ max-width:920px; }

.hero__h1{
  font-size:clamp(2.5rem, 8vw, 4.75rem);
  font-weight:800;
  letter-spacing:-.042em;
  line-height:1.0;
}
.hero__h1 br{ display:none; }
@media (min-width:640px){ .hero__h1 br{ display:inline; } }

/* The one orchestrated moment on the page: the highlighter draws itself in. */
.marker{
  display:inline;
  background-image:linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 95%, transparent 95%);
  background-repeat:no-repeat;
  background-position:0 0;
  padding-inline:.06em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  animation:swipe .72s cubic-bezier(.22,.9,.3,1) .32s both;
}
@keyframes swipe{
  from{ background-size:0% 100%; }
  to{ background-size:100% 100%; }
}
@media (prefers-reduced-motion: reduce){
  .marker{ animation:none; background-size:100% 100%; }
}

.hero__sub{
  margin-top:24px;
  max-width:50ch;
  font-size:clamp(1.05rem, 2.1vw, 1.2rem);
  color:var(--muted);
}

.hero__cta{
  margin-top:clamp(26px, 3.4vw, 34px);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px;
}
.hero__ctaNote{ margin-top:14px; font-size:.86rem; color:var(--muted-lo); }

/* the hero copy settles in once; everything after it is still */
.hero__copy > *{ animation:rise .5s var(--ease) backwards; }
.hero__copy > :nth-child(2){ animation-delay:.08s; }
.hero__copy > :nth-child(3){ animation-delay:.14s; }
.hero__copy > :nth-child(4){ animation-delay:.18s; }
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .hero__copy > *{ animation:none; } }

/* ==========================================================================
   HERO TRANSFORMATION — a pile of files becomes one clear direction
   ========================================================================== */
.transform{
  margin-top:clamp(48px, 6.4vw, 76px);
  display:grid;
  gap:18px;
  align-items:stretch;
}
@media (min-width:940px){
  .transform{
    grid-template-columns:minmax(0,1fr) 72px minmax(0,1.06fr);
    gap:4px;
  }
}
/* flex columns keep both "what you..." labels on the same baseline */
.transform__col{ display:flex; flex-direction:column; min-width:0; }

.colhead{
  font-size:.86rem; font-weight:600; color:var(--muted-lo);
  margin-bottom:12px;
}

/* --- messy stack --- */
.stack{
  position:relative;
  flex:none;
  height:272px;
  padding:6px 0;
}
.doc{
  position:absolute;
  width:min(84%, 320px);
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow);
  padding:13px 15px 12px;
  display:block;
}
.doc__name{
  display:block;
  font-size:.82rem; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.doc__lines{
  display:block; margin:10px 0 9px; height:46px;
  background-image:repeating-linear-gradient(
    to bottom,
    var(--rule-soft) 0, var(--rule-soft) 3px,
    transparent 3px, transparent 11px);
  border-radius:2px;
}
.doc__meta{ display:block; font-size:.74rem; color:var(--muted-lo); }

.doc--1{ top:2px;   left:1%;  width:min(80%,300px); transform:rotate(-3.4deg); z-index:1; }
.doc--2{ top:48px;  left:9%;  width:min(84%,320px); transform:rotate(2.1deg);  z-index:2; }
.doc--3{ top:98px;  left:2%;  width:min(78%,292px); transform:rotate(-1.4deg); z-index:3; }
.doc--4{ top:152px; left:12%; width:min(82%,312px); transform:rotate(3.6deg);  z-index:4; }
.doc--4 .doc__meta{ color:#B3543A; font-weight:600; }

.stack__note{
  margin-top:14px;
  font-size:.9rem; color:var(--muted);
}
.stack__note strong{ color:var(--ink); font-weight:600; }

/* --- arrow --- */
.transform__arrow{
  display:flex; align-items:center; justify-content:center;
  align-self:center;
  color:var(--muted-lo);
}
.transform__arrow svg{ width:46px; height:24px; display:block; }
@media (max-width:939px){
  .transform__arrow{ height:40px; }
  .transform__arrow svg{ transform:rotate(90deg); width:38px; }
}

/* --- the result: a slice of a real study guide (dark, like the app's must-know panel) --- */
.preview{
  background:var(--ink-deep);
  color:#F4F5F7;
  border-radius:var(--r);
  padding:22px 22px 20px;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.07);
}
.preview__top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding-bottom:16px; margin-bottom:16px;
  border-bottom:1px solid var(--ink-line);
}
.preview__course{ font-size:.8rem; color:var(--muted-dk); font-weight:500; }
.preview__title{
  font-family:var(--serif); font-weight:700; font-size:1.2rem;
  letter-spacing:-.025em; margin-top:3px; line-height:1.15;
}
.preview__when{
  flex:none;
  font-size:.78rem; font-weight:600; color:#E3E7EC;
  border:1px solid var(--ink-line-2);
  border-radius:7px; padding:4px 9px;
}

.preview__label{
  font-size:.8rem; font-weight:600; color:var(--muted-dk);
  margin-bottom:10px;
}
.preview__label + *{ margin-bottom:20px; }
.preview__label + *:last-child{ margin-bottom:0; }

.mustlist li{
  font-size:.93rem; line-height:1.5; color:#E9ECF0;
  padding-left:18px; position:relative;
  margin-bottom:10px;
}
.mustlist li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:7px; height:7px; border-radius:2px; background:var(--marker);
}
.mustlist li:last-child{ margin-bottom:0; }
.mustlist cite{
  display:block; font-size:.75rem; color:var(--muted-dk); margin-top:3px;
}

.ranklist li{
  display:flex; align-items:center; gap:12px;
  font-size:.95rem; color:#E9ECF0;
  padding:9px 0;
  border-bottom:1px solid var(--ink-line);
}
.ranklist li:last-child{ border-bottom:0; padding-bottom:0; }

.rank{
  flex:none;
  width:24px; height:24px;
  display:grid; place-items:center;
  border-radius:6px;
  background:rgba(255,255,255,.08);
  color:#F4F5F7;
  font-size:.78rem; font-weight:700;
  font-family:var(--serif);
}

.egnote{
  margin-top:22px;
  font-size:.84rem; color:var(--muted-lo);
}

/* ==========================================================================
   BAND — the problem, and what changes
   ========================================================================== */
.band{
  background:var(--paper-lo);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:clamp(60px, 8vw, 100px) 0;
}
.ba{
  margin-top:clamp(34px, 4.4vw, 52px);
  display:grid; gap:34px;
  max-width:980px;
}
@media (min-width:820px){
  .ba{ grid-template-columns:1fr 1fr; gap:0; }
  .ba__side + .ba__side{ padding-left:clamp(28px, 4vw, 52px); border-left:1px solid #D2CEC0; }
  .ba__side:first-child{ padding-right:clamp(28px, 4vw, 52px); }
}

.ba__head{
  font-family:var(--serif); font-weight:700; font-size:1.12rem;
  letter-spacing:-.02em;
  margin-bottom:16px;
}
.ba__side--before .ba__head{ color:var(--muted); }

.ba__list li{
  position:relative; padding-left:26px;
  font-size:1rem; line-height:1.5;
  margin-bottom:14px;
}
.ba__list li:last-child{ margin-bottom:0; }
.ba__side--before .ba__list li{ color:var(--muted); }
.ba__list li::before{
  content:""; position:absolute; left:2px; top:.72em;
  width:11px; height:1.5px; border-radius:2px;
  background:#B8B2A0;
}
/* a small ink tick: done, sorted */
.ba__side--after .ba__list li::before{
  top:.38em; left:3px;
  width:6px; height:11px; border-radius:0;
  background:none;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(40deg);
}

/* ==========================================================================
   STEPS — a real sequence, so it's numbered
   ========================================================================== */
.sec{ padding:clamp(64px, 9vw, 112px) 0; }

.steps{
  margin-top:clamp(36px, 4.5vw, 56px);
  display:grid; gap:40px;
}
@media (min-width:880px){ .steps{ grid-template-columns:repeat(3,1fr); gap:36px; } }

.step{
  display:flex; flex-direction:column;
  padding-top:20px;
  border-top:2px solid var(--ink);
}
.step__n{
  font-family:var(--serif); font-weight:700; font-size:.95rem;
  color:var(--muted-lo);
  margin-bottom:8px;
  font-variant-numeric:tabular-nums;
}
.step__h{ font-size:1.36rem; letter-spacing:-.028em; }
.step__p{
  margin-top:10px;
  margin-bottom:22px;
  font-size:.99rem; color:var(--muted);
  max-width:40ch;
}
.step__vis{
  margin-top:auto;          /* aligns the three visuals along the column bottoms */
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:12px;
  padding:14px;
  display:flex; flex-direction:column; gap:8px;
}

.drop{ display:flex; flex-direction:column; gap:7px; }
.drop__file{
  font-size:.8rem; font-weight:500;
  background:var(--paper);
  border:1px solid var(--rule-soft);
  border-radius:7px;
  padding:9px 12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.drop__file--add{
  border-style:dashed; border-color:var(--rule); color:var(--muted-lo);
  background:transparent;
}
.drop__meta{
  display:grid; grid-template-columns:1fr 1fr; gap:7px;
  margin-top:3px;
}
.drop__meta span{
  display:flex; justify-content:space-between; gap:8px;
  font-size:.76rem; color:var(--muted-lo);
  border-top:1px solid var(--rule-soft);
  padding-top:8px;
}
.drop__meta b{ color:var(--ink); font-weight:600; }

/* step 2: the plan that comes with the guide */
.miniplan{ display:flex; flex-direction:column; }
.miniplan__day{
  display:grid; grid-template-columns:48px 1fr auto; gap:10px; align-items:baseline;
  font-size:.83rem;
  padding:8px 0;
  border-bottom:1px solid var(--rule-soft);
}
.miniplan__day:first-child{ padding-top:2px; }
.miniplan__day:last-child{ border-bottom:0; padding-bottom:2px; }
.miniplan__n{ font-weight:600; color:var(--muted-lo); }
.miniplan__what{ font-weight:500; min-width:0; }
.miniplan__min{ font-size:.75rem; color:var(--muted-lo); white-space:nowrap; font-variant-numeric:tabular-nums; }

.gapbox{ display:flex; flex-direction:column; gap:7px; }
.gapbox__score{
  font-family:var(--serif); font-weight:700; font-size:1.5rem;
  letter-spacing:-.03em;
  margin-bottom:2px;
}
.gapbox__score span{ font-size:.82rem; font-family:var(--sans); font-weight:500; color:var(--muted-lo); letter-spacing:0; margin-left:6px; }
.gapbox__row{
  font-size:.81rem; font-weight:500;
  border-radius:7px; padding:8px 11px;
  border:1px solid var(--rule-soft);
  background:var(--paper);
}
.gapbox__row--weak{ border-left:3px solid var(--warn); }
.gapbox__row--ok{ border-left:3px solid var(--good); color:var(--muted); }

/* ==========================================================================
   DARK — what comes back
   ========================================================================== */
.dark{
  background:var(--ink-deep);
  color:#EDEFF2;
  padding:clamp(64px, 9vw, 116px) 0 clamp(68px, 9vw, 120px);
}
.dark__head{ max-width:640px; }

.demo{
  margin-top:clamp(36px, 4.5vw, 54px);
  background:var(--ink-panel);
  border:1px solid var(--ink-line-2);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
}

.demo__chrome{
  display:flex; align-items:center; gap:11px;
  padding:13px 18px;
  border-bottom:1px solid var(--ink-line);
  background:rgba(255,255,255,.025);
}
.demo__path{
  font-size:.8rem; color:var(--muted-dk);
  min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.demo__chip{
  flex:none; margin-left:auto;
  font-size:.74rem; font-weight:600;
  color:var(--muted-dk);
  border:1px solid var(--ink-line-2);
  border-radius:6px; padding:2px 8px;
}

.panel{
  display:grid; gap:clamp(26px, 4vw, 44px);
  padding:clamp(22px, 3.6vw, 38px);
}
@media (min-width:900px){
  .panel{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; }
}

.panel__label{
  font-size:.82rem; font-weight:600; color:var(--muted-dk);
  margin-bottom:14px;
}
.panel cite{
  display:block; font-size:.76rem; color:#7E8C9B; margin-top:6px;
}

/* priority topics */
.panel .topics{ display:flex; flex-direction:column; }
.panel .topic{
  display:flex; gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--ink-line);
}
.panel .topic:first-child{ padding-top:0; }
.panel .topic:last-child{ border-bottom:0; padding-bottom:0; }
.panel .topic__h{ font-weight:600; font-size:1.02rem; letter-spacing:-.012em; }
.panel .topic__why{ margin-top:4px; font-size:.92rem; color:var(--muted-dk); line-height:1.5; }
.panel .topic .rank{ width:26px; height:26px; font-size:.85rem; margin-top:1px; }

/* ---------- source material vs. an explanation Cramlio added ----------
   The two are never mistakable for each other: a solid highlighter rule means
   "this came from your material", a dashed outline means "Cramlio wrote this". */
.panel .addon{
  display:grid; gap:10px;
}
.panel .addon__part{
  padding:16px 18px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--ink-line);
  box-shadow:inset 3px 0 0 var(--marker);
}
.panel .addon__part--added{
  background:transparent;
  border:1px dashed rgba(255,255,255,.24);
  box-shadow:none;
}

.addon__tag{
  display:block;
  font-size:.78rem; font-weight:600;
  color:var(--muted-dk);
  margin-bottom:8px;
}
.addon__tag--added::before{
  content:"+"; margin-right:6px; font-weight:700; color:#F4F5F7;
}

.addon__term{
  font-family:var(--serif); font-weight:700; font-size:1.1rem;
  letter-spacing:-.022em; color:#F4F5F7;
}
.addon__note{ margin-top:4px; font-size:.9rem; color:var(--muted-dk); line-height:1.5; }
.addon__exp{ font-size:.95rem; color:#E3E7EC; line-height:1.6; }
.addon__src{
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--ink-line);
  font-size:.8rem; color:var(--muted-dk); line-height:1.5;
}

/* the rest of the pack, named rather than toured */
.after{
  margin-top:clamp(40px, 5vw, 60px);
  display:grid; gap:0;
}
@media (min-width:620px){ .after{ grid-template-columns:1fr 1fr; column-gap:32px; } }
@media (min-width:980px){ .after{ grid-template-columns:repeat(4,1fr); } }

.after__i{
  padding:18px 0 20px;
  border-top:1px solid var(--ink-line-2);
}
.after__n{
  display:block;
  font-family:var(--serif); font-weight:700; font-size:1.08rem;
  letter-spacing:-.022em; color:#F4F5F7;
}
.after__p{ display:block; margin-top:5px; font-size:.92rem; color:var(--muted-dk); line-height:1.5; max-width:30ch; }

/* ==========================================================================
   WHY — four principles, set as an editorial list rather than a feature grid
   ========================================================================== */
.why-wrap{ display:grid; gap:clamp(28px, 4vw, 40px); }
@media (min-width:900px){
  .why-wrap{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:64px; align-items:start; }
  .why-wrap .h2{ position:sticky; top:110px; }
}
.why{ border-top:1px solid var(--rule); }
.why__item{
  display:grid; gap:6px;
  padding:24px 0 26px;
  border-bottom:1px solid var(--rule);
}
@media (min-width:640px){
  .why__item{ grid-template-columns:minmax(0, 13rem) minmax(0, 1fr); gap:24px; }
}
.why__h{ font-size:1.16rem; letter-spacing:-.024em; line-height:1.25; }
.why__item p{ font-size:1rem; color:var(--muted); max-width:52ch; }

/* ==========================================================================
   FAQ
   ========================================================================== */
/* its own surface so it doesn't run together with the section above */
.sec--faq{
  background:var(--paper-lo);
  border-top:1px solid var(--rule);
  padding-bottom:clamp(60px, 7vw, 100px);
}
.sec--faq .h2{ max-width:none; }
.sec--faq .faq{ border-top-color:#D2CEC0; }
.sec--faq .q{ border-bottom-color:#D2CEC0; }

.faq{
  margin-top:clamp(26px, 3.5vw, 40px);
  border-top:1px solid var(--rule);
}
.q{ border-bottom:1px solid var(--rule); }
.q summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:flex-start; gap:16px;
  padding:20px 0;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.05rem, 2.6vw, 1.22rem);
  letter-spacing:-.022em; line-height:1.3;
  transition:color .15s ease;
}
.q summary::-webkit-details-marker{ display:none; }
.q summary::after{
  content:"";
  flex:none; margin-left:auto; margin-top:.36em;
  width:13px; height:13px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/13px 1.8px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.8px 13px no-repeat;
  transition:transform .2s var(--ease);
}
.q[open] summary::after{ transform:rotate(45deg); }
.q summary:hover{ color:#000; }
.q__a{ padding:0 0 22px; max-width:64ch; }
.q[open] .q__a{ animation:qa .24s ease backwards; }
@keyframes qa{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.q__a p{ color:var(--muted); font-size:1rem; }
.q__a p + p{ margin-top:11px; }
@media (prefers-reduced-motion: reduce){
  .q summary::after{ transition:none; }
  .q[open] .q__a{ animation:none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  background:var(--ink-deep);
  color:#D6DBE2;
  padding:44px 0 46px;
}
.foot__inner{
  display:grid; gap:28px;
}
@media (min-width:820px){
  .foot__inner{ grid-template-columns:1fr auto; gap:60px; align-items:start; }
}
.brand--foot .brand__word{ color:#F4F5F7; }
/* the navy mark sits on a paper tile against the dark footer */
.brand--foot .brand__mark{ background:var(--paper); border-radius:7px; padding:3px; }
.foot__line{
  margin-top:14px;
  max-width:60ch;
  font-size:.89rem; line-height:1.6;
  color:var(--muted-dk);
}
.foot__side{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
@media (min-width:820px){ .foot__side{ align-items:flex-end; } }
.foot__small{ font-size:.82rem; color:var(--muted-dk); max-width:34ch; }
@media (min-width:820px){ .foot__small{ text-align:right; } }

.foot__legal{
  display:flex; flex-wrap:wrap; gap:8px 24px;
  margin-top:34px; padding-top:20px;
  border-top:1px solid var(--ink-line);
}
.foot__legal a{
  font-size:.82rem; color:var(--muted-dk);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
}
.foot__legal a:hover{ color:#F4F5F7; border-bottom-color:var(--ink-line-2); }
.foot__copy{ font-size:.82rem; color:var(--muted-dk); }
@media (min-width:820px){ .foot__copy{ margin-left:auto; } }

/* ==========================================================================
   POLICY PAGES
   ========================================================================== */
.doc-page{ padding:clamp(44px, 7vw, 82px) 0 clamp(60px, 8vw, 96px); }

.doc-head{
  padding-bottom:clamp(26px, 3.5vw, 38px);
  margin-bottom:clamp(30px, 4vw, 44px);
  border-bottom:1px solid var(--rule);
}
.doc-head h1{
  font-size:clamp(2.1rem, 6.4vw, 3.4rem);
  font-weight:800; letter-spacing:-.038em;
}
.doc-meta{ margin-top:14px; font-size:.88rem; color:var(--muted-lo); }

.doc-body > * + *{ margin-top:22px; }
.doc-body h2{
  font-size:clamp(1.22rem, 3vw, 1.5rem);
  letter-spacing:-.026em;
  margin-top:clamp(34px, 4.5vw, 46px);
}
.doc-body p, .doc-body li{
  font-size:1.02rem; color:var(--muted); max-width:70ch;
}
.doc-body strong{ color:var(--ink); font-weight:600; }
.doc-body ul{ display:flex; flex-direction:column; gap:10px; }
.doc-body li{ position:relative; padding-left:19px; }
.doc-body li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:2px; background:var(--muted-lo);
}
.doc-body a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

.doc-note{
  background:var(--paper-lo);
  border:1px solid var(--rule);
  border-left:3px solid var(--ink);
  border-radius:var(--r);
  padding:20px 22px;
}
.doc-note p{ font-size:.96rem; }
.doc-note p + p{ margin-top:10px; }

.doc-back{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:clamp(44px, 5vw, 60px);
  padding-top:24px;
  border-top:1px solid var(--rule);
  width:100%;
  font-size:.95rem; font-weight:500;
  color:var(--muted);
  text-decoration:none;
}
.doc-back:hover{ color:var(--ink); }
.doc-back svg{ width:17px; height:11px; flex:none; }

/* ==========================================================================
   ENTRY POINTS INTO THE PRODUCT
   ========================================================================== */
.nav__cta{ flex:none; }

/* on the narrowest screens the label would crowd the wordmark */
@media (max-width:399px){
  .nav__cta{ padding:8px 12px; font-size:.86rem; }
}

.closer{
  background:var(--card);
  border-top:1px solid var(--rule);
  padding:clamp(60px, 8vw, 100px) 0;
}
.closer__inner{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.closer .h2{ max-width:22ch; }
.closer .lede{ margin-top:0; }
.closer .btn{ margin-top:8px; }

/* a one-line notice after leaving the app (e.g. "Your account has been deleted.") */
.flash{
  position:fixed; left:50%; top:82px; z-index:80;
  transform:translateX(-50%);
  max-width:calc(100% - 32px);
  padding:10px 16px;
  border-radius:var(--r-ctl);
  background:var(--ink); color:#F7F6F1;
  font-size:.94rem; font-weight:500;
  box-shadow:var(--shadow-lg);
  transition:opacity .3s ease;
}
.flash.is-gone{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .flash{ transition:none; } }

/* ==========================================================================
   404 — served for any path that isn't a page
   ========================================================================== */
.nf-page{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.nf{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:64px var(--gut) 40px;
}
.nf__mark{ display:block; width:56px; height:56px; object-fit:contain; margin-bottom:32px; }
.nf__code{
  margin:0;
  font-family:var(--serif); font-weight:800;
  font-size:clamp(4.5rem, 18vw, 7rem); line-height:.9; letter-spacing:-.05em;
}
/* the brand's highlighter, once */
.nf__code::after{
  content:""; display:block;
  width:56px; height:6px; margin:18px auto 0;
  border-radius:3px; background:var(--marker);
}
.nf__title{
  margin:28px 0 0;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.5rem, 4.6vw, 1.9rem); line-height:1.15; letter-spacing:-.03em;
}
.nf__body{ margin:12px 0 32px; max-width:34ch; color:var(--muted); }
.nf__foot{ padding:0 var(--gut) 28px; text-align:center; font-size:.82rem; color:var(--muted-lo); }