/* ═══════════════════════════════════════════════════════════════════
   RAIL — the AffiliateRail marketing system (replaces Volt on the site, 19 Aug 2026)

   Thesis: warm paper, near-black ink, a characterful grotesque at 600,
   generous space, hairlines for structure, one dark band at the end.
   The chartreuse survives from Volt as ONE motif only: a thin line,
   the rail. Under the wordmark, under one phrase in the headline, on
   top of the recommended plan, on the sticky bar. Never a button,
   never a fill, never type.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* surfaces */
  --r-paper:        #F7F6F2;   /* canvas                         */
  --r-paper-deep:   #EFEDE7;   /* alt surface, table stripe      */
  --r-white:        #FFFFFF;   /* cards, figures                 */
  --r-line:         #E6E4DE;   /* hairline                       */
  --r-line-strong:  #D3D0C7;   /* card edge, inputs              */
  /* ink */
  --r-ink:          #15171A;   /* headings, primary text, dark band */
  --r-ink-2:        #3B3F45;   /* body text                      */
  --r-muted:        #6B7075;   /* captions, eyebrows (5.1:1 on paper) */
  --r-ink-hover:    #2A2D31;
  /* the rail */
  --r-rail:         #C2F000;
  /* tints: colour lives in pictures and panels, never in chrome */
  --t-sky:   #E4EEFB;  --h-sky:   #2F6FD6;
  --t-peach: #FCE8DC;  --h-coral: #E8603C;
  --t-mint:  #E2F4E7;  --h-mint:  #1B7F4A;
  --t-lilac: #ECE6F9;  --h-lilac: #6B4FD8;
  /* semantic */
  --r-positive:     #1B7F4A;
  --r-negative:     #B3261E;
  /* type */
  --r-font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --r-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --r-fs-h1:  clamp(32px, 1.5rem + 2.6vw, 58px);
  --r-fs-lg:  clamp(28px, 1.4rem + 2.1vw, 48px);
  --r-fs-md:  clamp(24px, 1.2rem + 1.4vw, 36px);
  --r-fs-h2:  24px;
  --r-fs-h3:  19px;
  --r-fs-h4:  16px;
  --r-fs-lede: 18px;
  --r-fs-body: 16px;
  --r-fs-sm:   14.5px;
  --r-fs-cap:  13px;
  --r-fs-eyebrow: 12.5px;
  /* shape + depth */
  --r-radius-sm: 6px;
  --r-radius:    10px;
  --r-radius-lg: 14px;
  --r-shadow-figure: 0 1px 2px rgba(21,23,26,.05), 0 14px 34px -18px rgba(21,23,26,.22);
  /* space */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-14:56px; --s-16:64px; --s-20:80px; --s-24:96px; --s-30:120px;
  --r-container: 1200px;
  --r-gutter: clamp(20px, 4vw, 40px);
  --r-ease: cubic-bezier(.2,.6,.2,1);
  /* the double tick, as a mask so it takes any colour */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.4 8.6 6.1 12.3 13.6 3.6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── reset-ish ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--r-paper);color:var(--r-ink-2);font-family:var(--r-font-body);font-size:var(--r-fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
img,svg{max-width:100%;display:block}
a{color:var(--r-ink);text-decoration:underline;text-decoration-color:var(--r-line-strong);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .15s var(--r-ease)}
a:hover{text-decoration-color:var(--r-ink)}
:focus-visible{outline:2px solid var(--r-ink);outline-offset:3px;border-radius:2px}
.on-ink :focus-visible{outline-color:var(--r-paper)}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
button{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── type roles (class names kept from the Volt build) ──────── */
.display-xl,.display-lg,.display-md,.h1,.h2,.h3{font-family:var(--r-font-display);font-weight:700;color:var(--r-ink);letter-spacing:-0.015em;text-wrap:balance}
.display-xl{font-size:var(--r-fs-h1);line-height:1.02;letter-spacing:-0.028em;overflow-wrap:anywhere;min-width:0}
.display-lg{font-size:var(--r-fs-lg);line-height:1.06;letter-spacing:-0.022em}
.display-md{font-size:var(--r-fs-md);line-height:1.1;letter-spacing:-0.02em}
.h1{font-size:var(--r-fs-md);line-height:1.14}
.h2{font-size:var(--r-fs-h2);line-height:1.2}
.h3{font-size:var(--r-fs-h3);line-height:1.3}
.h4{font-family:var(--r-font-body);font-weight:600;font-size:var(--r-fs-h4);line-height:1.4;color:var(--r-ink)}
.lede{font-size:var(--r-fs-lede);line-height:1.55;color:var(--r-ink-2);text-wrap:pretty}
.body-sm{font-size:var(--r-fs-sm);line-height:1.55}
.muted{color:var(--r-muted)}
.label{font-family:var(--r-font-body);font-size:var(--r-fs-eyebrow);font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;color:var(--r-muted)}
.mono,.num{font-family:var(--r-font-body);font-variant-numeric:tabular-nums}
.num{font-weight:600;color:var(--r-ink)}
.prose{max-width:64ch}
mark.rail{background:transparent;color:inherit;box-shadow:inset 0 -0.24em 0 var(--r-rail);padding:0 .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* wordmark: "Affiliate" + "Rail" with the rail under the second word */
.wordmark{display:inline-flex;align-items:baseline;font-family:var(--r-font-display);font-weight:700;font-size:20px;letter-spacing:-0.02em;text-decoration:none;color:var(--r-ink);white-space:nowrap;line-height:1}
.wordmark .rail-word{box-shadow:inset 0 -3px 0 var(--r-rail)}
.on-ink .wordmark{color:var(--r-paper)}

/* ── layout ─────────────────────────────────────────────────── */
.wrap{max-width:var(--r-container);margin:0 auto;padding-inline:var(--r-gutter)}
.section{padding-block:clamp(48px,7vw,96px)}
.section-white{background:var(--r-white);border-top:1px solid var(--r-line);border-bottom:1px solid var(--r-line)}
.eyebrow{display:block;margin-bottom:var(--s-4)}
.eyebrow .mono{font-weight:600;color:var(--r-muted);margin-right:4px}
.rule-3,.hair{display:none}

/* ── section intros: centred, one rhythm everywhere ─────────── */
.intro{text-align:center;max-width:720px;margin-inline:auto;padding-top:var(--s-2)}
.intro .label{margin-bottom:var(--s-3)}
.intro .display-lg,.intro .display-md,.intro .display-xl{margin-inline:auto;max-width:20ch}
.intro{max-width:860px}
.intro .lede{margin:var(--s-5) auto 0;max-width:56ch}
.intro .cta-row{justify-content:center}
.intro+.pillars,.intro+.tiles,.intro+.plans,.intro+.faq{margin-top:var(--s-12)}
.faq{margin-inline:auto}
.tint-sky{background:var(--t-sky)!important;border-color:transparent!important}
.tint-peach{background:var(--t-peach)!important;border-color:transparent!important}
.tint-mint{background:var(--t-mint)!important;border-color:transparent!important}
.tint-lilac{background:var(--t-lilac)!important;border-color:transparent!important}

/* ── the double tick, used for every affirmative marker ────── */
.tick-mark{-webkit-mask:var(--tick) no-repeat center/contain;mask:var(--tick) no-repeat center/contain;background-color:currentColor}

/* ── buttons ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-5);border-radius:var(--r-radius-sm);font-weight:600;font-size:15px;line-height:1;text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background .15s var(--r-ease),color .15s var(--r-ease),border-color .15s var(--r-ease),transform .1s var(--r-ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--r-ink);color:var(--r-white);border-color:var(--r-ink)}
.btn-primary:hover{background:var(--r-ink-hover);border-color:var(--r-ink-hover)}
.btn-secondary{background:var(--r-white);color:var(--r-ink);border-color:var(--r-line-strong)}
.btn-secondary:hover{border-color:var(--r-ink)}
.on-ink .btn-primary{background:var(--r-paper);color:var(--r-ink);border-color:var(--r-paper)}
.on-ink .btn-primary:hover{background:var(--r-white);border-color:var(--r-white)}
.on-ink .btn-secondary{background:transparent;color:var(--r-paper);border-color:rgba(247,246,242,.35)}
.on-ink .btn-secondary:hover{border-color:var(--r-paper)}
.btn-lg{min-height:50px;padding-inline:var(--s-6);font-size:16px}
.btn-block{width:100%}

/* ── masthead ───────────────────────────────────────────────── */
.masthead{position:sticky;top:0;z-index:20;background:rgba(247,246,242,.86);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--r-line)}
.masthead .wrap{min-height:64px;display:flex;align-items:center;gap:var(--s-8)}
.masthead nav{display:flex;gap:var(--s-6);margin-left:auto}
.masthead nav a{color:var(--r-ink-2);text-decoration:none;font-size:15px;font-weight:500}
.masthead nav a:hover{color:var(--r-ink)}
.masthead .btn{min-height:38px;padding-inline:var(--s-4);font-size:14px}
@media (max-width:760px){.masthead nav{display:none}.masthead .btn{display:none}.masthead .wrap{min-height:56px}}

/* ── hero ───────────────────────────────────────────────────── */
.hero{padding-block:clamp(40px,7vw,80px) clamp(40px,6vw,64px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,56px);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center}}
@media (min-width:1200px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.hero .label{margin-bottom:var(--s-5)}
.hero .display-xl{max-width:14ch}
@media (max-width:899px){.hero .display-xl,.hero .lede{max-width:22ch}.hero .lede{max-width:46ch}}
.hero .lede{max-width:44ch;margin-top:var(--s-5)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)}
@media (max-width:400px){.cta-row{display:grid;grid-template-columns:1fr}.cta-row .btn{width:100%}}
.hero-meta{margin-top:var(--s-6);color:var(--r-muted);display:grid;gap:var(--s-2);list-style:none;padding:0}
.hero-meta li{position:relative;padding-left:24px;line-height:1.45}
.hero-meta li{padding-left:26px}
.hero-meta li::before{content:'';position:absolute;left:0;top:.24em;width:17px;height:17px;background-color:var(--r-ink);-webkit-mask:var(--tick) no-repeat center/contain;mask:var(--tick) no-repeat center/contain}
.hero-meta .num{color:var(--r-ink)}
.dot{display:none}

/* ── figures: image cards, placeholders until the art lands ─── */
.ph{position:relative;background:var(--r-white);border:1px solid var(--r-line);border-radius:var(--r-radius);aspect-ratio:16/10;display:flex;align-items:flex-end;padding:var(--s-4);box-shadow:var(--r-shadow-figure);overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph figcaption{color:var(--r-muted);font-size:var(--r-fs-cap);font-weight:500;letter-spacing:0;text-transform:none;position:relative}
.ph.has-img figcaption{display:none}
.ph.has-img figcaption.ui-cap{display:block}
.ph.is-tall{aspect-ratio:5/4}
.ph.is-ui{aspect-ratio:auto;border-color:var(--r-line-strong);background:var(--r-white);padding:0;display:block;overflow:hidden;max-width:100%}
.ph.is-ui img{width:100%;height:auto}
.ph.is-ui img{border-radius:var(--r-radius) var(--r-radius) 0 0}
.ui-cap{display:block;padding:11px 16px;font-size:12.5px;color:var(--r-muted);border-top:1px solid var(--r-line);background:var(--r-paper);position:relative}
.feature .ph{aspect-ratio:3/2}
.feature .ph.is-ui{aspect-ratio:auto}
/* Illustration panels: the figure's fill matches the illustration's own background,
   so the picture reads as if it has no background at all. */
.ph.has-img{padding:0;background:var(--r-paper);border-color:transparent;box-shadow:none}
.ph.fig-sky{background:var(--t-sky)}
.ph.fig-mint{background:var(--t-mint)}
.ph.fig-peach{background:var(--t-peach)}
.ph.fig-sky img,.ph.fig-mint img,.ph.fig-peach img{border-radius:var(--r-radius)}
/* Product screenshots keep their card: they are UI, not illustration. */
.ph.is-ui{box-shadow:var(--r-shadow-figure);border-color:var(--r-line-strong)}
.ph.has-img img{position:static;width:100%;height:auto;display:block}

/* ── logo row ───────────────────────────────────────────────── */
.trust{padding-block:var(--s-10) var(--s-14)}
.trust-title{text-align:center;margin-bottom:var(--s-6);font-size:var(--r-fs-sm);font-weight:500;letter-spacing:0;text-transform:none;color:var(--r-muted)}
.logo-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-5) clamp(24px,4vw,48px)}
.logo-row li{display:flex;align-items:center;gap:var(--s-2);height:30px;opacity:.72;filter:grayscale(1)}
.logo-row img{height:24px;width:auto;object-fit:contain}
.logo-row li:nth-child(1) img{height:21px}
.logo-row li:nth-child(3) img{height:19px}
.logo-row li:nth-child(6) img{height:21px}
.logo-row .soon{opacity:.38}
.logo-row .soon .label{font-size:11px;letter-spacing:.04em}

/* ── pillars (was the black band) ───────────────────────────── */
.pillars-section{padding-block:clamp(48px,7vw,96px)}
.pillars-section .display-lg{max-width:20ch}
.pillars-section .lede{max-width:52ch;margin-top:var(--s-5)}
.pillars{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);margin-top:var(--s-12)}
@media (min-width:720px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.pillars{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pillar{background:var(--r-paper);border:1px solid var(--r-line);border-radius:var(--r-radius);padding:var(--s-6);display:grid;gap:var(--s-3);align-content:start}
.pillar .h2{font-size:23px;font-weight:700}
.pillar p{color:var(--r-ink-2);font-size:var(--r-fs-sm)}
.pillar a{font-weight:600;font-size:var(--r-fs-sm);margin-top:var(--s-2);justify-self:start}

/* ── features ───────────────────────────────────────────────── */
#features{padding-block:clamp(24px,4vw,40px) clamp(32px,5vw,48px)}
.feature{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,40px);align-items:center;padding-block:clamp(40px,6vw,56px)}
.feature+.feature{border-top:1px solid var(--r-line)}
@media (min-width:860px){.feature{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,80px)}.feature.flip .feature-text{order:2}}
.feature-text .display-md{max-width:16ch}
.points{margin-top:var(--s-6);display:grid;gap:var(--s-5)}
.points li{display:grid;gap:var(--s-1);padding-left:var(--s-5);position:relative}
.points li{padding-left:28px}
.points li::before{content:'';position:absolute;left:0;top:.28em;width:17px;height:17px;background-color:var(--r-ink);-webkit-mask:var(--tick) no-repeat center/contain;mask:var(--tick) no-repeat center/contain}
.points p{color:var(--r-ink-2)}

/* ── comparison ─────────────────────────────────────────────── */
.migrate{background:var(--t-mint);border-radius:var(--r-radius-lg);padding:clamp(32px,5vw,64px) clamp(24px,4vw,56px);display:grid;gap:var(--s-10);align-items:center}
@media (min-width:1000px){.migrate{grid-template-columns:minmax(0,5fr) minmax(0,6.5fr);align-items:center;gap:clamp(40px,4vw,64px)}.migrate .points{grid-template-columns:minmax(0,1fr);gap:var(--s-5);margin-top:var(--s-8)}.migrate-text{text-align:left;max-width:none}.migrate-text .display-lg{text-align:left;margin-inline:0;max-width:18ch}.migrate-text .lede{text-align:left;margin-left:0;max-width:52ch}.migrate .cta-row{justify-content:flex-start;margin-top:var(--s-8)}}
.migrate-fig{box-shadow:none;border:0;background:transparent;max-width:340px;margin-inline:auto}
.migrate-fig img{border-radius:var(--r-radius)}
@media (min-width:1000px){.migrate-fig{max-width:none}}
.migrate-text{max-width:760px;text-align:left}

.migrate-text .display-lg{max-width:17ch;margin-inline:0;text-align:left}
.migrate-text .lede{margin:var(--s-5) 0 0;max-width:54ch;text-align:left}
.migrate .points{margin-top:var(--s-8);text-align:left;display:grid;gap:var(--s-5)}
.migrate .points li{padding-left:28px}
.migrate .points li::before{position:absolute;left:0;top:.3em}
.migrate .cta-row{justify-content:flex-start;margin-top:var(--s-8)}
.migrate .btn-secondary{background:transparent;border-color:var(--r-ink)}
@media (max-width:600px){.migrate{padding:var(--s-8) var(--s-5)}}
.band-note{margin-top:var(--s-4);color:rgba(247,246,242,.6)}

.compare{background:var(--r-white);border:1px solid var(--r-line);border-radius:var(--r-radius-lg);overflow:hidden}
.compare-head{padding:var(--s-10) var(--s-8) var(--s-8);display:grid;gap:var(--s-3);border-bottom:1px solid var(--r-line);text-align:center;justify-items:center}
.compare-head .display-md{max-width:24ch}
.compare-cols{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.compare-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.compare-col{padding:var(--s-6) var(--s-8)}
.compare-col+.compare-col{border-top:1px solid var(--r-line);background:var(--r-paper)}
@media (min-width:820px){.compare-col+.compare-col{border-top:0;border-left:1px solid var(--r-line)}}
.compare-col .label{margin-bottom:var(--s-3)}
.compare-col li{position:relative;padding:var(--s-3) 0 var(--s-3) 30px;border-top:1px solid var(--r-line);font-size:15px;line-height:1.5}
.compare-col li:first-of-type{border-top:0}
.compare-col li::before{position:absolute;left:0;top:var(--s-3);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1}
.compare-col.us li::before{content:'';background-color:var(--h-mint);border-radius:0;width:18px;height:18px;top:calc(var(--s-3) + 2px);-webkit-mask:var(--tick) no-repeat center/contain;mask:var(--tick) no-repeat center/contain}
.compare-col.them{color:var(--r-muted)}
.compare-col.them li::before{content:'✕';background:var(--r-negative);color:var(--r-white)}
.compare-foot{padding:var(--s-4) var(--s-8);border-top:1px solid var(--r-line);color:var(--r-muted)}

/* ── tiles ──────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);margin-top:var(--s-8)}
@media (min-width:600px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{background:var(--r-white);border:1px solid var(--r-line);border-radius:var(--r-radius);padding:var(--s-5) var(--s-5) var(--s-6);display:grid;gap:var(--s-2);align-content:start}
.tile .label{font-size:11.5px}
.tile p{color:var(--r-ink-2)}
.tile.is-soon{background:var(--r-paper)}

/* ── pricing ────────────────────────────────────────────────── */
#pricing{background:var(--r-white);border-top:1px solid var(--r-line);border-bottom:1px solid var(--r-line)}
#pricing .display-lg{max-width:20ch}
.plans{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);margin-top:var(--s-10);align-items:stretch}
@media (min-width:700px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.plans.plans-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}}
.plan{position:relative;background:var(--r-paper);border:1px solid var(--r-line);border-radius:var(--r-radius-lg);display:flex;flex-direction:column;overflow:hidden}
.plan.v-marked{background:var(--r-white);border-color:var(--r-ink);box-shadow:var(--r-shadow-figure)}
.plan.v-marked::before{content:'';display:block;height:4px;background:var(--r-rail)}   /* the rail */
.plan-head{padding:var(--s-6) var(--s-5) 0;display:block}
.plan.v-marked .plan-head{padding-top:var(--s-8)}
.plan-head .h3{font-size:22px}
.plan-band{font-size:var(--r-fs-cap);color:var(--r-muted);margin-top:4px;line-height:1.4}
.plan-band .num{font-weight:600;color:var(--r-ink-2)}
.plan-head .tag{position:absolute;top:14px;right:14px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;background:var(--r-ink);color:var(--r-white);padding:4px 9px;border-radius:999px}
.plan-body{padding:var(--s-4) var(--s-5) var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.price{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.price .num{font-family:var(--r-font-display);font-weight:700;font-size:44px;line-height:1;letter-spacing:-0.02em}
.price .per{color:var(--r-muted)}
.price .was{color:var(--r-muted);font-size:20px;font-weight:500;text-decoration-thickness:2px;text-decoration-color:var(--r-negative);margin-left:2px}
.plan-founding{font-size:var(--r-fs-cap);color:var(--r-muted);margin-top:-4px}
.plan-for{color:var(--r-ink-2);min-height:3.2em;font-size:var(--r-fs-sm)}
.plan ul{display:grid;gap:var(--s-2);border-top:1px solid var(--r-line);padding-top:var(--s-4)}
.plan li{position:relative;padding-left:24px;font-size:14px;line-height:1.45;color:var(--r-ink-2)}
.plan li::before{content:'';position:absolute;left:0;top:.2em;width:16px;height:16px;background-color:var(--r-ink);-webkit-mask:var(--tick) no-repeat center/contain;mask:var(--tick) no-repeat center/contain}
.plan li.plus{color:var(--r-ink);font-weight:600}
.plan li.not{color:var(--r-muted)}
.plan li.not::before{content:'✕';width:auto;height:auto;background:none;-webkit-mask:none;mask:none;color:var(--r-negative);font-weight:700;font-size:13px;top:0;left:2px}
.plan .btn{margin-top:auto}
.plan-note{color:var(--r-muted);font-size:12px;line-height:1.5;text-align:center}
.plan-note br+*{}
.plan-enterprise{background:var(--r-ink);border-color:var(--r-ink);color:rgba(247,246,242,.82)}
.plan-enterprise .h3,.plan-enterprise .price .num,.plan-enterprise .plan-band .num{color:var(--r-paper)}
.plan-enterprise .plan-band,.plan-enterprise .plan-founding,.plan-enterprise .plan-note,.plan-enterprise .plan-for{color:rgba(247,246,242,.7)}
.plan-enterprise ul{border-top-color:rgba(247,246,242,.16)}
.plan-enterprise li{color:rgba(247,246,242,.85)}
.plan-enterprise li::before{background-color:var(--r-rail)}
.plan-enterprise li.plus{color:var(--r-paper)}
.plan-enterprise li.plus::before{background-color:var(--r-rail)}
.enterprise{margin-top:var(--s-5);background:var(--r-paper);border:1px solid var(--r-line);border-radius:var(--r-radius);padding:var(--s-5) var(--s-6);display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;justify-content:space-between}
.enterprise .h3{font-size:18px}
.enterprise p{color:var(--r-ink-2);max-width:60ch}
.price-foot{margin-top:var(--s-6);display:grid;gap:var(--s-5)}
@media (min-width:900px){.price-foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.promise,.founding{background:var(--r-paper);border:1px solid var(--r-line);border-radius:var(--r-radius);padding:var(--s-6);display:grid;gap:var(--s-3)}
.promise .h3,.founding .h3{font-size:18px}
.promise .body-sm,.founding .body-sm{color:var(--r-ink-2)}
.compare-table{margin-top:var(--s-12);border-top:1px solid var(--r-line);padding-top:var(--s-6)}
.compare-table>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--s-3);justify-content:center}
.compare-table>summary::-webkit-details-marker{display:none}
.compare-table>summary::after{content:'+';font-size:24px;color:var(--r-muted);line-height:1;transition:transform .2s var(--r-ease)}
.compare-table[open]>summary::after{transform:rotate(45deg)}
.compare-table>summary .h3{font-size:20px}
.compare-table .table-scroll{margin-top:var(--s-6)}
.table-scroll{overflow-x:auto;border:1px solid var(--r-line);border-radius:var(--r-radius);background:var(--r-white)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:var(--r-fs-sm)}
th,td{text-align:left;padding:var(--s-3) var(--s-4);border-top:1px solid var(--r-line);vertical-align:top}
thead th{border-top:0;background:var(--r-paper);font-size:var(--r-fs-eyebrow);letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:var(--r-muted)}
tbody th{font-weight:600;color:var(--r-ink)}
td{color:var(--r-ink-2)}
td.mono{font-variant-numeric:tabular-nums}
td .yes{color:var(--r-positive);font-weight:700}
.tick-inline{display:inline-block;width:17px;height:17px;color:var(--r-positive);vertical-align:-2px}
td .no{display:inline-block;min-width:20px}
td .no{color:var(--r-negative);font-weight:700}
td s{color:var(--r-muted);font-weight:400;margin-left:4px}

/* ── FAQ ────────────────────────────────────────────────────── */
#faq{padding-block:clamp(48px,7vw,96px)}
#more{padding-top:clamp(40px,6vw,80px)}
#faq .intro{padding-top:0}
#migrate{padding-block:clamp(48px,7vw,96px)}
.faq{margin-top:var(--s-8);border-top:1px solid var(--r-line);max-width:820px}
.faq details{border-bottom:1px solid var(--r-line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s-4);align-items:center;padding-block:var(--s-5);font-family:var(--r-font-display);font-weight:600;font-size:19px;color:var(--r-ink);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;font-weight:400;color:var(--r-muted);flex:none;transition:transform .2s var(--r-ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding-bottom:var(--s-6);color:var(--r-ink-2);max-width:66ch}
.faq .answer p+p{margin-top:var(--s-3)}

/* ── closing band (the one dark section) ────────────────────── */
.band{background:var(--r-ink);color:var(--r-paper);padding-block:clamp(56px,9vw,120px)}
.band .label{color:rgba(247,246,242,.6)}
.band .display-lg,.band h2.display-lg{color:var(--r-paper);max-width:16ch;margin-inline:auto}
.band .lede{color:rgba(247,246,242,.78);max-width:50ch;margin:var(--s-6) auto 0}
.band .fallback{margin-top:var(--s-6);color:rgba(247,246,242,.78)}
.band .fallback a{color:var(--r-paper);text-decoration-color:rgba(247,246,242,.4)}
.band .fallback a:hover{text-decoration-color:var(--r-paper)}

/* ── footer ─────────────────────────────────────────────────── */
footer{padding-block:var(--s-14) var(--s-10)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-8)}
@media (min-width:760px){.foot-grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}}
@media (min-width:760px) and (max-width:959px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.foot-grid .label{margin-bottom:var(--s-3)}
.foot-grid ul{display:grid;gap:var(--s-2)}
.foot-grid a{color:var(--r-ink-2);text-decoration:none;overflow-wrap:anywhere}
.foot-grid a:hover{color:var(--r-ink);text-decoration:underline}
.foot-legal{margin-top:var(--s-10);padding-top:var(--s-5);border-top:1px solid var(--r-line);color:var(--r-muted);font-size:var(--r-fs-cap);display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);justify-content:space-between}

/* ── reading pages (terms, privacy, refund, contact) ─────────── */
.page-head{padding-block:var(--s-14) var(--s-8);border-bottom:1px solid var(--r-line)}
.page-head .label{margin-bottom:var(--s-4)}
.reading{max-width:760px;padding-block:var(--s-10) var(--s-24)}
.reading h2{font-family:var(--r-font-display);font-weight:600;font-size:var(--r-fs-h2);line-height:1.2;margin-top:var(--s-10);color:var(--r-ink)}
.reading h3{font-family:var(--r-font-display);font-weight:600;font-size:var(--r-fs-h3);margin-top:var(--s-6);color:var(--r-ink)}
.reading p,.reading li{color:var(--r-ink-2);line-height:1.65}
.reading p{margin-top:var(--s-4)}
.reading ul{list-style:disc;padding-left:var(--s-5);margin-top:var(--s-3);display:grid;gap:var(--s-2)}
.reading ol{padding-left:var(--s-5);margin-top:var(--s-3);display:grid;gap:var(--s-2);color:var(--r-ink-2)}
.reading .lede{margin-top:0}
.summary-box{border-left:3px solid var(--r-ink);background:var(--r-white);border-radius:0 var(--r-radius) var(--r-radius) 0;padding:var(--s-5) var(--s-6);margin-top:var(--s-6);display:grid;gap:var(--s-2)}
.summary-box p{margin:0;color:var(--r-ink)}
.placeholder{background:var(--r-paper-deep);color:var(--r-ink-2);padding:0 6px;border-radius:4px;font-size:var(--r-fs-sm)}
.contact-cards{display:grid;gap:var(--s-4);margin-top:var(--s-8)}
@media (min-width:700px){.contact-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.contact-card{background:var(--r-white);border:1px solid var(--r-line);border-radius:var(--r-radius);padding:var(--s-6);display:grid;gap:var(--s-2)}
.contact-card a{font-weight:600;font-size:17px;color:var(--r-ink);overflow-wrap:anywhere;text-decoration:none}
.contact-card a:hover{text-decoration:underline}

/* ── reveal ─────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(10px);transition:opacity .35s var(--r-ease),transform .35s var(--r-ease)}
.rv.is-in{opacity:1;transform:none}
.rv-2.is-in{transition-delay:60ms}.rv-3.is-in{transition-delay:120ms}.rv-4.is-in{transition-delay:180ms}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}*{transition-duration:.01ms!important}}

/* ── mobile sticky CTA (48px, with the rail on top) ─────────── */
.sticky-cta{display:none}
@media (max-width:760px){
  .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(247,246,242,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:2px solid var(--r-rail);padding:6px var(--s-4);transform:translateY(100%);transition:transform .25s var(--r-ease)}
  .sticky-cta.is-on{transform:none}
  .sticky-cta .btn{min-height:36px;font-size:14px}
  body.has-sticky{padding-bottom:48px}
}

@media (max-width:600px){
  .plan-head{padding:var(--s-5) var(--s-5) 0}
  .plan-body{padding:var(--s-3) var(--s-5) var(--s-5)}
  .price .num{font-size:38px}
  .compare-head,.compare-col{padding-inline:var(--s-5)}
  .compare-head{padding-block:var(--s-8) var(--s-6)}
  .migrate{padding:var(--s-8) var(--s-5)}
  .btn{white-space:normal;text-align:center}
  .foot-legal{gap:var(--s-3)}
}
@media (max-width:400px){
  .wordmark{font-size:18px}
  .hero-meta li{padding-left:22px;font-size:14px}
  .stat,.tile,.pillar{padding:var(--s-5)}
}