/* Condo Owner Advocate 3.1 - premium product design system.
   Presentation layer only. Structure, copy, routes, CTA logic unchanged from 3.0.
   Inter is loaded via <link> in each page head. */

:root {
  /* neutrals */
  --bg: #f3f5f9;
  --bg-2: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f4f6fa;
  --surface-3: #eaeef4;
  --ink: #0c1626;
  --ink-soft: #4f5b6b;
  --ink-faint: #8390a0;
  --line: #e7ebf1;
  --line-strong: #d3dae3;

  /* brand */
  --brand: #0e2036;
  --accent: #205fa6;
  --accent-2: #3d84d6;
  --accent-hover: #1a4f8c;
  --accent-soft: #e9f1fb;
  --accent-ink: #ffffff;
  --gold: #c2953c;
  --good: #2f8a5b;
  --danger: #b8543a;
  --danger-soft: #fbeee9;

  /* gradients + glass */
  --grad-primary: linear-gradient(135deg, var(--accent-2), var(--accent) 55%, var(--brand));
  --grad-tile: linear-gradient(150deg, var(--accent-2), var(--accent));
  --grad-gold: linear-gradient(150deg, #e3c274, var(--gold));
  --grad-good: linear-gradient(150deg, #57c793, var(--good));
  --grad-danger: linear-gradient(150deg, #d98268, var(--danger));
  --grad-ink: linear-gradient(150deg, #33465e, var(--brand));
  --glass-bg: rgba(255,255,255,.66);
  --glass-border: rgba(255,255,255,.7);
  --nav-glass: rgba(255,255,255,.72);
  --hero-1: rgba(61,132,214,.16);
  --hero-2: rgba(194,149,60,.12);
  --dot: rgba(12,22,38,.045);

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(12,22,38,.05), 0 1px 3px rgba(12,22,38,.05);
  --shadow: 0 4px 10px rgba(12,22,38,.05), 0 16px 34px rgba(12,22,38,.08);
  --shadow-lg: 0 12px 28px rgba(12,22,38,.09), 0 34px 72px rgba(12,22,38,.12);
  --shadow-accent: 0 8px 20px rgba(32,95,166,.28);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,.5);

  /* radius */
  --r-xs: 9px; --r-sm: 13px; --r: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px;

  --ease: cubic-bezier(.2,.75,.25,1);
  --ease-spring: cubic-bezier(.34,1.4,.5,1);
  --step: clamp(1.02rem, 0.95rem + 0.4vw, 1.14rem);

  /* Shared canvas for the Home hero and the section directly below it, so
     the transition between them has no visible seam. */
  --hero-canvas: var(--bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #080b11; --bg-2: #0b1017; --surface: #10161f; --surface-2: #151d27; --surface-3: #1b2530;
    --ink: #eef2f7; --ink-soft: #9aa7b6; --ink-faint: #6a7686;
    --line: #1f2833; --line-strong: #2b3743;
    --brand: #0a1220; --accent: #4d94db; --accent-2: #74b1ea; --accent-hover: #66a6e6;
    --accent-soft: #131f2c; --accent-ink: #07121e; --gold: #d8b768; --good: #57c793; --danger: #db8770; --danger-soft: #221512;
    --glass-bg: rgba(16,22,31,.6); --glass-border: rgba(255,255,255,.08); --nav-glass: rgba(9,13,19,.68);
    --hero-1: rgba(77,148,219,.18); --hero-2: rgba(216,183,104,.08); --dot: rgba(255,255,255,.04);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 6px 16px rgba(0,0,0,.4), 0 20px 44px rgba(0,0,0,.5);
    --shadow-lg: 0 16px 34px rgba(0,0,0,.5), 0 40px 90px rgba(0,0,0,.6);
    --shadow-accent: 0 10px 26px rgba(77,148,219,.32);
    --shadow-inner: inset 0 1px 0 rgba(255,255,255,.06);
  }
}
:root[data-theme="dark"]{
  --bg:#080b11;--bg-2:#0b1017;--surface:#10161f;--surface-2:#151d27;--surface-3:#1b2530;--ink:#eef2f7;
  --ink-soft:#9aa7b6;--ink-faint:#6a7686;--line:#1f2833;--line-strong:#2b3743;--brand:#0a1220;--accent:#4d94db;
  --accent-2:#74b1ea;--accent-hover:#66a6e6;--accent-soft:#131f2c;--accent-ink:#07121e;--gold:#d8b768;--good:#57c793;
  --danger:#db8770;--danger-soft:#221512;--glass-bg:rgba(16,22,31,.6);--glass-border:rgba(255,255,255,.08);
  --nav-glass:rgba(9,13,19,.68);--hero-1:rgba(77,148,219,.18);--hero-2:rgba(216,183,104,.08);--dot:rgba(255,255,255,.04);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 6px 16px rgba(0,0,0,.4),0 20px 44px rgba(0,0,0,.5);
  --shadow-lg:0 16px 34px rgba(0,0,0,.5),0 40px 90px rgba(0,0,0,.6);--shadow-accent:0 10px 26px rgba(77,148,219,.32);--shadow-inner:inset 0 1px 0 rgba(255,255,255,.06);
}
:root[data-theme="light"]{
  --bg:#f3f5f9;--bg-2:#eef1f6;--surface:#ffffff;--surface-2:#f4f6fa;--surface-3:#eaeef4;--ink:#0c1626;
  --ink-soft:#4f5b6b;--ink-faint:#8390a0;--line:#e7ebf1;--line-strong:#d3dae3;--brand:#0e2036;--accent:#205fa6;
  --accent-2:#3d84d6;--accent-hover:#1a4f8c;--accent-soft:#e9f1fb;--accent-ink:#ffffff;--gold:#c2953c;--good:#2f8a5b;
  --danger:#b8543a;--danger-soft:#fbeee9;--glass-bg:rgba(255,255,255,.66);--glass-border:rgba(255,255,255,.7);
  --nav-glass:rgba(255,255,255,.72);--hero-1:rgba(61,132,214,.16);--hero-2:rgba(194,149,60,.12);--dot:rgba(12,22,38,.045);
  --shadow-sm:0 1px 2px rgba(12,22,38,.05),0 1px 3px rgba(12,22,38,.05);--shadow:0 4px 10px rgba(12,22,38,.05),0 16px 34px rgba(12,22,38,.08);
  --shadow-lg:0 12px 28px rgba(12,22,38,.09),0 34px 72px rgba(12,22,38,.12);--shadow-accent:0 8px 20px rgba(32,95,166,.28);--shadow-inner:inset 0 1px 0 rgba(255,255,255,.5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--step); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1,h2,h3,h4 { color: var(--ink); line-height: 1.12; letter-spacing: -0.025em; margin: 0; text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.7rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.25rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.02em; }
p { margin: 0 0 1rem; }

.skip-link { position:absolute; left:-999px; top:0; background:var(--ink); color:var(--surface); padding:10px 16px; border-radius:0 0 8px 0; z-index:200; }
.skip-link:focus { left:0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* reveal on scroll - gated on .js so no-JS users always see content (accessibility) */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease) var(--rd,0ms), transform .6s var(--ease) var(--rd,0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* layout */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }
/* 2026-07-25 spacing correction batch: -23%/-24% at the clamp() floor/ceiling
   (verified to land exactly on the ceiling at 1440px and the floor at
   390px), so adjacent sections stack less dead air without losing the
   deliberate size gap between .section and .section-tight. */
.section { padding: clamp(46px, 6vw, 82px) 0; }
.section-tight { padding: clamp(34px, 4vw, 54px) 0; }
.center { text-align: center; }
.eyebrow { font-size: .74rem; font-weight: 680; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; display: inline-flex; align-items: center; gap: 8px; }
.eyebrow.muted { color: var(--ink-faint); }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad-tile); }
.eyebrow.muted::before { background: var(--line-strong); }
.lead { font-size: clamp(1.08rem, 1rem + 0.55vw, 1.34rem); color: var(--ink-soft); line-height: 1.5; letter-spacing: -0.01em; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

.eyebrow-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 100; background: var(--nav-glass); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.nav.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav-inner { max-width: 1180px; margin: 0 auto; padding: 9px 24px; display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand .mark { width: 38px; height: 38px; border-radius: 12px; background: var(--grad-primary); display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-accent), var(--shadow-inner); flex: 0 0 auto; }
.brand .mark svg { width: 21px; height: 21px; }
.brand-lockup { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name { font-weight: 740; font-size: 1.06rem; letter-spacing: -0.03em; color: var(--ink); }
.brand-sub { font-size: .75rem; font-weight: 560; letter-spacing: .02em; color: var(--ink-soft); margin-top: 1px; }
.nav-links { display: flex; align-items: center; gap: 3px; margin-left: 10px; }
.nav-links a { color: var(--ink-soft); font-size: .95rem; font-weight: 560; padding: 8px 13px; border-radius: 10px; white-space: nowrap; transition: color .15s, background .15s; }
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
/* Active nav item (owner report 2026-08-11: the old state was colour only,
   at .95rem it read as barely darker and was easy to miss). Darker plus a
   real weight jump, 560 to 700, so the current section is obvious at a
   glance. The width reservation below keeps that weight change free of
   layout shift. */
.nav-links a.active { color: var(--ink); font-weight: 700; }
/* Every nav item and the brand word are always LAID OUT at their bold width:
   the pseudo-element renders the same text at the active weight, is a
   zero-height clipped block so it adds no vertical space and never paints,
   and its width sets the anchor's intrinsic width. Switching an item between
   560 and 700 therefore moves nothing, including its neighbours, and the
   header geometry is identical on every page. visibility:hidden also keeps
   the duplicated text out of the accessibility tree. */
.nav-links a::after,
.brand-word::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  font-weight: 700;
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px; cursor: pointer; color: var(--ink); }
/* CSS-only hamburger: iOS Safari collapses replaced elements (svg) under the global
   img,svg max-width:100% inside the shrink-to-fit flex button; pseudo-element bars can't collapse. */
.nav-toggle-bars { position: relative; display: block; width: 20px; height: 20px; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 2px; right: 2px; height: 2px; border-radius: 1px; background: currentColor; }
.nav-toggle-bars::before { top: 6px; }
.nav-toggle-bars::after { bottom: 6px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 620; font-size: .95rem; line-height: 1; letter-spacing: -0.01em; padding: 13px 22px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; transition: transform .16s var(--ease-spring), box-shadow .18s var(--ease), background .18s, border-color .18s, color .18s; white-space: nowrap; }
.btn svg { width: 17px; height: 17px; }
/* Long single-action labels (e.g. the paid-intake submit) may wrap on
   narrow screens instead of overflowing the pill. */
.btn-wrap { white-space: normal; line-height: 1.3; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-accent), var(--shadow-inner); }
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(32,95,166,.36), var(--shadow-inner); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--surface); color: var(--ink); border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn-lg { padding: 16px 28px; font-size: 1rem; }
.btn-block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.link-arrow svg { width: 15px; height: 15px; transition: transform .18s var(--ease-spring); }
.link-arrow:hover svg { transform: translateX(4px); }

/* icon tiles (soft 3D) */
.ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto; background: var(--grad-tile); color: #fff; box-shadow: var(--shadow-accent), var(--shadow-inner); }
.ico svg { width: 23px; height: 23px; }
.ico.sm { width: 38px; height: 38px; border-radius: 11px; }
.ico.sm svg { width: 19px; height: 19px; }
.ico.gold { background: var(--grad-gold); box-shadow: 0 8px 18px rgba(194,149,60,.3), var(--shadow-inner); }
.ico.good { background: var(--grad-good); box-shadow: 0 8px 18px rgba(47,138,91,.28), var(--shadow-inner); }
.ico.danger { background: var(--grad-danger); box-shadow: 0 8px 18px rgba(184,84,58,.26), var(--shadow-inner); }
.ico.ink { background: var(--grad-ink); box-shadow: var(--shadow); }
.ico.ghost { background: var(--accent-soft); color: var(--accent); box-shadow: none; }

/* hero */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); }
.hero::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 720px; z-index: 0; background: radial-gradient(52% 60% at 20% 18%, var(--hero-1), transparent 70%), radial-gradient(46% 52% at 84% 6%, var(--hero-2), transparent 70%); pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero h1 { max-width: 15ch; }
.hero .lead { max-width: 46ch; margin-top: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 20px; font-size: .9rem; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 9px; }
.hero-note .dot { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: var(--grad-good); display: grid; place-items: center; box-shadow: var(--shadow-inner); }
.hero-note .dot svg { width: 12px; height: 12px; color: #fff; }
/* Homepage hero founder block: unboxed portrait + credentials, rendered
   immediately (no scroll reveal) as the hero's trust anchor. The short H1
   and one-line promise keep the whole stack compact, so the hero uses the
   site-wide type scale and spacing with no fold-driven compression. */
.hero-founder { display: flex; align-items: center; gap: 18px; margin-top: 24px; }
.hero-founder img { width: 116px; height: 116px; border-radius: 50%; border: 1px solid var(--line); flex: 0 0 auto; }
.hero-founder .hf-text { display: flex; flex-direction: column; gap: 2px; }
.hero-founder strong { color: var(--ink); font-size: 1.02rem; letter-spacing: -0.01em; }
.hero-founder .hf-text span { font-size: .9rem; line-height: 1.4; color: var(--ink-soft); }

/* the product flow (signature visual object) */
.flow { position: relative; background: var(--glass-bg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--glass-border); border-radius: var(--r-xl); padding: 26px; box-shadow: var(--shadow-lg); }
.flow::before { content: ""; position: absolute; left: 49px; top: 46px; bottom: 46px; width: 2px; background: linear-gradient(var(--accent-2), var(--accent), var(--gold)); opacity: .5; border-radius: 2px; }
.flow-node { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: var(--r); transition: background .2s var(--ease); }
.flow-node + .flow-node { margin-top: 6px; }
.flow-node:hover { background: var(--surface-2); }
.flow-node .fn-body h4 { font-size: 1rem; letter-spacing: -0.01em; margin: 0; }
.flow-node .fn-body p { margin: 2px 0 0; font-size: .84rem; color: var(--ink-soft); }
.flow-node .ico { position: relative; z-index: 1; }
.flow-node.is-final .fn-body h4 { color: var(--accent); }

/* cards */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease), border-color .22s; }
.card-link { display: block; color: inherit; }
.card-link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); color: inherit; }
.card h3 { margin: 18px 0 8px; }
.card p { color: var(--ink-soft); margin: 0; font-size: .98rem; }
.card .card-foot { margin-top: 18px; }
.card-arrow { position: absolute; top: 24px; right: 24px; color: var(--ink-faint); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s var(--ease-spring); }
.card-link:hover .card-arrow { opacity: 1; transform: none; color: var(--accent); }
.card-arrow svg { width: 18px; height: 18px; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* channels (start here) */
.channel { display: flex; gap: 16px; align-items: flex-start; }
.channel .ico { margin: 0; }
.channel .ch-body { min-width: 0; }
.channel .ch-body h3 { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; flex-wrap: wrap; }
.channel .ch-body p { font-size: .95rem; }
.channel.disabled { opacity: .6; }
.channel.disabled .ico { filter: grayscale(.6); }
.channel .ch-cta { margin-top: 10px; font-size: .92rem; }
.pill-soft { font-size: .66rem; font-weight: 680; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); background: var(--surface-2); border: 1px solid var(--line); padding: 3px 9px; border-radius: var(--r-pill); }

/* pill chips */
.pill-list { display: flex; flex-wrap: wrap; gap: 11px; }
.pill-list a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); font-size: .94rem; font-weight: 560; box-shadow: var(--shadow-sm); transition: transform .16s var(--ease-spring), border-color .16s, color .16s; }
.pill-list a svg { width: 15px; height: 15px; color: var(--ink-faint); transition: color .16s, transform .16s var(--ease-spring); }
.pill-list a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }
.pill-list a:hover svg { color: var(--accent); transform: translateX(3px); }

/* self-select trigger grid (the "what did you receive" moment) */
.trigger-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.trigger-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); color: var(--ink); font-weight: 580; transition: transform .18s var(--ease-spring), box-shadow .18s var(--ease), border-color .18s; }
.trigger-card .ico { width: 42px; height: 42px; border-radius: 12px; }
.trigger-card .ico svg { width: 21px; height: 21px; }
.trigger-card .tc-label { flex: 1 1 auto; font-size: .96rem; line-height: 1.25; letter-spacing: -0.01em; }
.trigger-card .tc-arrow { color: var(--ink-faint); opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s var(--ease-spring); }
.trigger-card .tc-arrow svg { width: 17px; height: 17px; }
.trigger-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }
.trigger-card:hover .tc-arrow { opacity: 1; transform: none; color: var(--accent); }

/* authority strip (honest scale) */
.authority-band { background: var(--brand); color: #eaf1fb; padding: 42px 0; }
.authority-strip { display: flex; align-items: center; justify-content: center; gap: 8px 40px; flex-wrap: wrap; }
.as-stat { text-align: center; }
.as-stat strong { display: block; font-family: "Inter", sans-serif; font-size: 2.6rem; font-weight: 780; letter-spacing: -0.04em; color: #fff; line-height: 1; }
.as-stat span { display: block; font-size: .82rem; color: #a9bdd6; margin-top: 8px; }
.as-divider { width: 1px; height: 42px; background: rgba(255,255,255,.14); }
.authority-note { text-align: center; max-width: 62ch; margin: 26px auto 0; color: #c3d2e4; font-size: .98rem; }

/* steps / timeline */
.timeline { position: relative; display: grid; gap: 22px; }
.timeline::before { content: ""; position: absolute; left: 19px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--accent), var(--line-strong)); opacity: .35; }
.tl-item { position: relative; display: flex; gap: 20px; align-items: flex-start; }
.tl-num { position: relative; z-index: 1; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--grad-primary); color: #fff; display: grid; place-items: center; font-weight: 680; font-size: .98rem; box-shadow: var(--shadow-accent), var(--shadow-inner); }
.tl-item h3 { margin-bottom: 6px; }
.tl-item p { color: var(--ink-soft); margin: 0; }

/* roles: swimlane */
.roles { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.role { position: relative; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.role::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.role.ai::before { background: var(--grad-tile); }
.role.human::before { background: var(--grad-gold); }
.role.you::before { background: var(--grad-good); }
.role .ico { margin-bottom: 16px; }
.role .tag { font-size: .72rem; font-weight: 680; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 8px; color: var(--ink-faint); }
.role h3 { margin-bottom: 8px; }
.role p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* trust row */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 20px; }
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-item h4 { font-size: 1rem; margin-bottom: 5px; color: var(--ink); letter-spacing: -0.01em; }
.trust-item p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* crumbs + article */
.crumbs { font-size: .84rem; color: var(--ink-soft); padding: 24px 0 0; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 8px; opacity: .55; }
.article { padding: 10px 0 44px; }
.article h1 { margin: 14px 0 16px; font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.article .dek { font-size: clamp(1.12rem, 1rem + 0.55vw, 1.34rem); color: var(--ink-soft); line-height: 1.45; margin-bottom: 8px; letter-spacing: -0.01em; }
.prose { max-width: 740px; }
.prose > p { color: var(--ink-soft); font-size: 1.08rem; }
.prose h2, .sec-h2 { margin: 34px 0 14px; display: flex; align-items: center; gap: 12px; }

/* Knowledge Hub articles: free-form ported content (plain h3 / ul markup) */
.prose-article h3 { margin: 34px 0 12px; font-size: 1.16rem; letter-spacing: -0.02em; }
.prose-article ul:not([class]) { margin: 0 0 1rem; padding-left: 24px; color: var(--ink-soft); font-size: 1.05rem; }
.prose-article ul:not([class]) li { margin: 7px 0; }
.prose-article a { text-decoration: underline; text-underline-offset: 3px; }
.answer-block { margin: 26px 0; padding: 22px 24px; background: var(--accent-soft); border: 1px solid var(--line-strong); border-left: 4px solid var(--accent); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.answer-block .answer-label { margin: 0 0 8px; color: var(--accent); font-size: .76rem; font-weight: 740; letter-spacing: .07em; text-transform: uppercase; }
.answer-block p { color: var(--ink); font-size: 1.02rem; }
.answer-block p:last-child { margin-bottom: 0; }
.authority-table-wrap { margin: 0 0 26px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.authority-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.authority-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.authority-table th, .authority-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .93rem; line-height: 1.5; }
.authority-table thead th { border-top: 0; background: var(--surface-2); color: var(--ink); font-weight: 680; }
.authority-table tbody th { color: var(--ink); font-weight: 650; width: 22%; }
.plain-list { margin: 0 0 1rem; padding-left: 24px; color: var(--ink-soft); font-size: 1.02rem; }
.plain-list li { margin: 7px 0; }
.source-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.source-list li { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); }
.source-list a { display: block; color: var(--accent); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.source-list span { display: block; margin-top: 4px; color: var(--ink-soft); font-size: .9rem; }
.byline { display: flex; align-items: center; gap: 12px; margin: 20px 0 8px; }
.byline img { border-radius: 50%; }
.byline .b-name { display: block; font-weight: 620; font-size: .95rem; color: var(--ink); }
.byline .b-meta { display: block; font-size: .8rem; color: var(--ink-faint); }
.h2-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
.h2-ico svg { width: 18px; height: 18px; }

/* visual lists that replace bullets */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 18px; box-shadow: var(--shadow-sm); transition: transform .16s var(--ease-spring), border-color .16s; color: var(--ink); }
.check-list li:hover { transform: translateX(3px); border-color: var(--line-strong); }
.check-list li .mk { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: .78rem; font-weight: 700; margin-top: 1px; }
.check-list.numbered li .mk { background: var(--grad-primary); box-shadow: var(--shadow-inner); }
.check-list.signal li .mk { background: var(--grad-tile); }
.check-list.good li .mk { background: var(--grad-good); }
.check-list.ink li .mk { background: var(--grad-ink); }
.check-list li .mk svg { width: 15px; height: 15px; }

.alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.alert-list li { display: flex; gap: 14px; align-items: flex-start; background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent); border-radius: var(--r); padding: 15px 18px; color: var(--ink); }
.alert-list li .mk { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-danger); color: #fff; box-shadow: var(--shadow-inner); }
.alert-list li .mk svg { width: 15px; height: 15px; }

.doc-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.doc-chips li { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 15px; box-shadow: var(--shadow-sm); font-size: .95rem; color: var(--ink); transition: transform .16s var(--ease-spring), border-color .16s; }
.doc-chips li:hover { transform: translateY(-2px); border-color: var(--accent); }
.doc-chips li .mk { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--accent); }
.doc-chips li .mk svg { width: 17px; height: 17px; }

/* expert card */
.expert { position: relative; background: linear-gradient(155deg, var(--surface), var(--surface-2)); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 26px 28px; margin: 30px 0; box-shadow: var(--shadow); overflow: hidden; }
.expert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-gold); }
.expert-head { display: flex; align-items: center; gap: 15px; margin-bottom: 16px; }
.expert-avatar { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 3px var(--surface), var(--shadow); background: var(--surface-3); }
.expert-label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gold); margin: 0 0 4px; display: inline-flex; align-items: center; gap: 7px; }
.expert-name { font-weight: 700; color: var(--ink); display: block; font-size: 1.02rem; letter-spacing: -0.01em; }
.expert-cred { font-size: .8rem; color: var(--ink-soft); display: block; }
.expert-body { margin: 0; color: var(--ink); font-size: 1.02rem; }

/* founder card (About) */
.founder-card { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: center; background: linear-gradient(155deg, var(--surface), var(--surface-2)); border: 1px solid var(--line-strong); border-radius: var(--r-xl); padding: 26px; box-shadow: var(--shadow); }
/* Full portrait, never cropped: no fixed height or aspect-ratio box, so the
   image's own intrinsic ratio always governs the rendered size. */
.founder-portrait { position: relative; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.founder-portrait img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.founder-body .expert-label { color: var(--accent); }
.founder-name { font-weight: 720; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--ink); display: block; margin: 2px 0 4px; }
/* Board-president credential primary, construction management secondary -
   two distinct lines, never tiny metadata. */
.founder-cred-primary { display: block; font-size: 1.125rem; font-weight: 700; color: var(--ink); line-height: 1.35; margin: 2px 0 0; }
.founder-cred-secondary { display: block; font-size: 1rem; font-weight: 500; color: var(--ink-soft); line-height: 1.4; margin: 3px 0 0; }
.founder-quote { margin: 16px 0 0; color: var(--ink); font-size: 1.02rem; line-height: 1.6; }

/* home trust block (understated, founder not dominant) */
.trust-block { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center; }
.tb-photo { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 5; }
.tb-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-body { max-width: 52ch; }

/* reviewer chip (Get Help) */
.reviewer { display: flex; align-items: center; gap: 15px; margin-top: 22px; padding: 16px 20px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.reviewer img { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 3px var(--surface), var(--shadow-sm); }
.reviewer p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.reviewer strong { color: var(--ink); }

/* case footer signature (tiny, non-dominant) */
.case-sign { display: flex; align-items: center; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.case-sign img { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px var(--surface), var(--shadow-sm); }
.case-sign span { font-size: .88rem; color: var(--ink-faint); }
.case-sign strong { color: var(--ink-soft); }

/* cta blocks (tiers preserved) */
.cta { position: relative; border-radius: var(--r-xl); padding: 34px 36px; margin: 28px 0; box-shadow: var(--shadow); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.cta h2 { font-size: 1.4rem; margin-bottom: 10px; }
.cta p { color: var(--ink-soft); margin: 0 0 22px; max-width: 58ch; }
.cta .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta .tertiary { margin: 16px 0 0; font-size: .88rem; color: var(--ink-faint); }
.cta .price-hint { font-size: .84rem; color: var(--ink-faint); }
.cta--action { background: var(--grad-ink); border-color: transparent; color: #eaf1fb; }
.cta--action::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(61,132,214,.35), transparent 70%); }
.cta--action h2 { color: #fff; }
.cta--action p { color: #c3d2e4; }
.cta--action .tertiary { color: #93a7c0; }
.cta--action .tertiary a { color: #fff; }
.cta--action .price-hint { color: #93a7c0; }
.cta--diagnostic { background: linear-gradient(150deg, var(--accent-soft), var(--surface)); border-color: var(--line-strong); }
.cta > * { position: relative; z-index: 1; }

/* faq */
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; padding: 19px 22px; font-weight: 640; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: 0 0 auto; transition: transform .25s var(--ease-spring); color: var(--ink-faint); }
.faq details[open] summary .chev { transform: rotate(180deg); color: var(--accent); }
.faq details p { padding: 0 22px 20px; margin: 0; color: var(--ink-soft); }

/* badges / provenance */
.badge { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 620; padding: 6px 13px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
.badge svg { width: 14px; height: 14px; color: var(--accent); }
.provenance { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r); padding: 17px 20px; font-size: .92rem; color: var(--ink-soft); }
.provenance strong { color: var(--ink); }

/* extra-note: shown on paid product pages and the Get Help comparison
 * surface. Service Catalog v2.1, Stage 2: this was the upgrade-credit
 * rule; upgrades are removed, so .gh-upgrade-rule (unused since) is gone
 * too. */
.pp-extra-note { margin-top: 14px; padding: 12px 14px; background: var(--accent-soft); border: 1px solid var(--accent-2); border-radius: var(--r); font-size: .88rem; color: var(--ink); line-height: 1.5; }
.disclaimer { font-size: .9rem; color: var(--ink-soft); font-style: italic; text-align: center; padding: 26px 12px 0; max-width: 68ch; margin: 26px auto 0; border-top: 1px solid var(--line); } /* TS-04: meaningful small text, AA contrast */

/* Real Condo Cases: COA Client Case vs Community Situation, always visually distinct */
.badge-client { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-2); font-weight: 680; }
.badge-client svg { color: var(--accent); }
.badge-community { background: var(--surface-3); color: var(--ink-soft); border-color: var(--line-strong); font-weight: 680; }
.badge-community svg { color: var(--ink-faint); }
.case-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.case-legend-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.case-legend-item p { margin: 10px 0 0; font-size: .92rem; color: var(--ink-soft); }
.case-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 0 8px; border-top: 1px solid var(--line); margin-top: 28px; }
.case-search-input { flex: 1 1 240px; min-width: 200px; padding: 10px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: .92rem; }
.case-filter-group { display: flex; flex-wrap: wrap; gap: 8px; }
.case-filter-btn { padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); font-size: .84rem; font-weight: 600; cursor: pointer; }
.case-filter-btn.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.case-filter-reset { padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: none; color: var(--ink-faint); font-size: .84rem; cursor: pointer; }
.case-filter-empty { padding: 18px 0; color: var(--ink-soft); font-size: .92rem; }
[data-case-card][hidden] { display: none; }
[data-case-cluster][hidden] { display: none; }
@media (max-width: 720px) { .case-legend { grid-template-columns: 1fr; } }

/* related */
.related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.related-list a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px; border-radius: var(--r-sm); color: var(--ink); font-weight: 560; transition: background .16s, color .16s, transform .16s var(--ease-spring); }
.related-list a:hover { color: var(--accent); background: var(--surface-2); transform: translateX(3px); }
.related-list .tag { font-size: .74rem; color: var(--ink-faint); font-weight: 500; }

/* panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; box-shadow: var(--shadow-sm); }

/* library */
.cmd { position: relative; max-width: 560px; }
.cmd input { width: 100%; padding: 17px 18px 17px 52px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s; }
.cmd input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.cmd svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-faint); }
.cmd .kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 6px; padding: 3px 8px; background: var(--surface-2); }
.cluster { margin-bottom: 32px; }
.cluster-head { display: flex; align-items: center; gap: 13px; margin-bottom: 6px; }
.cluster-head .ico { width: 34px; height: 34px; border-radius: 10px; }
.cluster-head .ico svg { width: 18px; height: 18px; }
.cluster-head h2 { font-size: 1.24rem; }
.cluster-desc { color: var(--ink-soft); font-size: .95rem; margin: 0 0 16px; max-width: 72ch; }
.guide-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
.guide-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); color: var(--ink); font-weight: 550; font-size: .97rem; transition: background .16s, color .16s, transform .16s var(--ease-spring); }
.guide-links a .gl-arrow { opacity: 0; color: var(--ink-faint); transition: opacity .16s, transform .16s var(--ease-spring); }
.guide-links a .gl-arrow svg { width: 15px; height: 15px; }
.guide-links a:hover { background: var(--surface-2); color: var(--accent); }
.guide-links a:hover .gl-arrow { opacity: 1; transform: translateX(3px); color: var(--accent); }
.hidden { display: none !important; }
.empty-note { color: var(--ink-soft); padding: 20px 0; } /* TS-04: search feedback, AA contrast */
.case-card .badge, .article-card .badge { margin-bottom: 14px; }
.case-card h3, .article-card h3 { font-size: 1.06rem; margin: 0 0 8px; }
/* CL-05: cluster/category sections are breadcrumb anchor targets; keep them
   clear of the sticky nav when jumped to. */
.cluster[id], #mission { scroll-margin-top: 90px; }

/* form */
.form-field { margin-bottom: 18px; }
.form-field select { width: 100%; min-width: 0; max-width: 100%; }
.ct-form-grid > * { min-width: 0; }
.form-field label { display: block; font-size: .88rem; font-weight: 620; color: var(--ink); margin-bottom: 8px; }
.form-field input, .form-field textarea { width: 100%; padding: 13px 16px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: .96rem; transition: border-color .18s, box-shadow .18s; }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.form-field textarea { min-height: 138px; resize: vertical; }
/* Consent checkbox: native size inside its flex label, never a full-width field. */
.form-field input[type="checkbox"] { width: auto; padding: 0; box-shadow: none; accent-color: var(--accent); }
/* Turnstile widget: reserve its height and keep it inside the form card. */
.cf-turnstile { margin: 2px 0 16px; min-height: 65px; max-width: 100%; overflow: hidden; }
.cf-turnstile iframe { max-width: 100%; }
.dropzone { border: 1.5px dashed var(--line-strong); border-radius: var(--r); padding: 28px; text-align: center; color: var(--ink-faint); background: var(--surface-2); transition: border-color .18s, background .18s; }
.dropzone:hover { border-color: var(--accent); }
.dropzone .ico { margin: 0 auto 10px; }

/* pricing cards (get help) */
.price-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 30px; box-shadow: var(--shadow-sm); transition: transform .22s var(--ease-spring), box-shadow .22s; overflow: hidden; }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card .pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.price-card h3 { font-size: 1.3rem; }
.price-card .amount { font-size: 2.1rem; font-weight: 760; letter-spacing: -0.03em; color: var(--ink); }
.price-card .amount small { font-size: .9rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.price-card p.desc { color: var(--ink-soft); margin: 0 0 20px; font-size: .98rem; }
/* Homepage three-path service grid: equal-height cards with the CTA label
   pinned to the bottom edge (scoped so other price-card uses are untouched). */
.service-paths .price-card { display: flex; flex-direction: column; }
.service-paths .price-card .link-arrow { margin-top: auto; }
/* Featured paid offer: restrained emphasis for the recommended starting
   option ($99) on the homepage and services grids. Same surface and radius
   as every price-card; only the border ring and a small flag differ. */
.price-card.pc-featured { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2), var(--shadow-sm); }
.price-card.pc-featured:hover { box-shadow: 0 0 0 1px var(--accent-2), var(--shadow); }
.pc-flag { display: inline-flex; align-items: center; align-self: flex-start; font-size: .7rem; font-weight: 680; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 11px; border-radius: var(--r-pill); margin-bottom: 12px; }
.pc-fit { font-size: .9rem; color: var(--ink-soft); margin: 0 0 14px; }
.pc-feat { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.pc-feat li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--ink-soft); }
.pc-feat li .mk { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--grad-good); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.pc-feat li .mk svg { width: 12px; height: 12px; }

/* footer */
.footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: 28px; }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 40px 24px 32px; }
.footer .brand { margin-bottom: 14px; }
.footer .about { color: var(--ink-soft); font-size: .92rem; max-width: 34ch; }
/* Official social profiles (2026-07-23): quiet secondary text links in the
   footer brand column and the About founder card - never header/hero/CTA. */
.footer-social { display: flex; gap: 16px; margin-top: 12px; }
.footer-social a { color: var(--ink-soft); font-size: .88rem; text-decoration: none; }
.footer-social a:hover { color: var(--ink); text-decoration: underline; }
.founder-social { margin-top: 12px; font-size: .88rem; }
.founder-social a { color: var(--ink-soft); margin-right: 16px; }
.founder-social a:hover { color: var(--ink); }
/* TS-04/TS-05: column titles are navigation-group headings (h2.foot-h, a
   non-skipping level) keeping the original h4 appearance, with AA contrast. */
.footer h4, .footer .foot-h { font-size: .76rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); font-weight: 680; line-height: 1.12; margin: 0 0 15px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; }
.footer li a { color: var(--ink-soft); font-size: .94rem; transition: color .15s; }
.footer li a:hover { color: var(--ink); }
.footer-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.ft-item { display: flex; align-items: center; gap: 13px; }
.ft-item .ico { width: 40px; height: 40px; border-radius: 11px; }
.ft-item .ico svg { width: 20px; height: 20px; }
.ft-item strong { display: block; font-size: .92rem; color: var(--ink); letter-spacing: -0.01em; }
.ft-item span { display: block; font-size: .8rem; color: var(--ink-soft); line-height: 1.35; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.footer-brand .brand { margin-bottom: 16px; }
.footer-contact { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .9rem; font-weight: 560; color: var(--ink); }
.footer-contact svg { width: 16px; height: 16px; color: var(--accent); }
.footer-bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
.footer-bottom p { margin: 0; font-size: .82rem; color: var(--ink-soft); max-width: 74ch; }
.footer-region { color: var(--ink-soft) !important; font-weight: 560; white-space: nowrap; }
.proto-pill { font-size: .72rem; font-weight: 620; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); padding: 5px 12px; border-radius: var(--r-pill); }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* responsive */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.open .nav-links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 16px 18px; box-shadow: var(--shadow); }
  .nav.open .nav-links a { padding: 13px; }
  .grid-3, .roles { grid-template-columns: 1fr; }
  .trigger-grid, .footer-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .founder-card { grid-template-columns: 1fr; }
  .founder-portrait { max-width: 220px; }
  .trust-block { grid-template-columns: 1fr; gap: 24px; }
  .tb-photo { max-width: 240px; }
}
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .guide-links, .doc-chips { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .brand-sub { display: none; }
  .as-stat strong { font-size: 2.1rem; }
  .as-divider { display: none; }
  .authority-strip { gap: 22px 30px; }
  .hero-cta .btn { width: 100%; }
  .hero-founder img { width: 112px; height: 112px; }
  .cta { padding: 26px; }
}
@media (max-width: 460px) {
  .trigger-grid { grid-template-columns: 1fr; }
}
/* The shared header and footer exceeded 320px by their fixed gaps and
   intrinsic grid sizes on Get Help and Contact. Keep every control visible. */
@media (max-width: 360px) {
  .nav-inner { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .footer-trust { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Header brand: extracted emblem + one-line HTML wordmark. -------------
   The emblem inherits the existing 58px/50px height rules (header stays
   77px desktop / 69px mobile). The wordmark hides exactly where measured
   space runs out: 941-1079px (full nav links present; links + text need
   >=1080px) and below 560px (narrow mobile). */
.brand-logo { height: 58px; width: auto; display: block; }
.nav .brand { flex-shrink: 0; }
/* The brand word is the Home link, so it is bold only ON Home. Everywhere
   else it drops to the inactive nav weight (560) and stops competing with
   the real current-page item. Size, colour and logo are unchanged. */
.brand-word { font-weight: 560; font-size: 1.06rem; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.brand.active .brand-word { font-weight: 740; }
.brand-word::after { font-weight: 740; }
@media (max-width: 640px) { .brand-logo { height: 50px; } }
@media (max-width: 1079px) and (min-width: 941px) { .brand-word { display: none; } }
/* Phones: instead of hiding the business name, stack a compact lockup -
   a slightly smaller emblem with the full brand name bold beneath it,
   still one home link. The lockup is ~54px tall, so the sticky header
   grows only ~4px and never collides with the Get Help pill or menu. */
@media (max-width: 559px) {
  .nav .brand { flex-direction: column; align-items: flex-start; gap: 2px; }
  .nav .brand .brand-logo { height: 40px; }
  .brand-word { font-size: 11px; line-height: 1.1; letter-spacing: -0.01em; }
}

/* ---- Home hero: denser two-column composition with the founder portrait. --- */
.hero-home { padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 56px); background: var(--hero-canvas); }
.hero-home h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem); max-width: 21ch; }
.hero-home .lead { margin-top: 18px; max-width: 52ch; }
.hero-cta-stack { margin-top: 16px; }
.hero-guides-link { margin-top: 18px; font-weight: 650; }
.hero-guides-link a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.hero-guides-link a:hover { text-decoration: underline; }
.hero-guides-link svg { width: 15px; height: 15px; }
/* Final light Apple-style hero: approved copy and a prominent founder
   trust block. Column proportions on 901px+ now come from the shared
   .home-top-grid wrapper below, not from a grid nested inside this
   section. */
@media (min-width: 901px) {
  .hero-home {
    position: relative;
    overflow: hidden;
    background: var(--hero-canvas);
    padding: 10px 0 48px;
  }
}
.hero-trust { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
/* Rounded-rectangle photo (never a full circle): a circular mask cropped
   into the office portrait's head/shoulders composition, so the frame is
   4:5 with object-fit:contain - the image can never be cut, only
   letterboxed against the surface color if its ratio ever changes. */
.ht-photo { width: 140px; height: 175px; border-radius: var(--r-lg); flex: 0 0 auto;
  border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(12,22,38,.14);
  object-fit: contain; object-position: center top; background: var(--surface-2); }
.ht-text { display: flex; flex-direction: column; gap: 4px; }
.ht-name { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; }
.ht-name svg { width: 36px; height: 36px; color: #B3261E; stroke-width: 2.6; flex: 0 0 auto; }
.ht-name strong { color: var(--ink); letter-spacing: -0.02em; font-weight: 720; white-space: nowrap; }
.ht-cred { font-size: 1rem; color: var(--ink-soft); line-height: 1.5; }
/* Board-president credential primary, construction management secondary. */
.ht-cred-primary { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.ht-cred-secondary { font-weight: 500; }
/* ---- Home: top-of-page wrapper. VF-03-02 (locked Visual Funnel 2.0
   frames): the ChatGPT/legal comparison section and the old text How It
   Works flow left the homepage, so the wrapper now only centers the hero
   and anchors the Task 14 spacing-corridor rules below. */
.home-top-grid { max-width: 1180px; margin: 0 auto; }
@media (max-width: 480px) {
  .hero-home { padding: 18px 0 34px; }
  .hero-home h1 { font-size: 1.72rem; }
  .hero-home .lead { font-size: 1rem; margin-top: 12px; }
  .hero-cta-stack { margin-top: 14px; gap: 10px; }
  .hero-cta-stack .btn-lg { width: 100%; justify-content: center; }
  .hero-guides-link { margin-top: 14px; }
  .hero-trust { margin-top: 16px; gap: 14px; }
  .ht-photo { width: 116px; height: 145px; }
  .ht-name { font-size: 1.24rem; }
  .ht-name svg { width: 28px; height: 28px; }
  .ht-cred { font-size: 1rem; }
  .ht-cred-primary { font-size: 1rem; }
}

/* ---- Batch B (TS-03/TS-04/TS-05) accessibility additions --------------------
   New scoped classes only; the global --ink-faint token and every frozen
   Hero rule above are untouched. */
/* TS-04: accessible small-text color for meaningful notes (replaces .faint
   on contact status/instructions, CTA notes, and provenance notes). */
.note-soft { color: var(--ink-soft); }
.hero-note.note-soft { color: var(--ink-soft); } /* non-Hero .hero-note uses only */
/* TS-05: visual twins for demoted/promoted headings. Values mirror the h2/h3/h4
   element styles plus each component's contextual rule, so rendering is identical. */
.h-sub { font-size: 1.16rem; letter-spacing: -0.02em; } /* h2 rendered like h3 */
.trust-item .ti-h { font-size: 1rem; margin: 0 0 5px; color: var(--ink); letter-spacing: -0.01em; font-weight: 700; line-height: 1.12; }
.tl-item .tl-h { font-size: 1.16rem; margin: 0 0 6px; color: var(--ink); letter-spacing: -0.02em; font-weight: 700; line-height: 1.12; }
.channel .ch-body .card-h { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; flex-wrap: wrap; font-size: 1.16rem; color: var(--ink); letter-spacing: -0.02em; font-weight: 700; line-height: 1.12; }
.flow-node .fn-body .fn-h { font-size: 1rem; margin: 0; color: var(--ink); letter-spacing: -0.01em; font-weight: 700; line-height: 1.12; }
.flow-node.is-final .fn-body .fn-h { color: var(--accent); }

/* ---- Home hero R4.1 (approved Figma frames 67:3 / 67:23 / 74:2 / 67:42).
   Scoped entirely to .hero-r41 / .hr41-* so no other section is affected.
   Copy comes first in the DOM: tablets and mobile stack in the approved
   order (copy, CTAs, trust line, then portrait); desktop places the
   portrait in the left column via explicit grid placement. The portrait
   is the swappable assets/founder/alexander-baraz-hero-square.webp and is
   never cropped: fluid width, height follows the file's own aspect ratio, no
   object-fit. The current approved Figma hero uses a SQUARE photo slot, so the
   square file renders square at every breakpoint with no rule change.
   The primary CTA is the design system's approved amber; everything else
   stays on the site's navy/ink tokens. */
.hero-r41 { padding: clamp(16px, 2.5vw, 28px) 0 20px; }
.hero-r41 .wrap { max-width: 1268px; }
.hero-r41 .hr41-grid { display: grid; grid-template-columns: minmax(300px, 512px) minmax(0, 640px); gap: clamp(36px, 5vw, 68px); align-items: start; justify-content: center; }
.hr41-copy { grid-column: 2; grid-row: 1; }
.hr41-portrait { grid-column: 1; grid-row: 1; margin: 0; }
.hr41-photo { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: 0 14px 36px rgba(14, 32, 54, .14); }
.hr41-caption { margin-top: 12px; }
.hr41-name { display: block; font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.hr41-exp { display: block; margin-top: 2px; font-size: .94rem; color: var(--ink-soft); }
.hero-r41 .eyebrow { margin-bottom: 18px; }
.hr41-h1 { font-size: clamp(2.1rem, 3.75vw, 3.375rem); line-height: 1.11; max-width: 640px; }
.hr41-deck { margin: 14px 0 0; font-size: clamp(1.19rem, 1.8vw, 1.625rem); line-height: 1.31; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.hr41-support { margin: 16px 0 0; font-size: clamp(1rem, 1.45vw, 1.3125rem); line-height: 1.52; color: var(--ink-soft); max-width: 60ch; }
.hr41-cta { margin-top: 22px; align-items: center; }
.hero-r41 .hr41-btn { background: #fbbf24; color: #0b1f33; border-radius: 12px; font-size: 1.125rem; }
.hero-r41 .hr41-btn:hover { background: #f59e0b; color: #0b1f33; }
.hr41-secondary { font-size: 1.125rem; }
.hr41-trust { margin: 14px 0 0; font-size: .94rem; color: var(--ink-soft); }
/* Responsive copy swap: desktop/tablet read the long copy, mobile the short
   copy. display:none removes the hidden variant from the accessibility
   tree, so assistive technology only ever gets one version. */
.hr41-short { display: none; }
@media (max-width: 900px) {
  .hero-r41 .hr41-grid { display: block; max-width: 640px; margin: 0 auto; }
  /* The width cap sits on the PHOTO, not the figure, so the centered
     caption text can use the full content width to wrap in two lines. */
  .hr41-portrait { margin: 24px auto 0; }
  .hr41-photo { max-width: 480px; margin: 0 auto; }
  .hr41-caption { text-align: center; }
  .hr41-h1 { font-size: clamp(2.06rem, 6vw, 2.875rem); }
}
/* The shorter tablet (768x1024 class of devices) gets the smaller approved portrait. */
@media (max-width: 900px) and (max-height: 1120px) {
  .hr41-photo { max-width: 340px; }
}
@media (max-width: 640px) {
  /* Compact mobile hero: short copy variant, portrait directly after the
     primary CTA, secondary CTA and trust line below the credentials.
     The wrappers become display:contents so every element is a direct
     flex item of the column and can be reordered without touching the
     desktop/tablet DOM. Everything stays in normal document flow - no
     fixed positioning, no viewport-height clipping, no overflow hiding -
     so browser controls and safe-area insets can never cover the
     portrait; the page simply scrolls. */
  .hr41-long { display: none; }
  .hr41-short { display: inline; }
  .hero-r41 { padding-top: 16px; }
  .hero-r41 .hr41-grid { display: flex; flex-direction: column; gap: 0; }
  .hr41-copy, .hr41-cta { display: contents; }
  .hero-r41 .eyebrow { order: 1; margin: 0; }
  .hero-r41 .hr41-h1 { order: 2; margin: 14px 0 0; font-size: 30px; line-height: 34px; }
  .hr41-deck { order: 3; margin: 12px 0 0; font-size: 1.125rem; line-height: 1.34; }  /* 18px / 24px */
  .hr41-support { order: 4; margin: 12px 0 0; font-size: .94rem; line-height: 1.47; } /* 15px / 22px */
  .hero-r41 .hr41-btn { order: 5; margin: 16px 0 0; width: 100%; justify-content: center; padding: 12px 16px; font-size: 1.0625rem; white-space: nowrap; }
  /* Mobile portrait, revised 2026-08-11. Was 160px and centred, which read
     as an avatar rather than a portrait. Now 200px and aligned to the left
     edge of the copy column, so the founder sits in the same optical column
     as the headline and CTA instead of floating in the middle. Desktop and
     tablet are untouched: this rule only exists inside the 640 breakpoint. */
  .hr41-portrait { order: 6; margin: 16px 0 0; }
  .hr41-photo { max-width: 200px; margin: 0; }
  .hr41-caption { margin-top: 8px; text-align: left; }
  .hr41-name { font-size: .96rem; }
  .hr41-exp { margin-top: 3px; font-size: .84rem; line-height: 1.4; }
  .hr41-secondary { order: 7; margin: 12px 0 0; align-self: center; font-size: 1rem; }
  .hr41-trust { order: 8; margin: 8px 0 0; font-size: .815rem; align-self: center; text-align: center; }
}

/* ---- Task 09 (conversion audit fixes), scoped additions only. ----
   .trigger-card-split: document cards whose primary action routes to the
   Free Notice Decoder, with the matching guide as a secondary link.
   (The .diff-rows comparison rows left with the homepage section in
   VF-03-02.) */
.trigger-card-split { align-items: flex-start; }
.trigger-card-split:hover { transform: none; border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.tc-body { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.trigger-card-split .tc-label { font-weight: 640; }
.tc-action { display: inline-flex; align-items: center; gap: 6px; font-weight: 640; font-size: .92rem; color: var(--accent); }
.tc-action svg { width: 15px; height: 15px; }
.tc-action:hover { text-decoration: underline; }
.tc-guide { font-size: .85rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.tc-guide:hover { color: var(--accent); }

/* ---- Task 11 (homepage freeze batch). ----
   Releases the last remnant of the old paired layout: How It Works now
   uses the same 780px narrow-column rhythm as the FAQ and closing
   sections instead of the 460px cap that belonged to the retired
   hero-beside-flow grid. */
@media (min-width: 901px) {
  .home-how .wrap-narrow { max-width: 780px; }
}

/* ---- Task 13: "Quiet List" document selection (approved Figma Concept A). ----
   Replaces the trigger card grid. One calm panel, full-width rows, hairline
   dividers, 20px line icons, quiet chevrons. The primary row action covers
   the whole row via the ::after stretch; the guide link floats above it on
   its own z-level, so there are two clean tab stops per row and no nested
   interactive elements. Warm tint on "I'm not sure" echoes the hero glow. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ql-founder { display: flex; align-items: center; gap: 12px; margin: 4px 0 22px; }
.ql-avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 0 1px var(--line), 0 4px 10px rgba(194, 149, 60, .25); }
.ql-founder p { margin: 0; font-size: 1.02rem; color: var(--ink); }
.ql-list { list-style: none; margin: 0; padding: 0; max-width: 760px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; }
.ql-row { position: relative; display: flex; align-items: center; gap: 16px;
  padding: 17px 20px 17px 24px; transition: background .15s var(--ease); }
.ql-row + .ql-row { border-top: 1px solid var(--line); }
.ql-row:hover { background: var(--surface-2); }
.ql-row:active { background: var(--surface-3); }
.ql-ico { color: var(--ink-soft); display: grid; place-items: center; flex: 0 0 auto; }
.ql-ico svg { width: 20px; height: 20px; }
.ql-row:hover .ql-ico { color: var(--accent); }
.ql-text { flex: 1 1 auto; display: flex; align-items: center; gap: 16px; min-width: 0; }
.ql-primary { color: var(--ink); font-weight: 620; font-size: 1.02rem; line-height: 1.35; flex: 1 1 auto; }
.ql-primary:hover { color: var(--ink); }
.ql-primary::after { content: ""; position: absolute; inset: 0; }
.ql-primary:focus-visible { outline: none; }
.ql-primary:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.ql-guide { position: relative; z-index: 1; font-size: .9rem; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px; flex: 0 0 auto; }
.ql-guide:hover { color: var(--accent); }
.ql-guide:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ql-chev { color: var(--ink-faint); flex: 0 0 auto; transition: transform .18s var(--ease-spring), color .15s; }
.ql-chev svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.ql-row:hover .ql-chev { color: var(--accent); transform: translateX(2px); }
.ql-row-notsure { background: rgba(194, 149, 60, .13); }
.ql-row-notsure:hover { background: rgba(194, 149, 60, .2); }
@media (max-width: 640px) {
  .ql-row { padding: 14px 16px 14px 18px; gap: 13px; }
  .ql-text { flex-direction: column; align-items: flex-start; gap: 3px; }
  .ql-guide { font-size: .85rem; }
  .ql-founder p { font-size: .95rem; }
}

/* ---- Task 14: homepage vertical rhythm. Between-section spacing only,
   scoped to the homepage via .hero-r41 / .home-top-grid selectors so no
   other page changes. The hero-to-Quiet-List corridor (three boundaries)
   tightens ~40%; Quiet List to Services ~30%. Component-internal spacing
   is untouched.

   2026-08-11 integration: Home now stacks eight sections, one more than when
   the rhythm above was set, and on wide desktops every global clamp is
   already pinned to its maximum (54px on .section-tight, 82px on .section).
   That compounded into 90px and 118px empty bands between blocks, which the
   owner reported as looking like accidental empty sections. The two caps
   below lower only the TOP of the existing clamps, so every width below
   about 1000px, including all mobile, keeps exactly the spacing it had.
   .home-top-grid exists only on Home, so the 15 other pages that use
   .section-tight are untouched. The old "+ section + section" restore rule
   is gone: that section now simply takes the new Home baseline. ---- */
.home-top-grid ~ .section-tight { padding: clamp(34px, 4vw, 40px) 0; }
.home-top-grid ~ .section { padding: clamp(46px, 6vw, 56px) 0; }
.hero-r41 { padding-bottom: 20px; }
/* Kept at .section-tight specificity so this first-block override still wins
   over the two Home caps above. */
.home-top-grid + .section-tight { padding-top: 20px; padding-bottom: 24px; }
@media (min-width: 901px) {
  .hero-r41 { padding-bottom: 32px; }
  .home-top-grid + .section-tight { padding-top: 32px; padding-bottom: 40px; }
}

/* ---- Home document cards (.dc-*). Owner-approved 2026-08-11, Round 3.
   Eight approved editorial photographs. The whole card is one anchor to
   that document type's guide, so the repeated "Read the guide" links are
   gone and each card is a single tab stop. The Free Notice Decoder keeps
   one strong section-level entry below the grid instead of eight weak
   per-card ones. Replaces the .hy-* sheet gallery.
   Breakpoints reuse the site's existing 900 and 640. ---- */
.dc-h { margin: 0 0 6px; text-align: center; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); letter-spacing: -0.01em; }
.dc-sub { margin: 0 0 26px; text-align: center; color: var(--ink-soft); font-size: .95rem; }
.dc-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1160px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
.dc-item { display: flex; }
.dc-card { display: flex; flex-direction: column; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(12,22,38,.06), 0 4px 10px rgba(12,22,38,.05);
  text-decoration: none; color: inherit;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
/* Intrinsic ratio of the approved photography (1024x572), so nothing is cropped. */
.dc-card img { display: block; width: 100%; height: auto; aspect-ratio: 1024 / 572; object-fit: cover;
  transition: transform .16s ease; }
.dc-title { display: block; padding: 16px 18px 20px; font-weight: 640; font-size: 1.0625rem;
  line-height: 1.35; color: var(--ink); transition: color .16s ease; }
.dc-card:hover { border-color: var(--line-strong);
  box-shadow: 0 2px 4px rgba(12,22,38,.08), 0 10px 22px rgba(12,22,38,.10); }
.dc-card:hover img { transform: scale(1.03); }
.dc-card:hover .dc-title { color: var(--accent); }
.dc-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dc-card:active { transform: scale(.995);
  box-shadow: 0 1px 2px rgba(12,22,38,.06), 0 4px 10px rgba(12,22,38,.05); }
.dc-decoder { max-width: 1160px; margin: 34px auto 0; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; background: var(--accent-soft);
  border: 1.5px solid var(--accent); border-radius: 14px; padding: 22px 28px; }
.dc-decoder-h { margin: 0 0 3px; font-weight: 680; font-size: 1.125rem; color: var(--ink); }
.dc-decoder-p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.dc-decoder .btn { flex: 0 0 auto; }
@media (max-width: 900px) {
  .dc-grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; gap: 24px; }
  .dc-decoder { max-width: 720px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .dc-grid { grid-template-columns: 1fr; gap: 16px; }
  .dc-decoder { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-card, .dc-card img, .dc-title { transition: none; }
  .dc-card:hover img, .dc-card:active { transform: none; }
}

/* ---- Ultra-lean Home (Round 4, owner-approved 2026-08-11). ----------------
   One router card (.hrt-*), the honest product preview (.swyg-*), one real
   situation (.hsit-*). The trust band was removed by owner decision on
   2026-08-11; the Hero carries the authority positioning. The unified
   Decoder CTA (.btn-decoder) reuses the hero button's approved gold. */
.btn-decoder { background: #fbbf24; color: #0b1f33; border-radius: 12px; }
.btn-decoder:hover { background: #f59e0b; color: #0b1f33; }
.hrt-card { max-width: 640px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(12,22,38,.06), 0 4px 10px rgba(12,22,38,.05); }
.hrt-card > img { display: block; width: 100%; height: auto; aspect-ratio: 1024 / 572; object-fit: cover; }
.hrt-body { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 22px; }
.hrt-copy { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.hrt-strong { margin: 0; color: var(--ink); font-weight: 640; font-size: 1rem; }
.hrt-body .btn-decoder { justify-content: center; font-size: 1.0625rem; padding: 13px 16px; }
.hrt-guides { align-self: center; font-size: .95rem; }
.swyg { display: flex; align-items: flex-start; justify-content: center; gap: clamp(18px, 3vw, 34px); }
.swyg-input { width: min(300px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px; box-shadow: var(--shadow-sm); }
.swyg-input img { display: block; width: 100%; height: auto; aspect-ratio: 1024 / 572; object-fit: cover; border-radius: 8px; }
.swyg-input-h { margin: 10px 0 0; font-weight: 640; color: var(--ink); font-size: .98rem; }
.swyg-input-p { margin: 2px 0 0; color: var(--ink-faint); font-size: .84rem; }
.swyg-arrow { color: var(--ink-faint); flex: 0 0 auto; margin-top: 120px; }
.swyg-arrow svg { width: 28px; height: 28px; }
.swyg-result { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; border-top: 6px solid var(--brand); padding: 18px 20px 20px;
  box-shadow: 0 1px 2px rgba(12,22,38,.06), 0 4px 10px rgba(12,22,38,.05); }
.swyg-result-h { margin: 0 0 12px; font-weight: 680; color: var(--ink); font-size: 1.05rem; }
.swyg-k { margin: 12px 0 1px; font-size: .68rem; font-weight: 680; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); }
.swyg-v { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.45; }
.swyg-foot { margin: 18px 0 0; text-align: center; color: var(--ink-faint); font-size: .84rem; }
.hsit-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px;
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
  transition: border-color .16s ease, box-shadow .16s ease; }
.hsit-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.hsit-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hsit-eyebrow { font-size: .72rem; font-weight: 680; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.hsit-title { font-weight: 680; font-size: 1.15rem; color: var(--ink); letter-spacing: -0.01em; }
.hsit-body { color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.hsit-more { margin: 16px 0 0; text-align: center; font-size: .95rem; }
@media (max-width: 640px) {
  .swyg { flex-direction: column; align-items: center; gap: 10px; }
  .swyg-arrow { margin-top: 0; transform: rotate(90deg); }
  .hrt-body .btn-decoder, .band .btn-decoder { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hsit-card { transition: none; }
}

/* ---- VF-03-02: Home compact service summary rows (.home-svc-*). -----------
   Replaces the three price cards with the locked one-line-per-service
   rows: name and short line left, price and chevron right, recommended
   $99 row ringed in accent. Routes, service names, prices, and journey
   annotations are identical to the cards they replace. */
.home-svc-h { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.8rem); margin-bottom: 20px; }
.home-svc-rows { display: flex; flex-direction: column; gap: 14px; }
.home-svc-row { display: flex; align-items: center; gap: 18px; padding: 20px 24px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); color: inherit;
  transition: transform .18s var(--ease-spring), box-shadow .18s var(--ease), border-color .18s; }
.home-svc-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); color: inherit; }
.home-svc-row.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); }
.home-svc-row.is-featured:hover { box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.hsr-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hsr-name { font-size: 1.12rem; font-weight: 640; letter-spacing: -0.015em; color: var(--ink); }
.hsr-desc { font-size: .92rem; color: var(--ink-soft); }
.hsr-price { font-size: 1.4rem; font-weight: 760; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.hsr-chev { display: inline-flex; color: var(--ink-faint); }
.hsr-chev svg { width: 18px; height: 18px; transform: rotate(-90deg); }
.home-svc-row:hover .hsr-chev { color: var(--accent); }
.home-svc-more { margin: 18px 0 0; }
@media (max-width: 460px) {
  .home-svc-row { padding: 16px; gap: 12px; }
  .hsr-name { font-size: 1.02rem; }
  .hsr-desc { font-size: .88rem; }
  .hsr-price { font-size: 1.16rem; }
}

/* ---- VF-03-01: Visual Funnel 2.0 shared components (vf-* only). -----------
   Reusable infrastructure for the VF 2.0 page batch; no page uses these
   classes yet, so shipping this block changes no rendered page. Everything
   maps onto existing tokens (surfaces, lines, accent, radius, shadows) and
   the existing .btn system; no colors or type ramps are invented here. ---- */

/* Visibility helpers: comparison table is the desktop presentation, the
   compare cards are the mobile one. Pages wrap each in the matching helper.
   Cut at 900px (VF-03-03 correction from 760px): the 840px-min table plus
   the wrap gutters first fits without internal scrolling at ~890px, and
   the locked design requires all four columns visible whenever the table
   shows, so tablets below that width get the cards. */
@media (min-width: 901px) { .vf-only-mobile { display: none !important; } }
@media (max-width: 900px) { .vf-only-desktop { display: none !important; } }

/* 1. vf-comparison-table (desktop) */
.vf-compare { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow-x: auto; }
.vf-compare:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vf-compare-table { width: 100%; min-width: 840px; border-collapse: collapse; }
.vf-compare-table th, .vf-compare-table td { padding: 16px 20px; text-align: left; vertical-align: top; }
.vf-compare-table thead th { padding-top: 26px; padding-bottom: 18px; }
.vf-ct-title { display: block; font-size: 1.12rem; font-weight: 640; letter-spacing: -0.015em; color: var(--ink); }
.vf-ct-flag { display: block; margin-top: 4px; font-size: .84rem; font-weight: 600; color: var(--accent); }
.vf-compare-table tbody th { font-weight: 500; font-size: .92rem; color: var(--ink-faint); white-space: nowrap; }
.vf-compare-table tbody td { font-size: .96rem; color: var(--ink); }
.vf-compare-table tbody tr { border-top: 1px solid var(--line); }
.vf-compare-table tbody tr:nth-child(even) > th, .vf-compare-table tbody tr:nth-child(even) > td { background: var(--surface-2); }
.vf-compare-table th.is-featured, .vf-compare-table td.is-featured { background: var(--accent-soft) !important; }
.vf-compare-table tfoot td { padding-top: 20px; padding-bottom: 26px; }
.vf-compare-table tfoot .btn { white-space: normal; line-height: 1.25; }

/* 2. vf-compare-card-mobile */
.vf-compare-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.vf-compare-card.is-featured { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); }
.vf-cc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.vf-cc-title { margin: 0; font-size: 1.14rem; font-weight: 640; letter-spacing: -0.015em; color: var(--ink); }
.vf-cc-price { font-size: 1.3rem; font-weight: 760; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.vf-cc-flag { margin: 6px 0 0; font-size: .88rem; font-weight: 600; color: var(--accent); }
.vf-cc-rows { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.vf-compare-card.is-featured .vf-cc-rows { border-top-color: var(--line-strong); }
.vf-cc-row { display: grid; grid-template-columns: 104px 1fr; gap: 12px; }
.vf-cc-row dt { font-size: .9rem; color: var(--ink-faint); }
.vf-cc-row dd { margin: 0; font-size: .96rem; color: var(--ink); }
.vf-compare-card > .btn { margin-top: 18px; }

/* 3. vf-price-panel */
.vf-price-panel { background: var(--surface); border: 1.5px solid var(--accent); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow); }
.vf-pp-title { margin: 0 0 10px; font-size: .74rem; font-weight: 680; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.vf-pp-price { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.vf-pp-amount { font-size: 2.6rem; font-weight: 780; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.vf-pp-note { font-size: .95rem; color: var(--ink-soft); }
.vf-chips { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.vf-chip { display: inline-flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 560; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); padding: 7px 15px; border-radius: var(--r-pill); }
.vf-chip::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.vf-chip--good::before { background: var(--good); }
.vf-chip--gold::before { background: var(--gold); }
.vf-pp-reassure { margin: 12px 0 0; text-align: center; font-size: .9rem; color: var(--ink-soft); }
.vf-checklist { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.vf-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--ink-soft); }
.vf-checklist li .mk { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--grad-good); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.vf-checklist li .mk svg { width: 12px; height: 12px; }

/* 4. vf-proof-card */
.vf-proof-card { display: flex; align-items: center; gap: 22px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; }
.vf-proof-thumb { flex: 0 0 auto; position: relative; width: 84px; height: 106px; }
.vf-proof-thumb i { position: absolute; inset: 0; border-radius: 5px; background: linear-gradient(#ffffff, #f7f4ee); border: 1px solid #e9e6df; box-shadow: 2px 6px 14px rgba(12,22,38,.16); transform: rotate(-3deg); }
.vf-proof-thumb i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; border-radius: 5px 5px 0 0; background: var(--brand); }
.vf-proof-thumb i::after { content: ""; position: absolute; left: 10px; right: 10px; top: 20px; height: 68px; background: repeating-linear-gradient(#d3dae3 0 3px, transparent 3px 12px); }
.vf-proof-img { flex: 0 0 auto; height: auto; }
.vf-proof-title { margin: 0 0 6px; font-size: 1.08rem; font-weight: 640; letter-spacing: -0.015em; color: var(--ink); }
.vf-proof-desc { margin: 0 0 14px; font-size: .92rem; color: var(--ink-soft); }
.vf-proof-body .btn { white-space: normal; line-height: 1.25; }
/* Locked VF 2.0 frames render the proof CTA as an accent-outline pill on
   every page that carries the card (Get Help, both product pages). */
.vf-proof-card .btn-secondary { color: var(--accent); border-color: var(--accent); }
.vf-proof-card .btn-secondary:hover { color: var(--accent-hover); }
@media (max-width: 460px) { .vf-proof-card { flex-direction: column; align-items: flex-start; } }

/* 5. vf-stepper */
.vf-stepper { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 8px; }
.vf-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.vf-step-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .88rem; font-weight: 640; background: var(--surface-3); color: var(--ink-soft); }
.vf-step-dot svg { width: 14px; height: 14px; }
.vf-step.is-current .vf-step-dot { background: var(--grad-tile); color: var(--accent-ink); box-shadow: var(--shadow-accent); }
.vf-step.is-done .vf-step-dot { background: var(--grad-good); color: #fff; }
.vf-step-label { font-size: .86rem; color: var(--ink-soft); line-height: 1.25; }
.vf-step.is-current .vf-step-label { color: var(--ink); font-weight: 640; }
@media (max-width: 640px) {
  .vf-stepper { gap: 4px; }
  .vf-step:not(.is-current) .vf-step-label { display: none; }
}

/* 6. vf-selected-service */
.vf-selected { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 14px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 14px 26px; background: var(--surface); border: 1.5px solid var(--accent); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.vf-sel-label { font-size: .92rem; color: var(--ink-soft); }
.vf-sel-name { font-size: 1.06rem; font-weight: 640; letter-spacing: -0.015em; color: var(--ink); }
.vf-sel-price { font-size: 1.18rem; font-weight: 760; letter-spacing: -0.03em; color: var(--ink); }
.vf-sel-note { font-size: .92rem; color: var(--ink-soft); }
.vf-sel-change { font-size: .95rem; font-weight: 600; }

/* 7. vf-bottom-cta */
.vf-bottom-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 16px 18px 16px 34px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); }
.vf-bc-price { font-size: 1.5rem; font-weight: 780; letter-spacing: -0.03em; color: var(--ink); }
.vf-bc-note { font-size: .95rem; color: var(--ink-soft); }
@media (max-width: 640px) {
  .vf-bottom-cta { flex-direction: column; width: 100%; padding: 20px; border-radius: var(--r-lg); text-align: center; }
  .vf-bottom-cta .btn { width: 100%; }
}

/* ---- VF-03-03: Get Help page (locked VF 2.0 frames 54:1060 / 54:1193). ----
   Page-scoped glue only; the comparison table, compare cards, and proof
   card are the shared vf-* components. */
.gh-head h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); }
.gh-chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gh-cards { display: grid; gap: 16px; max-width: 560px; margin: 0 auto; }
.gh-proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px clamp(32px, 5vw, 80px); }
.gh-proof .vf-proof-card { flex: 0 1 640px; }

/* Trust line above the unified four-way "Choose a personal review"
   comparison (Service Catalog v2.1 presentation refresh). Centered,
   standalone - unlike .gh-reviewer this has no proof card beside it. */
.gh-trust { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 26px; }
.gh-trust img { border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 3px var(--surface), var(--shadow-sm); }
.gh-trust p { margin: 0; font-size: 1rem; color: var(--ink-soft); line-height: 1.5; }
.gh-trust strong { color: var(--ink); }
@media (max-width: 460px) { .gh-trust { flex-direction: column; text-align: center; gap: 8px; } }

/* Price is the primary visual anchor of the comparison: same strong
   treatment for $19 / $99 / $349 / By quote, on both the desktop table's
   first (Price) row and the mobile cards' header price. */
.gh-pricing-compare .vf-compare-table { min-width: 980px; }
.gh-pricing-compare .vf-compare-table tbody tr:first-child td { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); }
.gh-pricing-compare .vf-cc-price { font-size: 1.5rem; font-weight: 800; color: var(--accent); }

/* ---- VF-03-04: VF 2.0 product-page template (.pp-*), locked frames
   55:1204 / 55:1309. Layout glue only; the stepper, price panel, proof
   card, and bottom CTA are the shared vf-* components. Desktop: copy left,
   panel and proof in a right rail aligned with the page head. Mobile
   (<=900px, matching the vf-only cut): head, panel, lists, proof. */
.pp-stepper { padding-bottom: 0; }
.pp-stepper .vf-stepper { max-width: 880px; margin: 0 auto; }
.pp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0 clamp(32px, 4.5vw, 68px);
  grid-template-areas: "head panel" "body panel" "body proof"; align-items: start; }
.pp-head { grid-area: head; }
.pp-head h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.pp-panel { grid-area: panel; }
.pp-body { grid-area: body; }
.pp-proof { grid-area: proof; margin-top: 24px; }
.pp-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 44px; margin-top: 30px; }
.pp-lh { font-size: 1.16rem; letter-spacing: -0.02em; margin: 0 0 14px; }
.pp-lh-not { margin-top: 30px; }
.pp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pp-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; color: var(--ink-soft); line-height: 1.5; }
.pp-list .mk { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--good); margin-top: 8px; }
.pp-list--ink .mk { background: var(--ink-faint); }
.pp-flow-note { margin: 12px 6px 0; text-align: center; font-size: .88rem; color: var(--ink-soft); }
@media (max-width: 900px) {
  .pp-grid { grid-template-columns: 1fr; grid-template-areas: "head" "panel" "body" "proof"; }
  .pp-panel { margin-top: 14px; }
  .pp-proof { margin-top: 22px; }
}
@media (max-width: 640px) {
  .pp-lists { grid-template-columns: 1fr; gap: 26px; }
}

/* ---- VF-03-06: Paid Contact composition (locked frames 56:1344 / 56:1412).
   Ships hidden; the contact page's gated inline script reveals it only in
   paid mode (?service=quick|full with checkout enabled). Free /contact
   never shows any of it. ---- */
.ct-vf-head { padding: 26px 0 0; }
.ct-vf-head .vf-selected { margin-bottom: 26px; }
.ct-vf-stepper { max-width: 880px; margin: 0 auto; }
.ct-vf-after { margin-bottom: 18px; }
/* VF-05A: unnumbered next-actions summary; the VF stepper is the page's
   single numbered progress model. */
.ct-after { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ct-after li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--ink); line-height: 1.45; }
.ct-after li .mk { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 8px; }
.ct-after-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--ink-soft); }
.ct-vf-proof { margin-bottom: 18px; }
.ct-vf-proof .vf-proof-card { flex-wrap: wrap; }

/* ---- Mobile page polish (2026-08-06): About, Authority Library, Services.
   Phone-width alignment and spacing consistency only; desktop and tablet
   are untouched (everything is inside the 640px media query). */
@media (max-width: 640px) {
  /* About: tighten the hero and pull the founder card up so the face
     lands on the first screen instead of below the fold. */
  .about-hero { padding: 16px 0 0; }
  .about-founder { padding-top: 22px; }
  /* Breadcrumbs: the .crumbs padding shorthand wipes the horizontal
     padding of its own .wrap / .wrap-narrow container class (same
     specificity, later in the file), leaving the trail on the viewport
     edge at phone widths. Restore the standard 24px content padding so
     the trail aligns with the eyebrow, heading, and search box. */
  .crumbs { padding-left: 24px; padding-right: 24px; }
  /* Services: the hero follows the same left-aligned mobile system as
     About and the Authority Library. Badge appearance is unchanged; the
     group simply starts from the standard left content edge. */
  .gh-hero { padding-top: 16px; }
  .gh-head { text-align: left; }
  .gh-head .gh-chips { justify-content: flex-start; }
}

/* ---- Post-audit polish (2026-08-06): free-flow context chip on Contact.
   Lighter than the paid selected-service bar by design. */
.ct-free-context { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.ct-free-context-name { font-weight: 700; color: var(--ink); font-size: 1.02rem; letter-spacing: -0.01em; }
.ct-free-context-badge { font-size: .78rem; font-weight: 640; color: var(--good); background: rgba(47, 138, 91, .09); border: 1px solid rgba(47, 138, 91, .3); padding: 3px 11px; border-radius: 999px; white-space: nowrap; }

/* ---- Find My Condo Problem, V1 (Master Plan section 3B.1). ----
   A SECONDARY path. Every rule here is scoped to .fmp / .fmp-* / .hr41-router,
   so the Hero, the primary CTA, the service rows and every other page are
   untouched. The router deliberately reuses three systems the site already has
   rather than inventing a fourth: .cmd for the search field (the Authority
   Library filter), .home-svc-row for result rows, and .btn for actions.

   Deliberately quieter than the Hero: no accent-filled panel, no motion beyond
   the site's existing hover transitions, and a submit button on the standard
   navy gradient rather than the Hero's amber, so the primary "Check what they
   sent me, free" action stays the single dominant call on the page. */
.hr41-router { margin: 10px 0 0; font-size: .94rem; color: var(--ink-soft); }
.hr41-router .link-arrow { font-size: .94rem; }
/* Clear of the sticky header when the Hero invitation jumps here. */
#find-my-condo-problem { scroll-margin-top: 90px; }

/* Progressive enhancement: the tool appears only once JS is running (the same
   html.js flag the reveal system uses). Without it Home still shows the
   heading, the five owner-language rows, and every existing CTA. */
.fmp-tool { display: none; }
.js .fmp-tool { display: block; }

.fmp-intro { margin: -8px 0 20px; color: var(--ink-soft); font-size: 1.02rem; max-width: 62ch; }
.fmp-form { margin: 0; }
.fmp-label { display: block; font-size: .88rem; font-weight: 620; color: var(--ink); margin-bottom: 8px; }
.fmp-cmd { max-width: 100%; }
/* 1rem keeps mobile Safari from zooming the page on focus, and keeps the field
   readable for the older owners this site is written for. */
.fmp-cmd .fmp-input { font-size: 1rem; }
.fmp-hint { margin: 10px 0 0; font-size: .88rem; color: var(--ink-soft); max-width: 68ch; }
.fmp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
/* Comfortable target height (about 46px) without borrowing .btn-lg, which is
   reserved for the page's primary actions. */
.fmp-submit { padding: 15px 26px; font-size: 1rem; }
.fmp-reset { padding: 15px 20px; font-size: 1rem; }
.fmp-reset[hidden] { display: none; }

.fmp-result { margin-top: 20px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 22px 22px; }
.fmp-result[hidden] { display: none; }
.fmp-verdict { margin: 0; font-size: 1.12rem; line-height: 1.4; color: var(--ink); }
.fmp-verdict strong { font-weight: 700; }
.fmp-summary { margin: 8px 0 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.5; max-width: 68ch; }
/* Owner review, 2026-08-17: these two were the smallest text in the panel
   (12.5px and 11.5px) for an audience of older condo owners. Both go up one
   step, and the tracking on the eyebrow eases slightly so the larger size does
   not read as wider. Scoped to the router: the site's other eyebrows, badges
   and pills are untouched, and the hierarchy is unchanged (the chip still sits
   below the row title at 17.9px and the row description at 14.7px). */
.fmp-steps { margin: 20px 0 12px; font-size: .85rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 680; color: var(--ink-soft); }
.fmp-note { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.fmp-rows { gap: 10px; }
.fmp-rows .home-svc-row { padding: 16px 18px; gap: 14px; }
.fmp-tag { flex: 0 0 auto; font-size: .78rem; font-weight: 660; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.fmp-choices { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.fmp-choice { white-space: normal; text-align: left; line-height: 1.3; }
.fmp-more { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--line); }
.fmp-more .link-arrow { font-size: .94rem; }
.fmp-boundary { margin: 12px 0 0; font-size: .85rem; color: var(--ink-soft); }

.fmp-common-h { margin: 30px 0 16px; font-size: 1.12rem; font-weight: 640; letter-spacing: -0.01em; color: var(--ink); }

@media (max-width: 640px) {
  /* The Hero column reorders its children at this width; the invitation is the
     last line, directly under the trust note (order 8). */
  .hr41-router { order: 9; margin: 8px 0 0; align-self: center; text-align: center; }
  .fmp-intro { font-size: .96rem; }
  .fmp-actions { gap: 10px; }
  .fmp-submit, .fmp-reset { width: 100%; }
  .fmp-result { padding: 16px 16px 18px; }
  .fmp-verdict { font-size: 1.04rem; }
  /* Narrow rows wrap the type chip and the chevron onto a second line. Explicit
     order keeps the reading order right there ("GUIDE" then the chevron), and
     margin-left:auto pins the chevron to the row's right edge exactly as it
     sits on desktop. */
  .fmp-rows .home-svc-row { padding: 14px 16px; flex-wrap: wrap; }
  .fmp-rows .fmp-tag { order: 2; }
  .fmp-rows .hsr-chev { order: 3; margin-left: auto; }
  .fmp-choice { width: 100%; }
  .fmp-more { gap: 10px 18px; }
}