/* The two typefaces, served from this site: no second and third connection before text settles. */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/sora.woff2) format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/karla.woff2) format('woff2'); }
@font-face { font-family: 'Karla'; font-style: italic; font-weight: 200 800; font-display: swap; src: url(/fonts/karla-italic.woff2) format('woff2'); }
/* ==========================================================================
   smallstacks.net — STACK
   --------------------------------------------------------------------------
   The homepage's world, applied to every other page. A light, blue-biased
   page with white cards; navy bands for the masthead, the top of each page,
   the dark sections and the footer; Sora for display, Karla for reading;
   cobalt as the one brand colour.

   Replaced the dark Aurora direction on 2026-09-30 when the new homepage went
   live and the user asked for the other pages to match it. Every class name
   survived, so the markup did not change.

   HOW THE BANDS WORK: the navy bands re-declare the tokens (see "dark bands"
   below), so anything inside them - a rate table, a coupon, a button - reads
   the dark values without a rule of its own. The account dashboard pages set
   data-surface="app" on <html> and get the dark tokens everywhere, because
   account.css and business.css were drawn for a dark ground.

   COBALT HAS TWO JOBS: --spot (#2E6BFF) fills and glows and never carries
   text on the light page; --accent-bright / --spot-2 (#1E4FDB) carry text.
   ========================================================================== */

:root {
  --bg: #F4F6FA;               /* the page                                   */
  --surface: #FFFFFF;          /* a panel band                               */
  --surface-2: #FFFFFF;        /* a raised panel                             */
  --foot: #0A1328;             /* the footer                                 */

  --ink: #0D1424;              /* 16.9:1 on the page                         */
  --ink-soft: #4E586F;         /*  6.9:1                                     */
  --ink-faint: #5F6980;        /*  5.3:1                                     */

  --spot: #2E6BFF;             /* fills, borders, glows - never text here    */
  --spot-deep: #1E4FDB;
  --spot-press: #2861F0;       /* white on it: 5.17:1                        */
  --spot-2: #1E4FDB;           /* marks and accent text: 6.3:1               */
  --accent-bright: #1E4FDB;    /* links                                      */
  --spot-rgb: 46, 107, 255;
  --spot-2-rgb: 30, 79, 219;

  --grad: linear-gradient(100deg, var(--spot-deep) 0%, var(--spot) 100%);
  --grad-press: linear-gradient(100deg, var(--spot-deep) 0%, var(--spot-press) 100%);
  --grad-rule: linear-gradient(90deg, var(--edge), var(--edge));

  --glass: #FFFFFF;
  --glass-2: #F8FAFD;
  --edge: #DCE1EB;
  --edge-lit: #C3CCDC;
  --rule: #DCE1EB;
  --field: #FFFFFF;
  --error: #B42318;
  --err-rgb: 180, 35, 24;
  --warn: #8A5A00;
  --warn-rgb: 154, 103, 0;

  --shadow-sm: 0 1px 2px rgba(13, 20, 36, .06);
  --shadow-md: 0 22px 44px -28px rgba(13, 20, 36, .32);
  --shadow-lg: 0 34px 64px -32px rgba(13, 20, 36, .38);
  --glow: 0 12px 26px -14px rgba(var(--spot-rgb), .6);
  --glow-strong: 0 16px 32px -12px rgba(var(--spot-rgb), .7);

  --radius: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --track-label: .08em;
  --track-control: 0;

  --measure: 66ch;
  --container: 1180px;
  --gutter: 26px;
  --card-gap: clamp(18px, 1.8vw, 26px);

  /* aliases account.css / business.css consume (backgrounds and edges) */
  --stock: var(--bg);
  --stock-2: var(--surface);
  --paper-white: var(--surface-2);
  --bg-alt: var(--surface);
  --bg-dark: var(--foot);
  --bg-dark-2: #0D1830;
  --sunken: var(--bg);
  --grey-1: var(--surface);
  --grey-2: var(--surface-2);
  --grey-3: var(--edge);
  --line: var(--rule);
  --line-soft: var(--edge);
  --line-strong: var(--edge-lit);
  --line-dark: var(--rule);
  --white: var(--surface-2);
  --accent: var(--spot);
}

/* ---------- dark bands --------------------------------------------------
   The same token names with navy values. Colour is set here too, because a
   colour inherited from <body> was already resolved against the light ink. */
.header, .fold, .section--dark, .footer, [data-surface="app"] {
  --bg: #0D1830;
  --surface: #111F3D;
  --surface-2: #16264D;
  --ink: #F2F5FB;
  --ink-soft: #AFBCD8;
  --ink-faint: #93A1C2;
  --spot-2: #8AA9FF;
  --accent-bright: #8AA9FF;
  --spot-2-rgb: 138, 169, 255;
  --glass: rgba(255, 255, 255, .05);
  --glass-2: rgba(255, 255, 255, .08);
  --edge: rgba(255, 255, 255, .12);
  --edge-lit: rgba(255, 255, 255, .22);
  --rule: rgba(255, 255, 255, .12);
  --field: rgba(255, 255, 255, .06);
  --error: #FF9B9B;
  --err-rgb: 255, 120, 120;
  --warn: #FFD9A0;
  --warn-rgb: 255, 190, 92;
  --grad-rule: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  --shadow-md: 0 16px 36px -16px rgba(0, 0, 0, .6);
  --shadow-lg: 0 30px 60px -26px rgba(0, 0, 0, .7);
  /* The aliases again: a var() inside a custom property is resolved where it
     is declared, so the :root copies stay LIGHT inside a band. Without these,
     a panel painted with --paper-white sat white under light text. */
  --stock: var(--bg);
  --stock-2: var(--surface);
  --paper-white: var(--surface-2);
  --bg-alt: var(--surface);
  --sunken: var(--bg);
  --grey-1: var(--surface);
  --grey-2: var(--surface-2);
  --grey-3: var(--edge);
  --line: var(--rule);
  --line-soft: var(--edge);
  --line-strong: var(--edge-lit);
  --line-dark: var(--rule);
  --white: var(--surface-2);
  color: var(--ink);
}
[data-surface="app"] { color-scheme: dark; }
[data-surface="app"] body { background: var(--bg); color: var(--ink); }

/* ---------- per-product accents -----------------------------------------
   Stacks AI is red and Fintavo green, set with data-theme on <html>. Four
   roles each: fill, pressed fill that carries white, accent text for the light
   page, and a lighter accent text for the navy bands. */
[data-theme="red"] {
  --spot: #E5484D; --spot-deep: #A51D22; --spot-press: #D12F35;
  --spot-2: #B42318; --accent-bright: #B42318;
  --spot-rgb: 229, 72, 77; --spot-2-rgb: 180, 35, 24;
}
[data-theme="green"] {
  --spot: #16A34A; --spot-deep: #0E6B32; --spot-press: #15803D;
  --spot-2: #11703A; --accent-bright: #11703A;
  --spot-rgb: 22, 163, 74; --spot-2-rgb: 17, 112, 58;
}
[data-theme="red"] :is(.header, .fold, .section--dark, .footer), [data-theme="red"][data-surface="app"] { --spot-2: #FF8A8A; --accent-bright: #FF8A8A; --spot-2-rgb: 255, 138, 138; }
[data-theme="green"] :is(.header, .fold, .section--dark, .footer), [data-theme="green"][data-surface="app"] { --spot-2: #6EE7A0; --accent-bright: #6EE7A0; --spot-2-rgb: 110, 231, 160; }

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

html {
  /* The ramp is in rem and rem resolves against THIS element, not body. */
  font-size: 17px;
  caret-color: var(--spot-2);
  scrollbar-color: var(--edge-lit) transparent;
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

img, svg { max-width: 100%; }
a { color: inherit; }
p a:not(.btn), li a:not(.btn) {
  color: var(--accent-bright); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
p a:not(.btn):hover, li a:not(.btn):hover { color: var(--spot-2); }

::selection { background: rgba(var(--spot-rgb), .45); color: #fff; }
:focus-visible { outline: 2px solid var(--spot-2); outline-offset: 3px; }
input, select, textarea, [type="radio"], [type="checkbox"] { accent-color: var(--spot); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 760px; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 1000; padding: 10px 16px; border-radius: 8px; background: #fff; color: #0b1120; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- motion ------------------------------------------------------
   Blocks rise into place as they arrive. script.js observes them and adds
   .is-in; nothing needs a class in the markup. The default state is visible,
   so if the script never runs the page is still fully readable. */
@media (prefers-reduced-motion: no-preference) {
  .will-reveal { opacity: 0; transform: translate3d(0, 18px, 0); }
  .will-reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
  }
}

/* ---------- sections ----------------------------------------------------- */
.section { padding: 0 0 clamp(52px, 6vw, 92px); }
.section--alt { background: transparent; }

/* A band of lighter ground across the page, with a lit hairline top and
   bottom so it reads as a panel rather than a colour change. */
.section--dark, .section--panel {
  position: relative;
  background: var(--surface);
  padding-block: clamp(10px, 1.4vw, 18px);
  margin-bottom: clamp(52px, 6vw, 92px);
}
.section--dark::before, .section--panel::before,
.section--dark::after, .section--panel::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--grad-rule); opacity: .5;
}
.section--dark::before, .section--panel::before { top: 0; }
.section--dark::after, .section--panel::after { bottom: 0; }

.section__head { margin: 0 0 clamp(26px, 3vw, 40px); max-width: var(--measure); }
.section__title { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.1rem); }
.section__lead { color: var(--ink-soft); font-size: 1.08rem; margin-top: 14px; max-width: var(--measure); }
.section__lead--left { margin-inline: 0; }

/* ---------- the eyebrow (was the reverse-out flag) -----------------------
   The old world announced a section with a solid black bar. On a dark ground
   a black bar is invisible, and a white one would be a slab of glare — so the
   announcement is made with light instead: a small tracked label, its rubric
   at the other end, over a gradient hairline that fades out across the page. */
.flag {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; font-size: 0.78rem; letter-spacing: var(--track-label);
  color: var(--spot-2);
  padding: 0 0 clamp(7px, 1.2vh, 12px); margin: 0 0 clamp(14px, 2.4vh, 32px);
  border-bottom: 1px solid transparent;
  border-image: var(--grad-rule) 1;
}
/* `:not(:first-child)` matters: three eyebrows carry a single label since the
   restating rubrics were dropped, and on those the only span IS the last one -
   so the bare `span:last-child` was painting the label itself in the rubric's
   faint grey instead of the accent. */
.flag span:last-child:not(:first-child) { color: var(--ink-faint); font-weight: 500; }
.flag--quiet { color: var(--ink-faint); }

/* ---------- buttons ------------------------------------------------------ */
.btn {
  --pad-y: 13px; --pad-x: 22px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600;
  letter-spacing: var(--track-control); font-size: 0.95rem; line-height: 1;
  padding: var(--pad-y) var(--pad-x);
  border: 1px solid var(--edge); background: var(--glass); color: var(--ink);
  border-radius: var(--radius-pill);
  text-decoration: none; cursor: pointer;
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s linear,
              background-color .18s linear, border-color .18s linear, filter .18s linear;
}
.btn:hover { transform: translateY(-1px); }

/* The pressed gradient stops at #2861F0 rather than running to the full spot
   blue: white on the light end of that gradient measures 5.17:1, and on the
   full blue it is 4.50 — on the floor, which is not a place to sit. */
.btn--primary {
  background: var(--grad-press); border-color: transparent; color: #fff;
  box-shadow: var(--glow);
}
.btn--primary:hover { box-shadow: var(--glow-strong); filter: saturate(1.12); }
.btn--ghost { background: var(--glass); color: var(--ink); border-color: var(--edge-lit); }
.btn--ghost:hover { background: var(--glass-2); border-color: var(--spot); }
.btn--lg { --pad-y: 16px; --pad-x: 30px; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* ---------- masthead ----------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(13, 24, 48, .93);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--edge);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 64px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand__mark { display: inline-flex; filter: drop-shadow(0 0 10px rgba(var(--spot-rgb), .5)); }
.brand__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.28rem; letter-spacing: -0.02em;
}

.nav { display: flex; align-items: center; gap: 24px; }
.nav__link {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.93rem; color: var(--ink-soft); text-decoration: none;
  transition: color .15s linear;
}
.nav__link:hover { color: var(--ink); }
.nav__cta { color: #fff; }
.nav__cta:hover { color: #fff; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; background: none; border: 0; cursor: pointer; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- the fold ----------------------------------------------------- */
.fold { padding: clamp(16px, 3.4vh, 68px) 0 clamp(18px, 3vh, 64px); }
.fold__top {
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: clamp(28px, 3.4vw, 56px); align-items: start;
}
/* Three pages keep their rate table INSIDE the fold section - stacks-ai.html
   and both product pages - so the eyebrow follows the fold's grid directly with
   nothing between them, and it sat flush against the ad's buttons (measured at
   a 0px gap). The space is put on the adjacency rather than on `.fold__top`
   itself, because index.html's rate table is its own section and giving the
   grid a blanket bottom margin there would push the table off the fold and
   break the Price-Above-The-Fold rule. */
.fold__top + .rates { margin-top: clamp(30px, 4vh, 58px); }

/* The press rule became a gradient hairline: the same job — "a page starts
   here" — done with light instead of ink. Still exactly one per page. */
.pressrule {
  display: block; height: 2px; border: 0;
  background: var(--grad-rule);
  margin-bottom: clamp(12px, 2vh, 34px);
  border-radius: 2px;
}

.ad { padding: 0; }
.ad__head {
  /* Answers to BOTH axes: full size wherever there is room, given up
     continuously on a short screen. A display ad is a poster, not reading
     copy - this is the one place type is allowed to resize with the window. */
  font-size: clamp(2.1rem, min(1rem + 5.4vw, 15.5vh - 3rem), 4.6rem);
  line-height: 1.02; letter-spacing: -0.04em; margin: 0;
}
/* The one phrase set in the gradient. Background-clip on text, so it is the
   light itself rather than a coloured word. */
.ad__head em {
  font-style: normal;
  background: linear-gradient(100deg, var(--spot) 8%, var(--spot-2) 88%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--spot-2);
}
.ad__sub { margin-top: clamp(8px, 1.5vh, 22px); font-size: 1.12rem; color: var(--ink-soft); max-width: 48ch; }
.ad__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(12px, 2.1vh, 30px); }
.ad__terms {
  margin-top: clamp(18px, 2.4vh, 28px); padding-top: clamp(14px, 1.8vh, 18px);
  border-top: 1px solid var(--edge);
  font-size: 0.86rem; color: var(--ink-faint); max-width: 52ch;
}

/* ---------- glass ------------------------------------------------------- */
/* One shape for every panel in the system. The lit top edge is what makes it
   read as glass rather than as a grey box. */
.coupon__inner, .box, .step, .plan, .prodcard, .faq__item, .plan-picker label {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.coupon__inner::before, .box::before, .step::before, .plan::before,
.prodcard::before, .faq__item::before, .plan-picker label::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge-lit), transparent);
  pointer-events: none;
}

/* ---------- the coupon (now a glass quote card) -------------------------- */
.coupon { display: flex; flex-direction: column; gap: 10px; align-self: start; }
.coupon__inner {
  padding: clamp(14px, 2.2vh, 26px) clamp(20px, 2.4vw, 26px);
  display: flex; flex-direction: column; gap: clamp(6px, 1vh, 9px);
  box-shadow: var(--shadow-md);
}
.coupon__head {
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: var(--track-label); color: var(--spot-2);
  margin-bottom: 2px;
}
.coupon__line {
  position: relative;
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 0.93rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--edge); padding-bottom: clamp(4px, 0.75vh, 7px);
  transition: color .15s linear, border-color .15s linear;
}
.coupon__line b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

/* The strike: the row the reader is considering lights up. */
.coupon__line.is-struck { color: var(--ink); border-bottom-color: var(--spot); }
.coupon__line.is-struck::before {
  content: ""; position: absolute; left: -14px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--spot-2); box-shadow: 0 0 10px 2px rgba(var(--spot-2-rgb), .8);
}
.coupon__line.is-struck b { color: var(--spot-2); }

.coupon .btn { margin-top: clamp(4px, 0.9vh, 8px); }
.coupon__note { font-size: 0.84rem; color: var(--ink-faint); }
.coupon__fill { display: grid; gap: 2px; margin-top: 4px; }
.coupon__fill label {
  font-family: var(--font-body); font-weight: 500; font-size: 0.84rem;
  color: var(--ink-faint); margin-top: clamp(2px, 0.6vh, 6px);
}
.coupon__fill input {
  border: 1px solid var(--edge); border-radius: var(--radius);
  background: var(--field);
  font: inherit; font-size: 0.95rem; color: var(--ink);
  padding: clamp(6px, 1.1vh, 10px) 12px; width: 100%;
  transition: border-color .15s linear, box-shadow .15s linear;
}
.coupon__fill input::placeholder { color: var(--ink-faint); }
.coupon__fill input:focus {
  outline: none; border-color: var(--spot);
  box-shadow: 0 0 0 3px rgba(var(--spot-rgb), .22);
}

/* ---------- the rate table ---------------------------------------------- */
.rates { border-top: 0; }
.rate-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-variant-numeric: tabular-nums;
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.rate-table caption {
  text-align: left; padding: 0 0 clamp(7px, 1.1vh, 12px);
  font-family: var(--font-body); font-size: 0.9rem; color: var(--ink-faint);
  caption-side: top;
}
.rate-table th, .rate-table td {
  text-align: left;
  /* Five rows, so every pixel here is spent five times in the first viewport. */
  padding: clamp(7px, 1.15vh, 16px) 18px;
  border-bottom: 1px solid var(--edge); font-size: 1rem;
}
.rate-table thead th {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 600;
  font-size: 0.74rem; letter-spacing: var(--track-label); color: var(--ink-faint);
  background: var(--glass-2);
}
.rate-table td:not(:first-child) { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.rate-table tr:last-child td { border-bottom: 0; }

/* Our row is the one lit from behind. The wash goes on the ROW, not on each
   cell: a 90deg gradient set per cell restarts in every one of them, which
   printed the row as three separate bands instead of one sweep. */
.rate-table tr.is-us {
  background: linear-gradient(90deg, rgba(var(--spot-rgb), .22), rgba(var(--spot-2-rgb), .07));
}
.rate-table tr.is-us td, .rate-table tr.is-us th {
  color: var(--ink); font-weight: 600; background: transparent;
}
/* The lit edge goes on the row's FIRST CELL, whatever element that is: the
   marketing table opens its rows with a <td> and the product table with a
   <th>, so keying this to `th` drew it on one page and nothing on the other. */
.rate-table tr.is-us > :first-child { position: relative; }
.rate-table tr.is-us > :first-child::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad); box-shadow: 0 0 14px 1px rgba(var(--spot-rgb), .7);
}
.rate-table .amount { text-align: right; }

/* ---------- card grids --------------------------------------------------- */
.ads { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.ads--two { grid-template-columns: repeat(2, 1fr); }
.box, .step, .prodcard { padding: clamp(20px, 2.2vw, 28px); }
.box, .step, .plan, .prodcard {
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s linear,
              border-color .22s linear, background-color .22s linear;
}
.box:hover, .step:hover, .prodcard:hover {
  transform: translateY(-3px);
  border-color: var(--edge-lit); background: var(--glass-2);
  box-shadow: var(--shadow-md);
}
.box__head { font-size: 1.24rem; }
.box__body { margin-top: 10px; color: var(--ink-soft); font-size: 1rem; }
.box__list { list-style: none; margin-top: 14px; display: grid; gap: 9px; font-size: 0.96rem; color: var(--ink-soft); }
.box__list li { display: flex; gap: 10px; }

/* ---------- marks -------------------------------------------------------- */
.check { width: 16px; height: 16px; flex: none; color: var(--spot-2); margin-top: 4px; }
.section--dark .check, .section--panel .check { color: var(--spot-2); }
.ico { width: 16px; height: 16px; flex: none; }

/* ---------- steps -------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.step__num {
  font-family: var(--font-display); font-weight: 600; font-size: 0.74rem;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--spot-2);
}
.step h3, .step__title { font-size: 1.24rem; margin-top: 10px; }
.step p { color: var(--ink-soft); font-size: 1rem; margin-top: 10px; }
.steps__note { font-size: 0.93rem; color: var(--ink-faint); margin-top: clamp(20px, 2.4vw, 30px); max-width: var(--measure); }

/* ---------- the category list (now chips) -------------------------------- */
.industries { display: flex; flex-wrap: wrap; gap: 10px; border-top: 0; }
.industry {
  padding: 9px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--edge); background: var(--glass);
  font-size: 0.93rem; color: var(--ink-soft);
  transition: border-color .18s linear, color .18s linear, background-color .18s linear;
}
a.industry { text-decoration: none; }
.industry:hover { border-color: var(--spot); color: var(--ink); background: var(--glass-2); }
.industry::before { content: none; }
.industries__note { margin-top: 20px; color: var(--ink-soft); font-size: 0.95rem; }
.industries__note a { color: var(--accent-bright); font-weight: 500; }

/* ---------- the panel ---------------------------------------------------- */
.why {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 4vw, 56px); align-items: start;
  padding-block: clamp(40px, 4.4vw, 68px);
}
.why__list { list-style: none; margin: 0; display: grid; gap: 15px; align-content: start; }
.why__list li { display: flex; gap: 12px; color: var(--ink-soft); font-size: 1rem; }
.why__copy .btn { margin-top: clamp(22px, 2.6vw, 30px); }

/* ---------- pricing ------------------------------------------------------ */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.plan { padding: clamp(22px, 2.4vw, 30px); position: relative; }
.plan:hover { transform: translateY(-3px); border-color: var(--edge-lit); box-shadow: var(--shadow-md); }

/* A marked plan is lit: gradient edge, a wash, and a glow under it. */
.plan--featured, .plan.is-struck {
  border-color: transparent;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    var(--grad) border-box;
  box-shadow: var(--glow);
}
.plan.is-struck .plan__name,
.plan.is-struck .plan__amount,
.plan.is-struck .plan__currency { color: var(--spot-2); }
.plan__name { font-size: 1.3rem; }
.plan__for { color: var(--ink-faint); font-size: 0.9rem; margin-top: 6px; }
.plan__price { display: flex; align-items: baseline; gap: 3px; margin: 20px 0 3px; font-variant-numeric: tabular-nums; }
.plan__currency { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink-soft); }
.plan__amount { font-family: var(--font-display); font-weight: 700; font-size: 3.1rem; letter-spacing: -0.045em; line-height: 1; }
.plan__per { color: var(--ink-faint); font-size: 0.95rem; }
.plan__fee { font-size: 0.9rem; color: var(--ink-soft); }
.plan__domain { font-size: 0.9rem; color: var(--ink-faint); margin-bottom: 20px; }
.plan__cta { width: 100%; margin-bottom: 8px; }
.plan__nopay { font-size: 0.84rem; color: var(--ink-faint); margin-bottom: 18px; }
.plan__list { list-style: none; display: grid; gap: 10px; }
.plan__list li { display: flex; gap: 10px; color: var(--ink-soft); font-size: 0.96rem; }

.pricing__note { color: var(--ink-faint); font-size: 0.9rem; margin-top: 22px; max-width: 78ch; }
.pricecompare { margin-top: 34px; }
.pricecompare__note { color: var(--ink-faint); font-size: 0.86rem; margin: 8px 0 16px; }

/* ---------- FAQ ---------------------------------------------------------- */
.faq { border-top: 0; padding-top: 0; max-width: 820px; display: grid; gap: 10px; }
.faq__item { overflow: hidden; }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 18px clamp(18px, 2vw, 24px);
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: -0.015em;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  transition: color .15s linear;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--spot-2); }
.faq__item summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--spot-2); border-bottom: 2px solid var(--spot-2);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
}
.faq__item[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq__item p {
  padding: 0 clamp(18px, 2vw, 24px) 20px; color: var(--ink-soft);
  font-size: 1rem; max-width: var(--measure);
}

/* ---------- closing block ------------------------------------------------ */
.cta {
  padding: clamp(52px, 6vw, 88px) 0;
  border-bottom: 1px solid var(--edge);
}
.cta__inner { display: grid; gap: 18px; }
.cta__inner > * { max-width: 820px; }
.cta__points { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.cta__points li { display: inline-flex; align-items: baseline; gap: 9px; color: var(--ink-soft); font-size: 1rem; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ---------- colophon ----------------------------------------------------- */
.footer { background: var(--foot); color: var(--ink-soft); padding: clamp(40px, 4vw, 56px) 0 24px; }
.footer__inner { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.footer__brand .brand { color: var(--ink); }
.footer__tag { margin-top: 14px; max-width: 36ch; color: var(--ink-faint); font-size: 0.95rem; }
.footer__email { display: block; margin-top: 10px; color: var(--ink-soft); font-size: 0.95rem; text-decoration: none; }
.footer__email:hover { color: var(--spot-2); }
/* auto-fit, not a fixed count: the footer carries two columns on the product
   pages and three on the marketing pages, and it should not need a rule per
   page to lay either out. */
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.footer__col { display: grid; gap: 11px; align-content: start; }
.footer__col h2, .footer__head {
  color: var(--ink); font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; font-size: 0.74rem; letter-spacing: var(--track-label);
  margin-bottom: 6px;
}
.footer__col a { color: var(--ink-faint); font-size: 0.93rem; text-decoration: none; transition: color .15s linear; }
.footer__col a:hover { color: var(--ink); }
.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--edge);
  font-size: 0.86rem; color: var(--ink-faint);
}
.footer__legal { display: flex; gap: 20px; }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover, .footer__bottom a:hover { color: var(--spot-2); }

/* ---------- product pages ------------------------------------------------ */
.prodcard h2 { font-size: 1.24rem; }
.prodgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); margin-top: 30px; }
.prodcard p { margin-top: 10px; color: var(--ink-soft); font-size: 1rem; }

.miniprice {
  font-variant-numeric: tabular-nums; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--card-gap); margin-top: 30px;
}
.miniprice a {
  display: block; padding: clamp(20px, 2.2vw, 26px);
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s linear, box-shadow .22s linear;
}
.miniprice a:hover { transform: translateY(-3px); border-color: var(--spot); box-shadow: var(--glow); }
.miniprice b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; letter-spacing: -.04em; }
.miniprice span { display: block; color: var(--ink-soft); font-size: 0.93rem; margin-top: 6px; }
@media (max-width: 760px) { .miniprice { grid-template-columns: 1fr; } }

/* ---------- the start form ---------------------------------------------- */
.request { padding: clamp(32px, 4vw, 56px) 0; }
.request__head { margin-bottom: 28px; }
.request__back {
  font-family: var(--font-body); font-size: 0.9rem;
  color: var(--ink-faint); text-decoration: none;
}
.request__back:hover { color: var(--spot-2); }
.request-form {
  display: grid; gap: 18px;
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 34px);
  box-shadow: var(--shadow-md);
}
.request-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label, .request-form label {
  font-family: var(--font-body); font-weight: 500; font-size: 0.9rem;
  color: var(--ink-soft);
}
.field input, .field textarea, .field select,
.request-form input, .request-form textarea, .request-form select {
  font: inherit; font-size: 0.98rem; color: var(--ink);
  background: var(--field); border: 1px solid var(--edge-lit);
  border-radius: var(--radius);
  padding: 12px 14px; width: 100%;
  transition: border-color .15s linear, box-shadow .15s linear;
}
.field input::placeholder, .field textarea::placeholder,
.request-form input::placeholder, .request-form textarea::placeholder { color: var(--ink-faint); }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus, .field select:focus,
.request-form input:focus, .request-form textarea:focus {
  outline: none; border-color: var(--spot); box-shadow: 0 0 0 3px rgba(var(--spot-rgb), .22);
}
.form-note { font-size: 0.9rem; color: var(--ink-faint); }
.form-note.is-success { color: var(--spot-2); }
.form-note.is-error { color: var(--error); }

.plan-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.plan-picker input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.plan-picker label {
  display: grid; gap: 5px; cursor: pointer; padding: 16px 18px;
  color: var(--ink);
  transition: border-color .18s linear, background-color .18s linear, box-shadow .18s linear;
}
.plan-picker label:hover { border-color: var(--edge-lit); background: var(--glass-2); }
.plan-picker input:checked + label {
  border-color: var(--spot); background: rgba(var(--spot-rgb), .12); box-shadow: var(--glow);
}
.plan-picker input:focus-visible + label { outline: 2px solid var(--spot-2); outline-offset: 3px; }
.pp-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.pp-price { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.pp-domain { font-size: 0.84rem; color: var(--ink-faint); }

/* ---------- the thank-you page ------------------------------------------- */
.thanks .ad__head { margin-top: 0; max-width: 22ch; }
.thanks .ad__sub { max-width: 52ch; }
.thanks__contact { display: grid; gap: 6px; margin-top: 4px; font-size: 0.98rem; color: var(--ink-soft); }
.thanks__contact a { color: var(--accent-bright); font-weight: 500; text-decoration: none; }
.thanks__contact a:hover { color: var(--spot-2); }
#next .step__title { margin-top: 8px; }

/* ---------- legal pages -------------------------------------------------- */
.legal { padding: clamp(32px, 4vw, 56px) 0 72px; }
.legal__doc { max-width: 72ch; }
.legal__doc h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.8rem); }
.legal__updated {
  color: var(--ink-faint); font-size: 0.9rem; margin: 14px 0 30px;
  padding-bottom: 16px; border-bottom: 1px solid var(--edge);
}
.legal__doc h2 { font-size: 1.4rem; margin: 44px 0 12px; }
.legal__doc h3 { font-size: 1.1rem; margin: 26px 0 8px; }
.legal__doc p, .legal__doc li { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.7; }
.legal__doc p { margin-bottom: 14px; }
.legal__doc ul { margin: 0 0 16px; padding-left: 1.2em; display: grid; gap: 8px; }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 1000px) {
  .why { grid-template-columns: 1fr; gap: 32px; }
  .footer__inner { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 900px) {
  .fold__top { grid-template-columns: 1fr; }
  .ads, .pricing, .steps, .prodgrid, .plan-picker { grid-template-columns: 1fr; }
  .nav {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(13, 24, 48, .98);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--edge);
    padding: 0 var(--gutter) 18px; opacity: 0; pointer-events: none; transform: translateY(-8px);
    transition: opacity .18s linear, transform .18s linear;
  }
  .nav.is-open { opacity: 1; pointer-events: auto; transform: none; }
  .nav__link { padding: 15px 0; border-bottom: 1px solid var(--edge); font-size: 1rem; }
  .nav__cta { margin-top: 14px; text-align: center; }
  .nav-toggle { display: flex; }
}

@media (max-width: 760px) {
  .request-form .row { grid-template-columns: 1fr; }
  .ad__head { letter-spacing: -0.03em; }
  .rate-table th, .rate-table td { padding-inline: 13px; }
}

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


/* ==========================================================================
   STACK drawing - the parts that change shape, not just colour.
   ========================================================================== */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; }
.ad__head { letter-spacing: -0.02em; line-height: 1.05; }
.brand__name { font-size: 1.12rem; letter-spacing: -0.01em; }
.brand__mark { filter: none; }
.brand__mark img { display: block; width: 32px; height: 32px; border-radius: 8px; }

/* The one-colour headline accent: solid, not a gradient clip. */
.ad__head em { background: none; -webkit-text-fill-color: currentColor; color: var(--spot-2); }

/* Eyebrows: sentence-case weight, a plain rule under them. */
.flag { border-image: none; border-bottom: 1px solid var(--rule); letter-spacing: var(--track-label); font-size: 0.8rem; }

/* Cards: white, a hairline, a soft shadow - no glass, no lit edge. */
.coupon__inner, .box, .step, .plan, .prodcard, .faq__item, .plan-picker label {
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow-sm);
}
.coupon__inner::before, .box::before, .step::before, .plan::before,
.prodcard::before, .faq__item::before, .plan-picker label::before { content: none; }
.plan--featured, .plan.is-struck { border: 2px solid var(--spot); background: var(--surface-2); box-shadow: var(--glow); }
.rate-table tr.is-us { background: rgba(var(--spot-rgb), .10); }
.rate-table tr.is-us > :first-child::before { background: var(--spot); box-shadow: none; }
.pressrule { background: var(--rule); height: 1px; }

/* Buttons: solid pill. */
.btn--primary { background: var(--spot-deep); box-shadow: none; }
.btn--primary:hover { background: var(--spot-press); box-shadow: var(--glow); filter: none; }
.btn--ghost { background: transparent; border-color: var(--edge-lit); }
.btn--ghost:hover { background: var(--glass-2); border-color: var(--ink); }

/* The top of every page is a navy band, lit from the right like the hero. */
.fold {
  background:
    radial-gradient(55% 80% at 88% 20%, rgba(var(--spot-rgb), .30), transparent 70%),
    linear-gradient(180deg, #0D1830, #101E3D);
  padding: clamp(48px, 6vw, 96px) 0 clamp(52px, 6vw, 92px);
  margin-bottom: clamp(52px, 6vw, 92px);
}
.request, .legal { padding-top: clamp(40px, 5vw, 72px); }

/* Dark sections become full navy bands. */
.section--dark { background: #0D1830; padding-block: clamp(56px, 7vw, 104px); }
.section--dark::before, .section--dark::after { content: none; }
.section--dark.cta { margin-bottom: 0; border-bottom: 0; }

/* Masthead and footer, as on the homepage. */
.header { border-bottom-color: rgba(242, 245, 251, .08); }
.header__inner { height: 72px; }
.nav__link { font-size: 0.97rem; }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__cta { padding: 12px 20px; }
.footer { background: var(--foot); }
.footer__col h2, .footer__head { text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 700; }
@media (max-width: 900px) { .nav { inset: 72px 0 auto 0; } }

/* Labels in sentence case, as on the homepage - no tracked capitals. */
.flag, .coupon__head, .rate-table thead th {
  text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
}
.rate-table thead th { font-size: 0.88rem; }

/* Five links plus the button need ~1050px, so the menu collapses earlier
   than the page grid does (grid rules stay at 900px). */
@media (max-width: 1080px) {
  .nav {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(13, 24, 48, .98);
    border-bottom: 1px solid var(--edge);
    padding: 0 var(--gutter) 18px; opacity: 0; pointer-events: none; transform: translateY(-8px);
    transition: opacity .18s linear, transform .18s linear;
  }
  .nav.is-open { opacity: 1; pointer-events: auto; transform: none; }
  .nav__link { padding: 15px 0; border-bottom: 1px solid var(--edge); font-size: 1rem; }
  .nav__cta { margin-top: 14px; text-align: center; }
  .nav-toggle { display: flex; }
}
a.industry, li a.industry { text-decoration: none; color: var(--ink); }

/* ---------- file pickers on the request form ---------- */
.request-form input[type="file"] { padding: 10px; font-size: 0.92rem; cursor: pointer; }
.request-form input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; margin-right: 12px; padding: 6px 12px; border: 0;
  border-radius: 8px; background: var(--spot); color: #fff; cursor: pointer;
}
.request-form select { width: 100%; font: inherit; color: var(--ink); background: var(--field, var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }

/* ---------- the Products menu in the header (2026-10-14) ----------
   Websites, Products (Stacks AI, Stacks Ads, AI agents, Academy) and Account. On a computer the products
   open from the button (or on hover); in the phone menu they are listed in full under a small label. */
.nav__group { position: relative; }
.nav__more { display: inline-flex; align-items: center; gap: 7px; padding: 0; background: none; border: 0; cursor: pointer; }
.nav__more::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease-out, margin .15s ease-out;
}
.nav__group.is-open > .nav__more::after { transform: rotate(225deg); margin-top: 3px; }
.nav__group:has([aria-current="page"]) > .nav__more,
.nav__group.is-open > .nav__more { color: var(--ink); }
.nav__menu {
  position: absolute; top: calc(100% + 16px); left: -16px; z-index: 60; min-width: 212px;
  display: flex; flex-direction: column; padding: 8px;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 14px;
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s linear, transform .15s ease-out, visibility .15s;
}
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }  /* the pointer can cross the gap */
.nav__menu .nav__link { padding: 10px 12px; border-radius: 9px; white-space: nowrap; }
.nav__menu .nav__link:hover, .nav__menu .nav__link:focus-visible { background: var(--glass-2); color: var(--ink); }
.nav__group.is-open > .nav__menu,
html:not(.has-menu) .nav__group:hover > .nav__menu,
html:not(.has-menu) .nav__group:focus-within > .nav__menu { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 1080px) {
  .nav__group { position: static; }
  .nav__more { display: none; }
  .nav__menu {
    position: static; min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .nav__menu::before { content: "Products"; position: static; height: auto; padding: 16px 0 2px; font: 700 .78rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
  .nav__menu .nav__link { padding: 15px 0 15px 14px; border-radius: 0; }
  .nav__menu .nav__link:hover { background: none; }
}

/* ---------- the header since 2026-10-25: Account alone ----------
   Jakob: "get rid of the navigators in the corner, except for account". One link has nothing to fold away, so
   .nav--solo stays in the bar at every width. Signed in, account-menu.js turns it into the Account menu (Dashboard,
   Plans and pricing, Settings, Your data, Sign out), which opens from the right edge, on a phone as well. */
.nav.nav--solo {
  position: static; flex-direction: row; align-items: center; gap: 0; padding: 0;
  background: none; border: 0; opacity: 1; pointer-events: auto; transform: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; transition: none;
}
.nav--solo > .nav__link, .nav--solo .nav__more { padding: 0; border: 0; font-size: 0.97rem; }
.nav--solo .nav__group { position: relative; }
.nav--solo .nav__more { display: inline-flex; color: var(--ink-soft); }
.nav--solo .nav__menu { left: auto; right: -12px; }
.nav--solo .nav__signout { font: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
@media (max-width: 1080px) {
  .nav--solo .nav__menu {
    position: absolute; min-width: 212px; padding: 8px;
    background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .55);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s linear, transform .15s ease-out, visibility .15s;
  }
  .nav--solo .nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; padding: 0; }
  .nav--solo .nav__menu .nav__link { padding: 10px 12px; border: 0; border-radius: 9px; }
  .nav--solo .nav__group.is-open > .nav__menu { opacity: 1; visibility: visible; transform: none; }
}