/* ============================================================
   FRACS.IO — styles
   Palette lives in :root. Not sure on colors? Swap the three
   PRIMARY tokens — everything follows. Alt palettes at bottom.

   House rules for this file:
   · cream paper, ink rules, tomato for the shout, pine to ground
   · one hairline rule and one pattern tape do all the dividing
   · patterns sit on cream or pine, never on tomato
   · marker PNGs are rare — one per page, two at the absolute most

   THE TWO REDS — do not consolidate them.
   · --red #e03a26 is for display type and decoration: hero italics,
     the giant cropped word, the ( 0n ) numerals, section-head italics,
     marquees, markers. On cream it is 3.69:1, which clears the 3:1 bar
     that large text and decoration are held to.
   · --red-dark #bf2f1d is for filled grounds that carry small text:
     .si, .tryb button, .pcard.red, .ctaband, .lp-go. Cream on it is
     4.86:1; cream on --red is only 3.69:1 and fails the 4.5:1 bar.
   Merging the two back into one red silently reintroduces that failure
   on every small-text-on-red surface.
   Note also that the substitution only works one way: --ink on --red is
   4.23:1 but on --red-dark it is 3.21:1, so never move a dark-on-red
   pairing to --red-dark.

   THE MUTED GREY — it carries small text, so it has to clear 4.5:1.
   --muted is a text colour and nothing else: 34 declarations across this
   file and landing.css, every one of them a `color`, and every one of
   them lands on type between 8.8px and 18px. Not one use is large text,
   a rule, a border or an icon, so the 3:1 non-text bar never applies and
   there is no lighter tone hiding in here doing decorative work.
   It sits on three grounds — --cream, --paper and --cream-2 — and
   --cream-2 is the one that decides the value, not --cream. At #847a69
   it measured 3.56:1 on cream and 3.95:1 on paper, but 3.28:1 under
   .cmp thead th small, and any replacement chosen against cream alone
   will pass there and still fail on the table head: #72695a reaches
   4.56:1 on cream and only 4.20:1 on --cream-2.
   #6b6254 is the value that clears every ground it actually touches —
   5.06:1 cream, 5.61:1 paper, 4.66:1 --cream-2 — and still reads a clear
   step lighter than --body, which is the whole reason the token exists:
   5.06:1 against --body's 8.08:1 on cream. Moving these labels to --body
   instead would have passed too and flattened that step to nothing.
   Lighten it and the failure comes back on all twelve pages at once.
   Measure any new value on --cream-2, not on cream, and do not put
   --muted on a ground darker than --cream-2 without measuring it there.
   ============================================================ */

@font-face{font-family:'Cherry Bomb';src:url(../fonts/cherry-bomb.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Crimson Cherry';src:url(../fonts/crimson-cherry.woff2) format('woff2');font-display:swap}

:root{
  /* PRIMARY — the three that matter */
  --cream:#f1ebe0;          /* page ground, warm paper       */
  --red:#e03a26;            /* editorial tomato              */
  --ink:#161310;            /* near-black, warm              */

  /* derived */
  --cream-2:#eae2d2;        /* recessed panels               */
  --red-dark:#bf2f1d;
  --pine:#2f4f3e;          /* deep pine — the grounding second color */
  --pine-dark:#24402f;
  --paper:#faf7f0;          /* raised cards                  */
  --line:#d9d0bf;
  --muted:#6b6254;          /* small text only — 4.66:1 on --cream-2 */
  --body:#4c4438;           /* body copy on cream            */

  --serif:'Instrument Serif',Georgia,serif;
  --bomb:'Cherry Bomb','Archivo Black',sans-serif;
  --stamp:'Crimson Cherry','Archivo Black',sans-serif;
  --sans:'Archivo',ui-sans-serif,-apple-system,sans-serif;

  --gap:clamp(72px,10vw,132px);   /* the standing vertical rhythm */
}

*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
/* There is deliberately no `.wide` layout container. One existed here as a
   1280px wrapper and was used by nothing — every occurrence of the class in
   the site is `class="split wide"`, the .split modifier below. The two
   selectors collided, so the layout rule's `padding:0 24px` silently inset
   every .split.wide column 24px out of line with the .shead rule above it,
   on 11 blocks across doors, pricing, about and what-do-you-do-here. Its
   max-width never bound (these all sit inside .wrap), which is why it went
   unnoticed. If a wider container is ever needed, give it a name no
   component modifier would take — not `.wide`. */
.serif{font-family:var(--serif)}
img{max-width:100%}

/* ---- nav ---- */
nav{border-bottom:1.5px solid var(--ink);background:var(--cream);position:sticky;top:0;z-index:40}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.logo{font-family:var(--bomb);font-size:20px;letter-spacing:.04em;text-decoration:none;color:var(--ink)}
.logo i{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--red);letter-spacing:0}
.nl{display:flex;gap:26px;align-items:center;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.nl a{color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px;white-space:nowrap}
.nl a:hover{border-color:var(--red)}
/* .on marks the section a child page belongs to (credits, faq, talk);
   aria-current is reserved for the page you are actually on */
.nl a[aria-current],.nl a.on{border-color:var(--red);color:var(--red)}
/* Ground moved off --red: cream at 12.5px/600 measures 3.69:1 on #e03a26 and
   4.86:1 on #bf2f1d. Hover moves to --ink because --red-dark is now the rest
   state; --ink matches .go:hover / .ctaband a:hover / .tang a:hover. */
.si{background:var(--red-dark);color:var(--cream);padding:10px 22px;border-radius:99px;text-decoration:none;
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.si:hover{background:var(--ink)}
/* mobile: the links drop to a second, scrollable row instead of disappearing */
@media(max-width:860px){
  nav .wrap{height:auto;flex-wrap:wrap;padding-top:13px;gap:0}
  .nl{order:3;width:100%;margin-top:12px;padding:10px 2px 9px;gap:22px;font-size:11px;
    border-top:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nl::-webkit-scrollbar{display:none}
  .si{padding:9px 18px;font-size:11.5px}
}

/* ---- marquee ---- */
.marq{border-bottom:1.5px solid var(--ink);background:var(--cream);overflow:hidden;white-space:nowrap;padding:11px 0}
.marq span{display:inline-block;font-family:var(--stamp);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);animation:roll 30s linear infinite}
.marq em{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:.02em;color:var(--ink);font-size:1.1em}
.marq b{color:var(--ink);font-weight:400;margin:0 16px}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq.rev{border-top:1.5px solid var(--ink);border-bottom:none}
.marq.rev span{animation-direction:reverse}

/* ---- hero ---- */
.hero{padding:104px 0 40px;text-align:center}
.eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--red);margin:0 0 22px}
.eyebrow b{font-weight:400}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,8.6vw,104px);line-height:.95;margin:0;letter-spacing:-.015em}
.hero h1 .up{font-family:var(--bomb);font-size:.86em;letter-spacing:.01em}
.hero h1 i{color:var(--red)}
.circ{position:relative;display:inline-block;padding:0 .12em}
.circ img{position:absolute;inset:-26% -9%;width:118%;height:150%;pointer-events:none;object-fit:fill}
.hero .dek{font-size:18px;max-width:50ch;margin:28px auto 0;line-height:1.6;color:var(--body)}
.hero .dek i{font-family:var(--serif);font-size:1.14em;color:var(--red)}
@media(max-width:700px){.hero{padding:64px 0 24px}}

/* ---- try box ---- */
.try{max-width:640px;margin:44px auto 0}
.tryb{background:var(--paper);border:1.5px solid var(--ink);display:flex;box-shadow:6px 6px 0 var(--ink)}
.tryb input{flex:1;border:none;outline:none;font:inherit;font-size:16px;background:transparent;padding:19px 20px;min-width:0}
.tryb input::placeholder{color:#b3a892}
/* 13px Cherry Bomb — 3.69:1 on #e03a26, 4.86:1 on #bf2f1d.
   On /lp this button renders at 14px, and 12.5px below 640px. Both normal text. */
.tryb button{background:var(--red-dark);color:var(--cream);border:none;border-left:1.5px solid var(--ink);
  font-family:var(--bomb);font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:0 28px;cursor:pointer}
.tryb button:hover{background:var(--ink)}
.tryr{margin:18px auto 0;border:1.5px solid var(--ink);background:var(--pine);color:var(--cream);padding:16px 20px;font-size:15px;display:none;text-align:left}
.tryr.show{display:block}
.tryr b{color:#f2c9c0}
.tryn{font-size:11.5px;color:var(--muted);margin-top:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

/* ---- sections & the two dividers ------------------------------
   1. .shead — a numbered label and a title sitting on a hairline
   2. .tape  — one thin pattern strip, at most once per page
   Everything else is space.                                      */
section{padding:var(--gap) 0 0}
.shead{display:flex;align-items:baseline;gap:16px;border-bottom:1.5px solid var(--ink);padding-bottom:14px;margin-bottom:46px}
.shead .no{font-family:var(--serif);font-style:italic;color:var(--red);font-size:21px}
.shead h2{margin:0;font-family:var(--bomb);font-size:27px;letter-spacing:.03em;text-transform:uppercase}
.shead h2 i{font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:0;font-size:1.24em;color:var(--red)}
.shead .rt{margin-left:auto;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.shead .rt em{font-family:var(--serif);font-style:italic;color:var(--red);text-transform:none;letter-spacing:0;font-size:1.2em}
@media(max-width:700px){
  .shead{flex-wrap:wrap;gap:8px 12px;margin-bottom:32px}
  .shead h2{font-size:19px;line-height:1.35}
  .shead .no{font-size:17px}
  .shead .rt{display:none}
}
.rule{border:none;border-top:1.5px solid var(--ink);margin:0}
.hair{border:none;border-top:1px solid var(--line);margin:0}
/* divider two: a short photographic band, hairlined top and bottom.
   Short on purpose — these sources are 1024px wide, and a shallow
   band hides that where a tall one would advertise it. */
.strip{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  overflow:hidden;margin-top:var(--gap);background:var(--cream-2)}
.strip img{display:block;width:100%;height:clamp(92px,12vw,148px);object-fit:cover;object-position:center 55%}

/* ---- pricing ---- */
/* Four rungs, not three: the ladder runs Frac 1 / 2 / 5 / 12 and the
   two-tier executive split collapsed into one retainer, which lives in
   .exec and not on this grid. 2x2 before one column, because four cards
   at 253px each stop reading as cards well before they stop fitting. */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5px;border:1.5px solid var(--ink);background:var(--ink)}
@media(max-width:980px){.plans{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.plans{grid-template-columns:1fr}}
.pcard{background:var(--paper);padding:34px 26px;display:flex;flex-direction:column}
/* Twelve of this card's text elements are normal-size and sit directly on the
   card ground (.ptag 11px, .pprice span 14px, .pper 11.5px, .alwh 10.5px,
   .alwn span 13px, .alwsay 14px, .alwmore 13px, .feat li 15px, .go 13px …).
   Cream on #e03a26 is 3.69:1; on #bf2f1d it is 4.86:1. The large items
   (.pname 38px, .pprice 46px, .alwn 34px) were already over their 3:1 bar and
   only move because they share the ground. */
.pcard.red{background:var(--red-dark);color:var(--cream)}
.ptag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin:0 0 16px;color:var(--red)}
.pcard.red .ptag{color:var(--cream)}
.pname{font-family:var(--serif);font-size:38px;line-height:1;margin:0 0 4px;font-weight:400}
/* clamped rather than fixed at 46: the fourth rung took ~50px off the card,
   and "$159 /mo" set at 46px was the token that overflowed first */
.pprice{font-family:var(--bomb);font-size:clamp(34px,3.6vw,46px);letter-spacing:-.01em;margin:16px 0 2px}
.pprice span{font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:0}
.pper{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:0 0 20px}
/* #f6cfc9 reaches only 4.04:1 on #bf2f1d — enough for the 38px .pname i at
   its 3:1 bar, not enough for 11.5px body. Cream is 4.86:1. */
.pcard.red .pper{color:var(--cream)}
.feat{list-style:none;margin:0 0 28px;padding:0;flex:1}
.feat li{font-size:15px;padding:11px 0;line-height:1.5;border-bottom:1px solid var(--line)}
.pcard.red .feat li{border-color:rgba(244,238,227,.28)}
.feat li:last-child{border-bottom:none}
.feat li i{font-family:var(--serif);font-size:1.1em}
/* the .seg / .segsp price toggles were removed with pricing v3 — every price
   on the page is now visible at once. */

/* what the plan includes, stated on the card itself */
.alw{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:2px 0 16px}
.pcard.red .alw{border-color:rgba(241,235,224,.34)}
.alwh{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--body);margin:0 0 10px}
.pcard.red .alwh{color:var(--cream)}
.alwn{font-family:var(--bomb);font-size:34px;line-height:1;margin:0}
.alwn span{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.01em}
.alwsay{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--body)}
.pcard.red .alwsay{color:var(--cream)}
.alwmore{margin:0 0 22px;font-size:13px;line-height:1.55;color:var(--body)}
.alwmore b{font-family:var(--bomb);font-size:14px;letter-spacing:.01em;color:var(--ink)}
.pcard.red .alwmore,.pcard.red .alwmore b{color:var(--cream)}
.go{display:block;text-align:center;border:1.5px solid var(--ink);background:transparent;color:inherit;
  font-family:var(--bomb);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  padding:17px;cursor:pointer;text-decoration:none;transition:.12s;border-radius:99px}
.go:hover{background:var(--ink);color:var(--cream)}
.pcard.red .go{border-color:var(--cream)}
.pcard.red .go:hover{background:var(--cream);color:var(--red)}

/* ---- exec band ----
   Detached from the plan grid on purpose: it is priced on retainer,
   not on the self-serve ladder, so it gets its own ruled block. */
.exec{border:1.5px solid var(--ink);margin-top:44px;background:var(--pine);color:var(--cream);
  padding:40px;display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.exec h3{font-family:var(--serif);font-weight:400;font-size:34px;margin:0 0 6px}
.exec h3 i{color:#e8b6ab}
.exec p{margin:0;font-size:15px;opacity:.85;max-width:52ch}
.exec .et{flex:1;min-width:260px}
.exec .eo{border:1px solid rgba(244,238,227,.35);padding:14px 20px;text-align:center;border-radius:8px}
.exec .eo b{display:block;font-family:var(--bomb);font-size:20px}
.exec .eo span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
/* Inverted rather than darkened. Cream on --red was
   3.69:1; --red-dark on cream is 4.86:1, the same number the darkened ground
   would have reached. The reason to invert is the pill itself: a tomato pill
   on --pine is 2.08:1 and a --red-dark pill on pine is 1.58:1, at which point
   it reads as a shadow rather than a button. Cream on pine is 7.67:1, and it
   matches the cream-pill-on-coloured-ground pattern .ctaband a already uses. */
.exec a{background:var(--cream);color:var(--red-dark);font-family:var(--bomb);font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:17px 28px;text-decoration:none;white-space:nowrap;border-radius:99px}
.exec a:hover{background:var(--ink);color:var(--cream)}

/* ---- credits ---- */
.howgrid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media(max-width:820px){.howgrid{grid-template-columns:1fr;gap:40px}}
.howcopy .big{font-family:var(--serif);font-size:clamp(30px,3.6vw,42px);line-height:1.14;margin:0 0 20px;font-weight:400}
.howcopy .big i{color:var(--red)}
.howcopy p{font-size:16px;color:var(--body);margin:0 0 14px;max-width:52ch}
.howcopy p u{text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.sizes{border:1.5px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink)}
.sz{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;border-bottom:1.5px solid var(--ink)}
.sz:last-child{border-bottom:none}
.sz .l b{font-family:var(--bomb);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.sz .l small{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.sz .r{font-family:var(--serif);font-size:34px;color:var(--red);font-variant-numeric:tabular-nums}

/* ---- tangram ---- */
.tang{margin-top:var(--gap);border:1.5px solid var(--ink);background:var(--cream-2);padding:44px;
  display:flex;gap:30px;align-items:center;flex-wrap:wrap;position:relative;isolation:isolate}
/* the one pattern left standing on the site: a pine hairline grid,
   faint enough to read as paper stock rather than decoration */
.tang::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;
  background:url(../assets/pattern-grid-pine.svg) 0 0/28px}
.tang h3{font-family:var(--serif);font-weight:400;font-size:34px;margin:0 0 8px}
.tang h3 i{color:var(--red)}
.tang p{margin:0;font-size:15.5px;color:var(--body);max-width:58ch}
.tang .tt{flex:1;min-width:260px}
.tang a{border:1.5px solid var(--ink);color:var(--ink);font-family:var(--bomb);font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:16px 26px;text-decoration:none;border-radius:99px}
.tang a:hover{background:var(--ink);color:var(--cream)}

/* ---- giant word + footer ---- */
.giant{overflow:hidden;margin-top:var(--gap);line-height:.78;text-align:center;pointer-events:none;user-select:none}
.giant span{font-family:var(--serif);font-style:italic;font-size:clamp(120px,24vw,300px);color:var(--red);
  display:inline-block;transform:translateY(.16em)}
footer{border-top:1.5px solid var(--ink);padding:26px 0 60px;font-size:12.5px;color:var(--muted);
  text-align:center;letter-spacing:.04em;line-height:1.8}
footer .fm{font-family:var(--bomb);color:var(--ink);font-size:14px;letter-spacing:.06em}

/* ============================================================
   ALT PALETTES — paste over the three PRIMARY tokens to try:

   Warmer / softer (blush ground, brick red)
     --cream:#f3ece4;  --red:#c8402e;  --ink:#1b1512;

   Higher contrast (paper white, signal red)
     --cream:#f7f3ea;  --red:#e2331f;  --ink:#121010;

   Dark glamour (from the social kit — evening mode)
     --cream:#1e2320;  --red:#e0492e;  --ink:#efe8da;
     (also swap --paper:#252b27, --cream-2:#232825,
      --line:#3a423d, --muted:#93998f)
   ============================================================ */


/* ---- legacy strip (kept for the /lp landing page) ---- */
.pstrip{height:26px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='26'%3E%3Crect width='64' height='26' fill='%23f1ebe0'/%3E%3Crect width='22' height='26' fill='%232f4f3e'/%3E%3Crect x='30' width='5' height='26' fill='%23e03a26'/%3E%3C/svg%3E");background-size:64px 26px}
.tryarrow{display:block;width:54px;margin:18px auto -6px;transform:rotate(90deg) scaleX(-1);opacity:.85}

/* Frac 5, the workhorse — clean red, lifted, and it breaks the row height.
   The lift is only right on the single four-across row: in the 2x2
   arrangement it would shove one card up out of a pair. */
.plans{overflow:visible}
.pcard.red{position:relative;z-index:2;box-shadow:8px 8px 0 var(--ink)}
@media(min-width:981px){.pcard.red{margin:-22px 0}}
.pcard.red .pname i{color:#f6cfc9}          /* 38px, large text, 4.04:1 */
.pcard.red .feat li i{color:var(--cream)}   /* 16.5px, normal text, 4.86:1 */
.pcard.red .pprice{position:relative;display:inline-block}
.pcard.red .pprice::after{content:"";position:absolute;inset:-18% -14%;background:url(../assets/circle-cream.png) no-repeat center/100% 100%;opacity:.38;pointer-events:none}


/* ============ motion & imagery ============ */

/* grain overlay */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}

/* line-mask reveal (the signature) — active only when html.anim */
.rl{display:block;overflow:hidden;padding:.3em .45em;margin:-.3em -.45em}
.rl>span{display:block}
html.anim .rl>span{transform:translateY(150%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
html.anim .in .rl>span{transform:translateY(0)}
.rl:nth-child(2)>span{transition-delay:.08s}
.rl:nth-child(3)>span{transition-delay:.16s}

/* generic scroll reveal — active only when html.anim */
html.anim [data-rv]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
html.anim [data-rv].in{opacity:1;transform:none}
[data-rv="2"]{transition-delay:.1s}
[data-rv="3"]{transition-delay:.2s}

/* marker circle draws in after the headline */
html.anim .circ img{opacity:0;transform:scale(.85) rotate(-4deg);transition:opacity .5s .75s cubic-bezier(.16,1,.3,1),transform .5s .75s cubic-bezier(.16,1,.3,1)}
html.anim .in .circ img{opacity:1;transform:none}

/* magnetic-ish buttons */
.go,.si,.tryb button,.exec a,.tang a{will-change:transform;transition:transform .25s cubic-bezier(.16,1,.3,1),background .15s,color .15s}

@media (prefers-reduced-motion: reduce){
  .marq span{animation:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---- focus & skip link ---- */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2.5px solid var(--red);outline-offset:3px;border-radius:2px}
.pcard.red a:focus-visible,.pcard.red button:focus-visible,
.exec a:focus-visible,.ctaband a:focus-visible,.pine a:focus-visible{outline-color:var(--cream)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--ink);color:var(--cream);
  padding:12px 20px;font-family:var(--bomb);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}


/* ============ subpages & site footer ============ */

/* subpage hero */
.phero{padding:clamp(56px,8vw,96px) 0 0}
.phero .eyebrow{text-align:left}
.phero h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,8vw,92px);line-height:.98;margin:0;letter-spacing:-.015em;max-width:16ch}
.phero h1 .up{font-family:var(--bomb);font-size:.84em}
.phero h1 i{color:var(--red)}
.phero .dek{font-size:19px;color:var(--body);max-width:52ch;margin:26px 0 0;line-height:1.6}
.phero .dek i{font-family:var(--serif);font-size:1.12em;color:var(--red)}

/* step cards */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;border:1.5px solid var(--ink);background:var(--ink)}
@media(max-width:820px){.steps3{grid-template-columns:1fr}}
.step{background:var(--paper);padding:34px 30px}
.step .n{font-family:var(--serif);font-style:italic;color:var(--red);font-size:20px;display:block;margin-bottom:12px}
.step h3{font-family:var(--bomb);font-size:16px;letter-spacing:.05em;text-transform:uppercase;margin:0 0 12px}
.step p{margin:0;font-size:15px;color:var(--body);line-height:1.6}
.step p i{font-family:var(--serif);font-size:1.08em;color:var(--red)}

/* timeline */
.tl{border:1.5px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink)}
.tlr{display:flex;gap:22px;padding:20px 24px;border-bottom:1.5px solid var(--line);align-items:baseline}
.tlr:last-child{border-bottom:none}
.tlr .d{font-family:var(--bomb);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);white-space:nowrap;min-width:104px}
.tlr .t{font-size:15px;color:var(--body);line-height:1.55}
.tlr .t b{color:var(--ink)}
.tlr .t i{font-family:var(--serif);font-size:1.08em}
@media(max-width:600px){.tlr{flex-direction:column;gap:6px}}

/* two-col rule lists (in / never) */
.inout{display:grid;grid-template-columns:1fr 1fr;gap:1.5px;border:1.5px solid var(--ink);background:var(--ink)}
@media(max-width:760px){.inout{grid-template-columns:1fr}}
.io{background:var(--paper);padding:32px}
.io.green{background:var(--pine);color:var(--cream)}
.io h4{font-family:var(--bomb);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px}
.io.green h4{color:#cfe0d4}
.io ul{margin:0;padding:0;list-style:none}
.io li{font-size:15px;padding:9px 0;border-bottom:1px solid var(--line);line-height:1.5}
.io.green li{border-color:rgba(244,238,227,.22)}
.io li:last-child{border-bottom:none}
.io li i{font-family:var(--serif);font-size:1.08em}

/* comparison table */
.cmpwrap{border:1.5px solid var(--ink);overflow-x:auto;background:var(--paper)}
table.cmp{width:100%;border-collapse:collapse;min-width:680px}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.cmp thead th{font-family:var(--bomb);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1.5px solid var(--ink);background:var(--cream-2)}
.cmp thead th small{display:block;font-family:var(--sans);font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);margin-top:3px}
.cmp tbody th{font-weight:600;color:var(--ink);text-align:left;font-size:14px}
.cmp td{color:var(--body)}
.cmp .y{color:var(--pine);font-weight:700}
/* the recommended column is marked with weight, not a tint. Tomato on the
   cream-2 header only reaches 3.4:1 at this size, so colour stays out of it */
.cmp tbody td.hot{font-weight:600;color:var(--ink)}
.cmp tbody td.hot.y{color:var(--pine);font-weight:700}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:none}

/* functions rows */
.fnrow{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:18px 24px;border-bottom:1.5px solid var(--line)}
.fnrow:last-child{border-bottom:none}
.fnrow .l b{font-family:var(--bomb);font-size:14px;letter-spacing:.05em;text-transform:uppercase}
.fnrow .l small{display:block;color:var(--muted);font-size:13px;margin-top:4px;max-width:52ch}
.fnrow .r{font-family:var(--serif);font-size:24px;color:var(--red);white-space:nowrap}
.fnrow .r small{font-family:var(--sans);font-size:11px;color:var(--muted);display:block;text-align:right}
.fnbox{border:1.5px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink)}
.fnnote{font-size:14px;color:var(--muted);margin:18px 2px 0;max-width:72ch;line-height:1.6}
.fnnote i{font-family:var(--serif);color:var(--pine);font-size:1.08em}

/* faq */
.faq{border:1.5px solid var(--ink);background:var(--paper)}
.faq details{border-bottom:1.5px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;list-style:none;padding:22px 26px;font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--serif);font-size:26px;color:var(--red);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 26px 24px;font-size:15.5px;color:var(--body);line-height:1.65;max-width:70ch}
.faq .a i{font-family:var(--serif);font-size:1.08em;color:var(--red)}
.faq .a b{color:var(--ink)}

/* CTA band */
/* The h2 is 54px desktop / 32px at 390px and was always over its 3:1 bar at
   3.69:1. The dek is the reason this ground moves: 16px cream at opacity .9
   composites to #efd9cd and measures 3.23:1 on #e03a26. Even on #bf2f1d the
   .9 opacity only reaches 4.19:1, so the opacity has to go too — at full
   opacity on #bf2f1d it is 4.86:1.
   KEEP the clamp() floor at or above 24px on .ctaband h2 .up: at 390px it
   computes to 27.52px, and below 24px it stops being large text and 3.69:1
   would no longer be enough for it either. */
.ctaband{margin-top:var(--gap);border:1.5px solid var(--ink);background:var(--red-dark);color:var(--cream);
  padding:clamp(44px,7vw,76px) 36px;text-align:center}
.ctaband h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5.2vw,54px);margin:0 0 12px;letter-spacing:-.01em;line-height:1.06}
.ctaband h2 .up{font-family:var(--bomb);font-size:.86em}
.ctaband p{margin:0 0 26px;font-size:16px}
/* label follows the ground: bright tomato lettering inside a #bf2f1d band
   reads as a mistake, and --red-dark on the cream pill is 4.86:1 vs 3.69:1 */
.ctaband a{display:inline-block;background:var(--cream);color:var(--red-dark);font-family:var(--bomb);font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:17px 32px;border-radius:99px;text-decoration:none}
.ctaband a:hover{background:var(--ink);color:var(--cream)}

/* site footer */
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:32px;padding:52px 0 40px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}
.fcol .flogo{font-family:var(--bomb);font-size:18px;letter-spacing:.04em}
.fcol .flogo i{font-family:var(--serif);font-style:italic;color:var(--red)}
.fcol .ftag{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--body);margin:10px 0 0}
.fcol h5{font-family:var(--bomb);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.fcol ul{margin:0;padding:0;list-style:none}
.fcol li{margin:9px 0;font-size:14.5px}
.fcol a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.fcol a:hover{border-color:var(--red);color:var(--red)}
.fcol .fnote{font-size:13px;color:var(--muted);margin:16px 0 0;line-height:1.6;max-width:32ch}
.fcol li.sub{color:var(--muted);font-size:13.5px}
.fbar{border-top:1.5px solid var(--ink);padding:18px 0 56px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.fbar .ast{display:inline-block;color:var(--red);transition:transform .8s cubic-bezier(.16,1,.3,1);cursor:default}
.fbar .ast:hover{transform:rotate(180deg)}

/* ---- trademark marking ----
   ™ only, and do not "upgrade" it: nothing here is registered with the
   USPTO, so the registered symbol would be false marking and unlawful.
   The glyph is set rather than left to the face: Instrument Serif and
   Cherry Bomb draw it at wildly different sizes and baselines, and the
   subset display faces may not carry it at all, so .tm is forced to
   --sans and given its own size and lift. line-height:0 keeps it out of
   the line box so it cannot grow a heading's leading or wrap a heading
   onto a second line.
   .tm belongs on running copy only — never inside .giant, .marq or
   .circ, and never on a verb use of "frac it". The claim for the display
   uses is carried by the .ftm line in the footer instead.
   See ../../fracsio-source-assets/docs/trademark-plan.md. */
.tm{font-family:var(--sans);font-size:.58em;font-weight:600;line-height:0;
  vertical-align:.42em;letter-spacing:.02em;margin-left:.05em}
/* the footer attribution line — its own full-width row in .fbar and in
   landing.css's .lp-foot, so it never competes for horizontal space with
   the copyright/address row those flex containers already carry */
.ftm{flex:0 0 100%;order:9;margin:0}
.ftm .tm{font-weight:500}


/* ============================================================
   EDITORIAL LAYER — big type, big pictures, quiet rules
   ============================================================ */

/* ---- pictures ------------------------------------------------
   .plate is the base image treatment: an ink keyline and a real
   aspect ratio. Photography is full colour under the brand guide
   §07 grade — see the PHOTOGRAPHY block at the foot of this file.
   Two libraries with two ceilings: the architectural stock tops
   out at 1024px, so those plates must stay inside the 1012px text
   column. The 2026 founder frames are 2400px on the long edge and
   are safe edge-to-edge at 2x. Check the source before assuming
   which library a given file came from.  */
.plate{display:block;border:1.5px solid var(--ink);overflow:hidden;background:var(--cream-2);margin:0}
.plate img{display:block;width:100%;height:100%;object-fit:cover}
.r-band{aspect-ratio:24/7}
.r-wide{aspect-ratio:16/7}
.r-let{aspect-ratio:3/2}
.r-sq{aspect-ratio:1/1}
.r-tall{aspect-ratio:3/4}
.r-col{aspect-ratio:5/8}
.op-t img{object-position:center 12%}
.op-b img{object-position:center 88%}
.op-l img{object-position:12% center}
.op-r img{object-position:88% center}
.cap{display:flex;gap:14px;justify-content:space-between;align-items:baseline;margin:14px 2px 0;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cap i{font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;color:var(--body)}
.figure{margin:0}

/* ---- editorial type ---- */
.lede,.prose p.lede{font-family:var(--serif);font-size:clamp(24px,3vw,36px);line-height:1.24;
  margin:0 0 24px;font-weight:400;max-width:24ch;color:var(--ink)}
.lede i,.prose p.lede i{color:var(--red);font-size:1em}
.prose p{font-size:17px;line-height:1.68;color:var(--body);margin:0 0 18px;max-width:58ch}
.prose p:last-child{margin-bottom:0}
.prose p i{font-family:var(--serif);font-size:1.1em;color:var(--red)}
.prose p b{color:var(--ink);font-weight:600}
.prose p u{text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.prose h3{font-family:var(--bomb);font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:34px 0 10px}
.label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:0 0 14px}
.label.red{color:var(--red)}

/* two columns, wide gutter, no borders */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,84px);align-items:start}
.split.wide{grid-template-columns:1.2fr .8fr}
.split.narrow{grid-template-columns:.8fr 1.2fr}
.split.mid{align-items:center}
@media(max-width:860px){.split,.split.wide,.split.narrow{grid-template-columns:1fr;gap:40px}}

/* numbered editorial list */
.numlist{list-style:none;margin:0;padding:0;counter-reset:n}
.numlist li{counter-increment:n;display:grid;grid-template-columns:64px 1fr;gap:18px;
  padding:26px 0;border-bottom:1px solid var(--line)}
.numlist li:first-child{padding-top:0}
.numlist li:last-child{border-bottom:none}
.numlist li::before{content:"( " counter(n,decimal-leading-zero) " )";font-family:var(--serif);
  font-style:italic;color:var(--red);font-size:19px;line-height:1.5;grid-column:1;grid-row:1}
.numlist li>*{grid-column:2}
.numlist b{display:block;font-family:var(--bomb);font-size:14px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.numlist p{margin:0;font-size:16px;color:var(--body);line-height:1.62;max-width:56ch}
.numlist p i{font-family:var(--serif);font-size:1.08em;color:var(--red)}
@media(max-width:600px){.numlist li{grid-template-columns:1fr;gap:8px}
  .numlist li::before{grid-column:1}.numlist li>*{grid-column:1}}

/* ruled key/value block */
.ruled{border-top:1.5px solid var(--ink)}
.rrow{display:flex;gap:24px;justify-content:space-between;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.rrow .rk{font-size:16px;line-height:1.55}
.rrow .rk b{display:block;font-family:var(--bomb);font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.rrow .rk small{display:block;color:var(--muted);font-size:14px;max-width:60ch;line-height:1.55}
.rrow .rv{font-family:var(--serif);font-size:26px;color:var(--red);white-space:nowrap;font-variant-numeric:tabular-nums}
.rrow .rv small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:right;font-weight:600}

/* big figures */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1.5px solid var(--ink)}
.stats.three{grid-template-columns:repeat(3,1fr)}
.stat{padding:28px 28px 30px 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat b{display:block;font-family:var(--bomb);font-size:clamp(30px,3.4vw,40px);letter-spacing:-.01em;line-height:1}
.stat span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:10px}
.stat small{display:block;font-size:14px;color:var(--body);margin-top:12px;line-height:1.55;max-width:26ch}
@media(max-width:820px){.stats,.stats.three{grid-template-columns:1fr 1fr}
  .stat{padding:22px 20px 24px 0}.stat:nth-child(2n){border-right:none}}

/* pull quote */
.pull{font-family:var(--serif);font-size:clamp(30px,5vw,58px);line-height:1.08;margin:0;letter-spacing:-.02em;max-width:20ch}
.pull i{color:var(--red)}
.pullwrap{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:clamp(44px,6vw,72px) 0;margin-top:var(--gap)}
.pullwrap cite{display:block;font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-top:24px;font-weight:700}

/* the bench — six, 3 × 2. Density comes from hairlines, not boxes:
   no card borders, no fills, no gutters beyond the column padding,
   the same treatment .next and .stats already use. */
.doors{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink)}
.door{display:flex;flex-direction:column;gap:12px;padding:32px 30px 34px 0;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit}
.door:nth-child(3n){border-right:none;padding-right:0}
.door:nth-child(n+4){border-bottom:none;padding-top:34px}
.door:hover{background:rgba(224,58,38,.04)}
.door .n{font-family:var(--serif);font-style:italic;color:var(--red);font-size:19px}
.door h3{font-family:var(--bomb);font-size:16.5px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px}
.door p{margin:0;font-size:15.5px;color:var(--body);line-height:1.6;max-width:36ch}
.door p i{font-family:var(--serif);font-size:1.08em;color:var(--red)}
.door .more{margin-top:auto;padding-top:18px;font-family:var(--bomb);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--red)}

@media(max-width:900px){
  .doors{grid-template-columns:1fr 1fr}
  .door:nth-child(3n){border-right:1px solid var(--line);padding-right:30px}
  .door:nth-child(2n){border-right:none;padding-right:0}
  .door:nth-child(n+3){border-bottom:1px solid var(--line);padding-top:34px}
  .door:nth-child(n+5){border-bottom:none}
}
@media(max-width:640px){
  .doors{grid-template-columns:1fr}
  .door,.door:nth-child(3n),.door:nth-child(2n){padding:26px 0;
    border-right:none;border-bottom:1px solid var(--line)}
  .door:nth-child(n+2){padding-top:26px}
  .door:last-child{border-bottom:none}
  .door h3{font-size:18px}
  .door p{max-width:none}
  .door .more{padding-top:12px}
}

/* a plain note — used for what is genuinely still pending */
.note{border-left:2px solid var(--line);padding:2px 0 2px 18px;font-size:14px;color:var(--muted);
  line-height:1.65;max-width:56ch}
.note b{color:var(--ink);font-weight:600}

/* keep-reading pair */
.next{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1.5px solid var(--ink);margin-top:var(--gap)}
@media(max-width:700px){.next{grid-template-columns:1fr}}
.next a{padding:34px 34px 34px 0;text-decoration:none;color:inherit;border-right:1px solid var(--line)}
.next a:last-child{border-right:none;padding-left:34px}
.next a:hover b{color:var(--red)}
.next a span{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:12px}
.next a b{font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.1;display:block}
.next a small{display:block;font-size:14px;color:var(--muted);margin-top:10px;line-height:1.5}
@media(max-width:700px){.next a{border-right:none;border-bottom:1px solid var(--line);padding:26px 0}
  .next a:last-child{padding-left:0;border-bottom:none}}

/* full-bleed pine band */
.band{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:clamp(56px,8vw,104px) 0;margin-top:var(--gap)}
.band.pine{background:var(--pine);color:var(--cream)}
.band.pine .shead{border-color:rgba(241,235,224,.5)}
.band.pine .shead h2{color:var(--cream)}
.band.pine .shead h2 i,.band.pine .shead .no{color:#eeb8ab}
.band.pine .shead .rt{color:#b9c9be}
.band.pine .shead .rt em{color:#eeb8ab}
.band.pine .lede,.band.pine h2,.band.pine h3{color:var(--cream)}
.band.pine .lede i{color:#eeb8ab}
.band.pine .prose p{color:#dcd5c8}
.band.pine .prose p i{color:#eeb8ab}
.band.pine .prose p b{color:var(--cream)}
.band.pine .label{color:#b9c9be}
.band.pine .ruled{border-color:rgba(241,235,224,.5)}
.band.pine .rrow{border-color:rgba(241,235,224,.22)}
.band.pine .rrow .rv{color:#eeb8ab}
.band.pine .rrow .rk small{color:#b9c9be}
.band.pine .stats{border-color:rgba(241,235,224,.5)}
.band.pine .stat{border-color:rgba(241,235,224,.22)}
.band.pine .stat span{color:#b9c9be}
.band.pine .stat small{color:#dcd5c8}

/* a marker element, placed once */
.mk{display:block;pointer-events:none}
.mk-side{width:54px;height:auto;flex:none;margin-top:12px}
@media(max-width:760px){.mk-side{display:none}}
.phero.has-mk{display:flex;gap:40px;align-items:flex-start;justify-content:space-between}
.mk-under{position:relative;display:inline-block}
.mk-under img{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.2em;object-fit:fill}


/* ============================================================
   PHOTOGRAPHY — brand guide v1 §07, "warm · sun-washed · off-duty"
   Guide line 555: "Warm tones, slight desaturation (94%), ink
   borders, tilted polaroid frames with serif-italic captions."
   Settled as full colour, not the b&w the original brief asked for.
   ============================================================ */

/* THE GRADE. One declaration, one place. Put .ph-grade on every
   COLOUR photographic <img> — nothing else in this file or landing.css
   may filter a photograph, and grayscale() in particular would fight it.

   MONOCHROME IS FOR PEOPLE, COLOUR IS FOR PLACES. The two founder
   portraits (assets/founder-mono-*) are black and white; every
   architectural photograph is colour. That contrast is the point, and
   it only reads as a decision if the rule holds everywhere — one
   monochrome building or one colour portrait and it turns back into an
   inconsistency. There are two founder placements, index.html §04 and
   about.html §03, and there should not be a third without a reason.

   The portraits carry NO class. Their tone is baked into the files, so
   .ph-grade must not reach them: saturate() on an already-grey image
   does nothing, but contrast(1.03) would double the contrast curve the
   files already have. Do not "fix" the missing class. They are also
   warm-toned so their highlights land on --cream rather than on white,
   which is what stops them floating cold beside the terracotta stock.
   Regenerate with docs/mono-founders.py in fracsio-source-assets. */
.ph-grade{filter:saturate(.94) contrast(1.03)}

/* THE FRAME. The guide's polaroid: paper mat, ink keyline, a hard
   offset shadow and a whisper of rotation (guide lines 250-257).
   Scoped to the portrait column plates, which are the tile shape the
   guide draws. The wide letterbox bands and the .strip dividers stay
   flat on purpose — a full-measure band on a tilt fights the page grid, and
   .strip is one of the two sanctioned divider treatments.
   --tilt is set per instance; keep it under ~1.2deg. */
.pl-tile{background:var(--paper);padding:10px;box-shadow:6px 6px 0 var(--ink);
  transform:rotate(var(--tilt,0deg))}
.pl-tile img{border:1px solid var(--line)}
/* below 900px the plates go full measure, where any tilt reads as a
   mistake rather than a gesture — the guide flattens its own at 820px */
@media(max-width:900px){.pl-tile{--tilt:0deg}}


/* ============================================================
   PRICING v4 — one membership, four levels of included work, and a
   single retainer beside the ladder rather than two tiers on it.
   No control on the pricing page changes a price: every figure is
   on screen at all times, which is the "priced before it starts"
   pillar shown rather than said.
   ============================================================ */

/* .zero — the Free tier, demoted off the card spine.
   A hairline entry row rather than another card. Free carries no
   credits, so it is not a rung on a credit ladder. */
.zero{display:flex;gap:26px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;
  border-top:1.5px solid var(--ink);padding:22px 0 24px;margin-bottom:26px}
.zero .zk{flex:1;min-width:260px}
.zero b{font-family:var(--bomb);font-size:13.5px;letter-spacing:.07em;text-transform:uppercase;display:block}
.zero p{margin:8px 0 0;font-size:15px;line-height:1.58;color:var(--body);max-width:60ch}
.zero .zp{font-family:var(--bomb);font-size:28px;line-height:1;white-space:nowrap}
.zero a{font-family:var(--bomb);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red);white-space:nowrap;padding-bottom:2px}
.zero a:hover{color:var(--red)}
/* narrow: the copy takes a full row so $0 and the link share the next one,
   rather than the price floating up beside the last line of the paragraph */
@media(max-width:700px){
  .zero{gap:14px}
  .zero .zk{min-width:100%}
  .zero .zp{font-size:24px}
}

/* .rprev — what carries up from the rung below. Names the inherited
   items rather than claiming "everything". min-height holds the four
   cards level whether the line sets to one or two lines, so a copy edit
   cannot knock the row out of alignment. */
.rprev{font-size:13px;font-weight:600;letter-spacing:.02em;margin:0 0 14px;color:var(--body)}
.pcard.red .rprev{color:var(--cream)}
@media(min-width:981px){.rprev{min-height:2.7em}}

/* .terms — the retainer objection, stated as four facts. Every line is
   true on every plan on the page. Rollover is NOT universal (the Free
   row carries no credits) so it stays on the cards. */
.terms{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:26px}
.terms div{padding:20px 26px 0 0;border-right:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--body)}
.terms div:last-child{border-right:none;padding-right:0}
.terms i{font-family:var(--serif);font-size:1.1em;color:var(--red)}
@media(max-width:820px){
  .terms{grid-template-columns:1fr 1fr}
  .terms div{padding:18px 20px 0 0}
  .terms div:nth-child(2n){border-right:none;padding-right:0}
}
@media(max-width:520px){.terms{grid-template-columns:1fr}.terms div{border-right:none;padding-right:0}}

/* .list3 — the sizer. Not a price toggle: it totals a month against the
   two published rates so the reader can answer "how much is that?"
   before paying anything. */
.list3{border:1.5px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink);padding:30px 32px}
.l3h{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--body);margin:0 0 18px}
.l3b{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.l3b button{font:inherit;font-family:var(--bomb);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:99px;
  padding:11px 20px;cursor:pointer;transition:background .12s,color .12s}
.l3b button b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.25em;color:var(--red);
  text-transform:none;letter-spacing:0;margin-left:8px}
.l3b button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.l3b button[aria-pressed="true"] b{color:#f2c9c0}
.l3out{border-top:1.5px solid var(--ink);padding-top:22px;display:flex;gap:26px;align-items:baseline;flex-wrap:wrap}
.l3n{font-family:var(--bomb);font-size:38px;line-height:1;white-space:nowrap}
.l3n span{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.01em}
.l3t{flex:1;min-width:250px;font-size:15px;line-height:1.6;color:var(--body);margin:0}
.l3t b{color:var(--ink)}
.l3t i{font-family:var(--serif);font-size:1.08em;color:var(--red)}
.l3r{background:none;border:none;font:inherit;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;padding:10px 0 0;text-decoration:underline}
.l3r:hover{color:var(--red)}
@media(max-width:700px){.list3{padding:24px 22px}.l3n{font-size:32px}}

/* five plan columns: the four credit rungs plus the retainer, each with
   its own figure to carry. Stays inside .cmpwrap. */
.cmp.cmp5{min-width:880px}
/* the lede reads better on two lines than three at this measure */
#plans .lede{max-width:28ch}


/* ============================================================
   TYPE AND SPACE SCALE — added after a full measurement pass.
   Diagnosis and evidence: fracsio-source-assets/docs/type-and-space-audit.md
   Harness: fracsio-source-assets/audit/ (re-runnable).

   WHY THIS BLOCK IS APPENDED rather than edited in above. Three agents were
   writing this file when the pass ran, and appending is the one shape of
   change that cannot clobber another. It also keeps the whole system legible
   in one place. Later-in-file wins at equal specificity, which is what makes
   it work — and it is why the narrow-viewport overrides are RE-DECLARED at
   the foot of this block. A media query adds no specificity, so a plain rule
   down here would otherwise beat an @media rule further up and take the
   mobile sizes with it.

   THE MEASURED PROBLEM. 67 distinct rendered font-sizes at 1440px, 60 at
   390px, including 27 between 7.25px and 18.7px — the band where all the
   reading happens. Adjacent steps differed by 0.2-0.5px, which is invisible
   as hierarchy and visible as sloppiness. Nothing here is a new size: every
   value below is one of the sizes already in use, chosen as the survivor of
   a cluster.

   SUBTEXT: THE PROBLEM WAS SIZE, NOT COLOUR. Every element carrying --muted
   was measured on its real ground and passes — 5.06:1 on cream, 5.61:1 on
   paper, 4.66:1 on --cream-2. The token is correct and stays. What was wrong
   is that the smallest text on the site rendered at 8.84px, and none of the
   sub-10px sizes had been chosen: they were arithmetic. <small> defaults to
   0.8333em, so `.cmp thead th small` came out at 9.58px; `/mo` on the landing
   pages was 0.34em of a clamp()ed display price, so it collapsed to 8.84px at
   390px. A label sized as a fraction of its container has no size of its own.
   RULE: micro-labels are sized in absolute px from this scale, never in em.
   ============================================================ */

:root{
  /* ---- type scale. Seven steps, replacing ~40 discrete values. ----
     Roles are exclusive: a step is not a free choice, it is the answer to
     "what kind of text is this". */
  --fs-micro:12.5px;   /* tracked uppercase meta-labels + button labels.
                          FLOOR for the whole site. Scanned, not read, which
                          is what lets it be the smallest thing here.
                          was: 8.84 9.58 10.5 11 11.5 12 12.24 12.5 13 */
  --fs-fine:14px;      /* small SENTENCES: row sub-labels, notes, fine print,
                          captions. Read, so it starts higher than a label.
                          was: 13 13.5 13.8 14 14.5 */
  --fs-small:15.5px;   /* dense reading inside a bordered component — table
                          cells, card lists, terms — and component row
                          headings, which outrank their 14px sub-labels by
                          face and case rather than by size.
                          was: 15 15.12 15.4 15.5 16 16.2 16.5 */
  --fs-base:17px;      /* running prose in an open column; card and block
                          headings. was: 16.5 17 17.82 18 */
  --fs-lead:19.5px;    /* deks and section intros. was: 19 20 20.52 21 22 */
  --fs-figure:26px;    /* row figures, section heads, .next titles, the $0
                          row price. was: 24 25 26 27 28 29 */
  --fs-display:36px;   /* card names, credit counts, block headings.
                          was: 34 36 38 */
  /* larger than --fs-display is clamp()ed display type — h1, .lede, .pull,
     .ctaband h2, .giant, .pprice. Those already had real intervals and are
     left alone. */

  /* --fs-small and --fs-base are only 1.5px apart on purpose. They are
     separated by CONTEXT, not rank: --fs-small is text inside a bordered
     component, --fs-base is prose in an open column. They are never
     adjacent, so they never have to be told apart. */

  /* ---- the two italic corrections ----
     Instrument Serif italic sets optically smaller than Archivo at the same
     px, so an inline lift is right. It was applied as 1em, 1.08, 1.1, 1.12,
     1.14, 1.2, 1.24 and 1.25 in different places, which is where a dozen of
     the 67 sizes came from. Two values, by role. */
  --ital-up:1.12;      /* inline serif italic accent inside running text */
  --ital-display:1.24; /* the tomato italic word in a section head, where the
                          size jump is a deliberate gesture */

  /* ---- spacing scale, 8px based ----
     26 distinct vertical values were in use with no common factor; 22, 26,
     34, 46, 52 and 74 were one-offs. Every one lands within 2px of a step. */
  --s1:8px; --s2:12px; --s3:16px; --s4:24px;
  --s5:32px; --s6:48px; --s7:64px; --s8:88px;

  /* ---- the second rhythm ----
     --gap was the ONLY break in the system, so every seam on every page
     measured the same 132px: the gap between two halves of one argument and
     the gap between two unrelated sections were identical. A page whose every
     seam is the same size reads as a stack of unrelated slabs, because there
     is no way to see which blocks belong together. That is a hierarchy
     problem, not a quantity problem, and adding padding makes it worse.
     --gap stays for breaks BETWEEN sections. --gap-tight is for breaks
     INSIDE one. */
  --gap-tight:clamp(44px,5.5vw,76px);
}

/* ---------- micro-labels: the floor ----------
   Everything here is tracked uppercase, weight >=600, short. Nothing on the
   site renders below this except .tm, the superscript trademark glyph, which
   is a mark rather than subtext and is excluded by rule — see the trademark
   block above. Do not add a member to this list that is a sentence. */
.eyebrow,.tryn,.shead .rt,.ptag,.pper,.alwh,.exec .eo span,.l3h,.l3b button,
.l3r,.label,.cap,.stat span,.door .more,.fnrow .r small,.rrow .rv small,
.pullwrap cite,.next a span,.fcol h5,.tlr .d,.zero a,.cmp thead th,
.go,.tryb button,.exec a,.tang a,.ctaband a,.si,.skip,.nl,.fbar,footer{
  font-size:var(--fs-micro)}
/* button labels join the floor rather than sitting 0.5px above it: a pill,
   an ink keyline, .1em of tracking and Cherry Bomb already carry the
   prominence, and 12.5px vs 13px was carrying none of it. */

/* ---------- fine: small text that is a SENTENCE ----------
   This is what the founder was calling subtext. These are the row sub-labels
   and notes that explain the thing above them, and they were at 10.5-13px.
   They are read, so they start at 14. */
.sz .l small,.fnrow .l small,.rrow .rk small,.fcol .fnote,.fcol li.sub,
.fcol li,.note,.fnnote,.next a small,.stat small,.terms div,.rprev,
.alwmore,.alwn span,.l3n span,.pprice span,.cap i,.exec .eo b,
.cmp thead th small{
  font-size:var(--fs-fine)}
/* .cmp thead th small was the worst offender on the site at 9.58px, and it
   was never declared: <small> is 0.8333em by UA default, so it just took a
   fraction of the 11.5px head above it. Sized absolutely now, so it cannot
   drift again when the head changes. This is the general rule — a micro-label
   is never sized in em. */

/* ---------- small: dense reading, and component row headings ---------- */
.feat li,.step p,.tlr .t,.io li,.faq .a,.cmp th,.cmp td,.cmp tbody th,
.zero p,.l3t,.exec p,.tang p,.door p,.alwsay,.howcopy p,
.numlist p,.rrow .rk,.io h4,.prose h3,.numlist b,.sz .l b,.fnrow .l b,
.rrow .rk b,.zero b{
  font-size:var(--fs-small)}
/* row headings are 15.5 uppercase Cherry Bomb over 14px sentence-case sans.
   Same band, but the face and the case do the ranking. Before this they were
   13.5px over sub-labels that are now 14 — the hierarchy was inverted. */

/* ---------- base: prose, card/block headings, and form fields ---------- */
.prose p,.faq summary,.step h3,.door h3,.ftag,.tryb input{font-size:var(--fs-base)}
/* Text inputs sit at --fs-base rather than the 16/16.5px they were, which
   also clears the 16px floor below which iOS zooms the viewport on focus —
   the constraint fracit.css records. One value satisfies both. */
.tryr{font-size:var(--fs-small)}

/* ---------- lead ---------- */
.hero .dek,.phero .dek,.shead .no,.step .n,.door .n,.numlist li::before,
.flogo,.logo{font-size:var(--fs-lead)}

/* ---------- figures and headings ---------- */
.shead h2,.rrow .rv,.fnrow .r,.next a b,.zero .zp{font-size:var(--fs-figure)}
.tang h3,.exec h3,.sz .r,.alwn,.pname,.l3n{font-size:var(--fs-display)}

/* ---------- the italic accent takes the NEXT STEP UP the scale ----------
   Instrument Serif italic sets optically smaller than Archivo at the same px,
   so an inline lift is right. It had been applied as a multiplier — 1em, 1.08,
   1.1, 1.12, 1.14, 1.2, 1.24 and 1.25 in different places — and a multiplier
   is the wrong instrument: every one produces a size that is on no scale, and
   between them they generated a dozen of the 67 rendered sizes. Stepping to
   the next rung instead gives a lift of 1.10-1.15, right in the range those
   multipliers were reaching for, and adds NO new size to the site.
   From --fs-micro the step is to --fs-fine, and so on up. */
.shead .rt em,.l3b button b{font-size:var(--fs-fine)}      /* 12.5 -> 14   */
.marq em,.terms i,.alwmore i,.fnnote i{font-size:var(--fs-small)}  /* 14 -> 15.5 */
.feat li i,.step p i,.tlr .t i,.io li i,.faq .a i,.door p i,.l3t i,
.numlist p i,.howcopy p i,.zero p i,.exec p i,.tang p i,
.alwsay i,.cmp td i{font-size:var(--fs-base)}              /* 15.5 -> 17   */
.prose p i{font-size:var(--fs-lead)}                       /* 17 -> 19.5   */
/* At --fs-lead and above the serif is already large enough that the optical
   correction is doing nothing but wobbling the baseline mid-sentence — the
   deks were setting a tomato clause at 21.28px inside a 19px line. The face
   and the colour carry the change of voice on their own from here up.
   .lede i already did exactly this at 1em. */
.hero .dek i,.phero .dek i{font-size:1em}
/* The one display accent that keeps a real size jump: the tomato italic word
   in a section head is a house device (see the header of this file) and is
   meant to outrun the Cherry Bomb caps beside it. Declared, not multiplied. */
.shead h2 i{font-size:32px}

/* ---------- line-height: display type was set at body leading ----------
   body declares 17px/1.6, so every heading that omitted line-height
   inherited 1.6. A 36px serif line with 58px of leading looks like a
   paragraph that lost its paragraph, and .tang h3 was measured setting on
   three lines at 390px. Display gets 1.06-1.18; body keeps 1.6; small
   sentences keep 1.55. */
.tang h3,.exec h3{line-height:1.12}
.shead h2{line-height:1.15}
.rrow .rv,.fnrow .r,.next a b,.zero .zp{line-height:1.15}
.sz .r,.alwn,.pname,.l3n{line-height:1.05}
.faq summary,.step h3,.door h3,.io h4,.prose h3{line-height:1.3}
/* .pprice belongs to this defect and was missed on the first pass: 46px at the
   inherited 1.6 measured a 73.6px line box, so every plan card carried ~27px of
   dead air under its price. It is the largest figure on the two pages that sell,
   which is why it is worth naming separately. The circle marker on .pcard.red
   sizes off this box, so it tightens with it. */
.pprice{line-height:1.1}

/* ---------- measure: ch flatters itself by ~18% ----------
   ch is the width of "0", which in Archivo is wider than the average
   lowercase letter, so a 70ch cap delivered 82 measured characters. Every ch
   cap in this file was therefore looser than it read. Corrected against
   measured chars-per-line, not against the unit. */
.faq .a{max-width:62ch}
.fnnote{max-width:62ch}
.note{max-width:52ch}

/* ---------- spacing: the one-off values onto the scale ---------- */
.shead{padding-bottom:var(--s3);margin-bottom:var(--s6)}
.zero{padding:var(--s4) 0;margin-bottom:var(--s4)}
/* The price cards used to hand off to an add-on row that carried its own
   top margin; .terms now follows the cards directly and needs that gap. */
.terms{margin-top:var(--s6)}
.exec{margin-top:var(--s6)}
.ruled{margin-top:var(--s5)}
.doors{margin-top:var(--s6)}

/* ---------- small tomato text that is not decoration ----------
   Distinct from the bright-tomato-for-display rule and from the tomato
   italics in body copy, both of which are settled and untouched here. These
   are links, labels and current-page navigation: load-bearing, non-italic,
   and under the large-text bar, measured at 3.69:1 on cream and 4.09:1 on
   paper. --red-dark measures 4.86:1 on cream and 5.31:1 on paper.
   This is not a new pattern — .exec a and .ctaband a already use --red-dark
   as a text colour on a cream ground, with the same documented 4.86:1. */
.door .more,.label.red,.ptag,.tlr .d,.step .n{color:var(--red-dark)}
.nl a[aria-current],.nl a.on{border-color:var(--red-dark);color:var(--red-dark)}
/* .tlink replaces six copies of the same inline style string that were
   scattered across index, doors, pricing, credits and talk. One place to
   set it means one place to measure it. */
.tlink{color:var(--red-dark);font-weight:600;text-decoration:none;
  border-bottom:2px solid var(--red-dark);padding-bottom:1px}
.tlink:hover{color:var(--ink);border-color:var(--ink)}
.faq .a a,.step p a{color:var(--red-dark);font-weight:600}

/* ---------- narrow-viewport sizes, re-declared ----------
   These exist further up inside @media blocks. Media queries add no
   specificity, so the plain rules above would otherwise win at every width
   and flatten the responsive scale. Re-stated here, after them, on the
   scale. */
@media(max-width:860px){
  .si,.nl{font-size:var(--fs-micro)}
}
@media(max-width:700px){
  .shead h2{font-size:var(--fs-lead);line-height:1.35}
  .shead h2 i{font-size:var(--fs-figure)}
  .shead .no{font-size:var(--fs-base)}
  .shead{margin-bottom:var(--s5)}
  .zero .zp{font-size:var(--fs-figure)}
  .l3n{font-size:calc(var(--fs-display) - 4px)}
}
@media(max-width:640px){
  .door h3{font-size:var(--fs-base)}
}

/* ---------- specificity catch-ups ----------
   These were written above with a single class and lost to a
   higher-specificity original further up the file. Restated at the
   specificity that actually wins, rather than reaching for !important. */
.fcol .flogo{font-size:var(--fs-lead)}
.fcol .flogo i{font-size:1em}
.ctaband p{font-size:var(--fs-base)}


/* ============================================================
   DIAGRAMS — .dgm
   Added against "the site doesnt feel finished yet it needs more images
   elements or diagrams to explain".

   ONE IDEA, USED THREE TIMES: a credit is a unit of width. The four sizes
   drawn to scale (credits), a month being spent (index), and the loop that
   refills it (how-it-works). Three diagrams that share a language read as a
   system; three that do not read as three decorations.

   WHY NOT SVG FOR THE STRUCTURE. Inline SVG was the obvious choice and is
   wrong for anything carrying a label: text inside a viewBox scales with the
   box, so a 15.5px label in a 720-unit-wide diagram renders at about 7.4px on
   a 390px screen. That would have re-created, inside brand-new components,
   exactly the sub-floor text this pass just removed — and it would have been
   invisible at 1440px. So the structure is HTML and CSS, which reflows and
   keeps every label at a real px size from the scale, and SVG is used only
   for pure geometry with no text in it (the return arrowhead), at a fixed
   pixel size so its stroke cannot distort.

   The bars are aria-hidden. Every number and name they encode is already in
   adjacent text — that is the point of putting them beside the ruled rows
   rather than instead of them — so announcing the cells twice would be worse
   than silence. Nothing here is the sole carrier of any fact.

   Palette: ink keylines, tomato fill, cream and paper grounds. No pine, and
   no marker PNG, so the one-marker-per-viewport ceiling is untouched.
   ============================================================ */

.dgm{margin:0;border:1.5px solid var(--ink);background:var(--paper);
  box-shadow:6px 6px 0 var(--ink);padding:var(--s5) var(--s5) var(--s4)}
.dgm-h{display:flex;flex-wrap:wrap;gap:4px var(--s3);align-items:baseline;
  font-family:var(--bomb);font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin:0 0 var(--s4);
  padding-bottom:var(--s2);border-bottom:1.5px solid var(--ink)}
.dgm-h span{font-family:var(--sans);font-weight:600;letter-spacing:.08em;
  color:var(--muted);margin-left:auto}
@media(max-width:620px){
  .dgm{padding:var(--s4) var(--s4) var(--s3)}
  .dgm-h span{margin-left:0;flex:0 0 100%}
}

/* ---- the cell: one credit ---- */
.dgm-bar{display:flex;gap:2px;align-items:center;flex-wrap:nowrap}
.dgm-bar i{display:block;width:var(--u,22px);height:24px;background:var(--red);
  border:1px solid var(--ink)}
/* off the scale entirely: an open, dashed run that does not resolve */
.dgm-bar--open i{background:transparent;border-style:dashed;border-color:var(--muted)}
:root{--u:clamp(9px,1.4vw,22px)}

/* ---- (1) the four sizes, drawn to scale ---- */
.dgm-scale{list-style:none;margin:0;padding:0}
.dgm-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  column-gap:var(--s4);row-gap:5px;align-items:center;
  padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.dgm-row:last-child{border-bottom:none;padding-bottom:0}
.dgm-name{grid-column:1;grid-row:1;font-family:var(--bomb);
  font-size:var(--fs-small);letter-spacing:.05em;text-transform:uppercase}
.dgm-eg{grid-column:1;grid-row:2;font-size:var(--fs-fine);color:var(--muted);
  line-height:1.5;max-width:46ch}
.dgm-bar{grid-column:2;grid-row:1/span 2}
.dgm-n{grid-column:3;grid-row:1/span 2;font-family:var(--serif);
  font-size:var(--fs-figure);line-height:1.15;color:var(--red);
  min-width:2.1ch;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:620px){
  .dgm-row{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s2)}
  .dgm-name{grid-column:1;grid-row:1}
  .dgm-n{grid-column:2;grid-row:1;align-self:baseline}
  .dgm-bar{grid-column:1/-1;grid-row:2}
  .dgm-eg{grid-column:1/-1;grid-row:3;max-width:none}
}

/* ---- (2) a month being spent: sixteen equal cells across the measure ----
   These cells flex instead of taking --u, so the row always fills the column
   exactly and the four groups stay honestly proportional to each other at
   every width. */
.dgm-stack{display:flex;gap:6px;align-items:stretch}
.dgm-grp{display:flex;gap:2px;flex:var(--n) 1 0;min-width:0}
.dgm-grp i{flex:1 1 0;width:auto;height:30px;background:var(--red);
  border:1px solid var(--ink);min-width:0}
.dgm-grp--roll i{background:transparent;border-style:dashed}
.dgm-key{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s2) var(--s4)}
.dgm-key li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;
  align-items:baseline;font-size:var(--fs-fine);line-height:1.45;color:var(--body);
  padding-top:var(--s2);border-top:1px solid var(--line)}
.dgm-key b{grid-column:2;font-weight:600;color:var(--ink);font-size:var(--fs-fine)}
.dgm-key em{grid-column:2;grid-row:2;font-style:normal;color:var(--muted);
  font-size:var(--fs-fine)}
.dgm-key .sw{grid-column:1;grid-row:1;width:13px;height:13px;background:var(--red);
  border:1px solid var(--ink);align-self:center}
.dgm-key .sw--roll{background:transparent;border-style:dashed}
.dgm-key .sw--free{background:var(--cream-2);border-style:dotted}
.dgm-key .kn{grid-column:3;grid-row:1;font-family:var(--bomb);
  font-size:var(--fs-fine);color:var(--ink);white-space:nowrap}

/* ---- (3) the loop ---- */
.dgm-track{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,1fr);gap:var(--s3)}
.dgm-track li{position:relative;padding-top:var(--s4)}
/* the rail, and a filled stop on it for each station */
.dgm-track li::before{content:"";position:absolute;left:0;right:calc(-1 * var(--s3));
  top:6px;height:1.5px;background:var(--line)}
.dgm-track li:last-child::before{right:0}
.dgm-track li::after{content:"";position:absolute;left:0;top:0;width:13px;height:13px;
  border-radius:99px;background:var(--red);border:1.5px solid var(--ink)}
.dgm-st{display:block;font-family:var(--bomb);font-size:var(--fs-micro);
  letter-spacing:.08em;text-transform:uppercase;color:var(--red-dark);margin-bottom:5px}
.dgm-sl{display:block;font-size:var(--fs-fine);line-height:1.45;color:var(--ink)}
@media(max-width:760px){
  .dgm-track{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3)}
  .dgm-track li::before{display:none}
}
@media(max-width:420px){.dgm-track{grid-template-columns:1fr}}

/* the return path: a bracket that leaves the last station, drops, and runs
   back to the first. Drawn with borders rather than a stretched SVG path so
   the stroke stays 1.5px at every width. */
.dgm-return{position:relative;margin:var(--s5) 0 0;padding:var(--s5) 0 0;
  font-size:var(--fs-fine);line-height:1.5;color:var(--body);text-align:center}
.dgm-return::before{content:"";position:absolute;left:7px;right:7px;top:0;
  height:var(--s4);border:1.5px solid var(--ink);border-top:none;
  border-radius:0 0 12px 12px}
.dgm-return b{color:var(--ink);font-weight:600}
.dgm-arrow{position:absolute;left:1px;top:calc(var(--s4) - 6px);width:12px;height:12px}
@media(max-width:760px){.dgm-return{text-align:left}}