/* INVEDEX ONE — invedexone.com
   One stylesheet, no framework, no external requests. The product's whole
   pitch is that your data stays where you put it; a marketing site that phoned
   a font CDN on every visit would be arguing against it. The system font stack
   is that decision, not a shortcut. */

:root{
  /* Sampled from the approved artwork rather than guessed — see
     "INVEDEX ONE - Marketing/Baseline Images/invedex-x1-symbol.png". */
  --gold-hi:#FEE389;  --gold:#EEAD38;  --gold-mid:#FCC94E;  --gold-deep:#B2741E;
  --red-hi:#F92E38;   --red:#E01019;   --red-bright:#F70817; --red-deep:#8B0101;

  --ink:#0A0A0B;      /* page      */
  --ink-2:#111113;    /* card      */
  --ink-3:#17171A;    /* field     */
  --line:#26262B;
  --line-2:#33333A;

  --text:#EDE9E2;
  --text-2:#A9A49B;
  --text-3:#8A857C;   /* 5.4:1 on the page, 5.1:1 on a card. #7A756D was 4.33 and failed AA. */

  --head-h:84px;
  --r:12px;
  --wrap:1120px;
  --pad:24px;

  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 50px rgba(0,0,0,.45);
  --glow:0 0 40px rgba(238,173,56,.16);
}

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

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font:16px/1.65 ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%}
a{color:var(--gold); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--pad)}
.narrow{max-width:780px}

/* ---------------------------------------------------------------- type --- */

h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.08}
h1{font-size:clamp(38px,6.4vw,72px); font-weight:900; letter-spacing:-.03em}
h2{font-size:clamp(28px,3.8vw,44px)}
h3{font-size:clamp(19px,1.7vw,22px); letter-spacing:-.01em; line-height:1.25}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold); margin:0 0 18px;
}
.lede{font-size:clamp(17px,1.7vw,20px); line-height:1.6; color:var(--text-2)}

/* The metallic fills. A solid `color` is always set first, so the text stays
   legible anywhere background-clip:text is not honoured. */
.gold-fill{
  color:var(--gold);
  background:linear-gradient(178deg,#FFF1BE 4%,var(--gold-hi) 26%,var(--gold-mid) 46%,var(--gold) 62%,var(--gold-deep) 88%,#E3B85A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.red-fill{
  color:var(--red);
  background:linear-gradient(178deg,#FF8A8A 2%,var(--red-hi) 24%,var(--red-bright) 46%,var(--red) 64%,#C2131A 92%,#D8171F 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .gold-fill,.red-fill{-webkit-text-fill-color:currentColor; background:none}
}

.rule{height:1px; border:0; background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent); margin:0}

/* -------------------------------------------------------------- header --- */

.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,11,.80);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background .2s ease;
}
.site-head.stuck{border-bottom-color:var(--line); background:rgba(10,10,11,.94)}
.site-head .wrap{display:flex; align-items:center; gap:22px; height:var(--head-h)}

/* The header logo is the lockup WITH "INVENTORY INTELLIGENCE" under it, which
   is why the header is taller than a header usually needs to be — the strapline
   is 8.7% of the artwork's height, so every pixel of logo buys less than a
   tenth of a pixel of strapline. At 50px it lands near 4px: present, and read
   as texture rather than as words. Making it genuinely legible would need a
   header around 110px tall. */
.brand{display:flex; align-items:center; text-decoration:none; flex:0 0 auto}
.brand .wordmark{display:block; height:50px; width:auto}
@media (max-width:480px){ .brand .wordmark{height:40px} :root{--head-h:72px} }

.site-nav{margin-left:auto; display:flex; align-items:center; gap:28px}
.site-nav a{
  color:var(--text-2); text-decoration:none; font-size:14.5px; font-weight:600;
  transition:color .15s ease;
}
.site-nav a:hover{color:var(--text)}
.site-nav a.btn{color:#251603}
.nav-toggle{display:none}

@media (max-width:880px){
  .site-nav{
    position:fixed; inset:var(--head-h) 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink-2); border-bottom:1px solid var(--line); padding:0 0 16px;
    transform:translateY(-135%); transition:transform .24s ease; box-shadow:var(--shadow);
  }
  .site-nav.open{transform:none}
  .site-nav a{padding:15px var(--pad); font-size:16px; border-top:1px solid var(--line)}
  .site-nav a.btn{margin:16px var(--pad) 2px; justify-content:center; border-top:0}
  .nav-toggle{
    display:flex; margin-left:auto; align-items:center; justify-content:center;
    width:42px; height:42px; background:none; border:1px solid var(--line-2);
    border-radius:9px; color:var(--text); cursor:pointer; padding:0;
  }
  .nav-toggle span{display:block; width:17px; height:1.5px; background:currentColor; position:relative}
  .nav-toggle span::before,.nav-toggle span::after{
    content:""; position:absolute; left:0; width:17px; height:1.5px; background:currentColor;
  }
  .nav-toggle span::before{top:-5.5px}
  .nav-toggle span::after{top:5.5px}
}

/* -------------------------------------------------------------- button --- */

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px; border-radius:10px;
  font-size:15px; font-weight:750; letter-spacing:.015em;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  font-family:inherit; line-height:1.2;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{transform:translateY(1px)}

.btn-gold{
  background:linear-gradient(176deg,var(--gold-hi),var(--gold-mid) 40%,var(--gold) 64%,var(--gold-deep));
  color:#251603;
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset, 0 10px 26px rgba(238,173,56,.20);
}
.btn-gold:hover{
  color:#251603;
  box-shadow:0 1px 0 rgba(255,255,255,.42) inset, 0 12px 34px rgba(238,173,56,.34);
}
.btn-ghost{border-color:var(--line-2); color:var(--text); background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold)}

/* ---------------------------------------------------------------- hero --- */

.hero{position:relative; padding:clamp(52px,8vw,96px) 0 clamp(56px,8vw,92px); overflow:hidden}

/* The glow only works because the mark above it is genuinely transparent.
   An opaque crop of the artwork — whatever colour its background was matched
   to — blocked this and read as a rectangle sitting on a lighter page. If the
   mark ever goes back to being opaque, this has to go with it. */
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:1000px; height:1000px; left:50%; top:-520px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(238,173,56,.10) 0%, rgba(224,16,25,.055) 34%, transparent 68%);
}
.hero .wrap{position:relative; z-index:1}

/* Centred and stacked, so the name arrives before anything else. */
.hero-inner{display:flex; flex-direction:column; align-items:center; text-align:center}

.hero .hero-mark{
  display:block; width:min(560px,90vw); height:auto; margin:0 auto clamp(28px,3.6vw,42px);
}

.hero h1{margin-bottom:22px}
.hero h1 .l2{display:block}
.hero .lede{max-width:56ch; margin-bottom:30px}

.tagline{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-3); margin:clamp(40px,6vw,68px) 0 0;
}
.tagline b{font-weight:700; color:var(--gold)}
.tagline i{font-style:normal; color:var(--red-hi); font-weight:700}
.tagline span{padding:0 9px; color:var(--line-2)}

.hero-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center}
.hero-note{margin-top:20px; font-size:13.5px; color:var(--text-3)}

.badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 14px 6px 10px; border-radius:999px;
  border:1px solid rgba(238,173,56,.28); background:rgba(238,173,56,.07);
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); margin-bottom:26px;
}
.badge .dot{
  width:7px; height:7px; border-radius:50%; background:var(--red-bright);
  box-shadow:0 0 0 3px rgba(247,8,23,.18);
}

/* ------------------------------------------------------------ sections --- */

section{padding:clamp(62px,8vw,104px) 0; position:relative}
.section-head{max-width:680px; margin-bottom:clamp(34px,4vw,52px)}
.section-head p{margin-top:16px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.tint{background:linear-gradient(180deg,transparent,rgba(255,255,255,.015) 22%,rgba(255,255,255,.015) 78%,transparent)}

/* --------------------------------------------------------- what it kills --- */

.kill-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:940px){ .kill-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .kill-grid{grid-template-columns:1fr} }

.kill{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 22px 24px; position:relative; overflow:hidden;
}
.kill::after{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(247,8,23,.5),transparent);
}
.kill .no{width:46px; height:46px; margin-bottom:18px; display:block}
.kill h3{margin-bottom:9px; font-size:15.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:800}
.kill p{font-size:14.5px; line-height:1.6; color:var(--text-2)}

/* ---------------------------------------------------------------- flow --- */

.flow{counter-reset:step; display:grid; gap:1px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--line)}
.flow-step{
  background:var(--ink-2); padding:30px clamp(22px,3vw,34px);
  display:grid; grid-template-columns:76px 1fr; gap:22px; align-items:start;
}
.flow-step .n{counter-increment:step; font-size:12.5px; font-weight:800; letter-spacing:.12em; color:var(--gold); padding-top:5px}
.flow-step .n::before{content:"STEP " counter(step)}
.flow-step h3{margin-bottom:8px}
.flow-step p{color:var(--text-2); font-size:15px; max-width:68ch}
@media (max-width:640px){ .flow-step{grid-template-columns:1fr; gap:9px; padding:24px 20px} }

/* -------------------------------------------------------------- pillar --- */

.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:900px){ .pillars{grid-template-columns:1fr} }
.pillar{background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:30px 26px}
.pillar h3{margin-bottom:12px}
.pillar p{color:var(--text-2); font-size:15px}
.pillar .ic{width:34px; height:34px; margin-bottom:18px; color:var(--gold); display:block}

/* --------------------------------------------------------------- where --- */

.where{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px}
@media (max-width:760px){ .where{grid-template-columns:1fr} }
.dest{border:1px solid var(--line); border-radius:var(--r); padding:22px 22px 20px; background:var(--ink-2)}
.dest .nm{font-weight:800; font-size:17px; margin-bottom:7px; letter-spacing:-.01em}
.dest p{color:var(--text-2); font-size:14.5px; line-height:1.58}
.where-note{color:var(--text-3); font-size:14.5px; max-width:76ch}

/* ------------------------------------------------------------- pricing --- */

.toggle{display:inline-flex; padding:4px; gap:3px; border:1px solid var(--line-2); border-radius:999px; background:var(--ink-2); margin-bottom:38px}
.toggle button{
  border:0; background:none; color:var(--text-2); cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:700; padding:9px 20px; border-radius:999px;
  transition:background .18s ease, color .18s ease;
}
.toggle button[aria-pressed="true"]{background:linear-gradient(176deg,var(--gold-mid),var(--gold-deep)); color:#251603}
.toggle .save{font-size:11px; font-weight:800; opacity:.85; margin-left:6px}

.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch}
@media (max-width:1000px){ .plans{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .plans{grid-template-columns:1fr} }

.plan{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 24px 26px; position:relative; display:flex; flex-direction:column;
}
.plan.feature{border-color:rgba(238,173,56,.42); box-shadow:var(--glow)}
.plan .tag{
  position:absolute; top:0; right:18px; transform:translateY(-50%);
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; color:#251603;
  background:linear-gradient(176deg,var(--gold-mid),var(--gold-deep));
}
.plan .nm{font-size:13.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:16px}
.plan .amt{display:flex; align-items:baseline; gap:5px; margin-bottom:5px}
.plan .amt .cur{font-size:20px; font-weight:700; color:var(--text-2)}
.plan .amt .num{font-size:44px; font-weight:900; letter-spacing:-.035em; line-height:1}
.plan .amt .per{font-size:14px; color:var(--text-3); font-weight:600}
.plan .yearnote{font-size:13px; color:var(--text-3); min-height:20px; margin-bottom:18px}
.plan .reads{font-size:15px; font-weight:700; padding:12px 0; margin-bottom:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.plan .reads b{color:var(--gold); font-weight:800}
.plan .blurb{font-size:14.5px; color:var(--text-2); line-height:1.6; margin-bottom:22px; flex:1}
.plan .btn{width:100%; justify-content:center}

/* Its own shape, on purpose. A fifth column would squeeze the four that are
   the actual ladder, and would say this is one more of the same thing when the
   whole point is that it is a different kind of thing — no fee, no allowance,
   no year of it to buy. */
.plan-payg{
  margin-top:16px; padding:24px 26px; border:1px solid var(--line-2);
  border-radius:var(--r); background:var(--ink-2);
  display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
}
.plan-payg .nm{
  font-size:13.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px;
}
.payg-lede{font-size:14.5px; color:var(--text-2); line-height:1.6; max-width:64ch}
.payg-r{display:flex; flex-direction:column; align-items:flex-end; gap:7px; text-align:right}
.payg-rate{display:flex; align-items:baseline; gap:3px}
/* The cent sign is part of the FIGURE, not part of the caption after it. The
   four cards above show $25, $65 and so on at this same 44px, so a bare "15"
   in that type reads as fifteen dollars at a glance — on the one card where
   being misread by a factor of a hundred is the whole risk. */
.payg-rate .payg-num{font-size:44px; font-weight:900; letter-spacing:-.035em; line-height:1}
.payg-rate .cent{font-size:29px; font-weight:900; line-height:1; letter-spacing:-.02em}
.payg-rate .per{font-size:14px; color:var(--text-3); font-weight:600; margin-left:6px}
.payg-note{font-size:12.5px; color:var(--text-3); font-weight:600; white-space:nowrap}
.payg-r .btn{margin-top:4px}
@media (max-width:760px){
  .plan-payg{grid-template-columns:1fr; gap:20px}
  .payg-r{align-items:stretch; text-align:left}
  .payg-note{white-space:normal}
  .payg-r .btn{width:100%; justify-content:center}
}

.plan-foot{margin-top:26px; padding:22px 24px; border:1px solid var(--line); border-radius:var(--r); background:var(--ink-2); color:var(--text-2); font-size:14.5px}
.plan-foot b{color:var(--text); font-weight:700}

/* ----------------------------------------------------------------- faq --- */

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative; font-size:17px; font-weight:700; letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .answer{padding:0 40px 24px 0; color:var(--text-2); max-width:76ch}

/* ---------------------------------------------------------------- form --- */

.signup{
  border:1px solid var(--line); border-radius:16px; background:var(--ink-2);
  padding:clamp(26px,4vw,44px); box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.signup::before{
  content:""; position:absolute; inset:0 0 auto; height:2px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi) 30%,var(--red-bright) 66%,var(--red-deep));
}
.field{margin-bottom:18px}
.field label{display:block; font-size:13.5px; font-weight:700; margin-bottom:7px}
.field .hint{font-weight:500; color:var(--text-3); margin-left:6px}
.field input,.field select{
  width:100%; padding:13px 14px; border-radius:9px; font-family:inherit; font-size:15.5px;
  background:var(--ink-3); border:1px solid var(--line-2); color:var(--text);
}
.field input::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus{border-color:var(--gold); outline:none; box-shadow:0 0 0 3px rgba(238,173,56,.14)}
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px, calc(100% - 13px) 22px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.two-up{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:560px){ .two-up{grid-template-columns:1fr} }

.form-foot{display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:24px}
.privacy-line{font-size:13px; color:var(--text-3); max-width:46ch}

.form-msg{margin-top:20px; padding:15px 17px; border-radius:10px; font-size:14.5px; display:none; border:1px solid var(--line-2); background:var(--ink-3)}
.form-msg.show{display:block}
.form-msg.ok{border-color:rgba(238,173,56,.45); background:rgba(238,173,56,.08); color:var(--gold-hi)}
.form-msg.bad{border-color:rgba(247,8,23,.45); background:rgba(247,8,23,.08); color:#FF9A9A}

.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* -------------------------------------------------------------- footer --- */

.site-foot{border-top:1px solid var(--line); padding:52px 0 60px; color:var(--text-3); font-size:14px}
.foot-grid{display:flex; flex-wrap:wrap; gap:34px; align-items:flex-start; justify-content:space-between}
.foot-brand{max-width:360px}
.foot-brand .brand{margin-bottom:14px}
.foot-links{display:flex; gap:54px; flex-wrap:wrap}
.foot-links h4{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2); margin-bottom:14px; font-weight:700}
.foot-links ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.foot-links a{color:var(--text-3); text-decoration:none}
.foot-links a:hover{color:var(--gold)}
.foot-base{margin-top:44px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:13px}

/* ---------------------------------------------------------- legal pages --- */

.legal{padding:clamp(46px,6vw,80px) 0}
.legal h1{font-size:clamp(32px,4.6vw,46px); margin-bottom:14px}
.legal .updated{color:var(--text-3); font-size:14px; margin-bottom:42px}
.legal h2{font-size:22px; margin:44px 0 14px}
.legal h3{font-size:17px; margin:28px 0 10px}
.legal p,.legal li{color:var(--text-2); font-size:15.5px}
.legal ul{padding-left:22px; margin:0 0 1em}
.legal li{margin-bottom:8px}
.legal strong{color:var(--text)}
.legal .back{display:inline-block; margin-bottom:32px; font-size:14px; text-decoration:none}

/* The honeypot. Off screen rather than display:none — a script that checks
   for hidden fields skips the obvious ones, and the point is that it does not
   skip this. */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

/* The footer gets a larger wordmark than the sticky header — it has the room,
   and the footer is where somebody who has read the whole page ends up. */
.foot-brand .brand .wordmark{height:62px}

/* The overage rate, on the same band as the allowance it follows. Quieter than
   the included number, because it is the exception rather than the offer — and
   it is off until the customer switches it on. */
.plan .reads .then{
  display:block; margin-top:5px;
  font-size:12.5px; font-weight:600; letter-spacing:.01em; color:var(--text-3);
}

/* The quiet parenthetical beside a step heading — says what a step costs
   without competing with what the step is. */
.flow-step h3 .q{
  font-size:.62em; font-weight:600; letter-spacing:.04em;
  color:var(--gold); white-space:nowrap; margin-left:.5em;
}

/* WHAT USED TO BE INLINE STYLE ATTRIBUTES, and why they had to move.
   The content-security-policy in _headers is `style-src 'self'`, which blocks
   every style="" attribute — so on the live site each of these was silently
   ignored: the pricing notes lost their spacing, the fine print showed at full
   size and colour, the billing toggle was not centred, and the 404 page lost
   its layout. Seven errors in the browser console on 13 Sep 2026 and nothing
   visible enough to notice. Loosening the policy with 'unsafe-inline' would
   have fixed it by giving up the reason the policy exists; classes fix it and
   keep the policy exactly as tight. Do not add style="" back to any page. */
.center-block{text-align:center}
.gap-top{margin-top:12px}
.fine{color:var(--text-3); font-size:13.5px}
.foot-tagline{color:var(--text-3); font-size:14px}
.noscript-msg{margin:0 0 22px}
.lede.intro{margin-bottom:40px}
.foot-base.flush{margin-top:0; border-top:0; padding-top:0}
.notfound{text-align:center; padding:clamp(40px,10vw,120px) 0}
.notfound-lede{margin:18px auto 32px; max-width:46ch}