@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Archivo:wght@500;600;700&display=swap');

/* ============================================================
   SiteMargin — "Daylight" system
   White + soft-grey bands, one tight sans, pill buttons.
   Terracotta stays the single accent; mono carries every figure.
   ============================================================ */

:root {
  /* Figures, stats AND the wordmark: Archivo, not Space Grotesk. The figures
     moved on 2026-09-17 because Space Grotesk's "1" carries a flagged, footed
     shape that read oddly in "R199" and "<1 MIN". The wordmark followed the
     same day so the site carries one display face, matching the app, and
     Space Grotesk left the font import with it. */
  --font-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --page: #FFFFFF;
  --stage: #F5F5F7;
  /* Section bands only. --stage stays flat for inputs / avatars / hover fills. */
  --band: linear-gradient(180deg, #F3F4F6 0%, #E4E7EC 55%, #D6DCE3 100%);
  --ink: #1D1D1F;
  --muted: #6E6E73;
  --hairline: #E8E8ED;
  --accent: #1D5C8A;
  --accent-hover: #154766;
  --over: #C1462B;
  --watch: #B8862F;
  --ok: #4C7A5C;
  /* Added 2026-09-17 for the dark theme. Light values are the exact hexes
     the rules below used to carry, so light mode is pixel-identical. */
  --surface: #FFFFFF;          /* cards, nav, inputs                       */
  --on-accent: #FFFFFF;        /* text on an accent-filled button          */
  --ink-2: var(--ink-2);            /* running body copy inside cards/lists     */
  --hair-2: var(--hair-2);           /* the faint rule between list rows         */
  --ink-rgb: 29, 29, 31;       /* for rgba() borders/shadows built on ink  */
  --band-edge: rgba(var(--ink-rgb),0.12);
  --photo-veil: linear-gradient(100deg,
    rgba(251,249,245,0.90) 0%, rgba(248,243,234,0.55) 42%,
    rgba(243,236,224,0.22) 70%, rgba(236,224,204,0.30) 100%);
  --photo-veil-m: rgba(250,246,240,0.76);
  --glass: rgba(255,255,255,0.9);
  --glass-2: rgba(255,255,255,0.7);
  --glass-edge: rgba(255,255,255,0.9);
  --sheet-edge: transparent;
  --sheet-hi: transparent;
  color-scheme: light;
}

/* ---------- DARK THEME ----------
   Same token set, mirrored on the app's dark palette (src/index.css in the
   app repo: bg #15171B, surface #1D2025, border #2B2E34, text #F3F4F6 /
   #9BA0A8, accent #6BA9D4). Three states, as in the app: the bare :root is
   light; the OS preference applies unless the visitor has chosen light; an
   explicit choice (data-theme, stamped by the head script from
   localStorage sm_theme) wins either way. Everything that is deliberately
   dark in the light theme -- hero diamond, tool tiles, the featured plan
   head, the principle block, slab buttons -- stays exactly as it is. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #15171B;
    --stage: #1D2025;
    --band: linear-gradient(180deg, #1B1E24 0%, #171A1F 55%, #131519 100%);
    --ink: #F3F4F6;
    --muted: #9BA0A8;
    --hairline: #2B2E34;
    --accent: #6BA9D4;
    --accent-hover: #8CC0E3;
    --over: #E0795E;
    --watch: #D9AD5C;
    --ok: #7FB596;
    --surface: #1D2025;
    --on-accent: #0E1A24;
    --ink-2: #C9CDD3;
    --hair-2: #262A30;
    --ink-rgb: 243, 244, 246;
    --band-edge: rgba(255,255,255,0.08);
    --photo-veil: linear-gradient(100deg,
      rgba(21,23,27,0.94) 0%, rgba(21,23,27,0.72) 42%,
      rgba(21,23,27,0.48) 70%, rgba(21,23,27,0.58) 100%);
    --photo-veil-m: rgba(21,23,27,0.82);
    --glass: rgba(29,32,37,0.92);
    --glass-2: rgba(29,32,37,0.82);
    --glass-edge: rgba(255,255,255,0.06);
    --sheet-edge: rgba(255,255,255,0.11);
    --sheet-hi: rgba(255,255,255,0.05);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #15171B;
  --stage: #1D2025;
  --band: linear-gradient(180deg, #1B1E24 0%, #171A1F 55%, #131519 100%);
  --ink: #F3F4F6;
  --muted: #9BA0A8;
  --hairline: #2B2E34;
  --accent: #6BA9D4;
  --accent-hover: #8CC0E3;
  --over: #E0795E;
  --watch: #D9AD5C;
  --ok: #7FB596;
  --surface: #1D2025;
  --on-accent: #0E1A24;
  --ink-2: #C9CDD3;
  --hair-2: #262A30;
  --ink-rgb: 243, 244, 246;
  --band-edge: rgba(255,255,255,0.08);
  --photo-veil: linear-gradient(100deg,
    rgba(21,23,27,0.94) 0%, rgba(21,23,27,0.72) 42%,
    rgba(21,23,27,0.48) 70%, rgba(21,23,27,0.58) 100%);
  --photo-veil-m: rgba(21,23,27,0.82);
  --glass: rgba(29,32,37,0.92);
  --glass-2: rgba(29,32,37,0.82);
  --glass-edge: rgba(255,255,255,0.06);
  --sheet-edge: rgba(255,255,255,0.11);
  --sheet-hi: rgba(255,255,255,0.05);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.5;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 0 22px; }

/* ---------- NAV ---------- */
.navbar {
  position: sticky; top: 0; z-index: 100;
  /* Reserves space for the native status bar when this page is loaded
     inside the SiteMargin Android app's WebView. This used to read a
     --safe-area-inset-top custom property injected by Capacitor's
     SystemBars plugin, updated live via JS on every page load -- but a
     position:sticky element whose own padding changes *after* it has
     already painted once corrupts (visibly doubled/ghosted text and
     icons) on this WebView's software rasterizer, no matter how early
     the JS injection lands. A static value never changes after first
     paint, so it can't trigger that. 56px comfortably clears every
     status bar height we've measured, including tall camera-cutout
     ones; on a normal browser (not inside the app) this is just some
     extra top padding on an already-sticky white bar -- harmless. */
  padding-top: 56px;
  /* Was a translucent + backdrop-filter:blur(18px) "frosted glass" bar.
     backdrop-filter on a position:sticky ancestor, combined with the
     hamburger's position:absolute popover card and its own transform/
     opacity transition, renders as visibly corrupted ("garbled") on
     software-rendered WebViews (Android emulators, some real devices) —
     a known class of GPU-compositing bug with this exact combination.
     Solid white reads almost identically against this site's white page
     background and is bulletproof everywhere, including embedded in the
     native app's own WebView. */
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.nav-right { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.nav-ghost { font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 10px 14px; }
.nav-ghost:hover { color: var(--accent); }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo-mark { color: var(--ink); height: 38px; width: auto; display: block; }
.logo-text {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.01em; color: var(--ink);
}
.logo-text span { color: var(--accent); }

/* ---------- THEME TOGGLE ----------
   Same 38px disc as the hamburger. Shows the icon for the theme you would
   get by clicking, which is what people expect: a moon on the light site,
   a sun on the dark one. The three-state rule below mirrors the tokens. */
.theme-toggle {
  width: 38px; height: 38px; border: none; border-radius: 50%; flex-shrink: 0;
  background: var(--stage); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.theme-toggle:hover { background: var(--hairline); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .tt-sun, .menu-theme .tt-sun { display: none; }
/* Under 480px the nav is already full; the disc goes and the menu row takes
   over. Above that the row is hidden so there is one control, not two. */
.menu-theme { display: none !important; }
@media (max-width: 480px) {
  .theme-toggle { display: none; }
  .menu-theme { display: flex !important; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .tt-sun, :root:not([data-theme="light"]) .menu-theme .tt-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .tt-moon, :root:not([data-theme="light"]) .menu-theme .tt-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .tt-sun, :root[data-theme="dark"] .menu-theme .tt-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .tt-moon, :root[data-theme="dark"] .menu-theme .tt-moon { display: none; }
.menu-wrap { position: relative; }
.menu-btn {
  width: 38px; height: 38px; border: none; border-radius: 50%;
  background: var(--stage); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; padding: 0; flex-shrink: 0;
}
.menu-btn:hover { background: var(--hairline); }
.menu-btn span {
  display: block; width: 15px; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Rounded popover card, matching app.sitemargin.co.za's hamburger drawer
   exactly (same radius/shadow/motion language as every other card on this
   site) instead of the old full-screen takeover. Anchored to .menu-wrap
   (position:relative) so it pops out directly under the button. top is
   flush at 100% — no gap — so a hovering pointer never crosses dead space
   between the button and the card and loses :hover mid-transit. No
   max-height/overflow either: it sizes to its content and never scrolls
   internally. */
.menu-panel {
  position: absolute; top: 100%; right: 0;
  width: min(320px, 86vw);
  background: var(--surface); border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.16), 0 4px 16px rgba(0,0,0,0.07);
  z-index: 200;
  display: flex; flex-direction: column;
  padding: 20px 20px 18px;
  /* No transform here on purpose. A rounded, box-shadowed layer that also
     gets GPU-layer-promoted by `transform` is a known trigger for visible
     corruption ("garbled" pixel noise) on software-rendered Android
     WebViews — the same class of bug as the old navbar backdrop-filter
     issue. Opacity/visibility alone still gets a clean fade without ever
     promoting this element to its own composited layer. */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.16s ease;
}
/* Opened by adding .open — driven by main.js, which handles both the
   button's click toggle (touch/Android) and, on hover-capable pointers, a
   debounced hover-open/close (see main.js for why plain CSS :hover here
   is unreliable against a popover this much wider than its trigger). */
.menu-panel.open { opacity: 1; visibility: visible; pointer-events: auto; }
.menu-inner { width: 100%; }
.menu-panel a.menu-link, .menu-panel button.menu-link {
  display: block; width: calc(100% + 20px);
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; border-radius: 10px;
  padding: 7px 10px; margin: 0 -10px;
  transition: background 0.15s ease, color 0.15s ease;
}
.menu-panel a.menu-link:hover, .menu-panel button.menu-link:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); }
.menu-panel a.menu-link.current { color: var(--accent); }
.menu-panel a.menu-link.dim {
  display: inline-block; width: auto; margin: 0; padding: 0; border-radius: 0;
  font-size: 12px; font-weight: 600; color: #8A8A90; letter-spacing: 0;
}
.menu-panel a.menu-link.dim:hover { background: none; color: var(--accent); }
.menu-dim-group { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.menu-footer { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.menu-footer-brand-row { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.menu-footer-logo { color: var(--ink); height: 20px; width: auto; display: block; }
.menu-footer-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--ink); }
.menu-footer-wordmark span { color: var(--accent); }
.menu-footer-tagline { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.menu-actions { display: flex; flex-direction: column; gap: 8px; max-width: none; }
.menu-actions a {
  text-align: center; padding: 11px; border-radius: 100px; font-weight: 600;
  font-size: 14px; text-decoration: none;
}
.menu-actions .ghost { border: 1px solid var(--ink); color: var(--ink); }
/* Blueprint blue, not black — same fix already applied to the app's
   hamburger "Sign out"/"Sign up free" button, carried over here so the two
   don't diverge again. */
.menu-actions .solid { background: var(--accent); color: var(--on-accent); border: none; }
.menu-actions .solid:hover { background: var(--accent-hover); }

@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-btn span { transition: none; }
}

/* ---------- SHARED TYPE ---------- */
.eyebrow {
  font-size: 12px; letter-spacing: 0.1em; color: var(--muted);
  font-weight: 600; margin-bottom: 18px; text-transform: uppercase;
}
h1 {
  font-weight: 700; font-size: clamp(34px, 5vw, 54px);
  line-height: 1.08; max-width: 760px; margin-bottom: 20px; letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--accent); }
h2 {
  font-weight: 700; font-size: clamp(25px, 3.6vw, 38px);
  margin-bottom: 14px; max-width: 640px; letter-spacing: -0.018em;
  text-wrap: balance;
}
h2 em { font-style: normal; color: var(--accent); }
.section-sub em { font-style: normal; color: var(--accent); font-weight: 600; }
.sub { font-size: 18px; color: var(--muted); max-width: 580px; margin-bottom: 32px; }
.section-eyebrow {
  font-size: 12px; letter-spacing: 0.1em; color: var(--muted);
  font-weight: 600; margin-bottom: 12px; text-transform: uppercase;
}
.section-sub { color: var(--muted); max-width: 580px; margin-bottom: 40px; font-size: 16px; }
.section { padding: 72px 0; border-top: 1px solid var(--hairline); }
.page-head { padding: 66px 0 40px; }

/* ---------- BUTTONS ---------- */
.btn-primary {
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 16.5px;
  padding: 15px 30px; border-radius: 100px; text-decoration: none; display: inline-block;
}
.btn-primary:hover { background: var(--accent-hover); }
/* Neon gradient border, same light strip as the hero diamond.
   Two backgrounds with different clips: the solid fill is clipped to
   padding-box and the gradient to border-box, so the 2px border itself
   carries the gradient. Padding drops by 2px to offset the new border,
   keeping the button the same size as a plain .btn-primary.
   The :hover rule must repeat both layers — .btn-primary:hover sets a
   single-value background, which would otherwise wipe the gradient out. */
.btn-neon {
  border: 2px solid transparent;
  padding: 13px 28px;
  background:
    linear-gradient(var(--accent), var(--accent)) padding-box,
    linear-gradient(135deg, #CFFAFE 0%, #22D3EE 20%, #06B6D4 42%, #10B981 66%, #22C55E 84%, #86EFAC 100%) border-box;
  box-shadow: 0 0 5px rgba(207,250,254,0.45);
}
.btn-neon:hover {
  background:
    linear-gradient(var(--accent-hover), var(--accent-hover)) padding-box,
    linear-gradient(135deg, #CFFAFE 0%, #22D3EE 20%, #06B6D4 42%, #10B981 66%, #22C55E 84%, #86EFAC 100%) border-box;
}
.btn-secondary {
  background: transparent; color: var(--ink); font-weight: 600; font-size: 16.5px;
  padding: 14px 30px; border-radius: 100px; text-decoration: none;
  border: 1px solid var(--ink); display: inline-block;
}

/* ---------- DIAMOND CTA (site-wide primary action) ----------
   Lifted out of index.html's inline <style> so every page can use it.
   The pill ends in a miniature of the hero diamond: same rotated-square
   silhouette, same dark slab fill, same illuminated cyan-to-green ring.
   Label is set in the display face to match the figures. */
.btn-hero-diamond {
  display: inline-flex; align-items: center; gap: 16px;
  background: linear-gradient(150deg, #23272E 0%, #14171C 52%, #090B0E 100%);
  border-radius: 100px; padding: 10px 10px 10px 38px;
  color: #F2F6F9; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  letter-spacing: -0.005em;
  box-shadow: 0 14px 30px -10px rgba(2,6,23,0.45), inset 0 1px 1px rgba(255,255,255,0.12);
}
.btn-hero-diamond .cap {
  width: 48px; height: 48px; border-radius: 15px; transform: rotate(45deg);
  padding: 2px; flex-shrink: 0; margin-right: 2px;
  background: linear-gradient(135deg, #CFFAFE 0%, #22D3EE 25%, #10B981 70%, #22C55E 100%);
  box-shadow: 0 0 10px rgba(34,211,238,0.55);
  transition: box-shadow 0.2s ease;
}
.btn-hero-diamond .cap i {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 13px;
  background: linear-gradient(150deg, #333740 0%, #1B1E24 100%);
}
.btn-hero-diamond .cap svg { transform: rotate(-45deg); display: block; }
.btn-hero-diamond:hover .cap { box-shadow: 0 0 16px rgba(34,211,238,0.85); }
@media (max-width: 760px) {
  .btn-hero-diamond { font-size: 16.5px; padding: 8px 8px 8px 30px; gap: 13px; }
  .btn-hero-diamond .cap { width: 42px; height: 42px; border-radius: 13px; }
  .btn-hero-diamond .cap i { border-radius: 11px; }
}

/* Was Fraunces italic. Nothing else in siteMargin uses a serif -- not the
   app, not the covers -- so it read as a flourish from another brand. The
   emphasis is the accent colour on its own now, which is the same device the
   LinkedIn and YouTube covers use. */
.display-ital { font-style: normal; font-weight: inherit; }

.textlink { font-size: 15px; font-weight: 500; color: var(--accent); text-decoration: none; }
.textlink::after { content: " ›"; }
.textlink:hover { text-decoration: underline; }
.hero-ctas { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 40px; }

/* ---------- HOME: HERO + BANDS ---------- */
.hero { text-align: center; padding: 84px 0 60px; }
.hero .kicker { font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 14px; }
.hero h1 { font-size: clamp(38px, 5.6vw, 62px); margin-left: auto; margin-right: auto; max-width: 780px; }
.hero .sub { margin-left: auto; margin-right: auto; margin-bottom: 28px; }
.hero .hero-ctas { justify-content: center; margin-bottom: 0; }
.hero-proof { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin-top: 24px; font-size: 13.5px; color: var(--muted); }
.hero-proof-count { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); font-variant-numeric: tabular-nums; }

.stage-band { background: var(--band); padding: 64px 22px 72px; }
/* Full-bleed tint band for the inner pages. Their sections live inside a
   single 980px .wrap, so a band has to sit outside it and re-inset its own
   .wrap — otherwise the tint stops at the column edge instead of the viewport.
   Deliberately not using a 100vw bleed: vw includes the scrollbar, which
   would push a horizontal scroll on Windows. */
.band-bleed { background: var(--band); }
.stage-cap { text-align: center; font-size: 13px; color: var(--muted); margin-top: 22px; }

.statement { text-align: center; padding: 96px 22px; }
.statement h2 { max-width: 700px; margin-left: auto; margin-right: auto; }
.statement p { font-size: 17px; color: var(--muted); max-width: 560px; margin: 0 auto 24px; }

.tiles { background: var(--band); padding: 76px 22px; }
.tile-grid { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tile { background: var(--surface); border-radius: 18px; padding: 30px 26px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); }
.tile .fig { font-family: var(--font-display); font-size: 13px; color: var(--accent); margin-bottom: 12px;  font-variant-numeric: tabular-nums;}
.tile h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }
.tile p { font-size: 14px; color: var(--muted); line-height: 1.55; }

.final-band { text-align: center; padding: 92px 22px; }
.final-band h2 { max-width: 100%; margin: 0 auto 10px; }
.final-band p { color: var(--muted); font-size: 16px; margin-bottom: 26px; }

/* ---------- CARDS / GRID ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card {
  background: var(--surface); border-radius: 18px; padding: 28px 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.card h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; color: var(--ink); letter-spacing: -0.01em; }
.card p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.card-num { font-family: var(--font-display); font-size: 12.5px; color: var(--accent); margin-bottom: 12px;  font-variant-numeric: tabular-nums;}
.card-icon { width: 26px; height: 26px; color: var(--accent); margin-bottom: 14px; }

/* ---------- CARDS THAT ARE ACTUALLY LINKS ----------
   The four Resources cards on the homepage were plain <div>s: they offered a
   free download and a no-sign-up tool and could not be clicked. They are
   anchors now, and these rules stop an anchor looking like body copy with a
   blue underline -- plus give them the affordance a clickable card needs. */
.card-link {
  display: block; text-decoration: none; color: inherit;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease;
}
.card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -12px rgba(15,19,25,0.28), 0 2px 10px rgba(0,0,0,0.05);
}
.card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.card-link h3 { transition: color .18s ease; }
.card-link:hover h3 { color: var(--accent); }

/* Four resource cards in a 3-up auto-fit grid left one orphan on its own
   row. They are a set of four, so the grid says four. */
.grid-res { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .grid-res { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .grid-res { grid-template-columns: minmax(0, 1fr); } }
.res-more { margin-top: 18px; font-size: 14px; }

/* ---------- HERO CARD: evidence, not a ledger ----------------------------
   The card used to be four columns of figures with two column headers, a
   gauge whose scale was never stated, and the words "Updated from site" set
   as the smallest text on it.

   Three corrections and one argument:
     * "Tolerance" is a dimensional word on a building site -- how square the
       wall is -- and it was sitting on a money column. It says vs Budget.
     * The figures column had no header, so R167,900 / R158,900 gave the
       reader no way to know which number was which.
     * The gauges are gone. A bar with no axis and an unlabelled tick is
       decoration wearing the clothes of data; the percentage it was crowding
       now carries the weight instead.
     * Each line says where its number came from and when. That is the whole
       argument of the page -- the figure arrived without the reader typing
       it -- and until now the card never made it.
   -------------------------------------------------------------------------- */
.hc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 22px 13px; border-bottom: 1px solid var(--hairline);
}
.hc-head b { font-size: 14px; font-weight: 600; color: var(--ink); }
.hc-stamp { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.hc-stamp i {
  width: 6px; height: 6px; border-radius: 50%; background: #4C7A5C; flex: none;
  box-shadow: 0 0 0 3px rgba(76,122,92,0.14);
}
.hc-cols, .hc-row { display: grid; grid-template-columns: 1.5fr 1.42fr 0.78fr auto; gap: 12px; align-items: center; }
.hc-cols {
  padding: 11px 22px; border-bottom: 1px solid var(--hairline);
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 600; color: var(--faint, var(--muted));
}
.hc-cols span { white-space: nowrap; }
.hc-cols span:nth-child(2), .hc-cols span:nth-child(3) { text-align: right; }
.hc-row { padding: 15px 22px; border-bottom: 1px solid var(--hair-2); }
.hc-row:last-child { border-bottom: 0; }
.hc-name { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.hc-src { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; color: var(--muted); }
.hc-src svg { width: 11px; height: 11px; flex: none; }
.hc-num {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap;
}
.hc-pct {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 700; text-align: right;
}

/* On a phone the four columns become two lines: what it is, then what it did. */
@media (max-width: 620px) {
  /* The hero centres its copy on a phone; the card is a document and must not
     inherit that -- a centred trade name over a left-aligned source line reads
     as a mistake. */
  .hero-card, .hero-card * { text-align: left; }
  .hc-cols { display: none; }
  .hc-num { white-space: normal; }
  .hc-row { grid-template-columns: 1fr auto auto; gap: 10px; row-gap: 8px; }
  .hc-item { grid-column: 1 / -1; }
  .hc-num { text-align: left; }
  .hc-head { flex-wrap: wrap; gap: 6px; }
}

/* ---------- BATCH 2: the trap line, the real screens, the comparison ---------- */

/* The sentence the statement band was missing: not "you find out late" but WHY
   you find out late. It is the hinge the whole page turns on, so it sits under
   the thesis rather than beside it. */
.statement-trap {
  margin-top: 18px; font-size: 17px; line-height: 1.6;
  color: var(--muted); max-width: 60ch;
}

/* The first real product pixels on this page. These screenshots are ~3.2:1 --
   three across renders each about 110px tall, which is a screenshot nobody can
   read. One, at the width of the text column, is worth more than three
   thumbnails, and the rest are one click away. */
.shot-one { margin: 26px 0 0; }
.shot-one img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid var(--hairline); box-shadow: 0 18px 44px -20px rgba(15,19,25,0.45);
  background: var(--surface);
}
.shot-more { margin-top: 16px; font-size: 14px; }

/* The comparison. A table would be read as a feature matrix; this is three
   arguments, so it is three rows with the claim in the left column. */
.cmp { margin-top: 28px; border-top: 1px solid var(--hairline); }
.cmp-row {
  display: grid; grid-template-columns: 180px 1fr 1fr; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--hairline); align-items: baseline;
}
.cmp-row span { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.cmp-k { font-weight: 600; color: var(--ink) !important; }
.cmp-head span {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.cmp-row span:last-child { color: var(--ink); }
@media (max-width: 760px) {
  .cmp-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .cmp-head { display: none; }
  .cmp-row span:nth-child(2)::before { content: "Spreadsheet — "; font-weight: 600; }
  .cmp-row span:nth-child(3)::before { content: "siteMargin — "; font-weight: 600; color: var(--accent); }
}

.clib-more-link {
  color: var(--accent); font-weight: 600; text-decoration: none;
}
.clib-more-link:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .card-link, .card-link h3 { transition: none; }
  .card-link:hover { transform: none; }
}

/* ---------- COLOURISED CARDS (per-index tint, cycles every 5) ---------- */
.card-tint { border: 1px solid var(--hairline); box-shadow: none; }
.card-tint:nth-child(5n+1) { background: linear-gradient(180deg, #F4F8FC 0%, #E8F1F9 100%); border-color: rgba(29,92,138,0.16); }
.card-tint:nth-child(5n+2) { background: linear-gradient(180deg, #F5F9F6 0%, #E7F1EA 100%); border-color: rgba(76,122,92,0.18); }
.card-tint:nth-child(5n+3) { background: linear-gradient(180deg, #FBF8F2 0%, #F5EBD8 100%); border-color: rgba(184,134,47,0.2); }
.card-tint:nth-child(5n+4) { background: linear-gradient(180deg, #FBF4F2 0%, #F6E2DC 100%); border-color: rgba(193,70,43,0.18); }
.card-tint:nth-child(5n+5) { background: linear-gradient(180deg, #F8F6F3 0%, #ECE6DE 100%); border-color: rgba(var(--ink-rgb),0.16); }
.card-tint:nth-child(5n+1) .card-num { color: #1D5C8A; }
.card-tint:nth-child(5n+2) .card-num { color: #4C7A5C; }
.card-tint:nth-child(5n+3) .card-num { color: #B8862F; }
.card-tint:nth-child(5n+4) .card-num { color: #C1462B; }
.card-tint:nth-child(5n+5) .card-num { color: #1D1D1F; }

/* ---------- COLOURISED CARDS (neutral cream/brown family, same tint each) ---------- */
.card-cream { border: 1px solid rgba(var(--ink-rgb),0.14); box-shadow: none; }
.card-cream:nth-child(3n+1) { background: linear-gradient(180deg, #FBF9F5 0%, #F3ECE0 100%); border-color: rgba(var(--ink-rgb),0.12); }
.card-cream:nth-child(3n+2) { background: linear-gradient(180deg, #F9F5EE 0%, #EFE3D2 100%); border-color: rgba(var(--ink-rgb),0.16); }
.card-cream:nth-child(3n+3) { background: linear-gradient(180deg, #F7F2E9 0%, #ECE0CC 100%); border-color: rgba(var(--ink-rgb),0.2); }
.card-cream .card-num { color: #8A6D3B; }

/* ---------- FEATURE BAND (plain white, no colour wash) ----------
   Was a near-black #2A303B slab with high-opacity glow blobs, then a warm
   cream band with three soft brand-hue glows. On about.html this section
   sits directly under the page header, so it now stays flat white with no
   glows and no top border, to read as a continuation of the header rather
   than a separate coloured band. */
.band-dark {
  position: relative; overflow: hidden; padding: 24px 0 100px;
  background: var(--page);
  border-bottom: 1px solid var(--band-edge);
}
.band-dark .glow { display: none; }
.band-dark .wrap { position: relative; z-index: 1; }
.band-dark .section-eyebrow { color: var(--muted); }
.band-dark h2 { color: var(--ink); }

/* ---------- LIBRARY HERO (full-bleed photo, slab tint, ray burst) ----------
   Full-bleed image sunk under the same slab gradient the diamond, the CTA
   and the pricing header use, with a thin ray burst behind the type. The
   rays stop short of the centre so nothing crosses the words. */
.lib-hero {
  position: relative; overflow: hidden; background: #0B0E12;
  min-height: 560px; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 104px 22px 112px;
}
.lib-hero .lib-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lib-hero .lib-photo {
  background: url("/img/pour.jpg") center 55% / cover;
  opacity: 0.58; filter: grayscale(0.5);
}
.lib-hero .lib-tint {
  background: linear-gradient(150deg, rgba(20,23,28,0.84), rgba(9,11,14,0.91)),
              radial-gradient(50% 50% at 50% 45%, rgba(16,185,129,0.20), transparent 70%);
}
.lib-burst { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center;
  justify-content: center; pointer-events: none; }
.lib-burst svg { width: min(660px, 86vw); height: auto; overflow: visible; }
.lib-burst line { stroke: url(#libBurst); stroke-width: 1.2; stroke-linecap: round; }
.lib-inner { position: relative; z-index: 2; max-width: 640px; }
.lib-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: #7DE3C3; margin-bottom: 22px; }
.lib-hero h1 {
  font-weight: 300; font-size: clamp(42px, 7vw, 74px); line-height: 1.04; letter-spacing: 0.02em;
  text-transform: uppercase; color: #FFFFFF; margin: 0 auto 22px; max-width: none;
}
.lib-hero h1 b { font-weight: 600; }
.lib-sub { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.62); margin-bottom: 30px; }
.lib-long { font-size: 16px; color: rgba(255,255,255,0.60); max-width: 430px; margin: 0 auto 34px; }
@media (max-width: 620px) {
  .lib-hero { min-height: 460px; padding: 76px 22px 84px; }
  .lib-burst svg { width: 92vw; }
}

/* ---------- PHOTO-BACKED BAND ----------
   Cream band is the base layer and stays the fallback: if the photo never
   loads, the section still reads exactly like every other cream band.
   The image sits in a ::before at low opacity, desaturated and warmed so it
   reads as paper-and-plans texture rather than a stock photo, and the white
   cards keep their contrast on top of it. */
.section-photo {
  position: relative; overflow: hidden;
  background: var(--band);
}
.section-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("/img/plans.jpg");
  background-size: cover; background-position: 40% 66%;
  /* full colour -- no greyscale or sepia -- pulled back slightly so the
     photo sits under the section rather than competing with it */
  opacity: 0.78;
}
/* warm scrim: keeps the ink headings and white cards legible over the photo */
.section-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--photo-veil);
}
.section-photo > .wrap { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .section-photo::before { background-position: 46% 60%; opacity: 0.7; }
  .section-photo::after { background: rgba(250,246,240,0.74); }
}

/* ---------- PHOTO ON A CREAM BAND (variant of .section-photo) ---------- */
.band-cream.has-photo { position: relative; }
.band-cream.has-photo .glow { display: none; }   /* the photo replaces the glows */
.band-cream.has-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; opacity: 0.78;
}
.band-cream.has-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--photo-veil);
}
.band-cream.has-photo > .wrap { position: relative; z-index: 1; }
/* the cards sit on a photo now, not a flat band -- more opaque so the body
   copy doesn't have a wheelbarrow running through it */
.band-cream.has-photo .card-glass { background: var(--glass); border-color: rgba(var(--ink-rgb),0.2); }
.photo-pour::before { background-image: url("/img/pour.jpg"); background-position: 68% 62%; }
@media (max-width: 760px) {
  .band-cream.has-photo::before { opacity: 0.62; background-position: 62% 60%; }
  .band-cream.has-photo::after { background: var(--photo-veil-m); }
}

/* ---------- SPLIT: photo beside a block of prose ---------- */
.split { display: grid; grid-template-columns: 0.82fr 1fr; gap: 36px; align-items: center; }
.split-media { border-radius: 18px; overflow: hidden; box-shadow: 0 14px 34px -16px rgba(var(--ink-rgb),0.45); }
.split-media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split .prose { margin: 0; }
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; gap: 24px; }
  .split-media img { aspect-ratio: 16 / 10; }
}

/* ---------- CREAM BAND + GLASS CARDS ----------
   Same warm ground as the About band, so these sections rhyme with the
   diamond section rather than the blue tint bands. The card keeps the
   frosted construction -- translucent fill, 18px blur, 3px accent bar,
   uppercase heading -- with the colour roles inverted for a light ground. */
.band-cream {
  position: relative; overflow: hidden; padding: 76px 0 84px;
  background: var(--band);
  border-top: 1px solid var(--band-edge);
  border-bottom: 1px solid var(--band-edge);
}
.band-cream .glow { position: absolute; border-radius: 50%; filter: blur(80px); z-index: 0;
  pointer-events: none; width: 380px; height: 380px; top: 30px; }
.band-cream .glow1 { background: #B8862F; opacity: 0.12; left: 4%; }
.band-cream .glow2 { background: #C1462B; opacity: 0.10; left: 38%; }
.band-cream .glow3 { background: #8A6D3B; opacity: 0.12; right: 2%; }
.band-cream .wrap { position: relative; z-index: 1; }
.band-cream .section { border-top: none; padding: 0; position: relative; z-index: 1; }

.card-glass {
  background: var(--glass-2); border: 1px solid rgba(var(--ink-rgb),0.16);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 10px 26px -14px rgba(var(--ink-rgb),0.32);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.card-glass::before { content: ""; display: block; height: 3px; width: 34px; border-radius: 2px; margin-bottom: 16px; }
.card-glass.has-icon::before { display: none; }
.card-glass:nth-child(3n+1)::before { background: #1D5C8A; }
.card-glass:nth-child(3n+2)::before { background: #C1462B; }
.card-glass:nth-child(3n+3)::before { background: #B8862F; }
.card-glass .card-icon { color: #8A6D3B; }
.card-glass h3 { font-size: 21px; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
/* Toolkit band on What's inside: one-word headings, the sentence leads the body. */
.card-glass p b { color: var(--ink); font-weight: 600; }
.card-glass p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* ---------- PRINCIPLE BLOCK (one isometric solid, three faces) ----------
   Replaced the three-diamond rail on 2026-09-17. The three principles are
   the three faces of ONE block -- the point of the section is that they are
   not three features but one stance -- drawn with the hero diamond's slab
   shading and its cyan-to-green lit edges, so it reads as the same object
   seen in three dimensions. The block is an SVG (three rhombi) with the
   figures laid over it in HTML so they stay real text; the explanations sit
   in a list alongside, each with a swatch in its face's edge colour.

   Sizing is container-relative: the block scales with its column and the
   figures scale with the block (cqw), so the same markup serves the 440px
   desktop column and the ~300px stack on a phone. */
.principle-block {
  margin-top: 54px;
  display: grid; grid-template-columns: minmax(300px, 440px) 1fr;
  gap: 64px; align-items: center;
}
.pblock {
  position: relative; width: 100%; max-width: 440px; aspect-ratio: 464 / 484;
  margin: 0 auto; isolation: isolate; container-type: inline-size;
}
/* bloom, same treatment as .hero-visual::before */
.pblock::before {
  content: ""; position: absolute; z-index: -1; inset: 13%; border-radius: 50%;
  background: linear-gradient(135deg, #67E8F9 0%, #22D3EE 30%, #10B981 68%, #22C55E 100%);
  filter: blur(40px); opacity: 0.5;
}
.pblock-svg { display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(18px 18px 34px rgba(2,6,23,0.35)); }
.pblock-face {
  position: absolute; text-align: center; transform: translate(-50%, -50%);
  white-space: nowrap;
}
.pblock-top   { left: 50%; top: 29%; }
.pblock-left  { left: 31%; top: 60%; }
.pblock-right { left: 69%; top: 60%; }
.pnode-fig {
  font-family: var(--font-display); font-weight: 700; font-size: 30px;
  letter-spacing: -0.02em; color: #F2F6F9; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-shadow: 0 2px 18px rgba(34,211,238,0.28);
}
.pblock-right .pnode-fig { font-size: 23px; }
@supports (font-size: 1cqw) {
  .pnode-fig { font-size: 6.8cqw; }
  .pblock-right .pnode-fig { font-size: 5.2cqw; }
  .pnode-label { font-size: 2.5cqw; }
}
.pnode-label {
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: #AEB6BE; margin-top: 6px;
}

.pblock-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.pblock-list li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; }
.pblock-swatch {
  display: block; width: 22px; height: 22px; margin: 3px 0 0 3px; transform: rotate(45deg);
  border-radius: 5px; background: linear-gradient(150deg, #333740 0%, #23272E 45%, #14171C 100%);
  box-shadow: 0 0 0 2px #10B981;
}
.pblock-list li:nth-child(1) .pblock-swatch { box-shadow: 0 0 0 2px #22D3EE; }
.pblock-list li:nth-child(3) .pblock-swatch { box-shadow: 0 0 0 2px #86EFAC; }
.pblock-fig {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: #0E9F6E; margin-bottom: 6px;
}
.pblock-list h3 {
  font-size: 17px; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 6px;
}
.pblock-list p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; max-width: 400px; }

@media (max-width: 860px) {
  .principle-block { grid-template-columns: 1fr; gap: 36px; margin-top: 36px; }
  .pblock { max-width: 300px; }
  .pblock-list { gap: 22px; }
  .pblock-list p { max-width: none; }
}

/* ---------- TOOL GRID (coloured per tool, each carries a real metric) ---------- */
/* .tool-* rules for the six homepage tiles live in the TOOL TILES block below. */

.tool-tag {
  display: inline-block; font-size: 11px; letter-spacing: 0.05em; font-weight: 600;
  padding: 4px 11px; border-radius: 100px; margin-bottom: 14px; text-transform: uppercase;
}
/* ---------- TOOL CARDS: dark header block + colour rule ----------
   Each card names its own colour in --c (the rule under the header) and
   --cl (the tag text, lightened so it reads on the dark slab). The header
   is the same gradient as the pricing card and the diamond buttons, so the
   six tools read as one system instead of six pale pills. */
.tool-card { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.tool-card .t-head {
  background: linear-gradient(150deg, #23272E 0%, #14171C 100%);
  padding: 22px 24px 20px; border-bottom: 3px solid var(--c);
}
.tool-card .t-head .tool-tag {
  background: rgba(255,255,255,0.12); color: var(--cl); margin-bottom: 12px;
}
.tool-card .t-head h3 { color: #F2F6F9; margin-bottom: 0; font-size: 17px; }
.tool-card .t-body { padding: 18px 24px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tool-card .t-body p { margin: 0; }
.mini-progress-demo { display: flex; flex-direction: column; gap: 6px; }
.mini-track { position: relative; height: 14px; background: var(--hairline); border-radius: 100px; }
.mini-fill { position: absolute; left: 0; height: 5px; border-radius: 100px; }
.mini-labels { display: flex; justify-content: space-between; font-size: 10px; font-family: var(--font-display);  font-variant-numeric: tabular-nums;}
.cat-dot-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); padding: 3px 0; }
.cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cat-amt { margin-left: auto; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.payment-flow {
  display: flex; align-items: center; gap: 6px; font-family: var(--font-display);
  font-size: 11.5px; color: var(--muted); flex-wrap: wrap;
}
.payment-flow .arrow { color: var(--hairline); }
.payment-flow .highlight { color: var(--accent); font-weight: 600; }

.tool-shot {
  display: block; width: 100%; height: auto; margin-top: 16px;
  border-radius: 10px; border: 1px solid var(--hairline);
}
.tool-card .t-body p { margin-bottom: 0; }

/* ---------- SHEET (home product shot) ---------- */
.mock-sheet {
  max-width: 860px; margin: 0 auto;
  background: var(--surface); border-radius: 18px; overflow: hidden;
  /* --sheet-edge is invisible in light (the white sheet already separates
     from the grey band) and a soft light hairline in dark, where the sheet
     and the band are two near-blacks and the card was losing its edge. */
  border: 1px solid var(--sheet-edge);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 var(--sheet-hi);
}
.mock-head {
  display: flex; justify-content: space-between; padding: 14px 24px;
  border-bottom: 1px solid var(--hairline);
  font-size: 11px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase;
  font-weight: 600;
}
.mock-row { display: flex; align-items: center; padding: 17px 24px; border-bottom: 1px solid var(--hair-2); gap: 18px; }
.mock-row:last-child { border-bottom: none; }
.mock-name { flex: 2; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.mock-nums { flex: 1.5; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; color: var(--muted); }
.mock-gauge { flex: 2; }
.gauge-track { position: relative; height: 5px; background: var(--hairline); border-radius: 100px; margin-bottom: 5px; }
.gauge-fill { height: 100%; border-radius: 100px; }
.gauge-tick { position: absolute; left: 71.4%; top: -2.5px; width: 1px; height: 10px; background: var(--muted); }
.gauge-label { font-family: var(--font-display); font-size: 11px;  font-variant-numeric: tabular-nums;}
.pill { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 100px; white-space: nowrap; }

/* ---------- PRICING ---------- */
/* stretch, not start: every card fills the row so the four CTAs line up on
   one baseline. The featured card's -14px margin lifts its top edge only --
   its bottom still aligns with the rest. */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; align-items: stretch; }
/* auto-fit alone drops 4 -> 3 -> 2, and a lone fourth card stranded on its own
   row spans the full width and looks broken. Step straight from four to two. */
@media (max-width: 980px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pricing-grid { grid-template-columns: 1fr; } }
.plan {
  position: relative;
  background: var(--surface); border-radius: 18px; padding: 32px 26px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex; flex-direction: column;
}
/* Featured plan: name, price and description sit in a dark header block --
   the same slab gradient as the hero diamond and the CTA -- while features
   and button stay on white so the detail is still easy to scan. Badged, not
   lifted: Free and Contractor+ used to sit 14px proud of the row, which made
   them taller than their neighbours (align-items: stretch grows the box by
   the negative margin). Four cards, one height, from 2026-09-17; the badge
   alone marks the recommended one. */
.plan.featured {
  padding: 0;
  box-shadow: 0 0 0 1.5px var(--accent), 0 20px 44px -18px rgba(29,92,138,0.4);
}
.plan.featured .plan-head {
  background: linear-gradient(150deg, #23272E 0%, #14171C 100%);
  padding: 30px 26px 22px; border-radius: 18px 18px 0 0;
}
.plan.featured .plan-head .plan-name { color: rgba(255,255,255,0.55); margin-bottom: 10px; }
.plan.featured .plan-head .plan-price { color: #F2F6F9; }
.plan.featured .plan-head .plan-price span { color: rgba(255,255,255,0.6); }
.plan.featured .plan-head .plan-desc { color: rgba(255,255,255,0.68); margin-bottom: 0; }
.plan.featured .plan-body { padding: 24px 26px 32px; display: flex; flex-direction: column; flex: 1 0 auto; }
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 100px;
  background: linear-gradient(135deg, #22D3EE, #10B981); color: #08252B;
  box-shadow: 0 0 16px rgba(34,211,238,0.5);
}

/* FREE is the one plan that costs nothing, so the word does the work rather
   than an R0 nobody reads. --ok #4C7A5C is deliberately desaturated and will
   not carry a display size, so this borrows the bright green from the diamond
   ring instead. The name label is dropped -- the price IS the name here. */
.plan.free-plan {
  padding-top: 34px;
  box-shadow: 0 0 0 1.5px #22C55E, 0 20px 44px -18px rgba(34,197,94,0.5);
}
.plan.free-plan .plan-name { display: none; }
.plan.free-plan .plan-price {
  font-size: 60px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 10px;
  background: linear-gradient(135deg, #34D399 0%, #22C55E 45%, #15A34A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plan-micro { font-size: 12px; font-weight: 600; color: #15A34A; margin-bottom: 16px; }
.plan.free-plan .plan-badge {
  background: linear-gradient(135deg, #34D399, #15A34A); color: #04250F;
  box-shadow: 0 0 18px rgba(34,197,94,0.55);
}
.plan.free-plan .plan-cta {
  background: linear-gradient(150deg, #1B7A45 0%, #0E5730 100%);
  box-shadow: 0 12px 26px -10px rgba(21,163,74,0.65), inset 0 1px 1px rgba(255,255,255,0.18);
}
.plan.free-plan .plan-cta .cap { background: linear-gradient(135deg, #D1FAE5, #34D399 30%, #22C55E 75%); }
.plan.free-plan .plan-cta:hover { box-shadow: 0 18px 30px -12px rgba(21,163,74,0.7), inset 0 1px 1px rgba(255,255,255,0.18); }

/* The trial line leads the Free list and is the one thing on the card that
   is not a limit, so it carries the green the price does. */
.plan li.li-trial { color: #15A34A; font-weight: 600; }
.plan-name {
  font-size: 12px; letter-spacing: 0.08em; color: var(--muted);
  text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
}
.plan-price { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 32px; font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.plan-price span { font-size: 14px; color: var(--muted); font-weight: 400; }
.plan-desc { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.plan ul { list-style: none; margin-bottom: 26px; flex: 1 0 auto; }
.plan li { font-size: 14px; padding: 8px 0; border-top: 1px solid var(--hair-2); color: var(--ink-2); }
.plan li:first-child { border-top: none; }
.plan-addon {
  border: 1px solid rgba(29,92,138,0.22); border-radius: 12px;
  background: rgba(29,92,138,0.05); padding: 12px 14px; margin-bottom: 18px;
}
/* Same construction as .plan-cta .cap (the "Get started" diamond arrow):
   a thin gradient ring doing the highlighting — no fill of its own, just
   the ring, so it reads as an outline rather than a new solid-colour pill
   competing with the card. */
.plan-addon-badge {
  display: inline-block; border-radius: 100px; margin-bottom: 8px;
  padding: 1.5px;
  background: linear-gradient(135deg, #CFFAFE 0%, #22D3EE 25%, #10B981 70%, #22C55E 100%);
}
.plan-addon-badge-inner {
  display: inline-flex; align-items: center; border-radius: 98px;
  background: var(--surface);
  padding: 13px 30px 13px 16px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink);
}
.plan-addon-r-wrap { position: relative; display: inline-block; }
.plan-addon-plus {
  position: absolute; top: -10px; right: -15px;
  font-size: 24px; font-weight: 900; line-height: 1; color: #FF7A29;
}
/* The Contractor+ badge is now the exact provided artwork (dark glowing
   pill), dropped in unmodified — scaled to the addon box width only, no
   crop/recolor/adaptation of the source image itself. */
.plan-addon-badge-img {
  display: block; width: 100%; max-width: 220px; height: auto;
  margin-bottom: 8px;
}
.plan-addon-note {
  font-size: 13px; color: var(--muted); line-height: 1.45; margin: 0;
}
.plan-addon-note strong { color: var(--ink); font-weight: 600; }
/* Every plan CTA is the site's diamond pill, scaled down for the card.
   The flat-black outline that used to sit here was the only #1D1D1F border
   on the site. The featured plan is still marked out -- by its accent ring
   and shadow on .plan.featured -- so the buttons no longer need to carry
   that job as well. */
.plan-cta {
  margin-top: auto;
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(150deg, #23272E 0%, #14171C 52%, #090B0E 100%);
  border: none; border-radius: 100px; padding: 7px 14px;
  color: #F2F6F9; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  box-shadow: 0 12px 26px -10px rgba(2,6,23,0.45), inset 0 1px 1px rgba(255,255,255,0.12);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.plan-cta .cap {
  display: inline-flex; width: 30px; height: 30px; border-radius: 9px; transform: rotate(45deg);
  padding: 2px; flex-shrink: 0;
  background: linear-gradient(135deg, #CFFAFE 0%, #22D3EE 25%, #10B981 70%, #22C55E 100%);
  box-shadow: 0 0 10px rgba(34,211,238,0.55);
  transition: box-shadow 0.2s ease;
}
.plan-cta .cap i {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 7px; background: linear-gradient(150deg, #333740 0%, #1B1E24 100%);
}
.plan-cta .cap svg { transform: rotate(-45deg); display: block; }
.plan-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(2,6,23,0.5), inset 0 1px 1px rgba(255,255,255,0.12); }
.plan-cta:hover .cap { box-shadow: 0 0 16px rgba(34,211,238,0.85); }
@media (max-width: 420px) {
  .plan-cta { font-size: 14.5px; padding: 6px 6px 6px 18px; gap: 10px; }
  .plan-cta .cap { width: 28px; height: 28px; border-radius: 8px; }
}

/* ---------- SIGNUP / FORMS ---------- */
.final-cta { text-align: center; padding: 84px 0; border-top: 1px solid var(--hairline); }
.final-cta h2 { max-width: 100%; margin: 0 auto 14px; }
.final-cta p { color: var(--muted); max-width: 480px; margin: 0 auto 30px; }
.signup-box {
  background: var(--surface); border-radius: 18px;
  padding: 32px; max-width: 460px; margin: 0 auto;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
  text-align: left;
}
.signup-form { display: flex; flex-direction: column; gap: 12px; }
.signup-form input, .signup-form textarea {
  background: var(--stage); border: 1px solid transparent; border-radius: 12px;
  color: var(--ink); font-size: 15px; padding: 12px 16px; font-family: 'Inter', sans-serif;
}
.signup-form textarea { min-height: 110px; resize: vertical; }
.signup-form input:focus, .signup-form textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.signup-form input::placeholder, .signup-form textarea::placeholder { color: #A0A0A6; }
.signup-submit {
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 15px;
  padding: 13px; border-radius: 100px; border: none; cursor: pointer; font-family: 'Inter', sans-serif;
}
.signup-submit:hover { background: var(--accent-hover); }
.signup-submit:disabled { opacity: 0.6; cursor: default; }
.signup-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; text-align: center; }
.signup-message { font-size: 14px; margin-top: 4px; display: none; }
.signup-message.success { color: var(--ok); display: block; }
.signup-message.error { color: var(--over); display: block; }

/* ---------- PROSE (about, legal) ---------- */
.prose { max-width: 640px; }
.prose p { color: var(--ink-2); font-size: 16.5px; margin-bottom: 20px; }
.pull-quote {
  font-size: clamp(21px, 3vw, 26px); line-height: 1.35; font-weight: 600; letter-spacing: -0.015em;
  color: var(--ink); border-left: 3px solid var(--accent); padding-left: 24px; margin: 36px 0;
  max-width: 640px;
}
.pull-quote em { font-style: normal; color: var(--accent); }

/* ---------- FOUNDER (about.html) ----------
   A name and a face under the story, because "built by someone who's had the
   conversation" is a claim until somebody signs it. The photo slot renders
   initials on the slab until a portrait lands in /img/; swap the span for an
   <img> and nothing else moves. */
.founder {
  display: grid; grid-template-columns: 148px 1fr; gap: 30px; align-items: center;
  margin-top: 48px; padding: 30px 32px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: 0 10px 26px -14px rgba(var(--ink-rgb),0.28);
}
.founder-photo {
  width: 148px; height: 148px; border-radius: 50%; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #333740 0%, #23272E 45%, #14171C 100%);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent);
}
.founder-photo span { font-family: var(--font-display); font-weight: 700; font-size: 44px; letter-spacing: -0.02em; color: #F2F6F9; }
.founder-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.founder-body .section-eyebrow { margin-bottom: 8px; }
.founder-body h3 { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--ink); }
.founder-role { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }
.founder-body p:last-child { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 60ch; }
@media (max-width: 640px) {
  .founder { grid-template-columns: 1fr; text-align: center; padding: 28px 22px; }
  .founder-photo { margin: 0 auto; width: 124px; height: 124px; }
  .founder-photo span { font-size: 38px; }
  .founder-body p:last-child { margin: 0 auto; }
}

/* ---------- WHO THIS IS FOR: the slab strip (index.html) ----------
   Four roles as four cells of ONE dark solid -- the same object family as
   the hero diamond and the principle block -- each with a lit top edge in
   its own colour. Dark in both themes on purpose, like the principle block.
   Every figure in it is a real one: 3 free site seats is the Contractor
   plan, "one honest answer" is the Home Owner line the site has always
   used. Replaced four plain white cards on 2026-09-17. */
.who-slab {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 20px; overflow: hidden; position: relative;
  background: linear-gradient(150deg, #333740 0%, #23272E 45%, #14171C 100%);
  box-shadow: 0 20px 44px -26px rgba(4,10,16,.85), inset 0 1px 0 rgba(255,255,255,.07);
}
.who-slab::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px); background-size: 7px 7px;
}
.who-cell { position: relative; padding: 30px 26px 28px; color: #EEF3F7; z-index: 1; }
.who-cell + .who-cell { border-left: 1px solid rgba(255,255,255,.08); }
.who-cell::before {
  content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px;
  border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--wc), transparent);
}
.who-cell .k { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wc); margin-bottom: 14px; }
.who-cell .fig {
  font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  margin: 0 0 6px; color: #F2F6F9; text-shadow: 0 2px 18px rgba(34,211,238,.2); font-variant-numeric: tabular-nums;
}
.who-cell .fig small { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(238,243,247,.55); margin-left: 6px; vertical-align: middle; }
.who-cell h3 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; color: #F2F6F9; }
.who-cell p { font-size: 14px; line-height: 1.55; color: rgba(238,243,247,.72); margin: 0; }
.who-cell a { color: #A5F3FC; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-block; margin-top: 14px; }
.who-cell a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .who-slab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who-cell:nth-child(3) { border-left: 0; }
  .who-cell:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 520px) {
  .who-slab { grid-template-columns: 1fr; }
  .who-cell + .who-cell { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .who-cell { padding: 24px 22px; }
}

/* ---------- CUSTOMER QUOTE ----------
   One voice, set large, with the person named. Used on the homepage between
   Who-this-is-for and the tool tiles once a quote exists. */
.voice { position: relative; max-width: 780px; margin: 0 auto; padding: 8px 0 0 34px; }
.voice::before {
  content: "\201C"; position: absolute; left: -6px; top: -26px; font-family: var(--font-display);
  font-size: 96px; line-height: 1; font-weight: 700; color: var(--accent); opacity: .35;
}
.voice blockquote { margin: 0; font-size: clamp(21px, 2.8vw, 27px); line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.voice figcaption { margin-top: 18px; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.voice figcaption b { color: var(--ink); font-weight: 700; }
.voice figcaption i { width: 26px; height: 2px; background: var(--accent); display: inline-block; }

/* ---------- REFERRAL ---------- */
.referral-row {
  border-top: 1px solid var(--hairline);
  padding: 32px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.referral-text { flex: 1; min-width: 240px; }
.referral-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.referral-heading { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.referral-sub { font-size: 13px; color: var(--muted); margin-bottom: 16px; max-width: 420px; }
.referral-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.referral-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 100px; font-size: 13px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--ink); color: var(--ink);
  background: none; cursor: pointer; font-family: inherit;
}
.referral-btn:hover { background: var(--stage); }
.referral-btn.whatsapp { border-color: #25D366; color: #1c8a44; }
.referral-btn.whatsapp:hover { background: rgba(37,211,102,0.08); }
.referral-qr-block { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
.referral-qr-block img, .referral-qr-block svg { width: 112px; height: 112px; box-shadow: 0 1px 6px rgba(0,0,0,0.08); }
.referral-qr-caption { font-size: 11px; color: var(--muted); text-align: center; }
.referral-qr-caption b { color: var(--ink); font-family: var(--font-display); font-weight: 600; }

/* ---------- FOOTER ---------- */
.site-footer { border-top: 1px solid var(--hairline); padding: 48px 0 0; }
.footer-top { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; padding-bottom: 36px; }
.footer-brand { max-width: 280px; }
.footer-brand .logo { margin-bottom: 12px; }
.footer-brand p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 32px; height: 32px; border-radius: 50%; background: var(--stage);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.footer-social a:hover { background: var(--hairline); color: var(--ink); }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h5 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.footer-col a { display: block; font-size: 13.5px; color: var(--ink); text-decoration: none; margin-bottom: 10px; }
.footer-col a:hover { color: var(--accent); }
.footer-store-link { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); text-decoration: none; margin-bottom: 10px; }
.footer-store-link svg { width: 18px; height: 18px; flex: none; }
.footer-store-link.soon { color: var(--muted); }
.footer-bottom {
  border-top: 1px solid var(--hairline); margin-top: 8px; padding: 20px 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 12px; color: var(--muted);
}
.footer-bottom .footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom a { color: var(--muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .footer-cols { gap: 32px; }
}

/* ---------- FOCUS ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
.btn-primary:focus-visible, .plan-cta:focus-visible,
.menu-actions a:focus-visible, .signup-submit:focus-visible, .menu-btn:focus-visible { border-radius: 100px; }

@media (max-width: 640px) {
  .mock-row { flex-wrap: wrap; }
  .mock-name { flex: 1 0 100%; }
  .footer-top { flex-direction: column; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* The header carries the Log in / Sign up pair on a phone now (see the
     Trace block further down, which sizes them for it). "Pricing" is the one
     that drops: it is a page link, not an action, and the menu lists it. */
  .nav-ghost { display: none; }
  .logo-mark { height: 32px; }
  .logo-text { font-size: 16px; }
  nav { height: 52px; }
  .hero { padding: 56px 0 44px; }
  .statement { padding: 68px 22px; }
}

/* ============================================================
   CONSTRUCTION LIBRARY
   Hub colours are deliberately a step apart from the app's own
   accent (--accent) so the library reads as its own section, not
   a fifth pricing tier. They repeat across the hub chips, the
   persona tags on each card, and nowhere else on the site.
   ============================================================ */
.clib-hero { padding: 56px 0 8px; max-width: 720px; }
.clib-eyebrow {
  font-size: 12px; letter-spacing: 0.1em; color: var(--muted); font-weight: 600;
}
.clib-hero h1 { margin-top: 10px; margin-bottom: 14px; }
.clib-hero h1 em { font-style: normal; color: var(--accent); }
.clib-sub { font-size: 17px; color: var(--muted); max-width: 600px; margin-bottom: 28px; }

.clib-search-row { position: relative; max-width: 460px; margin-bottom: 20px; }
.clib-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.clib-search {
  width: 100%; padding: 13px 16px 13px 42px; border-radius: 100px;
  border: 1px solid var(--hairline); background: var(--surface);
  font-family: 'Inter', sans-serif; font-size: 14.5px; color: var(--ink);
}
.clib-search:focus { outline: none; border-color: var(--accent); }
.clib-search::placeholder { color: var(--muted); }

.clib-persona-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.clib-persona-pill {
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 100px;
  padding: 9px 16px; cursor: pointer; transition: border-color 0.14s ease, color 0.14s ease;
}
.clib-persona-pill:hover { border-color: var(--accent); color: var(--accent); }
.clib-persona-pill.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.clib-hub-band { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--stage); }
.clib-hub-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; }
.clib-hub-chip {
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 100px;
  padding: 7px 14px; cursor: pointer; transition: all 0.14s ease;
}
.clib-hub-chip:hover { color: var(--ink); }
.clib-hub-chip.is-active { background: var(--hub-color, var(--accent)); border-color: var(--hub-color, var(--accent)); color: var(--on-accent); }

.clib-grid-section { padding: 44px 0 72px; }
.clib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.clib-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 20px 20px 22px;
}
.clib-card.is-coming { background: var(--stage); }
.clib-card[hidden] { display: none; }
.clib-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.clib-fmt {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--muted);
}
.clib-persona-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--tag-color, var(--accent));
  background: color-mix(in srgb, var(--tag-color, var(--accent)) 12%, white);
  padding: 3px 9px; border-radius: 100px;
}
.clib-card-title { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ink); margin-bottom: 8px; }
.clib-card-hub { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.clib-card-use { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-bottom: 18px; flex: 1 0 auto; }
.clib-card-bottom { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }

.clib-dl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600;
  border-radius: 100px; padding: 10px 16px; border: none; cursor: pointer;
  text-decoration: none; width: 100%;
}
.clib-dl-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.clib-dl-free { background: rgba(76,122,92,0.1); color: var(--ok); }
.clib-dl-free:hover { background: rgba(76,122,92,0.18); }
.clib-dl-gated { background: var(--accent); color: var(--on-accent); }
.clib-dl-gated:hover { background: var(--accent-hover); }
.clib-preview-link {
  font-size: 12px; color: var(--muted); text-align: center; text-decoration: underline;
  text-underline-offset: 2px;
}
.clib-preview-link:hover { color: var(--accent); }
.clib-coming-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  font-size: 12px; font-weight: 600; color: var(--muted); border: 1px dashed var(--hairline);
  border-radius: 100px; padding: 9px 16px;
}
.clib-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 40px 0; }

@media (max-width: 980px) { .clib-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .clib-grid { grid-template-columns: 1fr; } }

/* Closing CTA: two columns, dimmed rather than removed when a persona is active */
.clib-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; width: 100%; max-width: 860px; }
.clib-cta-col {
  background: var(--stage); border-radius: 18px; padding: 30px 28px; text-align: left;
  transition: opacity 0.18s ease;
}
.clib-cta-col h2 { font-size: 21px; margin-bottom: 8px; }
.clib-cta-col p { color: var(--muted); font-size: 14px; margin-bottom: 20px; max-width: 40ch; }
.clib-cta-eyebrow { font-size: 11px; letter-spacing: 0.08em; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.clib-cta-col.clib-dim { opacity: 0.42; }
@media (max-width: 760px) { .clib-cta-grid { grid-template-columns: 1fr; } }

/* Gated download modal */
.clib-modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,20,22,0.5); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.clib-modal-backdrop[hidden] { display: none; }
.clib-modal {
  position: relative; background: var(--surface); border-radius: 18px; max-width: 400px; width: 100%;
  padding: 30px 28px 26px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.35);
}
.clib-modal-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: var(--stage); color: var(--muted); font-size: 18px; line-height: 1;
  cursor: pointer;
}
.clib-modal h3 { font-size: 19px; margin-bottom: 6px; }
.clib-modal-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
#clibGateForm { display: flex; flex-direction: column; gap: 10px; }
#clibGateForm input {
  padding: 11px 14px; border-radius: 10px; border: 1px solid var(--hairline);
  font-family: 'Inter', sans-serif; font-size: 14px;
}
#clibGateForm input:focus { outline: none; border-color: var(--accent); }
#clibGateSubmit {
  margin-top: 4px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 100px;
  padding: 12px 16px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14.5px; cursor: pointer;
}
#clibGateSubmit:hover { background: var(--accent-hover); }
#clibGateSubmit:disabled { opacity: 0.6; cursor: default; }
.clib-modal-fine { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 2px; }
.clib-modal-error { font-size: 12.5px; color: var(--over); text-align: center; }
.clib-modal-success { text-align: center; }
.clib-success-icon { margin: 0 auto 14px; width: 46px; height: 46px; }
.clib-success-icon svg { width: 100%; height: 100%; }

/* ---------- CONSTRUCTION LIBRARY — PARTNER UNITS ----------
   Ships dark (PARTNERS_ENABLED = false in main.js). Nothing below renders
   until a sponsor is signed and a partner card is pasted into the grid.

   The disclosure chip is deliberately NOT built on .clib-persona-tag. Those
   are a colour-coded editorial taxonomy the reader learns to trust as
   classification; a paid label must never borrow that vocabulary. Hence a
   5px radius against the persona tags' 100px pill — a different class of
   object at a glance, before anyone reads the word. */
.clib-sponsor-tag {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  background: var(--stage); border: 1px solid var(--hairline);
  padding: 3px 8px; border-radius: 5px;
}

/* The only permitted deviation from --hairline anywhere in the card system.
   A 3px inset rail rather than a tinted background: the card stays white and
   equal in weight to its neighbours, so the unit is marked without being
   made louder than the editorial content around it. */
.clib-card.is-partner { border-color: #DDE3E9; box-shadow: inset 3px 0 0 0 var(--accent); }

.clib-partner-by {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--muted);
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #F0F0F3;
}

/* Sponsors send 900px PNGs with their own padding and their own background.
   A fixed-height chip on white is what stops six partners from looking like
   six different websites inside one grid. */
.clib-logo-chip {
  height: 22px; min-width: 66px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--page); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 0 8px; overflow: hidden;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--ink);
}
.clib-logo-chip img { max-height: 16px; max-width: 92px; width: auto; display: block; }

/* ===========================================================================
   CONSTRUCTION LIBRARY — the per-document pages (/library/*.html)
   Added 2026-09-15.

   Why these pages exist at all, since the reasoning is easy to lose: the
   library index carries eight documents on one URL, and Google can only ever
   rank one URL for one query. Eight documents that people search for by eight
   different names need eight pages. The index stays as the shelf; these are
   the books.

   The second rule they follow is that the EXPLANATION lives on the page, in
   HTML, and only the file is gated. A twenty-word card blurb in front of a
   PDF gives a search engine nothing to rank and a reader nothing to read.

   Everything below is namespaced .lib-* and adds no rule to an existing
   selector, so none of the eight original pages changes by a pixel.
   ======================================================================== */

.lib-article { max-width: 720px; }
.lib-article > p { color: var(--ink-2); font-size: 17px; line-height: 1.68; margin-bottom: 22px; }
.lib-article > p:first-of-type { font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.lib-article h2 { font-size: clamp(22px, 2.8vw, 28px); margin: 44px 0 14px; letter-spacing: -0.015em; }
.lib-article h3 { font-size: 18.5px; font-weight: 700; margin: 30px 0 10px; letter-spacing: -0.008em; }
.lib-article ul, .lib-article ol { margin: 0 0 22px; padding-left: 22px; }
.lib-article li { color: var(--ink-2); font-size: 16.5px; line-height: 1.62; margin-bottom: 9px; }
.lib-article li strong { color: var(--ink); }
.lib-article a { color: var(--accent); }
.lib-article strong { color: var(--ink); }

/* A fact worth pulling out of the paragraph it would otherwise hide in —
   a deadline, a percentage, the thing people get wrong. */
.lib-note {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  padding: 16px 18px;
  margin: 0 0 24px;
  border-radius: 0 8px 8px 0;
}
.lib-note p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.lib-note p + p { margin-top: 10px; }

/* Facts table — clause numbers, periods, percentages. */
.lib-table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 15.5px; }
.lib-table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding: 0 12px 8px 0; border-bottom: 1px solid var(--ink);
}
.lib-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--hairline); color: var(--ink-2); vertical-align: top; }
.lib-table td:first-child { color: var(--ink); font-weight: 600; width: 38%; }
.lib-table-wrap { overflow-x: auto; }

.lib-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }
.lib-tag {
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700;
  padding: 4px 10px; border-radius: 100px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent);
}
.lib-tag-quiet { background: var(--stage); color: var(--muted); }

/* The gate. The file is behind it; the knowledge above it is not. */
.lib-get {
  margin: 44px 0 0; padding: 26px 26px 24px; border-radius: 16px;
  background: var(--stage); border: 1px solid var(--hairline); max-width: 720px;
}
.lib-get h2 { margin: 0 0 8px; font-size: 21px; }
.lib-get p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; margin: 0 0 16px; max-width: 560px; }
.lib-get .lib-get-row { display: flex; flex-wrap: wrap; gap: 10px; }
.lib-get input {
  flex: 1 1 190px; min-width: 0; font-family: inherit; font-size: 15px;
  padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.lib-get button {
  flex: 0 0 auto; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 12px 22px; border: none; border-radius: 10px; background: var(--accent); color: var(--on-accent);
}
.lib-get button:hover { background: var(--accent-hover); }
.lib-get-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.lib-get-msg { font-size: 14px; margin: 12px 0 0; color: var(--ok); }
.lib-get-msg.is-error { color: var(--over); }

/* Soft product line. It earns its place only by being the same subject as
   the page above it — never a banner. */
.lib-app { margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--hairline); max-width: 720px; }
.lib-app h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.lib-app p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; margin: 0 0 12px; }

.lib-related { margin: 44px 0 0; max-width: 720px; }
.lib-related h3 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.lib-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.lib-related a {
  display: block; padding: 15px 16px; border: 1px solid var(--hairline); border-radius: 12px;
  text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.4; background: var(--surface);
}
.lib-related a:hover { border-color: var(--accent); color: var(--accent); }

.lib-crumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.lib-crumb a { color: var(--muted); text-decoration: none; }
.lib-crumb a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .lib-get { padding: 20px 18px 18px; border-radius: 14px; }
  .lib-article > p:first-of-type { font-size: 17.5px; }
}

/* The index cards now lead somewhere. Each card title links to that
   document's own page, and every card carries a "Read the guide" link --
   including the six whose file is still to be built, because the page is
   what a search engine can rank and a reader can use today. */
.clib-card-title a { color: inherit; text-decoration: none; }
.clib-card-title a:hover { color: var(--accent); }
.clib-read-link {
  font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none;
  white-space: nowrap; margin-left: auto;
}
.clib-read-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* ---------- SEATS BAND ----------------------------------------------------
   Free field seats shipped 2026-09-17 and this page said nothing about them
   at all -- the single best thing about a paid plan was invisible to the
   person deciding whether to buy one. Two seat pools, and the distinction is
   the whole argument: an OFFICE seat sees money, a FIELD seat does not, so a
   field seat costs nothing to give away.
   Figures mirror org_field_seat_limit() / org_seat_limit() in the database
   and PLAN_FIELD_SEATS / PLAN_SEATS in the app. Change one, change all. */
.seats-band { padding: 64px 0; }
.seats-lede { max-width: 640px; margin-bottom: 32px; }
.seats-lede p { color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.seat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .seat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 2x2 rather than a single column on a phone: these are four short figures,
   and stacking them makes the reader scroll past three of them to compare. */
@media (max-width: 860px) { .seat-grid { gap: 10px; } }
@media (max-width: 360px) { .seat-grid { grid-template-columns: minmax(0, 1fr); } }
.seat-cell {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 18px 18px 16px;
}
.seat-tier {
  font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 12px;
}
.seat-fig {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 36px; font-weight: 600; line-height: 1; color: var(--accent); margin-bottom: 5px;
}
.seat-what { font-size: 13px; color: var(--muted); line-height: 1.4; }
.seat-office {
  font-size: 12.5px; color: var(--muted); margin-top: 12px;
  padding-top: 11px; border-top: 1px solid var(--hair-2);
}
.seat-office b { color: var(--ink); font-weight: 600; }
.seat-note {
  margin-top: 24px; font-size: 15px; color: var(--ink); line-height: 1.6;
  border-left: 3px solid var(--accent); padding-left: 15px; max-width: 660px;
}

/* ---------- ONCE-OFF: Home Owner, out of the subscription ladder ----------
   It sat as the fourth card in a row of monthly plans, so R899 read as a
   monthly price twice the Company plan right up until you found the small
   "/project" beside it. Out of the row it cannot be misread. */
.once-off {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 36px; align-items: center;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px;
  padding: 34px 32px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
@media (max-width: 760px) { .once-off { grid-template-columns: minmax(0, 1fr); gap: 26px; } }
.once-off h3 { font-size: 23px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.oo-price {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 40px; font-weight: 600; color: var(--ink); line-height: 1; margin-bottom: 6px;
}
.oo-price span { font-size: 15px; color: var(--muted); font-weight: 400; }
.oo-sub { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; line-height: 1.55; }
.oo-cta { max-width: 250px; }
.oo-list { list-style: none; }
.oo-list li { font-size: 14px; padding: 8px 0; border-top: 1px solid var(--hair-2); color: var(--ink-2); }
.oo-list li:first-child { border-top: none; }

/* ---------- DEVELOPER STRIP ----------
   Developers are a real audience for the Company plan, not a fifth SKU: it
   is the same machinery pointed at the person paying rather than the person
   claiming. This sends them to a page that says so in their own words. */
.dev-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; margin-top: 26px;
  border: 1px solid rgba(29, 92, 138, 0.22); background: rgba(29, 92, 138, 0.05);
  border-radius: 16px; padding: 22px 24px;
}
.dev-strip p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; max-width: 600px; }
.dev-strip b { color: var(--ink); font-weight: 600; }
.dev-strip a {
  font-weight: 600; color: var(--accent); text-decoration: none;
  white-space: nowrap; font-size: 14.5px;
}
.dev-strip a:hover { text-decoration: underline; }
.dev-strip a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- DEVELOPER PAGE: the two-sided list ----------
   What it does from the owner's seat, and -- in the same typeface, same
   size, no apology -- what it does not. A page that only lists strengths
   reads as a brochure; the limits are why the rest is believable. */
.two-sided { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 800px) { .two-sided { grid-template-columns: minmax(0, 1fr); } }
.ts-col { background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; padding: 26px 24px; }
.ts-col.ts-not { background: var(--stage); }
.ts-head {
  font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 16px;
}
.ts-col .ts-head { color: var(--ok); }
.ts-col.ts-not .ts-head { color: var(--muted); }
.ts-list { list-style: none; }
.ts-list li { font-size: 14.5px; line-height: 1.55; padding: 11px 0; border-top: 1px solid var(--hair-2); color: var(--ink-2); }
.ts-list li:first-child { border-top: none; }
.ts-list li b { color: var(--ink); font-weight: 600; }

/* ---------- PRICING: WIDER, SHORTER, COLOUR-BLOCKED -----------------------
   The four cards were capped inside the 980px .wrap, so at roughly 210px a
   card every feature line wrapped two or three deep and the grid ran a long
   way past the fold -- you had to scroll to compare two plans, which is the
   one thing a pricing table exists to let you do at a glance. Three changes,
   all aimed at the same fold:
     * a wider container for this section only (the nav and footer stay at
       980, so the page still reads as one column of content),
     * six lines a card, with the rest behind a link, and
     * a colour per plan, so the eye finds its column without reading. */
.wrap-pricing { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
@media (max-width: 1240px) { .wrap-pricing { max-width: 980px; } }

.pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Differentiation by WEIGHT, not hue. A first pass gave Contractor a blue top
   rail and Company an amber one, which was the stock SaaS pricing table and,
   worse, wrong about the content: colour codes CATEGORIES, and these tiers are
   a SEQUENCE. So the card gets more solid as the price climbs -- Contractor
   picks up a defined hairline, Company a full ink border and a deeper shadow,
   and its name goes from grey to black. The only colour left on the row is the
   green on Free and the slab on Contractor+, and both of those mean something.
   Decided with Leon 2026-09-17 after seeing three alternatives. */
.plan.plan-contractor { border: 1px solid var(--hairline); }
.plan.plan-company {
  border: 1.5px solid var(--ink);
  box-shadow: 0 10px 30px -14px rgba(var(--ink-rgb), 0.4);
}
.plan.plan-company .plan-name { color: var(--ink); }

.plan-name { margin-bottom: 12px; }

/* The plus is a mark, not punctuation. Same orange and the same raised set as
   the Contractor+ badge that sold this tier while it was an add-on, so the new
   column reads as the thing people have already seen rather than a new
   invention. Plan name only -- a mark repeated in every list item is noise. */
.plan-name.has-plus { position: relative; display: inline-block; padding-right: 20px; }
.plan-name .tplus {
  position: absolute; top: -7px; right: 0;
  font-size: 22px; line-height: 1; font-weight: 900; color: #FF7A29;
}

.plan ul { margin-bottom: 14px; }
.plan li { padding: 7px 0; line-height: 1.4; }

/* "and the other four things" -- the list is a summary now, not an inventory */
.plan-more {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent);
  text-decoration: none; margin-bottom: 20px;
}
.plan-more:hover { text-decoration: underline; }
.plan-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.plan.featured .plan-more { margin-top: 0; }

/* A seat count is the differentiator now, so it should not read as line nine
   of a list of nine. */
.plan li.li-seats { color: var(--ink); font-weight: 600; }
.plan li.li-seats em { font-style: normal; color: var(--ok); }

/* ---------- WHAT EACH PLAN OPENS (whats-inside.html) ----------
   The pricing cards say "Everything in Contractor ->" and used to land on the
   top of this page, which has no per-plan view at all. This is that view:
   three columns, one per monthly plan, each an inventory rather than a
   pitch, with ids the pricing links point at. Items link back up to the tool
   cards where a card exists. */
.plan-inv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
@media (max-width: 860px) { .plan-inv { grid-template-columns: 1fr; } }
.plan-inv-col {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; padding: 26px 24px 24px;
  scroll-margin-top: 96px; display: flex; flex-direction: column;
}
.plan-inv-col.is-plus { border-color: transparent; box-shadow: 0 0 0 1.5px var(--accent); }
.plan-inv-col.is-company { border: 1.5px solid var(--ink); }
.plan-inv-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.plan-inv-name .tplus { position: relative; top: -6px; font-size: 19px; font-weight: 900; color: #FF7A29; margin-left: 1px; }
.plan-inv-price { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.plan-inv-price b { color: var(--ink); font-weight: 700; }
.plan-inv-every { font-size: 12.5px; color: var(--muted); font-style: italic; margin: 16px 0 4px; padding-top: 14px; border-top: 1px solid var(--hair-2); }
.plan-inv-col ul { list-style: none; margin: 12px 0 0; padding: 0; }
.plan-inv-col li { font-size: 14px; padding: 7px 0; border-top: 1px solid var(--hair-2); color: var(--ink-2); line-height: 1.4; }
.plan-inv-col li:first-child { border-top: 0; }
.plan-inv-col li a { color: var(--accent); text-decoration: none; font-weight: 600; }
.plan-inv-col li a:hover { text-decoration: underline; }
.plan-inv-col li.li-seats { color: var(--ink); font-weight: 600; }
.plan-inv-col li.li-seats em { font-style: normal; color: var(--ok); }
.plan-inv-cta { margin-top: auto; padding-top: 18px; }
.plan-inv-cta a { display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.plan-inv-cta a:hover { text-decoration: underline; }

/* Responsive columns, restated AFTER the 4-column rule above -- the earlier
   .pricing-grid media queries sit further up this file, so the plain rule
   was winning at every width and the grid stayed four columns wide on a
   phone, pushing the page sideways. */
@media (max-width: 1040px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .pricing-grid { grid-template-columns: minmax(0, 1fr); } }

/* A pricing page is a comparison, and a comparison you have to scroll is a
   comparison you don't make. This trims the header so the four cards start
   higher up the page: same type scale as every other page head, less air
   around it, and the h1 free to run full width so it sets on one line. */
.page-head-tight { padding: 30px 0 22px; }
.page-head-tight h1 { max-width: none; margin-bottom: 14px; }
.page-head-tight .sub { margin-bottom: 0; }
@media (max-width: 760px) { .page-head-tight { padding: 40px 0 24px; } }

/* ---------- HEADER BUTTONS: the Trace pair, ported from the app -----------
   app.sitemargin.co.za got this pair on 2026-09-16 and the marketing header
   kept a single flat blue "Log in" pill, so the two headers a visitor sees
   either side of the sign-up link did not look like the same product.

   The ring on the Sign up button is a conic-gradient animated through a
   registered @property -- a plain custom property cannot be interpolated, so
   without the @property line the whole background declaration is invalid and
   the button loses its fill as well as its ring. Tokens are the marketing
   site's own (--ink, --hairline, --accent); the cyan-to-green ring is shared
   with the diamond CTA and is deliberately identical to the app's. */
@property --sm-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes sm-orbit { to { --sm-ang: 360deg; } }

.sm-navbtn {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  border-radius: 100px; padding: 9px 16px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease,
              border-color .22s ease, color .22s ease, background .22s ease;
}
.sm-navbtn:active { transform: translateY(0) scale(.985); }
.sm-navbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sm-navbtn-ghost { background: transparent; border-color: var(--hairline); color: var(--ink); }
.sm-navbtn-ghost:hover {
  border-color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(107,169,212,.12), 0 8px 20px -10px rgba(107,169,212,.55);
}

.sm-navbtn-go {
  --sm-ang: 0deg;
  color: #F2F6F9; padding: 6px 6px 6px 16px; border: 1.5px solid transparent;
  background:
    linear-gradient(150deg, #23272E 0%, #14171C 52%, #090B0E 100%) padding-box,
    conic-gradient(from var(--sm-ang),
      rgba(34,211,238,0) 0deg, rgba(34,211,238,0) 200deg,
      #22D3EE 268deg, #CFFAFE 286deg, #22C55E 304deg,
      rgba(34,197,94,0) 350deg, rgba(34,197,94,0) 360deg) border-box;
  box-shadow: 0 10px 24px -12px rgba(2,6,23,.8), inset 0 1px 1px rgba(255,255,255,.12);
  animation: sm-orbit 4.2s linear infinite;
}
.sm-navbtn-go:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -12px rgba(2,6,23,.85), 0 0 22px -4px rgba(34,211,238,.5);
}
.sm-navbtn-cap {
  width: 26px; height: 26px; border-radius: 9px; transform: rotate(45deg); padding: 2px; flex: none;
  background: linear-gradient(135deg, #CFFAFE, #22D3EE 25%, #10B981 70%, #22C55E);
  box-shadow: 0 0 9px rgba(34,211,238,.5); transition: box-shadow .25s ease;
}
.sm-navbtn-cap i {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 7px; background: linear-gradient(150deg, #333740, #1B1E24);
}
.sm-navbtn-cap svg { transform: rotate(-45deg); display: block; transition: transform .3s cubic-bezier(.2,.8,.3,1); }
.sm-navbtn-go:hover .sm-navbtn-cap { box-shadow: 0 0 18px rgba(34,211,238,.9), 0 0 34px rgba(34,197,94,.35); }
.sm-navbtn-go:hover .sm-navbtn-cap svg { transform: rotate(-45deg) translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .sm-navbtn, .sm-navbtn-cap, .sm-navbtn-cap svg { transition: none; }
  .sm-navbtn-go { animation: none; --sm-ang: 286deg; }
}

/* A phone header carries the logo, both buttons and the hamburger on one
   line -- same as the app. "Pricing" is the one that drops, since it is a
   page link rather than an action and the menu already lists it. */
@media (max-width: 640px) {
  .nav-ghost { display: none; }
  .sm-navbtn { font-size: 12.5px; padding: 8px 12px; gap: 7px; }
  .sm-navbtn-go { padding: 5px 5px 5px 12px; }
  .sm-navbtn-cap { width: 24px; height: 24px; border-radius: 8px; }
  .nav-right { gap: 7px; }
}
/* "Sign up free" is 40px of label a 390px header cannot spare once the logo,
   Log in and the hamburger have taken their share. Dropping the word keeps
   BOTH buttons, which is the point of the pair -- a returning user should not
   have to open a menu to find Log in. */
@media (max-width: 480px) { .sm-navbtn-free { display: none; } }
@media (max-width: 340px) { .sm-navbtn-ghost { display: none; } }

/* ---------- TOOL TILES (homepage) -------------------------------------------
   Six tiles were two across at 460px each, with a hand-drawn chart of invented
   figures in every one and a sentence under that -- 851px of grid, 16% of the
   page, for a menu. And the rule forcing them two-wide had been written for
   the What's-inside screenshot cards, a different component that happens not
   to share the class after all.

   Now three across, a third of the height, and each one a link to the page
   that explains it. Distinct by SHAPE rather than only by hue: a large faint
   motif drawn from what the tool does, cropped by the tile edge -- Gantt bars
   for schedule, the retention ring for payments -- with a gradient and a lit
   top edge so the six read as objects rather than swatches. */
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .tool-grid { grid-template-columns: minmax(0, 1fr); } }
.tool-tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border-radius: 14px; padding: 15px 16px 14px; min-height: 112px;
  color: #FFFFFF; text-decoration: none;
  box-shadow: 0 1px 2px rgba(16,20,26,.14), 0 10px 24px -14px rgba(16,20,26,.5);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease;
}
.tool-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 45%, rgba(0,0,0,.12));
}
.tool-tile:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16,20,26,.16), 0 18px 34px -16px rgba(16,20,26,.62); }
.tool-tile:hover .tool-motif { opacity: .22; transform: scale(1.04); }
.tool-tile:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -3px; }
.tool-tile .tool-ic { width: 19px; height: 19px; position: relative; z-index: 1; }
.tool-tile .tool-name { font-size: 14.5px; font-weight: 600; margin-top: auto; padding-top: 10px; letter-spacing: -0.01em; position: relative; z-index: 1; }
.tool-tile .tool-stat {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 600; opacity: .85; margin-top: 2px; position: relative; z-index: 1;
}
.tool-motif {
  position: absolute; right: -6px; bottom: -8px; width: 62%; height: auto; opacity: .16;
  transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.tool-tile.budget   { background: linear-gradient(145deg, #D86526, #AC4A18); }
.tool-tile.schedule { background: linear-gradient(145deg, #4A83BE, #2F5E8F); }
.tool-tile.docs     { background: linear-gradient(145deg, #8D74D2, #664BA1); }
.tool-tile.payments { background: linear-gradient(145deg, #4CA26E, #30724B); }
.tool-tile.plans    { background: linear-gradient(145deg, #37A79A, #24746C); }
.tool-tile.changes  { background: linear-gradient(145deg, #DCA63C, #A87721); }
@media (prefers-reduced-motion: reduce) { .tool-tile, .tool-motif { transition: none; } }

/* ---------- DARK-ONLY TREATMENTS (2026-09-17) ----------
   Two places where the light design relied on white to do its work.

   Tool cards on What's inside: in light the slab head sits on a white body,
   so eight cards read as eight. In dark, head and body are two near-blacks
   and the row went flat. Each card's own colour (--c / --cl, set inline)
   now lights its edge and washes the foot of the head, so the colour that
   was already there does the separating.

   The About photo: full colour on a dark page shouts. Muted, and veiled
   towards the bottom, it sits behind the prose instead of beside it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool-card {
    border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent), 0 22px 44px -28px var(--c);
  }
  :root:not([data-theme="light"]) .tool-card .t-head { background: linear-gradient(180deg, #23272E 0%, #16191E 100%); position: relative; }
  :root:not([data-theme="light"]) .tool-card .t-head::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 22%, transparent));
  }
  :root:not([data-theme="light"]) .tool-card .t-head .tool-tag {
    background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--cl);
    border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  }
  :root:not([data-theme="light"]) .tool-card .t-body { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, var(--surface)), var(--surface) 40%); }
  :root:not([data-theme="light"]) .split-media { position: relative; border: 1px solid var(--hairline); }
  :root:not([data-theme="light"]) .split-media img { filter: saturate(.62) brightness(.82) contrast(1.06); }
  :root:not([data-theme="light"]) .split-media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(160deg, rgba(21,23,27,.05), rgba(21,23,27,.38));
  }
}
:root[data-theme="dark"] .tool-card {
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent), 0 22px 44px -28px var(--c);
}
:root[data-theme="dark"] .tool-card .t-head { background: linear-gradient(180deg, #23272E 0%, #16191E 100%); position: relative; }
:root[data-theme="dark"] .tool-card .t-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 22%, transparent));
}
:root[data-theme="dark"] .tool-card .t-head .tool-tag {
  background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--cl);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
}
:root[data-theme="dark"] .tool-card .t-body { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, var(--surface)), var(--surface) 40%); }
:root[data-theme="dark"] .split-media { position: relative; border: 1px solid var(--hairline); }
:root[data-theme="dark"] .split-media img { filter: saturate(.62) brightness(.82) contrast(1.06); }
:root[data-theme="dark"] .split-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(21,23,27,.05), rgba(21,23,27,.38));
}

/* ---------- REAL SCREENSHOT BAND (whats-inside) ---------- */
.real-shot .sub { max-width: 62ch; }
.shot-frame {
  margin: 28px 0 0; padding: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--hairline); background: var(--surface);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.06);
}
.shot-bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: var(--stage); border-bottom: 1px solid var(--hairline);
}
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--hairline); display: block; }
.shot-bar span {
  margin-left: auto; margin-right: auto; font-size: 12px; color: var(--muted);
  letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
}
.shot-frame img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) {
  .shot-frame { border-radius: 10px; }
  .shot-bar span { display: none; }
}

/* ---------- STAGE (dark studio band behind the real screenshot) ----------
   A lit cyclorama in gradients, not an image: cool slate wall fading through
   mist to a pale floor, key light upper-left. It exists for one reason --
   the app screenshot is a white sheet, and on a white page it floats with
   nothing to cast a shadow onto. Redefined for dark mode rather than left to
   the light values, so the band is the darkest thing on a dark page too and
   the screenshot stays the brightest. Source PNGs of the same backdrop live
   in C:\Dev\brand-assets\backdrop if a flat image is ever needed. */
.stage {
  background-color: #E9F1F9;
  background-image:
    radial-gradient(60% 45% at 20% 28%, rgba(207,218,232,0.55) 0%, rgba(207,218,232,0) 70%),
    radial-gradient(55% 30% at 38% 78%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #5B6878 0%, #3F4854 18%, #6B7785 34%, #C9D3DE 46%, #E9F1F9 58%, #E9F1F9 100%);
}
/* The band carries its own light/dark type colours: the top half is dark in
   BOTH themes, so these cannot come from --ink. */
.stage .section-eyebrow { color: rgba(243,246,250,0.72); }
.stage h2 { color: #F3F6FA; }
.stage .sub { color: rgba(243,246,250,0.82); }
.stage .shot-frame {
  box-shadow: 0 40px 80px -30px rgba(20,28,40,0.45), 0 2px 10px rgba(0,0,0,0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stage {
    background-color: #12151A;
    background-image:
      radial-gradient(60% 45% at 20% 28%, rgba(110,130,160,0.32) 0%, rgba(110,130,160,0) 70%),
      linear-gradient(180deg, #4A5666 0%, #2C333D 18%, #262C34 40%, #15181D 60%, #12151A 100%);
  }
}
:root[data-theme="dark"] .stage {
  background-color: #12151A;
  background-image:
    radial-gradient(60% 45% at 20% 28%, rgba(110,130,160,0.32) 0%, rgba(110,130,160,0) 70%),
    linear-gradient(180deg, #4A5666 0%, #2C333D 18%, #262C34 40%, #15181D 60%, #12151A 100%);
}

/* The band is much taller than it is wide on a phone, so a horizon fixed at
   46% of the height lands in the middle of the paragraph -- pale type on a
   pale floor. The wall is measured from the TOP in px here instead, so it
   always clears the heading and sub no matter how many lines they wrap to,
   and the floor only starts under the frame. */
@media (max-width: 700px) {
  .stage {
    background-image:
      radial-gradient(70% 22% at 20% 90px, rgba(207,218,232,0.5) 0%, rgba(207,218,232,0) 70%),
      linear-gradient(180deg, #5B6878 0px, #3F4854 120px, #4C5765 360px, #8E9AA8 480px, #DCE6F0 560px, #E9F1F9 620px, #E9F1F9 100%);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .stage {
      background-image:
        radial-gradient(70% 22% at 20% 90px, rgba(110,130,160,0.3) 0%, rgba(110,130,160,0) 70%),
        linear-gradient(180deg, #4A5666 0px, #2C333D 120px, #272E37 360px, #20252C 480px, #171A20 560px, #12151A 620px, #12151A 100%);
    }
  }
  :root[data-theme="dark"] .stage {
    background-image:
      radial-gradient(70% 22% at 20% 90px, rgba(110,130,160,0.3) 0%, rgba(110,130,160,0) 70%),
      linear-gradient(180deg, #4A5666 0px, #2C333D 120px, #272E37 360px, #20252C 480px, #171A20 560px, #12151A 620px, #12151A 100%);
  }
}