:root{
  --ink:#0B0F16;
  --signal:#2B5CE6;
  --bid:#19C37D;
  --print:#E5484D;
  --band:#C7CCD6;
  --paper:#FAFAF8;

  /* Ink, lifted in steps. A single hue family keeps the page calm. */
  --bg:#080B11;
  --bg-2:#0D1219;
  --surface:#111823;
  --surface-2:#161F2C;
  --line:#1E2836;
  --line-2:#2A3648;

  --text:#EDF0F5;
  --muted:#9AA6B8;
  --dim:#6B7789;

  --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:clamp(1.25rem,4vw,2.5rem);
  --max:78rem;
  --r:16px;
}

*,*::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:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  font-feature-settings:"ss01","cv01";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── the mark ── */
.lockup{display:inline-flex;align-items:center;gap:.7rem;color:var(--band)}
.mark{display:block;flex:0 0 auto;overflow:visible}
.wordmark{display:flex;flex-direction:column;line-height:1;letter-spacing:.01em}
.wordmark b{font-size:.98rem;font-weight:700;color:var(--text);letter-spacing:.04em}
.wordmark span{font-family:var(--mono);font-size:.62rem;color:var(--muted);
  letter-spacing:.24em;margin-top:.22rem}

/* ── skip link ── */
.skip{position:absolute;left:var(--gutter);top:-4rem;z-index:100;background:var(--signal);
  color:#fff;padding:.7rem 1.1rem;border-radius:10px;font-weight:600;font-size:.9rem;
  text-decoration:none;transition:top .18s ease}
.skip:focus{top:1rem}

/* ── header ── */
header.top{position:sticky;top:0;z-index:50;background:rgba(8,11,17,.72);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,background .2s ease}
header.top.stuck{border-bottom-color:var(--line);background:rgba(8,11,17,.9)}
header.top .wrap{display:flex;align-items:center;gap:1.25rem;padding-block:.9rem}
.home{text-decoration:none;flex:0 0 auto;border-radius:8px}
nav.main{display:none;margin-left:auto;gap:.25rem}
nav.main a{text-decoration:none;color:var(--muted);font-size:.9rem;font-weight:500;
  padding:.5rem .8rem;border-radius:9px;transition:color .15s ease,background .15s ease}
nav.main a:hover{color:var(--text);background:var(--surface)}
.top-cta{margin-left:auto}
nav.main ~ .top-cta{margin-left:.5rem}
@media (min-width:62rem){nav.main{display:flex}}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:.55rem;font:inherit;font-size:.92rem;
  font-weight:600;text-decoration:none;padding:.72rem 1.25rem;border-radius:11px;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--signal);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 10px 26px -12px rgba(43,92,230,.9)}
.btn-primary:hover{background:#3A68EE;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,
  0 14px 32px -12px rgba(43,92,230,1)}
.btn-ghost{background:var(--surface);border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:#3C4A60;background:var(--surface-2)}
.btn-quiet{background:transparent;border-color:var(--line-2);color:var(--muted);
  font-size:.85rem;padding:.55rem 1rem}
.btn-quiet:hover{color:var(--text);border-color:#3C4A60}
.btn .ext{width:13px;height:13px;flex:0 0 auto;opacity:.75}

/* ── sections ── */
section{padding-block:clamp(4.5rem,9vw,8rem);position:relative}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);margin:0 0 1rem}
h1,h2,h3{margin:0;letter-spacing:-.025em;font-weight:600;line-height:1.08}
h1{font-size:clamp(2.6rem,7.2vw,4.7rem);letter-spacing:-.04em;font-weight:700}
h2{font-size:clamp(1.9rem,4.2vw,2.9rem)}
h3{font-size:1.06rem;letter-spacing:-.01em;line-height:1.35}
.lede{color:var(--muted);font-size:clamp(1rem,1.6vw,1.13rem);max-width:60ch;margin:1.1rem 0 0}
.sec-head{max-width:64ch;margin-bottom:clamp(2.5rem,5vw,3.75rem)}

/* ── hero ── */
.hero{padding-top:clamp(3.5rem,8vw,6.5rem);padding-bottom:clamp(4rem,8vw,7rem);
  position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -10% auto;height:70rem;pointer-events:none;
  background:radial-gradient(60% 42% at 50% 22%,rgba(43,92,230,.18),transparent 70%);}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(58% 48% at 50% 34%,#000,transparent 72%);
  mask-image:radial-gradient(58% 48% at 50% 34%,#000,transparent 72%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media (min-width:64rem){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero-copy{min-width:0}
.hero-spec{position:relative;min-width:0}
.hero h1{white-space:pre-line;max-width:16ch}
.hero .lede{font-size:clamp(1.02rem,1.75vw,1.22rem);max-width:56ch;margin-top:1.5rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.hero-note{display:flex;align-items:center;gap:.5rem;margin:1.1rem 0 0;
  font-family:var(--mono);font-size:.73rem;letter-spacing:.06em;color:var(--dim)}

/* ── the animated mark ──
   The identity's own animation, from assets/animated/ in the logo kit: the
   feed lines pulse in a staggered wave, a brighter packet travels the line,
   and the node blinks once near the end of each loop.

   The stagger lives here rather than in style attributes on each line, because
   this page's CSP forbids inline styles — and because eight nth-child rules
   are easier to retime than eight attributes.

   The delays are the kit's own, as fractions of the loop. Note the gap between
   the fourth and fifth: on the mark those two lines sit either side of the
   price line, so the wave reads as passing behind it. */
.mark-ambient{--mark-dur:10s}
.mark-active{--mark-dur:3.6s}

.mark-anim .mark-bands line{animation:bandPulse var(--mark-dur) ease-in-out infinite}
.mark-anim .mark-bands line:nth-child(1){animation-delay:0s}
.mark-anim .mark-bands line:nth-child(2){animation-delay:calc(var(--mark-dur) * -.09)}
.mark-anim .mark-bands line:nth-child(3){animation-delay:calc(var(--mark-dur) * -.18)}
.mark-anim .mark-bands line:nth-child(4){animation-delay:calc(var(--mark-dur) * -.27)}
.mark-anim .mark-bands line:nth-child(5){animation-delay:calc(var(--mark-dur) * -.45)}
.mark-anim .mark-bands line:nth-child(6){animation-delay:calc(var(--mark-dur) * -.54)}
.mark-anim .mark-bands line:nth-child(7){animation-delay:calc(var(--mark-dur) * -.63)}
.mark-anim .mark-bands line:nth-child(8){animation-delay:calc(var(--mark-dur) * -.72)}

.mark-anim .mark-packet{opacity:.5;animation:markPacket var(--mark-dur) linear infinite}
.mark-anim .mark-node{animation:markNode var(--mark-dur) linear infinite}

@keyframes bandPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes markPacket{to{stroke-dashoffset:-100}}
/* The kit blinks its node down to .35. Its node is cobalt on the Network mark;
   ours is the red last print, and red at .35 against this ink reads as a muddy
   maroon square rather than as a node pulsing. Floor raised so it is always
   plainly the node, with the same peak. */
@keyframes markNode{0%,78%,100%{opacity:.6}86%{opacity:1}}

/* Motion off means the logo is a logo: bands at full strength, no travelling
   packet, node solid. Not a paused animation mid-cycle, which would leave the
   bands at whatever opacity they happened to be on. */
@media (prefers-reduced-motion:reduce){
  .mark-anim .mark-bands line,.mark-anim .mark-node{animation:none;opacity:1}
  .mark-anim .mark-packet{display:none}
}

/* The showcase mark, at the top of the hero.
   It sat above the footer until Billy moved it. Left-aligned with the copy
   rather than centred, because everything else in this column is. */
.hero-logo{display:block;margin-bottom:1.75rem;color:var(--band)}
.hero-logo svg{width:min(100%,15rem);height:auto}
@media (prefers-reduced-motion:reduce){
  .draw .mark-line{stroke-dashoffset:0;animation:none}
  .draw .mark-node{opacity:1;animation:none}
}

/* ── reveal on scroll ── */
.rise{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ── phone ──
   Two things that only show up on a real handset. The status strip wraps, and
   a wrapped separator leaves a dangling dot at the end of a line - so on narrow
   screens the chips are spaced rather than punctuated. And a hero button sized
   to its label puts the two CTAs at two different widths, which reads as one
   being the afterthought; at this width they match. */
@media (max-width:34rem){
  .hero-actions{display:grid;grid-template-columns:1fr;gap:.6rem}
  .hero-actions .btn{justify-content:center;width:100%}
}

/* ── how it works ── */
/* A list, semantically, without the marker - the numbers are drawn. */
ol.steps{list-style:none;margin:0;padding:0}
.steps{display:grid;gap:1.25rem}
@media (min-width:54rem){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:78rem){
  .steps{grid-template-columns:repeat(3,1fr)}
  /* Five steps, three columns: the last two share the second row evenly
     rather than leaving a gap where a fourth card would be. */
  .steps > li:nth-child(4){grid-column:1/span 1}
}
.step{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(1.4rem,2.6vw,1.9rem);overflow:hidden;
  transition:border-color .25s ease,transform .25s ease}
.step:hover{border-color:var(--line-2);transform:translateY(-3px)}
.step::after{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);opacity:0;
  transition:opacity .3s ease}
.step:hover::after{opacity:.7}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;
  border-radius:8px;background:rgba(43,92,230,.12);border:1px solid rgba(43,92,230,.28);
  color:var(--signal);font-family:var(--mono);font-size:.85rem;font-weight:500}
.step h3{margin:1.1rem 0 .55rem}
.step p{margin:0;color:var(--muted);font-size:.94rem}
.step .tag{display:inline-block;margin-top:1.1rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line-2);border-radius:999px;padding:.28rem .65rem}

/* ── rules ── */
.rules-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
@media (min-width:48rem){.rules-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:74rem){.rules-grid{grid-template-columns:repeat(4,1fr)}}
.rule{background:var(--surface);padding:clamp(1.35rem,2.4vw,1.7rem);position:relative;
  transition:background .25s ease}
.rule:hover{background:var(--surface-2)}
.rule h3{font-family:var(--mono);font-size:.82rem;font-weight:500;letter-spacing:.04em;
  color:var(--text);text-transform:uppercase}
.rule p{margin:.75rem 0 0;color:var(--muted);font-size:.9rem;line-height:1.58}
.rule.accent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--signal)}



/* ── faq ── */
.faq-sec{padding-bottom:0}
.faq{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:60rem){.faq{grid-template-columns:repeat(2,1fr)}}
details.q{background:var(--bg);padding:0}
details.q summary{cursor:pointer;list-style:none;padding:1.35rem clamp(1.1rem,2.2vw,1.6rem);
  display:flex;gap:1rem;align-items:flex-start;font-weight:600;font-size:1rem;
  transition:background .2s ease}
details.q summary::-webkit-details-marker{display:none}
details.q summary:hover{background:var(--surface)}
details.q summary::after{content:"";flex:0 0 auto;width:10px;height:10px;margin-top:.42rem;
  margin-left:auto;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);
  transform:rotate(45deg);transition:transform .22s ease,border-color .22s ease}
details.q[open] summary::after{transform:rotate(-135deg);border-color:var(--signal)}
details.q .a{padding:0 clamp(1.1rem,2.2vw,1.6rem) 1.5rem;color:var(--muted);font-size:.95rem;
  max-width:62ch}

/* ── footer ── */
footer{background:var(--bg-2);border-top:1px solid var(--line);
  padding-block:clamp(3rem,6vw,4.5rem)}
.foot-top{display:grid;gap:2.5rem}
@media (min-width:56rem){.foot-top{grid-template-columns:1.4fr repeat(3,1fr)}}
.foot-brand p{margin:1.2rem 0 0;color:var(--muted);font-size:.9rem;max-width:34ch}
.foot-col h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);font-weight:500;margin-bottom:1rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot-col a{color:var(--muted);text-decoration:none;font-size:.9rem;
  transition:color .15s ease}
.foot-col a:hover{color:var(--text)}
.foot-col .ph{color:var(--dim);font-size:.66rem;font-family:var(--mono);letter-spacing:.08em;
  margin-left:.4rem}
.foot-rule{height:1px;background:var(--line);margin-block:clamp(2.5rem,5vw,3.5rem)}
.foot-legal{display:grid;gap:1rem;color:var(--dim);font-size:.82rem;line-height:1.6}
.foot-legal .hard{color:var(--muted);font-weight:500}
.foot-bottom{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;
  justify-content:space-between;margin-top:2rem;color:var(--dim);font-size:.8rem}
.foot-bottom .mono{font-family:var(--mono);letter-spacing:.06em}


/* ── the evaluation spec ──
   The one thing on this page a reader can look at and know something concrete.
   Styled as an instrument panel rather than a pricing card: monospaced figures,
   hairline rows, the version worn openly. A pricing card would be the wrong
   promise — there is nothing to buy. */
.spec{background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px -40px rgba(0,0,0,.9)}
.spec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.25rem;border-bottom:1px solid var(--line)}
.spec-kind{margin:0 0 .25rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim)}
.spec-head h3{margin:0;font-size:1.02rem;letter-spacing:-.01em;line-height:1.25}

.spec-rows{margin:0;padding:0}
.spec-row{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:baseline;
  padding:.85rem 1.25rem;border-bottom:1px solid var(--line)}
.spec-row:last-child{border-bottom:0}
.spec-row dt{color:var(--muted);font-size:.93rem}
.spec-val{margin:0;grid-column:2;font-family:var(--mono);font-size:1rem;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.spec-why{grid-column:1/-1;margin:.35rem 0 0;font-size:.86rem;line-height:1.55;color:var(--dim)}
.spec-more{margin:0;padding:.8rem 1.25rem;font-family:var(--mono);font-size:.74rem;
  color:var(--dim);border-top:1px solid var(--line);background:rgba(0,0,0,.18)}

.spec-sec{background:var(--bg-2)}
.spec-sec .sec-lede{color:var(--muted);max-width:52rem;margin:.75rem 0 0;
  font-size:clamp(1rem,1.5vw,1.1rem)}
.spec-grid{display:grid;gap:1.25rem;margin-top:clamp(2rem,4vw,2.75rem)}
@media (min-width:56rem){.spec-grid{grid-template-columns:repeat(2,1fr);align-items:start}}

/* The panel is the hero's only visual now. The large mark used to sit behind
   it and overhung the card's corner, which read as a rendering fault rather
   than as ornament — and a spec panel does not need decorating. */
.hero-spec .spec{position:relative;z-index:1}



/* ── the comparison table ──
   The element this category is built around, and the only place on the page
   where a reader compares two things rather than reads one. So: values
   monospaced and right-aligned so the digits line up down the column, rule
   names carrying their own explanation, and the account size the loudest thing
   in each header.

   It is a real <table> because it is real tabular data — a grid of divs would
   read fine and navigate badly. */
.cmp-scroll{margin-top:clamp(2rem,4vw,2.75rem)}
.cmp{width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--bg-2))}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:1rem 1.15rem;
  border-bottom:1px solid var(--line)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}

.cmp thead th{background:rgba(0,0,0,.25);border-bottom:1px solid var(--line-2);
  padding-block:1.15rem}
.cmp-corner{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:500}
.cmp-size{display:block;font-size:1.3rem;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cmp-name{display:block;font-size:.82rem;font-weight:400;color:var(--muted);margin-top:.15rem}

.cmp tbody th{font-weight:500;width:34%}
.cmp-rule{display:block;color:var(--text);font-size:.97rem}
.cmp-why{display:block;margin-top:.3rem;font-size:.84rem;line-height:1.5;color:var(--dim);
  font-weight:400}
.cmp-val{display:block;font-family:var(--mono);font-size:1.02rem;color:var(--text);
  font-variant-numeric:tabular-nums}
.cmp tbody tr:nth-child(even) th,.cmp tbody tr:nth-child(even) td{background:rgba(0,0,0,.14)}

/* Below the point where three columns stop fitting, each row becomes a small
   block and every value wears the account size it belongs to. A table that
   scrolls sideways on a phone is a table nobody reads. */
@media (max-width:52rem){
  .cmp,.cmp thead,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{display:none}
  .cmp tbody tr{border-bottom:1px solid var(--line-2);padding:.35rem 0}
  .cmp tbody tr:last-child{border-bottom:0}
  /* The 34% rule column is for the three-column layout. Left applying here it
     squeezes the rule name and its explanation into a third of a phone screen,
     which wraps the text one word per line. Specificity means it has to be
     undone explicitly: the .cmp th rule above does not reach it. */
  .cmp tbody th{width:auto;padding-bottom:.5rem;border-bottom:0}
  .cmp tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    flex-wrap:wrap;padding-block:.55rem;border-bottom:0}
  .cmp tbody td::before{content:attr(data-col);font-family:var(--mono);font-size:.74rem;
    letter-spacing:.06em;color:var(--dim);flex:0 0 auto}
  .cmp tbody td .cmp-why{flex:1 0 100%;margin-top:.25rem}
  .cmp tbody tr:nth-child(even) th,.cmp tbody tr:nth-child(even) td{background:transparent}
  .cmp tbody tr:nth-child(even){background:rgba(0,0,0,.14)}
}



/* ── the band under the hero ──
   The category fills this with stats. Ours carries commitments, so it is
   styled to read as a specification strip rather than a scoreboard: no large
   numerals, no colour, equal weight across all four.

   Separated by borders rather than by a 1px grid gap over a coloured
   background. The gap trick showed that background in the wrap's own gutter,
   which put a pale sliver down each side of the band, and it pushed the first
   item out of line with every other section's left edge. */
.band{border-block:1px solid var(--line);background:var(--bg-2)}
.band .wrap{display:grid;grid-template-columns:1fr}
@media (min-width:40rem){.band .wrap{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.band .wrap{grid-template-columns:repeat(4,1fr)}}
.band-item{padding-block:1.15rem}
.band-item + .band-item{border-top:1px solid var(--line)}
@media (min-width:40rem){
  .band-item{padding-left:1.75rem;border-left:1px solid var(--line)}
  .band-item:nth-child(-n+2){border-top:0}
  .band-item:nth-child(odd){padding-left:0;border-left:0}
  .band-item:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (min-width:64rem){
  .band-item{border-top:0;padding-left:1.75rem;border-left:1px solid var(--line)}
  .band-item:first-child{padding-left:0;border-left:0}
  .band-item:nth-child(n+3){border-top:0}
}
.band-k{display:block;font-size:.95rem;color:var(--text);letter-spacing:-.005em}
.band-v{display:block;margin-top:.25rem;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.05em;color:var(--dim)}

/* ── the closing band ──
   Where this category puts its last call to action. We have nothing to ask
   for, so it carries the promise the page is an argument for and one in-page
   link. Centred, generous, and quiet — a full-width panel that shouted would
   be selling something that does not exist. */
.closer{background:
  radial-gradient(90% 120% at 50% 0%,rgba(43,92,230,.14),transparent 62%),var(--bg-2);
  border-top:1px solid var(--line);text-align:center}
.closer .wrap{max-width:52rem}
.closer-line{margin:0;font-size:clamp(1.55rem,3.6vw,2.4rem);line-height:1.15;
  letter-spacing:-.025em;font-weight:600;color:var(--text)}
.closer-sub{margin:1.1rem auto 0;max-width:46rem;color:var(--muted);
  font-size:clamp(.98rem,1.5vw,1.08rem)}
.closer .btn{margin-top:2rem}