/* =====================================================================
   STONELEDGER WEBSITE — components.

   Structure only. Every colour, surface, shadow and radius comes from
   /brand/tokens.css through the semantic names, so this file is the same
   for all four themes. If a rule here needs a theme-specific value, the
   answer is a new token in tokens.css, never a [data-theme] selector here
   (design specification: IMPLEMENTATION RULE).

   Phone-width layout is deliberately unfinished: Dean asked for the mobile
   pass to come last (18 Sep 2026). The rules at the bottom keep narrow
   screens usable, nothing more.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-primary);
  background: var(--page-background);
  background-color: var(--color-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11" 1, "ss01" 1;
}
img, svg { display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.sprite { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--space-4); top: -60px; z-index: 50;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-control);
  background: var(--color-button-primary-bg); color: var(--color-button-primary-text);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--space-4); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }

/* Line icons: one stroke weight everywhere. */
.ic, .ic-lg {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ic { width: 16px; height: 16px; flex: 0 0 auto; }
.ic-lg { width: 26px; height: 26px; flex: 0 0 auto; stroke-width: 2.1; }

/* A detail that is not known yet. Visible on purpose, so a placeholder can
   never pass for the real thing. */
/* A fact still to be filled in. Short ones — a company number, a date —
   should not break across a line, which is what nowrap was for. But the
   drafted policies use these for whole sentences of guidance too, and a
   1,000px sentence that will not wrap pushes the page sideways. So:
   never break a SHORT one, and let a long one wrap like any other text. */
.ph {
  padding: 0 4px; border-radius: 4px;
  outline: 1px dashed currentColor; outline-offset: -1px;
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-style: normal;
  white-space: nowrap;
}
.ph:has(> *), .legal .ph { white-space: normal; }
/* Anything long enough to be a sentence wraps; the outline follows it. */
.legal .ph { box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* An address with no spaces in it - [privacy@stoneledgeruk.co.uk] - is one
   word to the browser, and on a 320px screen it took the policies 100px
   wider than the phone (22 Sep 2026). Long words break where they must. */
.legal { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- wordmark
   The supplied lettering, painted through its own alpha mask so each theme
   can colour it. The letter shapes are the artwork's, never a font. */
.wordmark {
  display: block;
  aspect-ratio: 1056 / 204;
  background: var(--color-brand-primary);
  -webkit-mask: url("/brand/img/wordmark.png") center / contain no-repeat;
          mask: url("/brand/img/wordmark.png") center / contain no-repeat;
}

/* ---------------------------------------------------------------- type */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--color-accent);
}
.text-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; color: var(--color-link); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.text-link:hover { border-bottom-color: currentColor; }
.text-link .ic { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 48px; padding: 0 var(--space-5);
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font: 600 15px/1 var(--font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease),
              color var(--duration) var(--ease), transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .ic { transition: transform var(--duration) var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn-primary {
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  border-color: var(--color-button-primary-border, transparent);
  box-shadow: var(--highlight-top);
}
.btn-primary:hover { background: var(--color-button-primary-hover); }
.btn-secondary {
  background: var(--color-button-secondary-bg);
  color: var(--color-button-secondary-text);
  border-color: var(--color-button-secondary-border);
  box-shadow: var(--highlight-top);
}
.btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--color-button-secondary-border); }
.btn-quiet {
  height: 40px; padding: 0 var(--space-3);
  background: transparent; color: var(--color-nav-text); font-size: 14px;
}
.btn-quiet:hover { color: var(--color-nav-active); }
.btn-quiet:hover .ic { transform: none; }
/* A secondary button on the dark "inverse" panels. */
.btn-on-inverse {
  background: transparent; color: var(--color-text-on-inverse);
  border-color: color-mix(in srgb, var(--color-text-on-inverse) 45%, transparent);
}
.btn-on-inverse:hover { border-color: var(--color-text-on-inverse); }
/* A button that takes you further down the page, so its arrow nudges down
   rather than along. */
.btn-down:hover .ic { transform: translateY(3px); }

/* ================================================================ NAV */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-nav-border);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
          backdrop-filter: saturate(1.4) blur(12px);
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
/* 1600, not the page's 1360: the header carries more than the content
   column does, and with Pricing and Book a demo (Dean, 21 Sep 2026) it
   needs about 1,550px to hold everything on one line. */
/* 1720 since 22 Sep 2026: For accountants beside Log in needs the room
   for the full "Construction Industry Scheme" label to stay. */
.nav-inner {
  position: relative;
  max-width: 1720px; margin: 0 auto; padding: 0 var(--gutter);
  height: 68px; display: flex; align-items: center; gap: var(--space-5);
}
.nav-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex: 0 0 auto; }
.nav-brand .wordmark { width: 150px; }
/* The greyscale logo: the logo in every theme, on the website as in the
   product (Dean, 18 Sep 2026). tokens.css still owns the switch. */
.nav-logo-tile {
  display: var(--nav-logo-tile, block);
  width: 40px; height: auto;
  filter: drop-shadow(0 1px 2px rgba(11, 31, 45, .18));
}
.nav-links { display: flex; gap: var(--space-4); margin-right: auto; }
.nav-links a {
  font-size: 13.5px; font-weight: 500; color: var(--color-nav-text); text-decoration: none; white-space: nowrap;
  padding: var(--space-2) 0; border-bottom: 2px solid transparent;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.nav-links a:hover { color: var(--color-nav-active); border-bottom-color: var(--color-nav-active); }
/* More (Dean, 3 Oct 2026): a small menu in Contact's old place, its down
   arrow turning over when it is open. A button that shows a list, so a
   keyboard and a screen reader reach it the same way as a pointer. */
.nav-more { position: relative; display: flex; align-items: center; }
.nav-more-btn {
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--color-nav-text);
  background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--space-2) 0;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.nav-more-btn:hover, .nav-more.open .nav-more-btn { color: var(--color-nav-active); border-bottom-color: var(--color-nav-active); }
.nav-more-btn .nav-caret { width: 15px; height: 15px; transition: transform var(--duration) var(--ease); }
.nav-more.open .nav-caret { transform: rotate(180deg); }
.nav-more-list {
  display: none; position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 40;
  flex-direction: column; min-width: 230px; padding: var(--space-2);
  background: var(--color-dialog-bg, var(--color-surface-raised));
  border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-raised);
}
.nav-more.open .nav-more-list { display: flex; }
.nav-links .nav-more-list a {
  padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-control); color: var(--color-text-primary);
}
.nav-links .nav-more-list a:hover { background: color-mix(in srgb, var(--color-text-primary) 6%, transparent); border: 0; }
.nav-links .nav-more-list a[aria-current="page"] { font-weight: 650; }
@media (prefers-reduced-motion: reduce) { .nav-more-btn .nav-caret { transition: none; } }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.nav-menu { display: none; }
.nav-short { display: none; }
/* Under 1600px the long CIS label gives way to "CIS" and the spacing
   tightens, so the header still fits on one line down to 1360px. */
@media (max-width: 1719px) {
  .nav-long { display: none; }
  .nav-short { display: inline; }
  .nav-inner { gap: var(--space-4); }
  .nav-links { gap: 12px; }
}
/* Tighter again, so the links still sit in the header at 1440px with For
   accountants beside Log in (22 Sep 2026). */
@media (max-width: 1519px) {
  .nav-inner { gap: 12px; }
  .nav-links { gap: 9px; }
}
/* A 1440px laptop shows about 1,420px once the scrollbar is taken off, so
   this has to fit down to 1,400px: slightly smaller links and a narrower
   theme switch buy the room For accountants took. */
@media (max-width: 1469px) {
  .nav-links { gap: 7px; }
  .nav-links a, .nav-more-btn { font-size: 13px; }
  .nav-inner { gap: 10px; }
  .theme-switch { grid-auto-columns: 32px; }
  .theme-switch .thumb { width: 32px; }
  .theme-switch[data-pos="1"] .thumb { transform: translateX(32px); }
  .theme-switch[data-pos="2"] .thumb { transform: translateX(64px); }
  .theme-switch[data-pos="3"] .thumb { transform: translateX(96px); }
  .theme-switch[data-pos="4"] .thumb { transform: translateX(128px); }
}

/* ---------- moving between themes (Dean, 3 Oct 2026) ----------
   The old screen dissolves into the new one: each fades across while it
   softens through a light blur, so the colours shift rather than snap. The
   slider's thumb is lifted out and glides from its old place to its new
   one. Behind both, the new theme's page colour, so the blur never shows a
   pale edge. See themeShift(). */
::view-transition{background:var(--color-page)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.7s;animation-timing-function:cubic-bezier(.45,0,.2,1);animation-fill-mode:both}
::view-transition-old(root){animation-name:theme-out}
::view-transition-new(root){animation-name:theme-in}
::view-transition-group(theme-thumb){animation-duration:.7s;animation-timing-function:cubic-bezier(.45,0,.2,1)}
@keyframes theme-out{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(8px)}}
@keyframes theme-in{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
.nav .theme-switch .thumb{view-transition-name:theme-thumb}
/* The page's own colour transitions wait while the screens dissolve, so the
   new screen is the finished theme from its first frame. */
html.theme-shifting *,html.theme-shifting *::before,html.theme-shifting *::after{transition:none!important}
html.theme-dip body{animation:theme-dip .64s cubic-bezier(.45,0,.2,1)}
@keyframes theme-dip{0%{opacity:1;filter:none}40%{opacity:.14;filter:blur(6px)}100%{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html.theme-dip body{animation:none}
}

/* ---------------------------------------------------------------- theme switch
   Four positions, one sliding thumb: sun, diamond, moon, mountain (Dean,
   3 Oct 2026). */
.theme-switch {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 36px;
  padding: 3px; border-radius: var(--radius-pill);
  background: var(--color-switch-bg);
  border: 1px solid var(--color-border);
  isolation: isolate;
}
.theme-switch .thumb {
  position: absolute; top: 3px; left: 3px; width: 36px; height: calc(100% - 6px);
  border-radius: var(--radius-pill); background: var(--color-switch-thumb); z-index: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
  transition: transform 240ms var(--ease), background-color var(--duration) var(--ease);
}
.theme-switch[data-pos="1"] .thumb { transform: translateX(36px); }
.theme-switch[data-pos="2"] .thumb { transform: translateX(72px); }
.theme-switch[data-pos="3"] .thumb { transform: translateX(108px); }
.theme-switch[data-pos="4"] .thumb { transform: translateX(144px); }
.theme-switch label {
  position: relative; z-index: 1; height: 30px; display: grid; place-items: center;
  cursor: pointer; color: var(--color-switch-icon); border-radius: var(--radius-pill);
  transition: color var(--duration) var(--ease);
}
.theme-switch label:hover { color: var(--color-nav-active); }
.theme-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-switch label:has(input:checked) { color: var(--color-switch-icon-on); }
.theme-switch label:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.theme-switch svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ================================================================ GLASS
   Theme 05 frosts the big surfaces over its hazy sky. --glass-blur is none
   in every other theme, so these rules do nothing there. */
/* .feat-modal was missing until 22 Sep 2026, so every feature dialog let the
   page show straight through it in theme 05; the accountants page's cards
   join the list with it. */
.tile, .card, .stack-row, .panel, .closing, .status-note, .shot-frame, .carousel-frame,
.showcase-tabs [role="tab"], .dialog, .lightbox, .slab, .bridge-band, .theme-tip, .price-nudge,
.feat-modal, .acc-point, .acc-walk, .acc-rail, .walk-box, .walk-view, .walk-task, .walk-cta, .walk-dialog {
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}
/* The hero's own panel blurs only where a theme asks it to: Glass, whose
   hero is a dark glass panel. Liquid metal sets it to none, because its terrain IS
   what lies behind the hero and must stay sharp. */
.hero-grid {
  -webkit-backdrop-filter: var(--hero-grid-blur, var(--glass-blur));
          backdrop-filter: var(--hero-grid-blur, var(--glass-blur));
}
/* The sections sit on light glass slabs in theme 05; elsewhere a slab is
   invisible. */
/* The pull is an equal negative margin, so a slab's padding is drawn out
   into the section's spacing and the content sits exactly where it does in
   the themes with no slab (27 Sep 2026). */
.slab {
  background: var(--slab-bg); border: var(--slab-border); border-radius: var(--radius-panel);
  padding-top: var(--slab-pad); padding-bottom: var(--slab-pad); box-shadow: var(--slab-shadow);
  margin-top: var(--slab-pull, 0px); margin-bottom: var(--slab-pull, 0px);
}
/* And sideways: the border would make the column 2px narrower, which
   shrinks every screenshot in it by a pixel and re-wraps some lines, and
   over a page that adds up. The gutter gives the border's width back. */
.wrap.slab {
  padding-left: calc(var(--gutter) - var(--slab-edge, 0px));
  padding-right: calc(var(--gutter) - var(--slab-edge, 0px));
}

/* ================================================================ HERO */
.hero { position: relative; padding: var(--space-7) 0 var(--hero-pad-bottom, var(--space-8)); overflow: hidden; }
/* Two columns, as on the reference boards: the words, calls to action and
   feature tiles on the left; the mountain with the product sitting on its
   lake on the right. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  column-gap: var(--space-6);
  align-items: start;
  /* A dark glass panel in theme 05, as on the board; nothing elsewhere. */
  background: var(--hero-panel-bg); border: var(--hero-panel-border); border-radius: var(--radius-panel);
  padding-top: var(--hero-panel-pad); padding-bottom: var(--hero-panel-pad); box-shadow: var(--hero-panel-shadow);
  /* Drawn outward, as the slabs are, so the words line up in every theme. */
  margin-top: var(--hero-panel-pull, 0px); margin-bottom: var(--hero-panel-pull, 0px);
}
.wrap.hero-grid {
  padding-left: calc(var(--gutter) - var(--hero-panel-edge, 0px));
  padding-right: calc(var(--gutter) - var(--hero-panel-edge, 0px));
}
/* The column runs the full height of the box, so the four tiles can sit at
   its foot under the price (Dean, 30 Sep 2026). */
.hero-left { position: relative; z-index: 2; align-self: stretch; display: flex; flex-direction: column; }
.hero-right { position: relative; z-index: 1; }
.hero-copy { position: relative; padding-top: var(--space-5); }
.hero-copy .eyebrow { margin-bottom: var(--space-4); }
.hero-title { display: block; }
.wordmark-hero { width: min(600px, 100%); }
.message {
  display: block; margin-top: var(--space-4);
  font-size: clamp(28px, 3.1vw, 42px); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.lede {
  margin-top: var(--space-5); max-width: 30em;
  font-size: 18px; line-height: 1.55; color: var(--color-text-secondary);
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.cta-center { justify-content: center; }

/* The mountain: the supplied artwork, placed and scaled, never redrawn.
   It is meant to bleed past its own column, and its glow wider still, but
   never past the page: on a tablet at 660-744px the glow took the page
   53px wider than the screen and the whole site scrolled sideways (found
   by tools/site-fits.mjs, 22 Sep 2026). `clip`, not `hidden`, because
   `hidden` on an ancestor turns the sticky header into a scroll container
   and it stops sticking. On the root, not on the body, so nothing depends
   on the browser propagating it up. */
.hero-art { position: relative; }
.hero-art .mountain {
  position: relative;
  width: 112%; margin-left: -6%; margin-top: var(--space-6);
}
.mountain { position: relative; }
.mountain::before {
  content: ""; position: absolute; inset: -10% -6% -20%;
  background: var(--mountain-glow); pointer-events: none; z-index: -1;
}
.mountain img { width: 100%; height: auto; filter: var(--mountain-filter); }
/* Liquid metal shows its terrain behind the hero in place of the mountain. The
   mountain keeps its room, unseen, so the hero lays out the same in every
   theme. */
.hero-art .mountain img { opacity: var(--hero-mountain-opacity, 1); }
.peaks {
  position: absolute; right: 0; top: calc(var(--space-4) * -1); z-index: 2;
  text-align: right; font-size: 12px; font-weight: 600; line-height: 1.8;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-text-secondary);
}
/* The saving is a link down to Pricing, at exactly the size and in exactly
   the place of the words it replaced; only the hover says it is a link. */
a.peaks { display: block; text-decoration: none; text-underline-offset: 3px; }
a.peaks:hover { color: var(--color-nav-active); text-decoration: underline; }
a.peaks:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }
a.peaks .ic { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; }
/* The saving itself, bold and in the wordmark's colour for the theme (Dean,
   21 Sep 2026) -- same size and line height, so nothing moves. */
a.peaks .peaks-save { font-weight: 800; color: var(--color-brand-primary); }

/* The price: the brand serif, in the wordmark's colour for the theme, a
   touch smaller than the lettering. */
.hero-price {
  margin-top: var(--space-6);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 4.3vw, 62px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--color-brand-primary);
  font-variant-numeric: lining-nums;
}
/* Under the prices (Dean, 22 Sep 2026): smaller than the line under the
   headline, and in its colour. */
.hero-price-note {
  margin-top: var(--space-2);
  font-size: 15px; line-height: 1.5; color: var(--color-text-secondary);
}
/* The no-card trial, straight under "No hidden fees." (22 Sep 2026). */
.hero-price-note.hero-trial-note { margin-top: 2px; }
.price-trial { margin-top: var(--space-3); font-size: 16px; font-weight: 600; color: var(--color-text-primary); }
.nw { white-space: nowrap; }
.hero-tiles {
  margin-top: auto; padding-top: var(--space-6);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3);
}
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 112px; padding: var(--space-4) var(--space-2);
  text-align: center; font-size: 13.5px; font-weight: 600; line-height: 1.25;
  background: var(--surface-card, var(--color-surface)); color: var(--color-text-primary);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), var(--highlight-top);
}
.tile .ic-lg { color: var(--color-accent); }

/* ---------------------------------------------------------------- product screenshots
   Real screens from the product, in the visitor's theme (tools/site-shots.mjs). */
.shot-hero { position: relative; z-index: 3; margin: calc(var(--space-5) * -1) 0 0 var(--space-7); }
.shot-frame {
  overflow: hidden; border-radius: var(--radius-panel);
  background: var(--mock-bg); border: 1px solid var(--mock-border);
  box-shadow: var(--shadow-raised);
}
/* A slim window bar: says "this is the product" without pretending to be
   any particular browser. */
.shot-bar {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  background: var(--mock-sidebar); border-bottom: 1px solid var(--mock-border);
}
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--mock-muted); opacity: .45; }
.shot-title { margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--mock-sidebar-text, var(--mock-muted)); }
.shot-img {
  width: 100%; height: auto; aspect-ratio: 1280 / 800; background: var(--mock-bg);
  transition: opacity 180ms var(--ease);
}
.shot-img.is-loading { opacity: .35; }
.shot-caption {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-3); font-size: 12.5px; color: var(--color-text-muted);
}
.shot-caption b { color: var(--color-text-secondary); font-weight: 600; }
/* The hero's caption row keeps one height whatever the slide. With seven
   screens (the Submission hub added, 28 Sep 2026) the longest caption no
   longer fits beside the dots and wraps, and the page jumped every time the
   slideshow reached it. Held at the wrapped height, nothing moves. */
.shot-hero .shot-caption { min-height: 58px; align-content: flex-start; }
.shot-dots { display: inline-flex; gap: 6px; }
.shot-dots button {
  width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
}
.shot-dots button::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-border-strong); transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.shot-dots button[aria-current="true"]::before { background: var(--color-accent); transform: scale(1.25); }

/* One card from the product, captured at twice the size for sharpness.
   The tall ones are cut at a natural point; the fade stops the cut from
   reading as a mistake. */
.shot-card-frame {
  overflow: hidden; border-radius: var(--radius-card);
  border: 1px solid var(--mock-border); background: var(--mock-bg);
  box-shadow: var(--shadow-raised);
}
.shot-card {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}
.shot-card-figure { margin: 0; }

/* ---------------------------------------------------------------- carousels
   Every set of screenshots cycles on its own (Dean, 19 Sep 2026), with
   dots, small arrows either side of them that wrap round, and a pause
   button -- anything that moves by itself has to be stoppable. It also
   holds still while the pointer or keyboard focus is on it, and does not
   move by itself at all for anyone whose device asks for reduced motion.
   Every screen in one carousel has the same shape, so the frame never
   jumps; a shorter card sits on the product's own page colour. */
.carousel { margin: 0; }
.carousel-frame {
  position: relative; overflow: hidden; border-radius: var(--radius-card);
  background: var(--shot-frame-bg); border: 1px solid var(--mock-border); box-shadow: var(--shadow-raised);
  aspect-ratio: var(--frame-ratio, auto);
}
.car-cis { --frame-ratio: 1400 / 1360; }
.car-mtd-itsa { --frame-ratio: 1400 / 1400; }
.car-mtd-vat { --frame-ratio: 1400 / 800; }
.car-mtd-cis { --frame-ratio: 1400 / 1040; }
/* The compliance pair: a wide card and a tall overlay. Fixed to the
   taller so the frame never jumps mid-cycle, and the card is centred in
   it rather than stretched (Dean, 20 Sep 2026). */
.car-prop-compliance { --frame-ratio: 2592 / 1620; display: grid; align-items: center; }
.carousel-stage { position: relative; }
.carousel-stage > img { width: 100%; height: auto; display: block; transition: opacity 220ms var(--ease); }
/* The next screen, fading and drifting in over the last one. */
.carousel-stage > img.car-incoming {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 680ms cubic-bezier(.4, 0, .2, 1), transform 680ms cubic-bezier(.2, .7, .2, 1);
}
.carousel-stage > img.car-incoming.in { opacity: 1; }
.carousel-stage .callouts { z-index: 2; transition: opacity 240ms var(--ease); }
.carousel-stage.swapping .callouts { opacity: 0; }
.callouts > li { animation: callout-in 420ms var(--ease) both; }
@keyframes callout-in { from { opacity: 0; } to { opacity: 1; } }
.carousel .shot-card {
  -webkit-mask-image: linear-gradient(180deg, #000 95%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 95%, transparent 100%);
}
/* Kept to the right, including when a long caption pushes them onto a
   line of their own. */
.car-controls { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.car-btn {
  width: 26px; height: 26px; padding: 0; display: grid; place-items: center; flex: 0 0 auto;
  border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); cursor: pointer;
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.car-btn:hover { color: var(--color-text-primary); background: color-mix(in srgb, currentColor 10%, transparent); }
.car-btn .ic { width: 14px; height: 14px; }
.car-pause { margin-left: var(--space-1); }
.car-pause .i-play, .car-pause[aria-pressed="true"] .i-pause { display: none; }
.car-pause[aria-pressed="true"] .i-play { display: block; }

/* ---------------------------------------------------------------- call-outs
   Numbered pins on the CIS screens, each with a liquid-glass note that
   explains what that part of the screen does. One note shows at a time,
   in turn; any pin can be pressed to show its own. Placed by the
   screenshot tool, which finds the text each one points at. */
.callouts { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
/* A callout is the box round the part of the screen it explains. The ring
   shows only for the note being read; the number sits on its corner, in
   the margin round the words rather than on them. */
.callout { position: absolute; }
.callout-ring {
  position: absolute; inset: 0; border-radius: 9px; pointer-events: none;
  border: 2px solid var(--callout-pin);
  background: color-mix(in srgb, var(--callout-pin) 6%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--callout-pin) 16%, transparent);
  opacity: 0; transition: opacity 260ms var(--ease);
}
.callout.is-on .callout-ring { opacity: 1; }
.callout-pin {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: auto;
  width: 20px; height: 20px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  font: 700 10.5px/1 var(--font-body); color: var(--callout-pin-ink); background: var(--callout-pin);
  border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 2px 6px rgba(11, 31, 45, .30);
  opacity: .78; transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.callout.is-on .callout-pin { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
.callout-pin:hover { opacity: 1; }
/* The note itself: one per carousel, placed by site.js wherever there is
   room beside the ring, and never outside the screenshot. */
.callout-bubble {
  position: absolute; left: 0; top: 0; width: 240px; padding: 11px 14px; border-radius: 16px;
  font-size: 13px; line-height: 1.45; font-weight: 500; color: var(--callout-ink);
  background: var(--callout-bg); border: 1px solid var(--callout-border);
  -webkit-backdrop-filter: blur(14px) saturate(1.8);
          backdrop-filter: blur(14px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62), inset 0 -1px 0 rgba(255, 255, 255, .10),
              0 14px 34px rgba(11, 31, 45, .26);
  opacity: 0; transform: scale(.97); pointer-events: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.callout-bubble.is-on { opacity: 1; transform: scale(1); }
/* The sheen that makes it read as glass rather than a white box. */
.callout-bubble::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .50) 0%, rgba(255, 255, 255, 0) 42%);
  mix-blend-mode: soft-light;
}

/* ================================================================ SECTIONS */
/* A clicked section lands with its top (its box, in Glass) just under the
   header: the negative margin cancels the section's own top padding. */
.section {
  padding: var(--section-pad, var(--space-9)) 0;
  scroll-margin-top: calc(var(--section-land, 16px) - var(--section-pad, var(--space-9)));
}
.section-tight { padding-top: var(--section-tight-top, 0); }
.section-head { max-width: 640px; margin-bottom: var(--space-7); }
.section-head-wide { max-width: 820px; }
.section-head .eyebrow, .split-copy .eyebrow { margin-bottom: var(--space-3); }
/* One heading scale for every page (Dean, 2 Oct 2026, "one scale on all four"):
   page titles, section headings, card headings. Dialog titles, the footer's
   column labels, the home page's hero lockup and the two "Click it" lines
   are not page, section or card headings and keep their own sizes. */
:root { --h-title: clamp(36px, 4.4vw, 60px); --h-section: clamp(30px, 3.4vw, 44px); --h-card: 20px; }
.section h2 {
  font-size: var(--h-section); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em;
}
.section-sub { margin-top: var(--space-3); font-size: 18px; color: var(--color-text-secondary); }
.section-lede { margin-top: var(--space-4); font-size: 17.5px; line-height: 1.6; color: var(--color-text-secondary); }

/* Words on one side, a screen on the other. */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-8); align-items: start;
}
.ticks { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.ticks li { display: flex; gap: var(--space-3); font-size: 15.5px; line-height: 1.55; color: var(--color-text-secondary); }
.ticks li b { color: var(--color-text-primary); font-weight: 650; }
.ticks .ic {
  width: 22px; height: 22px; padding: 3px; margin-top: 1px; border-radius: 50%;
  color: var(--color-icon); background: var(--color-icon-tile); border: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------- MTD */
.shot-trio {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: auto auto; gap: var(--space-5);
}
.shot-trio > :first-child { grid-row: span 2; }
.shot-trio .shot-caption { margin-top: var(--space-2); }
/* What each of the three is (Dean, 19 Sep 2026): Income Tax, VAT, CIS. */
.trio-label {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 var(--space-3);
  font: 700 13px/1.2 var(--font-body); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-text-primary);
}
.trio-label::before {
  content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--color-brand-primary); flex: 0 0 auto;
}
.mtd-grid {
  margin-top: var(--space-7);
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-6); align-items: start;
}
.mtd-plan h3, .status-note h3 { font-size: var(--h-card); font-weight: 650; letter-spacing: -0.01em; }
.plan-list { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.plan-list li { display: flex; gap: var(--space-3); font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); }
.plan-list li b { color: var(--color-text-primary); font-weight: 650; }
.plan-list .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--color-accent); }
.status-note {
  padding: var(--space-6);
  background: var(--color-surface-inverse); color: var(--color-text-on-inverse);
  border: 1px solid var(--card-inverse-border, transparent);
  border-radius: var(--radius-panel); box-shadow: var(--shadow-card);
}
.status-note p { font-size: 15px; line-height: 1.6; color: var(--color-text-on-inverse-muted); }
.status-note p + p { margin-top: var(--space-3); }
.status-note .status-tag {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4);
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-on-inverse);
  border: 1px solid color-mix(in srgb, var(--color-accent-on-inverse) 55%, transparent);
}

/* ---------------------------------------------------------------- feature cards */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.card {
  position: relative; padding: var(--space-6);
  background: var(--surface-card, var(--color-surface)); color: var(--color-text-primary);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), var(--highlight-top);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.card:hover { transform: translateY(-2px); border-color: var(--color-border-strong); }
.card h3 { margin-top: var(--space-5); font-size: var(--h-card); font-weight: 650; letter-spacing: -0.01em; }
.card p { margin-top: var(--space-2); font-size: 15px; color: var(--color-text-secondary); }
.icon-tile {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border-radius: 12px; background: var(--color-icon-tile); color: var(--color-icon);
  border: 1px solid var(--color-border);
}

/* ---------------------------------------------- a feature tile, and its detail
   The six tiles are buttons now: each opens what it actually does. They are
   still cards, so everything above applies; this only undoes what a <button>
   brings with it and adds the affordance that says it opens. */
.feature-hint { margin-top: calc(var(--space-2) * -1); margin-bottom: var(--space-5); }
.feature-card {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding-bottom: calc(var(--space-6) + 22px);
}
.feature-card:hover { box-shadow: var(--shadow-card-hover, var(--shadow-card)), var(--highlight-top); }
.feature-more {
  position: absolute; left: var(--space-6); bottom: var(--space-5);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 650; color: var(--color-accent-ink, var(--color-text-primary));
  opacity: .82; transition: gap var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.feature-card:hover .feature-more { gap: 11px; opacity: 1; }
.feature-more .ic { width: 16px; height: 16px; }
.card-inverse .feature-more { color: var(--color-text-on-inverse); }

.feat-scrim {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: var(--space-5);
  background: var(--scrim, rgba(11, 31, 45, .52));
  opacity: 0; transition: opacity 240ms var(--ease);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
/* ANY display rule beats the `hidden` attribute, so `display: grid` above
   left this sitting over the whole page at opacity 0 with pointer events
   on — invisible, and swallowing every click on the site. Nothing was
   clickable. Put back explicitly, and tested for: see site-click. */
.feat-scrim[hidden] { display: none; }
/* Theme 05: the modal's own frosting cannot see past the scrim (a blur
   inside a blur only sees its parent), so the scrim does the frosting
   (22 Sep 2026). */
[data-theme="chrome-flow"] .feat-scrim { -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.feat-scrim.is-open { opacity: 1; }
.feat-modal {
  position: relative; width: min(1180px, 100%); max-height: 86vh; overflow-y: auto;
  padding: var(--space-7) var(--space-6) var(--space-6);
  background: var(--surface-card, var(--color-surface)); color: var(--color-text-primary);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop, 0 24px 60px rgba(11, 31, 45, .26)), var(--highlight-top);
  transform: translateY(14px) scale(.985);
  transition: transform 260ms var(--ease);
}
.feat-scrim.is-open .feat-modal { transform: none; }
/* The feature dialogs are for reading. In the two glass themes their surface was the page's own frosted
   glass - as little as a quarter white in Chrome Flow - and the page showed through behind the words
   (Dean, 5 Oct 2026, on Click it and Explain this). Near solid now, with a hint of the frosting left. */
[data-theme="chrome-flow"] .feat-modal { background: linear-gradient(160deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .88) 100%); }
[data-theme="liquid-metal"] .feat-modal { background: linear-gradient(160deg, rgba(18, 30, 37, .96) 0%, rgba(10, 19, 25, .92) 100%); }
.feat-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--color-text-secondary);
  border: 1px solid var(--color-border); border-radius: 10px;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.feat-close:hover { background: var(--color-surface-sunken, rgba(0, 0, 0, .05)); color: var(--color-text-primary); }
.feat-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.015em; padding-right: 40px; }
.feat-lede { margin: var(--space-3) 0 var(--space-5); font-size: 16px; color: var(--color-text-secondary); }
.feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.feat-list li { display: grid; gap: 4px; padding-left: 18px; position: relative; }
.feat-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent, currentColor); opacity: .7;
}
.feat-list b { font-size: 15.5px; font-weight: 650; }
.feat-list span { font-size: 15px; color: var(--color-text-secondary); line-height: 1.55; }
.feat-where {
  margin: var(--space-5) 0 0; padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 14px; color: var(--color-text-secondary);
}
/* ================================================================ AM I IN MTD?
   The free checker. Two questions on the left, the answer on the right,
   stacked on a narrow screen. The answer is the loudest thing in the
   section because it is the only thing anybody came for. */
.mtdchk {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-6); align-items: start; margin-top: var(--space-6);
}
.mtdchk-form { display: grid; gap: var(--space-5); min-width: 0; }
.mtdchk-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.mtdchk-field legend, .mtdchk-field legend label {
  padding: 0; font-size: 17px; font-weight: 650; color: var(--color-text-primary);
}
.mtdchk-hint { margin: 6px 0 12px; font-size: 14px; color: var(--color-text-secondary); line-height: 1.55; }
.mtdchk-kinds { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.mtdchk-tick { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.mtdchk-tick input { width: 18px; height: 18px; accent-color: var(--color-accent, currentColor); cursor: pointer; }
.mtdchk-tick span {
  font-size: 15px; font-weight: 600; padding: 9px 14px; border-radius: var(--radius-control);
  border: 1px solid var(--color-border); transition: border-color var(--duration) var(--ease);
}
.mtdchk-tick input:checked + span { border-color: var(--color-text-primary); }
.mtdchk-amount {
  display: flex; align-items: center; gap: 8px; max-width: 260px;
  border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: 0 14px;
  background: var(--color-surface);
}
.mtdchk-amount span { font-size: 19px; color: var(--color-text-secondary); }
.mtdchk-amount input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: 0;
  font: 650 24px/1 var(--font-body); color: var(--color-text-primary);
  padding: 12px 0; font-variant-numeric: tabular-nums;
}
.mtdchk-range { width: 100%; max-width: 420px; margin-top: var(--space-4); accent-color: var(--color-accent, currentColor); }
.mtdchk-out { min-width: 0; }
.mtdchk-answer {
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: var(--space-5); background: var(--color-surface);
}
.mtdchk-answer p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--color-text-secondary); }
.mtdchk-answer b { color: var(--color-text-primary); font-weight: 700; }
.mtdchk-answer.is-now { border-color: var(--color-accent, var(--color-border)); border-left-width: 4px; }
/* A YES, of either kind — already mandated, or mandated from a date to
   come. The words themselves are marked, not just the panel round them,
   because that is the part somebody has to act on. A "no" stays plain. */
/* The ink on the yellow is fixed dark, and has to WIN. `.mtdchk-answer b`
   is (0,1,1) and `.mtdchk-yes` alone is only (0,1,0), so on any dark
   theme the mark inherited the theme's white body text and came out
   white on yellow — unreadable on Moon, which is the dark one
   (Dean, 20 Sep 2026). The yellow never changes with the theme, so
   neither may the ink on it. Same specificity trap as .modal.partymodal
   in the product. */
.mtdchk-yes,
.mtdchk-answer b.mtdchk-yes,
.mtdchk-yes * {
  background: var(--sl-yellow, #FFEE00); color: var(--sl-deep-slate, #0B1F2D);
}
.mtdchk-yes {
  padding: 2px 7px; border-radius: 5px; box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mtdchk-answer.is-soon { border-left-width: 4px; }
.mtdchk-cta { margin-top: var(--space-4) !important; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: 15px !important; }
.btn-sm { height: 40px; padding: 0 var(--space-4); font-size: 14px; }
.mtdchk-table { width: 100%; border-collapse: collapse; margin-top: var(--space-5); font-size: 15px; }
.mtdchk-table th, .mtdchk-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--color-border); }
.mtdchk-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.mtdchk-table tbody th { font-weight: 600; }
.mtdchk-table td:last-child { text-align: right; font-weight: 600; }
.mtdchk-table tr.is-you td:last-child { color: var(--color-text-primary); }
.mtdchk-table tr.is-you { background: var(--color-surface-sunken, rgba(0, 0, 0, .03)); }
.mtdchk-small { margin-top: var(--space-4); font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 900px) { .mtdchk { grid-template-columns: minmax(0, 1fr); } }
/* The header link pulses once, three seconds in, for anyone who did not
   arrive at the checker directly (Dean, 20 Sep 2026). Once, not a loop:
   a header that keeps flashing is an advert, not a signpost. */
@keyframes navpulse {
  0%, 100% { color: var(--color-nav-text); font-weight: 400; }
  18%, 62%  { color: var(--sl-yellow, #FFEE00); font-weight: 700; }
}
.nav-links a.pulse { animation: navpulse 2.4s var(--ease) 1; }
@media (prefers-reduced-motion: reduce) { .nav-links a.pulse { animation: none; } }

/* What it does on the left, the product on the right (Dean, 20 Sep 2026).
   The copy column is fixed so the screens get whatever is left, and the
   screens are the wider half because that is what people came to see. */
.feat-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-6); align-items: start;
}
.feat-copy { min-width: 0; }
.feat-car { margin: 0; min-width: 0; position: sticky; top: 0; }
.feat-car[hidden] { display: none; }
/* No fixed ratio here: these screens are cards of different heights, and
   forcing them all into one shape left a band of empty frame under the
   short ones. The frame hugs each screen instead. */
.feat-car .carousel-frame { aspect-ratio: auto; }
.feat-car .shot-caption { font-size: 13px; }
body.no-scroll { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .feat-scrim, .feat-modal { transition: none; }
}
@media (max-width: 980px) {
  /* Stacked, copy first: on a narrow screen the words are what carry it. */
  .feat-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .feat-car { position: static; }
}
@media (max-width: 720px) {
  .feat-modal { padding: var(--space-6) var(--space-5) var(--space-5); max-height: 92vh; }
  .feat-title { font-size: 21px; }
}
/* ================================================================ CLICK IT
   Dean, 22 Sep 2026: "Click it. Every number explains itself." is one of
   the site's central propositions. Its dialog's copy is a carousel of
   two (the question and its answer with a real example, then what the
   feature does); both slides share one grid cell so the dialog never
   changes height as they swap. */
.feat-kicker {
  margin: 0 0 var(--space-2); padding-right: 40px;
  font-size: 12.5px; font-weight: 700; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--color-accent);
}
.feat-title-big { font-size: clamp(34px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -0.025em; }
.feat-lede-first { margin-bottom: var(--space-3); }
.feat-beat { margin: 0 0 var(--space-3); font-size: 17px; font-weight: 700; color: var(--color-text-primary); }
.narr-slides { display: grid; }
.narr-slide {
  grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden;
  transition: opacity 360ms var(--ease), visibility 0s linear 360ms;
}
.narr-slide.is-on { opacity: 1; visibility: visible; transition: opacity 360ms var(--ease), visibility 0s; }
.narr-nav { display: flex; margin: -6px 0 var(--space-3) -6px; }
.narr-nav.car-controls { margin-left: -6px; }
/* The example: a figure, what it opens onto, and the same figure again. */
.clickflow { margin-top: var(--space-4); display: grid; gap: 6px; }
.cf-box {
  border: 1px solid var(--color-border); border-radius: var(--radius-control);
  padding: 10px 14px; background: var(--color-surface-sunken, rgba(0, 0, 0, .03));
}
.cf-start, .cf-end { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.cf-end { border: 2px solid var(--color-accent); }
.cf-lbl { font-size: 13.5px; color: var(--color-text-secondary); }
.cf-amt { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--color-text-primary); white-space: nowrap; }
.cf-list .cf-lbl { display: block; margin: 0 0 6px; font-weight: 650; color: var(--color-text-primary); }
.cf-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cf-list li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13.5px; color: var(--color-text-secondary); }
.cf-num { font-variant-numeric: tabular-nums; color: var(--color-text-primary); white-space: nowrap; }
.cf-more span { font-style: italic; }
.cf-step {
  margin: 0; display: flex; align-items: center; gap: 6px; padding-left: 12px;
  font-size: 13px; font-weight: 700; color: var(--color-text-primary);
}
.cf-step .ic { width: 16px; height: 16px; color: var(--color-accent); }
.cf-src { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); }
/* Explain this (3 Oct 2026): the product's own sentence, as it reads. */
.cf-say { border-left: 3px solid var(--color-accent); }
.cf-say p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--color-text-primary); }

/* Click it, first in the grid and its full width (Dean, 22 Sep 2026): the
   words on the left, the real example on the right. Inside a card, `.card p`
   would restyle the example's lines, so they are set again here. */
/* Dean, 30 Sep 2026: the example is off the tile (it opens in the overlay),
   so the words have the tile to themselves. */
.feature-wide {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4); align-items: center;
}
.feature-wide .fw-copy { display: block; }
.feature-wide .fw-kicker {
  display: block; margin-top: var(--space-5); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-accent-ink, var(--color-text-secondary));
}
.feature-wide h3 { margin-top: var(--space-2); font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -0.02em; line-height: 1.2; }
.feature-wide .fw-copy p { font-size: 16px; max-width: 48ch; }
.feature-wide .fw-example { display: block; }
.feature-wide .fw-example[hidden] { display: none; }
.fw-example .clickflow { margin-top: 0; }
.fw-example p.cf-step { margin: 0; font-size: 13px; }
.fw-example p.cf-lbl { margin: 0 0 6px; font-size: 13.5px; }
.fw-example p.cf-src { margin: 4px 0 0; font-size: 12.5px; }
@media (max-width: 900px) { .feature-wide { grid-template-columns: 1fr; gap: var(--space-4); } }
/* The footer's line, in place of "Higher ground for business." */
.foot-tagline { max-width: 36ch; font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); }
.foot-tagline b { color: var(--color-text-primary); font-weight: 700; }
/* For accountants: a button in the header beside Log in; in the folded
   Menu instead once the header has no room for it. */
.nav-acc { white-space: nowrap; }
.nav-acc[aria-current="page"] { color: var(--color-nav-active); }
.nav-acc-menu { display: none; }
@media (max-width: 1023px) {
  .nav-acc { display: none; }
  .nav-links .nav-acc-menu { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .narr-slide, .narr-slide.is-on { transition: none; }
}

/* The contrast card: navy on the yellow, deep slate on the metal and the
   cream, raised navy on the dark theme. The same card, the theme decides. */
.card-inverse {
  background: var(--color-surface-inverse); color: var(--color-text-on-inverse);
  border-color: var(--card-inverse-border, transparent);
}
.card-inverse p { color: var(--color-text-on-inverse-muted); }
.card-inverse .icon-tile {
  background: rgba(255, 255, 255, .06); color: var(--color-accent-on-inverse); border-color: rgba(255, 255, 255, .12);
}

/* ---------------------------------------------------------------- contractors showcase
   Tabs on the left, one screen at a time on the right. Without JavaScript
   the panels are simply all shown. */
.showcase {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-6); align-items: start;
}
.showcase-tabs { display: grid; gap: var(--space-2); }
.showcase-tabs [role="tab"] {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-card, var(--color-surface)); color: var(--color-text-primary);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--highlight-top);
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.showcase-tabs [role="tab"] b { font-size: 16px; font-weight: 650; }
.showcase-tabs [role="tab"] span { font-size: 13.5px; color: var(--color-text-muted); }
.showcase-tabs [role="tab"]:hover { border-color: var(--color-border-strong); }
.showcase-tabs [role="tab"][aria-selected="true"] {
  background: var(--color-surface-inverse); color: var(--color-text-on-inverse);
  border-color: var(--card-inverse-border, var(--color-surface-inverse));
  box-shadow: var(--shadow-card);
}
.showcase-tabs [role="tab"][aria-selected="true"] span { color: var(--color-text-on-inverse-muted); }
.showcase-tabs .car-pause { justify-self: start; margin: var(--space-1) 0 0 var(--space-2); }
.showcase-panel > p { max-width: 62ch; margin-bottom: var(--space-4); font-size: 15.5px; line-height: 1.6; color: var(--color-text-secondary); }
.showcase-panel + .showcase-panel { margin-top: var(--space-7); }
.js .showcase-panel + .showcase-panel { margin-top: 0; }
.js .showcase-panel[hidden] { display: none; }
/* A panel coming into view fades and rises into place rather than
   appearing all at once. */
.js .showcase-panel:not([hidden]) { animation: panel-in 560ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.stack { display: grid; gap: var(--space-3); }
.stack-row-layout { margin-top: var(--space-7); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack-row {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  background: var(--surface-card, var(--color-surface)); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), var(--highlight-top);
  font-size: 15px; font-weight: 600; line-height: 1.25;
}
.stack-row .ic-lg { color: var(--color-accent); }

/* ---------------------------------------------------------------- brand panel */
.panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center;
  gap: var(--space-5); padding: var(--space-7);
  background: var(--color-panel-bg, var(--color-surface)); color: var(--color-panel-text, var(--color-text-primary));
  border: 1px solid var(--color-border); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card), var(--highlight-top);
}
.panel h2 { font-size: var(--h-section); }
.panel-message { margin-top: var(--space-4); font-size: 18px; font-weight: 500; line-height: 1.35; color: var(--color-panel-muted, var(--color-text-secondary)); }
.panel .btn { margin-top: var(--space-6); }
.panel-art .mountain { width: 100%; }

/* The closing panel (Dean, 21 Sep 2026): the price in the brand serif and
   colour, as in the hero; bridging only under it; the two buttons; and
   the panel taller, so the Stoneledger lettering fits under the mountain. */
.panel-close { padding-top: var(--space-8); padding-bottom: var(--space-8); }
/* A small line under a closing panel's buttons (5 Oct 2026: 'software, not advice' on For accountants). */
.panel-fine { margin-top: var(--space-4); font-size: 14px; line-height: 1.5; color: var(--color-panel-muted, var(--color-text-secondary)); }
.panel h2.panel-price {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--h-section); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--color-brand-primary); font-variant-numeric: lining-nums;
}
.panel-close .panel-message { margin-top: var(--space-3); }
.panel-bridge-q { margin-top: var(--space-6); font-size: 18px; font-weight: 700; line-height: 1.3; }
.panel-bridge { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-2); font-size: 16px; color: var(--color-panel-muted, var(--color-text-secondary)); }
.panel-bridge b {
  font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1;
  color: var(--color-brand-primary); font-variant-numeric: lining-nums;
}
.panel-bridge-note { margin-top: var(--space-2); font-size: 16px; font-weight: 600; }
.panel-close .cta-row { margin-top: var(--space-6); }
.panel-close .btn { margin-top: 0; }
.panel-close .panel-art { display: flex; flex-direction: column; align-items: center; }
/* The logo left of the lettering, the pair centred under the mountain
   (Dean, 30 Sep 2026). The logo stands as tall as the lettering. */
.panel-brand {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  width: min(420px, 84%); margin-top: var(--space-5);
}
.panel-logo { flex: none; width: 68px; height: auto; filter: drop-shadow(0 1px 2px rgba(11, 31, 45, .18)); }
.wordmark-panel { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------- get started */
.closing {
  max-width: 820px; margin: 0 auto; text-align: center;
  padding: var(--space-8) var(--space-7);
  background: var(--color-surface-inverse); color: var(--color-text-on-inverse);
  border: 1px solid var(--card-inverse-border, transparent);
  border-radius: var(--radius-panel); box-shadow: var(--shadow-raised);
}
.closing .eyebrow { color: var(--color-accent-on-inverse); margin-bottom: var(--space-3); }
.closing h2 { color: var(--color-text-on-inverse); }
.closing p { margin: var(--space-4) auto 0; max-width: 56ch; font-size: 17px; line-height: 1.6; color: var(--color-text-on-inverse-muted); }
.closing .btn-primary {
  background: var(--color-closing-button-bg, var(--sl-yellow));
  color: var(--color-closing-button-text, var(--sl-deep-slate));
  border-color: var(--color-closing-button-border, transparent);
}
.closing .btn-primary:hover { filter: brightness(1.04); }
/* Log in on this dark box: the same thin cyan glass, lettered in the box's
   own text colour so it reads on the dark (30 Sep 2026). */
.closing .btn-login {
  color: var(--color-text-on-inverse);
  background: linear-gradient(180deg, rgba(110, 228, 255, .22) 0%, rgba(34, 176, 224, .12) 100%);
  border-color: rgba(120, 230, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20);
}
.closing .btn-login:hover {
  color: var(--color-text-on-inverse);
  background: linear-gradient(180deg, rgba(110, 228, 255, .32) 0%, rgba(34, 176, 224, .20) 100%);
}

/* ================================================================ FOOTER */
.foot { padding: var(--space-8) 0 var(--space-7); border-top: 1px solid var(--color-border); }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: var(--space-6);
}
.foot-brand .nav-brand { margin-bottom: var(--space-4); }
.foot-col h2 {
  margin-bottom: var(--space-4); font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--color-text-primary);
}
.foot-links { display: grid; gap: var(--space-2); }
.foot-links a { font-size: 14px; color: var(--color-text-secondary); text-decoration: none; }
.foot-links a:hover { color: var(--color-text-primary); text-decoration: underline; }
.contact-list { display: grid; gap: var(--space-3); }
.contact-list li { display: flex; gap: var(--space-3); font-size: 14px; color: var(--color-text-secondary); }
.contact-list li > span { display: grid; gap: 2px; }
.contact-list .ic { margin-top: 3px; color: var(--color-accent); }
.foot-legal {
  margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border);
  display: grid; gap: var(--space-3); font-size: 13px; line-height: 1.6; color: var(--color-text-muted);
}
.foot-copy { color: var(--color-text-secondary); }

/* ================================================================ REGISTER INTEREST */
.dialog {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-panel);
  background: var(--color-dialog-bg, var(--color-surface-raised)); color: var(--color-text-primary);
  box-shadow: var(--shadow-raised);
}
.dialog::backdrop { background: rgba(6, 16, 24, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.interest-form, .interest-done { padding: var(--space-5) var(--space-6); }
.dialog-head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.dialog-head .eyebrow { margin-bottom: var(--space-2); }
.dialog h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; }
.dialog-sub { margin-top: var(--space-2); font-size: 15px; color: var(--color-text-secondary); }
.dialog-close {
  margin-left: auto; width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-control); background: transparent; cursor: pointer;
}
.dialog-close:hover { border-color: var(--color-border-strong); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.form-field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.form-wide { grid-column: 1 / -1; }
.form-field label, .form-field legend { font-size: 13px; font-weight: 600; color: var(--color-text-primary); padding: 0; }
.form-field .opt { font-weight: 400; color: var(--color-text-muted); }
.form-field input:not([type="radio"]):not([type="checkbox"]), .form-field select, .form-field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  font: 15px/1.4 var(--font-body); color: var(--color-field-text, var(--color-text-primary));
  background: var(--color-field-bg, #fff); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control);
}
.form-field textarea { resize: vertical; }
.form-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.form-field [aria-invalid="true"] { border-color: var(--color-error); box-shadow: 0 0 0 1px var(--color-error); }
.choice-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 6px; }
.choice-row label {
  display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer;
  padding: 8px 12px; font-weight: 500; font-size: 14px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-field-bg, #fff); color: var(--color-field-text, var(--color-text-primary));
}
.choice-row label:has(input:checked) { border-color: var(--color-focus); box-shadow: inset 0 0 0 1px var(--color-focus); }
.choice-row input, .check input { accent-color: var(--color-button-primary-bg); width: 16px; height: 16px; margin: 0; }
.check { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 500 !important; line-height: 1.5; cursor: pointer; }
.check input { margin-top: 3px; flex: 0 0 auto; }
.form-note { font-size: 13px; color: var(--color-text-muted); }
.form-note a { color: var(--color-link); font-weight: 600; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error {
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control);
  font-size: 14px; color: var(--color-error); border: 1px solid var(--color-error);
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
}
.dialog-foot { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-4); }
.interest-done p:not(.eyebrow) { margin-top: var(--space-3); font-size: 16px; color: var(--color-text-secondary); }
.interest-done .eyebrow { margin-bottom: var(--space-2); }
/* Log in, before launch (Dean, 5 Oct 2026): the short note Log in opens on
   the public site - narrower than the forms, the same dialog otherwise. */
.dialog-note { width: min(540px, calc(100vw - 32px)); }
.note-body { padding: var(--space-5) var(--space-6); }

/* ================================================================ EMBED IN YOUR WEBSITE
   Dean, 3 Oct 2026: a small button by each checker, for practices, and the box
   it opens - the price first, then the few details, then on to paying. */
.embed-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: var(--space-2) var(--space-3); margin-top: var(--space-4);
}
.embed-row-start { justify-content: flex-start; }
.embed-for { font-size: 13px; color: var(--color-text-muted); }
.embed-btn { gap: var(--space-2); }
.embed-btn:hover .ic { transform: none; }
.embed-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-4);
  margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-control);
}
.embed-price-main { font-size: 18px; color: var(--color-text-primary); }
.embed-price-main b { font-size: 22px; font-weight: 700; }
.embed-price-sub { font-size: 14px; color: var(--color-text-secondary); }
.interest-done [data-embed-pay] h2, .interest-done [data-embed-wait] h2 { margin-top: 0; }
.interest-done [data-embed-pay] a { color: var(--color-link); font-weight: 600; }

/* ================================================================ THEME TIP
   A bubble that pops up just under the header's own theme selector and
   points up at it (Dean, 19 Sep 2026: the selector never leaves its
   place). site.js sets its position and where the arrow sits, from the
   selector itself. The selector glows gently while the bubble is open.
   Tokens only, so it wears whichever theme is on. */
.theme-tip {
  position: fixed; top: 80px; left: 16px; z-index: 30;
  width: min(300px, calc(100vw - 32px));
  padding: 12px 38px 12px 14px; border-radius: 14px;
  color: var(--color-text-on-inverse); background: var(--color-surface-inverse);
  border: 1px solid var(--card-inverse-border, transparent);
  box-shadow: var(--shadow-raised);
  opacity: 0; transform: translateY(10px) scale(.94); transform-origin: var(--arrow-x, 50%) top;
  transition: opacity 260ms var(--ease), transform 420ms cubic-bezier(.2, .9, .25, 1.25);
}
.theme-tip[hidden] { display: none; }
.theme-tip.in { opacity: 1; transform: none; }
/* The arrow, pointing straight up at the selector. */
.theme-tip::before {
  content: ""; position: absolute; top: -7px; left: calc(var(--arrow-x, 50%) - 7px);
  width: 14px; height: 14px; background: inherit;
  border-left: inherit; border-top: inherit; border-top-left-radius: 3px; transform: rotate(45deg);
}
.theme-tip-msg { font-size: 14px; line-height: 1.45; }
.theme-tip-msg b { display: block; color: var(--color-accent-on-inverse); font-weight: 700; }
.theme-tip-close {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--color-text-on-inverse-muted, var(--color-text-on-inverse));
}
.theme-tip-close:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.theme-tip-close .ic { width: 14px; height: 14px; }
/* The real selector, drawing the eye while the tip is open. */
.theme-switch.tip-glow { animation: tip-glow 1.8s var(--ease) infinite; }
@keyframes tip-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 0%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 35%, transparent); }
}
/* ---------------------------------------------------------------- price nudge
   The floating box that points at "How it can cost this little". Fixed to
   the bottom corner, so it goes with the visitor as they scroll. `hidden`
   must win outright: a closed overlay with any display rule sat invisibly
   over the whole page once before (20 Sep 2026). */
.price-nudge {
  position: fixed; right: 24px; bottom: 24px; z-index: 30;
  width: min(300px, calc(100vw - 32px));
  padding: 14px 40px 14px 16px; border-radius: 14px;
  color: var(--color-text-on-inverse); background: var(--color-surface-inverse);
  border: 1px solid var(--card-inverse-border, transparent);
  box-shadow: var(--shadow-raised);
  opacity: 0; transform: translateY(14px) scale(.96); transform-origin: right bottom;
  transition: opacity 260ms var(--ease), transform 420ms cubic-bezier(.2, .9, .25, 1.25);
}
.price-nudge[hidden] { display: none; }
.price-nudge.in { opacity: 1; transform: none; }
.price-nudge-q { font-size: 15px; font-weight: 700; line-height: 1.35; }
.price-nudge-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 14px; font-weight: 600; color: var(--color-accent-on-inverse);
  text-decoration: underline; text-underline-offset: 3px;
}
.price-nudge-go:hover { text-decoration-thickness: 2px; }
.price-nudge-go .ic { width: 14px; height: 14px; }
.price-nudge-close {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--color-text-on-inverse-muted, var(--color-text-on-inverse));
}
.price-nudge-close:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.price-nudge-close .ic { width: 14px; height: 14px; }
/* Where the hero's saving takes them: the two price cards just under the
   sticky header, so the comparison follows straight below. The html's
   84px scroll-padding already clears the header; this is the air. */
#prices { scroll-margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .price-nudge { transition: none; }
  .theme-tip { transition: none; }
  .theme-switch.tip-glow { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 45%, transparent); }
}

/* ================================================================ BRIDGING
   "Already do your accounts elsewhere?" -- joined to the Making Tax
   Digital section above it by a short line, standing out from it with the
   display face and the accent. */
.bridge-band {
  position: relative; margin-top: var(--space-7);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-6); align-items: start;
  padding: var(--space-6); border-radius: var(--radius-panel);
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent); box-shadow: var(--shadow-card);
}
/* The connector: what Stoneledger will do, and then this. */
.bridge-band::before {
  content: ""; position: absolute; top: calc(-1 * var(--space-7)); left: var(--space-7);
  width: 3px; height: var(--space-7); background: linear-gradient(transparent, var(--color-accent));
}
.bridge-kicker {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--color-accent);
}
.bridge-title { margin-top: var(--space-3); font-size: var(--h-card); font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; color: var(--color-text-primary); }
.bridge-copy > p:not(.bridge-kicker) { margin-top: var(--space-3); font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); }
.bridge-copy b { color: var(--color-text-primary); font-weight: 650; }
.bridge-steps { margin-top: var(--space-4); padding: 0; list-style: none; display: grid; gap: var(--space-3); counter-reset: bstep; }
.bridge-steps li {
  position: relative; padding-left: 40px; font-size: 15px; line-height: 1.55; color: var(--color-text-secondary);
  counter-increment: bstep;
}
.bridge-steps li::before {
  content: counter(bstep); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--color-accent-on-inverse, #fff); background: var(--color-accent);
}
/* The bridging prices: the thing this section is judged on, so they are
   the largest figures in it. Three across on a wide screen, stacked on a
   narrow one; each price keeps its unit beside it and never wraps. */
.bridge-prices {
  margin-top: var(--space-5); padding: var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-surface-sunken, var(--color-surface));
}
.bridge-prices-head {
  margin: 0 0 var(--space-3) !important;
  font-size: 11px !important; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted) !important;
}
.price-row { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.price-row > li { display: grid; gap: 2px; align-content: start; }
.price-row > li + li { border-left: 1px solid var(--color-border); padding-left: var(--space-4); }
.price-what { font-size: 13px; font-weight: 650; color: var(--color-text-primary); }
.price-big {
  font-family: var(--font-display); font-weight: 700; font-variant-numeric: lining-nums;
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--color-brand-primary);
}
.price-big small { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--color-text-secondary); }
.price-alt { font-size: 12.5px; line-height: 1.45; color: var(--color-text-muted); }
.price-foot { margin: var(--space-3) 0 0 !important; font-size: 13px !important; color: var(--color-text-secondary) !important; }
.bridge-note { font-size: 13.5px !important; color: var(--color-text-muted) !important; }
.car-bridge { --frame-ratio: 1400 / 1640; }
.bridge-carousel .shot-caption { margin-top: var(--space-2); }

/* ================================================================ PRICING
   Dean, 21 Sep 2026: the price up front, how it compares with Xero,
   QuickBooks and Sage, why it can be this low, and the bridging-only
   prices made to stand out. Tokens only, so it wears every theme. */
.price-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); max-width: 820px; }
.price-card {
  padding: var(--space-5); border-radius: var(--radius-card);
  background: var(--surface-card, var(--color-surface)); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card), var(--highlight-top);
}
.price-card-best { border: 2px solid var(--color-accent); }
.price-card-label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-text-muted);
}
/* The primary button's own pair, which every theme already makes readable
   -- the accent pair was yellow on yellow in the dark themes. */
.price-flag {
  padding: 3px 8px; border-radius: var(--radius-pill); letter-spacing: .04em;
  background: var(--color-button-primary-bg); color: var(--color-button-primary-text);
}
.price-card-big {
  margin-top: var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-variant-numeric: lining-nums;
  font-size: clamp(48px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.02em;
  color: var(--color-brand-primary);
}
.price-card-big small { font-family: var(--font-body); font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--color-text-secondary); }
.price-card-sub { margin-top: var(--space-2); font-size: 14.5px; color: var(--color-text-secondary); }

.compare { margin-top: var(--space-7); }
.compare-title { font-size: var(--h-card); font-weight: 650; letter-spacing: -0.01em; }
.compare-scroll { margin-top: var(--space-4); overflow-x: auto; }
.compare-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.compare-table th, .compare-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.compare-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 600; }
.compare-table thead th:nth-child(n+3) { text-align: right; }
.compare-table tbody th { font-weight: 650; white-space: nowrap; }
.compare-table td { color: var(--color-text-secondary); }
.compare-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-text-primary); }
.compare-table .num small { display: block; font-size: 12px; font-weight: 500; color: var(--color-text-muted); }
.compare-table tr.is-us { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.compare-table tr.is-us th, .compare-table tr.is-us td { color: var(--color-text-primary); }
.compare-table tr.is-us th { box-shadow: inset 3px 0 0 var(--color-accent); }
.compare-table tr.is-us .num { font-size: 18px; color: var(--color-brand-primary); }
.compare-saving { margin-top: var(--space-4); font-size: 17px; line-height: 1.5; color: var(--color-text-secondary); }
.compare-saving b { color: var(--color-text-primary); }
.compare-note { margin-top: var(--space-3); font-size: 13px; line-height: 1.55; color: var(--color-text-muted); max-width: 90ch; }
/* The two facts Dean wants seen (21 Sep 2026): where their prices go after
   the offer, and what costs extra. The ink is fixed to the highlight, as
   with .mtdchk-yes, so a dark theme's light text never lands on yellow. */
.compare-note b { color: var(--color-text-primary); font-weight: 700; }
.compare-note mark {
  background: var(--color-highlight-bg); color: var(--color-highlight-text);
  padding: 1px 4px; border-radius: 4px; font-weight: 600;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.price-why { margin-top: var(--space-7); max-width: 820px; }
.price-why h3 { font-size: var(--h-card); font-weight: 650; letter-spacing: -0.01em; }
.price-why p { margin-top: var(--space-3); font-size: 16px; line-height: 1.65; color: var(--color-text-secondary); }

/* The bridging-only prices: set apart in their own band with the accent
   across the top, so nobody who only needs to submit misses them. */
.price-bridge {
  margin-top: var(--space-7); padding: var(--space-6);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-6); align-items: center;
  border-radius: var(--radius-panel); background: var(--color-surface-raised);
  border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); box-shadow: var(--shadow-card);
}
.price-bridge-copy > p:not(.bridge-kicker) { margin-top: var(--space-3); font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); }
.price-bridge .price-what { font-size: 13px; }
.price-cta { margin-top: var(--space-7); }

/* Book a demo: the one filled button in the header. */
.nav-demo { height: 40px; }
.nav-demo .ic { width: 16px; height: 16px; }
.nav-demo:hover .ic { transform: none; }

/* Log in: the far right of the header, after For accountants and Book a
   demo, and the only glass button in it -- a see-through cyan, boxed, in
   every theme, and no glow (Dean, 27 Sep 2026). The colours are tokens
   because a thin cyan reads as cyan on a white header, lime on the yellow
   one and grey on the dark one. Dean, 30 Sep 2026: the same glass wherever
   Log in appears - the hero and Get started carry .btn-login at their own
   button size. */
.nav-login, .btn-login {
  color: var(--color-login-text);
  background: var(--color-login-bg);
  border-color: var(--color-login-border);
  box-shadow: var(--color-login-shine);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
          backdrop-filter: blur(10px) saturate(1.6);
}
.nav-login { height: 40px; padding: 0 14px; font-size: 14px; }
.nav-login:hover, .btn-login:hover { background: var(--color-login-bg-hover); color: var(--color-login-text); }
.nav-login:active, .btn-login:active { transform: translateY(1px); }

/* ================================================================ ENLARGE */
.js .shot-img, .js .shot-card { cursor: zoom-in; }
.js .shot-img:focus-visible, .js .shot-card:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.lightbox {
  width: min(1480px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-panel);
  background: var(--mock-bg); color: var(--mock-text); box-shadow: var(--shadow-raised);
}
.lightbox::backdrop { background: rgba(6, 16, 24, .78); }
.lightbox-bar {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); background: var(--mock-sidebar); border-bottom: 1px solid var(--mock-border);
}
.lightbox-caption { font-size: 14px; font-weight: 600; color: var(--mock-sidebar-text, var(--mock-muted)); }
.lightbox .dialog-close { color: var(--mock-text); border-color: var(--mock-border); }
.lightbox-body img { width: 100%; height: auto; }

/* ================================================================ NARROWER SCREENS
   Enough to keep things usable. The designed mobile pass comes last. */
/* The section links fold into the Menu button. At 1200px until 21 Sep
   2026; Pricing and Book a demo need the room, so from 1359px down now.
   The theme switch, Log in and Book a demo stay in the header. */
/* From 1409px down since 22 Sep 2026, when For accountants joined the
   header (1359px before). Measured: 1,410px fits with 10px to spare. */
@media (max-width: 1409px) {
  .nav-menu { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; right: var(--gutter); z-index: 30;
    flex-direction: column; gap: 0; min-width: 260px; padding: var(--space-2);
    background: var(--color-dialog-bg, var(--color-surface-raised));
    border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-raised);
  }
  .nav.menu-open .nav-links { display: flex; }
  .nav-links a { padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-control); color: var(--color-text-primary); }
  .nav-links a:hover { background: color-mix(in srgb, var(--color-text-primary) 6%, transparent); border: 0; }
  /* In the menu there is room for the full name again. */
  .nav-links .nav-long { display: inline; }
  .nav-links .nav-short { display: none; }
  /* More in the folded menu: a row like the others, opening in place. */
  .nav-more { flex-direction: column; align-items: stretch; }
  .nav-more-btn {
    justify-content: space-between; width: 100%; font-size: 13.5px;
    padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-control); color: var(--color-text-primary);
  }
  .nav-more-btn:hover, .nav-more.open .nav-more-btn { background: color-mix(in srgb, var(--color-text-primary) 6%, transparent); border: 0; color: var(--color-text-primary); }
  .nav-more-list {
    position: static; transform: none; min-width: 0; padding: 0 0 0 var(--space-4);
    background: transparent; border: 0; box-shadow: none;
  }
}
@media (max-width: 1200px) {
  .shot-hero { margin-left: 0; }
  .plan-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  /* Four tiles across a narrow column squeezed their words onto three
     lines; two by two they read as they should. */
  .hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { min-height: 92px; }
}
@media (max-width: 900px) {
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; }
  .hero-left, .hero-right { display: contents; }
  .hero-copy { order: 1; }
  .hero-art { order: 2; }
  .shot-hero { order: 3; margin: calc(var(--space-6) * -1) 0 0; }
  .hero-price { order: 4; }
  .hero-price-note { order: 5; }
  .hero-price-note.hero-trial-note { order: 6; }
  .hero-tiles { order: 7; }
  .hero-art .mountain { width: 110%; margin-left: -5%; }
  .peaks { display: none; }
  .split, .mtd-grid, .showcase, .bridge-band { grid-template-columns: minmax(0, 1fr); }
  .price-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .price-bridge { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); }
  .price-row > li + li { border-left: 0; border-top: 1px solid var(--color-border); padding-left: 0; padding-top: var(--space-3); }
  .split { gap: var(--space-6); }
  .shot-trio { grid-template-columns: minmax(0, 1fr); }
  .shot-trio > :first-child { grid-row: auto; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack-row-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tablets and small screens, 800px down. With Log in in cyan glass (27 Sep
   2026) the header came to about 790px, and on a 660-760px tablet the Menu
   button sat past the right edge - out of reach, and the whole page widened
   to fit it. From here down Book a demo and Menu show their icons alone, as
   they already did on phones. tools/site-fits.mjs now measures against the
   screen, so it catches a control pushed off a phone's edge. */
@media (max-width: 800px) {
  .nav-demo { padding: 0 var(--space-3); }
  .nav-demo span { display: none; }
  .nav-menu span { display: none; }
}
@media (max-width: 700px) {
  /* No room for notes over a phone-sized screenshot (mobile pass later). */
  .callouts { display: none; }
}
/* The legal pages' own header: brand, the theme switch and the way back.
   "Back to the website" is four words too many on a phone, and it pushed
   the header 100px wider than a 320px screen (22 Sep 2026). */
.nav-back .back-short { display: none; }
@media (max-width: 620px) {
  .nav-back .back-long { display: none; }
  .nav-back .back-short { display: inline; }
}
@media (max-width: 620px) {
  .nav-inner { height: 60px; gap: var(--space-2); }
  .nav-brand { gap: var(--space-2); }
  .nav-brand .wordmark { width: 104px; }
  .nav-logo-tile { width: 28px; }
  .nav-actions { gap: 0; }
  .nav-login, .nav-menu { padding: 0 var(--space-2); }
  .nav-menu span { display: none; }
  /* The demo button stays, as its calendar alone. */
  .nav-demo { padding: 0 var(--space-3); }
  .nav-demo span { display: none; }
  .price-cards { grid-template-columns: minmax(0, 1fr); }
  .theme-switch { grid-auto-columns: 30px; }
  .theme-switch .thumb { width: 30px; }
  .theme-switch[data-pos="1"] .thumb { transform: translateX(30px); }
  .theme-switch[data-pos="2"] .thumb { transform: translateX(60px); }
  .theme-switch[data-pos="3"] .thumb { transform: translateX(90px); }
  .theme-switch[data-pos="4"] .thumb { transform: translateX(120px); }
  .theme-switch svg { width: 16px; height: 16px; }
  .hero { padding-top: var(--space-5); }
  .lede { font-size: 16px; }
  .hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid, .stack-row-layout, .foot-grid, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .section {
    padding: min(var(--section-pad), var(--space-8)) 0;
    scroll-margin-top: calc(var(--section-land, 16px) - min(var(--section-pad), var(--space-8)));
  }
  .section-tight { padding-top: var(--section-tight-top, 0); }
  .panel { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); }
  .closing { padding: var(--space-7) var(--space-5); }
  .interest-form, .interest-done { padding: var(--space-5); }
}
/* Phones. The header ran off the right edge at 390px even before Book a
   demo arrived (21 Sep 2026); with it the Menu button was pushed out of
   reach. Under 480px the header's Log in goes -- the hero's Log in is the
   first button under it -- and under 375px the wordmark and the theme
   switch tighten, so everything fits down to 360px. */
@media (max-width: 480px) {
  .nav-login { display: none; }
  .nav-brand .wordmark { width: 88px; }
  .theme-switch { grid-auto-columns: 26px; }
  .theme-switch .thumb { width: 26px; }
  .theme-switch[data-pos="1"] .thumb { transform: translateX(26px); }
  .theme-switch[data-pos="2"] .thumb { transform: translateX(52px); }
  .theme-switch[data-pos="3"] .thumb { transform: translateX(78px); }
  .theme-switch[data-pos="4"] .thumb { transform: translateX(104px); }
  .theme-switch svg { width: 15px; height: 15px; }
}
/* The smallest phones, under 360px. The brand, the five themes, Book a
   demo and Menu come to about 370px, so the logo tile carries the name on
   its own here and the wordmark steps aside (27 Sep 2026). */
@media (max-width: 359px) {
  .nav-brand .wordmark { display: none; }
}
/* ================================================================ FOR ACCOUNTANTS
   accountants.html (Dean, 22 Sep 2026). Built from the home page's own
   pieces -- sections, slabs, ticks, showcases, the comparison table --
   plus the few below. The designed mobile pass comes last, as for the
   rest of the site; this keeps it usable on a phone meanwhile. */
.acc-hero { padding-bottom: var(--space-8); }
.acc-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-7); align-items: start;
}
.acc-title {
  margin-top: var(--space-3);
  font-size: var(--h-title); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em;
  color: var(--color-text-primary);
}
.acc-trust { margin-top: var(--space-4); max-width: 34em; font-size: 20px; line-height: 1.45; color: var(--color-text-primary); }
.acc-trust b { font-weight: 750; }
.acc-jump { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: 8px; }
.acc-jump a {
  display: inline-block; padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); font-size: 13.5px; font-weight: 600;
  color: var(--color-text-secondary); text-decoration: none;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.acc-jump a:hover { color: var(--color-text-primary); border-color: var(--color-text-primary); }
.acc-hero-example { padding: var(--space-5); }
.acc-hero-example .clickflow { margin-top: var(--space-3); }
.acc-example-head { font-size: 13px; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-accent); }
.acc-example-sub { margin-top: 6px; font-size: 14.5px; color: var(--color-text-secondary); }
.acc-points {
  margin-top: var(--space-6);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4);
}
.acc-point {
  padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--surface-card, var(--color-surface)); box-shadow: var(--shadow-card), var(--highlight-top);
}
.acc-point .ic-lg { width: 26px; height: 26px; color: var(--color-icon); }
.acc-point h3 { margin-top: var(--space-3); font-size: var(--h-card); font-weight: 650; letter-spacing: -0.01em; }
.acc-point p { margin-top: var(--space-2); font-size: 14.5px; line-height: 1.55; color: var(--color-text-secondary); }
.acc-sub { margin-top: var(--space-8); font-size: 24px; font-weight: 700; letter-spacing: -0.015em; }
.acc-sub-lede { margin-top: var(--space-2); font-size: 16px; color: var(--color-text-secondary); }
.acc-flows { margin-top: var(--space-5); display: grid; gap: var(--space-7); }
.acc-flow h4 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.acc-flow > p { margin-top: var(--space-2); max-width: 70ch; font-size: 15.5px; line-height: 1.55; color: var(--color-text-secondary); }
.acc-flow-pair {
  margin-top: var(--space-4);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-4); align-items: center;
}
.acc-flow-three { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-3); }
.acc-flow-pair figure { margin: 0; min-width: 0; }
.acc-flow-pair figcaption { margin-top: var(--space-2); font-size: 13.5px; font-weight: 600; color: var(--color-text-secondary); }
.acc-flow-pair .shot-card { -webkit-mask-image: none; mask-image: none; }
.acc-flow-arrow {
  display: grid; justify-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-text-primary);
}
.acc-flow-arrow .ic { width: 26px; height: 26px; color: var(--color-accent); }
.acc-two { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
.acc-two .ticks { margin-top: var(--space-4); }
.acc-col-head { font-size: var(--h-card); font-weight: 650; letter-spacing: -0.01em; }
#acc-cis .showcase { margin-top: var(--space-7); }
.acc-grid-shots { margin-top: var(--space-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.acc-shot { margin: 0; min-width: 0; }
.acc-shot figcaption { margin-top: var(--space-3); font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); }
.acc-shot figcaption b { color: var(--color-text-primary); }
.acc-note {
  margin-top: var(--space-5); padding: var(--space-4) var(--space-5); max-width: 80ch;
  border-left: 4px solid var(--color-accent); border-radius: var(--radius-control);
  background: var(--color-surface-sunken, rgba(0, 0, 0, .03));
  font-size: 15.5px; line-height: 1.55; color: var(--color-text-secondary);
}
.acc-note b { color: var(--color-text-primary); }
.acc-walks { margin-top: var(--space-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.acc-walk {
  padding: var(--space-5) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--surface-card, var(--color-surface)); box-shadow: var(--shadow-card), var(--highlight-top);
}
.acc-walk h3 { font-size: var(--h-card); font-weight: 650; letter-spacing: -0.01em; }
.acc-walk ol { margin: var(--space-4) 0 0; padding-left: 22px; display: grid; gap: var(--space-3); }
.acc-walk li { font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); padding-left: 4px; }
.acc-walk li::marker { font-weight: 700; color: var(--color-text-primary); }
/* A screen for each walkthrough, and the button to the page of them all
   (Dean, 3 Oct 2026). */
.acc-walk-shot { margin-top: var(--space-4); }
.acc-walk-cta { margin-top: var(--space-6); justify-content: center; }
/* Explain this (Dean, 3 Oct 2026): the product's own words beside the
   screens they come from. */
.acc-explain { margin-top: var(--space-5); display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.acc-explain-example { padding: var(--space-5); }
.acc-explain-example .clickflow { margin-top: 0; }
.acc-explain-example p.cf-step { margin: 0; font-size: 13px; }
.acc-explain-example p.cf-src { margin: 4px 0 0; font-size: 12.5px; }
.acc-explain-example .cf-say p { margin: 0; font-size: 14.5px; }
.acc-explain-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
#acc-finstats .showcase { margin-top: var(--space-7); }
@media (max-width: 1100px) { .acc-explain { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .acc-explain-shots { grid-template-columns: minmax(0, 1fr); } }
.acc-coming {
  margin-top: var(--space-6); padding: var(--space-5) var(--space-6);
  border: 1px dashed var(--color-border); border-radius: var(--radius-card);
}
.acc-coming h3 { font-size: var(--h-card); font-weight: 650; }
.acc-coming p { margin-top: var(--space-2); font-size: 15px; color: var(--color-text-secondary); }
.acc-coming ul { margin-top: var(--space-3); padding-left: 20px; list-style: disc; display: grid; gap: 6px; font-size: 15px; color: var(--color-text-secondary); }
.acc-price { margin-top: var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.acc-price .compare-scroll { margin-top: 0; }
.acc-band-table { min-width: 0; }
.acc-band-table thead th:nth-child(2) { text-align: right; }
.acc-price-notes { display: grid; gap: var(--space-3); font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); }
.acc-price-notes b { color: var(--color-text-primary); }
.acc-limits { margin-top: var(--space-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-7); }
.acc-limits li {
  padding-left: var(--space-4); border-left: 3px solid var(--color-border);
  font-size: 15.5px; line-height: 1.55; color: var(--color-text-secondary);
}
.acc-limits b { color: var(--color-text-primary); }
.acc-close h2.panel-price { font-size: var(--h-section); }
/* The practice's bill against QuickBooks, Xero and Sage (Dean, 22 Sep 2026). */
.acc-vs-lede { margin-top: var(--space-2); max-width: 80ch; font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); }
.acc-vs-table { min-width: 780px; }
.acc-vs-table thead th:nth-child(n+2) { text-align: right; }
.acc-vs-table thead th small, .acc-vs-table tbody th small {
  display: block; margin-top: 2px; font-size: 12px; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--color-text-muted);
}
.acc-vs-table .is-us-col { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.acc-vs-table td.is-us-col { color: var(--color-brand-primary); font-size: 17px; }
.acc-vs-notes { margin-top: var(--space-4); display: grid; gap: var(--space-3); max-width: 92ch; font-size: 14.5px; line-height: 1.6; color: var(--color-text-secondary); }
.acc-vs-notes b { color: var(--color-text-primary); }
.acc-vs-small { font-size: 13px; color: var(--color-text-muted); }

/* ---- On this page, down the right-hand side (Dean, 22 Sep 2026) ----
   Appears once the list at the top of the page has scrolled away, floats
   by the scroll bar, and a highlight slides to the section being read.
   The page keeps exactly enough room on the right for it, and none on a
   screen wide enough to have the room already: the content column is
   1,240px, so the room needed is 1,644px less the window, capped at the
   rail's own 202px. */
.acc-rail { display: none; }
@media (min-width: 1025px) {
  .page-acc main, .page-acc .foot { padding-right: clamp(0px, calc(1644px - 100vw), 202px); }
  .acc-rail {
    display: block; position: fixed; right: 14px; top: 50%; z-index: 20; width: 180px;
    padding: 10px 8px 8px; border-radius: var(--radius-card);
    background: var(--color-dialog-bg, var(--color-surface-raised)); color: var(--color-text-primary);
    border: 1px solid var(--color-border); box-shadow: var(--shadow-raised);
    transform: translate(12px, -50%); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s linear 300ms;
  }
  .acc-rail.is-on {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%);
    transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  }
}
.acc-rail-head {
  margin: 0 0 6px; padding: 0 10px; font-size: 11px; font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted);
}
.acc-rail-list { position: relative; display: grid; gap: 2px; }
.acc-rail-list a {
  position: relative; z-index: 1; display: block; padding: 6px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: none;
  color: var(--color-text-secondary);
  opacity: 0; transform: translateY(-12px);
  /* The colour change runs as long as the highlight's slide (340ms), so
     light lettering never arrives before the solid block it sits on. */
  transition: opacity 300ms var(--ease), transform 360ms var(--ease), color 340ms var(--ease);
}
.acc-rail.is-on .acc-rail-list a { opacity: 1; transform: none; }
.acc-rail-list a:hover { color: var(--color-text-primary); }
.acc-rail-list a.is-active { color: var(--color-switch-icon-on); }
.acc-rail-list a.is-active:hover { color: var(--color-switch-icon-on); }
.acc-rail-list a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
/* The highlight: one block that slides from section to section.
   One solid colour, with no stripe down its left edge (Dean, 27 Sep 2026),
   and deliberately the SAME colour as the theme slider's selected position
   -- burgundy in Yellow Tech and Modern Tech light -- so "you are here"
   looks the same wherever the site shows it. The words on it take the
   slider's own on-colour, so they stay readable on every theme. */
.acc-rail-thumb {
  position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 0; border-radius: 8px;
  background: var(--color-switch-thumb);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  opacity: 0; transform: translateY(0);
  transition: transform 340ms var(--ease), height 340ms var(--ease), opacity 200ms var(--ease);
}
.acc-rail-thumb.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .acc-rail, .acc-rail-list a, .acc-rail-thumb { transition: none; }
}
@media (max-width: 1100px) {
  .acc-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-flow-three { grid-template-columns: minmax(0, 1fr); }
  .acc-flow-three .acc-flow-arrow .ic { transform: rotate(90deg); }
}
@media (max-width: 900px) {
  .acc-hero-grid, .acc-two, .acc-grid-shots, .acc-walks, .acc-price, .acc-limits { grid-template-columns: minmax(0, 1fr); }
  .acc-flow-pair { grid-template-columns: minmax(0, 1fr); }
  .acc-flow-arrow .ic { transform: rotate(90deg); }
}
@media (max-width: 620px) {
  .acc-points { grid-template-columns: minmax(0, 1fr); }
  .acc-trust { font-size: 18px; }
}

@media (max-width: 374px) {
  .nav-brand .wordmark { width: 76px; }
  .theme-switch { grid-auto-columns: 24px; }
  .theme-switch .thumb { width: 24px; }
  .theme-switch[data-pos="1"] .thumb { transform: translateX(24px); }
  .theme-switch[data-pos="2"] .thumb { transform: translateX(48px); }
  .theme-switch[data-pos="3"] .thumb { transform: translateX(72px); }
  .theme-switch[data-pos="4"] .thumb { transform: translateX(96px); }
}
/* ================================================================ WALKTHROUGHS
   walkthroughs.html (Dean, 27 Sep 2026): every view of the product and the
   tasks in it, step by step. Two boxes on the page -- the views, then the
   three ways in -- and two overlays: a view's tasks, and one walkthrough.
   Every colour is a token, so all five themes come for free. */
.walk-hero { padding-bottom: var(--space-6); }
.walk-hero-inner { max-width: var(--page-max); }
.walk-title {
  margin-top: var(--space-3); max-width: 17ch;
  font-size: var(--h-title); font-weight: 700; line-height: 1.03; letter-spacing: -0.028em;
  text-wrap: balance;
}
.walk-lede { max-width: 40em; }

/* Box one: the views. */
.walk-section { padding-top: var(--space-6); }
.walk-box {
  padding: var(--space-7);
  background: var(--surface-card, var(--color-surface)); color: var(--color-text-primary);
  border: 1px solid var(--color-border); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card), var(--highlight-top);
}
.walk-box-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.walk-box-head .eyebrow { margin-bottom: var(--space-2); }
.walk-box-head h2 { font-size: var(--h-section); font-weight: 700; letter-spacing: -0.02em; }
.walk-box-sub { max-width: 34em; font-size: 15.5px; color: var(--color-text-secondary); }
.walk-views {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-4); margin-top: var(--space-6);
}
.walk-noscript { grid-column: 1 / -1; color: var(--color-text-secondary); }
.js .walk-noscript { display: none; }

/* A view, or a task: a picture from the product over its words. The whole
   card is the button. */
.walk-view, .walk-task {
  display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; overflow: hidden;
  text-align: left; cursor: pointer;
  background: var(--surface-card, var(--color-surface)); color: var(--color-text-primary);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), var(--highlight-top);
  transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.walk-view:hover, .walk-task:hover { transform: translateY(-3px); border-color: var(--color-border-strong); box-shadow: var(--shadow-raised), var(--highlight-top); }
.walk-view:focus-visible, .walk-task:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.walk-thumb {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--mock-bg); border-bottom: 1px solid var(--color-border);
}
.walk-thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block;
  transition: transform 500ms var(--ease);
}
.walk-view:hover .walk-thumb img, .walk-task:hover .walk-thumb img { transform: scale(1.04); }
.walk-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: var(--space-4) var(--space-4) var(--space-4); }
.walk-card-body b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.walk-card-body > span:not(.walk-count) {
  font-size: 14px; line-height: 1.5; color: var(--color-text-secondary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.walk-count {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--space-2);
  font-size: 13px; font-weight: 650; color: var(--color-link);
}
.walk-count .ic { width: 14px; height: 14px; transition: transform var(--duration) var(--ease); }
.walk-view:hover .walk-count .ic, .walk-task:hover .walk-count .ic { transform: translateX(3px); }

/* Box two: the three ways in, with the mountain, the logo and the name. */
.walk-cta {
  position: relative; overflow: hidden; text-align: center;
  padding: var(--space-7) var(--space-7) var(--space-8);
  background: var(--color-panel-bg, var(--surface-card, var(--color-surface)));
  color: var(--color-panel-text, var(--color-text-primary));
  border: 1px solid var(--color-border); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card), var(--highlight-top);
}
/* A soft light behind the mountain, in the theme's own glow. */
.walk-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%);
}
.walk-cta-art { position: relative; width: min(820px, 100%); margin: 0 auto; }
.walk-cta-body { position: relative; }
.walk-cta-brand { display: inline-flex; align-items: center; gap: 16px; margin-top: var(--space-3); }
.walk-cta-logo { width: 54px; }
.walk-cta-wordmark { width: min(260px, 52vw); }
.walk-cta h2 {
  margin-top: var(--space-5); font-size: var(--h-section); font-weight: 700;
  letter-spacing: -0.022em; line-height: 1.1; text-wrap: balance;
}
.walk-cta-lede {
  margin: var(--space-3) auto 0; max-width: 44em; font-size: 17px; line-height: 1.55;
  color: var(--color-panel-muted, var(--color-text-secondary));
}
.walk-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
/* The header's cyan glass Log in, at full button size -- and kept on
   phones, where the header hides its own. */
.walk-cta .walk-login { display: inline-flex; height: 48px; padding: 0 var(--space-5); font-size: 15px; }

/* ---- the overlays ---- */
.walk-dialog {
  width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 0; overscroll-behavior: contain;
  background: var(--color-dialog-bg, var(--color-surface-raised)); color: var(--color-text-primary);
  border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-raised);
}
.walk-dialog[open] { animation: walk-rise 300ms var(--ease) both; }
@keyframes walk-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.walk-dialog::backdrop { background: rgba(6, 16, 24, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.walk-task-dialog { width: min(1180px, calc(100vw - 32px)); }
.walk-dialog-bar {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-dialog-bg, var(--color-surface-raised));
  border-bottom: 1px solid var(--color-border);
}
.walk-dialog-bar .eyebrow { margin-bottom: 4px; }
.walk-dialog-bar h2 { font-size: 26px; font-weight: 750; letter-spacing: -0.018em; }
.walk-dialog-sub { margin-top: 6px; max-width: 60em; font-size: 15px; color: var(--color-text-secondary); }
.walk-task-bar { align-items: center; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.walk-back { margin-left: calc(var(--space-3) * -1); }
.walk-back:hover .ic { transform: translateX(-3px); }
.walk-tasks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4); padding: var(--space-6);
}

/* One walkthrough. */
.walk-article { padding: var(--space-6) var(--space-7) var(--space-7); }
.walk-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.walk-crumb .eyebrow { margin: 0; }
.walk-book {
  font-size: 12.5px; font-weight: 600; color: var(--color-text-muted);
  padding: 3px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
}
.walk-task-title { margin-top: var(--space-3); font-size: clamp(26px, 3vw, 38px); font-weight: 750; letter-spacing: -0.022em; line-height: 1.1; text-wrap: balance; }
.walk-why { margin-top: var(--space-4); max-width: 46em; font-size: 17.5px; line-height: 1.6; color: var(--color-text-secondary); }
.walk-steps { counter-reset: walk; display: grid; gap: var(--space-7); margin-top: var(--space-7); }
.walk-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
.walk-step-n {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  font-weight: 750; font-size: 16px; font-variant-numeric: tabular-nums;
  color: var(--color-button-primary-text); background: var(--color-button-primary-bg);
  box-shadow: var(--highlight-top);
}
.walk-step-text { align-self: center; max-width: 52em; font-size: 16.5px; line-height: 1.65; }
/* A word on the screen -- a button, a heading, a field -- set like a key,
   so the reader can find it in the picture. */
.walk-step-text b {
  padding: 1px 7px; border-radius: 6px; white-space: nowrap; font-weight: 650;
  background: color-mix(in srgb, var(--color-accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
}
.walk-fig { grid-column: 2; margin: var(--space-2) 0 0; }
.walk-stage {
  position: relative; display: inline-block; max-width: 100%; vertical-align: top;
  border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden;
  background: var(--mock-bg); box-shadow: var(--shadow-card);
}
.walk-stage img { display: block; max-width: 100%; height: auto; cursor: zoom-in; }
/* Every ring shows at once: a walkthrough is read, not played. */
.walk-stage .callout .callout-ring { opacity: 1; }
.walk-stage .callout.is-hot .callout-ring {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--callout-pin) 30%, transparent);
  background: color-mix(in srgb, var(--callout-pin) 12%, transparent);
}
.walk-stage .callout-pin { opacity: 1; }
.walk-stage .callout.is-hot .callout-pin { transform: translate(-50%, -50%) scale(1.18); }
.walk-legend { display: grid; gap: 8px; margin-top: var(--space-3); max-width: 52em; }
.walk-legend li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--color-text-secondary); cursor: default; }
.walk-legend li.is-hot { color: var(--color-text-primary); }
.walk-legend i {
  flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  font: 700 11px/1 var(--font-body); font-style: normal;
  color: var(--callout-pin-ink); background: var(--callout-pin); margin-top: 1px;
}
.walk-tip {
  display: flex; gap: var(--space-3); margin-top: var(--space-7); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card); font-size: 15.5px; line-height: 1.6;
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.walk-tip .ic { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; color: var(--color-accent); }
.walk-tip .walk-tip-head { display: block; margin-bottom: 2px; color: var(--color-text-primary); }
.walk-tip b:not(.walk-tip-head) {
  padding: 1px 7px; border-radius: 6px; white-space: nowrap; font-weight: 650; color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
}
.walk-nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border);
}
.walk-nav .btn { max-width: 100%; }
.walk-nav .btn span { overflow: hidden; text-overflow: ellipsis; }
.walk-nav-next { margin-left: auto; }
.walk-proof { margin-top: var(--space-4); font-size: 13px; color: var(--color-text-muted); }

@media (max-width: 760px) {
  .walk-box, .walk-cta { padding: var(--space-5); }
  .walk-article { padding: var(--space-5); }
  .walk-dialog-bar { padding: var(--space-4) var(--space-5); }
  .walk-tasks { padding: var(--space-5); }
  .walk-step { grid-template-columns: 32px minmax(0, 1fr); }
  .walk-step-n { width: 32px; height: 32px; font-size: 14px; }
  .walk-fig { grid-column: 1 / -1; }
  .walk-step-text b { white-space: normal; }
}
@media (max-width: 620px) {
  .walk-dialog, .walk-task-dialog { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; margin: 0; }
}

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

/* ================================================================ CIS REFUND CHECKER
   The page (Dean, 3 Oct 2026). The checker's own styles are in
   tools/widget.css, shared with the checkers practices embed. */
.crc-hero { padding-bottom: 0; }
.crc-title { margin: var(--space-3) 0 var(--space-4); font-size: var(--h-title); font-weight: 650; letter-spacing: -0.02em; line-height: 1.08; max-width: 18ch; }
.crc-lede { max-width: 62ch; }
.crc-section .slab { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.crc-noscript { margin: 0; color: var(--color-text-secondary); }
.crc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.crc-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: var(--space-5); background: var(--color-surface);
}
.crc-card h3 { margin: 0 0 var(--space-3); font-size: var(--h-card); font-weight: 650; }
.crc-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--color-text-secondary); }
@media (max-width: 900px) { .crc-cards { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ LANDLORDS
   Making Tax Digital for landlords (a draft for Dean, 4 Oct 2026). It borrows
   the checker page's hero and cards, the home page's status note and its
   price comparison. */
.ll-status { max-width: 62ch; margin-top: var(--space-6); margin-bottom: var(--space-8); }
/* How we compare (5 Oct 2026): How it can cost this little beside the On track notice, stacked on a phone. */
.cmp-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6) var(--space-7); align-items: start; margin-top: var(--space-6); margin-bottom: var(--space-8); }
.cmp-hero-row .price-why { margin-top: 0; }
.cmp-hero-row .ll-status { margin: 0; max-width: none; }
@media (max-width: 900px) { .cmp-hero-row { grid-template-columns: minmax(0, 1fr); } }
.compare-table td.cmp-save { color: var(--color-brand-primary); font-weight: 650; }
.cmp-cards .crc-card p + p { margin-top: var(--space-3); }
.cmp-cards .cmp-means b, .cmp-cards .cmp-us b { color: var(--color-text-primary); }
.cmp-cards .cmp-us { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.page-more { margin-top: var(--space-5); font-size: 15.5px; line-height: 1.6; color: var(--color-text-secondary); }

/* ================================================================ STONELEDGER COMPARED
   A draft for Dean, 4 Oct 2026: the landlords page's parts, and the four
   other companies' cards two by two. */
.crc-cards.cmp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A section's way on to a page of its own (the home page's For landlords). */
.section-more { display: flex; justify-content: center; margin-top: var(--space-6); }
@media (max-width: 900px) { .crc-cards.cmp-cards { grid-template-columns: minmax(0, 1fr); } }