/*
 * AUTECTA, THE PUBLIC SITE (section 10, 30 September 2026). One stylesheet for every page on the
 * apex. Direction A, "The Drawing", loud outside: paper, ink, international orange, blueprint for
 * the hero and the door. Archivo 800 for display, IBM Plex Mono for every reference, stage, date
 * and label. Soft corners (B3), full width (B7), phone first, and every movement switched off
 * under prefers-reduced-motion.
 *
 * Layers, bottom to top: the building sketched behind the page (0), the paper sections, which are
 * transparent so the building shows through (1), the tape along the side (2), the opaque sections
 * it slips behind (3), the header (20).
 *
 * Contrast rules from the brand kit, measured: labels in #6a665e, never #8b877e; text on orange is
 * ink; orange text on paper only at 24px and above.
 */

@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap; src: url("/fonts/archivo-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url("/fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-display: swap; src: url("/fonts/archivo-800.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2"); }

:root {
  --paper: #f2f1ec;
  --white: #ffffff;
  --sunk: #e9e7e0;
  --ink: #0b0b0a;
  --ink-2: #4a4844;
  --ink-3: #6a665e;
  --rule: #dcd8ce;
  --field: var(--ink-3);
  --orange: #e85002;
  --deep: #c10801;
  --blue: #12315c;
  --on-blue: #f2f1ec;
  --on-blue-2: #c9d3e2;
  --ink-raised: #151513;
  --ink-rule: #2c2b28;
  --ash: #a9a49a;
  --practice: #2f4858;

  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --m: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --r1: 8px;
  --r2: 12px;
  --r3: 18px;
  --r4: 24px;
  --r5: 32px;
  --gut: clamp(16px, 4vw, 72px);
  --top-h: 68px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --lift: 0 1px 0 rgba(11, 11, 10, 0.04), 0 18px 40px -26px rgba(11, 11, 10, 0.4);

  /* How long a line of reading may run: wider on wider screens, so nothing wraps early there. */
  --measure: 62ch;
  --measure-lead: 52ch;
}
@media (min-width: 1600px) { :root { --measure: 70ch; --measure-lead: 58ch; } }
@media (min-width: 2400px) { :root { --measure: 78ch; --measure-lead: 66ch; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--f);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; }
p { margin: 0 0 14px; }
/* Gerold, 5 October 2026, and before: no early wrapping and no word alone on a last line, sitewide.
   Headings balance their lines; reading text breaks so its last line is never a single word. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, summary, figcaption, blockquote { text-wrap: pretty; }
/* Card text is short: its lines balance, so the last is never one word. */
.mod p, .fit > p, .gain-panel p, .facts span, .steps span, .worry p, .signin-lead, .signin-note { text-wrap: balance; }
.accent { color: var(--orange); }
.nw { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.mono { font-family: var(--m); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wide { padding-inline: var(--gut); }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 40;
  background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--r2);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

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

.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 22px;
  font: 600 12px/1.3 var(--m); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
}
.eyebrow::before { content: ""; width: 9px; height: 9px; background: var(--orange); border-radius: 2px; flex: none; }
.eyebrow-dark { color: var(--ash); }

.h1, .h2 {
  font-family: var(--f); font-weight: 800; text-transform: uppercase; margin: 0;
  letter-spacing: -0.035em; text-wrap: balance;
}
.h1 { font-size: clamp(40px, 6.2vw, 116px); line-height: 0.93; }
.h2 { font-size: clamp(32px, 4.4vw, 80px); line-height: 0.95; }
.h2-xl { font-size: clamp(48px, 8.4vw, 160px); line-height: 0.88; }
.h3x { font: 800 clamp(22px, 2.2vw, 34px)/1 var(--f); text-transform: uppercase; letter-spacing: -0.02em; margin: 0 0 10px; text-wrap: balance; }
.lead { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.45; color: var(--ink); max-width: var(--measure-lead); text-wrap: balance; }
.lead-dark { color: #d8d3c9; }

/* The drawing number in the corner of every section: the set of drawings the site is. */
.sheet {
  position: absolute; top: 22px; left: var(--gut); margin: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  font: 600 11px/1 var(--m); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.sheet::before { content: ""; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 50%; flex: none; }
.sheet-hero, .sheet-dark { color: var(--on-blue-2); }
.sheet-dark { color: var(--ash); }
.sheet-orange { color: var(--ink); }

/* registration crosses, never more than four */
.reg { position: absolute; width: 22px; height: 22px; pointer-events: none; z-index: 1; }
.reg::before, .reg::after { content: ""; position: absolute; background: var(--orange); }
.reg::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.reg::after { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
.reg-tl { top: 18px; left: 18px; } .reg-tr { top: 18px; right: 18px; }
.reg-bl { bottom: 18px; left: 18px; } .reg-br { bottom: 18px; right: 18px; }
.cta .reg::before, .cta .reg::after { background: var(--ink); }

/* ------------------------------------------------------------------ buttons (B3: softer corners) */

.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 18px; border-radius: var(--r2); border: 1.5px solid transparent;
  font: 600 15px/1 var(--f); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.25s, transform 0.2s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 16px; border-radius: 14px; }
.btn-block { width: 100%; }
.btn-primary {
  background: var(--orange); color: var(--ink);
  box-shadow: inset 0 -2px 0 rgba(11, 11, 10, 0.14), 0 10px 22px -12px rgba(232, 80, 2, 0.75);
}
.btn-primary:hover { background: var(--deep); color: var(--white); }
.btn-ghost-light { color: var(--paper); border-color: rgba(242, 241, 236, 0.5); }
.btn-ghost-light:hover { border-color: var(--paper); background: rgba(242, 241, 236, 0.08); }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 0 14px 26px -16px rgba(11, 11, 10, 0.8); }
.btn-ink:hover { background: #2a2926; }
.btn-line-ink { color: var(--ink); border-color: var(--ink); }
.btn-line-ink:hover { background: var(--ink); color: var(--paper); }
/* The sign-in door's one job is Continue: the header's Book a demo steps back to an ink outline there, so the page holds
   one filled orange button (UI audit, 14 October 2026, G98). */
.page-signin .top .btn-primary { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; }
.page-signin .top .btn-primary:hover { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------------ the header (B1, B2, B4) */

.top {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--top-h); color: var(--ink);
  background: rgba(242, 241, 236, 0.84);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid rgba(220, 216, 206, 0.9);
  transition: transform 0.5s var(--ease-out), background-color 0.35s, color 0.35s, border-color 0.35s;
}
.top.is-hidden { transform: translateY(-100%); }
.top.on-dark { background: rgba(8, 12, 20, 0.3); border-color: rgba(242, 241, 236, 0.08); color: var(--paper); }
.top-in { height: 100%; display: flex; align-items: center; gap: 14px; padding-inline: var(--gut); }

/* The Tile as an app icon, with the wordmark behind it that slides out on hover (Q3 override). */
.brand { position: relative; display: block; width: 42px; height: 42px; flex: none; color: inherit; border-radius: 11px; }
.brand-tile {
  position: relative; z-index: 2; display: block; width: 42px; height: 42px;
  filter: drop-shadow(0 1px 1px rgba(11, 11, 10, 0.35)) drop-shadow(0 10px 14px rgba(11, 11, 10, 0.3));
  transition: transform 0.5s var(--ease-out);
}
.brand-tile svg { display: block; width: 100%; height: 100%; }
.on-dark .brand-tile { --tile-ground: #f2f1ec; --tile-ink: #0b0b0a; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45)); }
.brand-word {
  position: absolute; z-index: 1; left: 0; top: 50%; width: 160px; pointer-events: none;
  transform: translate(-24px, -50%); opacity: 0; clip-path: inset(0 0 0 40px);
  transition: transform 0.6s var(--ease-out), opacity 0.25s, clip-path 0.6s var(--ease-out);
}
.brand-word svg { display: block; width: 160px; height: auto; }
.brand:hover .brand-word, .brand:focus-visible .brand-word { transform: translate(56px, -50%); opacity: 1; clip-path: inset(0 0 0 0); }
.brand:hover .brand-tile { transform: rotate(-4deg) scale(1.04); }

.nav { display: none; }
.menu-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  border: 1.5px solid currentColor; border-radius: var(--r2); background: transparent; color: inherit;
  font: 600 12px/1 var(--m); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.menu-lines { position: relative; width: 18px; height: 10px; }
.menu-lines i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.35s var(--ease-out), top 0.35s var(--ease-out); }
.menu-lines i:first-child { top: 0; } .menu-lines i:last-child { top: 8px; }
.menu-open .menu-lines i:first-child { top: 4px; transform: rotate(45deg); }
.menu-open .menu-lines i:last-child { top: 4px; transform: rotate(-45deg); }
/* One height in the phone's header: Book a demo is the Menu button's 44 (UI audit, 14 October 2026, G85 and G90). */
.top-cta { margin-left: auto; min-height: 44px; padding: 0 14px; font-size: 14px; }
.top-cta + .menu-btn { margin-left: 0; }

@media (max-width: 1099px) {
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - var(--top-h));
    display: flex; flex-direction: column; gap: 28px; padding: 24px var(--gut) 40px; overflow-y: auto;
    background: var(--paper); color: var(--ink);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 0.3s, transform 0.4s var(--ease-out), visibility 0s 0.4s;
  }
  .menu-open { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--rule) !important; }
  .menu-open .brand-tile { --tile-ground: #0b0b0a; --tile-ink: #f2f1ec; }
  .menu-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s, transform 0.4s var(--ease-out); }
  .nav-list { list-style: none; margin: 0; padding: 0; }
  .nav-list a {
    display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none;
    font: 800 clamp(28px, 8vw, 46px)/1 var(--f); text-transform: uppercase; letter-spacing: -0.03em;
  }
  .nav-end { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
  .nav-signin { font-weight: 600; font-size: 18px; }
}
@media (max-width: 380px) { .menu-label { display: none; } }

@media (min-width: 1100px) {
  .menu-btn, .top-cta { display: none; }
  .nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-left: 186px; }
  .nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(16px, 2vw, 34px); }
  .nav-list a, .nav-signin {
    position: relative; text-decoration: none; font: 600 15px/1 var(--f); padding: 0;
    /* A 40 px target in the 64 px bar (G88: the links were 20 px tall). */
    display: inline-flex; align-items: center; min-height: 40px;
  }
  .nav-list a::after, .nav-signin::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--orange);
    transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out);
  }
  .nav-list a:hover::after, .nav-signin:hover::after { transform: scaleX(1); }
  .nav-end { display: flex; align-items: center; gap: 22px; }
}

/* ------------------------------------------------------------------ the building behind (B16) */

.bld { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 2vw 2vh 0; }
.bld-svg { width: min(1240px, 76vw); height: auto; max-height: 74vh; }
@media (max-width: 900px) { .bld-svg { width: 100vw; max-height: 60vh; } }
.bld path {
  fill: none; stroke: rgba(11, 11, 10, 0.13); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--p, 0) - var(--a)) / (var(--b) - var(--a)), 1));
}
.bld .b-heavy { stroke: rgba(11, 11, 10, 0.2); stroke-width: 2; }
.bld .b-axis, .bld .b-dash, .bld .b-hatch { stroke: rgba(11, 11, 10, 0.08); }
.bld .b-roof { stroke: rgba(232, 80, 2, 0.75); stroke-width: 3; }
.bld text { font: 500 15px var(--m); fill: rgba(11, 11, 10, 0.28); opacity: clamp(0, (var(--p, 0) - var(--a)) * 14, 1); }
@media (max-width: 700px) { .bld { opacity: 0.6; } }

/* ------------------------------------------------------------------ the tape along the side (B8) */

.tape {
  display: none; position: fixed; top: 0; bottom: 0; right: 14px; width: 30px; z-index: 2; overflow: hidden;
  background: var(--orange); color: var(--ink); pointer-events: none;
  box-shadow: -1px 0 0 rgba(11, 11, 10, 0.18), 0 0 22px rgba(11, 11, 10, 0.14);
}
.tape::before, .tape-band::before {
  content: ""; position: absolute; inset: 0; opacity: 0.8;
  background:
    repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 8px) left top / 5px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 40px) left top / 10px 100% no-repeat;
  transform: translateY(calc(var(--tape, 0) * -1px));
}
.tape-in {
  position: absolute; top: 0; left: 10px; writing-mode: vertical-rl; white-space: nowrap;
  font: 600 11px/20px var(--m); letter-spacing: 0.22em; text-transform: uppercase;
  transform: translateY(calc(var(--tape, 0) * -1px));
}
.tape-in span, .tape-band-in span { display: inline-block; }
.tape-in span::after, .tape-band-in span::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 22px; background: var(--ink); transform: rotate(45deg); vertical-align: middle; }
.tape-in span::after { margin: 22px 0; }
@media (min-width: 1100px) { .tape { display: block; } }

.tape-band { position: relative; z-index: 3; overflow: hidden; background: var(--orange); color: var(--ink); height: 38px; border-block: 1px solid rgba(11, 11, 10, 0.25); }
.tape-band::before {
  background:
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 8px) left top / 100% 5px no-repeat,
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 40px) left top / 100% 10px no-repeat;
  transform: none;
}
.tape-band-in { position: absolute; left: 0; top: 13px; white-space: nowrap; font: 600 11px/20px var(--m); letter-spacing: 0.22em; text-transform: uppercase; animation: tape-run 40s linear infinite; }
@keyframes tape-run { to { transform: translateX(-50%); } }
@media (min-width: 1100px) { .tape-band { display: none; } }

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

main { position: relative; }
section { position: relative; }
.paper { z-index: 1; }
.hero, .night, .gains, .cta, .foot, .tape-band { z-index: 3; }

.split-head { display: grid; gap: 24px; margin-bottom: clamp(40px, 5vw, 72px); }
.split-head .lead + p { color: var(--ink-2); max-width: var(--measure); margin-top: 18px; }

/* A head that stacks: the heading across the section, then what it says underneath (5 October 2026). */
.stack-head { display: grid; gap: clamp(18px, 2vw, 28px); margin-bottom: clamp(40px, 5vw, 72px); }
.stack-head .h2, .stack-head .eyebrow { margin-bottom: 0; }
.stack-head .lead { max-width: none; margin: 0; }
.stack-head .lead + p { color: var(--ink-2); max-width: var(--measure); margin: 0; }
/* And one that is centred on the section. */
.center-head { display: grid; justify-items: center; gap: clamp(18px, 2vw, 28px); margin: 0 auto clamp(48px, 6vw, 88px); text-align: center; }
.center-head .eyebrow { margin: 0; }
.center-head .lead { margin: 0; }
/* Under a centred heading the lead runs nearly as wide as the heading, balanced, instead of wrapping early
   (Gerold, 7 October 2026: "the heading is spread nicely across the screen, but the subheading is wrapping too soon"). */
.center-head .lead, .center-head .lead-write { max-width: min(100%, 1240px); margin-inline: auto; text-wrap: balance; }
@media (min-width: 1000px) {
  .split-head { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); gap: clamp(40px, 6vw, 120px); align-items: end; }
}

.reveal { transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(var(--k, 0) * 70ms); }
.reveal.pre { opacity: 0; transform: translateY(28px); }

/* ------------------------------------------------------------------ the hero (B5, B6; walkthrough of 5 October 2026) */

/*
 * Centred, top to bottom: the Setting-Out (the approved hero drawing), the title, the line under it,
 * and the buttons at the foot, over a house drawn faintly in plan behind them. The stage is sticky:
 * with the script and movement allowed, the section grows by --walk and the stage holds still while
 * it scrolls past, so the scroll walks a figure up the path and in at the front door (site.js). With
 * no script, or under reduced motion, the section is one screen and the plan shows the door open and
 * the figure in it.
 */
.hero { background: var(--blue); color: var(--paper); overflow: clip; }
.hero.is-walking { height: calc(100vh + var(--walk)); height: calc(100svh + var(--walk)); --walk: 170vh; }
.hero-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center;
  padding: calc(var(--top-h) + 36px) var(--gut) clamp(84px, 11vh, 128px);
}
.hero-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(rgba(242, 241, 236, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 241, 236, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(242, 241, 236, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 241, 236, 0.07) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  background-position: center;
  animation: fade-in 1.4s ease both;
}
.hero-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(115% 85% at 50% 45%, transparent 45%, rgba(6, 20, 40, 0.6));
}

/* The plan: as tall as the stage, centred, wider than a phone and cropped to its middle there. */
.hero-plan { position: absolute; inset: calc(var(--top-h) + 28px) 0 0; z-index: -1; display: flex; justify-content: center; pointer-events: none; }
.plan {
  flex: none; height: 100%; width: auto; max-width: none; aspect-ratio: 22400 / 15500; overflow: visible;
  fill: none; stroke: var(--paper); stroke-linecap: round; stroke-linejoin: round;
}
.plan-ink { opacity: var(--plan-ink, 0.24); }
/* A blueprint scrim behind the centred column keeps the drawing, the title and its line clear of the
   plan's walls; it lifts with the words as the walk begins. */
.hero-stage > .hero-plan::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--out, 0));
  background: radial-gradient(ellipse 42% 46% at 50% 46%, rgba(18, 49, 92, 0.94) 0, rgba(18, 49, 92, 0.86) 55%, rgba(18, 49, 92, 0) 100%);
}
@media (max-width: 760px) { .hero-stage > .hero-plan::after { background: radial-gradient(ellipse 70% 40% at 50% 42%, rgba(18, 49, 92, 0.94) 0, rgba(18, 49, 92, 0.86) 55%, rgba(18, 49, 92, 0) 100%); } }
.plan text { fill: var(--paper); stroke: none; font-family: var(--m); font-weight: 600; text-anchor: middle; dominant-baseline: central; letter-spacing: 0.04em; }

.pl-grid, .pl-bub, .pl-wall, .pl-win, .pl-leaf, .pl-arc, .pl-fit, .pl-site, .pl-dim, .pl-cut {
  stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: draw 0.9s var(--ease-out) forwards;
}
.pl-grid { stroke-width: 12; opacity: 0.5; animation-duration: 1.6s; animation-timing-function: ease-out; }
.pl-bub { stroke-width: 18; fill: var(--blue); animation-duration: 0.7s; }
.pl-wall { stroke-width: 30; animation-duration: 0.7s; }
.pl-hatch rect { fill: url(#pl-hatch); stroke: none; }
.pl-hatch { opacity: 0; animation: hatch 1.2s ease forwards; }
.pl-win { stroke-width: 12; }
.pl-leaf { stroke-width: 34; }
.pl-arc { stroke-width: 10; opacity: 0.8; animation-duration: 1.1s; }
.pl-fit, .pl-site { stroke-width: 14; opacity: 0.85; }
.pl-site { animation-duration: 1.6s; }
.pl-dim { stroke-width: 10; opacity: 0.9; }
.pl-cut { stroke: var(--orange); stroke-width: 44; animation-duration: 0.6s; }
.pl-hob, .pl-stones, .pl-trunk { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; animation: fade-in 0.8s ease forwards; }
.pl-tx, .pl-north { opacity: 0; animation: fade-in 0.6s ease forwards; }
.pl-north { fill: var(--paper); stroke: none; }
.pl-sec { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: pop 0.7s var(--spring) forwards; }
.pl-sec circle { fill: var(--orange); stroke: none; }
.pl-sec path { stroke: var(--blue); stroke-width: 22; }
.plan .pl-sec text { fill: var(--blue); font-weight: 600; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes hatch { to { opacity: 0.4; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { to { transform: scale(1); } }

/* What moves: the front door on its swing, the footsteps and the figure, bright over the faded plan. */
.plan-live { opacity: 0; animation: fade-in 0.8s ease 2.9s forwards; }
.pl-door rect { fill: var(--paper); stroke: none; }
.pl-swing { stroke-width: 12; stroke-dasharray: 1 1; stroke-dashoffset: 0; opacity: 0.9; }
.pl-steps ellipse { fill: var(--paper); stroke: none; opacity: 0.38; }
.walker-body { fill: var(--blue); stroke: var(--paper); stroke-width: 26; }
.walker-head { fill: var(--orange); stroke: none; }
.walker-foot, .walker-hand { fill: var(--blue); stroke: var(--paper); stroke-width: 18; }

/* The Setting-Out, drawn in as it always was (B5). */
.hero-drawing { margin: 0 auto; width: min(100%, calc(30vh * 3.476)); }
.so { display: block; width: 100%; height: auto; overflow: visible; }
.so-grid, .so-ln { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: draw 0.9s var(--ease-out) forwards; }
.so-grid { animation-duration: 1.8s; animation-timing-function: ease-out; }
.so-lt { stroke: var(--paper); stroke-width: 3; stroke-dasharray: 1 1; stroke-dashoffset: 1; fill-opacity: 0; animation: letter 1.25s var(--ease-out) forwards; }
.so-tx, .so-roof, .so-mk { opacity: 0; animation: fade-in 0.6s ease forwards; }
.so-sec { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: pop 0.7s var(--spring) forwards; }
@keyframes letter {
  0% { stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1; }
  60% { stroke-dashoffset: 0; fill-opacity: 0; stroke-opacity: 1; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}

/* The words. */
.hero-in { align-self: center; display: grid; justify-items: center; gap: clamp(16px, 2.6vh, 30px); width: 100%; text-align: center; }
.hero-title {
  position: relative; margin: 0; max-width: 100%;
  font: 800 clamp(36px, min(5.5vw, 9.6vh), 120px)/0.9 var(--f); letter-spacing: -0.04em; text-transform: uppercase; text-wrap: balance;
}
/* The orange phrase on a line of its own, at every size: the title never fits one line from 1280 up. */
.pencil .w-end { display: block; }
.pencil .w { display: inline-block; clip-path: inset(-12% 100% -18% 0); animation: write 0.42s cubic-bezier(0.45, 0, 0.25, 1) forwards; animation-delay: calc(1.5s + var(--i) * 0.17s); }
.pencil .w.a { color: var(--orange); }
@keyframes write { to { clip-path: inset(-12% -4% -18% 0); } }
.pencil-line { position: absolute; left: 50%; bottom: -0.24em; width: 38%; height: 0.2em; transform: translateX(-50%); overflow: visible; }
.pencil-line path { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: draw 0.9s cubic-bezier(0.5, 0, 0.2, 1) 2.6s forwards; }
.hero-sub { margin: 0; font: 600 clamp(19px, 1.7vw, 28px)/1.3 var(--f); color: var(--paper); text-wrap: balance; animation: rise 0.8s var(--ease-out) 1.2s both; }
.hero-foot { align-self: end; width: 100%; }
.hero-foot .btns { justify-content: center; animation: rise 0.8s var(--ease-out) 1.3s both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* As the walk begins the words step aside; --out is set by site.js from 0 to 1. */
.hero-in, .hero-foot, .hero-marks { opacity: calc(1 - var(--out, 0)); transform: translateY(calc(var(--out, 0) * -36px)); }
.hero-out .hero-in, .hero-out .hero-foot, .hero-out .hero-marks { visibility: hidden; }

.hero-marks { position: absolute; inset: 0; pointer-events: none; }
.hero-marks .scroll-cue { pointer-events: auto; }
.sheet-hero { top: calc(var(--top-h) + 14px); }
.hero .reg-tl, .hero .reg-tr { top: calc(var(--top-h) + 14px); }
@media (max-width: 760px) { .hero .reg { display: none; } }

/* The way in: paper opening from the doorway, the colour of the record that follows. */
.hero-iris { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: var(--paper); visibility: hidden; }
.hero-iris.is-open { visibility: visible; }
.hero-iris .hero-plan { z-index: 0; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
/* Inside, the same plan the way the rest of the site is drawn: ink on paper. */
.plan-paper { stroke: var(--ink); }
.plan-paper .plan-ink { opacity: 0.5; }
.plan-paper text, .plan-paper .pl-north, .plan-paper .pl-door rect, .plan-paper .pl-steps ellipse { fill: var(--ink); }
.plan-paper .pl-bub { fill: var(--paper); }
.plan-paper .pl-hatch rect { fill: url(#pl-hatch-ink); }
.plan-paper .pl-sec path { stroke: var(--ink); }
.plan.plan-paper .pl-sec text { fill: var(--ink); }
.plan-paper .walker-body, .plan-paper .walker-foot, .plan-paper .walker-hand { fill: var(--paper); stroke: var(--ink); }

.tb { display: grid; grid-auto-flow: column; margin: 0; border: 1px solid currentColor; border-radius: var(--r1); overflow: hidden; }
.tb > div { padding: 8px 12px; border-left: 1px solid currentColor; }
.tb > div:first-child { border-left: 0; }
.tb dt { font: 600 9px/1 var(--m); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; margin-bottom: 5px; }
.tb dd { margin: 0; font: 500 12px/1.2 var(--m); }
.hero-block { position: absolute; right: var(--gut); bottom: 26px; color: var(--on-blue-2); animation: fade-in 0.8s ease 2s both; }
.scroll-cue {
  position: absolute; left: var(--gut); bottom: 28px; display: flex; align-items: center; gap: 12px;
  font: 600 11px/1 var(--m); letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-blue-2); text-decoration: none;
  animation: fade-in 0.8s ease 2.2s both;
}
.scroll-cue i { position: relative; width: 1.5px; height: 34px; background: rgba(201, 211, 226, 0.35); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--orange); animation: cue 1.8s var(--ease) 2.6s infinite; }
@keyframes cue { from { transform: translateY(-12px); } to { transform: translateY(34px); } }
@media (max-width: 760px) { .hero-block { display: none; } .hero-stage { padding-bottom: 88px; } }

/* ------------------------------------------------------------------ the record (B9, B21) */

.record { padding: clamp(96px, 12vw, 176px) 0 clamp(72px, 9vw, 136px); }
.statement {
  margin: 0 0 clamp(36px, 5vw, 72px); max-width: 17ch;
  font: 800 clamp(34px, 5.8vw, 108px)/0.93 var(--f); letter-spacing: -0.04em; text-transform: uppercase; text-wrap: balance;
}
.st-roof { color: var(--orange); }
/* site.js sets the statement one phrase to a line and brings each in as it scrolls into view (--p). */
.statement.is-lines { max-width: none; }
.statement.is-lines .st-ink, .statement.is-lines .st-roof { display: block; }
.statement .ln { display: block; width: fit-content; }
.statement.is-moving .ln { opacity: calc(0.12 + 0.88 * var(--p, 1)); transform: translateY(calc((1 - var(--p, 1)) * 0.32em)); }
.record-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .record-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 140px); align-items: start; } }
.record-body p { font-size: clamp(17px, 1.3vw, 20px); color: var(--ink-2); max-width: var(--measure); }
.record-body p:first-child { color: var(--ink); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.45; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.facts li {
  display: grid; align-content: space-between; gap: 18px; min-height: 164px; padding: 18px;
  background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(220, 216, 206, 0.9); border-radius: var(--r4); box-shadow: var(--lift);
}
.facts b { font: 500 clamp(44px, 4.6vw, 76px)/0.9 var(--m); letter-spacing: -0.05em; }
.facts li:first-child { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.facts li:first-child span { color: #d8d3c9; }
.facts span { font-size: 15px; line-height: 1.35; color: var(--ink-2); }
/* The four figure boxes answer a pointer (Gerold, 7 October 2026: "some hover effects on them"): each lifts and its
   figure takes the orange, the ink one too (orange on ink at this figure size is within the brand rule: orange text
   only at 24px and above). */
.facts li { transition: transform 220ms var(--ease, ease), box-shadow 220ms var(--ease, ease), border-color 220ms ease; }
.facts li:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(11, 11, 10, 0.5); border-color: var(--ink); }
.facts li b { transition: color 220ms ease; }
.facts li:hover b { color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .facts li, .facts li:hover { transition: none; transform: none; } }

/* ------------------------------------------------------------------ the films (8 October 2026) */

/*
 * The two sales films, one component: after the home page's hero, after the pricing calculator, and large
 * on each film's own page. The film is a sheet of the drawing set on paper: registration crosses on the
 * frame's four corners, a dimension line over the screen that measures the film's length, and a title
 * block. The poster is the film's own first frame and shows until the film is played; the play mark sits
 * bottom left, where both posters leave the paper empty. site.js plays the film inline with the browser's
 * own controls, so full screen is one press away.
 */
.film { padding: clamp(96px, 12vw, 176px) 0 clamp(72px, 9vw, 136px); }
.film-in { display: grid; gap: clamp(40px, 5vw, 96px); align-items: center; }
.film-words { container-type: inline-size; display: grid; justify-items: start; gap: clamp(18px, 2vw, 28px); min-width: 0; }
.film-words > * { margin: 0; }
/* Sized to its column: "Introducing Autecta." is 12.33em wide in Archivo 800, so at 7.9cqi it keeps to one line at every width. */
.film-title { font-size: clamp(22px, 7.9cqi, 80px); line-height: 0.95; }
/* Its last two words are held together, so a heading on two lines never leaves one word alone. */
.film-title .w-end { white-space: nowrap; }
.film-words .lead { max-width: var(--measure-lead); }
.film-act { display: grid; justify-items: start; gap: 14px; }
.film-len { font: 600 15px/1 var(--m); letter-spacing: 0.02em; padding-left: 12px; border-left: 1.5px solid rgba(11, 11, 10, 0.3); }
.btn-primary:hover .film-len { border-left-color: rgba(255, 255, 255, 0.45); }
.film-note { font: 600 11px/1.3 var(--m); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 1000px) {
  .film-in { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .film-in > .film-frame { grid-column: 1; grid-row: 1; }
}

.film-frame { position: relative; margin: 0; padding: clamp(12px, 1.6vw, 24px); background: var(--paper); border: 1px solid var(--ink); border-radius: var(--r3); }
.film-frame .reg-tl { top: -11px; left: -11px; } .film-frame .reg-tr { top: -11px; right: -11px; }
.film-frame .reg-bl { bottom: -11px; left: -11px; } .film-frame .reg-br { bottom: -11px; right: -11px; }

/* The dimension line, as an architect draws one: extension lines, 45-degree ticks, the figure over the line. */
.film-dim { display: flex; align-items: center; gap: 14px; height: 20px; margin: 0 0 clamp(10px, 1.2vw, 16px); color: var(--ink); }
.film-dim i { position: relative; flex: 1; height: 1px; background: currentColor; }
.film-dim i::before, .film-dim i::after { content: ""; position: absolute; width: 1px; background: currentColor; }
.film-dim i::before { top: -9px; height: 19px; }
.film-dim i::after { top: -6px; height: 13px; transform: rotate(45deg); }
.film-dim i:first-child::before, .film-dim i:first-child::after { left: 0; }
.film-dim i:last-child::before, .film-dim i:last-child::after { right: 0; }
.film-dim span { font: 600 12px/1 var(--m); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

.film-screen { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r2); background: var(--ink); box-shadow: 0 0 0 1px var(--rule); }
.film-video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.film-cover { position: absolute; inset: 0; cursor: pointer; }
.film-cover[hidden] { display: none; }
.film-mark {
  position: absolute; left: 4%; bottom: 6%; display: grid; place-items: center;
  width: clamp(40px, 8cqi, 88px); aspect-ratio: 1; border-radius: 50%; background: var(--ink);
  box-shadow: 0 14px 26px -14px rgba(11, 11, 10, 0.8); transition: transform 0.25s var(--ease-out);
}
.film-mark::before { content: ""; width: 32%; height: 36%; margin-left: 9%; background: var(--paper); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: background-color 0.2s; }
.film-cover:hover .film-mark { transform: scale(1.08); }
.film-cover:hover .film-mark::before { background: var(--orange); }

.film-tb { width: fit-content; max-width: 100%; margin: clamp(12px, 1.4vw, 18px) 0 0 auto; color: var(--ink); }
.film-tb dd { overflow-wrap: anywhere; }

/* Each film's own page: the heading, its line and the button in one band across the top, then the film as
   large as the screen allows, never so tall that, played, it runs out of the window under the header. */
.film-page { padding-top: calc(var(--top-h) + clamp(72px, 7vw, 120px)); }
.film-page .sheet { top: calc(var(--top-h) + 22px); }
.film-page .film-in { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 3.4vw, 56px); }
.film-page .film-in > .film-frame { grid-column: auto; grid-row: auto; width: 100%; max-width: max(min(100%, 640px), calc((100svh - var(--top-h) - 180px) * 16 / 9 + 48px)); justify-self: center; }
.film-page .film-title { font-size: clamp(22px, 7.9cqi, 116px); }
@media (min-width: 1000px) {
  .film-page .film-words { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; column-gap: clamp(40px, 5vw, 96px); }
  .film-page .film-title { grid-row: span 2; align-self: end; font-size: clamp(22px, 4.1cqi, 116px); }
}
@media (prefers-reduced-motion: reduce) { .film-mark, .film-mark::before { transition: none; } .film-cover:hover .film-mark { transform: none; } }

/* ------------------------------------------------------------------ the night (B14) */

.night {
  padding: clamp(96px, 11vw, 168px) 0; background-color: var(--sunk);
  background-image: repeating-linear-gradient(135deg, rgba(11, 11, 10, 0.05) 0 1px, transparent 1px 11px);
  border-block: 1px solid var(--rule);
}
.night-grid { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .night-grid { grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.6fr); gap: clamp(40px, 7vw, 140px); }
  .night-clock-wrap { position: sticky; top: calc(var(--top-h) + 48px); align-self: start; }
}
.clock {
  width: 100%; max-width: 380px; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(20px, 2.4vw, 32px); background: var(--ink); color: var(--paper); border-radius: 38px;
  box-shadow: 0 40px 70px -36px rgba(11, 11, 10, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.clock-day { margin: 0; font: 500 clamp(16px, 1.4vw, 20px)/1 var(--m); }
.clock-time { margin: 0; font: 500 clamp(68px, 7.6vw, 118px)/0.9 var(--m); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.clock-bar {
  margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 16px; background: var(--orange); color: var(--ink);
  font: 600 12px/1 var(--m); letter-spacing: 0.12em; text-transform: uppercase;
}
.clock-bar i { flex: 1; max-width: 55%; height: 8px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 6px); opacity: 0.8; }
@media (max-width: 899px) {
  .clock { aspect-ratio: auto; max-width: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; border-radius: 28px; }
  .clock-time { font-size: clamp(52px, 16vw, 72px); }
  .clock-bar { flex-basis: 100%; }
}
.worries { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; border-top: 2px solid var(--ink); }
.worry { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid #d3cec2; transition: color 0.4s; }
.worry-time { font: 600 14px/1.9 var(--m); color: var(--ink-3); }
.worry p { margin: 0; font: 600 clamp(21px, 2.1vw, 32px)/1.25 var(--f); letter-spacing: -0.01em; max-width: 44ch; }
/* Which worry the clock is on (Gerold, 7 October 2026: "the difference between the gray and the black is not
   much"): the others fade right back, the current one is ink with an orange bar beside it. */
.worry { position: relative; }
.night.is-live .worry { color: #bdb8ad; }
.night.is-live .worry .worry-time { color: #bdb8ad; }
.night.is-live .worry.is-now { color: var(--ink); }
.night.is-live .worry.is-now .worry-time { color: var(--ink); }
.night.is-live .worry.is-now::before { content: ""; position: absolute; left: -22px; top: clamp(20px, 2.4vw, 32px); bottom: clamp(20px, 2.4vw, 32px); width: 5px; background: var(--orange); }
.night .h2 { font-size: clamp(30px, 3.5vw, 64px); }
/* The hour as the clock shows it (approved 7 October 2026): the line smaller, 02:00 large in the mono face. */
.night .night-h { font-size: clamp(26px, 2.6vw, 46px); line-height: 1.12; }
.night-time { display: block; margin-top: 10px; font: 500 clamp(64px, 7.4vw, 136px)/0.9 var(--m); letter-spacing: -0.05em; color: var(--ink); }
.night-close {
  margin: clamp(32px, 4vw, 56px) 0 0; padding: 22px 0 0 22px; border-left: 4px solid var(--orange);
  font: 400 clamp(18px, 1.5vw, 22px)/1.5 var(--f); max-width: var(--measure);
}

/* ------------------------------------------------------------------ the stages (B10, B11) */

.stages { padding: clamp(96px, 11vw, 168px) 0; }
.board {
  position: relative; background: var(--white); border: 1px solid rgba(220, 216, 206, 0.9);
  border-radius: var(--r5); padding: clamp(14px, 1.6vw, 22px); box-shadow: 0 30px 60px -40px rgba(11, 11, 10, 0.5);
}
.board-bar {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 4px 6px 16px;
  font: 600 11px/1.3 var(--m); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.board-title { color: var(--ink); display: flex; align-items: center; gap: 8px; }
.board-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.board-cols { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .board-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .board-cols { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.col { background: var(--sunk); border-radius: var(--r3); padding: 10px; min-height: 150px; }
@media (min-width: 1180px) { .col { min-height: 300px; } }
.col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 600 13px/1.2 var(--f); }
.col-head b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--ink); color: var(--paper); font: 600 12px/1 var(--m); }
.col-head span { flex: 1; min-width: 0; }
.col-head i { font: 600 12px/1 var(--m); font-style: normal; padding: 5px 8px; border-radius: 999px; background: var(--white); border: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.col-cards { display: grid; gap: 8px; }
.pcard {
  display: grid; gap: 3px; padding: 10px 11px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r2);
  box-shadow: 0 1px 0 rgba(11, 11, 10, 0.04), 0 8px 16px -14px rgba(11, 11, 10, 0.5);
}
.pref { font: 600 11px/1 var(--m); color: var(--ink-3); }
.pname { font: 600 14px/1.25 var(--f); }
.ptype { font-size: 12px; color: var(--ink-3); }
.pcard.is-moving { box-shadow: 0 0 0 2px var(--orange), 0 18px 30px -18px rgba(232, 80, 2, 0.8); position: relative; z-index: 2; }
.board.pre .pcard { opacity: 0; }
.board.is-live .pcard { animation: drop 0.7s var(--spring) both; animation-delay: calc(0.1s + var(--c, 0) * 0.14s + var(--k, 0) * 0.24s); }
@keyframes drop { from { opacity: 0; transform: translateY(-26px) scale(0.94); } to { opacity: 1; transform: none; } }
.board-toast {
  display: none; margin: 14px 6px 4px; padding: 12px 14px; border-radius: var(--r2);
  background: var(--ink); color: var(--paper); font: 500 13px/1.4 var(--m);
}
.board-toast.show { display: block; animation: rise 0.6s var(--ease-out) both; }
.board-toast::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--orange); vertical-align: middle; }

/* ------------------------------------------------------------------ the practice (B12) */

.practice { padding: clamp(64px, 8vw, 128px) 0 clamp(96px, 11vw, 168px); }
.lead-write { font-size: clamp(17px, 1.3vw, 22px); color: var(--ink-2); max-width: var(--measure); }
/* --p from 0 to 1 as the section scrolls in (site.js); each word comes in over four words' time. */
.lead-write.is-moving .w { opacity: clamp(0.1, calc((var(--p, 1) * (var(--n, 1) + 4) - var(--i)) / 4), 1); }
.fits { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .fits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .fits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.fit {
  padding: 14px 14px 26px; background: var(--white); border: 1px solid rgba(220, 216, 206, 0.9);
  border-radius: var(--r4); box-shadow: var(--lift);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), opacity 0.8s var(--ease-out);
}
.fit:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(11, 11, 10, 0.04), 0 30px 50px -30px rgba(11, 11, 10, 0.45); }
.fit > p, .fit > h3 { padding-inline: 8px; }
.fit h3 { font: 600 clamp(19px, 1.5vw, 22px)/1.25 var(--f); margin: 0 0 10px; letter-spacing: -0.01em; }
.fit > p:last-child { color: var(--ink-2); margin: 0; font-size: 16px; }
.fit-fig { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 11px/1 var(--m); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.fit-fig::before { content: ""; width: 16px; height: 1.5px; background: var(--orange); }
.fit-shot {
  display: flex; align-items: center; height: 208px; padding: 16px; margin-bottom: 20px; border-radius: var(--r3);
  background-color: var(--sunk);
  background-image: linear-gradient(rgba(11, 11, 10, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 11, 10, 0.05) 1px, transparent 1px);
  background-size: 16px 16px;
}
.mini {
  width: 100%; padding: 12px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r2);
  font-size: 13px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: transform 0.5s var(--ease-out);
}
.fit:hover .mini { transform: translateY(-3px) rotate(-0.4deg); }
.mini-bar { display: flex; justify-content: space-between; gap: 8px; padding: 0 16px 9px 0; margin-bottom: 10px; border-bottom: 1px solid var(--rule); font: 600 10.5px/1.2 var(--m); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.mini-name { margin: 0 0 8px; font: 600 14px/1.25 var(--f); }
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.strip li { display: grid; gap: 2px; padding: 7px 8px; border-radius: 8px; background: var(--sunk); font-size: 11.5px; min-width: 0; }
.strip li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip b { font: 600 11px/1 var(--m); }
.strip li:first-child { background: var(--ink); color: var(--paper); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bars li { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 8px; }
.bars b { font: 600 11px/1 var(--m); color: var(--ink-3); }
.bars i { height: 8px; border-radius: 99px; background: var(--ink); transform-origin: left; transition: transform 0.6s var(--ease-out); }
.bars li:nth-child(1) i { width: 14%; } .bars li:nth-child(2) i { width: 42%; } .bars li:nth-child(3) i { width: 66%; }
.bars li:nth-child(4) i { width: 88%; } .bars li:nth-child(5) i { width: 58%; background: var(--orange); } .bars li:nth-child(6) i { width: 22%; }
.fit:hover .bars i { transform: scaleX(1.06); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; }
.rows li:last-child { border-bottom: 0; }
.rows li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--ink); border-radius: 999px; font: 600 10px/1 var(--m); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.chip-on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.chip-orange { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.rows-promise li:nth-child(3) .chip { background: var(--deep); border-color: var(--deep); color: var(--white); }
.rows-reg li:nth-child(2) { color: var(--ink-3); }
.rows-reg li:nth-child(2) .chip { border-color: var(--ink-3); background: repeating-linear-gradient(135deg, rgba(11, 11, 10, 0.16) 0 1px, transparent 1px 5px); }
.mini-door { padding: 0; overflow: hidden; }
.mini-addr { padding: 9px 12px; background: var(--sunk); border-bottom: 1px solid var(--rule); font-size: 11.5px; color: var(--ink-2); }
.mini-addr::before { content: ""; display: inline-block; width: 7px; height: 9px; margin-right: 8px; border: 1.5px solid var(--ink-2); border-radius: 2px; vertical-align: -1px; }
.mini-portal { margin: 12px; padding: 12px; border-left: 4px solid var(--practice); background: #f7f6f2; border-radius: 0 10px 10px 0; }
.mini-portal p { margin: 0 0 4px; font-size: 12.5px; }
.mini-portal .mono { color: var(--ink-3); font-size: 11.5px; }
.mini-wait { font-weight: 600; }
.bubble { margin: 0 0 8px; padding: 9px 12px; max-width: 86%; border-radius: 14px 14px 14px 4px; background: var(--sunk); font-size: 12.5px; line-height: 1.4; }
.bubble-us { margin-left: auto; margin-bottom: 0; border-radius: 14px 14px 4px 14px; background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------------ what it is worth (B15) */

.gains { padding: clamp(96px, 11vw, 168px) 0; background: var(--ink); color: var(--paper); overflow: hidden; }
.gains::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 4px);
}
.gains .h2 { color: var(--paper); }
.gain-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .gain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gain:last-child { grid-column: 1 / -1; } }
@media (min-width: 1180px) {
  .gain-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .gain:nth-child(-n + 3) { grid-column: span 2; }
  .gain:nth-child(n + 4) { grid-column: span 3; }
}
.gain {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: clamp(340px, 27vw, 430px); padding: 22px; border-radius: var(--r4);
  background: linear-gradient(160deg, #1b1b19, var(--ink-raised) 60%); border: 1px solid var(--ink-rule);
  transition: transform 0.6s var(--ease-out), border-color 0.3s;
}
.gain:focus-visible { outline-offset: 4px; }
.gain:hover, .gain:focus-within, .gain:focus { border-color: #4a4640; }
.gain-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font: 600 11px/1.2 var(--m); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
.gain-count { white-space: nowrap; }
.gain-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.gain-tags em { font-style: normal; padding: 5px 9px; border: 1px solid #3a3834; border-radius: 999px; letter-spacing: 0.08em; }
.gain-title {
  order: 1; margin: 26px 0 0;
  font: 800 clamp(26px, 2.4vw, 46px)/0.94 var(--f); letter-spacing: -0.035em; text-transform: uppercase;
}
.gain:nth-child(5) .gain-title { color: var(--orange); }
.gain-icon { order: 2; margin-top: auto; width: 60px; height: 60px; fill: none; stroke: var(--paper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 0; }
.gain:hover .gain-icon, .gain:focus .gain-icon { animation: redraw 1.1s var(--ease-out); stroke: var(--orange); }
@keyframes redraw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
.gain-no {
  position: absolute; z-index: -1; right: -0.05em; bottom: -0.24em; margin: 0; pointer-events: none;
  font: 800 clamp(170px, 17vw, 300px)/1 var(--f); letter-spacing: -0.06em; color: transparent;
  -webkit-text-stroke: 1.5px #34322e; transition: transform 0.7s var(--ease-out), -webkit-text-stroke-color 0.4s;
}
.gain:hover .gain-no, .gain:focus .gain-no { transform: translate(-12px, -8px); -webkit-text-stroke-color: #5a3a24; }
.gain-hud i { position: absolute; width: 14px; height: 14px; border-color: var(--orange); border-style: solid; border-width: 0; transition: transform 0.5s var(--ease-out); }
.gain-hud i:nth-child(1) { top: 10px; left: 10px; border-top-width: 1.5px; border-left-width: 1.5px; }
.gain-hud i:nth-child(2) { top: 10px; right: 10px; border-top-width: 1.5px; border-right-width: 1.5px; }
.gain-hud i:nth-child(3) { bottom: 10px; left: 10px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.gain-hud i:nth-child(4) { bottom: 10px; right: 10px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.gain:hover .gain-hud i:nth-child(1), .gain:focus .gain-hud i:nth-child(1) { transform: translate(5px, 5px); }
.gain:hover .gain-hud i:nth-child(2), .gain:focus .gain-hud i:nth-child(2) { transform: translate(-5px, 5px); }
.gain:hover .gain-hud i:nth-child(3), .gain:focus .gain-hud i:nth-child(3) { transform: translate(5px, -5px); }
.gain:hover .gain-hud i:nth-child(4), .gain:focus .gain-hud i:nth-child(4) { transform: translate(-5px, -5px); }
.gain-panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 34px 22px 24px;
  background: var(--orange); color: var(--ink);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path 0.65s var(--ease-out);
}
.gain-panel p { margin: 0; font: 500 clamp(16px, 1.15vw, 18px)/1.5 var(--f); opacity: 0; transform: translateY(14px); transition: opacity 0.35s 0.1s, transform 0.55s 0.1s var(--ease-out); }
.gain:hover .gain-panel, .gain:focus .gain-panel, .gain:focus-within .gain-panel { clip-path: polygon(0 26px, 26px 0, 100% 0, 100% 100%, 0 100%); }
.gain:hover .gain-panel p, .gain:focus .gain-panel p, .gain:focus-within .gain-panel p { opacity: 1; transform: none; }
@media (hover: none) {
  .gain-panel { position: relative; order: 3; margin: 22px -22px -22px; clip-path: polygon(0 26px, 26px 0, 100% 0, 100% 100%, 0 100%); }
  .gain-panel p { opacity: 1; transform: none; }
  .gain-icon { margin-top: 28px; }
}
.trust {
  display: flex; align-items: center; gap: 14px; margin: clamp(32px, 4vw, 56px) 0 0; padding-top: 22px;
  border-top: 1px solid var(--ink-rule); font: 500 14px/1.5 var(--m); color: #d8d3c9; max-width: 80ch;
}
.trust::before { content: ""; flex: none; width: 14px; height: 18px; border: 1.5px solid var(--orange); border-radius: 3px 3px 7px 7px; }

/* ------------------------------------------------------------------ the last word */

.cta { padding: clamp(104px, 12vw, 184px) 0 clamp(96px, 11vw, 168px); background: var(--orange); color: var(--ink); overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(11, 11, 10, 0.07) 0 1px, transparent 1px 12px); }
.cta .h2-xl { font-size: clamp(40px, 5.2vw, 112px); }
.cta-in { position: relative; display: grid; gap: 32px; }
/* The heading across the section, then the words and the buttons under it (one line where it fits). */
@media (min-width: 1000px) { .cta-in > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 64px; } .cta-in > div > .cta-text { margin: 0; } .cta-in > div > .cta-more { grid-column: 1 / -1; } }
.cta-text { font: 500 clamp(18px, 1.5vw, 22px)/1.5 var(--f); max-width: var(--measure-lead); }
.cta-more { margin: 20px 0 0; font-weight: 600; }

/* ------------------------------------------------------------------ the footer (B17) */

.foot { position: relative; background: var(--paper); border-top: 1px solid var(--rule); padding: clamp(64px, 8vw, 112px) var(--gut) 28px; }
.foot-top { display: grid; gap: 48px; }
@media (min-width: 900px) { .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 80px; } }
.foot-tag { margin: 0 0 16px; font: 800 clamp(30px, 3.2vw, 52px)/0.95 var(--f); text-transform: uppercase; letter-spacing: -0.035em; text-wrap: balance; }
.foot-about { color: var(--ink-2); max-width: var(--measure-lead); margin-bottom: 24px; }
.foot-nav { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .foot-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foot-h { margin: 0 0 16px; font: 600 11px/1 var(--m); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.foot-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* A 24 px target, its underline under the words (G88, G98: the footer's links were 16 to 20 px tall). */
.foot-nav a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 600; text-decoration: none; background: linear-gradient(var(--orange), var(--orange)) left bottom / 0 2px no-repeat; transition: background-size 0.35s var(--ease-out); padding-bottom: 2px; }
.foot-nav a:hover { background-size: 100% 2px; }
.foot-word { margin: clamp(56px, 9vw, 140px) 0 22px; color: var(--ink); }
.foot-word svg { display: block; width: 100%; height: auto; }
.foot-base { display: grid; gap: 16px; padding-top: 16px; border-top: 2px solid var(--ink); align-items: center; }
@media (min-width: 900px) { .foot-base { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; } .foot-base .tb { justify-self: end; } }
.foot-maker { margin: 0; font: 500 13px/1.4 var(--m); }
.foot-maker a { font-weight: 600; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.foot .tb { width: fit-content; max-width: 100%; }
@media (max-width: 520px) { .foot .tb { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .foot .tb > div:nth-child(3) { border-left: 0; } .foot .tb > div:nth-child(n + 3) { border-top: 1px solid currentColor; } }

/* ------------------------------------------------------------------ inner pages */

.page-head { padding: calc(var(--top-h) + clamp(72px, 9vw, 148px)) 0 clamp(56px, 7vw, 112px); }
.page-head .sheet { top: calc(var(--top-h) + 22px); }
.page-head-in { display: grid; gap: 28px; }
@media (min-width: 1000px) { .page-head-in { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); align-items: end; gap: 64px; } }
.page-head .lead { margin-bottom: 26px; }
/* The questions' head, stacked: the heading, then the line and its button underneath (item 13). */
.page-head-in.page-head-stack { grid-template-columns: minmax(0, 1fr); align-items: start; gap: clamp(24px, 3vw, 40px); }
/* Pricing: what the practice pays for on one line, which parts in orange on the next (item 11). */
.page-pricing .h1 { font-size: clamp(40px, 5.4vw, 112px); }
.page-pricing .h1 .accent { display: block; }

/* pricing (B18): modules, no numbers */
.mods { padding: 0 0 clamp(96px, 11vw, 160px); }
.mods-head { display: grid; gap: 6px; margin-bottom: 22px; padding-top: 22px; border-top: 2px solid var(--ink); }
.mods-head p { color: var(--ink-2); margin: 0; }
.mods-head-2 { margin-top: clamp(56px, 7vw, 96px); }
.mod-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 1180px) { .mod-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mod { padding: 20px 20px 24px; background: var(--white); border: 1px solid rgba(220, 216, 206, 0.9); border-radius: var(--r4); box-shadow: var(--lift); transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), opacity 0.8s var(--ease-out); }
.mod:hover { transform: translateY(-3px); }
.mod-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 26px; }
.mod-no { font: 500 13px/1 var(--m); color: var(--ink-3); }
.mod h3 { margin: 0 0 8px; font: 800 22px/1.05 var(--f); text-transform: uppercase; letter-spacing: -0.02em; }
.mod p { margin: 0; color: var(--ink-2); font-size: 16px; }
.mod-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mod-on p { color: #d8d3c9; }
.mod-on .mod-no { color: var(--ash); }
.mod-on .mod-top::after { content: ""; order: 3; width: 38px; height: 22px; border-radius: 99px; background: #3a3834 radial-gradient(circle at 11px 50%, var(--paper) 0 7px, transparent 7.5px); transition: background 0.35s var(--ease-out); }
.mod-on:hover .mod-top::after { background: var(--orange) radial-gradient(circle at 27px 50%, var(--ink) 0 7px, transparent 7.5px); }
.mod-on .mod-top .chip { margin-left: auto; }

/* the questions (B20) */
.faq { padding: 0 0 clamp(96px, 11vw, 160px); }
.faq-grid { display: grid; gap: 32px; }
@media (min-width: 1000px) { .faq-grid { grid-template-columns: 260px minmax(0, 1fr); gap: clamp(48px, 7vw, 140px); } .faq-toc { position: sticky; top: calc(var(--top-h) + 32px); align-self: start; } }
.faq-toc { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 1000px) { .faq-toc { flex-direction: column; } }
.faq-toc a { display: flex; align-items: center; gap: 12px; white-space: nowrap; padding: 10px 14px; border-radius: var(--r2); background: rgba(255, 255, 255, 0.8); border: 1px solid var(--rule); text-decoration: none; font-weight: 600; }
.faq-toc a:hover { border-color: var(--ink); }
.faq-toc b { font: 600 11px/1 var(--m); color: var(--ink-3); }
.faq-group { padding-top: 22px; border-top: 2px solid var(--ink); margin-bottom: clamp(40px, 5vw, 72px); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; font: 600 clamp(19px, 1.7vw, 24px)/1.3 var(--f); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; flex: none; width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: 50%; transition: transform 0.4s var(--ease-out), background-color 0.3s; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: currentColor; }
.qa summary i::after { transform: rotate(90deg); transition: transform 0.4s var(--ease-out); }
.qa[open] summary i { background: var(--orange); border-color: var(--orange); }
.qa[open] summary i::after { transform: rotate(0deg); }
.qa summary:hover span { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.qa-a p { margin: 0 0 22px; max-width: var(--measure); color: var(--ink-2); font-size: 18px; }
.qa[open] .qa-a { animation: rise 0.45s var(--ease-out); }

/* book a demo (B19) */
.demo { padding-bottom: clamp(96px, 11vw, 160px); }
.demo-grid { display: grid; gap: 48px; }
@media (min-width: 1000px) { .demo-grid { grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.85fr); gap: clamp(48px, 6vw, 120px); align-items: start; } }
.demo .h1 { margin-bottom: 26px; font-size: clamp(40px, 4.2vw, 100px); }
.demo .lead { margin-bottom: 44px; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); font: 600 clamp(18px, 1.5vw, 21px)/1.35 var(--f); }
.steps b { font: 500 15px/1.6 var(--m); color: var(--ink-3); }
.demo-card { padding: clamp(20px, 3vw, 36px); background: var(--white); border: 1px solid var(--rule); border-radius: var(--r5); box-shadow: 0 40px 70px -44px rgba(11, 11, 10, 0.55); }
.form-title { margin: 0 0 22px; font: 800 clamp(22px, 2vw, 30px)/1 var(--f); text-transform: uppercase; letter-spacing: -0.02em; }
.f-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } }
.f { display: grid; gap: 7px; min-width: 0; }
.f-wide { grid-column: 1 / -1; }
.f-k { font: 600 11.5px/1.2 var(--m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
/* The privacy notice, beside the sign-up's first field, before any detail is typed (13 October 2026). */
.f-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.f-privacy { font: 500 12px/1.2 var(--m); color: var(--ink-2); }
.f-k em { font-style: normal; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
input, select, textarea {
  width: 100%; min-height: 50px; padding: 11px 14px; font: 400 16px/1.4 var(--f); color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--field); border-radius: var(--r2);
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
textarea { resize: vertical; min-height: 110px; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 3px rgba(232, 80, 2, 0.35); }
::placeholder { color: var(--ink-3); opacity: 1; }

/* The dropdowns (5 October 2026). Where the select stays native (a phone, or no script): the same
   field as the inputs, with the site's chevron. */
select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 46px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%230b0b0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 17px center; background-size: 14px 9px;
}
.pick-native { display: none; }
/* Where there is a mouse, a listbox of its own (site.js): the button is the field, the list opens under it. */
.pick { position: relative; }
.pick-btn {
  position: relative; display: flex; align-items: center; width: 100%; min-height: 50px; padding: 11px 46px 11px 14px;
  font: 400 16px/1.4 var(--f); color: var(--ink); text-align: left; cursor: pointer;
  background: var(--paper); border: 1.5px solid var(--field); border-radius: var(--r2);
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.pick-btn.is-none { color: var(--ink-3); }
.pick-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-btn::after {
  content: ""; position: absolute; right: 19px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); border-radius: 1px;
  transform: rotate(45deg); transition: transform 0.25s var(--ease-out), margin-top 0.25s var(--ease-out);
}
.pick-btn:hover { border-color: var(--ink-2); }
.pick-btn:focus-visible, .pick.is-open .pick-btn { outline: none; border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 3px rgba(232, 80, 2, 0.35); }
.pick.is-open .pick-btn::after { transform: rotate(225deg); margin-top: -1px; }
.pick-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px); max-height: 300px; overflow: auto;
  margin: 0; padding: 6px; list-style: none; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r2);
  box-shadow: 0 24px 48px -24px rgba(11, 11, 10, 0.45); transform-origin: top center; animation: pick-in 0.18s var(--ease-out);
}
.pick.pick-up .pick-list { top: auto; bottom: calc(100% + 8px); transform-origin: bottom center; }
.pick-list li {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r1);
  font: 400 16px/1.35 var(--f); color: var(--ink); cursor: pointer;
}
.pick-list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: transparent; }
.pick-list li.is-none { color: var(--ink-3); }
.pick-list li.is-active { background: var(--sunk); }
.pick-list li[aria-selected="true"] { font-weight: 600; }
.pick-list li[aria-selected="true"]::before { background: var(--orange); }
@keyframes pick-in { from { opacity: 0; transform: translateY(-4px) scaleY(0.97); } to { opacity: 1; transform: none; } }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.f-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 22px; }
.f-note { margin: 0; font-size: 14px; color: var(--ink-3); }
.f-said { margin: 14px 0 0; font-weight: 600; color: var(--deep); }
.f-said:empty { display: none; }
.sent { padding: 8px 0; }
.sent:focus { outline: none; }
.sent-title { margin: 0 0 10px; font: 800 clamp(28px, 3vw, 44px)/1 var(--f); text-transform: uppercase; letter-spacing: -0.03em; }
.demo-email p { color: var(--ink-2); margin-bottom: 22px; }

/* sign in (the apex's own door, with C1's linework) */
.signin { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr; padding-top: var(--top-h); }
.signin-art {
  min-height: 190px;
  background: url("/brand/setting-out-clear.png") center / min(88%, 1040px) auto no-repeat,
              url("/brand/door-linework.svg") center / cover no-repeat, var(--blue);
}
.signin-side { display: grid; place-items: center; padding: 40px var(--gut) 56px; }
.page-signin .top:not(.menu-open) { background: var(--paper); }
.signin-card { width: 100%; max-width: 440px; padding: clamp(22px, 3vw, 36px); background: var(--white); border: 1px solid var(--rule); border-radius: var(--r5); box-shadow: 0 40px 70px -44px rgba(11, 11, 10, 0.55); }
.signin-title { margin: 0 0 14px; font: 800 clamp(28px, 2.6vw, 38px)/1 var(--f); text-transform: uppercase; letter-spacing: -0.03em; }
.signin-lead { color: var(--ink-2); margin-bottom: 24px; }
.addr-field { display: flex; align-items: center; margin: 8px 0 18px; background: var(--paper); border: 1.5px solid var(--field); border-radius: var(--r2); transition: border-color 0.2s, box-shadow 0.2s; }
.addr-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(232, 80, 2, 0.35); background: var(--white); }
.addr-field input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none !important; }
.addr-suffix { padding-right: 14px; font: 500 14px/1 var(--m); color: var(--ink-3); white-space: nowrap; }
.signin-note { margin: 16px 0 0; font-size: 15px; color: var(--ink-2); }
.signin-note a { font-weight: 600; }
@media (min-width: 900px) {
  .signin { grid-template-rows: none; grid-template-columns: minmax(0, 1.25fr) minmax(420px, 1fr); padding-top: 0; }
  .signin-side { padding-top: calc(var(--top-h) + 40px); }
}

/* ------------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; transition-delay: 0s !important; }
  .plan [class^="pl-"], .so-grid, .so-ln, .so-lt, .pencil-line path { stroke-dashoffset: 0 !important; }
  .so-lt { fill-opacity: 1 !important; stroke-opacity: 0 !important; }
  .so-tx, .so-roof, .so-mk { opacity: 1 !important; }
  .so-sec { transform: none !important; }
  .pl-tx, .pl-north, .pl-hob, .pl-stones, .pl-trunk, .plan-live, .hero-sub, .hero-foot .btns, .hero-block, .scroll-cue { opacity: 1 !important; }
  .pl-hatch { opacity: 0.4 !important; }
  .pl-sec { transform: none !important; }
  .pencil .w { clip-path: none !important; }
  .reveal.pre, .board.pre .pcard { opacity: 1 !important; transform: none !important; }
  .tape-band-in, .scroll-cue i::after { animation: none !important; }
}

/* ------------------------------------------------------------------ the price and the sign-up (5 October 2026) */

/* Every figure on these pages is filled in by signup.js from GET /api/pricing; the markup holds none.
   Figures are IBM Plex Mono, like every rand figure in the system. */

[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }

.fig { font: 600 clamp(28px, 2.1vw, 40px)/1.05 var(--m); letter-spacing: -0.02em; white-space: nowrap; }
.fig-incl { font: 500 14px/1.3 var(--m); color: var(--ink-3); white-space: nowrap; }
.fig-new { animation: fig-in 0.32s var(--ease-out); }
@keyframes fig-in { from { opacity: 0.25; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* The calculator on the pricing page: the controls and the cards on the left, the price beside them. */
.calc-intro { margin-bottom: 22px; }
.calc-on .calc-grid { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 1100px) {
  .calc-on .calc-grid { grid-template-columns: minmax(0, 1fr) clamp(380px, 26vw, 500px); align-items: start; }
  .calc-side { position: sticky; top: calc(var(--top-h) + 24px); }
}
.calc-on .mod-grid { grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 300px), calc((100% - 42px) / 4)), 1fr)); }
.calc-pick { margin-top: 6px !important; font-weight: 600; color: var(--ink) !important; }

/* The controls: a title block of two cells, the people and how the practice pays. */
.calc-controls { display: grid; margin: 0 0 clamp(40px, 5vw, 64px); background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r4); }
@media (min-width: 900px) { .calc-controls { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.calc-ctl { display: grid; align-content: start; gap: 14px; padding: clamp(18px, 2vw, 28px); min-width: 0; container-type: inline-size; }
.calc-ctl + .calc-ctl { border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .calc-ctl + .calc-ctl { border-top: 0; border-left: 1px solid var(--rule); } }
.calc-ctl .f-k { margin: 0; }
.calc-note { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

.calc-size { display: grid; gap: 16px; }
@container (min-width: 660px) { .calc-size { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 26px; } }
.stepper { display: inline-flex; align-items: stretch; justify-self: start; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r2); overflow: hidden; }
.step-btn { position: relative; width: 52px; min-height: 54px; padding: 0; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; transition: background-color 0.2s; }
.step-btn::before, .step-more::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 1px; background: currentColor; }
.step-more::after { transform: rotate(90deg); }
.step-btn:hover { background: var(--sunk); }
.step-btn:active { background: var(--rule); }
.step-btn:disabled { color: var(--ash); background: var(--paper); cursor: default; }
.step-btn:focus-visible { outline-offset: -4px; }
.stepper .step-n {
  width: 86px; min-height: 54px; padding: 0 6px; border: 0; border-inline: 1.5px solid var(--ink); border-radius: 0;
  background: var(--white); text-align: center; font: 600 26px/1 var(--m); -moz-appearance: textfield; appearance: textfield;
}
.stepper .step-n::-webkit-outer-spin-button, .stepper .step-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .step-n:focus-visible { box-shadow: inset 0 0 0 3px rgba(232, 80, 2, 0.35); }

/* The bands as a drawing's scale bar: alternate blocks, the practice's own band in orange. */
.scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-width: 0; }
.scale-seg { display: grid; gap: 9px; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink-3); text-align: left; cursor: pointer; font: inherit; }
.scale-seg i { display: block; height: 16px; border: 1.5px solid var(--ink); border-left-width: 0; background: var(--white); transition: background-color 0.25s var(--ease-out); }
.scale-seg.is-filled i { background: var(--orange); }
.scale-seg:first-child i { border-left-width: 1.5px; border-radius: 5px 0 0 5px; }
.scale-seg:last-child i { border-radius: 0 5px 5px 0; }
.scale-seg span { font: 600 11px/1.2 var(--m); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: clip; transition: color 0.2s; }
.scale-seg:hover span { color: var(--ink); }
.scale-seg[aria-pressed="true"] i { background: var(--orange); }
.scale-seg[aria-pressed="true"] span { color: var(--ink); }
.scale-seg:focus-visible { outline-offset: 4px; border-radius: 4px; }
/* Where a segment is too narrow for its words, only the practice's own band is named, under its block. */
@container (max-width: 459px) {
  .scale-seg span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .scale-seg[aria-pressed="true"] span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .scale-seg:nth-child(n + 4)[aria-pressed="true"] span { justify-self: end; text-align: right; }
}

/* Monthly, or a year up front. */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--sunk); border-radius: var(--r2); }
.seg-opt { position: relative; display: grid; }
.seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-opt span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 12px; white-space: nowrap; border-radius: 9px; font: 600 15px/1.15 var(--f); text-align: center; color: var(--ink-2); transition: background-color 0.2s, color 0.2s, box-shadow 0.25s; }
.seg-opt:hover input:not(:checked) + span { color: var(--ink); background: rgba(255, 255, 255, 0.7); }
.seg-opt input:checked + span { background: var(--ink); color: var(--paper); box-shadow: 0 8px 18px -12px rgba(11, 11, 10, 0.85); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }

/* The module cards become switches: the whole card is the checkbox, the drawn switch shows it. */
.calc-on .mod-on { position: relative; }
.mod-check { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; border-radius: var(--r4); }
.mod-check:disabled { cursor: not-allowed; }
.calc-on .mod-on:has(.mod-check:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }
.calc-on .mod-on:hover .mod-top::after { background: #3a3834 radial-gradient(circle at 11px 50%, var(--paper) 0 7px, transparent 7.5px); }
.calc-on .mod-on.is-on .mod-top::after { background: var(--orange) radial-gradient(circle at 27px 50%, var(--ink) 0 7px, transparent 7.5px); }
.calc-on .mod-on.is-on { box-shadow: 0 0 0 2.5px var(--orange), var(--lift); }
.calc-on .mod-on.is-off-band { opacity: 0.55; }
.calc-on .mod-on.is-off-band:hover { transform: none; }
.mod-on .mod-price { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--ink-rule); font: 600 15px/1.3 var(--m); color: var(--paper); }
.mod-price .per { font-weight: 500; color: var(--ash); }

/* The price: the title block of the drawing, ink head, white sheet, figures in mono. */
.calc-side, .signup-side { display: grid; gap: 16px; min-width: 0; }
.quote { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r4); overflow: hidden; box-shadow: 0 40px 70px -44px rgba(11, 11, 10, 0.55); }
.quote-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 15px 20px; background: var(--ink); color: var(--paper); }
.quote-title { margin: 0; font: 800 20px/1 var(--f); text-transform: uppercase; letter-spacing: -0.01em; }
.quote-for { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 12px/1 var(--m); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); white-space: nowrap; }
.quote-for .chip { border-color: var(--orange); color: var(--orange); }
.quote-rows { margin: 0; }
.quote-row { display: grid; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--rule); }
.quote-row:first-child { border-top: 0; }
.quote-row dt { display: grid; gap: 4px; }
.quote-row dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
.quote-k { font: 600 11.5px/1.25 var(--m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.quote-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 15px; color: var(--ink-2); }
.quote-sub [data-q] { font: 500 14px/1.3 var(--m); color: var(--ink); }
.quote-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ash); }
.quote-total { background: repeating-linear-gradient(135deg, rgba(11, 11, 10, 0.05) 0 1px, transparent 1px 7px); }
/* The yearly saving beside the choice itself, in rands (Gerold, 7 October 2026: "show them how much they're saving"). */
.calc-save { margin: 12px 0 0; padding: 12px 14px 12px 34px; position: relative; border-radius: 10px; background: rgba(232, 80, 2, 0.08); font-weight: 600; line-height: 1.45; }
.calc-save:empty { display: none; }
.calc-save::before { content: ""; position: absolute; left: 14px; top: 18px; width: 10px; height: 10px; border-radius: 2px; background: var(--orange); }
.calc-save b { font: 700 17px/1 var(--m); }
.calc-save .fig-incl { font-weight: 500; color: var(--ink-2); }
.quote-save { display: block; margin: 0; padding: 14px 20px 16px 42px; border-top: 1px solid var(--rule); position: relative; font-weight: 600; line-height: 1.45; }
.quote-save::before { content: ""; position: absolute; left: 20px; top: 21px; width: 10px; height: 10px; border-radius: 2px; background: var(--orange); }
.quote-save b { font: 600 15.5px/1 var(--m); }
.quote-save .fig-incl { font-weight: 500; }
.quote-big { padding: 20px; }
.quote-big-title { margin: 0 0 8px; font: 800 24px/1.05 var(--f); text-transform: uppercase; letter-spacing: -0.02em; }
.quote-big p:last-child { margin: 0; color: var(--ink-2); }
.quote-fine p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* On a phone the price follows the cards; this keeps today's figure and the next in sight meanwhile. */
.calc-bar {
  position: fixed; z-index: 15; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px;
  background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--r3); text-decoration: none;
  font: 500 14px/1.25 var(--m); box-shadow: 0 18px 40px -16px rgba(11, 11, 10, 0.6), inset 0 3px 0 var(--orange);
  transition: transform 0.35s var(--ease-out), opacity 0.3s;
}
.calc-bar b { font-weight: 600; }
.calc-bar-k { white-space: nowrap; color: var(--ink-2); }
.calc-bar-k b { color: var(--ink); }
.calc-bar-go { margin-left: auto; font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 479px) {
  .calc-bar { flex-wrap: nowrap; gap: 10px; font-size: 13px; padding: 12px 14px; }
  .calc-bar-go { position: relative; flex: none; width: 28px; height: 28px; margin-left: auto; border-radius: 50%; background: var(--orange); font-size: 0; color: transparent; text-decoration: none; overflow: hidden; }
  .calc-bar-go::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -5px 0 0 -4px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
}
.calc-bar.is-away { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (min-width: 1100px) { .calc-bar { display: none !important; } }

/* ------------------------------------------------------------------ the sign-up */

.signup, .done, .terms { padding-bottom: clamp(96px, 11vw, 160px); }
.signup .h1, .done .h1, .terms .h1 { font-size: clamp(38px, 3.8vw, 92px); margin-bottom: 22px; }
.signup-grid { display: grid; gap: 40px; }
@media (min-width: 1100px) {
  .signup-grid:has(.signup-side:not([hidden])) { grid-template-columns: minmax(0, 1120px) clamp(380px, 26vw, 480px); gap: clamp(48px, 5vw, 96px); align-items: start; }
  .signup-side { position: sticky; top: calc(var(--top-h) + 24px); }
}
.signup-main { min-width: 0; }
.signup .lead { margin-bottom: 30px; }

/* The three steps, drawn along a rule; the orange runs as far as the visitor has come. */
.progress { position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 22px; padding: 0; border-top: 2px solid var(--rule); }
.progress::before { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: calc(100% / 3); background: var(--ink); transition: width 0.5s var(--ease-out); }
.progress[data-at="2"]::before { width: calc(200% / 3); }
.progress[data-at="3"]::before { width: 100%; }
.progress li { display: flex; align-items: center; gap: 10px; padding: 14px 8px 0 0; min-width: 0; font: 600 15px/1.2 var(--f); color: var(--ink-3); white-space: nowrap; }
.progress b { font: 500 13px/1 var(--m); }
.progress li::before { content: ""; flex: none; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; }
.progress li[aria-current="step"] { color: var(--ink); }
.progress li[aria-current="step"]::before { background: var(--orange); border-color: var(--orange); }
.progress li.is-done { color: var(--ink-2); }
.progress li.is-done::before { background: var(--ink); border-color: var(--ink); }
@media (max-width: 520px) { .progress li span { display: none; } .progress li[aria-current="step"] span { display: inline; } }

.signup-card { padding: clamp(20px, 3vw, 40px); background: var(--white); border: 1px solid var(--rule); border-radius: var(--r5); box-shadow: 0 40px 70px -44px rgba(11, 11, 10, 0.55); }
.sstep { display: grid; gap: 22px; }
.sstep .form-title { margin: 0; }
.sstep .form-title:focus { outline: none; }
.sstep .f-foot { margin-top: 4px; }
.signup-card .calc-controls { grid-template-columns: minmax(0, 1fr); margin: 0; border: 1px solid var(--rule); background: var(--paper); }
.signup-card .calc-ctl + .calc-ctl { border-left: 0; border-top: 1px solid var(--rule); }
.f-said-top { margin: 0 0 18px; color: var(--ink); }
/* A House quote opened while the server holds a Paystack test key (6 October 2026): said once, above the form. */
.signup-test { display: inline-block; margin: 0 0 18px; padding: 8px 14px; font-family: var(--m); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); background: var(--white); border: 2px solid var(--orange); }
.signup-card .f-grid { align-items: start; }

/* The modules as a list of ticks, each with its price for the band. */
.ticks { display: grid; gap: 8px; }
@media (min-width: 720px) { .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ticks .f-k { grid-column: 1 / -1; } }
.ticks .f-k { margin: 0 0 4px; }
.tick, .terms-tick { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.tick { min-height: 58px; padding: 10px 14px; background: var(--paper); border: 1.5px solid var(--field); border-radius: var(--r2); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.tick:hover { border-color: var(--ink-2); }
.tick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tick-box { display: grid; place-items: center; width: 22px; height: 22px; background: var(--white); border: 1.5px solid var(--ink); border-radius: 6px; transition: background-color 0.15s, border-color 0.15s; }
.tick-box::after { content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); opacity: 0; transition: opacity 0.15s; }
.tick input:checked ~ .tick-box, .terms-tick input:checked ~ .tick-box { background: var(--orange); border-color: var(--orange); }
.tick input:checked ~ .tick-box::after, .terms-tick input:checked ~ .tick-box::after { opacity: 1; }
.tick:has(input:checked) { background: var(--white); border-color: var(--ink); }
.tick:has(input:focus-visible), .terms-tick:has(input:focus-visible) .tick-box { outline: 2px solid var(--orange); outline-offset: 2px; }
.tick:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.tick:has(input:disabled) input { cursor: not-allowed; }
.tick-name { font-weight: 600; line-height: 1.25; }
.tick-price { font: 500 13.5px/1.25 var(--m); color: var(--ink-2); text-align: right; white-space: nowrap; }
.tick-price .per { display: block; color: var(--ink-3); font-size: 12px; }
.tick.is-off-band .tick-price { font-family: var(--f); font-size: 13.5px; }

.signup-big { margin: 0; padding: 14px 16px; background: var(--sunk); border-left: 4px solid var(--orange); border-radius: 0 var(--r2) var(--r2) 0; font-weight: 600; }
.signup-big a { white-space: nowrap; }
.sstep-sum { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 12px 16px; background: var(--sunk); border-radius: var(--r2); font: 500 14.5px/1.4 var(--m); }
@media (min-width: 1100px) { .sstep-sum { display: none !important; } }

/* The details. */
.f-sub { margin: 6px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); font: 800 17px/1.1 var(--f); text-transform: uppercase; letter-spacing: -0.01em; }
.f-hint { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.f-hint.is-wait { color: var(--ink-2); }
.f-hint.is-ok { color: var(--ink); font-weight: 600; }
.f-hint.is-ok::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--orange); vertical-align: 1px; }
.f-hint.is-bad, .f-err { color: var(--deep); font-weight: 600; }
.f-err { margin: 0; font-size: 14px; line-height: 1.4; }
.signup-card [aria-invalid="true"] { border-color: var(--deep); }
.addr-field:has([aria-invalid="true"]) { border-color: var(--deep); }
.signup-card .addr-field { margin: 0; }
.terms-tick { grid-template-columns: 22px minmax(0, 1fr); align-items: start; font-size: 16px; line-height: 1.45; cursor: pointer; }
.terms-tick input { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.terms-tick .tick-box { margin-top: 1px; }
.terms-tick a { font-weight: 600; }
.terms-tick + .f-err { margin-top: -12px; }
/* Who signs up (6 October 2026): a company, close corporation or trust, or an individual. One is required. */
.who { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.who legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; font-size: 16px; font-weight: 600; line-height: 1.45; }
.who .tick-box { border-radius: 50%; }
.who .tick:has([aria-invalid="true"]) { border-color: var(--deep); }

/* What is paid today: the rows of the choice, then the figure on ink. */
.pay-rows { margin: 0; border-top: 2px solid var(--ink); }
.pay-rows > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.pay-rows dt { font: 600 11.5px/1.3 var(--m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.pay-rows dd { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.pay-change { padding: 4px 0; border: 0; background: none; color: var(--ink); font: 600 14px/1 var(--f); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.pay-change:hover { text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
@media (max-width: 560px) { .pay-rows > div { grid-template-columns: minmax(0, 1fr) auto; } .pay-rows dd { grid-column: 1 / -1; grid-row: 2; } }
.pay-today { display: grid; gap: 12px; margin: 0; padding: 20px 22px; background: var(--ink); color: var(--paper); border-radius: var(--r3); }
.pay-today > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.pay-today dt { font: 600 11.5px/1.3 var(--m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }
.pay-today dd { margin: 0; }
.pay-today .fig { font-size: clamp(24px, 1.9vw, 32px); }
.pay-card .fig { color: var(--orange); }
.pay-then { padding-top: 12px; border-top: 1px solid var(--ink-rule); }
.pay-then dd { font: 500 15px/1.4 var(--m); }
.pay-today .fig-incl { color: var(--ash); }

/* Sign-up closed: what happens instead, with the section hatching along its head. */
.signup-closed { position: relative; max-width: 860px; margin-top: 8px; padding: clamp(28px, 3.4vw, 52px); padding-top: calc(clamp(28px, 3.4vw, 52px) + 10px); background: var(--white); border: 1px solid var(--rule); border-radius: var(--r5); box-shadow: 0 40px 70px -44px rgba(11, 11, 10, 0.55); overflow: hidden; }
.signup-closed::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-linear-gradient(135deg, var(--orange) 0 2px, transparent 2px 9px); border-bottom: 1.5px solid var(--ink); }
.signup-closed .h2 { font-size: clamp(30px, 3vw, 64px); margin-bottom: 18px; }
.signup-closed .h2:focus { outline: none; }
.signup-closed .lead { margin-bottom: 28px; }

/* ------------------------------------------------------------------ after Paystack */

.done-card { max-width: 980px; padding: clamp(24px, 3.4vw, 52px); background: var(--white); border: 1px solid var(--rule); border-radius: var(--r5); box-shadow: 0 40px 70px -44px rgba(11, 11, 10, 0.55); }
.done-title:focus { outline: none; }
.done-stages { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 30px 0 24px; padding: 0; }
.done-stages li { display: grid; align-content: start; gap: 12px; font: 600 15px/1.3 var(--f); color: var(--ink-3); }
.done-stages i { position: relative; display: block; height: 6px; overflow: hidden; background: var(--rule); border-radius: 3px; }
.done-stages i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform 0.6s var(--ease-out); }
.done-stages li.is-done, .done-stages li.is-now, .done-stages li.is-failed { color: var(--ink); }
.done-stages li.is-done i::after { transform: none; }
.done-stages li.is-now i::after { background: var(--orange); width: 40%; animation: working 1.5s var(--ease) infinite; transform: none; }
.done-stages li.is-failed i::after { background: var(--deep); transform: none; }
@keyframes working { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.done-msg { max-width: none; margin: 0 0 26px; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.45; }
.done-msg b { font-weight: 600; }
.done-ref { margin: 24px 0 0; font: 500 13px/1.3 var(--m); color: var(--ink-3); }
.done-ref .mono { color: var(--ink); }
@media (max-width: 560px) { .done-stages li { font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .done-stages li.is-now i::after { animation: none !important; transform: none !important; width: 50%; } }

/* ------------------------------------------------------------------ the terms */

.terms-grid { display: grid; gap: 36px; }
@media (min-width: 1100px) {
  .terms-grid { grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 140px); align-items: start; }
  .terms-aside { position: sticky; top: calc(var(--top-h) + 32px); }
}
.terms-head { margin-bottom: clamp(28px, 4vw, 56px); }
.terms-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 12px; color: var(--ink-2); }
.terms-ver { margin: 0; font: 500 13px/1.3 var(--m); color: var(--ink-3); }
.terms-ver .mono { color: var(--ink); }
.terms-body { max-width: var(--measure); }
.terms-doc { margin: 0 0 22px; font: 800 clamp(22px, 2vw, 30px)/1.05 var(--f); text-transform: uppercase; letter-spacing: -0.02em; }
.terms-sec { margin-top: 34px; padding-top: 22px; border-top: 2px solid var(--ink); }
.terms-doc + .terms-sec { margin-top: 0; padding-top: 0; border-top: 0; }
.terms-sec h3 { margin: 18px 0 8px; font: 700 17px/1.3 var(--f); }
.terms-body p, .terms-body li { color: var(--ink-2); font-size: 17px; }
.terms-body ul { margin: 0 0 14px; padding-left: 22px; }
.terms-body li { margin-bottom: 6px; }
.terms-body li::marker { color: var(--orange); }
.terms-body .terms-note { padding: 12px 16px; background: repeating-linear-gradient(135deg, rgba(232, 80, 2, 0.08) 0 1px, transparent 1px 7px), var(--white); border-left: 3px solid var(--orange); border-radius: 0 var(--r2) var(--r2) 0; font-size: 15px; color: var(--ink); }
/* The legal pages' tables (13 October 2026): the privacy notice's and Schedule A's, scrolled sideways on a phone rather than squeezed. */
/* An address is one long word: pretty wrapping cannot keep it company on the last line, balancing can. */
.page-privacy .terms-body p, .page-privacy .terms-body li { text-wrap: balance; }
/* A reading line, however wide the screen (G96: about 82 characters a line at 1920 and 91 at 2560). */
.terms-body p, .terms-body li { max-width: 70ch; }
.signin-legal a + a { margin-left: 16px; }
.terms-grid > div { min-width: 0; } /* a table's own width never widens the page's column */
.legal-table { margin: 6px 0 18px; overflow-x: auto; border-top: 2px solid var(--ink); }
.legal-table table { width: 100%; min-width: 560px; border-collapse: collapse; }
.legal-table th, .legal-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.legal-table th { font: 500 12px/1.3 var(--m); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.legal-table td:first-child { font-weight: 600; color: var(--ink); }
/* The PAIA manual's contact details (11 November 2026): a label and its value, one pair to a row; stacked on a phone. */
.legal-dl { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 6px 20px; margin: 6px 0 18px; }
.legal-dl dt { font-family: var(--m); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); line-height: 1.7; }
.legal-dl dd { margin: 0; min-width: 0; }
@media (max-width: 560px) { .legal-dl { grid-template-columns: 1fr; } .legal-dl dt { margin-top: 8px; } }
/* The manual's dates sit above its lead, as in the approved draft, with a line's space below. On a phone its long title
   is set a little smaller, so "Information Act" stays on one line and no word is left alone (measured at 390 wide). */
.page-paia .terms-aside .paia-maker { margin: 0 0 18px; }
/* Its lead runs to nine lines at 1440, past where a browser balances lines, so it is set pretty, which keeps the last line from holding one word. */
.page-paia .terms-aside .lead { text-wrap: pretty; }
@media (max-width: 480px) { .page-paia .terms .h1 { font-size: 33px; } }
.terms-body h4 { margin: 22px 0 6px; font: 700 16px/1.3 var(--f); color: var(--ink); scroll-margin-top: calc(var(--top-h) + 24px); }

/* NOT FOUND (seo.ts, siteNotFound; 5 October 2026): the site's menu as the way on, in the questions page's link style. */
.nf-nav ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.nf-nav a { display: inline-flex; padding: 10px 14px; border-radius: var(--r2); background: rgba(255, 255, 255, 0.8); border: 1px solid var(--rule); text-decoration: none; font-weight: 600; }
.nf-nav a:hover { border-color: var(--ink); }