/* Proofbin, shared base.
   Palette is the brand book and nothing else: bone, near-black, red.
   Lines and muted text are those same three colors at lower strength.

   Type ladder is the golden ratio, base 17px:
     17 -> 27.5 -> 44.5 -> 72      (body, sub-head, section head, hero)
   13px is the mono eyebrow, 21px is the half step used for ledes.
   Boxes follow the same number: cards are 1.618 wide for 1 tall, and the
   two-column rows split 1.618fr / 1fr.

   Measured contrast, not eyeballed (WCAG 2 / APCA):
     ink   #2E2D2C on bone  11.59:1  Lc 88.8   body text, anything
     muted #5A5755 on bone   6.04:1  Lc 73.4   secondary text, 16px and up
     #C4C0BE on ink          7.61:1  Lc -64.6  secondary text on the dark card
     red   #E63020 on bone    3.68:1  Lc 57.0  LARGE BOLD TEXT ONLY, or graphics
     bone on red              3.68:1  Lc -61.3 LARGE BOLD TEXT ONLY (19px/700)
   The last two are the trap: red never carries a paragraph, a label or a
   caption. It carries the hero fragment, button labels at 19px bold, and
   non-text marks like the timeline dots, where 3:1 is the bar. */

@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-latin.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
}
@font-face{
  font-family:"Krona One";
  src:url("fonts/krona-one.ttf") format("truetype");
  font-weight:400;font-display:swap;
}

:root{
  --bone:#EEEBEA;
  --ink:#2E2D2C;
  --red:#E63020;
  --muted:#5A5755;
  --rule:rgba(46,45,44,.2);
  --r:9px;
  --maxw:1200px;
  --gut:clamp(20px,5vw,56px);
  --sans:"Archivo",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --display:"Krona One","Archivo",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* the golden ladder */
  --t-mono:13px;
  --t-body:17px;
  --t-lede:clamp(18px,1.6vw,21px);
  --t-sub:clamp(21px,2.4vw,27px);
  --t-head:clamp(28px,3.8vw,44px);
  --t-hero:clamp(36px,5.6vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:var(--t-body);line-height:1.55;
  background:var(--bone);color:var(--ink);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 14px;background:var(--ink);color:var(--bone);border-radius:var(--r)}
.skip:focus{left:8px}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:4px}

/* Nav */
.nav{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand svg{flex:none}
.wordmark{font-family:var(--display);font-size:17px;letter-spacing:.04em;line-height:1}
.nav .lnk{display:none;text-decoration:none;font-size:15px;min-height:44px;align-items:center;color:var(--muted)}
.nav .lnk:hover{color:var(--ink)}
@media(min-width:960px){.nav .lnk{display:inline-flex}}
.signin{text-decoration:none;font-size:15px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;color:var(--muted)}
.signin:hover{color:var(--ink)}
@media(max-width:480px){.nav{gap:14px}.wordmark{font-size:15px}.brand svg{width:26px;height:26px}}

/* Buttons. Bone on red measures 3.68:1, which only clears AA as large text,
   so the label is pinned at 19px bold (large starts at 18.66px bold).
   Never set a smaller font-size on a red button. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;
  border-radius:var(--r);text-decoration:none;font-weight:700;font-size:19px;line-height:1;
  font-stretch:108%;border:1.5px solid transparent;white-space:nowrap}
.btn-sm{min-height:44px;padding:0 18px;font-size:19px}
.btn-red{background:var(--red);color:var(--bone)}
.btn-red:hover{background:#CF2917}
.btn-line{border-color:currentColor;background:transparent;color:var(--ink)}
.btn-line:hover{background:rgba(46,45,44,.06)}

.eyebrow{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Section heads: 1.618fr of headline to 1fr of supporting line. */
.sec-head{display:grid;gap:16px;margin-bottom:clamp(28px,4vw,44px)}
@media(min-width:1000px){.sec-head{grid-template-columns:1.618fr 1fr;align-items:end;gap:40px}}
.sec-head h2{font-weight:800;font-stretch:125%;font-size:var(--t-head);line-height:1.05;letter-spacing:-.02em;max-width:20ch}
.sec-head p{color:var(--muted);font-size:var(--t-lede);max-width:44ch}

/* Pricing skeleton */
.plans{display:grid;gap:0;grid-template-columns:1fr;border-top:2px solid var(--ink)}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{display:flex;flex-direction:column;gap:18px;padding:28px 0;border-radius:0}
@media(min-width:900px){.plan{padding:28px 28px 32px}.plan+.plan{border-left:1px solid var(--rule)}.plan:first-child{padding-left:0}}
@media(max-width:899px){.plan+.plan{border-top:1px solid var(--rule)}}
.plan.mid{background:var(--ink);color:var(--bone);--rule:rgba(238,235,234,.18);--muted:#C4C0BE;padding-inline:28px}
.plan .pname{font-weight:700;font-size:19px;font-stretch:112%}
.plan .amt{display:flex;align-items:baseline;gap:8px}
.plan .amt b{font-family:var(--sans);font-weight:800;font-stretch:125%;font-size:var(--t-head);line-height:1;letter-spacing:-.03em}
.plan .amt span,.plan .for,.plan small{color:var(--muted)}
.plan .for{font-size:16px}
.plan li{padding:10px 0;font-size:16px;border-top:1px solid var(--rule)}
.plan .btn{margin-top:auto}
.plan small{font-size:14px}

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