/* ==========================================================================
   world.css - the SmallStacks classified-page design system.
   --------------------------------------------------------------------------
   THIS FILE IS A COPY of smallstacks.net/styles.css, shipped here because
   Stacks AI is a separate Worker on its own domain and must not take a
   render-blocking cross-origin dependency on the marketing site.

   DESIGN.md in the SmallStacks project is the authority for every token and
   rule below. When that file changes, copy it here again rather than editing
   this one; a local edit is drift between two products meant to look like one
   company.
   ========================================================================== */

/* ==========================================================================
   smallstacks.net — AURORA
   --------------------------------------------------------------------------
   A dark modern software surface: deep ink ground with a slow blue-to-cyan
   aurora behind it, glass panels lit along one edge, gradient hairlines, and
   glow where something is meant to be pressed.

   Replaced the classified-page direction on 2026-09-23 at the user's request:
   "more modern and flashy". Everything from that world is gone — the newsprint
   stock, the reverse-out flags, the zero radius, the ban on shadow and
   gradient. What carried over is the brand's blue, pushed brighter for a dark
   ground, and the class vocabulary, so every page and both product surfaces
   re-themed from this one file.

   THE RULE OF THIS WORLD: light is the material. Nothing is drawn with a
   border where it can be drawn with light — a lit edge, a glow, a gradient
   hairline, a tint that looks like something bright is behind it. Flat grey
   borders are the one thing this direction refuses, because they are what make
   a dark theme look like a light theme with the colours swapped.
   ========================================================================== */

:root {
  /* ---- the ground. Four steps, all cool and near-black. Never pure #000:
     a true black ground kills the glow, because there is nothing for light to
     fall off. ---- */
  --bg: #0B0D12;               /* the page                                   */
  --surface: #12151D;          /* a panel band across the page               */
  --surface-2: #171B25;        /* a raised panel                             */
  --foot: #070910;             /* the colophon, deeper than the page         */

  /* ---- the inks. Measured against every ground above; the faint step clears
     4.5:1 on the lightest of them (5.7:1) with room to spare. ---- */
  --ink: #EEF2FF;              /* 14.9-17.8:1                                */
  --ink-soft: #A9B4CC;         /*  8.0-9.6:1                                 */
  --ink-faint: #8695B3;        /*  5.5-6.6:1                                 */

  /* ---- the light. THREE values, and they are not interchangeable:
     --spot fills and glows and must never carry text (4.32:1 on the ground,
     under the floor); --accent-bright is the one that carries text (6.15:1);
     --spot-2 is the cyan end of every gradient and is safe for both. ---- */
  --spot: #2E6BFF;
  --spot-deep: #1B49CE;        /* the dark end of a pressed gradient         */
  --spot-2: #22D3EE;           /* cyan: 10.7:1, safe as text or as a mark    */
  --accent-bright: #5B8CFF;    /* accent TEXT and links                      */

  /* The same two colours as RGB triples, because every glow, wash and focus
     ring needs them inside an rgba(). Without these a second accent could not
     exist: the alpha values would still be hardcoded blue. */
  --spot-rgb: 46, 107, 255;
  --spot-2-rgb: 34, 211, 238;

  --grad: linear-gradient(100deg, var(--spot-deep) 0%, var(--spot) 55%, var(--spot-2) 100%);
  --grad-press: linear-gradient(100deg, var(--spot-deep) 0%, var(--spot-press) 100%);
  --grad-rule: linear-gradient(90deg, transparent, var(--spot) 18%, var(--spot-2) 52%, transparent);

  /* The light end of the pressed gradient, kept separate because it is the
     point where white text is closest to the contrast floor. */
  --spot-press: #2861F0;

  /* ---- glass. A panel is a sheet of very slightly lit air, with a brighter
     hairline where the light catches its top edge. ---- */
  --glass: rgba(255, 255, 255, 0.035);
  --glass-2: rgba(255, 255, 255, 0.055);
  --edge: rgba(255, 255, 255, 0.09);
  --edge-lit: rgba(255, 255, 255, 0.16);
  --rule: rgba(255, 255, 255, 0.10);

  /* ---- depth. Real shadows now, plus a glow the old world banned outright. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 14px 34px -14px rgba(0, 0, 0, .75);
  --shadow-lg: 0 34px 70px -28px rgba(0, 0, 0, .85);
  --glow: 0 0 0 1px rgba(var(--spot-rgb), .35), 0 14px 40px -12px rgba(var(--spot-rgb), .45);
  --glow-strong: 0 0 0 1px rgba(var(--spot-rgb), .55), 0 18px 54px -10px rgba(var(--spot-rgb), .62);

  /* ---- shape. The old world was radius 0 everywhere; this one is soft. ---- */
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- type. Space Grotesk sets the display with tight negative tracking;
     Inter sets everything read at length. Headings are SENTENCE CASE — the
     uppercase display of the previous direction is the single biggest thing
     that made it read as print rather than as software. ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Uppercase survives only in eyebrow labels and controls. */
  --track-label: .14em;
  --track-control: .02em;

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

  /* ---- aliases the account and product stylesheets consume. They are all
     backgrounds or borders over there, so they map to grounds and edges. The
     three places that used --ink or --stock the other way round are fixed at
     their own call sites. ---- */
  --stock: var(--bg);
  --stock-2: var(--surface);
  --paper-white: var(--surface-2);
  --bg-alt: var(--surface);
  --bg-dark: var(--foot);
  --bg-dark-2: #0D1017;
  --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);
}

*, *::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: dark;
}

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

/* The aurora. Two broad, very low-alpha lights behind everything, drifting
   slowly. `fixed` so it does not scroll with the page — the ground stays lit
   while the content moves across it. Pointer-events none, so it can never
   swallow a click. */
body::before {
  content: "";
  position: fixed; inset: -20vh -10vw auto -10vw; height: 140vh;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(52vw 42vh at 18% 8%, rgba(var(--spot-rgb), .20), transparent 68%),
    radial-gradient(44vw 36vh at 86% 2%, rgba(var(--spot-2-rgb), .13), transparent 66%),
    radial-gradient(60vw 50vh at 62% 52%, rgba(var(--spot-rgb), .09), transparent 72%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}
/* Everything sits above the aurora. */
body > * { position: relative; z-index: 1; }

/* ---------- per-product accents -----------------------------------------
   One world, three accents. SmallStacks itself stays blue; Stacks AI is red
   and Fintavo is green, set with `data-theme` on <html> so the override lands
   before anything paints and cannot flash the wrong colour.

   Each theme restates SIX tokens and nothing else. That is the whole surface
   area, and it is only that small because the glows and washes read their RGB
   from --spot-rgb / --spot-2-rgb rather than carrying a literal blue.

   Every value below was measured on #181a1f - glass over the base ground, the
   lightest thing text sits on here - and on white-over-fill for the button:

     red    accent text 7.67:1   second hue 9.15:1   white on button 7.13 -> 4.83
     green  accent text 11.27:1  second hue 11.54:1  white on button 6.36 -> 5.02

   Do not collapse a theme to one hue. For both of these, the value white can
   sit on is too dark to read as text, and the value that reads as text cannot
   carry white. Four roles is the minimum. */

[data-theme="red"] {
  --spot: #EF4444;
  --spot-deep: #B01218;
  --spot-press: #DC2626;
  --spot-2: #FFA94D;
  --accent-bright: #FF8A8A;
  --spot-rgb: 239, 68, 68;
  --spot-2-rgb: 255, 169, 77;
}

[data-theme="green"] {
  --spot: #22C55E;
  --spot-deep: #106E34;
  --spot-press: #15803D;
  --spot-2: #A3E635;
  --accent-bright: #6EE7A0;
  --spot-rgb: 34, 197, 94;
  --spot-2-rgb: 163, 230, 53;
}

/* The aurora is painted from literal rgba on body::before, so it needs the
   triples too or a red page would keep a blue sky. */
body::before {
  background:
    radial-gradient(52vw 42vh at 18% 8%, rgba(var(--spot-rgb), .20), transparent 68%),
    radial-gradient(44vw 36vh at 86% 2%, rgba(var(--spot-2-rgb), .13), transparent 66%),
    radial-gradient(60vw 50vh at 62% 52%, rgba(var(--spot-rgb), .09), transparent 72%);
}

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; }

.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(11, 13, 18, .72);
  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: rgba(0, 0, 0, .28);
  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: rgba(255, 255, 255, .03);
}
.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;
}
.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: 1.3fr 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); }
.footer__cols { display: grid; grid-template-columns: repeat(2, 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: rgba(0, 0, 0, .3); border: 1px solid var(--edge);
  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: #FF9B9B; }

.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(11, 13, 18, .96);
    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; }
  body::before { animation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}