/* ============================================================
   Torri marketing — v2 design system
   Warm paper aesthetic: ivory light mode, warm near-black dark
   mode, light-weight serif display, hairline rules, restrained
   motion. Inspired by editorial product sites (claude.com).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..600;1,8..60,300..600&family=Inter:wght@400;500;600;700;800&display=swap');
/* App fonts — the hero graphic mirrors the real app's type (IBM Plex Sans / Mono, Cormorant for the greeting). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ---------- Tokens ---------- */

:root {
  /* warm neutral ramp */
  --paper:      #faf9f5;
  --paper-tint: #f0eee6;
  --surface:    #ffffff;
  --ink:        #141413;
  --ink-2:      #50504b;
  --ink-3:      #87867f;
  --line:       rgba(20, 20, 19, 0.14);
  --line-soft:  rgba(20, 20, 19, 0.08);

  /* brand */
  --teal:      #00a486;
  --teal-deep: #007f68;
  --vic-blue:  #4582db;
  --vic-deep:  #2f63b4;

  /* support tints (card washes) */
  --wash-oat:     #f1ead9;
  --wash-rose:    #f4e3dd;
  --wash-sky:     #e3ebf4;
  --wash-cactus:  #e2ebe6;
  --wash-heather: #e9e8f1;
  --wash-green:   #e5edda;

  /* severity */
  --sev-high: #c4533e;
  --sev-med:  #b07d2e;
  --sev-info: #87867f;

  --clock-track: rgba(20, 20, 19, 0.1);
  --clock-fill:  var(--teal);

  --cta-glow: color-mix(in srgb, var(--teal) 14%, transparent);

  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --shadow-frame: 0 1px 2px rgba(20, 20, 19, 0.05), 0 24px 60px -18px rgba(20, 20, 19, 0.18);
  --shadow-card:  0 1px 2px rgba(20, 20, 19, 0.04), 0 14px 36px -18px rgba(20, 20, 19, 0.14);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --maxw: 1140px;
  --maxw-wide: 1240px;
  --maxw-narrow: 760px;

  --nav-h: 66px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper:      #141413;
    --paper-tint: #1a1915;
    --surface:    #201f1d;
    --ink:        #faf9f5;
    --ink-2:      #c2c0b6;
    --ink-3:      #87867f;
    --line:       rgba(250, 249, 245, 0.16);
    --line-soft:  rgba(250, 249, 245, 0.09);

    --teal:      #1fbf9e;
    --teal-deep: #4cd2b4;
    --vic-blue:  #6a9fe8;
    --vic-deep:  #8fb6ee;

    --wash-oat:     #201e19;
    --wash-rose:    #211d1b;
    --wash-sky:     #1b1e21;
    --wash-cactus:  #1a201c;
    --wash-heather: #1e1c22;
    --wash-green:   #1d201a;

    --sev-high: #e0735c;
    --sev-med:  #d9a651;
    --sev-info: #9c9a92;

    --clock-track: rgba(250, 249, 245, 0.12);

    --cta-glow: color-mix(in srgb, var(--teal) 17%, transparent);

    --shadow-frame: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 60px -18px rgba(0, 0, 0, 0.55);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 36px -18px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --paper:      #141413;
  --paper-tint: #1a1915;
  --surface:    #201f1d;
  --ink:        #faf9f5;
  --ink-2:      #c2c0b6;
  --ink-3:      #87867f;
  --line:       rgba(250, 249, 245, 0.16);
  --line-soft:  rgba(250, 249, 245, 0.09);

  --teal:      #1fbf9e;
  --teal-deep: #4cd2b4;
  --vic-blue:  #6a9fe8;
  --vic-deep:  #8fb6ee;

  --wash-oat:     #201e19;
  --wash-rose:    #211d1b;
  --wash-sky:     #1b1e21;
  --wash-cactus:  #1a201c;
  --wash-heather: #1e1c22;
  --wash-green:   #1d201a;

  --sev-high: #e0735c;
  --sev-med:  #d9a651;
  --sev-info: #9c9a92;

  --clock-track: rgba(250, 249, 245, 0.12);

  --cta-glow: color-mix(in srgb, var(--teal) 17%, transparent);

  --shadow-frame: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 60px -18px rgba(0, 0, 0, 0.55);
  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 36px -18px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body {
  transition: background-color 0.35s ease, color 0.35s ease;
}

::selection { background: var(--teal); color: #fff; }

a { color: inherit; }

img, video { display: block; max-width: 100%; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4.5vw, 40px);
}

.wrap--wide   { max-width: var(--maxw-wide); }
.wrap--narrow { max-width: var(--maxw-narrow); }
/* Pricing tiers break out wider than the rest of the site so four plan
   cards keep a comfortable width. The section header stays capped by
   .section__head, so only the card grid widens. */
.wrap--tiers  { max-width: 1400px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Type ---------- */

.eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section__title {
  margin: 14px 0 0;
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.section__title--sm { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.12; }

.section__title em {
  font-style: italic;
  font-weight: 350;
}

/* Bold-sans line inside a serif title — weight-contrast pairing */
.t-sans {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.94em;
  letter-spacing: -0.035em;
}

/* Masked line reveal for titles (added by JS; reduced-motion skips it) */
.has-lines .tline {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.has-lines .tline__inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 1s var(--ease);
  will-change: transform;
}
.reveal.is-in .tline__inner { transform: none; }

.section__lede {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.22s var(--ease),
              box-shadow 0.22s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn__arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--teal-deep); color: #fff; }
:root[data-theme='dark'] .btn--ink:hover,
:root:not([data-theme='light']) .btn--ink:hover { color: #0d0d0c; }

.btn--ghost {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover { background: var(--paper-tint); border-color: var(--ink-3); }

.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--paper-tint); }

.btn--ghost-paper {
  border-color: color-mix(in srgb, var(--paper) 35%, transparent);
  color: var(--paper);
  background: transparent;
}
.btn--ghost-paper:hover { border-color: var(--paper); }

.btn--sm { padding: 8px 16px; font-size: 14px; }
.btn--lg { padding: 14px 28px; font-size: 16px; }
.btn--block { width: 100%; justify-content: center; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled,
.nav.is-open {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--nav-h);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.nav__logo { width: 26px; height: 26px; }

.nav__wordmark {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 450;
  letter-spacing: 0.01em;
}

.nav__links {
  display: flex;
  gap: 4px;
  margin-left: 12px;
}

.nav__links a {
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav__links a:hover { color: var(--ink); background: var(--paper-tint); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.nav__login {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav__login:hover { color: var(--ink); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s var(--ease);
}
.theme-toggle:hover { background: var(--paper-tint); color: var(--ink); transform: rotate(15deg); }

.theme-toggle__moon { display: none; }
:root[data-theme='dark'] .theme-toggle__sun { display: none; }
:root[data-theme='dark'] .theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle__sun { display: none; }
  :root:not([data-theme='light']) .theme-toggle__moon { display: block; }
}

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s ease;
}
.nav.is-open .nav__burger span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav.is-open .nav__burger span:last-child  { transform: translateY(-3.3px) rotate(-45deg); }

/* Full-page mobile menu — sibling of .nav (a backdrop-filtered header
   would otherwise become the containing block and clip the overlay). */
.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: calc(var(--nav-h) + 18px) clamp(20px, 4.5vw, 40px) 30px;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease, background-color 0.35s ease;
}

.menu__links {
  display: flex;
  flex-direction: column;
}

.menu__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(16px, 2.6vh, 24px) 2px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-serif);
  font-weight: 380;
  font-size: clamp(32px, 8.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.menu__links a .menu__arrow {
  font-size: 0.55em;
  color: var(--ink-3);
  transition: transform 0.3s var(--ease), color 0.3s ease;
}
.menu__links a:active .menu__arrow,
.menu__links a:hover .menu__arrow { transform: translateX(6px); color: var(--teal); }

.menu__cta {
  display: grid;
  gap: 10px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.menu__note {
  margin: 4px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
}

.tier__note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
}

.nav.is-open + .menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav.is-open + .menu .menu__links a {
  opacity: 1;
  transform: none;
  transition-delay: calc(70ms * var(--i, 0) + 60ms);
}
.nav.is-open + .menu .menu__cta {
  opacity: 1;
  transform: none;
  transition-delay: calc(70ms * var(--i, 5) + 60ms);
}

/* Ask AI about Torri — shown in the full-screen mobile menu, above the CTA */
.menu__ai {
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.menu__ai h5 {
  margin: 0 0 13px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.menu__ai-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.menu__ai-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
}
.menu__ai-links a:active { border-color: var(--teal); }
.menu__ai-links img { width: 24px; height: 24px; display: block; }
.nav.is-open + .menu .menu__ai {
  opacity: 1;
  transform: none;
  transition-delay: 0.42s;
}

@media (max-width: 920px) {
  .nav__links, .nav__actions .nav__login, .nav__actions .btn { display: none; }
  .nav__actions { margin-left: auto; }
  .nav__burger { display: flex; margin-left: 4px; }
  .menu { display: flex; }
  .nav.is-open {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu__links a, .menu__cta { transition: opacity 0.2s ease; transform: none; }
}

/* ---------- Sections ---------- */

.section { padding: clamp(72px, 9vw, 120px) 0; }

.section--tint { background: var(--paper-tint); transition: background-color 0.35s ease; }

/* A faint oversized product logo bleeding off one edge, behind the content.
   overflow-x clip keeps the bleed from widening the page; the wrap sits above
   it (its own stacking context via position) so text is never dimmed. */
.section--splash { position: relative; overflow-x: clip; }
.section--splash > .wrap { position: relative; z-index: 1; }
.splash {
  position: absolute;
  top: 50%;
  z-index: 0;
  width: clamp(340px, 42vw, 620px);
  height: auto;
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}
/* Sit behind the text column, pulled in off the edge toward the centre. */
.splash--right { right: 0; transform: translate(-12%, -50%); }
.splash--left  { left: 0;  transform: translate(12%, -50%); }
/* The cropped "W" mark is a single glyph, so it can carry more size than the
   full multi-part logo without crowding. */
.splash--word { width: clamp(400px, 48vw, 700px); }
:root:not([data-theme='light']) .splash,
:root[data-theme='dark'] .splash { opacity: 0.07; }

/* On narrow screens the split stacks and the splash would sit over the text;
   fade it further and let it drift off-edge so it stays a texture, not a blocker. */
@media (max-width: 880px) {
  .splash { width: clamp(260px, 60vw, 360px); opacity: 0.04; }
  .splash--word { width: clamp(300px, 66vw, 420px); }
  .splash--right { transform: translate(30%, -50%); }
  .splash--left  { transform: translate(-30%, -50%); }
  :root:not([data-theme='light']) .splash,
  :root[data-theme='dark'] .splash { opacity: 0.055; }
}

.section--pad-top-0 { padding-top: 0; }

/* First section under the fixed nav on interior pages */
.section--first { padding-top: calc(var(--nav-h) + clamp(36px, 6vw, 64px)); }

.section__head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); }

.section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section__head--center .section__lede { margin-left: auto; margin-right: auto; }

/* ---------- Reveal & load animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

[data-load] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.is-loaded [data-load] { opacity: 1; transform: none; }
.is-loaded [data-load='1'] { transition-delay: 0.05s; }
.is-loaded [data-load='2'] { transition-delay: 0.14s; }
.is-loaded [data-load='3'] { transition-delay: 0.24s; }
.is-loaded [data-load='4'] { transition-delay: 0.36s; }
.is-loaded [data-load='5'] { transition-delay: 0.46s; }
.is-loaded [data-load='6'] { transition-delay: 0.58s; }
.is-loaded [data-load='7'] { transition-delay: 0.72s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, [data-load] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Hero ---------- */

.hero {
  padding: calc(var(--nav-h) + clamp(48px, 8vw, 96px)) 0 clamp(56px, 7vw, 88px);
  text-align: center;
}

.hero__eyebrow { color: var(--teal); }
:root[data-theme='dark'] .hero__eyebrow { color: var(--teal); }

.hero__title {
  margin: 22px 0 0;
  text-wrap: balance;
  font-family: var(--font-serif);
  font-weight: 330;
  font-size: clamp(46px, 8.4vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

/* inline-block so the two title spans flow on one line on desktop (wrapping
   only if they must) while the reveal transform still applies; block on mobile
   keeps the intended break after "for". */
.hero__line { display: inline; }
@media (max-width: 720px) { .hero__line { display: block; } }

.hero__title em { font-style: italic; font-weight: 330; }

.hero__sub {
  max-width: 56ch;
  margin: 26px auto 0;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.hero__note {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

/* Hero mode switch — Contract review ⇄ Strata reports. CSS-only: hidden radios
   drive the copy swap and the sliding thumb via :has(). */
.hero-switch {
  position: relative;
  display: inline-flex;
  padding: 4px;
  margin: 0 0 24px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent);
  /* Solid theme-aware base (not teal-over-transparent) so the --surface thumb
     stays distinct from the track in dark mode, where a black shadow vanishes. */
  background: color-mix(in srgb, var(--teal) 8%, var(--paper-tint));
}
/* Dark: the teal-into-paper-tint mix lands on a muddy olive. Drop to a neutral
   tint so only the border + active-label teal carry the brand. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hero-switch { background: var(--paper-tint); }
}
:root[data-theme='dark'] .hero-switch { background: var(--paper-tint); }
.hero-switch__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hero-switch__opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 154px;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.hero-switch__thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--line);
  transition: transform 0.24s var(--ease);
}
.hero-switch:has(#hero-mode-contract:checked) label[for='hero-mode-contract'],
.hero-switch:has(#hero-mode-strata:checked) label[for='hero-mode-strata'] { color: var(--teal); }
.hero:has(#hero-mode-strata:checked) .hero-switch__thumb { transform: translateX(100%); }
.hero-switch:has(.hero-switch__radio:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 30%, transparent);
}
/* Copy variants driven by the switch. Contract shows by default; strata swaps in. */
.hero__copy--strata { display: none; }
.hero:has(#hero-mode-strata:checked) .hero__copy--contract { display: none; }
.hero:has(#hero-mode-strata:checked) .hero__copy--strata { display: block; }
.hero__hl { color: var(--teal); }

/* Staggered fade-up for whichever copy is showing — on load and on every
   switch. Flipping display none→block re-runs these, so each toggle animates
   in with the same motion the rest of the page uses for [data-load]. */
.hero__copy > * { animation: heroCopyIn 0.6s var(--ease) both; }
.hero__copy > *:nth-child(1) { animation-delay: 0.06s; }
.hero__copy > *:nth-child(2) { animation-delay: 0.15s; }
.hero__copy > *:nth-child(3) { animation-delay: 0.24s; }

@keyframes heroCopyIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__copy > * { animation: none !important; }
}

@media (max-width: 420px) {
  .hero-switch__opt { min-width: 0; padding: 9px 15px; font-size: 13px; }
}

.hero__media { margin-top: clamp(48px, 6vw, 72px); }

/* ---------- Word-template preview mock ----------
   Mirrors the in-app letter editor's markup view: the firm's own letter with
   each insertion tinted by kind — teal for a value filled from the review,
   amber for a spot left in the firm's own words, violet for a conditional
   passage that only appears when it applies. */
.docx-mock {
  --dm-violet: oklch(0.64 0.18 295);
  position: relative;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  /* A hair darker than paper-tint (toward black, so it darkens in both themes)
     so the render's frame reads as distinct from the paper-tint behind it. */
  background: color-mix(in srgb, var(--paper-tint) 94%, #000);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.docx-mock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 2px 14px;
}
.docx-mock__file { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.docx-mock__wmark { width: 18px; height: 18px; flex: none; }
.docx-mock__legend { display: inline-flex; gap: 12px; }
.dm-key { position: relative; padding-left: 16px; font-size: 11px; color: var(--ink-3); }
.dm-key::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.dm-key--fill::before { background: color-mix(in srgb, var(--teal) 34%, transparent); }
.dm-key--own::before  { background: color-mix(in srgb, var(--sev-med) 36%, transparent); }
.dm-key--cond::before { background: color-mix(in srgb, var(--dm-violet) 34%, transparent); }

.docx-mock__page {
  position: relative;
  padding: 26px 30px 30px;
  border-radius: 3px;
  /* Always paper-white with dark ink, in both themes — it is a rendered Word
     document, and the tinted marks are tuned to read on white paper. */
  background: #fcfcfa;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.16), 0 12px 30px rgb(0 0 0 / 0.16);
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.9;
  color: #24231f;
}
.docx-mock__lh {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(20, 20, 19, 0.1);
  font-family: var(--font-sans);
}
.docx-mock__logo { width: 20px; height: 20px; flex: none; border-radius: 5px; background: linear-gradient(135deg, var(--teal), var(--vic-blue)); }
.docx-mock__lh strong { font-size: 14px; letter-spacing: -0.01em; }
.docx-mock__lh-sub { margin-left: auto; font-size: 10.5px; color: #6f6e66; }
.docx-mock__p { margin: 0 0 5px; }

/* The tinted insertions — same palette and shape as the editor's markup. */
.dm {
  border-radius: 3px;
  padding: 0.08em 0.28em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.dm-fill { background: color-mix(in srgb, var(--teal) 20%, transparent); }
.dm-on   { background: color-mix(in srgb, var(--teal) 44%, transparent); }
.dm-own  { background: color-mix(in srgb, var(--sev-med) 22%, transparent); }
.dm-cond {
  padding-left: 0.4em;
  background: color-mix(in srgb, var(--dm-violet) 16%, transparent);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--dm-violet) 60%, transparent);
}

/* The fill inspector under the page — mirrors the editor's card, with a rail in
   the colour of the selected (deep-teal) insertion. In flow, so it never floats
   loose in a corner or overlaps the letter. */
.docx-mock__panel {
  display: flex;
  align-items: stretch;
  gap: 11px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.docx-mock__panel-rail {
  flex: none;
  width: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--teal) 60%, transparent);
}
.docx-mock__panel-txt { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-sans); }
.docx-mock__panel-lbl { font-size: 10.5px; color: var(--ink-3); }
.docx-mock__panel-val { font-size: 12.5px; font-weight: 600; color: var(--ink); }

/* ---------- Product frame ---------- */

.frame {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-frame);
  overflow: hidden;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.frame__bar {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.frame__bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}

.frame__video { width: 100%; height: auto; }

.frame--plain { border-radius: var(--r-lg); }

/* ---------- Statline ---------- */

.statline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: clamp(44px, 6vw, 64px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.statline__item {
  padding: 18px 18px 4px;
  text-align: left;
  border-left: 1px solid var(--line-soft);
}
.statline__item:first-child { border-left: 0; padding-left: 0; }

.statline dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.statline dd {
  margin: 6px 0 0;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

@media (max-width: 760px) {
  .statline { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .statline__item:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ---------- Marquee ---------- */

.marquee {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
  overflow: hidden;
}

.marquee__label {
  flex: 0 0 auto;
  padding: 13px 22px;
  border-right: 1px solid var(--line-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--paper);
  z-index: 1;
}

.marquee__viewport {
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  padding: 13px 0;
  animation: marquee 70s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__track span {
  font-size: 13.5px;
  color: var(--ink-2);
  white-space: nowrap;
}
.marquee__track i { color: var(--ink-3); font-style: normal; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- Steps ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(36px, 5vw, 56px) 0;
  border-top: 1px solid var(--line-soft);
}

.step__num {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--teal);
}

.step__text h3 {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(21px, 2.3vw, 26px);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.step__text p {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}

@media (max-width: 820px) {
  .step { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Mock components ---------- */

.mock {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: background-color 0.35s ease;
}
.mock__body {
  padding: 20px;
  display: grid;
  gap: 16px;
}

.mock-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--paper);
}

.mock-file__badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--sev-high);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.mock-file__meta { min-width: 0; }
.mock-file__meta strong { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-file__meta small { font-size: 12px; color: var(--ink-3); }

.mock-file__check {
  margin-left: auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
}

.mock-progress {
  height: 5px;
  border-radius: 99px;
  background: var(--line-soft);
  overflow: hidden;
}
.mock-progress span {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: 99px;
  background: var(--teal);
  animation: progress 2.8s var(--ease) infinite alternate;
}
@keyframes progress {
  from { width: 38%; }
  to   { width: 86%; }
}

.mock-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mock-chips span {
  padding: 5px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  font-size: 12px;
  color: var(--ink-2);
}

.mock-counts { display: flex; gap: 10px; }
.mock-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
}
.mock-count strong { font-size: 17px; font-weight: 600; }
.mock-count--high { background: color-mix(in srgb, var(--sev-high) 12%, transparent); color: var(--sev-high); }
.mock-count--med  { background: color-mix(in srgb, var(--sev-med) 14%, transparent);  color: var(--sev-med); }
.mock-count--info { background: color-mix(in srgb, var(--sev-info) 14%, transparent); color: var(--sev-info); }

.sev {
  display: inline-block;
  padding: 2.5px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sev--high { background: color-mix(in srgb, var(--sev-high) 13%, transparent); color: var(--sev-high); }
.sev--med  { background: color-mix(in srgb, var(--sev-med) 15%, transparent);  color: var(--sev-med); }
.sev--info { background: color-mix(in srgb, var(--sev-info) 15%, transparent); color: var(--sev-info); }

.mock-finding {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 15px 16px;
}
.mock-finding__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}
.mock-finding p {
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  font-style: italic;
}
.mock-finding small { font-size: 12px; color: var(--teal); font-weight: 500; }

.mock--send .mock__body { grid-template-columns: auto 1fr; align-items: center; }

.mock-pdf {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--paper);
  min-width: 132px;
}
.mock-pdf__tag {
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--sev-high);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}
.mock-pdf__lines { display: grid; gap: 5px; width: 100%; }
.mock-pdf__lines span { height: 5px; border-radius: 99px; background: var(--line-soft); }
.mock-pdf small { font-size: 11.5px; color: var(--ink-3); }

.mock-mail { display: grid; gap: 8px; }
.mock-mail__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.mock-mail__row span { width: 22px; color: var(--ink-3); font-size: 12px; }
.mock-mail__row em {
  font-style: normal;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.mock-mail__send {
  justify-self: start;
  margin-top: 4px;
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 560px) {
  .mock--send .mock__body { grid-template-columns: 1fr; }
}

/* ---------- States (NSW / VIC) ---------- */

.states {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 28px);
}

.state-card {
  position: relative;
  padding: clamp(26px, 3.4vw, 38px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background-color 0.35s ease;
}

.state-card:hover { transform: translateY(-4px); }

.state-card__head { display: flex; align-items: center; gap: 14px; }

.state-card__badge {
  padding: 5px 13px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.state-card--nsw .state-card__badge { background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal-deep); }
.state-card--vic .state-card__badge { background: color-mix(in srgb, var(--vic-blue) 15%, transparent); color: var(--vic-deep); }

.state-card h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(21px, 2.2vw, 25px);
}

.state-card__sub {
  margin: 14px 0 6px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.state-card__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.state-card__list li {
  position: relative;
  padding: 11px 0 11px 26px;
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
  line-height: 1.5;
}
.state-card__list li:first-child { border-top: 0; }

.state-card__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 17px;
  width: 12px;
  height: 7px;
  border-left: 1.8px solid var(--teal);
  border-bottom: 1.8px solid var(--teal);
  transform: rotate(-45deg);
}
.state-card--vic .state-card__list li::before {
  border-color: var(--vic-blue);
}

.state-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}
.state-card__link span { transition: transform 0.25s var(--ease); }
.state-card__link:hover span { transform: translateX(4px); }
.state-card--nsw .state-card__link:hover { color: var(--teal-deep); }
.state-card--vic .state-card__link:hover { color: var(--vic-deep); }

@media (max-width: 820px) {
  .states { grid-template-columns: 1fr; }
}

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

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}

.split--reverse .split__media { order: 2; }
.split--reverse .split__text  { order: 1; }

.split--top { align-items: start; }

.ticks {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.ticks li {
  position: relative;
  padding: 10px 0 10px 30px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
  color: var(--ink-2);
}
.ticks li:first-child { border-top: 0; }

.ticks li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 17px;
  width: 13px;
  height: 7px;
  border-left: 1.8px solid var(--teal);
  border-bottom: 1.8px solid var(--teal);
  transform: rotate(-45deg);
}

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  /* Stacked on a phone, every split leads with its heading: the title
     introduces the graphic below it rather than trailing after it, whatever
     the desktop column order was. */
  .split__text  { order: -1; }
  .split__media { order: 0; }
  .split--reverse .split__text  { order: -1; }
  .split--reverse .split__media { order: 0; }
}

/* ---------- Chat mock ---------- */

.chat {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: background-color 0.35s ease;
}

.chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.chat__doc { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__pages { font-size: 12px; color: var(--ink-3); flex: 0 0 auto; }

.chat__body { display: grid; gap: 12px; padding: 20px 18px 22px; }

.chat__msg {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
}

.chat__msg--you {
  justify-self: end;
  background: var(--paper-tint);
  border-bottom-right-radius: 5px;
}

.chat__msg--torri {
  justify-self: start;
  background: color-mix(in srgb, var(--teal) 9%, transparent);
  border-bottom-left-radius: 5px;
}

.chat__msg--typing { color: var(--ink-2); }

.chat__dots { display: inline-flex; gap: 3px; margin-right: 8px; }
.chat__dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
  animation: chatdot 1.2s ease-in-out infinite;
}
.chat__dots span:nth-child(2) { animation-delay: 0.15s; }
.chat__dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatdot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- Feature grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.4vw, 24px);
}

.card {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.8vw, 30px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  transition: transform 0.4s var(--ease), background-color 0.35s ease;
}
.card:hover { transform: translateY(-4px); }

.card--wide { grid-column: span 7; }
.card--full { grid-column: 1 / -1; }

/* Cadastre / title-plan diagram visual — full-bleed map banner across the card top */
.card__visual--plan {
  display: block;
  position: relative;
  min-height: 0;
  padding: 0;
  margin: calc(clamp(22px, 2.8vw, 30px) * -1) calc(clamp(22px, 2.8vw, 30px) * -1) 4px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.card__visual--plan .plan {
  display: block;
  width: 100%;
  height: clamp(230px, 26vw, 320px);
  max-height: none;
  color: var(--ink-2);
}
.plan__tag {
  position: absolute;
  left: 16px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid var(--line-soft);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}
.plan__tag::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--teal);
}

.card--oat     { background: var(--wash-oat); }
.card--rose    { background: var(--wash-rose); }
.card--sky     { background: var(--wash-sky); }
.card--cactus  { background: var(--wash-cactus); }
.card--heather { background: var(--wash-heather); }
.card--green   { background: var(--wash-green); }

.card h3 {
  margin: 20px 0 0;
  font-family: var(--font-serif);
  font-weight: 420;
  font-size: 21px;
}

.card p {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.card__visual {
  flex: 1;
  display: grid;
  align-items: center;
  min-height: 150px;
}

@media (max-width: 820px) {
  .grid { grid-template-columns: 1fr; }
  .card, .card--wide { grid-column: auto; }
}

/* ---- shared mock panel detailing ---- */
.mockhead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.mockhead > svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.mockhead__meta { margin-left: auto; font-weight: 500; color: var(--ink-3); }
.mockpill {
  margin-left: auto;
  padding: 2.5px 9px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--teal) 15%, transparent);
  color: var(--teal);
}

/* key-value mock */
.kv {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.kv__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.kv__row span { color: var(--ink-3); }
.kv__row strong { font-weight: 500; font-variant-numeric: tabular-nums; }

/* triage mock */
.triage {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.triage__body { display: grid; gap: 15px; padding: 16px; }
.triage__row {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 12px;
}
.triage__bar {
  height: 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
}
.triage__bar span { display: block; height: 100%; border-radius: 99px; background: var(--ink-3); }
.triage__row:nth-child(1) .triage__bar span { background: var(--sev-high); }
.triage__row:nth-child(2) .triage__bar span { background: var(--sev-med); }
.triage__row strong { font-size: 15px; font-variant-numeric: tabular-nums; }

/* annexure detection mock */
.tabs {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.tabs__body { display: grid; gap: 8px; padding: 12px; }
.tabs__tab {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 13px;
  font-weight: 500;
}
.tabs__tab > svg { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.tabs__state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.tabs__state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.tabs__tab.is-active { border-color: color-mix(in srgb, var(--teal) 55%, transparent); background: color-mix(in srgb, var(--teal) 7%, var(--surface)); }
.tabs__tab.is-active > svg,
.tabs__tab.is-active .tabs__state { color: var(--teal); }
.tabs__tab.is-active .tabs__state::before { background: var(--teal); }
.tabs__tab.is-muted { opacity: 0.5; }

/* ask mock */
.ask { display: grid; gap: 10px; width: 100%; }
.ask__msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
}
.ask__msg--you { justify-self: end; background: var(--surface); border: 1px solid var(--line-soft); border-bottom-right-radius: 4px; }
.ask__msg--torri { justify-self: start; background: color-mix(in srgb, var(--teal) 10%, var(--surface)); border-bottom-left-radius: 4px; }
.ask__input {
  display: flex;
  align-items: center;
  margin-top: 4px;
  padding: 11px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-3);
}
.ask__caret {
  width: 1.5px;
  height: 14px;
  margin-left: 3px;
  background: var(--teal);
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* cited-finding mock */
.cite { display: grid; gap: 12px; width: 100%; }
.cite__finding {
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.cite__head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.cite__finding p { margin: 9px 0 0; font-size: 13px; font-style: italic; line-height: 1.55; color: var(--ink-2); }
.cite__source {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-size: 12.5px;
}
.cite__source > svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.cite__doc { font-weight: 600; }
.cite__ref { color: var(--ink-3); }
.cite__open {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  font-weight: 600;
  color: var(--teal);
  white-space: nowrap;
}

/* brand report mock */
.brandmock {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.brandmock__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--teal) 6%, var(--surface));
  font-size: 13.5px;
  font-weight: 600;
}
.brandmock__logo {
  width: 20px; height: 20px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--teal), var(--vic-blue));
  flex: none;
}
.brandmock__crest { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.brandmock__body { padding: 15px 16px; display: grid; gap: 11px; }
.brandmock__title { font-family: var(--font-serif); font-size: 17px; }
.brandmock__sum { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); }
.brandmock__sum .sev { flex: none; }
.brandmock__lines { display: grid; gap: 6px; }
.brandmock__lines span { height: 6px; border-radius: 99px; background: var(--line-soft); }
.brandmock__foot {
  padding: 11px 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--ink-3);
}

/* clock mock */
.clock { position: relative; display: grid; place-items: center; }
.clock::before {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--teal) 20%, transparent), transparent 68%);
}
.clock svg { grid-area: 1 / 1; position: relative; }
.clock__num {
  grid-area: 1 / 1;
  position: relative;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 450;
}
.clock__hand { animation: clocksweep 4s var(--ease) infinite alternate; }
@keyframes clocksweep {
  from { stroke-dashoffset: 110; }
  to   { stroke-dashoffset: 44; }
}

/* ---------- Smokeball ledger ---------- */

.ledger {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: background-color 0.35s ease;
}

.ledger__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  font-weight: 600;
}
.ledger__head em {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.ledger__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.ledger__row:first-of-type { border-top: 0; }
.ledger__row span { color: var(--ink-3); flex: 0 0 auto; }
.ledger__row strong { font-weight: 500; text-align: right; }

/* ---------- Pricing tiers ---------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2.4vw, 24px);
  align-items: stretch;
}
/* Pricing page only (the grid that carries strata drawers): start, not stretch,
   so opening one drawer grows only that column instead of stretching every
   card; a height floor keeps the closed cards level. The homepage tiers have no
   drawers and keep the plain stretch above. */
.tiers:has(.tier-stack) { align-items: start; --tier-floor: 660px; }
/* The homepage teaser carries shorter plan copy than the /pricing page, so its
   cards need a lower common floor. */
#pricing .tiers:has(.tier-stack) { --tier-floor: 590px; }
.tiers:has(.tier-stack) .tier { min-height: var(--tier-floor); }
/* While a strata drawer is open (JS sets .has-open, and closes any other so
   only one is ever open), reserve one open drawer's height on the grid. The
   close-one/open-another swap — both drawers momentarily at half height — then
   can't shrink the grid and bounce the content below it. Off when all closed,
   so there's no empty gap; transitioned so it grows and shrinks smoothly with
   the drawer. The +330px is one open drawer; nudge if a gap or bounce shows. */
.tiers:has(.tier-stack) { transition: min-height 0.5s var(--ease); }
.tiers.has-open { min-height: calc(var(--tier-floor) + 330px); }
/* In the narrow 4-column band the cards are naturally taller than the floor;
   drop it so they aren't clipped, and it's moot once they stack at 880px. */
@media (max-width: 1080px) {
  .tiers:has(.tier-stack) .tier { min-height: 0; }
  .tiers.has-open { min-height: 0; }
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--surface);
  transition: transform 0.2s ease-out, box-shadow 0.25s var(--ease), background-color 0.35s ease;
}

.tier--featured {
  border-color: var(--ink);
  border-width: 2px;
  box-shadow: var(--shadow-card);
}

.tier__tag {
  position: absolute;
  top: -12px;
  left: 26px;
  padding: 4px 13px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.tier__name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.tier__price {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.tier__price em {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 380;
  font-size: 44px;
  line-height: 1;
}
.tier__price span { font-size: 14px; color: var(--ink-3); }

.tier__claim {
  margin: 14px 0 4px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.tier__plus {
  margin: 14px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.tier__list {
  list-style: none;
  margin: 10px 0 24px;
  padding: 0;
  flex: 1;
}
.tier__list li {
  position: relative;
  padding: 9px 0 9px 26px;
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
}
.tier__list li:first-child { border-top: 0; }
.tier__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 15px;
  width: 12px;
  height: 7px;
  border-left: 1.8px solid var(--teal);
  border-bottom: 1.8px solid var(--teal);
  transform: rotate(-45deg);
}

.tiers__note {
  margin: 34px auto 0;
  max-width: 56ch;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-3);
}

@media (max-width: 880px) {
  .tiers { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ---------- Strata add-on drawer ---------- */

/* A second card tucked behind the plan card, peeking at the base. The plan
   card (z-index 2, opaque) hides its top edge, so closed you see only a
   narrower lip — "there is another card back here". A hidden checkbox (no JS)
   slides it clear of the card and widens it to full on click, while the body
   grows via grid-template-rows, so the whole bordered card reveals itself. */
.tier-stack {
  position: relative;
  display: flex;
  flex-direction: column;
}
.tier-stack > .tier {
  position: relative;
  z-index: 2;
  flex: 1;
}

.strata {
  position: relative;
  z-index: 1;
  margin: -15px 16px 0;                  /* tuck behind the card; inset = narrower card behind */
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  /* Hidden until you hover the plan — Pro's (.strata--persist) shows by default
     as the sample. Its space stays reserved, so revealing never reflows the
     page; it just slides down from behind the card and fades in. */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px);
  transition: opacity 0.35s var(--ease),
              transform 0.35s var(--ease),
              margin 0.55s cubic-bezier(0.34, 1.4, 0.5, 1),
              box-shadow 0.3s var(--ease);
}
/* The only hover on this row: the drawer itself lifts and deepens its shadow,
   inviting the click. The plan cards no longer move on hover. Higher
   specificity than the reveal rule below so the lift wins once it's shown. */
.tier-stack > .strata:not(:has(.strata__toggle:checked)):hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -22px color-mix(in srgb, var(--teal) 42%, rgba(20, 20, 19, 0.28));
  border-color: color-mix(in srgb, var(--teal) 30%, var(--line-soft));
}
.tier-stack:hover > .strata,
.strata--persist,
.strata:has(.strata__toggle:checked) {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Open: drop clear of the card and widen to full so the whole border shows. */
.strata:has(.strata__toggle:checked) {
  margin: 12px 0 0;
  box-shadow: var(--shadow-frame);
}

.strata__toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.strata__trigger {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 23px 18px 15px;               /* top padding clears the tucked edge */
  cursor: pointer;
  user-select: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  transition: padding 0.55s var(--ease);
}
.strata:has(.strata__toggle:checked) .strata__trigger { padding-top: 16px; }
.strata__toggle:focus-visible ~ .strata__trigger {
  outline: 2px solid var(--teal);
  outline-offset: -4px;
  border-radius: var(--r-lg);
}

.strata__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  color: var(--teal-deep);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.strata__ico svg { width: 18px; height: 18px; }
/* Open: the tile fills in, marking the add-on as active. */
.strata:has(.strata__toggle:checked) .strata__ico {
  background: var(--teal);
  color: #fff;
}

.strata__title { flex: 1; letter-spacing: -0.01em; }

.strata__chev {
  flex: none;
  width: 17px; height: 17px;
  color: var(--ink-3);
  transition: transform 0.45s var(--ease), color 0.3s var(--ease);
}
.strata:has(.strata__toggle:checked) .strata__chev { transform: rotate(180deg); color: var(--teal-deep); }

.strata__drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.strata:has(.strata__toggle:checked) .strata__drawer { grid-template-rows: 1fr; }
.strata__inner { overflow: hidden; min-height: 0; }
/* A hairline separates the add-on's detail from its trigger. It sits inside the
   collapsing grid, so it is clipped away with the body when the drawer closes. */
.strata__body { padding: 15px 20px 20px; border-top: 1px solid var(--line-soft); }

.strata__lede {
  margin: 0 0 15px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

.strata__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 11px;
}
.strata__list li {
  position: relative;
  padding-left: 25px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}
/* The site's own check-tick, matching the plan feature lists above. */
.strata__list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 4px;
  width: 11px; height: 6px;
  border-left: 1.9px solid var(--teal);
  border-bottom: 1.9px solid var(--teal);
  transform: rotate(-45deg);
}

.strata__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 15px;
}
.strata__price em {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.strata__price > span { font-size: 13px; color: var(--ink-3); }

/* Subtle by design — a soft teal-tinted outline, not a loud solid fill, so it
   reads as a quiet add-on next to the plan's own CTA. */
.btn--strata {
  background: transparent;
  color: var(--teal-deep);
  border: 1px solid color-mix(in srgb, var(--teal) 38%, transparent);
}
.btn--strata:hover {
  color: var(--teal-deep);
  background: color-mix(in srgb, var(--teal) 9%, transparent);
  border-color: var(--teal);
}

/* The body's rows fade and rise into place, staggered, as the drawer opens —
   so the content settles a beat after the card has slid down, rather than
   appearing fully formed. */
.strata__body > * {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.strata:has(.strata__toggle:checked) .strata__body > * {
  opacity: 1;
  transform: translateY(0);
}
.strata:has(.strata__toggle:checked) .strata__body > *:nth-child(1) { transition-delay: 0.12s; }
.strata:has(.strata__toggle:checked) .strata__body > *:nth-child(2) { transition-delay: 0.19s; }
.strata:has(.strata__toggle:checked) .strata__body > *:nth-child(3) { transition-delay: 0.26s; }
.strata:has(.strata__toggle:checked) .strata__body > *:nth-child(4) { transition-delay: 0.33s; }

@media (prefers-reduced-motion: reduce) {
  .strata, .strata__trigger, .strata__chev, .strata__drawer, .btn--strata { transition: none; }
  .strata__body > * { opacity: 1; transform: none; transition: none; }
}

/* Touch devices have no hover to reveal the strata add-on, so the Pro+/Max
   drawers never appeared at all. Show the collapsed drawer — its trigger bar —
   at rest; the existing tap-to-expand toggle then works as it does with a
   mouse. The drawer itself stays closed until tapped. */
@media (hover: none) {
  .strata {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

/* ---------- Trust list ---------- */

.trustlist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(24px, 4vw, 48px);
}

.trustlist__item {
  padding: 20px 0;
  border-top: 1px solid var(--line-soft);
}

.trustlist__item h4 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
}

.trustlist__item p {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

@media (max-width: 640px) {
  .trustlist { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line-soft); }

.faq details { border-bottom: 1px solid var(--line-soft); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 2px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal-deep); }

.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  background: var(--ink-3);
  transition: transform 0.3s var(--ease);
}
.faq__icon::before { width: 14px; height: 1.6px; transform: translate(-50%, -50%); }
.faq__icon::after  { width: 1.6px; height: 14px; transform: translate(-50%, -50%); }
.faq details[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq__icon::before { transform: translate(-50%, -50%) rotate(180deg); }

.faq details p {
  margin: 0;
  padding: 0 36px 22px 2px;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* When JS drives the accordion (.faq-js), fade the answer in with the
   height reveal, and flip the icon off .is-open so it reacts on the
   gesture rather than at animation end. The [open] rules above remain
   the no-JS fallback. */
html.faq-js .faq details > p {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
html.faq-js .faq details.is-open > p { opacity: 1; transform: none; }

html.faq-js .faq details[open] .faq__icon::before,
html.faq-js .faq details[open] .faq__icon::after { transform: translate(-50%, -50%); }
html.faq-js .faq details.is-open .faq__icon::after  { transform: translate(-50%, -50%) rotate(90deg); }
html.faq-js .faq details.is-open .faq__icon::before { transform: translate(-50%, -50%) rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  html.faq-js .faq details > p { transition: none; }
}

/* ---------- CTA ---------- */

.cta {
  position: relative;
  padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 64px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, var(--cta-glow), transparent 65%),
    var(--paper-tint);
  color: var(--ink);
  text-align: center;
  overflow: hidden;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal) 70%, transparent), transparent);
  pointer-events: none;
}

.cta > * { position: relative; }

.cta h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 340;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.012em;
}

.cta h2 em { font-style: italic; font-weight: 340; }

.cta p {
  margin: 18px 0 0;
  font-size: 16px;
  color: var(--ink-2);
}

.cta__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.cta__trust {
  margin: 26px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line-soft);
  padding: clamp(48px, 6vw, 72px) 0 36px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
}

.footer__brand p {
  margin: 16px 0 0;
  max-width: 30ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

.footer__contact {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}
.footer__contact:hover { color: var(--teal-deep); }

.footer__col h5 {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li + li { margin-top: 9px; }
.footer__col a {
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__col a:hover { color: var(--ink); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--ink-3);
}

.footer__bottom-links { display: inline-flex; gap: 18px; }
.footer__bottom a { color: var(--ink-3); text-decoration: none; }
.footer__bottom a:hover { color: var(--ink); }

@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* Ask AI about Torri — seeds AI assistants with our framing + site URL (GEO) */
.footer__ai { margin: 0 0 32px; }
.footer__ai h5 {
  margin: 0 0 11px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.footer__ai-links { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.footer__ai-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.footer__ai-links a:hover {
  border-color: var(--ink-3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.footer__ai-links img { width: 18px; height: 18px; display: block; }

/* ============================================================
   Interior marketing pages — components consumed by the partner
   Blade views (features tree, geo pillars, contact, pricing).
   Same warm-paper tokens; everything below inherits dark mode.
   ============================================================ */

.nav__links a.is-active { color: var(--ink); background: var(--paper-tint); }

/* ---------- Page scaffold ---------- */

.mk-page h1 {
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.07;
  letter-spacing: -0.012em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.mk-page h2 {
  font-family: var(--font-serif);
  font-weight: 380;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  margin: 52px 0 14px;
}

.mk-page h3 {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.mk-page p { color: var(--ink-2); line-height: 1.7; margin: 0 0 16px; }

.mk-body { max-width: 76ch; margin-inline: auto; text-align: center; }
.mk-body > :first-child { margin-top: 0; }

/* Centre the content column under the centred hero. Structured widgets
   (numbered steps, FAQ items, cards) keep their own left-aligned layout. */
.mk-step, .mk-faq__item, .mk-card { text-align: left; }

/* Headers stay centred; the prose paragraphs justify to flush edges.
   Scoped to direct children so step/card/FAQ paragraphs are untouched. */
.mk-body > p { text-align: justify; }

.mk-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 36px;
}
.mk-breadcrumb a { color: var(--ink-3); text-decoration: none; }
.mk-breadcrumb a:hover { color: var(--ink); }
.mk-breadcrumb span[aria-hidden] { opacity: 0.5; }

.mk-lede {
  font-size: clamp(17px, 2vw, 19px);
  color: var(--ink-2);
  line-height: 1.65;
}

.mk-hero { margin-bottom: clamp(48px, 7vw, 80px); text-align: center; }
.mk-hero__text h1 { margin: 0; }
.mk-hero .mk-lede { max-width: 62ch; margin: 22px auto 0; }
.mk-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; justify-content: center; }
.mk-hero__media { margin: 56px auto 0; max-width: 700px; text-align: left; }

/* ---------- Mock-UI panel (feature graphics) ---------- */

.mk-mock {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
}

/* Title-plan / cadastre diagram graphic (feature page + related previews) */
.mk-plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
  color: var(--ink-2);
}
.mk-plan__svg { width: 100%; height: auto; display: block; }
.mk-plan__cap { font-size: 12px; color: var(--ink-3); }

.mk-mock__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-3);
}

.mk-mock__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}

.mk-mock__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mk-mock__title { font-weight: 600; font-size: 14px; }
.mk-mock__quote { font-size: 13px; font-style: italic; color: var(--ink-2); line-height: 1.55; margin: 0; }
.mk-mock__meta { font-size: 12px; font-weight: 500; color: var(--teal); }

.mk-mock__sev {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.mk-mock__sev--high { background: color-mix(in srgb, var(--sev-high) 13%, transparent); color: var(--sev-high); }
.mk-mock__sev--med  { background: color-mix(in srgb, var(--sev-med) 15%, transparent);  color: var(--sev-med); }
.mk-mock__sev--info { background: color-mix(in srgb, var(--sev-info) 15%, transparent); color: var(--sev-info); }
.mk-mock__sev--ok   { background: color-mix(in srgb, var(--teal) 14%, transparent);     color: var(--teal-deep); }

.mk-mock__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-mock__chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  background: var(--paper);
}
.mk-mock__chip--ghost { opacity: 0.6; }

.mk-mock__row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.mk-mock__row .lbl {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  min-width: 58px;
}

.mk-mock__list { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.mk-mock__li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.mk-mock__tick {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 15%, transparent);
  color: var(--teal-deep);
  font-size: 11px;
  flex: none;
}
.mk-mock__tick--miss { background: color-mix(in srgb, var(--sev-high) 14%, transparent); color: var(--sev-high); }

.mk-mock__lines { display: flex; flex-direction: column; gap: 6px; }
.mk-mock__lines span { height: 6px; border-radius: 4px; background: var(--line-soft); display: block; }
.mk-mock__bar { height: 7px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.mk-mock__bar > span { display: block; height: 100%; width: 66%; border-radius: 999px; background: var(--teal); }
.mk-mock__arrow { align-self: center; color: var(--teal); }

/* ---------- Numbered prose steps ---------- */

.mk-steps { display: grid; gap: 14px; margin: 8px 0 16px; padding: 0; list-style: none; }
.mk-step {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.mk-step__num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 13%, transparent);
  color: var(--teal-deep);
  font-weight: 600;
  font-size: 14px;
}
.mk-step h3 { margin: 0 0 6px; }
.mk-step p { margin: 0; font-size: 14.5px; }

/* ---------- Inline FAQ (non-collapsing) ---------- */

/* .mk-faq also carries the .faq class, so the accordion styling and JS
   apply. Reset the group top-border (the h2 sits above) and the old
   flat-item padding so the .faq summary/details rules drive the layout. */
.mk-faq { margin-top: 8px; border-top: 0; }
.mk-faq__item { padding: 0; border-top: 0; }

/* ---------- Card grid (hub, related, regions) ---------- */

.mk-related { margin-top: clamp(40px, 6vw, 64px); text-align: center; }
.mk-related > h2 { margin-top: 0; }

.mk-group-lede {
  margin: -4px 0 24px;
  font-size: 15px;
  color: var(--ink-2);
}
.mk-group-lede a {
  color: var(--teal-deep);
  font-weight: 500;
  text-decoration: none;
}
.mk-group-lede a:hover { text-decoration: underline; }

.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.mk-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background-color 0.35s ease;
}
.mk-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.mk-card__preview {
  height: 250px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--paper-tint);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 0.35s ease;
}

.mk-card__preview .mk-mock {
  --mk-scale: 0.7;
  width: 340px;
  flex: none;
  transform: perspective(1200px) rotateX(6deg) rotateY(-14deg) rotate(0.5deg) scale(var(--mk-scale));
  transform-origin: center;
  box-shadow: 0 26px 34px -16px rgba(0, 0, 0, 0.22);
  transition: transform 0.35s var(--ease);
}
.mk-card:hover .mk-card__preview .mk-mock {
  transform: perspective(1200px) rotateX(4deg) rotateY(-10deg) scale(calc(var(--mk-scale) + 0.03));
}
.mk-card__preview--special-conditions .mk-mock { --mk-scale: 0.56; }
.mk-card__preview--section-32-vendor-statements .mk-mock { --mk-scale: 0.52; }

/* The strata mock carries the most content of any preview — two figures and two
   flag cards. Stacked as plain rows it ran tall and clipped top and bottom in
   the wide card's window. The two figures share a compact 2-up stat row (shorter
   than two rows, and it gives the card horizontal balance), and the preview uses
   a wider measure so the quotes wrap to fewer lines — a shorter card that fills
   the window without clipping. */
.mk-mock--strata .mk-mock__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-mock__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--paper-tint);
  border: 1px solid var(--line-soft);
}
.mk-mock__stat .lbl {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.mk-mock__stat strong { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.mk-card__preview .mk-mock--strata { width: 400px; --mk-scale: 0.73; }
/* The second flag card is hero-only; dropping it in the tile leaves the stat
   row and the headline risk, short enough to sit larger without clipping. */
.mk-card__preview .mk-mock--strata .mk-mock__card--hero-only { display: none; }

/* The cadastre plan graphic gets the same tilted-card preview treatment so it
   sits in the window like the others and isn't clipped vertically. */
.mk-card__preview .mk-plan {
  --mk-scale: 0.82;
  width: 330px;
  flex: none;
  transform: perspective(1200px) rotateX(6deg) rotateY(-14deg) rotate(0.5deg) scale(var(--mk-scale));
  transform-origin: center;
  box-shadow: 0 26px 34px -16px rgba(0, 0, 0, 0.22);
  transition: transform 0.35s var(--ease);
}
.mk-card:hover .mk-card__preview .mk-plan {
  transform: perspective(1200px) rotateX(4deg) rotateY(-10deg) scale(calc(var(--mk-scale) + 0.03));
}

/* The Word render is a full letter, so it gets the same tilted-card preview but
   zoomed further out to sit inside the 250px window without clipping. */
.mk-card__preview .docx-mock {
  --mk-scale: 0.54;
  /* Wide intrinsic width so the letter's text wraps at a broad measure — fewer
     lines, shorter overall — using the preview's horizontal room over vertical. */
  width: 560px;
  flex: none;
  transform: perspective(1200px) rotateX(6deg) rotateY(-14deg) rotate(0.5deg) scale(var(--mk-scale));
  transform-origin: center;
  box-shadow: 0 26px 34px -16px rgba(0, 0, 0, 0.22);
  transition: transform 0.35s var(--ease);
}
.mk-card:hover .mk-card__preview .docx-mock {
  transform: perspective(1200px) rotateX(4deg) rotateY(-10deg) scale(calc(var(--mk-scale) + 0.02));
}
/* The letter alone fills the card preview; the fill-inspector panel is hero-only. */
.mk-card__preview .docx-mock__panel { display: none; }

.mk-card__bd { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.mk-card__bd h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }

.mk-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mk-card__state {
  flex: none;
  margin-top: 1px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.mk-card__state--nsw { background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal-deep); }
.mk-card__state--vic { background: color-mix(in srgb, var(--vic-blue) 15%, transparent); color: var(--vic-deep); }
.mk-card p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.mk-card__more { font-size: 13px; font-weight: 500; color: var(--teal); margin-top: auto; padding-top: 6px; }

/* A highlighted feature: spans the whole grid row, laid out side by side —
   thumbnail on the left third, prose on the right two-thirds. */
.mk-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
}
.mk-card--wide .mk-card__preview {
  flex: 0 0 34%;
  height: auto;
  min-height: 268px;
  border-bottom: none;
  border-right: 1px solid var(--line-soft);
}
.mk-card--wide .mk-card__bd {
  justify-content: center;
  gap: 12px;
  padding: 32px clamp(28px, 4vw, 48px);
}
.mk-card--wide .mk-card__bd h3 { font-size: clamp(20px, 2.4vw, 26px); }
.mk-card--wide .mk-card__bd > p { font-size: 15px; max-width: 60ch; }
.mk-card--wide .mk-card__more { font-size: 14px; }

/* "New" pill beside the wide card's heading. */
.mk-card__new {
  flex: none;
  margin-top: 2px;
  align-self: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--teal);
}
.mk-card--wide .mk-card__top { align-items: center; }
.mk-card--wide .mk-card__top h3 { flex: 1; }

/* Feature grid filling the wide card — a 2×2 spec list. No icon chips: a thin
   line glyph, hairline-separated rows, and a clear type hierarchy read as
   premium where a tinted square reads as generic. */
.mk-feat {
  list-style: none;
  margin: 16px 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 4vw, 52px);
}
.mk-feat li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 2px;
  border-top: 1px solid var(--line-soft);
}
.mk-feat__ic { flex: none; margin-top: 0; color: var(--ink); }
.mk-feat__ic svg { width: 23px; height: 23px; display: block; }
.mk-feat strong { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.mk-feat span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

@media (max-width: 520px) {
  .mk-feat { grid-template-columns: 1fr; }
  .mk-feat li:nth-child(2) { border-top: 1px solid var(--line-soft); }
}

@media (max-width: 940px) {
  .mk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  /* Back to a stacked card at narrow widths. */
  .mk-card--wide { flex-direction: column; }
  .mk-card--wide .mk-card__preview {
    flex: none;
    height: 250px;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
  }
}
@media (max-width: 600px) {
  .mk-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  margin-top: clamp(40px, 6vw, 64px);
  text-align: left;
}

.contact-form { display: grid; gap: 18px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.field { display: grid; gap: 7px; align-content: start; }
.field__label { font-size: 13.5px; font-weight: 600; }
.field__label .req { color: var(--sev-high); margin-left: 2px; }

.field__input,
.field__textarea,
.field__select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.35s ease;
}
.field__input:focus,
.field__textarea:focus,
.field__select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
}
.field__input::placeholder,
.field__textarea::placeholder { color: var(--ink-3); }

.field__textarea { min-height: 170px; resize: vertical; }

.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='m1 1.5 5 5 5-5' stroke='%2387867f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.field--error .field__input,
.field--error .field__textarea,
.field--error .field__select { border-color: var(--sev-high); }
.field__error { font-size: 13px; color: var(--sev-high); }

.field__honeypot { position: absolute; left: -9999px; top: -9999px; }

.contact-form__submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.contact-form__hint { font-size: 13px; color: var(--ink-3); }

.contact-success {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.contact-success__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 15%, transparent);
  color: var(--teal-deep);
  flex: none;
}
.contact-success h3 { margin: 4px 0 6px; font-size: 16.5px; font-weight: 600; }
.contact-success p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

.contact-aside { align-content: start; display: grid; }
.contact-aside__block { padding: 18px 0; border-top: 1px solid var(--line-soft); }
.contact-aside__block:first-child { border-top: 0; padding-top: 0; }
.contact-aside__block h4 { margin: 0 0 5px; font-size: 14px; font-weight: 600; }
.contact-aside__block p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.contact-aside__block a { color: var(--teal-deep); text-decoration: none; }
.contact-aside__block a:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form__row { grid-template-columns: 1fr; }
}

/* ---------- Pricing extras ---------- */

.payg { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.payg__card {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.payg__sub { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.payg__title { font-family: var(--font-serif); font-weight: 400; font-size: 22px; margin: 6px 0 0; }
.payg__note { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-3); }
.payg__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; flex: none; }
.payg__price { font-family: var(--font-serif); font-weight: 380; font-size: 34px; line-height: 1; }

@media (max-width: 720px) {
  .payg { grid-template-columns: 1fr; }
}

.howbill { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.howbill__step { padding: 26px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); }
.howbill__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 13%, transparent);
  color: var(--teal-deep);
  font-weight: 600;
}
.howbill__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 16px 0 8px; }
.howbill__body { font-size: 14px; color: var(--ink-2); line-height: 1.65; margin: 0; }

@media (max-width: 820px) {
  .howbill { grid-template-columns: 1fr; }
}

.firm-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background:
    radial-gradient(ellipse 70% 60% at 12% 0%, var(--cta-glow), transparent 65%),
    var(--paper-tint);
  overflow: hidden;
}
.firm-band__title {
  font-family: var(--font-serif);
  font-weight: 360;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.12;
  margin: 14px 0 0;
}
.firm-band__title em { font-style: italic; }
.firm-band__lede { font-size: 16px; color: var(--ink-2); line-height: 1.65; margin: 16px 0 0; max-width: 52ch; }
.firm-band__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.firm-band__hint { font-size: 13px; color: var(--ink-3); }

.firm-band__features { list-style: none; margin: 0; padding: 0; align-self: center; }
.firm-band__features li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}
.firm-band__features li:first-child { border-top: 0; padding-top: 0; }
.firm-band__features strong { font-size: 14.5px; }
.firm-band__features p { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.firm-band__check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 15%, transparent);
  color: var(--teal-deep);
}

@media (max-width: 880px) {
  .firm-band { grid-template-columns: 1fr; }
}

.compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.compare th {
  text-align: left;
  padding: 15px 20px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.compare td { padding: 13px 20px; border-top: 1px solid var(--line-soft); }
.compare tbody tr:first-child td { border-top: 0; }
.compare .center { text-align: center; }
.compare__row-head { font-weight: 500; }
.compare__check { color: var(--teal); }
.compare__dash { color: var(--ink-3); }

/* ============================================================
   Hero app — animated, high-fidelity DOM clone of the review
   app. Replaces the old hero video. Acts: upload → streaming
   review → ask Torri (with Section-32 context) → branded PDF
   payoff, driven by a live cursor. Colours key off the site
   theme tokens so it flips with the page. Motion is gated
   behind .is-playing (in-view only) and collapses to a static
   settled review via .ha-static.

   NOTE: this is a hand-maintained REPLICA, not the real app —
   if the review UI changes, update this markup to match; it
   does not auto-update. Paired JS: landing-v2.js (#hero-app).
   ============================================================ */

/* Fixed desktop layout that scales down as one unit on small screens
   (the columns never reflow — the whole graphic just gets smaller). */
.ha-fit { position: relative; width: 100%; max-width: 1060px; margin: 0 auto; aspect-ratio: 1060 / 772; }
.ha-scale { position: absolute; top: 0; left: 0; width: 1060px; height: 772px; transform-origin: top left; transform: scale(var(--ha-scale, 1)); }

.hero-app {
  --ha-bg:     var(--surface);
  --ha-rail:   color-mix(in srgb, var(--ink) 5%, var(--surface));
  --ha-card:   color-mix(in srgb, var(--ink) 4%, var(--surface));
  --ha-muted:  color-mix(in srgb, var(--ink) 9%, var(--surface));
  --ha-border: var(--line-soft);
  --ha-fg:     var(--ink);
  --ha-mut:    var(--ink-3);
  --ha-brand:  var(--teal);
  --ha-crit:   #d14343;
  --ha-warn:   #b06d1a;
  --ha-ok:     #0e9a6c;

  --flat: 0;
  --ha-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  position: relative;
  width: 1060px;
  height: 772px;
  display: flex;
  overflow: hidden;
  border-radius: 10px;
  /* brand-gradient border: a single linear fade (border-box over the surface) */
  background:
    linear-gradient(var(--ha-bg), var(--ha-bg)) padding-box,
    linear-gradient(135deg,
      color-mix(in srgb, var(--ha-brand) 85%, transparent),
      color-mix(in srgb, var(--ha-brand) 16%, transparent) 28%,
      color-mix(in srgb, var(--ha-brand) 16%, transparent)) border-box;
  color: var(--ha-fg);
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-frame);
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  text-align: left;
  transform:
    perspective(2200px)
    rotateX(calc((1 - var(--flat)) * 6deg))
    rotateY(calc((1 - var(--flat)) * -14deg))
    rotate(calc((1 - var(--flat)) * 0.4deg));
  transform-origin: center;
  will-change: transform;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.hero-app * { box-sizing: border-box; }
.ha-sprite { position: absolute; width: 0; height: 0; }
.ha-rail__logo, .ha-greet__l, .ha-chathd__logo, .ha-amsg__l, .ha-bubble svg { fill: currentColor; }

/* ---- live cursor ---- */
.ha-cursor { position: absolute; top: 0; left: 0; width: 17px; height: 17px; z-index: 30; opacity: 0; transform: translate(var(--cx, 40px), var(--cy, 360px)); transition: transform 0.42s cubic-bezier(.45,.05,.2,1), opacity 0.3s ease; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.28)); }
.ha-cursor.is-on { opacity: 1; }
.ha-cursor.is-click { transform: translate(var(--cx), var(--cy)) scale(0.82); }

/* ---- minimised app rail ---- */
.ha-rail { width: 58px; flex: none; background: var(--ha-rail); border-right: 1px solid var(--ha-border); display: flex; flex-direction: column; align-items: center; padding: 13px 0; gap: 16px; transition: background-color 0.4s ease, border-color 0.4s ease; }
.ha-rail__logo { width: 30px; height: 30px; color: var(--ha-brand); }
.ha-rail__btn { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--ha-mut); }
.ha-rail__btn svg { width: 19px; height: 19px; }
.ha-rail__btn.is-on { background: color-mix(in srgb, var(--ha-brand) 12%, transparent); color: var(--ha-brand); }
.ha-rail__av { margin-top: auto; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--ha-fg) 14%, transparent); color: var(--ha-fg); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 10.5px; }

.ha-stage { flex: 1; min-width: 0; position: relative; }
.ha-scene { position: absolute; inset: 0; }

/* ---- ACT 1 · upload ---- */
.ha-up { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; gap: 22px; }
.hero-app.is-playing .ha-up { animation: ha-act1out 0.6s var(--ease) 3.9s forwards; }
.ha-greet { display: flex; align-items: center; justify-content: center; gap: 11px; }
.ha-greet__l { width: 40px; height: 40px; color: var(--ha-brand); }
.ha-greet h3 { font-family: 'Cormorant', ui-serif, Georgia, 'Times New Roman', serif; font-weight: 500; font-size: 38px; letter-spacing: -0.005em; margin: 0; color: var(--ha-fg); }

/* jurisdiction switch — matches the real sliding-thumb control */
.ha-jsw { position: relative; display: inline-flex; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ha-brand) 25%, transparent); background: color-mix(in srgb, var(--ha-fg) 5%, transparent); padding: 4px; }
.ha-jsw__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ha-bg); box-shadow: 0 1px 2px rgba(0,0,0,.12); border: 1px solid color-mix(in srgb, var(--ha-brand) 15%, transparent); transition: transform 0.2s ease-out; }
.ha-jsw__thumb.is-vic { transform: translateX(100%); }
.ha-jsw__lbl { position: relative; z-index: 1; min-width: 78px; border-radius: 999px; padding: 6px 0; text-align: center; font-weight: 600; font-size: 13px; color: var(--ha-mut); transition: color 0.2s ease; }
.ha-jsw__lbl.is-active { color: var(--ha-brand); }

.ha-drop { position: relative; width: 100%; max-width: 520px; min-height: 184px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--ha-brand) 9%, transparent), transparent 70%); border: 1px solid color-mix(in srgb, var(--ha-brand) 22%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; transition: border-color 0.2s, background 0.2s, transform 0.18s; }
.ha-drop.is-press { transform: scale(0.985); border-color: var(--ha-brand); background: linear-gradient(135deg, color-mix(in srgb, var(--ha-brand) 15%, transparent), transparent 70%); }
.ha-ripple { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--ha-brand) 30%, transparent); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
.ha-drop.is-press .ha-ripple { animation: ha-ripple 0.55s ease-out; }
.ha-drop h4 { font-weight: 500; font-size: 21px; letter-spacing: -0.01em; margin: 0; color: var(--ha-fg); text-align: center; }
.ha-drop__idle { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.ha-drop__busy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 28px; opacity: 0; }
.hero-app.is-playing .ha-drop__idle { animation: ha-fadeout 0.35s var(--ease) 2.15s forwards; }
.hero-app.is-playing .ha-drop__busy { animation: ha-fadein 0.35s var(--ease) 2.3s forwards; }
.ha-ufile { display: flex; align-items: center; gap: 11px; width: 100%; max-width: 400px; }
.ha-ufile__ext { width: 30px; height: 30px; flex: none; border-radius: 6px; background: var(--ha-brand); color: #fff; font-weight: 800; font-size: 9px; display: flex; align-items: center; justify-content: center; }
.ha-ufile__nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-ufile__pct { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: 12.5px; color: var(--ha-mut); }
.ha-ubar { width: 100%; max-width: 400px; height: 5px; border-radius: 3px; background: var(--ha-muted); overflow: hidden; }
.ha-ubar i { display: block; height: 100%; width: 0; background: var(--ha-brand); }
.hero-app.is-playing .ha-ubar i { animation: ha-upfill 1s cubic-bezier(.4,0,.2,1) 2.35s forwards; }
.ha-redir { font-size: 12px; font-weight: 600; color: var(--ha-ok); opacity: 0; }
.hero-app.is-playing .ha-redir { animation: ha-fadein 0.3s var(--ease) 3.4s forwards; }

/* ---- ACT 2 · review ---- */
.ha-review { display: flex; opacity: 0; }
.hero-app.is-playing .ha-review { animation: ha-fadein 0.55s var(--ease) 4s forwards; }
.ha-sects { width: 240px; flex: none; border-right: 1px solid var(--ha-border); display: flex; flex-direction: column; }
.ha-sects__hd { height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; font-weight: 600; font-size: 12.5px; }
.ha-sects__hd .ha-ct { color: var(--ha-mut); font-weight: 500; }
.ha-sects__list { flex: 1; overflow: hidden; padding: 9px; }
.ha-ov { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 9px; background: var(--ha-card); margin-bottom: 7px; }
.ha-ov__ico { width: 19px; height: 19px; flex: none; color: var(--ha-brand); }
.ha-ov__tt { font-weight: 600; font-size: 12.5px; }
.ha-ov__sub { font-weight: 500; font-size: 10px; color: var(--ha-mut); margin-top: 2px; }
.ha-ov__caret { margin-left: auto; width: 15px; height: 15px; color: var(--ha-mut); opacity: 0.6; }
.ha-divider { height: 1px; background: var(--ha-border); margin: 0 9px 7px; }
.ha-srow { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; }
.ha-srow__ck { width: 18px; height: 18px; flex: none; color: var(--ha-brand); opacity: 0.25; }
.ha-srow.is-done .ha-srow__ck { opacity: 1; }
.ha-srow__nm { flex: 1; font-weight: 500; font-size: 12px; }
.ha-srow__it { font-weight: 500; font-size: 10px; color: var(--ha-mut); margin-top: 1px; }
.ha-srow__bar { height: 9px; border-radius: 4px; width: 60%; background: var(--ha-muted); }

.ha-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ha-topbar { height: 46px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.ha-topbar__addr { font-weight: 500; font-size: 12.5px; }
.ha-topbar__date { font-weight: 500; font-size: 10.5px; color: var(--ha-mut); margin-left: 9px; }
.ha-topbar__acts { display: flex; align-items: center; gap: 12px; }
.ha-topbar__acts svg { width: 16px; height: 16px; color: var(--ha-mut); }
.ha-saved { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 10.5px; color: var(--ha-ok); opacity: 0; }
.ha-saved svg { width: 13px; height: 13px; color: var(--ha-ok); }
.hero-app.is-playing .ha-saved { animation: ha-fadein 0.5s var(--ease) 6.5s forwards; }
.ha-draft { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 11.5px; color: var(--ha-brand); }
.ha-draft svg { width: 14px; height: 14px; color: var(--ha-brand); }
.ha-pdf { font-weight: 600; font-size: 11.5px; color: #fff; background: var(--ha-brand); border-radius: 7px; padding: 7px 12px; }

.ha-prog { height: 2px; background: var(--ha-muted); flex: none; }
.ha-prog i { display: block; height: 100%; width: 6%; background: var(--ha-brand); }
.hero-app.is-playing .ha-prog i { animation: ha-fill 2.2s cubic-bezier(.4,0,.2,1) 4.1s forwards; }
.ha-progtxt { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-weight: 500; font-size: 10.5px; color: var(--ha-mut); flex: none; }
.ha-progtxt__sp { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ha-brand); border-top-color: transparent; animation: ha-spin 0.8s linear infinite; }
.hero-app.is-playing .ha-prog, .hero-app.is-playing .ha-progtxt { animation: ha-hideprog 0.4s var(--ease) 6.4s forwards; }

.ha-port { flex: 1; overflow: hidden; position: relative; padding: 0 18px; }
.ha-port::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(transparent, var(--ha-bg)); pointer-events: none; transition: background 0.4s ease; }
.ha-doc { padding: 15px 0; max-width: 620px; margin: 0 auto; transform: translateY(var(--scroll, 0px)); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }

.ha-block { border: 1px solid var(--ha-border); border-radius: 11px; background: var(--ha-card); padding: 14px 16px; margin-bottom: 12px; }
.ha-block.is-verdict { display: flex; align-items: center; gap: 12px; }
.ha-block.is-verdict .ha-vt { font-weight: 600; font-size: 14px; }
.ha-block.is-verdict .ha-vd { font-weight: 500; font-size: 11px; color: var(--ha-mut); margin-top: 3px; }
.ha-loz { flex: none; font-weight: 700; font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 6px; border-radius: 3px; }
.is-verdict .ha-loz { margin-left: auto; }
.ha-loz.is-warn { background: color-mix(in srgb, var(--ha-warn) 15%, transparent); color: var(--ha-warn); }
.ha-loz.is-crit { background: color-mix(in srgb, var(--ha-crit) 13%, transparent); color: var(--ha-crit); }
.ha-loz.is-ok { background: color-mix(in srgb, var(--ha-ok) 14%, transparent); color: var(--ha-ok); }
.ha-bhd { font-weight: 600; font-size: 12px; margin-bottom: 9px; display: flex; gap: 7px; align-items: center; }
.ha-bhd .ha-n { color: var(--ha-mut); font-weight: 500; }
.ha-bhd__ct { margin-left: auto; font-weight: 500; font-size: 10.5px; color: var(--ha-mut); white-space: nowrap; }
.ha-kv { display: flex; justify-content: space-between; align-items: center; font-weight: 500; font-size: 11.5px; line-height: 1.95; }
.ha-kv span:last-child { color: var(--ha-mut); }

/* particulars — uppercase-label grid, like the real overview */
.ha-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.ha-pf--wide { grid-column: 1 / -1; }
.ha-pf__l { font-weight: 600; font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ha-mut); }
.ha-pf__v { margin-top: 2px; font-weight: 500; font-size: 12px; }

/* section-32 reviewed check */
.ha-check { flex: none; align-self: center; width: 15px; height: 15px; color: var(--ha-ok); }

/* general-conditions (varied) rows */
.ha-gcrow { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--ha-border); }
.ha-gcrow:first-of-type { border-top: 0; }
.ha-gcrow__lbl { width: 64px; flex: none; font-weight: 600; font-size: 11px; }
.ha-gcrow__bd { flex: 1; min-width: 0; }
.ha-gcrow__bd p { margin: 0; font-weight: 500; font-size: 10.5px; line-height: 1.4; color: var(--ha-mut); }
.ha-gcdel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.ha-gcdel__l { font-weight: 600; font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ha-mut); }
.ha-gcchip { border: 1px solid var(--ha-border); background: var(--ha-muted); border-radius: 5px; padding: 1px 6px; font-weight: 500; font-size: 9.5px; }
.ha-arow { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--ha-border); transition: opacity 0.25s ease; }
.ha-arow:first-of-type { border-top: 0; }
.ha-arow.is-off { opacity: 0.45; }
.ha-arow__bd { flex: 1; min-width: 0; }
.ha-arow__bd b { font-weight: 600; font-size: 11.5px; }
.ha-arow__bd p { font-weight: 500; font-size: 10.5px; line-height: 1.4; color: var(--ha-mut); margin: 2px 0 0; }
.ha-arow__pg { flex: none; align-self: center; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: 9.5px; color: var(--ha-mut); opacity: 0.7; }
.ha-ckbox { flex: none; align-self: center; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid transparent; display: flex; align-items: center; justify-content: center; color: var(--ha-brand); transition: color 0.25s ease, border-color 0.25s ease; }
.ha-ckbox svg { width: 13px; height: 13px; transition: opacity 0.2s ease; }
.ha-arow.is-off .ha-ckbox { color: var(--ha-mut); border-color: color-mix(in srgb, var(--ha-fg) 28%, transparent); }
.ha-arow.is-off .ha-ckbox svg { opacity: 0; }

.ha-sk { background: linear-gradient(90deg, var(--ha-muted), color-mix(in srgb, var(--ha-fg) 10%, var(--ha-muted)), var(--ha-muted)); background-size: 200% 100%; border-radius: 5px; animation: ha-shimmer 1.5s linear infinite; }
.ha-reveal { opacity: 0; transform: translateY(10px); }
.hero-app.is-playing .ha-reveal { animation: ha-fadeup 0.6s var(--ha-bounce) forwards; }
/* Population is fast and deliberately non-uniform — sections land in
   bursts with little pauses between, the way a real analysis streams in
   rather than on a metronome. */
.hero-app.is-playing .ha-r1 { animation-delay: 4.25s; }
.hero-app.is-playing .ha-r2 { animation-delay: 4.45s; }
.hero-app.is-playing .ha-r3 { animation-delay: 5.05s; }
.hero-app.is-playing .ha-r4 { animation-delay: 5.55s; }
.hero-app.is-playing .ha-r5 { animation-delay: 5.7s; }
.hero-app.is-playing .ha-r6 { animation-delay: 6.2s; }
.hero-app.is-playing .ha-sd1 { animation-delay: 4.15s; }
.hero-app.is-playing .ha-sd2 { animation-delay: 4.3s; }
.hero-app.is-playing .ha-sd3 { animation-delay: 4.85s; }
.hero-app.is-playing .ha-sd4 { animation-delay: 5s; }
.hero-app.is-playing .ha-sd5 { animation-delay: 5.15s; }
.hero-app.is-playing .ha-sd6 { animation-delay: 5.75s; }
.ha-skhold { position: relative; margin-bottom: 12px; }
.ha-skhold .ha-ph { position: absolute; inset: 0; }
.hero-app.is-playing .ha-vph { animation: ha-fadeout 0.45s var(--ease) 4.1s forwards; }
.hero-app.is-playing .ha-vreal { opacity: 0; animation: ha-fadeup 0.55s var(--ha-bounce) 4.3s forwards; }

/* ---- floating chat ---- */
.ha-bubble { position: absolute; right: 22px; bottom: 22px; width: 54px; height: 54px; border-radius: 50%; background: var(--ha-bg); border: 1px solid var(--ha-border); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); opacity: 0; transform: scale(0.8); pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.42s var(--ha-bounce); z-index: 8; }
.ha-bubble.is-shown { opacity: 1; transform: none; }
.ha-bubble svg { width: 32px; height: 32px; color: var(--ha-brand); }
.ha-panel { position: absolute; right: 22px; bottom: 22px; width: 320px; border-radius: 20px; background: var(--ha-bg); border: 1px solid var(--ha-border); box-shadow: var(--shadow-frame); overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform: translateY(14px) scale(0.94); transform-origin: bottom right; pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.44s var(--ha-bounce); z-index: 9; }
.ha-panel.is-open { opacity: 1; transform: none; }
.ha-chathd { display: flex; align-items: center; gap: 9px; padding: 11px 13px; }
.ha-chathd__logo { width: 22px; height: 22px; color: var(--ha-brand); }
.ha-chathd b { font-weight: 600; font-size: 12.5px; flex: 1; }
.ha-chathd svg.ha-ico { width: 15px; height: 15px; color: var(--ha-mut); }
.ha-chatbody { padding: 5px 13px 12px; display: flex; flex-direction: column; gap: 11px; min-height: 120px; }
.ha-umsg { align-self: flex-end; max-width: 86%; background: var(--ha-muted); border-radius: 14px 14px 4px 14px; padding: 9px 12px; font-weight: 500; font-size: 11.5px; line-height: 1.4; opacity: 0; }
.ha-umsg.is-shown { opacity: 1; }
.ha-umsg.is-sent { animation: ha-sendup 0.45s var(--ha-bounce); }
.ha-caret { display: inline-block; width: 1px; margin-left: 1px; border-right: 1.5px solid var(--ha-brand); animation: ha-blink 1s step-end infinite; }
.ha-typing { align-self: flex-start; display: none; gap: 4px; padding: 7px 3px; }
.ha-typing.is-shown { display: flex; }
.ha-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ha-mut); animation: ha-blink 1s ease infinite; }
.ha-typing i:nth-child(2) { animation-delay: 0.15s; }
.ha-typing i:nth-child(3) { animation-delay: 0.3s; }
.ha-amsg { align-self: flex-start; display: flex; gap: 8px; max-width: 94%; opacity: 0; }
.ha-amsg.is-shown { opacity: 1; }
.ha-amsg__l { width: 19px; height: 19px; flex: none; color: var(--ha-brand); margin-top: 1px; }
.ha-amsg p { font-weight: 500; font-size: 11.5px; line-height: 1.5; margin: 0; }
.ha-comp { margin: 3px 13px 13px; border: 1px solid var(--ha-border); border-radius: 12px; padding: 9px 11px; display: flex; flex-direction: column; gap: 8px; }
.ha-comp__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.ha-comp__input { flex: 1; min-width: 0; align-self: center; font-weight: 500; font-size: 11px; line-height: 1.5; color: var(--ha-fg); white-space: normal; overflow-wrap: break-word; }
.ha-comp__input:empty::before { content: 'Ask anything about this contract…'; color: var(--ha-mut); }
.ha-comp__snd { width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--ha-brand); color: #fff; display: flex; align-items: center; justify-content: center; }
.ha-comp__snd svg { width: 13px; height: 13px; }
.ha-ctxpill { display: none; align-self: flex-start; align-items: center; gap: 5px; font-weight: 600; font-size: 10px; color: var(--ha-brand); background: color-mix(in srgb, var(--ha-brand) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ha-brand) 22%, transparent); border-radius: 7px; padding: 3px 6px 3px 5px; }
.ha-ctxpill.is-shown { display: inline-flex; animation: ha-pop 0.4s var(--ha-bounce); }
.ha-ctxpill svg { width: 12px; height: 12px; fill: currentColor; }
.ha-ctxpill i { font-style: normal; opacity: 0.55; font-weight: 700; }
.ha-card-ask { margin-left: 6px; width: 16px; height: 16px; flex: none; color: var(--ha-brand); fill: currentColor; opacity: 0.85; transform-origin: center; }
.ha-card-ask.is-tapped { animation: ha-cardtap 0.55s var(--ha-bounce); }

/* ---- click ripple (fires at the cursor tip on every click) ---- */
.ha-clickfx { position: absolute; top: 0; left: 0; width: 24px; height: 24px; margin: -10px 0 0 -8px; border-radius: 50%; background: color-mix(in srgb, var(--ha-brand) 38%, transparent); transform: translate(var(--cx, 0), var(--cy, 0)) scale(0); opacity: 0; pointer-events: none; z-index: 29; }
.ha-clickfx.is-fire { animation: ha-clickfx 0.5s ease-out; }
@keyframes ha-clickfx { 0% { transform: translate(var(--cx, 0), var(--cy, 0)) scale(0.25); opacity: 0.5; } 100% { transform: translate(var(--cx, 0), var(--cy, 0)) scale(2.4); opacity: 0; } }
@keyframes ha-glowpop { 0% { opacity: 0; transform: scale(0.55); } 55% { opacity: 0.95; transform: scale(1.08); } 100% { opacity: 0.75; transform: scale(1); } }
@keyframes ha-glowbreathe { 0% { opacity: 0.6; transform: scale(0.98); } 100% { opacity: 0.85; transform: scale(1.06); } }

/* ---- generated-report payoff (the branded PDF) ---- */
.ha-pdfout { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; z-index: 12; }
.ha-pdfout.is-shown { opacity: 1; }
.ha-pdfout::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ha-fg) 26%, transparent); }
/* brand glow that blooms behind the report as it pops in */
.ha-pdfout__glow { position: absolute; width: 480px; height: 560px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ha-brand) 60%, transparent), transparent 72%); filter: blur(46px); opacity: 0; transform: scale(0.55); }
.ha-pdfout.is-shown .ha-pdfout__glow { animation: ha-glowpop 0.9s ease-out forwards, ha-glowbreathe 3.4s ease-in-out 0.9s infinite alternate; }
.ha-pdfout__doc { position: relative; width: 372px; height: 468px; background: #ffffff; color: #16181c; border-radius: 8px; box-shadow: 0 38px 70px -24px rgba(0,0,0,.55); overflow: hidden; display: flex; flex-direction: column; transform: translateY(50px) scale(0.9); opacity: 0; transition: transform 0.55s var(--ha-bounce), opacity 0.45s ease; }
.ha-pdfout.is-shown .ha-pdfout__doc { transform: none; opacity: 1; }
.ha-pdfout__hd { background: var(--ha-brand); color: #fff; padding: 17px 20px; display: flex; align-items: flex-start; gap: 11px; }
.ha-pdfout__hd svg { width: 26px; height: 26px; flex: none; fill: #fff; opacity: 0.95; }
.ha-pdfout__brand { font-family: 'Cormorant', ui-serif, Georgia, serif; font-weight: 600; font-size: 22px; line-height: 1.05; }
.ha-pdfout__tag { font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; margin-top: 3px; }
.ha-pdfout__body { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; }
.ha-pdfout__h1 { font-weight: 700; font-size: 15px; }
.ha-pdfout__meta { font-size: 9.5px; color: #6b7280; margin-top: 2px; }
.ha-pdfout__verdict { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #4b5563; margin: 12px 0 14px; }
.ha-pdfout__chip { font-weight: 700; font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; background: rgba(176,109,26,.16); color: #b06d1a; }
.ha-pdfout__seclbl { font-weight: 700; font-size: 8.5px; letter-spacing: 0.07em; text-transform: uppercase; color: #9aa0a8; margin: 0 0 8px; }
.ha-pdfout__item { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px solid #f0f1f3; }
.ha-pdfout__item:first-of-type { border-top: 0; }
.ha-pdfout__dot { width: 7px; height: 7px; border-radius: 2px; flex: none; margin-top: 3px; }
.ha-pdfout__dot.is-crit { background: #d14343; }
.ha-pdfout__dot.is-warn { background: #b06d1a; }
.ha-pdfout__it { font-weight: 600; font-size: 10.5px; line-height: 1.3; }
.ha-pdfout__it span { display: block; font-weight: 500; font-size: 9px; color: #6b7280; margin-top: 1px; }
.ha-pdfout__ok { display: flex; align-items: center; gap: 7px; margin-top: 13px; font-weight: 600; font-size: 10px; color: #0e9a6c; }
.ha-pdfout__ok svg { width: 14px; height: 14px; fill: #0e9a6c; }
.ha-pdfout__ft { margin-top: auto; padding: 11px 20px; border-top: 1px solid #eceef1; display: flex; align-items: center; gap: 6px; font-size: 8.5px; color: #9aa0a8; }
.ha-pdfout__ft svg { width: 12px; height: 12px; fill: var(--ha-brand); opacity: 0.7; }

/* ---- static fallback (no-JS / reduced-motion) → settled review ---- */
.hero-app.ha-static .ha-up { display: none; }
.hero-app.ha-static .ha-cursor { display: none; }
.hero-app.ha-static .ha-review { opacity: 1; }
.hero-app.ha-static .ha-reveal { opacity: 1; transform: none; }
.hero-app.ha-static .ha-prog, .hero-app.ha-static .ha-progtxt { display: none; }
.hero-app.ha-static .ha-vph { display: none; }
.hero-app.ha-static .ha-vreal { opacity: 1; }
.hero-app.ha-static .ha-bubble { display: none; }
.hero-app.ha-static .ha-panel { opacity: 1; transform: none; }
.hero-app.ha-static .ha-umsg, .hero-app.ha-static .ha-amsg { opacity: 1; }
.hero-app.ha-static .ha-doc { transform: none; }
.hero-app.ha-static .ha-pdfout, .hero-app.ha-static .ha-clickfx, .hero-app.ha-static .ha-cursor { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-app { transform: perspective(2200px) rotateX(5deg) rotateY(-12deg); }
}

/* Mobile: drop the rail + sections sidebar and show the review column on its
   own narrower fixed design, so the content scales down legibly instead of
   shrinking the whole three-column shell to an unreadable size. */
@media (max-width: 680px) {
  /* Capping the fit at the design width keeps the scaled graphic centred
     (margin auto) instead of left-aligning when the viewport is wider than
     the design. */
  .ha-fit { aspect-ratio: 440 / 600; max-width: 440px; }
  .ha-scale { width: 440px; height: 600px; }
  .hero-app { width: 440px; height: 600px; }
  .ha-rail, .ha-sects { display: none; }
  .ha-doc { max-width: 100%; }
  /* De-clutter the header — keep just the address and Generate PDF. */
  .ha-topbar { padding: 0 12px; }
  .ha-topbar__acts svg, .ha-saved, .ha-draft, .ha-topbar__date { display: none; }
  .ha-panel { width: 290px; }
  .ha-pdfout__doc { width: 300px; height: 384px; }
}


:root[data-theme='dark'] .hero-app { --ha-crit: #ef8a7d; --ha-warn: #e0a23c; --ha-ok: #34c98e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hero-app { --ha-crit: #ef8a7d; --ha-warn: #e0a23c; --ha-ok: #34c98e; }
}

/* ---- keyframes ---- */
@keyframes ha-shimmer { to { background-position: -200% 0; } }
@keyframes ha-spin { to { transform: rotate(360deg); } }
@keyframes ha-fadeup { to { opacity: 1; transform: none; } }
@keyframes ha-fadein { to { opacity: 1; } }
@keyframes ha-fadeout { to { opacity: 0; } }
@keyframes ha-act1out { to { opacity: 0; transform: translateY(-16px); } }
@keyframes ha-fill { 0% { width: 6%; } 22% { width: 30%; } 50% { width: 58%; } 80% { width: 86%; } 100% { width: 100%; } }
@keyframes ha-upfill { to { width: 100%; } }
@keyframes ha-hideprog { to { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; } }
@keyframes ha-drift { 0%, 8% { transform: translateY(0); } 100% { transform: translateY(-30%); } }
@keyframes ha-ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.7; } 100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; } }
@keyframes ha-bubbleout { to { opacity: 0; transform: scale(0.6); } }
@keyframes ha-panelin { to { opacity: 1; transform: none; } }
@keyframes ha-blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes ha-pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes ha-sendup { from { opacity: 0; transform: translateY(28px) scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes ha-cardtap { 0% { transform: scale(1) rotate(0); } 32% { transform: scale(1.45) rotate(-14deg); } 64% { transform: scale(0.9) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }