/* ============================================================================
   rawdogseo.com - the public marketing site.

   ONE stylesheet for the whole site. No build step, no framework, no JS.
   Every page links this file and adds only its own rules in a <style> block
   under a "page:" comment.

   The :root block below is copied VERBATIM from _org/rawdog-ui.css, the
   product design system. No colour on this site exists outside it.

   The identity device is INVERSION. The site runs white-on-black and flips
   hard to black-on-white for exactly the things that carry authority - the
   one primary action, the price we want taken, the one claim per screen.
   If everything inverts, nothing does.

   Raw means undressed: no rounded corners, no glow, no soft shadow, no
   gradient wash, no ambient animation, no curve anywhere. Hard 1px rules,
   flat planes, monospace wherever a number lives.

   ONE authored motion on the site: the hero slab rotating up into place,
   like a table being turned. It is disabled under prefers-reduced-motion.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   TOKENS - verbatim from _org/rawdog-ui.css. Do not add a colour here.
   ------------------------------------------------------------------------ */
:root{
  --pitch:#050708; --black:#0B0E11; --panel:#141A20; --raise:#1E262E; --lift:#2A343E;
  --rulesoft:#28323B; --rule:#3B4854; --ruleloud:#5C6C7A;

  /* --faint was #66757F, which is 4.24:1 on --pitch and fails WCAG AA for text
     (needs 4.5). It carries the footer section labels and the fine print on
     every page, so it is real body chrome, not decoration. #6E7D88 measures
     4.76:1 there - lifted past the bar with room, not parked on it - and stays
     clearly quieter than --dim so the tonal ramp still reads. */
  --white:#F7FAFC; --silver:#D3DCE3; --grey:#A3B0BB; --dim:#8493A0; --faint:#6E7D88;

  --up:#2FE3FF;      /* cyan    - gained ground */
  --down:#FF4E9A;    /* magenta - lost ground */
  --hold:#9BA9B5;    /* neutral - no change */
  --warn:#FFC145;    /* gold    - at a limit, needs a decision */
  --live:#2BF0B4;    /* mint    - healthy, running */
  --info:#A98BFF;    /* violet  - queued, informational */

  --irid-a:#2FE3FF; --irid-aa:#9FEEFF; --irid-b:#FF3D93; --irid-bb:#FF8CC4;
  --irid-hold:#9BA9B5;

  --inv-bg:#FAFBFC; --inv-fg:#08090A; --inv-mid:#3E4750; --inv-rule:#C3CBD2;

  --blk:'Archivo Black','Impact','Arial Black',sans-serif;
  --sans:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono','Consolas',monospace;

  --rail:238px;
  --pad:28px;
}

/* ---------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------ */
*{box-sizing:border-box}
/* The nav is position:sticky, so an in-page anchor that scrolls its target to
   y=0 lands it UNDERNEATH the nav. That silently breaks the "skip to content"
   link and every footer anchor. Measured nav heights: 62.6px above 760, 89.5px
   at 620, 124.4px at and below 480 (it wraps to three rows), so each tier is
   the measured height plus a little breathing room. */
html{-webkit-text-size-adjust:100%; scroll-padding-top:78px}
body{
  margin:0; background:var(--black); color:var(--white);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* grain is the only texture on the site. No glow, no wash, no gradient ground. */
body::after{
  content:''; position:fixed; inset:0; z-index:99; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
::selection{background:var(--white); color:var(--black)}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--up); outline-offset:2px}
/* on the flipped surface cyan-on-white is unreadable; the focus ring goes to ink */
.inv :focus-visible,.turn :focus-visible,.paper :focus-visible{outline-color:var(--inv-fg)}

.wrap{max-width:1180px; margin:0 auto; padding:0 26px}
.narrow{max-width:900px}

/* skip link - visible only when focused */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--inv-bg); color:var(--inv-fg); font-family:var(--mono);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:12px 18px;
}
.skip:focus{left:0}

/* ---------------------------------------------------------------------------
   TYPE
   ------------------------------------------------------------------------ */
.label{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim); margin:0 0 16px;
  /* these labels are <p>, so the 66ch reading measure below would apply to them.
     A measure counts characters, but .24em of letter-spacing makes each rendered
     character ~1.4x a "ch" wide, so the cap lands mid-phrase and orphans the last
     word. A label is not body copy and takes no measure. */
  max-width:none;
}
h1,h2,h3,h4{margin:0}
.hh{
  font-family:var(--blk); font-size:clamp(22px,3.3vw,38px); line-height:1.05;
  margin:0 0 18px; text-transform:uppercase; letter-spacing:-.015em;
  max-width:24ch; text-wrap:balance;
}
.hh.wide{max-width:32ch}
.h4{font-family:var(--blk); font-size:15px; text-transform:uppercase; letter-spacing:.01em; margin:0 0 9px}
/* margin:0 here removed the gap entirely wherever a lede is followed by another
   paragraph - measured 0px against the 15px every other pair gets. The last one
   in a block is still flush, because p:last-child below zeroes it. */
.lede{font-size:19px; line-height:1.5; color:var(--silver); max-width:56ch; margin:0 0 15px}
p{margin:0 0 15px; max-width:66ch}
p.txt{color:var(--grey)}
p:last-child{margin-bottom:0}
strong{font-weight:600; color:var(--white)}
em{font-style:normal; font-family:var(--mono); font-size:.92em; color:var(--silver)}
.mono{font-family:var(--mono)}
.note{font-family:var(--mono); font-size:12px; color:var(--dim); line-height:1.65; max-width:74ch}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* the spectrum is for the DARK surface only. On an inverted block these hues
   fall through WCAG on white - inverted blocks carry meaning with --inv-fg,
   --inv-mid and weight instead. */
.up{color:var(--up)} .down{color:var(--down)} .hold{color:var(--hold)}
.warn{color:var(--warn)} .live{color:var(--live)} .info{color:var(--info)}

/* ---------------------------------------------------------------------------
   SECTIONS
   ------------------------------------------------------------------------ */
.sec{padding:84px 0; border-top:1px solid var(--rulesoft)}
.sec.tight{padding:56px 0}
.sec.first{border-top:0}

/* a full-bleed flipped section - device 3 of 3 */
.inv{background:var(--inv-bg); color:var(--inv-fg); padding:78px 0}
.inv .label{color:var(--inv-mid)}
.inv .hh{color:var(--inv-fg)}
.inv p{color:#2C3238}
.inv .lede{color:#2C3238}
.inv strong{color:var(--inv-fg)}
.inv .note{color:var(--inv-mid)}
.inv hr{border:0; border-top:1px solid var(--inv-rule); margin:0}

/* ---------------------------------------------------------------------------
   NAV - wraps to a second line rather than scrolling sideways at 390px
   ------------------------------------------------------------------------ */
.nav{
  position:sticky; top:0; z-index:50; background:var(--pitch);
  border-bottom:1px solid var(--rule);
}
.nav .wrap{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 26px;
  min-height:62px; padding-top:11px; padding-bottom:11px;
}
.nav .lg{
  font-family:var(--blk); font-size:20px; line-height:1; letter-spacing:-.035em;
  text-decoration:none; text-transform:uppercase;
  display:inline-block; padding:3px 0;   /* 20px + 6px = 26px. NOT 2px: that lands on exactly
                                            24.0px, and a boundary value fails on any fractional
                                            shift in line box height. WCAG 2.5.8 wants 24 minimum. */
  background:linear-gradient(101deg,var(--irid-a) 0%,var(--irid-aa) 13%,var(--white) 29%,
             var(--info) 47%,var(--irid-bb) 63%,var(--irid-b) 81%,var(--info) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.nav .lks{display:flex; align-items:center; flex-wrap:wrap; gap:8px 22px}
.nav .lks a{
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; text-decoration:none; color:var(--grey);
  padding:5px 0; border-bottom:1px solid transparent;
}
.nav .lks a:hover{color:var(--white); border-bottom-color:var(--ruleloud)}
/* device 1 of 3: the page you are on is the inverted slab */
.nav .lks a.on{
  background:var(--inv-bg); color:var(--inv-fg); font-weight:600;
  padding:5px 9px; border-bottom-color:var(--inv-bg);
}
.nav .sp{flex:1}
@media (max-width:760px){
  .nav .sp{display:none}
  .nav .wrap{gap:12px 18px}
  .nav .lks{gap:6px 16px}
}

/* ---------------------------------------------------------------------------
   BUTTONS - marketing scale, larger than the app's
   ------------------------------------------------------------------------ */
.btn{
  display:inline-block; border:1px solid var(--ruleloud); background:transparent;
  color:var(--silver); font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; padding:13px 20px; cursor:pointer;
  line-height:1; text-decoration:none;
}
.btn:hover{border-color:var(--white); color:var(--white)}
/* device 2 of 3: exactly ONE primary action per screen, inverted */
.btn.pri{background:var(--inv-bg); color:var(--inv-fg); border-color:var(--inv-bg); font-weight:600}
.btn.pri:hover{background:var(--white); border-color:var(--white); color:var(--inv-fg)}
/* the same pair, used ON an inverted block where the polarity is reversed */
.btn.ink{background:var(--inv-fg); color:var(--inv-bg); border-color:var(--inv-fg); font-weight:600}
.btn.ink:hover{background:#20262C; border-color:#20262C; color:var(--inv-bg)}
.btn.ghost-ink{border-color:var(--inv-mid); color:var(--inv-fg); background:transparent}
.btn.ghost-ink:hover{border-color:var(--inv-fg); color:var(--inv-fg)}
.btn.sm{padding:9px 14px; font-size:10.5px; letter-spacing:.13em}
.btns{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* a state that is deliberately not a link, because the thing is not open yet */
.notyet{
  display:inline-block; border:1px dashed var(--ruleloud); color:var(--dim);
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; padding:13px 20px; line-height:1;
}
.inv .notyet{border-color:var(--inv-rule); color:var(--inv-mid)}

/* ---------------------------------------------------------------------------
   STRUCTURE - 1px gaps drawn by the background, never a border per cell
   ------------------------------------------------------------------------ */
.row{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cell{background:var(--panel); padding:26px 24px}
.cell p{font-size:14px; color:var(--grey); margin:0}
.cell p + p{margin-top:11px}
.inv .row{background:var(--inv-rule); border-color:var(--inv-rule)}
.inv .cell{background:var(--inv-bg)}
.inv .cell p{color:#2C3238}

.split{display:grid; gap:40px; align-items:start}
.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.s32{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.stack{display:flex; flex-direction:column; gap:22px}

.card{border:1px solid var(--rule); background:var(--panel)}
.card > .hd{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--rule); background:var(--raise);
}
.card > .hd .sp{flex:1}
.card > .bd{padding:20px}
.card > .bd.flush{padding:0}

/* ---------------------------------------------------------------------------
   THE TURN - the one authored motion on the site
   ------------------------------------------------------------------------ */
.turn{
  background:var(--inv-bg); color:var(--inv-fg); padding:34px 0;
  transform-origin:50% 100%;
  animation:flip 900ms cubic-bezier(.16,.9,.24,1) both;
}
@keyframes flip{
  from{ transform:perspective(1400px) rotateX(-92deg); opacity:0 }
  to  { transform:perspective(1400px) rotateX(0deg);   opacity:1 }
}
.turn .big{
  font-family:var(--blk); font-size:clamp(20px,3.2vw,34px); line-height:1.06;
  margin:0; text-transform:uppercase; letter-spacing:-.012em; max-width:24ch;
}
.turn .cap{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--inv-mid); margin:14px 0 0;
  max-width:none;   /* letter-spaced label, not body copy - see .label */
}

/* ---------------------------------------------------------------------------
   HERO WORDMARK
   ------------------------------------------------------------------------ */
.hero{padding:96px 0 0; border-bottom:1px solid var(--rule)}
.hero.small{padding:66px 0 0}
.mark{
  font-family:var(--blk); font-size:clamp(58px,15vw,182px); line-height:.82;
  letter-spacing:-.042em; margin:0 0 6px;
  background:linear-gradient(101deg,var(--irid-a) 0%,var(--irid-aa) 13%,var(--white) 29%,
             var(--info) 47%,var(--irid-bb) 63%,var(--irid-b) 81%,var(--info) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.heroline{
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.3em;
  text-transform:uppercase; color:var(--grey); margin:0 0 40px;
  max-width:none;   /* letter-spaced label, not body copy - see .label */
}
/* page hero for the inner pages - a title, not the giant wordmark */
.ph{padding:64px 0 58px; border-bottom:1px solid var(--rule)}
.ph .t{
  font-family:var(--blk); font-size:clamp(34px,6.4vw,74px); line-height:.94;
  letter-spacing:-.032em; margin:0 0 18px; text-transform:uppercase;
}
.ph .t i{font-family:var(--mono); font-style:normal; font-weight:400; color:var(--grey); letter-spacing:-.01em}

/* ---------------------------------------------------------------------------
   THE CROP - a real app screen, framed. Never a mock-up of a mock-up.
   The markup inside is lifted from _org/product-*.html unchanged, so the
   component rules below are the SAME rules the product renders under.
   ------------------------------------------------------------------------ */
.crop{border:1px solid var(--rule); background:var(--pitch)}
.crop > .cap{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:11px 15px; border-bottom:1px solid var(--rule); background:var(--raise);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim);
}
.crop > .cap .sp{flex:1}
.crop > .cap b{color:var(--silver); font-weight:500}
/* a wide screen scrolls INSIDE its own frame. The page never scrolls sideways. */
.crop > .vw{overflow-x:auto; padding:18px}
.crop > .vw.flush{padding:0}
.crop > .vw > .min{min-width:0}
.crop > .vw > .min.w900{min-width:900px}
.crop .shotnote{
  font-family:var(--mono); font-size:11px; color:var(--dim); line-height:1.6;
  padding:11px 15px; border-top:1px solid var(--rulesoft); margin:0; max-width:none;
}

/* ---------------------------------------------------------------------------
   APP COMPONENTS - copied from _org/rawdog-ui.css so lifted product markup
   renders here exactly as it does in the product.
   ------------------------------------------------------------------------ */
.h1{font-family:var(--blk); font-size:26px; line-height:1.08; margin:0; text-transform:uppercase; letter-spacing:-.015em}
.h2{font-family:var(--blk); font-size:15px; margin:0; text-transform:uppercase; letter-spacing:.005em}
.h3{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); margin:0}
.sub{color:var(--grey); font-size:13.5px; margin:8px 0 0; max-width:74ch}
.pagehead{display:flex; align-items:flex-end; gap:20px; margin:0 0 20px; flex-wrap:wrap}
.pagehead .sp{flex:1}

.stat{background:var(--panel); padding:17px 18px}
.stat .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:0}
.stat .v{font-family:var(--blk); font-size:31px; line-height:1.05; margin:9px 0 0; font-variant-numeric:tabular-nums}
.stat .d{font-family:var(--mono); font-size:11.5px; margin:6px 0 0; color:var(--grey)}
.stat .d.up{color:var(--up)} .stat .d.down{color:var(--down)}
.stat .d.warn{color:var(--warn)} .stat .d.hold{color:var(--hold)}

table.tbl{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px}
.tbl caption{
  caption-side:top; text-align:left; font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim); padding:0 0 10px;
}
.tbl th{
  text-align:left; font-weight:500; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); background:var(--raise); padding:9px 14px; border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.tbl td{padding:10px 14px; border-bottom:1px solid var(--rulesoft); color:var(--silver); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--raise)}
.tbl .r{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tbl .w{color:var(--white)}
.tbl .m{color:var(--grey)}
.inv .tbl td{color:#20262C; border-bottom-color:#E4E8EB}
.inv .tbl th{color:var(--inv-mid); background:#EFF2F4; border-bottom-color:var(--inv-rule)}
.inv .tbl tbody tr:hover td{background:#F2F4F6}

.pill{
  display:inline-block; font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; padding:3px 7px;
  border:1px solid var(--ruleloud); color:var(--grey); line-height:1.35;
}
.pill.live{border-color:var(--live); color:var(--live)}
.pill.warn{border-color:var(--warn); color:var(--warn)}
/* --faint sits on --pitch elsewhere, but a pill sits on --panel, where even the
   lifted --faint is only 4.13:1. --dim measures 5.56:1 there and is still a
   step quieter than the default pill's --grey, so "off" still reads as off. */
.pill.off{border-color:var(--rule); color:var(--dim)}
.pill.info{border-color:var(--info); color:var(--info)}
.pill.down{border-color:var(--down); color:var(--down)}
.pill.solid{background:var(--inv-bg); color:var(--inv-fg); border-color:var(--inv-bg)}
.inv .pill{border-color:var(--inv-mid); color:var(--inv-mid)}
.inv .pill.solid{background:var(--inv-fg); color:var(--inv-bg); border-color:var(--inv-fg)}

.meter{height:4px; background:var(--lift); position:relative; min-width:64px}
.meter i{position:absolute; inset:0 auto 0 0; background:var(--silver); display:block}
.meter i.a{background:var(--up)} .meter i.b{background:var(--down)}
.meter i.w{background:var(--warn)} .meter i.v{background:var(--info)}

.kv{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--rulesoft); font-size:13px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--dim); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.kv .v{color:var(--white); font-family:var(--mono); font-size:12.5px; text-align:right}

/* the raw data slab from the identity build */
.slab{border:1px solid var(--rule); background:var(--panel)}
.slabhead{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:13px 18px; border-bottom:1px solid var(--rule); background:var(--raise);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}

/* ---------------------------------------------------------------------------
   PRICE COMPONENTS
   ------------------------------------------------------------------------ */
.price{font-family:var(--blk); font-size:clamp(30px,4.4vw,46px); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin:0}
.price .per{font-family:var(--mono); font-size:13px; font-weight:400; letter-spacing:.04em; color:var(--grey)}
.inv .price .per{color:var(--inv-mid)}
.priceyr{font-family:var(--mono); font-size:12.5px; color:var(--grey); margin:9px 0 0}
.inv .priceyr{color:var(--inv-mid)}

.tier{background:var(--panel); padding:28px 24px; display:flex; flex-direction:column}
.tier .nm{font-family:var(--blk); font-size:16px; text-transform:uppercase; margin:0 0 3px; line-height:1.2}
.tier .nm i{font-family:var(--mono); font-style:normal; font-weight:400; color:var(--grey); letter-spacing:.05em}
.tier .seats{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:0 0 20px}
.tier .fill{flex:1}
.tier ul{list-style:none; margin:20px 0 0; padding:0}
.tier li{
  font-size:13.5px; color:var(--grey); padding:8px 0 8px 18px; position:relative;
  border-bottom:1px solid var(--rulesoft); line-height:1.5;
}
.tier li:last-child{border-bottom:0}
.tier li::before{content:''; position:absolute; left:0; top:15px; width:8px; height:1px; background:var(--ruleloud)}
.tier li b{color:var(--white); font-weight:500}
.tier .act{margin:22px 0 0}
/* the tier we want taken renders on the flipped surface */
.tier.want{background:var(--inv-bg); color:var(--inv-fg)}
.tier.want .nm{color:var(--inv-fg)}
.tier.want .nm i,.tier.want .seats{color:var(--inv-mid)}
.tier.want li{color:#2C3238; border-bottom-color:var(--inv-rule)}
.tier.want li b{color:var(--inv-fg)}
.tier.want li::before{background:var(--inv-mid)}

/* ---------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------ */
footer{border-top:1px solid var(--rule); background:var(--pitch); padding:44px 0 62px}
footer .cols{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:32px}
footer .lg{
  font-family:var(--blk); font-size:22px; line-height:1; letter-spacing:-.035em; text-transform:uppercase;
  background:linear-gradient(101deg,var(--irid-a) 0%,var(--irid-aa) 13%,var(--white) 29%,
             var(--info) 47%,var(--irid-bb) 63%,var(--irid-b) 81%,var(--info) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  margin:0 0 12px;
}
/* h3, not h4: the last heading before the footer is an h2 on every page, so h4
   skipped a level and broke the document outline for anyone navigating by
   heading. The size is unchanged - the level is semantics, not scale. */
footer h3{font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); margin:0 0 13px}
footer ul{list-style:none; margin:0; padding:0}
/* WCAG 2.5.8 wants a 24x24px minimum target. These were 17.7px tall with no
   padding, and padding on an INLINE element does not grow its hit box, so the
   display change is the load-bearing half of this fix - not the padding.
   The li margin drops by the padding we add, so the visual rhythm is unchanged:
   17.7 + 9 = 26.7px pitch before, 25.7 + 1 = 26.7px after. */
footer li{margin:0 0 1px}
footer a{
  font-size:13.5px; color:var(--grey); text-decoration:none;
  display:inline-block; padding:4px 0;
}
footer a:hover{color:var(--white); text-decoration:underline; text-underline-offset:3px}
footer .fine{
  margin:38px 0 0; padding:20px 0 0; border-top:1px solid var(--rulesoft);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--faint);
  display:flex; flex-wrap:wrap; gap:8px 26px; max-width:none;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE - the page never scrolls sideways at 390px
   ------------------------------------------------------------------------ */
/* Every collapse below uses minmax(0,1fr), never a bare 1fr. A bare 1fr means
   minmax(AUTO,1fr), and that auto floor is the content's min-content width, so
   one unbreakable child drags the track wider than its own container. The
   pricing table did exactly that: min-content 356.8px forced a 358px track
   inside a 340px box at 390px wide. minmax(0,1fr) lets the track shrink and
   hands the overflow to .tscroll, which is what its overflow-x:auto is for. */
@media (max-width:1080px){
  .g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s32{grid-template-columns:minmax(0,1fr)}
  .split{gap:30px}
}
@media (max-width:860px){
  .g3{grid-template-columns:minmax(0,1fr)}
  .s2{grid-template-columns:minmax(0,1fr)}
  footer .cols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px}
}
@media (max-width:760px){
  html{scroll-padding-top:105px}   /* nav wraps to two rows here */
}
@media (max-width:620px){
  html{scroll-padding-top:140px}   /* and to three rows here: measured 124.4px */
  body{font-size:15px}
  .wrap{padding:0 18px}
  .sec{padding:58px 0}
  .inv{padding:56px 0}
  .hero{padding:60px 0 0}
  .ph{padding:46px 0 40px}
  .g2,.g4,.g5{grid-template-columns:minmax(0,1fr)}
  .cell{padding:22px 20px}
  .tier{padding:24px 20px}
  .lede{font-size:17px}
  footer .cols{grid-template-columns:minmax(0,1fr)}
  .btn,.notyet{display:block; text-align:center}
  .btns{display:block}
  .btns > * + *{margin-top:10px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .turn{animation:none !important}
}

@media print{
  body{background:#fff; color:#000}
  body::after{display:none}
  .nav{position:static}
}