:root {
    --ink: #101014;
    --ink-2: #20212a;
    --muted: #585a6b;
    --line: #e7e0d4;
    --paper: #fffaf0;
    --paper-2: #fffdf8;
    --soft: #f4efe4;
    --dark: #11131d;
    --dark-2: #191c2a;
    --green: #13a36f;
    --mint: #dff8ea;
    --coral: #ff6b4a;
    --gold: #f5bd43;
    --blue: #2878d8;
    --violet: #7867ff;
    --brand: #875faa;
    --brand-deep: #031d66;
    /* AA-contrast "ink" tones for small/bold TEXT on light/tinted backgrounds
       (the bright tokens above stay for fills, bars, and non-text accents). */
    --green-ink: #0c6a49;
    --coral-ink: #c4341a;
    --blue-ink: #1f6fd0;
    --brand-ink: #6f4c93;
    --brand-grad-1: #f3e8fb;
    --brand-grad-2: #eaeefb;
    --brand-grad-3: #e7f3fc;
    --radius: 22px;
    --radius-sm: 14px;
    --shadow: 0 22px 60px rgba(16, 16, 20, 0.12);
    --shadow-soft: 0 12px 36px rgba(16, 16, 20, 0.08);
    /* Semantic surface/chart roles — LANDING values (rebound under .dash-app
       to a cooler app skin). Components reference these, never raw hex. */
    --surface-bg: var(--paper);
    --surface-card: var(--paper-2);
    --surface-sunk: var(--soft);
    --border: var(--line);
    --border-strong: #d9d2c4;
    --elev-1: var(--shadow-soft);
    --elev-2: var(--shadow);
    --track: #e7e0d4;
    --chart-1: var(--green);
    --chart-2: var(--blue);
    --chart-3: var(--brand);
    --chart-4: var(--gold);
    --chart-5: var(--coral);
    --chart-6: var(--violet);
    --sidebar-bg: var(--dark);
    --sidebar-text: rgba(255, 255, 255, .72);
    --sidebar-text-strong: #fff;
    --sidebar-active: rgba(255, 255, 255, .14);
    --topbar-bg: var(--dark);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 107, 74, .08), transparent 30rem),
        radial-gradient(circle at 80% 5%, rgba(40, 120, 216, .08), transparent 28rem),
        var(--paper);
    color: var(--ink);
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}
img { display: block; max-width: 100%; }
.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 200;
    padding: 10px 16px;
    color: #fff;
    background: var(--dark);
    border-radius: 0 0 12px 12px;
    font-weight: 700;
    transition: top .18s ease;
}
.skip-link:focus { top: 0; }
h1, h2, h3 {
    margin: 0 0 18px;
    font-family: Inter, Arial, sans-serif;
    line-height: .98;
    letter-spacing: -.045em;
}
h1 { max-width: 1040px; font-size: clamp(3rem, 7.3vw, 6.9rem); }
h2 { font-size: clamp(2.1rem, 4.8vw, 4.35rem); }
h3 { font-size: clamp(1.28rem, 2vw, 1.7rem); letter-spacing: -.025em; }
p { margin: 0 0 18px; }
ul { margin: 0; padding-left: 22px; }
small { color: var(--muted); }

.wrap { width: min(1160px, calc(100% - 38px)); margin: 0 auto; }
.narrow { width: min(840px, calc(100% - 38px)); }
.highlight {
    background: linear-gradient(120deg, var(--coral), var(--violet), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.muted { color: var(--muted); }
.compact { margin-top: 16px; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 24px;
    background: rgba(255, 250, 240, .78);
    border-bottom: 1px solid rgba(16, 16, 20, .08);
    backdrop-filter: blur(18px);
    transition: box-shadow .2s ease, background .2s ease;
}
.site-header.is-scrolled {
    background: rgba(255, 250, 240, .94);
    box-shadow: 0 10px 30px rgba(16, 16, 20, .08);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: white;
    background: linear-gradient(135deg, var(--ink), #303246);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(16, 16, 20, .18);
}
.brand-logo { display: block; width: 40px; height: 40px; }
.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: .96rem;
    font-weight: 800;
}
.main-nav a {
    color: #2a2b35;
    transition: color .18s ease, transform .18s ease;
}
.main-nav a:hover { color: var(--blue-ink); transform: translateY(-1px); }
.nav-cta {
    padding: 10px 16px;
    color: white !important;
    background: var(--ink);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(16, 16, 20, .16);
}
.nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.nav-toggle-label { display: none; }

/* Language flag switcher: subtle US/Spain flags, centered in the header (mid),
   visible on mobile too since it sits outside the collapsible nav. */
.nav-lang { display: inline-flex; align-items: center; gap: 8px; }
.nav-lang-flag {
    display: inline-flex; width: 24px; height: 17px; border-radius: 3px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 16, 20, .22); opacity: .4;
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
.nav-lang-flag .flag { display: block; width: 100%; height: 100%; }
.nav-lang-flag:hover, .nav-lang-flag:focus-visible { opacity: .92; transform: translateY(-1px); outline-offset: 3px; }
.nav-lang-flag.is-current { opacity: 1; box-shadow: 0 0 0 2px var(--blue), 0 2px 6px rgba(16, 16, 20, .2); }
.nav-lang-flag.is-current:hover { transform: none; }

/* Visually-hidden but screen-reader-available text (a11y text equivalents). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.eyebrow {
    color: var(--brand-ink);
    font-family: Inter, Arial, sans-serif;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.lead {
    max-width: 780px;
    color: #3f414d;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
}
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 13px 20px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    font-family: Inter, Arial, sans-serif;
    font-size: .96rem;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(16, 16, 20, .14);
}
.button.primary { color: white; background: var(--ink); }
.button.secondary { color: var(--ink); background: rgba(255,255,255,.72); }
.button.ghost { border-color: transparent; background: rgba(255,255,255,.56); }
.button.light { color: var(--ink); background: white; border-color: white; }
.button.dark-outline { color: white; background: transparent; border-color: rgba(255,255,255,.52); }
.button.small { min-height: 38px; padding: 8px 13px; font-size: .85rem; }
.button.full { width: 100%; margin-top: 10px; }
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue-ink);
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
}
.light-link { color: white; }

.hero {
    position: relative;
    overflow: hidden;
    min-height: 780px;
    background:
        linear-gradient(135deg, rgba(255,250,240,.98), rgba(255,241,215,.94) 48%, rgba(231,242,255,.96)),
        var(--paper);
    border-bottom: 1px solid var(--line);
}
.hero-orb {
    position: absolute;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    filter: blur(18px);
    opacity: .45;
    pointer-events: none;
}
.hero-orb-one { left: -12rem; top: 6rem; background: rgba(255, 107, 74, .26); }
.hero-orb-two { right: -10rem; bottom: -8rem; background: rgba(40, 120, 216, .24); }
.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    align-items: center;
    gap: 60px;
    min-height: 780px;
    padding: 78px 0 92px;
}
.hero-copy h1 { margin-bottom: 24px; }
.hero-note {
    margin-top: 18px;
    color: #4b4d58;
    font-weight: 700;
}
.hero-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}
.hero-signals span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(16, 16, 20, .08);
    border-radius: 999px;
    color: #3a3b45;
    font-weight: 800;
}
.hero-signals i {
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(19, 163, 111, .15);
}

.hero-system {
    position: relative;
    min-height: 560px;
}
.system-glow {
    position: absolute;
    inset: 12% 2% 0;
    background: radial-gradient(circle, rgba(120,103,255,.28), transparent 55%);
    filter: blur(30px);
}
.system-window {
    position: relative;
    overflow: hidden;
    margin-top: 34px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(16,16,20,.12);
    border-radius: 28px;
    box-shadow: 0 28px 80px rgba(16, 16, 20, .18);
}
.system-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    background: var(--dark);
    color: white;
}
.window-dots { display: flex; gap: 7px; }
.window-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
}
.window-dots span:nth-child(2) { background: var(--coral); }
.window-dots span:nth-child(3) { background: var(--green); }
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 800;
}
.live-pill i {
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 50%;
    animation: pulse 1.7s ease-in-out infinite;
}
.system-body { padding: 26px; }
.metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    background: linear-gradient(135deg, #f9f6ee, #eef6ff);
    border: 1px solid var(--line);
    border-radius: 20px;
}
.metric-row span, .floating-card span, .scorecard-head span, .score-row span, .scorecard-footer span {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.metric-row strong { display: block; margin-top: 4px; font: 800 1.3rem Inter, Arial, sans-serif; }
.source-tag {
    padding: 8px 11px;
    color: #064c34 !important;
    background: var(--mint);
    border-radius: 999px;
}
.flow-line { margin: 24px 0; }
.flow-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
}
.flow-step span {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: white;
    background: var(--ink);
    border-radius: 12px;
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
}
.flow-step small { display: block; margin-top: 2px; }
.flow-step.active { border-color: rgba(40, 120, 216, .38); box-shadow: 0 12px 26px rgba(40,120,216,.11); }
.flow-step.active span { background: var(--blue); }
.flow-step.complete span { background: var(--green); }
.flow-connector {
    width: 2px;
    height: 20px;
    margin-left: 31px;
    background: linear-gradient(var(--line), var(--blue));
}
.system-message {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    color: white;
    background: linear-gradient(135deg, var(--dark), #292d45);
    border-radius: 20px;
}
.system-message p { margin: 3px 0 0; color: #d8dae5; font-size: .95rem; }
.message-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: white;
    color: var(--ink);
    border-radius: 14px;
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
}
.send-chip {
    padding: 8px 10px;
    color: var(--ink);
    background: var(--gold);
    border-radius: 999px;
    font-weight: 800;
}
.floating-card {
    position: absolute;
    padding: 16px 18px;
    background: white;
    border: 1px solid rgba(16,16,20,.1);
    border-radius: 18px;
    box-shadow: var(--shadow);
    animation: float 6s ease-in-out infinite;
}
.floating-card strong { display: block; margin-top: 4px; font-family: Inter, Arial, sans-serif; }
.floating-card-one { left: -18px; top: 58px; }
.floating-card-two { right: -8px; bottom: 52px; animation-delay: -2.5s; }

.capability-strip {
    overflow: hidden;
    color: white;
    background: var(--ink);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.capability-track {
    display: flex;
    align-items: center;
    gap: 20px;
    width: max-content;
    padding: 18px 0;
    font: 800 .92rem Inter, Arial, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    animation: marquee 28s linear infinite;
}
.capability-track span { white-space: nowrap; }
.capability-track i {
    width: 7px;
    height: 7px;
    background: var(--coral);
    border-radius: 50%;
}

/* Major sections fill the viewport (minus the 67px sticky header) on any
   resolution, with content vertically centered — min-height, so long
   content still grows naturally. */
.section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: max(560px, calc(100svh - 67px));
    padding: 74px 0;
}
.section-heading { margin-bottom: 34px; }
.section-heading.row, .split-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
}
.split-heading > * { flex: 1; }
.narrow-heading { max-width: 880px; }
.cards { display: grid; gap: 20px; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(16,16,20,.09);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow-soft);
}
.card, .friction-card, .service-panel, .work-feature, .case-study {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover, .friction-card:hover, .work-feature:hover, .case-study:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.soft { background: var(--soft); }
.contrast { color: white; background: radial-gradient(circle at top right, rgba(120,103,255,.28), transparent 34rem), var(--dark); }
.contrast .eyebrow { color: var(--gold); }
.split {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 54px;
    align-items: center;
}
.top-align { align-items: start; }

.problem-section { background: var(--paper-2); }
.friction-map {
    display: grid;
    gap: 18px;
}
.friction-card {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 22px;
    padding: 24px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(16,16,20,.09);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
}
.friction-card:nth-child(2) { margin-left: 6%; }
.friction-card:nth-child(3) { margin-left: 12%; }
.friction-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: white;
    background: linear-gradient(135deg, var(--ink), var(--violet));
    border-radius: 20px;
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
}
.friction-card span, .service-panel-copy > span, .work-feature-copy span, .case-copy .eyebrow {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--coral);
    font-family: Inter, Arial, sans-serif;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.friction-card p, .service-card p, .work-feature-copy p { color: #4b4d58; }

.audit-showcase {
    background:
        radial-gradient(circle at 12% 20%, rgba(19,163,111,.16), transparent 28rem),
        linear-gradient(135deg, #e9f7ef, #f8f3e9);
    border-block: 1px solid #d9eadf;
}
.audit-showcase-grid, .audit-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 58px;
    align-items: center;
}
.audit-visual, .audit-list {
    padding: 28px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(16,16,20,.09);
    border-radius: 28px;
    box-shadow: var(--shadow);
}
.scorecard-head, .scorecard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    background: var(--dark);
    color: white;
    border-radius: 18px;
}
.scorecard-head span, .scorecard-footer span { color: #bfc3d6; }
.score-row {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(120px, .8fr) 40px;
    gap: 15px;
    align-items: center;
    padding: 18px 4px;
    border-bottom: 1px solid var(--line);
}
.score-row b { text-align: right; font: 800 1.25rem Inter, Arial, sans-serif; }
.score-bar {
    overflow: hidden;
    height: 10px;
    background: #eee7db;
    border-radius: 999px;
}
.score-bar i {
    display: block;
    width: var(--score);
    height: 100%;
    background: linear-gradient(90deg, var(--coral), var(--blue));
    border-radius: inherit;
}
.score-bar i.good { background: linear-gradient(90deg, var(--green), var(--blue)); }
.scorecard-footer { margin-top: 8px; background: white; color: var(--ink); border: 1px solid var(--line); }

.services-section { background: var(--paper); }
.service-stack {
    display: grid;
    gap: 22px;
}
.service-panel {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(300px, .7fr);
    gap: 34px;
    align-items: center;
    min-height: 330px;
    padding: clamp(24px, 4vw, 44px);
    overflow: hidden;
    background: white;
    border: 1px solid rgba(16,16,20,.09);
    border-radius: 34px;
    box-shadow: var(--shadow-soft);
}
.service-panel:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(40,120,216,.22); }
.service-panel-copy h3 { font-size: clamp(2rem, 4vw, 3.5rem); }
.panel-link { color: var(--blue); font-family: Inter, Arial, sans-serif; }
.browser-preview, .automation-preview, .dashboard-preview {
    min-height: 250px;
    background: linear-gradient(135deg, #f8f5ee, #eef6ff);
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.browser-preview { overflow: hidden; }
.browser-bar {
    display: flex;
    gap: 7px;
    padding: 14px;
    background: var(--dark);
}
.browser-bar i { width: 10px; height: 10px; background: var(--gold); border-radius: 50%; }
.browser-bar i:nth-child(2) { background: var(--coral); }
.browser-bar i:nth-child(3) { background: var(--green); }
.browser-hero { display: grid; gap: 10px; padding: 22px; }
.browser-hero small { color: var(--green); font-weight: 800; letter-spacing: .08em; }
.browser-hero b { max-width: 260px; font: 800 1.9rem Inter, Arial, sans-serif; line-height: 1; }
.browser-hero span { width: 46%; height: 12px; background: #d8deea; border-radius: 999px; }
.browser-hero span:last-child { width: 64%; }
.browser-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 22px 22px; }
.browser-cards i { height: 58px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.automation-preview {
    display: grid;
    place-items: center;
    grid-template-columns: 1fr 34px 1fr 34px 1fr;
    gap: 8px;
    padding: 18px;
}
.automation-preview > b {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--line), var(--blue));
    border-radius: 999px;
}
.automation-node {
    display: grid;
    gap: 10px;
    place-items: center;
    width: 100%;
    min-height: 130px;
    padding: 14px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 20px;
    text-align: center;
    font-weight: 800;
}
.automation-node i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: white;
    background: var(--ink);
    border-radius: 16px;
    font-style: normal;
}
.automation-node.accent i { background: linear-gradient(135deg, var(--blue), var(--violet)); }
.dashboard-preview {
    display: grid;
    grid-template-columns: 66px 1fr;
    gap: 14px;
    padding: 16px;
    background: var(--dark);
}
.dashboard-preview .dash-side, .dashboard-preview .dash-main, .dashboard-preview .dash-stats, .dashboard-preview .dash-table { display: grid; gap: 10px; }
.dashboard-preview .dash-side { align-content: start; padding: 12px; background: rgba(255,255,255,.08); border-radius: 18px; }
.dashboard-preview .dash-side i { height: 12px; background: rgba(255,255,255,.32); border-radius: 999px; }
.dashboard-preview .dash-main { min-width: 0; }
.dashboard-preview .dash-stats { grid-template-columns: repeat(3, 1fr); }
.dashboard-preview .dash-stats i { height: 54px; background: rgba(255,255,255,.9); border-radius: 14px; }
.dashboard-preview .dash-chart { display: grid; align-items: end; height: 92px; padding: 12px; background: rgba(255,255,255,.12); border-radius: 16px; }
.dashboard-preview .dash-chart span { display: block; height: 44px; background: linear-gradient(90deg, var(--green), var(--blue)); clip-path: polygon(0 80%, 18% 50%, 36% 68%, 55% 32%, 78% 48%, 100% 16%, 100% 100%, 0 100%); }
.dashboard-preview .dash-table i { height: 13px; background: rgba(255,255,255,.34); border-radius: 999px; }

.process-section { background: var(--soft); }
.process-line {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    position: relative;
}
.process-step {
    position: relative;
    padding: 24px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
}
.process-step span, .steps span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    color: white;
    background: var(--blue);
    border-radius: 14px;
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
}
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.steps.four { grid-template-columns: repeat(4, 1fr); }
.steps div {
    padding: 22px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);
}

.work-preview-section, .work-page-hero {
    color: white;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,107,74,.26), transparent 28rem),
        radial-gradient(circle at 82% 22%, rgba(40,120,216,.32), transparent 34rem),
        var(--dark);
}
.work-page-hero .lead { color: #cbd0e1; }
.work-feature-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 18px;
}
.work-feature {
    overflow: hidden;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 30px;
}
.work-feature-main { grid-row: span 2; }
.work-art {
    min-height: 240px;
    padding: 20px;
    background: rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.work-feature-copy { padding: 24px; }
.work-feature-copy span { color: var(--gold); }
.work-feature-copy p { color: #d7dae8; }
.chatmmm-art { display: grid; align-content: stretch; gap: 18px; }
.market-header {
    display: flex;
    justify-content: space-between;
    padding: 14px;
    background: white;
    color: var(--ink);
    border-radius: 18px;
    font-weight: 800;
}
.market-header i { color: var(--muted); font-style: normal; }
.market-chart {
    position: relative;
    min-height: 180px;
    background: rgba(255,255,255,.1);
    border-radius: 22px;
}
.market-chart span {
    position: absolute;
    inset: 20px;
    background: linear-gradient(135deg, var(--green), var(--blue));
    clip-path: polygon(0 70%, 14% 45%, 28% 58%, 46% 20%, 65% 42%, 82% 28%, 100% 12%, 100% 100%, 0 100%);
    border-radius: 16px;
}
.market-chart b {
    position: absolute;
    right: 26px;
    top: 26px;
    width: 70px;
    height: 70px;
    background: var(--gold);
    border-radius: 50%;
}
.market-feed, .case-news { display: grid; gap: 10px; }
.market-feed i, .case-news i { height: 14px; background: rgba(255,255,255,.28); border-radius: 999px; }
.local-art { position: relative; display: grid; place-items: center; }
.local-phone {
    width: 150px;
    padding: 16px;
    background: white;
    border-radius: 28px;
    box-shadow: 18px 18px 0 rgba(255,107,74,.52);
}
.local-phone span, .local-phone b, .local-phone i {
    display: block;
    margin-bottom: 10px;
    background: #e5e9f2;
    border-radius: 999px;
}
.local-phone span { height: 90px; border-radius: 18px; background: linear-gradient(135deg, #ffe0c6, #dff8ea); }
.local-phone b { height: 18px; width: 70%; }
.local-phone i { height: 10px; }
.local-badge {
    position: absolute;
    right: 18%;
    top: 20%;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: var(--ink);
    background: var(--gold);
    border-radius: 18px;
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
}
.systems-art { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.system-grid-lines {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 24px 24px;
}
.systems-art span {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 88px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
}

.page-hero {
    padding: 96px 0 54px;
}
/* Graphic page heroes (work, about, free websites, solutions) fill the
   viewport like other major sections; compact utility headers (legal,
   success, verify pages) keep their natural height. */
.page-hero:has(.page-hero-grid), .services-page-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: max(560px, calc(100svh - 67px));
}
.page-hero h1 { font-size: clamp(2.8rem, 6vw, 5.8rem); }
.page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr);
    gap: 36px;
    align-items: center;
}
.work-hero-art, .about-hero-mark, .website-hero-art {
    min-height: 320px;
    border-radius: 32px;
}
.work-orbit {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 320px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 32px;
}
.work-orbit i {
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    color: var(--ink);
    background: white;
    border-radius: 42px;
    font: 800 1.1rem Inter, Arial, sans-serif;
    font-style: normal;
}
.work-orbit span {
    position: absolute;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    background: var(--gold);
    color: var(--ink);
    border-radius: 24px;
    font: 800 .9rem Inter, Arial, sans-serif;
    animation: orbitFloat 7s ease-in-out infinite;
}
.work-orbit span:nth-child(1) { left: 14%; top: 20%; }
.work-orbit span:nth-child(2) { right: 14%; top: 16%; animation-delay: -1.6s; background: var(--mint); }
.work-orbit span:nth-child(3) { left: 19%; bottom: 16%; animation-delay: -3s; background: #dfe7ff; }

.case-study {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(320px, .8fr);
    gap: 34px;
    align-items: center;
    margin-bottom: 24px;
    padding: clamp(24px, 4vw, 44px);
    border-radius: 34px;
}
.case-study-dark { background: #eafaf1; }
.case-study-warm { background: #fff1d7; }
.case-study-blue { background: #e8f2ff; }
.case-study-dark .case-tags span { background: rgba(255,255,255,.65); border-color: rgba(16,16,20,.08); }
.case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0;
}
.case-tags span {
    padding: 8px 10px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    font-weight: 800;
}
.case-study-warm .case-tags span, .case-study-blue .case-tags span {
    background: rgba(255,255,255,.65);
    border-color: rgba(16,16,20,.08);
}
.case-visual {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    border-radius: 28px;
}
.case-window {
    margin: 28px;
    overflow: hidden;
    background: white;
    color: var(--ink);
    border-radius: 24px;
}
.case-window-bar {
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--ink);
    color: white;
    font-weight: 800;
}
.case-window-bar i { font-style: normal; color: #cbd0e1; }
.case-chart {
    position: relative;
    height: 130px;
    margin: 16px;
    background: #f1f4fa;
    border-radius: 18px;
}
.case-chart span {
    position: absolute;
    inset: 18px;
    background: linear-gradient(90deg, var(--green), var(--blue));
    clip-path: polygon(0 70%, 18% 38%, 40% 55%, 60% 20%, 80% 40%, 100% 12%, 100% 100%, 0 100%);
}
.case-chart b {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 42px;
    height: 42px;
    background: var(--gold);
    border-radius: 50%;
}
.case-news { padding: 0 16px 16px; }
.case-news i { background: #dfe5ee; }
.case-prompt {
    display: flex;
    justify-content: space-between;
    margin: 0 16px 16px;
    padding: 14px;
    background: var(--soft);
    border-radius: 16px;
    font-weight: 800;
}
.local-case { display: grid; place-items: center; background: linear-gradient(135deg, #fff9e8, #dff8ea); }
.site-mock {
    position: absolute;
    width: 210px;
    padding: 16px;
    background: white;
    border: 1px solid rgba(16,16,20,.08);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
}
.site-mock-back { transform: translate(-46px, -26px) rotate(-8deg); opacity: .72; }
.site-mock-front { transform: translate(44px, 28px) rotate(5deg); }
.site-mock span, .site-mock b, .site-mock i, .site-mock em {
    display: block;
    margin-bottom: 10px;
    background: #e6eaf1;
    border-radius: 999px;
}
.site-mock span { height: 98px; border-radius: 18px; background: linear-gradient(135deg, #ffe0c6, #dfe7ff); }
.site-mock b { width: 72%; height: 18px; }
.site-mock i { height: 10px; }
.site-mock em {
    padding: 10px;
    color: white;
    background: var(--green);
    font-style: normal;
    font-weight: 800;
    text-align: center;
}
.map-pin {
    position: absolute;
    left: 12%;
    bottom: 14%;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: white;
    background: var(--coral);
    border-radius: 18px 18px 18px 4px;
    font: 800 1.4rem Inter, Arial, sans-serif;
}
.stack-case {
    background: var(--dark);
}
.stack-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    color: var(--ink);
    background: white;
    border-radius: 38px;
    transform: translate(-50%, -50%);
    font: 800 .95rem Inter, Arial, sans-serif;
}
.stack-case span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    color: white;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    font: 800 .95rem Inter, Arial, sans-serif;
}
.stack-case i {
    position: absolute;
    width: 65%;
    height: 2px;
    left: 18%;
    top: 50%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
}
.stack-case i:nth-of-type(2) { transform: rotate(50deg); }
.stack-case i:nth-of-type(3) { transform: rotate(-50deg); }
.published-work-section { background: var(--paper); }
.coming-soon-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 32px;
    background: white;
    border: 1px dashed #c8bda9;
    border-radius: 28px;
    box-shadow: var(--shadow-soft);
}
.coming-soon-panel span {
    color: var(--coral);
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.founder-section { background: var(--paper-2); }
.founder-grid {
    display: grid;
    grid-template-columns: minmax(260px, .55fr) minmax(0, 1fr);
    gap: 50px;
    align-items: center;
}
.founder-mark, .about-hero-mark {
    display: grid;
    place-items: center;
    min-height: 350px;
    color: var(--ink);
    background: linear-gradient(135deg, var(--brand-grad-1), var(--brand-grad-3));
    border: 1px solid #e3d8ef;
    border-radius: 34px;
    box-shadow: var(--shadow-soft);
}
.founder-mark span, .about-hero-mark span {
    display: grid;
    place-items: center;
    width: 154px;
    height: 154px;
    background: white;
    color: var(--ink);
    border-radius: 48px;
    font: 800 3rem Inter, Arial, sans-serif;
}
.founder-mark i, .about-hero-mark i {
    margin-top: 18px;
    color: var(--muted);
    font-style: normal;
    font-weight: 800;
}
.principle-card span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    color: white;
    background: var(--ink);
    border-radius: 14px;
    font: 800 .9rem Inter, Arial, sans-serif;
}
.bilingual-band {
    background: linear-gradient(135deg, #fff1d7, #e7f4ff);
    border-block: 1px solid #f0dfbf;
}

.website-page-hero, .services-page-hero, .about-page-hero {
    background:
        radial-gradient(circle at 84% 12%, rgba(138,207,240,.20), transparent 26rem),
        radial-gradient(circle at 6% 92%, rgba(135,95,170,.13), transparent 26rem),
        var(--paper);
    border-bottom: 1px solid var(--line);
}
.website-hero-art {
    position: relative;
}
.responsive-desktop {
    position: absolute;
    left: 0;
    top: 24px;
    width: 82%;
    overflow: hidden;
    background: white;
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow: var(--shadow);
}
.responsive-desktop > span {
    display: block;
    height: 120px;
    margin: 18px;
    background: linear-gradient(135deg, #fff1d7, #dff8ea);
    border-radius: 20px;
}
.responsive-desktop b, .responsive-desktop em {
    display: block;
    height: 16px;
    margin: 0 18px 12px;
    background: #dfe5ee;
    border-radius: 999px;
}
.responsive-desktop b { width: 62%; }
.responsive-desktop em { width: 42%; }
.responsive-desktop div:last-child {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 8px 18px 18px;
}
.responsive-desktop div:last-child i {
    height: 48px;
    background: #f1f4fa;
    border-radius: 14px;
}
.responsive-phone {
    position: absolute;
    right: 4px;
    bottom: 12px;
    width: 128px;
    padding: 14px;
    background: var(--dark);
    border: 5px solid white;
    border-radius: 30px;
    box-shadow: var(--shadow);
}
.responsive-phone span, .responsive-phone b, .responsive-phone i {
    display: block;
    margin-bottom: 9px;
    border-radius: 999px;
}
.responsive-phone span { height: 82px; background: linear-gradient(135deg, var(--coral), var(--gold)); border-radius: 18px; }
.responsive-phone b, .responsive-phone i { height: 10px; background: rgba(255,255,255,.42); }
.free-build-visual {
    position: relative;
    min-height: 330px;
    padding: 28px;
    background: var(--dark);
    border-radius: 32px;
    box-shadow: var(--shadow);
}
.build-label, .build-location {
    display: inline-flex;
    padding: 9px 12px;
    color: var(--ink);
    background: var(--gold);
    border-radius: 999px;
    font-weight: 800;
}
.build-location {
    position: absolute;
    right: 24px;
    bottom: 24px;
    background: var(--mint);
}
.build-screen {
    margin-top: 34px;
    padding: 18px;
    background: white;
    border-radius: 24px;
    transform: rotate(-3deg);
}
.build-screen span, .build-screen b, .build-screen i {
    display: block;
    margin-bottom: 12px;
    border-radius: 999px;
}
.build-screen span { height: 118px; background: linear-gradient(135deg, #ffe0c6, #e7f4ff); border-radius: 20px; }
.build-screen b { width: 70%; height: 18px; background: #dfe5ee; }
.build-screen i { height: 12px; background: #edf1f7; }

.service-hero-inner { max-width: 940px; text-align: center; }
.service-hero-inner .lead, .service-hero-inner .button-row { margin-left: auto; margin-right: auto; justify-content: center; }
.service-detail {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) minmax(320px, .72fr);
    gap: 32px;
    align-items: start;
}
/* Elements that are both .section and a grid center rows via align-content. */
.service-detail.section { display: grid; align-content: center; }
.service-number {
    color: var(--coral);
    font: 800 clamp(2.4rem, 5vw, 4.4rem) Inter, Arial, sans-serif;
    line-height: 1;
}
.service-list-card li, .upgrade-list-card li, .check-list li, .plain-list li {
    margin-bottom: 10px;
}
.check-list { list-style: none; padding: 0; }
.check-list li {
    position: relative;
    padding-left: 28px;
}
.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .58em;
    width: 10px;
    height: 10px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(19,163,111,.14);
}

.final-cta {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    color: var(--ink);
    background: linear-gradient(135deg, var(--brand-grad-1), var(--brand-grad-3));
    border-block: 1px solid #e3d8ef;
}
.final-cta-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}
.final-cta h2 { max-width: 820px; }
.final-cta p { color: #41444f; }
.final-cta-orb {
    position: absolute;
    right: -10rem;
    top: -12rem;
    width: 30rem;
    height: 30rem;
    background: rgba(120,103,255,.28);
    filter: blur(26px);
    border-radius: 50%;
}
.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.form-section { padding-bottom: 90px; }
.audit-form-layout {
    display: grid;
    grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr);
    gap: 36px;
    align-items: start;
}
.audit-sidebar {
    position: sticky;
    top: 96px;
    padding: 26px;
    background: linear-gradient(135deg, #fff8e8, #e9f7ef);
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow: var(--shadow-soft);
}
.audit-sidebar h2 { font-size: 1.75rem; }
.form-card {
    padding: clamp(22px, 4vw, 34px);
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(16,16,20,.09);
    border-radius: 28px;
    box-shadow: var(--shadow);
}
.field { margin-bottom: 20px; }
.field label {
    display: block;
    margin-bottom: 8px;
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
}
input, select, textarea {
    width: 100%;
    padding: 13px 14px;
    color: var(--ink);
    background: white;
    border: 1px solid #d7d0c4;
    border-radius: 16px;
    font: inherit;
    transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(40,120,216,.12);
    outline: 0;
}
textarea { resize: vertical; }
input[type="checkbox"], input[type="radio"] {
    width: auto;
    margin-right: 8px;
    accent-color: var(--blue);
}
.field-request_type ul, .field-media_permission_status ul, .field ul {
    display: grid;
    gap: 8px;
    padding: 0;
    list-style: none;
}
.field-request_type li, .field-media_permission_status li, .field-help_needed li {
    padding: 10px 12px;
    background: #faf8f3;
    border: 1px solid var(--line);
    border-radius: 16px;
}
.field-help_needed ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-help_needed li label {
    display: flex;
    align-items: flex-start;
    margin: 0;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-weight: 600;
}
.honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.error { color: #b42318; font-weight: 800; }
.form-note {
    padding: 15px;
    background: rgba(245,189,67,.18);
    border: 1px solid rgba(245,189,67,.28);
    border-radius: 18px;
}
.privacy-note {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: .9rem;
    text-align: center;
}
.booking-card { position: relative; overflow: hidden; }
.booking-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    color: white;
    background: var(--blue);
    border-radius: 18px;
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
}

.showcase-card { overflow: hidden; padding: 0; }
.showcase-card img, .screenshot-placeholder {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #e9eef4;
}
.screenshot-placeholder { display: grid; place-items: center; }
.screenshot-placeholder span {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    color: white;
    background: var(--ink);
    border-radius: 24px;
    font: 800 2rem Inter, Arial, sans-serif;
}
.showcase-body { padding: 22px; }
.empty-state {
    padding: 38px;
    background: white;
    border: 1px dashed #cfc4b2;
    border-radius: 28px;
    text-align: center;
}
.feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.feature-list span, .tagline {
    display: inline-flex;
    padding: 8px 10px;
    color: #0d6845;
    background: #eef8f3;
    border-radius: 999px;
    font-weight: 800;
}
.legal { padding: 0 0 80px; }
.legal p {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

/* Legal documents (Terms / Privacy) */
.legal-meta { color: var(--muted); font-weight: 600; margin-top: 6px; }
.legal-doc h2 {
    font-size: 1.4rem;
    margin: 40px 0 12px;
    scroll-margin-top: 90px;
}
.legal-doc p { border-bottom: 0; padding-bottom: 14px; }
.legal-doc ul {
    margin: 0 0 18px;
    padding-left: 1.1rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
}
.legal-doc li { margin-bottom: 8px; }
.legal-summary {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 20px 22px;
    margin-bottom: 26px;
}
.legal-summary p { border-bottom: 0; padding-bottom: 0; }
.legal-toc {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 16px 22px 16px 40px;
    margin-bottom: 34px;
}
.legal-toc ol { margin: 0; columns: 2; gap: 28px; }
.legal-toc li { margin-bottom: 6px; }
.legal-toc a { color: var(--blue); font-weight: 600; }
.legal-placeholder { color: var(--coral); font-weight: 700; }
.legal-disclaimer {
    margin-top: 28px;
    color: var(--muted);
    font-style: italic;
    border-bottom: 0;
}

/* Dashboards: operator analytics + client (shared .dash / .dash-head / .kpi / .dash-table) */
.dash { padding: 40px 0 90px; }
.dash-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dash-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0; }
.dash-sub { color: var(--muted); margin: 0 0 26px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.kpi {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
}
.kpi .kpi-label { color: var(--muted); font-weight: 600; font-size: .95rem; }
.kpi .kpi-value { font-size: 2.1rem; font-weight: 800; line-height: 1.1; margin-top: 4px; }
.kpi .kpi-foot { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.dash-panel {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 22px;
    margin-top: 22px;
}
.dash-panel h2 { font-size: 1.25rem; margin: 0 0 16px; }
.dash-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 160px; }
.bars .bar { flex: 1; background: var(--green); border-radius: 4px 4px 0 0; min-height: 2px; opacity: .85; }
.bars .bar:hover { opacity: 1; }
.bar-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; margin-top: 8px; }
.dash-table { width: 100%; border-collapse: collapse; }
.dash-table th, .dash-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.dash-table th { color: var(--muted); font-weight: 600; font-size: .9rem; }
/* Row-header label cells read as body cells, not column-header chrome. */
.dash-table th[scope="row"] { color: inherit; font-weight: inherit; font-size: inherit; }
.dash-table td.num, .dash-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.status-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; background: var(--mint); color: #0c6b48; }
.dash-empty { color: var(--muted); }
.dash-sub { color: var(--muted); font-size: .85rem; font-weight: 400; }
@media (max-width: 860px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .dash-two { grid-template-columns: 1fr; }
    .legal-toc ol { columns: 1; }
}
.message {
    padding: 12px 14px;
    background: #eef8f3;
    border-radius: 16px;
    font-weight: 800;
}

.site-footer {
    padding: 56px 0;
    color: var(--ink);
    background: var(--soft);
    border-top: 1px solid var(--line);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 34px;
}
.site-footer h2 { font-size: 1rem; letter-spacing: 0; }
.site-footer a {
    display: block;
    margin-bottom: 8px;
    color: #3a3b45;
}
.site-footer a:hover { color: var(--blue); }
.footer-cta { font-weight: 800; color: var(--ink) !important; }
.footer-sub { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.footer-sub a { font-size: .86rem; color: var(--muted); margin-bottom: 6px; }
.footer-note { color: var(--muted); font-size: .92rem; }
.footer-brand { margin-bottom: 12px; }
/* Subtle EN · ES language toggle (moved out of the top nav) */
.footer-lang { margin-top: 14px; font-size: .82rem; letter-spacing: .04em; }
.footer-lang a { display: inline; margin: 0; text-decoration: none; opacity: .55; }
.footer-lang a[aria-current] { opacity: 1; font-weight: 700; }
.footer-lang a:hover { opacity: 1; }
.footer-lang span { opacity: .4; margin: 0 4px; }
.success { text-align: center; }
.centered { justify-content: center; }

.reveal {
    opacity: 1;
    transform: none;
}
.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s ease;
}
.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(19,163,111,.42); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(19,163,111,0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes orbitFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(4deg); }
}

@media (max-width: 980px) {
    .site-header { padding: 12px 18px; }
    .nav-toggle-label {
        display: grid;
        gap: 5px;
        width: 42px;
        padding: 8px;
        cursor: pointer;
    }
    .nav-toggle:focus-visible + .nav-toggle-label { outline: 3px solid var(--blue); outline-offset: 3px; }
    .nav-toggle-label span {
        height: 3px;
        background: var(--ink);
        border-radius: 2px;
    }
    .main-nav {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 16px 18px 22px;
        background: rgba(255,250,240,.98);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 18px 34px rgba(16,16,20,.08);
    }
    .main-nav a { padding: 10px 0; }
    .nav-toggle:checked ~ .main-nav { display: flex; }
    .hero-grid, .split, .footer-grid, .audit-showcase-grid, .audit-grid, .audit-form-layout, .service-detail, .page-hero-grid, .case-study, .founder-grid {
        grid-template-columns: 1fr;
    }
    .hero, .hero-grid { min-height: auto; }
    .hero-grid { padding: 56px 0 82px; }
    .hero-system { min-height: 520px; }
    .cards.three, .steps, .steps.four, .process-line, .work-feature-grid { grid-template-columns: 1fr; }
    .section { padding: 66px 0; }
    .section-heading.row, .split-heading, .final-cta-inner, .coming-soon-panel {
        align-items: start;
        flex-direction: column;
    }
    .friction-card, .friction-card:nth-child(2), .friction-card:nth-child(3) { margin-left: 0; }
    .service-panel { grid-template-columns: 1fr; }
    .audit-sidebar { position: static; }
    .service-number { margin-bottom: -12px; }
    .work-feature-main { grid-row: auto; }
    .cta-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
    body { font-size: 17px; }
    .wrap, .narrow { width: min(100% - 28px, 1160px); }
    h1 { font-size: clamp(2.55rem, 15vw, 4rem); }
    .button-row, .button { width: 100%; }
    .button { justify-content: center; }
    .hero-system { min-height: auto; padding-bottom: 74px; }
    .system-message { grid-template-columns: 44px 1fr; }
    .send-chip { grid-column: 1 / -1; text-align: center; }
    .floating-card-one, .floating-card-two {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        margin-top: 14px;
        animation: none;
    }
    .capability-track { animation-duration: 20s; }
    .friction-card { grid-template-columns: 1fr; }
    .score-row { grid-template-columns: 1fr; }
    .score-row b { text-align: left; }
    .automation-preview { grid-template-columns: 1fr; }
    .automation-preview > b { height: 28px; width: 3px; }
    .field-help_needed ul { grid-template-columns: 1fr; }
    .responsive-desktop, .responsive-phone { position: relative; width: 100%; inset: auto; margin-bottom: 16px; }
    .website-hero-art { min-height: auto; }
    .case-study { padding: 22px; }
    .case-visual { min-height: 280px; }
    .site-mock { width: 170px; }
    .final-cta { padding: 62px 0; }
}

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

/* Audit-first product experience */
.audit-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 8%, rgba(19, 163, 111, .12), transparent 24rem),
        radial-gradient(circle at 88% 12%, rgba(40, 120, 216, .11), transparent 26rem),
        #fbf8f1;
    border-bottom: 1px solid var(--line);
}
.audit-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .84fr) minmax(310px, .9fr);
    gap: 24px;
    align-items: center;
    min-height: calc(100svh - 67px);
    padding: 22px 0 28px;
}
.audit-hero-copy h1 {
    max-width: 650px;
    margin-bottom: 20px;
    font-size: clamp(2.55rem, 4.25vw, 4.25rem);
    line-height: .98;
}
.audit-hero-copy .lead { max-width: 640px; font-size: clamp(1.05rem, 1.55vw, 1.25rem); }
.audit-deliverables {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}
.audit-deliverables span {
    padding: 7px 10px;
    color: #355044;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(16,16,20,.08);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
}
.hero-audit-card {
    overflow: hidden;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(16,16,20,.1);
    border-radius: 24px;
    box-shadow: 0 22px 55px rgba(16,16,20,.12);
}
.hero-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    color: var(--ink);
    background: linear-gradient(135deg, #f1f9f3, #eaf3fb);
    border-bottom: 1px solid var(--line);
}
.hero-card-head span, .step-label span {
    display: block;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.hero-card-head strong { display: block; margin-top: 2px; font-family: Inter, Arial, sans-serif; }
.hero-card-head i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--dark);
    background: var(--mint);
    border-radius: 50%;
    font-style: normal;
    font-weight: 800;
}
/* ---- Growth Scorecard intake form (redesigned, progressive-enhancement) ---- */
.audit-form { padding: 16px 18px 18px; }
.audit-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Path selection — real radio cards (work without JS) */
.audit-paths { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.audit-paths legend { padding: 0 0 8px; color: var(--muted); font: 800 .72rem/1 Inter, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.audit-path {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.audit-path:hover { border-color: rgba(19, 163, 111, .42); }
.audit-path input { flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--green); }
.audit-path-body strong { display: block; font: 700 .92rem Inter, Arial, sans-serif; color: var(--ink); }
.audit-path-body small { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; line-height: 1.3; }
.audit-path.is-active { border-color: var(--green); background: var(--mint); box-shadow: 0 6px 18px rgba(19, 163, 111, .12); }
.audit-path:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Progress (revealed once enhanced) */
.audit-progress { margin: 0 0 16px; }
.audit-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.audit-progress-meta span { font: 700 .9rem Inter, Arial, sans-serif; color: var(--ink); }
.audit-progress-meta b { color: var(--muted); font: 800 .7rem/1 Inter, Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.audit-progress-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.audit-progress-track li { height: 4px; background: #e6e6e0; border-radius: 999px; transition: background-color .25s ease; }
.audit-progress-track li span { position: absolute; left: -9999px; }
.audit-progress-track li.is-active { background: var(--green); }

/* Fields */
.afield { margin-bottom: 13px; }
.afield > label { display: block; margin-bottom: 5px; color: var(--ink); font: 600 .86rem Inter, Arial, sans-serif; }
.audit-form input:not([type="radio"]):not([type="checkbox"]), .audit-form textarea, .audit-form select {
    width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 12px;
    background: #fff; color: var(--ink); font-size: .95rem;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.audit-form textarea { min-height: 80px; resize: vertical; }
.audit-form input:focus, .audit-form textarea:focus, .audit-form select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(19, 163, 111, .16); outline: none; }
.afield.has-error input, .afield.has-error textarea, .afield.has-error select { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 107, 74, .14); }
.afield-help { margin: 5px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.afield-error { margin: 5px 0 0; color: #c43d22; font-size: .78rem; font-weight: 600; }

/* Optional details disclosure */
.audit-optional { margin: 2px 0 13px; padding: 0 13px; border: 1px dashed var(--line); border-radius: 12px; }
.audit-optional summary { padding: 10px 0; color: var(--muted); font: 600 .82rem Inter, Arial, sans-serif; cursor: pointer; }
.audit-optional[open] summary { margin-bottom: 11px; color: var(--ink); border-bottom: 1px solid var(--line); }

/* Steps (fieldsets) */
.audit-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.audit-step-head { margin-bottom: 12px; padding: 0; }
.audit-step-head strong { display: block; color: var(--ink); font: 700 1rem Inter, Arial, sans-serif; }
.audit-step-head span { display: block; margin-top: 3px; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.audit-step-nav { display: flex; gap: 9px; margin-top: 4px; }
.audit-step-nav .button { flex: 1; min-height: 46px; padding: 11px 14px; font-size: .86rem; }
.form-legal { margin: 11px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.35; text-align: center; }
.intake-meta { margin: 0 0 14px; color: var(--muted); font-size: .78rem; line-height: 1.4; text-align: center; }
.afield-hint { margin: 5px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }

/* "Upgrade my site" business lookup (rendered only when Places is enabled). */
.biz-lookup-row { display: flex; gap: 8px; }
.biz-lookup-row input { flex: 1; min-width: 0; }
.biz-lookup-row .button { flex: none; padding: 10px 18px; }
.biz-lookup-status { font-weight: 600; color: var(--brand-deep, #2a2b35); }

/* Enhanced flow vs no-JS stacked fallback */
.audit-enhanced .audit-step { transition: opacity .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1); }
.audit-enhanced .audit-step.is-hidden { display: none; }
.audit-enhanced .audit-step.is-entering { opacity: 0; transform: translateY(8px); }
.audit-form:not(.audit-enhanced) .audit-next,
.audit-form:not(.audit-enhanced) .audit-back { display: none; }
.audit-form:not(.audit-enhanced) .audit-step { margin-bottom: 24px; }

/* Shared helpers retained for other templates */
.step-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.step-label span { color: var(--green); }
.step-label b { font-size: .84rem; }
.form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 9px 0 13px;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.3;
}
.consent-row input { flex: 0 0 auto; margin: 2px 0 0; }
.form-trust { margin: 10px 0 0; color: var(--muted); font-size: .72rem; text-align: center; }
/* Assent line — make the Terms/Privacy links visibly clickable, not plain text */
.form-assent { margin: 6px 0 0; color: var(--muted); font-size: .72rem; text-align: center; }
.form-assent a { color: var(--brand-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.form-assent a:hover { text-decoration: none; }

.hero-report-preview {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(16,16,20,.1);
    border-radius: 24px;
    box-shadow: 0 22px 55px rgba(16,16,20,.12);
}
.preview-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    color: #dfe3ef;
    background: var(--dark);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}
.preview-toolbar b { color: #76e5bb; }
.preview-score {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 15px;
    align-items: center;
    padding: 18px 16px 13px;
}
.preview-score h2 { margin: 4px 0 0; font-size: 1.28rem; line-height: 1.08; }
.score-ring {
    display: grid;
    place-items: center;
    align-content: center;
    width: 92px;
    height: 92px;
    background: radial-gradient(circle closest-side, white 76%, transparent 77% 99%), conic-gradient(var(--green) calc(var(--display-score, var(--score)) * 1%), #e8e8e4 0);
    border-radius: 50%;
}
.score-ring strong { font: 800 1.65rem Inter, Arial, sans-serif; line-height: 1; }
.score-ring span { color: var(--muted); font-size: .65rem; }
.preview-bars { display: grid; gap: 9px; padding: 8px 16px 17px; }
.preview-bars > div {
    display: grid;
    grid-template-columns: 105px 1fr 25px;
    gap: 8px;
    align-items: center;
    font-size: .76rem;
    font-weight: 800;
}
.preview-bars i { overflow: hidden; height: 7px; background: #ecebe7; border-radius: 99px; }
.preview-bars i b { display: block; width: var(--bar); height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: inherit; transform-origin: left; }
.js [data-scorecard-animation] .preview-bars i b { transform: scaleX(0); }
.js [data-scorecard-animation].is-animated .preview-bars i b { animation: grow-bar .85s cubic-bezier(.22, 1, .36, 1) both; }
.js [data-scorecard-animation].is-animated .preview-bars > div:nth-child(2) i b { animation-delay: 90ms; }
.js [data-scorecard-animation].is-animated .preview-bars > div:nth-child(3) i b { animation-delay: 180ms; }
.preview-next { padding: 14px 16px; background: #f0f6f2; border-top: 1px solid #dbe9e0; }
.preview-next span { display: block; color: var(--green); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.preview-next strong { display: block; margin-top: 3px; font-size: .87rem; }
@keyframes grow-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.trust-strip { padding: 14px 0; color: #dce1ed; background: var(--dark); }
.trust-strip .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; }
.trust-strip span { font-size: .78rem; font-weight: 800; letter-spacing: .03em; }

.report-grid, .services-focus-grid, .toolkit-grid, .faq-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: center;
}
.report-section { background: var(--paper-2); }
.report-pages { position: relative; overflow: hidden; min-height: 440px; }
.report-page {
    position: relative;
    z-index: 2;
    min-height: 410px;
    padding: 26px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.report-page-back {
    position: absolute;
    z-index: 1;
    inset: 25px -15px -15px 30px;
    min-height: auto;
    background: #e5eee9;
    transform: rotate(3deg);
}
.report-page-head { display: flex; justify-content: space-between; color: var(--muted); font-size: .72rem; font-weight: 800; }
.report-page-title { margin: 56px 0 30px; }
.report-page-title small { color: var(--green); font-weight: 800; text-transform: uppercase; }
.report-page-title strong { display: block; max-width: 460px; margin-top: 8px; font: 800 1.9rem/1.05 Inter, Arial, sans-serif; letter-spacing: -.04em; }
.annotation-row { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.annotation-row i { display: grid; place-items: center; width: 27px; height: 27px; color: white; background: var(--blue); border-radius: 50%; font-style: normal; font-size: .78rem; font-weight: 800; }
.annotation-row p { margin: 0; font-size: .9rem; }
.mini-roadmap { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); font-size: .7rem; font-weight: 800; }
.mini-roadmap b { flex: 1; height: 2px; background: var(--line); }

.coverage-section { color: white; background: var(--dark); }
.coverage-section .lead { color: #c8cede; }
.coverage-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.coverage-card { padding: 22px 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; }
.coverage-card span { color: #6fe0b4; font: 800 1.55rem Inter, Arial, sans-serif; }
.coverage-card h3 { margin-top: 28px; font-size: 1.12rem; line-height: 1.08; }
.coverage-card p { margin: 0; color: #bfc5d4; font-size: .86rem; }
.three-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.process-card { padding: 25px; background: rgba(255,255,255,.75); border: 1px solid var(--line); border-radius: 20px; }
.process-card > span { color: var(--green); font-weight: 800; }
.process-card h3 { margin-top: 38px; }
.process-card p { margin: 0; color: var(--muted); }

.services-focus { background: #edf4f0; }
.services-focus-grid { align-items: start; }
.price-promise { padding: 16px; background: white; border-left: 4px solid var(--green); border-radius: 0 14px 14px 0; font-weight: 800; }
.service-list { display: grid; gap: 12px; }
.service-row { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 22px; background: white; border: 1px solid #d9e5de; border-radius: 18px; }
.service-row > span { color: var(--green); font: 800 .85rem Inter, Arial, sans-serif; }
.service-row h3 { margin-bottom: 8px; }
.service-row p { margin: 0; color: var(--muted); }

.media-proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.media-slot { padding: 14px; background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-soft); }
.media-slot-wide { grid-column: 1 / -1; }
.media-placeholder {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 250px;
    color: white;
    background: linear-gradient(135deg, #1b2030, #26483b);
    border-radius: 14px;
    text-align: center;
}
.media-asset {
    width: 100%;
    min-height: 250px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--dark);
    border-radius: 14px;
}
.media-slot-wide .media-asset { aspect-ratio: 16 / 8; }
.media-slot-wide .media-placeholder { min-height: 340px; }
.media-placeholder span { font: 800 .85rem Inter, Arial, sans-serif; letter-spacing: .12em; }
.media-placeholder small { margin-top: 8px; color: #cfd9d4; }
.media-placeholder-flow { background: linear-gradient(135deg, #24243b, #384f82); }
.media-slot h3 { margin: 16px 5px 4px; font-size: 1.25rem; }
.founder-video-slot {
    display: grid;
    align-content: end;
    min-height: 430px;
    padding: 28px;
    color: white;
    background: linear-gradient(155deg, #1a1c28, #235541);
    border-radius: 26px;
    box-shadow: var(--shadow);
}
.founder-video-slot span { color: #76e5bb; font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.founder-video-slot strong { max-width: 380px; margin: 8px 0; font: 800 1.8rem/1.05 Inter, Arial, sans-serif; }
.founder-video-slot small { color: #c6d6cf; }
.founder-video-asset { width: 100%; padding: 0; object-fit: cover; }
.founder-photo-asset {
    width: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center top;
}
.about-founder-photo {
    width: 100%;
    min-height: 350px;
    max-height: 520px;
    object-fit: cover;
    object-position: center top;
    border-radius: 34px;
    box-shadow: var(--shadow);
}

.toolkit-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; }
.toolkit-modal[hidden] { display: none; }
.toolkit-modal-backdrop { position: absolute; inset: 0; background: rgba(17,19,29,.58); backdrop-filter: blur(5px); }
.toolkit-dialog { position: relative; z-index: 1; width: min(620px, 100%); padding: 30px; background: #fffaf0; border: 1px solid rgba(255,255,255,.5); border-radius: 26px; box-shadow: 0 30px 90px rgba(16,16,20,.28); }
.toolkit-dialog h2 { max-width: 520px; font-size: clamp(2rem, 5vw, 3.25rem); }
.toolkit-close { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; font-size: 1.6rem; background: white; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.toolkit-form { display: grid; grid-template-columns: 1fr 1.35fr auto; gap: 10px; align-items: end; margin-top: 20px; }
.toolkit-form label:not(.consent-row) { display: block; margin-bottom: 5px; font-size: .78rem; font-weight: 800; }
.toolkit-form input { padding: 10px 12px; }
.toolkit-form .consent-row { grid-column: 1 / -1; margin: 0; }
.toolkit-form .button { min-height: 46px; padding: 10px 16px; }

.faq-grid { align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; font: 800 1.08rem Inter, Arial, sans-serif; }
.faq-list p { margin: 12px 0 0; color: var(--muted); }

.audit-page { min-height: calc(100svh - 67px); padding: 38px 0 54px; background: linear-gradient(135deg, #fbf8f1, #edf5f1); }
.audit-page-grid { display: grid; grid-template-columns: 1fr minmax(330px, .76fr); gap: 70px; align-items: start; }
.audit-page-copy h1 { max-width: 730px; font-size: clamp(2.8rem, 5.3vw, 4.8rem); }
.audit-page .hero-audit-card { position: sticky; top: 96px; }

.private-report { min-height: 75vh; padding: 44px 0 90px; background: #f7f5ef; }
.private-report .section-heading { margin-bottom: 16px; }
.private-report .section-heading h2 { margin-bottom: 6px; font-size: clamp(1.45rem, 2.6vw, 2.05rem); }
.private-report .report-split h2 { margin-bottom: 12px; font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
.report-private-head { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.report-private-head h1 { max-width: 900px; font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.report-private-head .compact { margin-top: 10px; font-size: .92rem; }
.private-pill { padding: 9px 13px; color: #0d6845; background: var(--mint); border-radius: 999px; font-weight: 800; white-space: nowrap; }
.confirm-summary { display: inline-block; margin: 4px 0 16px; padding: 14px 20px; background: white; border: 1px solid var(--line); border-radius: 16px; text-align: left; }
.confirm-summary p { margin: 4px 0; }
.audit-progress-card { max-width: 760px; margin: 0 auto; padding: 42px; background: white; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); text-align: center; }
.progress-orbit { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 22px; border: 2px solid #dce6e0; border-radius: 50%; animation: orbit 2s linear infinite; }
.progress-orbit span { width: 18px; height: 18px; background: var(--green); border-radius: 50%; transform: translateY(-37px); }
@keyframes orbit { to { transform: rotate(360deg); } }
.progress-track { overflow: hidden; height: 12px; margin: 26px 0 9px; background: #e7e8e4; border-radius: 99px; }
.progress-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: inherit; transition: width .4s ease; }
.progress-stages { display: flex; justify-content: space-between; gap: 10px; margin-top: 24px; color: var(--muted); font-size: .76rem; font-weight: 800; }
.report-summary-grid { display: grid; grid-template-columns: 210px 1fr; gap: 14px; }
.report-summary-market { display: block; }
.overall-score-card, .executive-card, .report-block { padding: 22px 24px; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-soft); }
.overall-score-card { display: grid; align-content: center; text-align: center; }
.overall-score-card > span, .executive-card > span { color: var(--green); font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.overall-score-card > strong { font: 800 4.6rem/1 Inter, Arial, sans-serif; }
.executive-card .exec-summary { margin: 10px 0 16px; font-size: 1.06rem; line-height: 1.55; }
.executive-card .button-row { margin: 0; }
.summary-scores { grid-column: 1 / -1; }
.summary-scores article { background: white; border: 1px solid var(--line); }
.report-block { margin-top: 14px; }
.report-score-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.report-score-grid article { padding: 14px 16px; background: #f2f5f2; border-radius: 14px; }
.report-score-grid span { display: block; min-height: 36px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.report-score-grid strong { font: 800 1.9rem Inter, Arial, sans-serif; }
.report-score-grid article > i {
    display: block;
    overflow: hidden;
    height: 7px;
    margin-top: 13px;
    background: #dfe5e0;
    border-radius: 99px;
}
.report-score-grid article > i b {
    display: block;
    width: var(--score);
    height: 100%;
    background: linear-gradient(90deg, var(--blue), var(--green));
    border-radius: inherit;
    transform-origin: left;
}
.js [data-scorecard-animation] .report-score-grid article > i b,
.js .report-score-grid[data-scorecard-animation] article > i b { transform: scaleX(0); }
.js [data-scorecard-animation].is-animated .report-score-grid article > i b,
.js .report-score-grid[data-scorecard-animation].is-animated article > i b {
    animation: grow-bar .8s cubic-bezier(.22, 1, .36, 1) both;
}
.js .report-score-grid[data-scorecard-animation].is-animated article:nth-child(2) > i b { animation-delay: 70ms; }
.js .report-score-grid[data-scorecard-animation].is-animated article:nth-child(3) > i b { animation-delay: 140ms; }
.js .report-score-grid[data-scorecard-animation].is-animated article:nth-child(4) > i b { animation-delay: 210ms; }
.js .report-score-grid[data-scorecard-animation].is-animated article:nth-child(5) > i b { animation-delay: 280ms; }
.finding-hint { margin: 0; font-size: .92rem; }
.finding-list { display: grid; gap: 8px; }
.audit-screenshot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.audit-screenshot-grid figure { margin: 0; overflow: hidden; background: #f4f5f2; border: 1px solid var(--line); border-radius: 14px; }
.audit-screenshot-grid img { width: 100%; height: 170px; object-fit: cover; object-position: top; }
.audit-screenshot-grid figcaption { padding: 8px 12px; color: var(--muted); font-size: .76rem; font-weight: 800; }
.finding-card { background: #f8f8f5; border-radius: 13px; }
.finding-card summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; }
.finding-card summary::-webkit-details-marker { display: none; }
.finding-card summary h3 { flex: 1; margin: 0; font-size: 1.04rem; letter-spacing: -.015em; }
.priority-chip { flex-shrink: 0; min-width: 64px; padding: 4px 9px; border-radius: 999px; font-size: .68rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.priority-high { color: #9c2c12; background: #ffe3da; }
.priority-medium { color: #7a5c08; background: #fdeec3; }
.priority-low { color: #0d6845; background: var(--mint); }
.finding-chevron { flex-shrink: 0; width: 9px; height: 9px; border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted); transform: rotate(45deg); transition: transform .2s ease; }
details[open] > summary .finding-chevron { transform: rotate(-135deg); }
.finding-body { padding: 0 18px 16px; }
.finding-body p { margin: 6px 0; font-size: .97rem; }
.report-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.report-list li { margin-bottom: 8px; font-size: .97rem; }
.roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.roadmap-grid article { padding: 16px 18px; background: #f3f5f3; border-radius: 14px; }
.roadmap-grid span { color: var(--green); font-size: .85rem; font-weight: 800; }
.roadmap-grid ul { margin-top: 10px; }
.roadmap-grid li { margin-bottom: 7px; font-size: .94rem; }
.quote-block { background: linear-gradient(150deg, #fdfcf7, #f1f8f3); border-color: #d9e9de; }
.quote-lines { max-width: 860px; }
.quote-line { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid #e1e8e1; }
.quote-line strong { font-family: Inter, Arial, sans-serif; letter-spacing: -.02em; }
.quote-line p { margin: 3px 0 0; color: var(--muted); font-size: .9rem; }
.quote-deliverables { margin: 9px 0 2px; padding-left: 18px; color: #47584e; font-size: .85rem; }
.quote-deliverables li { margin-top: 4px; }
.quote-price { white-space: nowrap; font-family: Inter, Arial, sans-serif; font-weight: 800; }
.quote-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; max-width: 860px; margin-top: 18px; }
.quote-compare > div { padding: 18px 20px; border-radius: 16px; }
.quote-compare span { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.quote-compare strong { display: block; margin-top: 7px; font: 800 1.7rem Inter, Arial, sans-serif; letter-spacing: -.02em; }
.quote-compare small { display: block; margin-top: 7px; font-size: .8rem; line-height: 1.4; }
.quote-market { background: #f1f2ee; border: 1px solid #e1e3db; }
.quote-market span, .quote-market small { color: var(--muted); }
.quote-market strong { color: #4a4c59; }
.quote-founder { background: var(--mint); border: 1.5px solid rgba(19, 163, 111, .45); box-shadow: 0 14px 34px rgba(19, 163, 111, .14); }
.quote-founder span { color: #0d6845; }
.quote-founder span b { display: inline-block; margin-left: 7px; padding: 2px 8px; color: white; background: var(--green); border-radius: 999px; font-size: .68rem; vertical-align: middle; }
.quote-founder strong { color: #0b7a52; font-size: 2rem; }
.quote-founder small { color: #2f6b51; }
.quote-footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; max-width: 860px; margin-top: 18px; }
.quote-footer p { margin: 0; color: var(--muted); font-size: .92rem; }
.sources-block summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.sources-block summary::-webkit-details-marker { display: none; }
.sources-block summary .eyebrow { margin: 0; }
.sources-block ul { margin-top: 14px; }
.sources-block li { margin-bottom: 6px; font-size: .94rem; }
.sources-block a { color: var(--blue); text-decoration: underline; }
.report-cta-float { position: fixed; left: 16px; right: 92px; bottom: 16px; z-index: 90; display: flex; justify-content: center; pointer-events: none; }
.report-cta-float .button { pointer-events: auto; box-shadow: 0 18px 44px rgba(16, 16, 20, .35); transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .35s ease, visibility 0s linear 0s; }
.report-cta-float[data-state="hidden"] .button, .report-cta-float[data-state="docked"] .button { transform: translateY(90px); opacity: 0; visibility: hidden; transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .35s ease, visibility 0s linear .4s; }
.report-cta-float[data-state="docked"] .button { transform: translateY(26px) scale(.9); }
@media (min-width: 880px) { .report-cta-float { left: 0; right: 0; } }
@keyframes ctaDockLand { 0% { transform: translateY(-14px) scale(1.04); } 60% { transform: translateY(2px) scale(1.01); } 100% { transform: none; } }
.is-dock-landing { animation: ctaDockLand .55s cubic-bezier(.34, 1.3, .64, 1) both; }

.proposal-public h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
.proposal-expired { padding: 14px; color: #8b251c; background: #fee9e7; border-radius: 14px; font-weight: 800; }
.proposal-scope, .proposal-notes { margin: 28px 0; padding: 24px; background: white; border: 1px solid var(--line); border-radius: 18px; }
.proposal-lines { background: white; border: 1px solid var(--line); border-radius: 18px; }
.proposal-lines > div { display: flex; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.proposal-lines > div:last-child { border-bottom: 0; }
.proposal-lines small { display: block; }
.proposal-price { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.proposal-price > div { padding: 22px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 18px; }
.proposal-price > div.proposal-price-founder { background: var(--mint); border-color: rgba(16,16,20,.08); }
.proposal-price span { display: block; color: var(--muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.proposal-price strong { display: block; margin-top: 8px; font: 800 2rem Inter, Arial, sans-serif; }

@media (max-width: 1120px) {
    .audit-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); min-height: auto; padding: 52px 0; }
    .hero-report-preview { grid-column: 1 / -1; width: min(100%, 680px); margin: 0 auto; }
    .coverage-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 561px) {
    .audit-step-viewport { min-height: 400px; }
}
@media (max-width: 820px) {
    .audit-hero-grid, .report-grid, .services-focus-grid, .toolkit-grid, .faq-grid, .audit-page-grid { grid-template-columns: 1fr; }
    .audit-hero-grid { padding: 28px 0 42px; }
    .audit-hero-copy h1 { font-size: clamp(2.7rem, 11vw, 4.8rem); }
    .hero-audit-card { width: 100%; max-width: 620px; }
    .audit-page .hero-audit-card { position: static; }
    .coverage-grid { grid-template-columns: repeat(2, 1fr); }
    .three-step-grid, .roadmap-grid { grid-template-columns: 1fr; }
    .report-summary-grid { grid-template-columns: 1fr; }
    .quote-compare { grid-template-columns: 1fr; }
    .quote-footer { grid-template-columns: 1fr; justify-items: start; }
    .report-score-grid { grid-template-columns: repeat(2, 1fr); }
    .toolkit-form { grid-template-columns: 1fr 1fr; }
    .toolkit-form .button { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .audit-hero-copy h1 { font-size: 2.5rem; }
    .audit-page { padding: 20px 0 36px; }
    .audit-page-grid { gap: 20px; }
    .audit-page-copy h1 { margin-bottom: 12px; font-size: 2.35rem; line-height: 1; }
    .audit-page-copy .lead { margin-bottom: 0; font-size: 1rem; line-height: 1.45; }
    /* Keep the value props on mobile (condensed) rather than hiding them. */
    .audit-page-copy .check-list { margin-top: 14px; font-size: .85rem; }
    .audit-page-copy .check-list li { padding: 4px 0 4px 26px; }
    .audit-path-options { display: grid; grid-template-columns: 1fr; }
    .audit-path-visual { display: none; }
    .path-option { min-height: 34px; }
    .audit-deliverables { display: none; }
    .hero-report-preview { width: 100%; }
    .preview-score { grid-template-columns: 82px 1fr; }
    .score-ring { width: 80px; height: 80px; }
    .preview-bars > div { grid-template-columns: 92px 1fr 24px; }
    .trust-strip .wrap { display: grid; }
    .coverage-grid, .media-proof-grid, .form-two-col, .report-split, .proposal-price, .toolkit-form { grid-template-columns: 1fr; }
    .coverage-card h3 { margin-top: 18px; }
    .media-slot-wide { grid-column: auto; }
    .media-slot-wide .media-placeholder, .media-placeholder { min-height: 220px; }
    .report-pages { min-height: 470px; }
    .report-page-back { inset: 25px 0 -15px 15px; transform: rotate(1deg); }
    .report-page { padding: 20px; }
    .report-page-title { margin-top: 36px; }
    .report-page-title strong { font-size: 1.55rem; }
    .report-private-head { display: block; }
    .private-pill { display: inline-block; margin-top: 12px; }
    .audit-progress-card { padding: 26px 18px; }
    .progress-stages { display: grid; grid-template-columns: 1fr 1fr; }
    .report-score-grid { grid-template-columns: 1fr 1fr; }
    .quote-line { flex-direction: column; gap: 4px; }
    .audit-screenshot-grid { grid-template-columns: 1fr; }
    .toolkit-form .consent-row, .toolkit-form .button { grid-column: auto; }
    .audit-form-actions { flex-direction: column; }
    .toolkit-dialog { padding: 25px 18px 20px; }
}

/* Tailored AI systems positioning */
.ai-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 20%, rgba(135, 95, 170, .16), transparent 30rem),
        radial-gradient(circle at 90% 12%, rgba(138, 207, 240, .20), transparent 32rem),
        linear-gradient(145deg, var(--brand-grad-1) 0%, var(--brand-grad-2) 52%, var(--brand-grad-3) 100%);
}
.ai-hero::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background-image: linear-gradient(rgba(17, 19, 29, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 19, 29, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, black, transparent 82%);
}
/* Phase 4a: a slow, living ambient layer so the hero keeps breathing after the
   entrance reveal. Paints above the static gradient, below the grid mask + the
   z-index:1 content. Auto-frozen for prefers-reduced-motion by the global block. */
.ai-hero::before {
    position: absolute;
    inset: -25%;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(34% 34% at 24% 32%, rgba(135, 95, 170, .20), transparent 70%),
        radial-gradient(32% 32% at 80% 22%, rgba(138, 207, 240, .24), transparent 70%),
        radial-gradient(30% 30% at 62% 82%, rgba(110, 229, 181, .16), transparent 72%);
    filter: blur(6px);
    animation: heroDrift 28s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes heroDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.6%, -2.2%, 0) scale(1.07); }
    100% { transform: translate3d(-2.2%, 1.6%, 0) scale(1.04); }
}
.ai-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(410px, .95fr);
    gap: clamp(40px, 6vw, 84px);
    align-items: center;
    min-height: max(540px, calc(100svh - 67px));
    padding: 44px 0 52px;
}
.ai-hero-copy h1 { max-width: 720px; font-size: clamp(2.6rem, 4.6vw, 4.4rem); line-height: 1.03; }
.ai-hero-copy .lead { max-width: 700px; }
.focused-fix-note {
    max-width: 680px;
    margin: 22px 0 0;
    color: #4d505c;
    font-size: .9rem;
}
.focused-fix-note a { color: var(--blue); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.ai-hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; color: #41444f; font-size: .82rem; font-weight: 700; }
.ai-hero-trust span::before { margin-right: 8px; color: var(--green); content: "✓"; font-weight: 900; }

.ai-demo-section { padding: 110px 0; color: white; background: var(--dark); }
.ai-demo-section .section-heading .lead { color: #bfc5d4; }
.workflow-demo { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); overflow: hidden; margin-top: 50px; background: #191c28; border: 1px solid rgba(255,255,255,.1); border-radius: 26px; box-shadow: 0 30px 70px rgba(0,0,0,.24); }
.workflow-rail { display: grid; background: #0c0f17; border-right: 1px solid rgba(255,255,255,.1); }
.demo-step-button { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; padding: 22px; color: #bfc5d4; text-align: left; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); cursor: pointer; transition: background .2s ease, color .2s ease; }
.demo-step-button:last-child { border-bottom: 0; }
.demo-step-button b { display: grid; place-items: center; width: 34px; height: 34px; color: #8f98ad; background: #202535; border-radius: 10px; }
.demo-step-button span { font: 800 .9rem Inter, Arial, sans-serif; }
.demo-step-button:hover, .demo-step-button.is-active { color: white; background: #202535; }
.demo-step-button.is-active b { color: #09130f; background: #6ce5b5; }
.workflow-screen { padding: clamp(28px, 5vw, 58px); }
.workflow-screen-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 18px; color: #99a2b7; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.workflow-screen-head i { color: #6ce5b5; font-style: normal; }
.workflow-customer { display: flex; gap: 16px; align-items: center; margin: 34px 0 24px; }
.workflow-customer > span { display: grid; place-items: center; width: 52px; height: 52px; color: #07110d; background: #6ce5b5; border-radius: 50%; font: 800 1rem Inter, Arial, sans-serif; }
.workflow-customer small { display: block; color: #99a2b7; }
.workflow-customer strong { display: block; margin-top: 4px; font: 800 clamp(1.6rem, 3vw, 2.5rem) Inter, Arial, sans-serif; letter-spacing: -.04em; }
.workflow-screen > p { min-height: 82px; color: #d8dce6; font-size: 1.1rem; }
.workflow-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 28px 0; }
.workflow-fields span { padding: 14px; color: #929aad; background: #11141e; border-radius: 12px; font-size: .72rem; text-transform: uppercase; }
.workflow-fields b { display: block; margin-top: 5px; color: white; font-size: .82rem; text-transform: none; }
.workflow-human { display: flex; gap: 13px; align-items: flex-start; padding: 18px; color: #dcefe7; background: rgba(19,163,111,.12); border: 1px solid rgba(108,229,181,.18); border-radius: 15px; }
.workflow-human i { flex: 0 0 10px; height: 10px; margin-top: 7px; background: #6ce5b5; border-radius: 50%; box-shadow: 0 0 0 6px rgba(108,229,181,.1); }
.demo-cta { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-top: 28px; padding: 24px 28px; color: white; background: linear-gradient(90deg, rgba(40,120,216,.22), rgba(19,163,111,.2)); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; }
.demo-cta p { margin: 0; font-weight: 700; }

.focused-fixes { background: #fffdf8; }
.focused-fixes-grid, .focused-service-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(42px, 8vw, 105px);
    align-items: center;
}
.focused-fixes .section-heading .button { margin-top: 14px; }
.fix-list { display: grid; gap: 12px; }
.fix-list article {
    display: grid;
    grid-template-columns: 130px minmax(170px, .8fr) minmax(220px, 1.2fr);
    gap: 18px;
    align-items: center;
    padding: 22px 24px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}
.fix-list span, .assistant-scope-list span {
    color: var(--green);
    font: 800 .7rem Inter, Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.fix-list h3, .fix-list p { margin: 0; }
.fix-list h3 { font-size: 1.15rem; }
.fix-list p { color: var(--muted); font-size: .88rem; }

.ai-problems { background: var(--paper-2); }
.problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.problem-card { min-height: 280px; padding: 26px; background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-soft); }
.problem-card span, .outcome-card > span { color: var(--green); font: 800 .72rem Inter, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.problem-card h3 { margin-top: 46px; }
.problem-card p { color: var(--muted); }
.ai-outcomes { background: #eef7f3; }
.outcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin: 45px 0 28px; }
/* Pricing page: keep all products on a single row on wide screens (the price-menu
   feel), collapsing to 2-up then 1-up only when the screen is genuinely cramped.
   Count-agnostic via grid-auto-flow:column so it adapts if a product is added. */
.outcome-grid.pricing-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.outcome-grid.pricing-grid .outcome-card { display: flex; flex-direction: column; padding: 26px 22px; }
@media (max-width: 1040px) {
    .outcome-grid.pricing-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .outcome-grid.pricing-grid { grid-template-columns: 1fr; }
}
/* Pricing value display: real researched market floor struck through, with the
   lower founder "Starts at" price prominent. Anchored to real numbers, no
   countdown/urgency (owner decision 2026-06-17). */
.price-block { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0 0 8px; }
.price-market { display: inline-flex; align-items: baseline; gap: 6px; color: var(--muted); }
.price-market-label { text-transform: uppercase; letter-spacing: .07em; font: 800 .58rem Inter, Arial, sans-serif; }
.price-market s { font-weight: 700; }
.price-founder { font-size: .95rem; color: #41444f; }
.price-founder strong { font-family: Inter, Arial, sans-serif; font-size: 1.55rem; color: var(--green); }
.price-save { font: 800 .64rem Inter, Arial, sans-serif; letter-spacing: .04em; color: var(--green-ink); background: var(--mint); padding: 3px 9px; border-radius: 999px; }
.pricing-card-label {
    align-self: flex-start;
    padding: 5px 10px;
    color: #0c6a49;
    background: #d8f5e8;
    border: 1px solid #a9dfc8;
    border-radius: 999px;
    font: 800 .62rem Inter, Arial, sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.pricing-card h3 { margin-top: 18px; font-size: clamp(1.15rem, 1.5vw, 1.45rem); }
.pricing-card ul { margin: 20px 0 24px; padding: 0; list-style: none; }
.pricing-card li { position: relative; padding-left: 22px; color: #44524c; }
.pricing-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 900;
}
.pricing-card-cta { display: grid; gap: 10px; margin-top: auto; padding-top: 8px; }
.pricing-card-cta .button { width: 100%; text-align: center; }
.pricing-card-link {
    display: inline-flex;
    justify-content: center;
    gap: 5px;
    color: var(--green);
    font-weight: 800;
    text-align: center;
}
.pricing-card-link:hover { color: #075c3e; }
.price-unit { font: 700 .68rem Inter, Arial, sans-serif; letter-spacing: .03em; color: var(--muted); }
/* "Enhance your package" — optional add-ons, secondary to the 3 primary tiers. */
.addon-block { margin-top: 56px; }
.addon-heading { font-size: clamp(1.2rem, 1.8vw, 1.6rem); margin-bottom: 6px; }
.outcome-grid.addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.addon-card { padding: 22px 20px; background: #f7fbf9; }
.addon-card h3 { margin-top: 0; font-size: 1.08rem; }
.addon-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #eef1f5; color: #5a6472; font: 800 .55rem Inter, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
@media (max-width: 720px) { .outcome-grid.addon-grid { grid-template-columns: 1fr; } }

/* Operator + client dashboards */
.dash { padding: 40px 0 80px; }
.dash-head { margin-bottom: 26px; }
.dash-head h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 4px 0 6px; }
.dash-kpis { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.dash-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; min-width: 120px; text-decoration: none; color: inherit; }
.dash-kpi span { font: 800 1.4rem Inter, Arial, sans-serif; color: var(--green); }
.dash-kpi small { color: var(--muted); }
.dash-kpi-link { justify-content: center; align-items: center; font-weight: 800; color: var(--green); }
.dash-empty { padding: 28px; border: 1px dashed var(--line); border-radius: 16px; background: #f7fbf9; text-align: center; }
.dash-empty .button { margin-top: 12px; }
.dash-empty-alt { margin-top: 12px; }
.dash-empty-note { margin-top: 16px; font-size: 0.92rem; color: var(--muted); }
.dash-section { margin-top: 30px; }
.dash-section-title { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dash-count { font: 800 .7rem Inter, Arial, sans-serif; background: var(--mint); color: #0c6a49; border-radius: 999px; padding: 2px 9px; }
.dash-item { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; margin-bottom: 8px; flex-wrap: wrap; }
.dash-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-item-main strong { font-size: 1rem; }
.dash-item-main small { color: var(--muted); }
.dash-item-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dash-item-actions form { margin: 0; }
.dash-pending { color: var(--muted); font-weight: 700; font-size: .85rem; }
.dash-foot { margin-top: 30px; }
.button.ghost { background: transparent; color: #51606b; border: 1px solid var(--line); box-shadow: none; }
.button.ghost:hover { border-color: #b7c0c9; background: #f4f6f8; }
@media (max-width: 600px) { .dash-item { align-items: flex-start; } .dash-item-actions { width: 100%; } }

/* Homepage clarity: right-sized hero, bigger CTA, clickable outcome cards */
.ai-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); }
.button.lg { min-height: 58px; padding: 16px 30px; font-size: 1.05rem; }
a.outcome-card { text-decoration: none; color: inherit; cursor: pointer; }
.outcome-card:hover { background: #f7fbf9; }
.outcome-card .start-with { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--green); font-weight: 800; }
.outcome-card:hover .start-with { gap: 9px; }

/* No-site result: free starter site shown immediately + commit CTAs */
.free-site-head { padding-top: 40px; }
.free-site-frame { margin: 24px auto 10px; }
.free-site-toolbar { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--line); border-bottom: none; border-radius: 14px 14px 0 0; background: #f7fbf9; }
.free-site-toolbar span { font-weight: 800; color: var(--muted); }
.free-site-iframe { width: 100%; height: 82vh; min-height: 680px; border: 1px solid var(--line); border-radius: 0 0 14px 14px; background: #fff; display: block; }
.free-site-toolbar .button.secondary { min-height: 0; padding: 8px 16px; font-size: .92rem; }
.free-site-get { padding: 36px 0 8px; }
.free-site-get h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); margin: 4px 0 18px; }
.free-site-get .button-row { margin-top: 22px; }
.free-site-offer { margin: 22px 0 0; font-size: 1.05rem; color: #245344; }
.free-site-offer strong { color: var(--green); }
.free-site-asis { margin-top: 26px; font-size: .8rem; color: var(--muted); }
.free-site-foot { padding-bottom: 70px; color: var(--muted); }
/* Starter "own it" state banners (preview -> changes -> purchase -> hookup) */
.starter-state { margin: 0 auto 6px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line); background: #f6f9f7; }
.starter-state p { margin: 0; font-size: .98rem; }
.starter-state--working, .starter-state--live { background: #e7f1ec; border-color: #bfe0d2; color: #1d5a47; }
.starter-state--pending, .starter-state--updated { background: #fbf4e8; border-color: #ecdcbf; color: #6b5326; }
/* Builds hub (documented work) */
.showcase-card-media { display: block; }
.showcase-card h3 a { color: inherit; text-decoration: none; }
.showcase-card h3 a:hover { color: var(--green); }
.build-shot { width: 100%; border-radius: 14px; border: 1px solid var(--line); margin: 0 0 22px; }
.build-detail h2 { margin: 28px 0 10px; }
.build-detail h3 { margin: 0 0 6px; }
.build-video { margin: 0 0 22px; }
.build-beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 18px 0; }
@media (max-width: 640px) { .build-beforeafter { grid-template-columns: 1fr; } }
.service-interest-chip {
    display: inline-flex;
    gap: 5px;
    margin: 0 0 20px;
    padding: 7px 11px;
    color: #245344;
    background: var(--mint);
    border: 1px solid #b9dfcf;
    border-radius: 999px;
    font-size: .82rem;
}
.starter-price { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 24px 0; }
.starter-price span { color: var(--muted); font: 800 .68rem Inter, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.starter-price strong { color: var(--green); font: 800 clamp(2.5rem, 7vw, 4.8rem) Inter, Arial, sans-serif; letter-spacing: -.06em; }
.starter-detail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.starter-detail-grid .outcome-card h3 { margin-top: 18px; font-size: 1.12rem; }
.recommendation-note { max-width: 760px; color: #386150; }
.hero-transparency {
    max-width: 780px;
    margin: 18px 0 0;
    color: #416052;
    font-size: .88rem;
}
.hero-microcopy {
    max-width: 720px;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.55;
}
.hero-microcopy a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.project-trust-band {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    margin-top: 30px;
    padding: 20px 24px;
    background: var(--mint);
    border: 1px solid #b9dfcf;
    border-radius: 18px;
}
.project-trust-band strong { flex-basis: 100%; }
.project-trust-band span { color: #315a4a; }
.project-trust-band span::before { content: "✓"; margin-right: 7px; color: var(--green); font-weight: 900; }
.milestone-list { display: grid; gap: 12px; margin-top: 28px; }
.milestone-card {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: 20px 22px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
}
.milestone-card span { color: var(--muted); font-size: .78rem; }
.milestone-card h3, .milestone-card p { margin: 4px 0 0; }
.milestone-card p { color: var(--muted); font-size: .85rem; }
.milestone-paid { background: #effaf5; border-color: #b7dfce; }
.milestone-amount { display: grid; gap: 5px; justify-items: end; flex: 0 0 auto; }
.milestone-amount strong { color: var(--green); font: 800 1.45rem Inter, Arial, sans-serif; }
.project-thread { display: grid; gap: 12px; max-width: 850px; margin: 26px 0; }
.project-message {
    max-width: 78%;
    padding: 16px 18px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px 18px 18px 5px;
}
.project-message-founder {
    margin-left: auto;
    background: var(--mint);
    border-color: #b9dfcf;
    border-radius: 18px 18px 5px 18px;
}
.project-message span { color: var(--muted); font-size: .72rem; }
.project-message p { margin: 6px 0 0; white-space: pre-wrap; }
.project-message-form { max-width: 850px; }
@media (max-width: 900px) {
    .starter-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .starter-detail-grid { grid-template-columns: 1fr; }
    .milestone-card { align-items: flex-start; flex-direction: column; }
    .milestone-amount { justify-items: start; }
    .project-message { max-width: 94%; }
}
.outcome-card { padding: 32px; background: white; border: 1px solid #dce9e2; border-radius: 22px; }
.outcome-card.featured { background: var(--mint); border-color: var(--green); transform: translateY(-14px); box-shadow: var(--shadow); }
.outcome-card h3 { margin-top: 28px; }
.outcome-card p { color: var(--muted); }
.outcome-card.featured p { color: #3f6b58; }
.outcome-card li { margin-bottom: 8px; }
/* Phase 4a: match the .card hover lift so the services grid responds to the cursor. */
.outcome-card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.outcome-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--green); }
.outcome-card.featured:hover { transform: translateY(-18px); }

/* ---- 3-page all-light rebuild (June 2026) ---- */
.ai-hero-solo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 880px;
    min-height: max(540px, calc(100svh - 67px));
    padding: 60px 0;
}
.ai-hero-solo h1 { margin-bottom: 10px; }
.hero-subhead { margin: 0 0 18px; font-family: Inter, Arial, sans-serif; font-weight: 800; font-size: clamp(1.2rem, 2.2vw, 1.7rem); letter-spacing: -.01em; color: var(--brand-deep); }
.audit-alt { margin-top: 22px; font-weight: 700; }
.audit-alt a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.audit-trust { margin-top: 12px; color: var(--muted); font-size: .88rem; }
.proof-tag { display: inline-flex; margin-bottom: 12px; color: var(--coral-ink); font: 800 .76rem Inter, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.proof-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.proof-note { margin-top: 26px; max-width: 760px; color: var(--muted); font-size: .95rem; }
.founder-teaser { max-width: 860px; }
.about-founder-media, .about-founder-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 16%; border-radius: 32px; box-shadow: var(--shadow); }
/* Keep the founder headshot a centered 4:5 portrait at every width. Without this,
   the 520px height cap turns it into a cropped landscape band in the single-column
   layout (tablet / narrow desktop), cutting off the top of the head. */
.page-hero-grid .about-founder-photo { max-height: none; max-width: 420px; margin-inline: auto; object-position: 50% 50%; }
.about-bilingual { margin-top: 18px; padding: 16px 18px; background: var(--mint); border-radius: 16px; color: #0d5238; font-weight: 700; }
.booking-steps { margin: 0 0 18px; padding-left: 20px; color: #3f414d; }
.booking-steps li { margin-bottom: 8px; }

.ai-guarantee { padding: 90px 0; background: linear-gradient(135deg, #dff8ea, #edf5ff); }
.guarantee-grid { display: grid; grid-template-columns: 280px 1fr; gap: clamp(40px, 8vw, 110px); align-items: center; }
.guarantee-mark { display: grid; align-content: center; justify-items: center; aspect-ratio: 1; color: white; background: var(--dark); border-radius: 50%; box-shadow: 0 28px 60px rgba(17,19,29,.18); }
.guarantee-mark span { font: 800 6rem/1 Inter, Arial, sans-serif; letter-spacing: -.08em; }
.guarantee-mark small { margin-top: 9px; color: #6ce5b5; font-weight: 800; text-transform: uppercase; }
.guarantee-note { max-width: 820px; padding-left: 18px; color: #464a56; border-left: 3px solid var(--green); font-size: .88rem; }
.service-guarantee { margin-top: 20px; }
.service-scope-note { max-width: 720px; margin: 22px auto 0; color: #4c505b; font-weight: 800; }
.focused-service-band { background: #fffdf8; }
.focused-service-band .service-list-card .button { margin-top: 22px; }
.assistant-scope-band { color: white; background: var(--dark); }
.assistant-scope-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(42px, 8vw, 100px); align-items: center; }
.assistant-scope-grid .lead { color: #c5cbda; }
.assistant-scope-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.assistant-scope-list article { padding: 22px; background: #1b1f2c; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; }
.assistant-scope-list p { margin: 13px 0 0; color: #c7cddd; font-size: .88rem; }

.ai-scorecard { background: var(--paper); }
.scorecard-conversion-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .75fr); gap: clamp(40px, 8vw, 100px); align-items: start; }
.scorecard-conversion-grid .hero-audit-card { position: sticky; top: 100px; width: 100%; }
.scorecard-conversion-grid .check-list { margin-top: 34px; }
.ai-proof { background: var(--paper-2); }
.proof-system-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; margin-top: 48px; }
.proof-system-grid.two { grid-template-columns: 1fr 1fr; }
.demo-intro { margin-top: 54px; max-width: 760px; }
.demo-intro + .workflow-demo { margin-top: 16px; }
.proof-system-card { min-height: 390px; padding: 30px; background: white; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-soft); }
.proof-system-card:first-child { color: white; background: var(--dark); border-color: var(--dark); }
.proof-system-card > span { color: var(--green); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.proof-system-card h3 { margin-top: 64px; }
.proof-system-card h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.proof-system-card h3 a:hover { border-bottom-color: var(--green); }
.proof-system-card p { color: var(--muted); }
.proof-system-card:first-child p { color: #c7cddd; }
.proof-system-card > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 30px; }
.proof-system-card b { padding: 6px 9px; color: #424653; background: #f1f2ef; border-radius: 999px; font-size: .67rem; }
.proof-system-card:first-child b { color: #dce2ed; background: #242837; }
.proof-system-card.demo-card { background: #fff5e6; }

.opportunity-map { background: linear-gradient(135deg, #f2f9f5, #fdfcf7); border-color: #d9e9de; }
.opportunity-map .eyebrow { color: var(--green); }
.opportunity-map-grid { display: grid; grid-template-columns: .9fr 1.2fr .9fr; gap: 12px; }
.opportunity-map-grid article { padding: 22px; background: white; border: 1px solid #dfe9e2; border-radius: 16px; }
.opportunity-map-grid span { color: var(--green); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.opportunity-map-grid h3 { margin-top: 22px; }
.opportunity-map-grid p, .opportunity-dependencies { color: var(--muted); }
.opportunity-flow ol { margin: 20px 0 0; padding-left: 25px; }
.opportunity-flow li { margin-bottom: 10px; }
.opportunity-dependencies { margin: 22px 0 0; }
.proposal-guarantee { margin: 28px 0; padding: 26px; background: #e6f7ee; border: 1px solid #bfe7d2; border-radius: 18px; }

.system-stack { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; gap: 8px; align-items: center; padding: 28px; color: white; background: #131722; border-radius: 18px; }
.system-stack span, .demo-flow-mini span { padding: 10px; background: #242a3a; border-radius: 9px; font-size: .65rem; font-weight: 800; }
.system-stack i, .demo-flow-mini b { height: 2px; background: linear-gradient(90deg, var(--blue), var(--green)); }
.demo-flow-mini { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 8px; align-items: center; width: 100%; padding: 24px; color: white; background: #171a25; border-radius: 18px; }

/* DunceLab case study (04 block) — a live simulation card on DunceLab's purple-on-space palette:
   a drag control mid-track, a glowing projectile arc + ball as the live physics response, a
   just-updated equation chip, and a faded peeking sibling card to signal the infinite feed.
   CSS-only, no images, aria-hidden. Distinct from the app-window / chip-stack / flow-mini visuals. */
.case-study-violet { background: #efeaff; }
.case-study-violet .case-tags span { background: rgba(255, 255, 255, .65); border-color: rgba(16, 16, 20, .08); }
.duncelab-case { display: grid; place-items: center; background: linear-gradient(135deg, #efeaff, #e2dbff); }
.sim-feed { position: relative; width: min(100%, 320px); margin: 28px; }
.sim-peek { display: flex; align-items: center; justify-content: space-between; height: 30px; margin: 0 12px -14px; padding: 0 14px; color: #c8b8ff; background: linear-gradient(160deg, #140f2c, #0a0916); border: 1px solid rgba(200, 184, 255, .16); border-radius: 18px 18px 0 0; opacity: .5; overflow: hidden; }
.sim-peek-label { font-weight: 800; font-size: .58rem; letter-spacing: .12em; }
.sim-peek-wave { width: 88px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #9a7cff, #c8b8ff); clip-path: polygon(0 60%, 16% 20%, 34% 70%, 52% 24%, 70% 66%, 88% 26%, 100% 60%, 100% 100%, 0 100%); }
.sim-card { position: relative; padding: 18px; color: #eee6ff; background: radial-gradient(120% 90% at 18% 8%, rgba(154, 124, 255, .28), transparent 60%), #05060a; border: 1px solid rgba(200, 184, 255, .16); border-radius: 24px; box-shadow: 0 24px 60px rgba(20, 10, 60, .35); }
.sim-card-bar { display: flex; justify-content: space-between; margin-bottom: 14px; font-weight: 800; font-size: .82rem; }
.sim-card-bar i { font-style: normal; color: #c8b8ff; }
.sim-stage { position: relative; height: 150px; border-radius: 16px; background: linear-gradient(180deg, rgba(200, 184, 255, .06), transparent 55%), #0b0c16; border: 1px solid rgba(154, 124, 255, .14); overflow: hidden; }
.sim-stage::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 22px; height: 1px; background: rgba(200, 184, 255, .22); }
.sim-arc { position: absolute; left: 14px; bottom: 22px; width: 210px; height: 190px; border: 2px solid transparent; border-top-color: #9a7cff; border-right-color: #c8b8ff; border-radius: 50%; clip-path: polygon(0 100%, 0 22%, 62% 0, 100% 42%, 100% 100%); opacity: .9; filter: drop-shadow(0 0 6px rgba(154, 124, 255, .5)); }
.sim-ball { position: absolute; left: 64%; top: 20%; width: 14px; height: 14px; background: radial-gradient(circle at 35% 30%, #ffffff, #c8b8ff 45%, #9a7cff); border-radius: 50%; box-shadow: 0 0 12px rgba(154, 124, 255, .9); }
.sim-eq { position: absolute; right: 12px; top: 12px; padding: 6px 10px; color: #efeaff; background: rgba(154, 124, 255, .20); border: 1px solid rgba(200, 184, 255, .35); border-radius: 999px; font-style: normal; font-weight: 800; font-size: .72rem; letter-spacing: .2px; }
.sim-control { margin-top: 16px; }
.sim-control-label { display: block; margin-bottom: 8px; color: #c8b8ff; font-weight: 800; font-size: .68rem; letter-spacing: .6px; text-transform: uppercase; }
.sim-track { position: relative; height: 8px; border-radius: 999px; background: rgba(200, 184, 255, .16); }
.sim-fill { position: absolute; left: 0; top: 0; width: 62%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #9a7cff, #c8b8ff); }
.sim-knob { position: absolute; left: 62%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); background: #ffffff; border: 3px solid #9a7cff; border-radius: 50%; box-shadow: 0 4px 14px rgba(20, 10, 60, .5); }

.audit-path-options { grid-template-columns: repeat(3, 1fr); }
.path-option { padding-inline: 8px; font-size: .64rem; }

@media (max-width: 1000px) {
    .ai-hero-grid, .scorecard-conversion-grid { grid-template-columns: 1fr; }
    .ai-hero-grid { min-height: auto; padding: 70px 0 90px; }
    .ai-system-console { width: min(100%, 680px); margin: 0 auto; }
    .problem-grid, .process-line { grid-template-columns: repeat(2, 1fr); }
    .outcome-grid, .proof-system-grid { grid-template-columns: 1fr; }
    .outcome-card.featured { transform: none; }
    .proof-system-card { min-height: auto; }
    .proof-system-card h3 { margin-top: 35px; }
    .scorecard-conversion-grid .hero-audit-card { position: static; max-width: 680px; }
    .focused-fixes-grid, .focused-service-grid, .chatbot-grid, .assistant-scope-grid { grid-template-columns: 1fr; }
    .assistant-demo { width: min(100%, 720px); }
}

@media (max-width: 760px) {
    .ai-hero-grid { gap: 48px; padding-top: 54px; }
    .ai-hero-copy h1 { font-size: clamp(3rem, 14vw, 4.8rem); }
    .ai-hero-trust { display: grid; }
    .workflow-demo { grid-template-columns: 1fr; }
    .workflow-rail { grid-template-columns: repeat(5, minmax(145px, 1fr)); overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .demo-step-button { grid-template-columns: 34px 1fr; padding: 16px; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 0; }
    .workflow-fields { grid-template-columns: 1fr; }
    .demo-cta { display: grid; }
    .problem-grid, .process-line, .guarantee-grid, .opportunity-map-grid { grid-template-columns: 1fr; }
    .fix-list article { grid-template-columns: 1fr; gap: 8px; }
    .assistant-scope-list { grid-template-columns: 1fr; }
    .guarantee-mark { width: 220px; }
    .process-line article { min-height: 230px; }
    .process-line h3 { margin-top: 35px; }
    .console-route { padding-inline: 18px; }
    .console-actions { padding-inline: 18px; }
}

@media (max-width: 560px) {
    .ai-demo-section { padding: 78px 0; }
    .ai-system-console { transform: none; }
    .console-head, .console-foot { align-items: flex-start; font-size: .59rem; }
    .console-foot { display: grid; }
    .console-route { gap: 5px; }
    .console-route span { font-size: .66rem; }
    .workflow-screen { padding: 24px 18px; }
    .workflow-screen-head { display: grid; }
    .workflow-screen > p { min-height: 120px; }
    .problem-card { min-height: auto; }
    .problem-card h3 { margin-top: 28px; }
    .guarantee-mark { width: 180px; }
    .guarantee-mark span { font-size: 4.5rem; }
    .audit-path-options { grid-template-columns: 1fr; }
    .path-option { padding: 9px 10px; font-size: .7rem; }
    .system-stack, .demo-flow-mini { grid-template-columns: 1fr; }
    .system-stack i, .demo-flow-mini b { width: 2px; height: 14px; justify-self: center; }
    .sim-feed { margin: 18px; }
    .sim-card { padding: 16px; }
    .sim-stage { height: 132px; }
    .sim-eq { font-size: .66rem; }
    .assistant-thread { padding: 18px 14px; }
    .assistant-message { width: 94%; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-system-console { transform: none; }
}

/* ---------------------------------------------------------------------------
   Homepage refinement: anchor offset, inline guarantee band, slim assistant,
   and motion polish (scroll reveal, form micro-interactions).
   --------------------------------------------------------------------------- */

/* Sticky-header anchor offset so #scorecard/#demo/#solutions/#process jumps
   don't land hidden under the fixed header. */
html { scroll-padding-top: 92px; }

/* Refined scroll-reveal: subtler travel and a crafted easing curve. */
.js .reveal {
    transform: translateY(16px);
    transition: opacity .62s cubic-bezier(.22, 1, .36, 1), transform .62s cubic-bezier(.22, 1, .36, 1);
}

/* Inline guarantee band inside the process section (replaces the standalone
   ai-guarantee section so the promise is stated once). */
.guarantee-band {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
    margin-top: 56px;
    padding: clamp(28px, 4vw, 44px);
    background: linear-gradient(135deg, #dff8ea, #edf5ff);
    border: 1px solid #cfeede;
    border-radius: 24px;
}
.guarantee-band .guarantee-mark { width: 132px; }
.guarantee-band .guarantee-mark span { font-size: 4rem; }
.guarantee-band .guarantee-mark small { font-size: .62rem; }
.guarantee-lead { font-size: 1.12rem; font-weight: 600; margin: 4px 0 14px; }

/* Slim 24/7 website-assistant card (replaces the full chatbot section). */
.assistant-slim {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    margin-top: 28px;
    padding: clamp(28px, 4vw, 44px);
    background: var(--dark);
    color: white;
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
}
.assistant-slim h3 { margin: 10px 0 12px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.assistant-slim p { color: #c7cddd; max-width: 60ch; }
.assistant-slim .eyebrow { color: #6ce5b5; }
.assistant-slim-actions { display: flex; flex-direction: column; gap: 12px; min-width: 240px; }
.assistant-slim-actions .button { width: 100%; text-align: center; }
.button.ghost-light { color: white; background: transparent; border-color: rgba(255, 255, 255, .55); }
.button.ghost-light:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .8); }

@media (max-width: 860px) {
    .guarantee-band { grid-template-columns: 1fr; justify-items: start; gap: 22px; }
    .assistant-slim { grid-template-columns: 1fr; }
    .assistant-slim-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .assistant-slim-actions .button { width: auto; flex: 1 1 auto; }
}

/* Form micro-interactions: press feedback. */
.button { transition: transform .16s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.button:active { transform: translateY(1px) scale(.992); }
.audit-next, .audit-back, .audit-submit { transition: transform .16s ease, box-shadow .18s ease, background .18s ease; }

@media (prefers-reduced-motion: reduce) {
    .js .reveal { transition: none; transform: none; }
    .button:active { transform: none; }
    .audit-enhanced .audit-step.is-entering { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   24/7 website chat assistant (bottom-right floating widget)
   --------------------------------------------------------------------------- */
.swrl-chat { position: fixed; right: 20px; bottom: 20px; z-index: 120; }
.swrl-chat input[name="csrfmiddlewaretoken"] { display: none; }

.swrl-chat-launcher {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-left: auto;
    color: #fff;
    background: var(--dark);
    border: none;
    border-radius: 50%;
    box-shadow: 0 16px 40px rgba(16, 16, 20, .3);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.swrl-chat-launcher:hover { transform: translateY(-2px); background: #1b1f30; }
.swrl-chat-launcher:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.swrl-chat-launcher svg { width: 26px; height: 26px; }
.swrl-chat-launcher .swrl-chat-launcher-close { display: none; }
.swrl-chat.is-open .swrl-chat-launcher-open { display: none; }
.swrl-chat.is-open .swrl-chat-launcher-close { display: block; }
.swrl-chat-launcher::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 11px;
    width: 9px;
    height: 9px;
    background: var(--green);
    border: 2px solid var(--dark);
    border-radius: 50%;
}
.swrl-chat.is-open .swrl-chat-launcher::after { display: none; }

/* Proactive nudge */
.swrl-chat-nudge {
    position: relative;
    width: min(310px, calc(100vw - 40px));
    margin-bottom: 14px;
    padding: 18px 18px 16px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 20px 20px 6px 20px;
    box-shadow: var(--shadow);
}
.js .swrl-chat-nudge { animation: swrl-pop .35s cubic-bezier(.22, 1, .36, 1) both; }
.swrl-chat-nudge-text { margin: 0 0 12px; font-size: .95rem; line-height: 1.45; color: var(--ink); }
.swrl-chat-nudge-replies { display: flex; flex-wrap: wrap; gap: 8px; }
.swrl-chat-nudge-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 26px;
    height: 26px;
    color: var(--muted);
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.swrl-chat-nudge-close:hover { color: var(--ink); }

/* Chips (quick replies + CTAs) */
.swrl-chat-chip {
    display: inline-block;
    max-width: 100%;
    padding: 6px 11px;
    color: var(--ink);
    background: var(--mint);
    border: 1px solid rgba(19, 163, 111, .28);
    border-radius: 999px;
    font: 600 .78rem "Source Sans 3", Arial, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}
.swrl-chat-chip:hover { background: #cdf2de; transform: translateY(-1px); }
.swrl-chat-chip.is-cta { color: #fff; background: var(--green); border-color: var(--green); }
.swrl-chat-chip.is-cta:hover { background: #0f8c5f; }
.swrl-chat-chip:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Panel */
.swrl-chat-panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 130;
    display: flex;
    flex-direction: column;
    width: min(456px, calc(100vw - 32px));
    height: min(780px, calc(100vh - 110px));
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(16, 16, 20, .32);
    overflow: hidden;
}
.swrl-chat-panel[hidden] { display: none; }
.js .swrl-chat-panel:not([hidden]) { animation: swrl-pop .28s cubic-bezier(.22, 1, .36, 1) both; }

.swrl-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px;
    color: #fff;
    background: var(--dark);
}
.swrl-chat-head-id { display: flex; align-items: center; gap: 11px; }
.swrl-chat-head-id strong { display: block; font: 700 1rem Inter, Arial, sans-serif; }
.swrl-chat-head-sub { font-size: .76rem; color: #aab0c2; }
.swrl-chat-dot { width: 9px; height: 9px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 0 rgba(19, 163, 111, .5); animation: pulse 2s ease-in-out infinite; }
.swrl-chat-close { display: grid; place-items: center; width: 32px; height: 32px; color: #fff; background: rgba(255, 255, 255, .12); border: none; border-radius: 50%; cursor: pointer; }
.swrl-chat-close:hover { background: rgba(255, 255, 255, .22); }
.swrl-chat-close svg { width: 16px; height: 16px; }

.swrl-chat-thread { flex: 1 1 auto; overflow-y: auto; padding: 18px 16px 6px; display: flex; flex-direction: column; gap: 12px; }
.swrl-chat-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.swrl-chat-msg { display: flex; }
.swrl-chat-msg.is-user { justify-content: flex-end; }
.swrl-chat-bubble {
    max-width: 84%;
    padding: 11px 14px;
    font-size: .93rem;
    line-height: 1.5;
    border-radius: 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.swrl-chat-msg.is-bot .swrl-chat-bubble { color: var(--ink); background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.swrl-chat-msg.is-user .swrl-chat-bubble { color: #fff; background: var(--dark); border-bottom-right-radius: 5px; }
/* Inline references/links in chat replies render as clear hyperlinks. */
.swrl-chat-text a { color: var(--brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.swrl-chat-text a:hover { text-decoration: none; }
.swrl-chat-msg.is-user .swrl-chat-text a { color: #fff; }
.swrl-chat-cursor { display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: text-bottom; background: var(--green); border-radius: 1px; animation: swrl-blink 1s steps(2) infinite; }

.swrl-chat-replies { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 16px 0; }
.swrl-chat-replies:empty { display: none; }

.swrl-chat-form { display: flex; gap: 8px; align-items: center; padding: 12px 14px 6px; }
.swrl-chat-input {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 10px 14px;
    font: 400 .95rem "Source Sans 3", Arial, sans-serif;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
}
.swrl-chat-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(19, 163, 111, .16); outline: none; }
.swrl-chat-input:disabled { background: var(--soft); }
.swrl-chat-send { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; color: #fff; background: var(--green); border: none; border-radius: 50%; cursor: pointer; transition: background .16s ease, transform .16s ease; }
.swrl-chat-send:hover { background: #0f8c5f; }
.swrl-chat-send:active { transform: scale(.94); }
.swrl-chat-send:disabled { background: #b6c2bd; cursor: default; }
.swrl-chat-send svg { width: 20px; height: 20px; }
.swrl-chat-disclaimer { margin: 0; padding: 2px 16px 14px; font-size: .72rem; line-height: 1.4; color: var(--muted); }
.swrl-chat-disclaimer a { color: var(--green); text-decoration: underline; }

@keyframes swrl-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes swrl-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (max-width: 560px) {
    .swrl-chat { right: 14px; bottom: 14px; }
    .swrl-chat-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: none; }
}

@media (prefers-reduced-motion: reduce) {
    .js .swrl-chat-nudge,
    .js .swrl-chat-panel:not([hidden]) { animation: none; }
    .swrl-chat-cursor { animation: none; }
    .swrl-chat-dot { animation: none; }
    .swrl-chat-launcher:hover { transform: none; }
    .report-cta-float .button { transition: opacity .2s ease, visibility 0s; transform: none !important; }
    .is-dock-landing { animation: none; }
    .finding-chevron { transition: none; }
}

/* ---------------------------------------------------------------------------
   Intake: entry gate -> lean Scorecard -> quiz
   --------------------------------------------------------------------------- */
.intake { width: 100%; }
.intake-entry { padding: 16px 18px 18px; }
.intake-q { margin: 0 0 14px; color: var(--ink); font: 700 1.05rem Inter, Arial, sans-serif; }
.intake-choices { display: grid; gap: 10px; }
.intake-choice {
    display: block; width: 100%; text-align: left; padding: 16px 18px;
    background: #fff; border: 1.5px solid var(--line); border-radius: 16px; cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.intake-choice:hover { border-color: var(--green); box-shadow: 0 8px 22px rgba(19, 163, 111, .12); transform: translateY(-1px); }
.intake-choice strong { display: block; color: var(--ink); font: 700 1rem Inter, Arial, sans-serif; }
.intake-choice small { display: block; margin-top: 4px; color: var(--muted); font-size: .84rem; line-height: 1.4; }
.intake-choice:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.intake-back { margin: 0 0 12px; padding: 4px 0; color: var(--muted); background: none; border: 0; font: 600 .82rem Inter, Arial, sans-serif; cursor: pointer; }
.intake-back:hover { color: var(--ink); }

/* Scorecard goal radios + 2-up contact row */
.afield-choices { min-width: 0; margin: 0 0 13px; padding: 0; border: 0; }
.afield-choices > legend { padding: 0 0 7px; color: var(--ink); font: 600 .86rem Inter, Arial, sans-serif; }
.afield-choices ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.afield-choices li label {
    display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px;
    border: 1.5px solid var(--line); border-radius: 12px; color: var(--ink); font-size: .9rem; cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}
.afield-choices li label:hover { border-color: rgba(19, 163, 111, .4); }
.afield-choices input[type="radio"] { margin: 2px 0 0; accent-color: var(--green); }
.afield-choices li:has(input:checked) label { border-color: var(--green); background: var(--mint); }
.afield-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Quiz */
.quiz { padding: 16px 18px 18px; }
.quiz-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.quiz-progress { color: var(--muted); font: 800 .72rem/1 Inter, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.quiz-progress b { color: var(--green); }
.quiz-q { margin: 0 0 14px; color: var(--ink); font: 700 1.1rem Inter, Arial, sans-serif; }
.quiz-options { display: grid; gap: 8px; }
.quiz-opt {
    display: block; width: 100%; text-align: left; padding: 13px 15px;
    background: #fff; border: 1.5px solid var(--line); border-radius: 13px; color: var(--ink);
    font: 600 .92rem "Source Sans 3", Arial, sans-serif; cursor: pointer;
    transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.quiz-opt:hover { border-color: var(--green); transform: translateY(-1px); }
.quiz-opt.is-selected { border-color: var(--green); background: var(--mint); }
.quiz-opt:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.quiz-result h3 { margin: 4px 0 8px; color: var(--ink); font: 800 1.4rem Inter, Arial, sans-serif; line-height: 1.15; }
.quiz-rec-copy { margin: 0 0 12px; color: var(--ink-2); line-height: 1.5; }
.quiz-honest { margin: 0 0 16px; padding: 11px 13px; background: var(--soft); border-radius: 12px; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.quiz-contact .afield { margin-bottom: 10px; }
.quiz-contact label { display: block; margin-bottom: 5px; font: 600 .84rem Inter, Arial, sans-serif; }
.quiz-contact input,
.quiz-contact select,
.quiz-contact textarea { width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 12px; font-size: .95rem; }
.quiz-contact textarea { min-height: 72px; resize: vertical; }
.quiz-contact input:focus,
.quiz-contact select:focus,
.quiz-contact textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(19, 163, 111, .16); outline: none; }
.quiz-confirm .button { margin-top: 8px; }

@media (max-width: 560px) {
    .afield-row { grid-template-columns: 1fr; }
}

/* Monthly support plans + "Us vs Them" comparison (Pricing page) */
.support-section { padding-top: 8px; }
.support-toggle { display: flex; width: fit-content; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; margin: 0 auto 28px; }
.support-toggle-btn { border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; font: 700 .95rem Inter, Arial, sans-serif; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.support-toggle-btn.is-active { background: var(--ink); color: #fff; }
.support-toggle-btn:not(.is-active):hover { color: var(--ink); background: var(--soft); }
.support-toggle-save { font-size: .7rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--mint); color: #0a6b3f; }
.support-toggle-btn.is-active .support-toggle-save { background: rgba(255,255,255,.18); color: #fff; }
.support-grid { margin-bottom: 26px; }
.owner-handoff { border: 1px dashed var(--line); border-radius: 16px; background: #f7fbf9; padding: 22px 24px; margin: 6px 0 18px; }
.owner-handoff h3 { margin: 0 0 6px; }
.owner-handoff p { margin: 0; color: var(--muted); }
.support-legal { font-size: .88rem; color: var(--muted); margin-bottom: 44px; }
.compare-block { margin-top: 14px; }
.compare-heading { text-align: center; margin-bottom: 20px; }
.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.compare-col { border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: #fff; }
.compare-col h3 { margin: 0 0 6px; }
.compare-col .compare-price { font: 800 1.15rem Inter, Arial, sans-serif; margin: 0 0 14px; }
.compare-col .compare-price small { font-weight: 700; color: var(--muted); font-size: .72rem; }
.compare-col ul { margin: 0; padding-left: 18px; }
.compare-col li { margin-bottom: 8px; color: var(--muted); }
.compare-us { background: var(--mint); border-color: rgba(16,16,20,.08); box-shadow: 0 12px 32px rgba(16,16,20,.07); }
.compare-us li { color: var(--ink); }
.compare-note { text-align: center; font-size: .84rem; color: var(--muted); margin-top: 16px; }
@media (max-width: 820px) { .compare-grid { grid-template-columns: 1fr; } }

/* Client dashboard "start something new" action band */
.dash-actions-band { margin-top: 30px; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* AI verdict note on operator inbox upgrade requests */
.dash-ai-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; font-size: .9rem; background: #f3f6fb; border-left: 3px solid var(--line); }
.dash-ai-note.ai-review--flagged { background: #fff5ed; border-left-color: #d98a3d; }
.dash-ai-note.ai-review--approved { background: #eefaf2; border-left-color: #2a9d5a; }

/* ===========================================================================
 * SwrlSite 3D layer — "Swrl Current" hero + per-offering glyphs (June 2026)
 * The four-color accent below is the DEVICE-INDEPENDENT carrier of the
 * "four areas" meaning (works with no JS / reduced motion / mobile). The
 * WebGL canvases are a decorative, desktop-only enhancement layered on top.
 * ========================================================================= */

/* ---- hero swirl canvas: above the gradient/grid, below the copy ---- */
.ai-hero > .wrap { position: relative; z-index: 1; } /* keep hero copy above the swirl */
.swrl-hero-canvas {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    display: block; border: 0; pointer-events: none;
}

/* ---- static poster: a soft CSS swirl shown by default & for
   reduced-motion / mobile / no-JS; faded out once the live scene mounts ---- */
.swrl-hero-poster { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.swrl-hero-poster::before {
    content: "";
    position: absolute; top: 50%; left: 50%;
    width: min(125vh, 1180px); aspect-ratio: 1 / 1;
    transform: translate(-32%, -50%) rotate(-8deg);
    background: conic-gradient(from 210deg at 50% 50%,
        rgba(135, 95, 170, .22), rgba(40, 120, 216, .16), rgba(19, 163, 111, .14),
        rgba(245, 189, 67, .16), rgba(120, 103, 255, .20), rgba(135, 95, 170, .22));
    border-radius: 50%;
    filter: blur(44px);
    -webkit-mask: radial-gradient(closest-side, #000 28%, transparent 78%);
            mask: radial-gradient(closest-side, #000 28%, transparent 78%);
    opacity: .85;
}
.ai-hero.swrl-live .swrl-hero-poster { opacity: 0; transition: opacity .7s ease; }

/* ===========================================================================
 * Reusable subtle brand-3D background band (June 2026)
 * Generalizes the hero poster/canvas pair so secondary surfaces (pricing head,
 * about hero, dashboard greeting) can carry a FAINT brand glow BEHIND their
 * header copy only. Contract:
 *   - .swrl-band is a positioned wrapper around the header content.
 *   - The <canvas data-swrl-scene> and .swrl-poster fill the band absolutely,
 *     sit BELOW the copy (z-index 0; content sits at z-index 1), are decorative
 *     (aria-hidden + pointer-events:none), and stay deliberately faint.
 *   - .swrl-poster is the static CSS fallback (a soft brand gradient) shown for
 *     mobile / no-WebGL / reduced-motion / no-JS. It fades out only once the
 *     live scene mounts and tags the band/canvas with .swrl-live.
 * Legibility is paramount: the canvas already protects the copy rect via
 * data-swrl-text, and the band glow is low-opacity, so text always reads.
 * ========================================================================= */
.swrl-band { position: relative; isolation: isolate; }
.swrl-band > .wrap,
.swrl-band > *:not(.swrl-poster):not(canvas) { position: relative; z-index: 1; }
.swrl-band > canvas[data-swrl-scene] {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    display: block; border: 0; pointer-events: none;
    opacity: .5; /* keep the live current faint behind header copy */
}
/* Static poster fallback: a soft, low-opacity brand glow. Modeled on
   .swrl-hero-poster but tuned fainter for a secondary band. */
.swrl-poster { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.swrl-poster::before {
    content: "";
    position: absolute; top: 50%; left: 50%;
    width: min(120vh, 1040px); aspect-ratio: 1 / 1;
    transform: translate(-30%, -50%) rotate(-8deg);
    background: conic-gradient(from 210deg at 50% 50%,
        rgba(135, 95, 170, .16), rgba(40, 120, 216, .11), rgba(19, 163, 111, .10),
        rgba(245, 189, 67, .11), rgba(120, 103, 255, .15), rgba(135, 95, 170, .16));
    border-radius: 50%;
    filter: blur(46px);
    -webkit-mask: radial-gradient(closest-side, #000 26%, transparent 76%);
            mask: radial-gradient(closest-side, #000 26%, transparent 76%);
    opacity: .7;
}
/* Crossfade the poster out once the live scene mounts. swrl-3d.js tags the
   owning section with .swrl-live; for a band with no .ai-hero ancestor that
   class lands on the <canvas> itself, so key off both. */
.swrl-band.swrl-live .swrl-poster,
.swrl-band:has(> canvas[data-swrl-scene].swrl-live) .swrl-poster { opacity: 0; transition: opacity .7s ease; }
/* Reduced motion: the canvas never mounts (guard handles it); poster stays. */
@media (prefers-reduced-motion: reduce) {
    .swrl-band > canvas[data-swrl-scene] { display: none; }
}

/* Dashboard greeting band: extra-calm on the cool app surface. The glow sits
   behind the .dash-head greeting ONLY (never the KPI tiles / pipeline / feed),
   so the portal's clean surface still reads. Tuned fainter than the marketing
   bands and clipped to the short header box. */
.dash-app .swrl-band--dash { overflow: hidden; border-radius: 18px; }
.dash-app .swrl-band--dash > canvas[data-swrl-scene] { opacity: .34; }
.dash-app .swrl-band--dash .swrl-poster::before {
    width: min(70vh, 760px);
    transform: translate(-26%, -50%) rotate(-8deg);
    filter: blur(40px);
    opacity: .5;
}

/* ---- offerings overlay canvas (desktop live only) ---- */
.ai-outcomes { position: relative; }
.swrl-glyph-canvas {
    position: absolute; inset: 0; z-index: 3;
    width: 100%; height: 100%;
    display: block; border: 0; pointer-events: none;
}

/* ---- per-offering color accent: the robust "four areas" coding ---- */
.outcome-card[data-swrl-node] { --card-accent: var(--brand); --card-accent-ink: #4a3d6b; position: relative; }
.outcome-card[data-swrl-node="websites"]   { --card-accent: var(--blue);   --card-accent-ink: #1c63b8; }
.outcome-card[data-swrl-node="leads"]       { --card-accent: var(--green);  --card-accent-ink: #0f7d54; }
.outcome-card[data-swrl-node="automation"]  { --card-accent: var(--gold);   --card-accent-ink: #8a5d0e; }
.outcome-card[data-swrl-node="custom"]      { --card-accent: var(--violet); --card-accent-ink: #5a49d6; }
/* bright accent drives the chip/bar/hover; darker AA-contrast "ink" drives the text
   (raw --gold/--green wash out on white — fail WCAG as small uppercase labels) */
.outcome-card[data-swrl-node] > span { color: var(--card-accent-ink); }
.outcome-card[data-swrl-node] .start-with { color: var(--card-accent-ink); }
.outcome-card[data-swrl-node]:hover { border-color: var(--card-accent); }
.outcome-card[data-swrl-node]::before {
    content: ""; position: absolute; left: 0; top: 24px; bottom: 24px;
    width: 4px; border-radius: 0 4px 4px 0;
    background: var(--card-accent); opacity: .5;
}

/* ---- icon slot / chip: the 3D glyph animates over this in live mode ---- */
.swrl-slot {
    display: grid; place-items: center;
    width: 54px; height: 54px; margin-bottom: 20px;
    border-radius: 16px;
    color: var(--card-accent-ink);
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--card-accent) 17%, #fff),
        color-mix(in srgb, var(--card-accent) 5%, #fff));
    border: 1px solid color-mix(in srgb, var(--card-accent) 26%, transparent);
}
.swrl-slot svg { width: 26px; height: 26px; }
/* when the live particles take over, fade the flat chip icon so they read clean */
.ai-outcomes.swrl-live .swrl-slot svg { opacity: .16; transition: opacity .6s ease; }

@media (max-width: 600px) {
    .swrl-slot { width: 46px; height: 46px; margin-bottom: 16px; }
    .swrl-slot svg { width: 22px; height: 22px; }
}

/* Homepage founder video ("Meet Hansell") — renders only when a founder video
   is set (SiteSettings.founder_video_url); the AI avatar drops into this slot. */
.founder-section .founder-teaser-media {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    max-width: 1000px;
}
.founder-video {
    width: 100%;
    max-height: 480px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--ink);
    border-radius: 24px;
    box-shadow: var(--shadow);
}
@media (max-width: 760px) {
    .founder-section .founder-teaser-media { grid-template-columns: 1fr; }
    .founder-video { max-width: 340px; margin: 0 auto; }
}

/* Free Starter Website preview badge + timer */
.free-site-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--mint); color: #0a6b3f; font-weight: 800; font-size: .72rem; }
.free-site-timer { color: var(--muted); font-size: .82rem; font-weight: 700; }
.free-site-asis { margin-top: 12px; font-size: .84rem; color: var(--muted); }

/* Per-card auto-renew micro-disclosure on support plans */
.support-renew-note { margin-top: 10px; font-size: .8rem; color: var(--muted); }

/* "Website build & launch included" highlight on each support plan card */
.support-included { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; font-size: .92rem; font-weight: 700; color: var(--brand-ink); }
.support-included .vs-mark { flex: none; }
/* Honest, surfaced founder-rate note above the support plans */
.support-founder-note { text-align: center; margin: 0 auto 18px; max-width: 660px; font-size: .85rem; color: var(--ink-2); }

/* One-time "pay once" chips carry a small inline CTA */
.addon-chip .text-link { display: inline-block; margin-top: 10px; font-size: .86rem; }

/* Founder background icon strip (Google · Federal government · Computer engineer) */
.bg-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 18px 0 0; padding: 0; }
.bg-badges li { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2, #f3f4f7); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 10px; }
.bg-badges .bg-ico { display: inline-flex; flex: none; }
.bg-badges .bg-ico svg { width: 16px; height: 16px; display: block; }

/* ============================================================
   Account / auth pages (allauth) — focused, branded card
   body.auth-page is set by templates/allauth/layouts/base.html
   ============================================================ */
.auth-page { background:
    radial-gradient(circle at 15% -5%, rgba(120,103,255,.10), transparent 32rem),
    radial-gradient(circle at 88% 0%, rgba(40,120,216,.09), transparent 30rem),
    var(--paper); }
.auth-page .main-nav, .auth-page .nav-toggle, .auth-page .nav-toggle-label { display: none; }
.auth-page .site-header { justify-content: flex-start; }
.auth-page .site-footer { display: none; }
.auth-main { width: min(444px, calc(100% - 34px)); margin: 0 auto; padding: clamp(26px, 7vh, 70px) 0 56px; }
.auth-page #main { width: min(444px, calc(100% - 34px)); margin: clamp(26px, 7vh, 70px) auto 24px; padding: clamp(28px, 4.5vw, 46px);
    background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.auth-page #main h1 { font-size: clamp(1.85rem, 4.2vw, 2.35rem); margin-bottom: 4px; }
.auth-page #main > p { color: var(--muted); font-size: .96rem; margin: 0 0 4px; }
.auth-page #main > p a { color: var(--blue-ink); font-weight: 700; }
.auth-page #main form { margin: 20px 0 6px; }
.auth-page #main form p { margin: 0 0 12px; }
.auth-page #main label { display: block; font: 700 .82rem Inter, sans-serif; letter-spacing: .01em; margin: 0 0 6px; color: var(--ink-2); }
.auth-page #main input[type=email], .auth-page #main input[type=text], .auth-page #main input[type=password] {
    width: 100%; padding: 13px 15px; font: inherit; color: var(--ink);
    border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.auth-page #main input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(40,120,216,.16); }
.auth-page #main label:has(input[type=checkbox]) { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--muted); }
.auth-page #main input[type=checkbox] { width: auto; accent-color: var(--brand); }
.auth-page #main button[type=submit] { width: 100%; margin-top: 6px; padding: 14px 18px; cursor: pointer;
    font: 800 1rem Inter, sans-serif; color: #fff; background: var(--ink); border: none; border-radius: 999px;
    transition: transform .15s ease, box-shadow .15s ease; }
.auth-page #main button[type=submit]:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.auth-page #main hr { border: none; border-top: 1px solid var(--line); margin: 22px 0; }
.auth-page #main h2 { font: 800 .72rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 12px; }
.auth-page #main a[href*="/code/"], .auth-page #main a[href*="google"], .auth-page #main a[href*="apple"] {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 18px; margin-top: 10px;
    font: 800 .98rem Inter, sans-serif; color: var(--ink); background: #fff; border: 1.6px solid var(--line); border-radius: 999px;
    transition: border-color .15s ease, transform .15s ease; }
.auth-page #main a[href*="/code/"]:hover, .auth-page #main a[href*="google"]:hover { border-color: var(--ink); transform: translateY(-1px); }
.auth-page #main a[href*="google"]::before { content: "G"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    font: 800 .8rem Inter, sans-serif; color: #fff; background: conic-gradient(from -45deg, #ea4335, #fbbc05, #34a853, #4285f4, #ea4335); }
.auth-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.auth-topbar-link, .auth-foot { color: var(--muted); font-size: .9rem; }
.auth-foot { text-align: center; margin: 0; }
.auth-foot a { color: var(--blue-ink); font-weight: 700; }
.auth-messages { margin-bottom: 14px; }
/* auth page: drop the social-list bullet + the floating chat (keep it focused) */
.auth-page #main ul { list-style: none; padding: 0; margin: 0; }
.auth-page #main li { margin: 0; }
.auth-page .chat-launcher, .auth-page .chat-panel, .auth-page .chat-widget, .auth-page #swrl-chat { display: none !important; }
.auth-page .swrl-chat { display: none !important; }

/* ============================================================
   Pricing v2 — prices-first, scannable, premium
   ============================================================ */
.pricing-head { padding: clamp(30px, 5.5vh, 60px) 0 10px; text-align: center; }
.pricing-head h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); }
.pricing-head .lead { max-width: 640px; margin-inline: auto; }
.pricing-row-head { margin: 12px 0 26px; }
.pricing-row-head h2 { margin-bottom: 6px; }
.pricing-row-head .muted { font-size: 1rem; max-width: 640px; margin: 0; }

.builds-grid, .outcome-grid.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }

/* Vertical plan cards: a short summary line + the "build included" tag */
.support-card-sum { color: var(--muted); font-size: .95rem; line-height: 1.45; margin: 0 0 14px; }
.support-card-v2 .support-included { margin: 0 0 16px; }
.support-grid .support-card-v2 .support-renew-note { text-align: center; }
.build-card, .support-card-v2 { position: relative; display: flex; flex-direction: column; padding: 32px 26px 26px;
    background: var(--paper-2); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.build-card:hover, .support-card-v2:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.build-card.is-featured, .support-card-v2.is-featured { border-color: var(--brand); box-shadow: 0 18px 46px rgba(135,95,170,.16); }
.build-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand); opacity: .28; border-radius: var(--radius) var(--radius) 0 0; }
.build-card.is-featured::before { opacity: .9; }
.build-flag { position: absolute; top: -13px; left: 24px; padding: 5px 14px; background: var(--brand); color: #fff;
    font: 800 .7rem Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; box-shadow: var(--shadow-soft); }
.build-card h3, .support-card-v2 h3 { font-size: 1.36rem; margin-bottom: 6px; }
.build-summary { color: var(--muted); font-size: .95rem; margin-bottom: 14px; }
.build-price, .support-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 2px 0 18px; }
.build-from { color: var(--muted); font-size: .88rem; font-weight: 700; }
.build-price strong, .support-price strong { font: 800 clamp(2.05rem, 4.4vw, 2.85rem) Inter, sans-serif; letter-spacing: -.045em; line-height: 1; color: var(--ink); }
.build-unit { color: var(--muted); font-size: .82rem; width: 100%; }
.price-was { color: var(--muted); text-decoration: line-through; font-weight: 700; font-size: 1.02rem; }
.support-unit { color: var(--muted); font-weight: 700; font-size: .9rem; }

.check-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.check-list li { position: relative; padding-left: 27px; font-size: .95rem; color: var(--ink-2); line-height: 1.4; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--mint); }
.check-list li::after { content: ""; position: absolute; left: 6px; top: 5px; width: 5px; height: 9px; border: solid var(--green-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check-list li.rollup { font-weight: 800; color: var(--ink); padding-left: 0; margin: 2px 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.check-list li.rollup::before, .check-list li.rollup::after { display: none; }
/* AI = the exclusive hero bullet: purple, starred (not a green check). */
.support-list li.bullet-ai { color: var(--brand-deep); font-weight: 700; }
.support-list li.bullet-ai::before { content: "\2605"; background: none; width: auto; height: auto; top: 0; left: 0; color: var(--brand); font-size: 1rem; line-height: 1.4; }
.support-list li.bullet-ai::after { display: none; }
/* Scale's "Full AI bundle" expands into an indented sub-list (purple dots, no checks). */
.support-list .bullet-sub { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 5px; }
.support-list .bullet-sub li { position: relative; padding-left: 16px; font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.support-list .bullet-sub li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.support-list .bullet-sub li::after { display: none; }
/* Faded "Add an AI assistant anytime" upsell hint under Launch. */
.bullet-faded { margin: 8px 0 4px; font-size: .85rem; color: var(--muted); }
.bullet-faded a { color: var(--brand-deep); font-weight: 700; text-decoration: none; }
.about-points { margin-top: 16px; }
.about-points li { font-size: 1rem; }
.build-cta, .support-card-v2 .button { margin-top: auto; width: 100%; justify-content: center; }
.support-card-v2 .support-renew-note { color: var(--muted); font-size: .8rem; margin: 0 0 12px; }

/* ---- Plan-card flip: front = highlights + CTA, back = full "everything included" list.
   The .js .support-card-v2.is-flipped selector matches the specificity of
   .js .reveal.is-visible (0,3,0) and, being later in source, wins the transform. ---- */
.support-toggle-note { text-align: center; font-size: .82rem; margin: 8px 0 0; }
.outcome-grid.support-grid { perspective: 2000px; }
.support-card-v2[data-flip-card] { padding: 0; transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.2,.75,.3,1), box-shadow .18s ease, border-color .18s ease; }
.support-card-v2.is-flipped, .js .support-card-v2.is-flipped,
.support-card-v2.is-flipped:hover, .js .support-card-v2.is-flipped:hover { transform: rotateY(180deg); box-shadow: var(--shadow); }
.support-card-front, .support-card-back { display: flex; flex-direction: column;
    padding: 32px 26px 26px; border-radius: var(--radius);
    backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.support-card-front { flex: 1; }
.support-card-back { position: absolute; inset: 0; background: var(--paper-2);
    transform: rotateY(180deg); overflow-y: auto; }
.support-back-title { font: 800 1.06rem Inter, sans-serif; color: var(--brand-deep); margin: 0 0 14px; }
.support-card-back .support-full { margin: 0 0 16px; }
.support-flip-btn { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    background: none; border: 1.5px solid var(--line); color: var(--brand-deep);
    font: 700 .85rem Inter, sans-serif; padding: 8px 14px; border-radius: 999px; cursor: pointer;
    margin: 2px 0 14px; transition: background .15s ease, border-color .15s ease; }
.support-flip-btn:hover { background: var(--paper-2); border-color: var(--brand); }
.support-flip-btn .support-flip-ico { font-size: 1.1em; line-height: 1; }
.support-flip-back { margin-top: auto; }
@media (prefers-reduced-motion: reduce) { .support-card-v2[data-flip-card] { transition: box-shadow .18s ease; } }

.addon-note { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .86rem; color: var(--muted); }
.addon-note a { color: var(--blue-ink); font-weight: 700; }
.builds-foot { text-align: center; margin: 24px 0 0; color: var(--muted); }
.builds-foot a { color: var(--blue-ink); font-weight: 700; }

.addons-strip { margin: 30px 0 10px; padding: 28px; background: var(--soft); border-radius: var(--radius); }
.addons-strip-head h3 { font-size: 1.3rem; margin-bottom: 4px; }
.addons-strip-head .muted { margin: 0; max-width: 640px; }
.addons-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
.addon-chip { padding: 18px 20px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.addon-chip-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.addon-chip-top strong { font-size: 1.06rem; }
.addon-price { color: var(--green-ink); font-weight: 800; white-space: nowrap; }
.addon-chip p { color: var(--muted); font-size: .92rem; margin: 0; }
.addon-chip-bridge { margin-top: 10px !important; }
.addon-chip-bridge .text-link { margin-top: 0; font-weight: 700; }

/* Honest comparable-market anchor near each price (a labeled RANGE, not a fake
   "was" price). The figure is emphasized + struck to signal the value gap where
   our price is below the band (Grow/Scale/Setup); for Launch it reads as context. */
.market-anchor { margin: -10px 0 14px; font-size: .82rem; color: var(--muted); }
.market-anchor-fig { font-weight: 700; color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(135,95,170,.5); }
.market-anchor-note { font-size: .76rem; color: var(--muted); margin: 8px 0 0; }
.setup-chip .check-list { margin: 12px 0 14px; }
.setup-chip .market-anchor { margin: 4px 0 10px; }
.upgrade-cue { margin: 12px 0 0; font-size: .84rem; color: var(--muted); line-height: 1.45; }
.upgrade-cue strong { color: var(--brand-ink); white-space: nowrap; }

.owner-handoff { display: flex; align-items: center; gap: 26px; margin: 28px 0 14px; padding: 26px 30px;
    background: linear-gradient(120deg, var(--brand-grad-1), var(--brand-grad-3)); border-radius: var(--radius); }
.owner-handoff-price { font: 800 clamp(2.2rem, 5vw, 3rem) Inter, sans-serif; letter-spacing: -.045em; color: var(--brand-ink); line-height: 1; white-space: nowrap; }
.owner-handoff-price span { font-size: 1rem; }
.owner-handoff strong { font-size: 1.08rem; display: block; }
.owner-handoff p { margin: 6px 0 0; color: var(--ink-2); font-size: .95rem; }
.support-legal { color: var(--muted); font-size: .85rem; margin-top: 16px; }

/* Pricing redesign (2026-06): compact protection chips + own-it callout */
.guard-band { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 26px; padding: 15px 18px; background: var(--mint); border: 1px solid #b9dfcf; border-radius: 18px; }
.guard-label { font: 800 .72rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .09em; color: var(--green-ink); margin-right: 2px; }
.guard-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; background: #fff; border: 1px solid #c4e3d5; border-radius: 999px; font-size: .86rem; font-weight: 600; color: #2c5446; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease; }
.guard-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(45,110,85,.14); }
.guard-chip .vs-mark { width: 18px; height: 18px; }
.guard-chip .vs-yes::after { left: 5.5px; top: 4px; width: 5px; height: 8px; }
.js .guard-band.is-visible .guard-chip { animation: guardChipIn .4s cubic-bezier(.2,.7,.3,1) both; }
.guard-band .guard-chip:nth-child(2) { animation-delay: .03s; }
.guard-band .guard-chip:nth-child(3) { animation-delay: .07s; }
.guard-band .guard-chip:nth-child(4) { animation-delay: .11s; }
.guard-band .guard-chip:nth-child(5) { animation-delay: .15s; }
.guard-band .guard-chip:nth-child(6) { animation-delay: .19s; }
@keyframes guardChipIn { from { opacity: 0; transform: translateY(7px) scale(.97); } to { opacity: 1; transform: none; } }

.own-callout { display: flex; align-items: center; gap: 22px; margin: 22px 0 8px; padding: 20px 26px; background: linear-gradient(120deg, var(--brand-grad-1), var(--brand-grad-3)); border-radius: var(--radius); }
.own-callout-price { font: 800 clamp(2rem, 4.5vw, 2.7rem) Inter, sans-serif; letter-spacing: -.045em; color: var(--brand-ink); line-height: 1; white-space: nowrap; }
.own-callout-price span { display: block; font-size: .82rem; font-weight: 700; margin-top: 3px; }
.own-callout p { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.5; }
.own-callout strong { color: var(--brand-ink); }
@media (max-width: 680px) {
    .own-callout { flex-direction: column; align-items: flex-start; gap: 12px; }
    .guard-chip { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
    .js .guard-band.is-visible .guard-chip { animation: none; }
    .guard-chip:hover { transform: none; }
}

.vs-table { margin-top: 6px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.vs-row { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.vs-row:last-child { border-bottom: none; }
.vs-head { background: var(--soft); }
.vs-attr { padding: 14px 20px; font-weight: 700; font-size: .94rem; }
.vs-col { padding: 13px 10px; text-align: center; border-left: 1px solid var(--line); }
.vs-head .vs-col strong { display: block; font-family: Inter, sans-serif; font-size: 1rem; }
.vs-head .vs-col span { font-size: .76rem; color: var(--muted); }
.vs-us { background: rgba(135,95,170,.06); }
.vs-head .vs-us { background: rgba(135,95,170,.13); }
.vs-head .vs-us strong { color: var(--brand-ink); }
.vs-mark { display: inline-block; width: 22px; height: 22px; border-radius: 50%; position: relative; vertical-align: middle; }
.vs-yes { background: var(--mint); }
.vs-yes::after { content: ""; position: absolute; left: 7px; top: 5px; width: 6px; height: 10px; border: solid var(--green-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.vs-partial { background: #fbedcf; }
.vs-partial::after { content: ""; position: absolute; left: 5px; top: 9.5px; width: 12px; height: 2.5px; background: #9c6b10; border-radius: 2px; }
.vs-no { background: #efece6; }
.vs-no::after { content: "–"; position: absolute; left: 0; right: 0; top: 0; bottom: 0; line-height: 22px; text-align: center; color: var(--ink-2); font-weight: 700; }
.vs-foot { margin-top: 12px; color: var(--muted); font-size: .85rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vs-foot .vs-mark { width: 18px; height: 18px; }

@media (max-width: 860px) {
    .builds-grid, .outcome-grid.support-grid, .addons-list { grid-template-columns: 1fr; }
    .build-card.is-featured, .support-card-v2.is-featured { order: -1; }
    .owner-handoff { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 680px) {
    .vs-attr { padding: 11px 12px; font-size: .85rem; }
    .vs-col { padding: 11px 4px; }
    .vs-head .vs-col strong { font-size: .82rem; }
    .vs-head .vs-col span { font-size: .68rem; }
}
@media (max-width: 560px) {
    .vs-section .vs-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .vs-section .vs-row { min-width: 500px; }
}
.build-anchor { width: 100%; font-size: .82rem; color: var(--muted); font-weight: 600; margin-top: 3px; }
.build-anchor s { color: var(--muted); }
.support-price .price-save { align-self: center; }

/* ============================================================
   Scope / buy-flow page (reserve_project) — "here's what I'll build"
   ============================================================ */
.scope-hero { padding: clamp(36px, 7vh, 82px) 0 8px; }
.scope-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
.scope-hero .lead { max-width: 720px; }
.scope-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; align-items: start; }
.scope-main { display: grid; gap: 22px; }
.scope-card { padding: 28px 26px; background: var(--paper-2); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.scope-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.scope-card-head h2 { margin: 0; font-size: 1.5rem; }
.scope-card-head .muted { margin: 0; max-width: 460px; }
.scope-base { white-space: nowrap; }
.scope-from { color: var(--muted); font-weight: 700; font-size: .85rem; }
.scope-base strong { font: 800 1.9rem Inter, sans-serif; letter-spacing: -.04em; }
.scope-addons { display: grid; gap: 12px; }
.scope-addon { position: relative; display: flex; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.scope-addon:hover { border-color: var(--brand); }
.scope-addon.is-on { border-color: var(--brand); background: var(--brand-grad-1); }
.scope-addon input { position: absolute; opacity: 0; width: 0; height: 0; }
.scope-addon-check { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; border: 2px solid var(--line); border-radius: 7px; background: #fff; position: relative; transition: background .15s ease, border-color .15s ease; }
.scope-addon.is-on .scope-addon-check { background: var(--brand); border-color: var(--brand); }
.scope-addon-check::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); opacity: 0; transition: transform .15s ease, opacity .15s ease; }
.scope-addon.is-on .scope-addon-check::after { transform: rotate(45deg) scale(1); opacity: 1; }
.scope-addon:focus-within .scope-addon-check { outline: 3px solid var(--blue); outline-offset: 2px; }
.scope-addon-body { display: flex; flex-direction: column; gap: 4px; }
.scope-addon-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.scope-addon-top strong { font-size: 1.05rem; }
.scope-addon-price { color: var(--green-ink); font-weight: 800; white-space: nowrap; }
.scope-addon-summary { color: var(--muted); font-size: .92rem; }
.scope-next h2 { font-size: 1.35rem; }
.scope-summary-inner { position: sticky; top: 92px; padding: 28px 26px; background: var(--dark); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.scope-summary-inner h2 { color: #fff; font-size: 1.3rem; margin-bottom: 14px; }
.scope-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; color: rgba(255,255,255,.82); font-size: .95rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.scope-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0 2px; }
.scope-total span { color: rgba(255,255,255,.82); font-weight: 700; }
.scope-total strong { font: 800 1.95rem Inter, sans-serif; letter-spacing: -.04em; color: #fff; }
.scope-note { color: rgba(255,255,255,.74); font-size: .82rem; margin: 8px 0 18px; }
.scope-summary-inner .button { width: 100%; justify-content: center; }
.scope-reassure { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.scope-reassure li { position: relative; padding-left: 24px; color: rgba(255,255,255,.88); font-size: .9rem; }
.scope-reassure li::before { content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--green); }
.scope-reassure li::after { content: ""; position: absolute; left: 5px; top: 6px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.service-interest-chip { display: inline-block; margin-top: 8px; padding: 6px 14px; background: var(--soft); border-radius: 999px; font-size: .92rem; }
@media (max-width: 900px) {
    .scope-layout { grid-template-columns: 1fr; }
    .scope-summary-inner { position: static; }
}

/* ============================================================
   Client portal (dashboard SPA) — its own app shell + theme
   ============================================================ */
.dash-app {
    /* Rebind the semantic roles to the cool app skin. Components below read
       these tokens, so the whole portal restyles from this one block. */
    --surface-bg: #eef1f6;
    --surface-card: #fff;
    --surface-sunk: #f7fbf9;
    /* Founder message bubble tint — explicit (was undefined, fell back to a
       near-white #f2f6f4 with ~1.04:1 edge). Slightly darker so the bubble
       reads against the white card; paired with a 1px border below. */
    --surface-2: #eef1ef;
    --border: #e3e7ee;
    --border-strong: #eef1f6;
    --track: #e7ebf2;
    /* WCAG graphic contrast (1.4.11): the progress-ring track must be a visible
       graphic against the white card. The page --track above is only ~1.2:1;
       this is 3.01:1 vs white so the empty arc reads on its own (rings rebind
       to it via --ring-track — see .dash-ring / .dash-build-ring). */
    --ring-track: #8d95a5;
    /* Resting form-control border: page --border-strong (#eef1f6) is ~1.13:1
       on white and fails 3:1; this is ~4.2:1. Focus state keeps the brand ring. */
    --field-border: #767b88;
    --elev-1: 0 8px 24px rgba(16,16,20,.05);
    --elev-2: 0 6px 24px rgba(16,16,20,.18);
    background: var(--surface-bg);
    min-height: 100vh;
}
.dash-app .site-footer, .dash-app .swrl-chat { display: none; }
.dash-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 22px; padding: 12px 26px; background: var(--topbar-bg); color: var(--sidebar-text-strong); box-shadow: var(--elev-2); }
.dash-brand { color: #fff; font-size: 1.05rem; }
.dash-portal-tag { font: 800 .62rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .1em; padding: 2px 8px; margin-left: 2px; background: rgba(255,255,255,.16); border-radius: 999px; vertical-align: middle; }
.dash-nav { display: flex; align-items: center; gap: 20px; margin-left: 14px; font-weight: 700; font-size: .92rem; }
.dash-nav > a { color: rgba(255,255,255,.72); }
.dash-nav > a:hover { color: #fff; }
.dash-nav-user { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.dash-user-email { color: rgba(255,255,255,.6); font-weight: 600; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-tosite { color: rgba(255,255,255,.8); }
.dash-logout { color: #fff; padding: 7px 14px; background: rgba(255,255,255,.12); border-radius: 999px; }
.dash-logout:hover { background: rgba(255,255,255,.22); }
.dash-nav-toggle, .dash-nav-toggle-label { display: none; }

.dash-app .dash { padding: 30px 0 64px; }
.dash-app .dash-head { margin-bottom: 24px; }
.dash-app .dash-head .eyebrow { color: var(--brand-ink); }
.dash-app .dash-head h1 { font-size: clamp(2rem, 4vw, 2.7rem); }
.dash-app .dash-section { margin-bottom: 20px; padding: 24px 26px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--elev-1); }
.dash-app .dash-section-title { font-size: 1.12rem; margin: 0 0 14px; }
/* Operator console (founder) — small tweaks; reuses the shared client .dash-* shell. */
.dash-app .dash-analytics-link { margin: -8px 0 22px; }
/* Reference library ("Docs & links") — a visually distinct band below the action
   inbox so acted-on items (approved audits, sent proposals, setup intakes) and
   their links stay reachable without reading as "needs you now". */
.dash-app .dash-library { margin-top: 34px; padding-top: 8px; border-top: 2px dashed var(--border-strong); }
.dash-app .dash-library-head { margin: 18px 0 16px; }
.dash-app .dash-library-title { font-size: 1.35rem; margin: 0 0 4px; }
.dash-app .dash-library-head p { color: var(--muted); font-size: .92rem; margin: 0; max-width: 640px; }
.dash-app .dash-library .dash-section-title { font-size: 1.02rem; }
.dash-app .dash-library .dash-count { background: var(--track); color: var(--muted); }
.dash-app .dash-section .dash-table th { color: var(--muted); }
.dash-app .dash-section .dash-table th[scope="row"] { color: inherit; font-weight: inherit; font-size: inherit; }
.dash-app .dash-section .dash-table th, .dash-app .dash-section .dash-table td { border-bottom-color: var(--border-strong); }
.dash-app .dash-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-strong); flex-wrap: wrap; }
.dash-app .dash-item:last-child { border-bottom: none; }
.dash-app .dash-item-main strong { display: block; font-size: 1.02rem; }
.dash-app .dash-item-main small { color: var(--muted); }
.dash-app .dash-item-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-app .dash-empty { padding: 44px 30px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 18px; text-align: center; }
@media (max-width: 720px) {
    .dash-nav-toggle { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
    .dash-nav-toggle:focus-visible + .dash-nav-toggle-label { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
    .dash-nav-toggle-label { display: flex; flex-direction: column; gap: 5px; margin-left: auto; cursor: pointer; padding: 10px; }
    .dash-nav-toggle-label span { width: 24px; height: 2px; background: #fff; border-radius: 2px; }
    .dash-nav { position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding: 18px 26px; background: var(--dark); display: none; }
    .dash-nav-toggle:checked ~ .dash-nav { display: flex; }
    .dash-nav-user { flex-direction: column; align-items: flex-start; gap: 10px; margin-left: 0; }
}
/* client portal: project progress + status badges */
.dash-app .dash-project { padding: 16px 0; border-bottom: 1px solid var(--border-strong); }
.dash-app .dash-project:last-child { border-bottom: none; }
.dash-project-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-project-head strong { font-size: 1.05rem; margin-right: 10px; }
.dash-badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font: 800 .72rem Inter, sans-serif; vertical-align: middle; }
.dash-badge.is-active { background: rgba(40,120,216,.12); color: #1a5fb4; }
.dash-badge.is-done { background: var(--mint); color: var(--green-ink); }
.dash-progress { height: 9px; background: var(--track); border-radius: 999px; overflow: hidden; }
.dash-progress-bar { height: 100%; background: linear-gradient(90deg, var(--brand), var(--blue)); border-radius: 999px; transition: width .5s ease; transform-origin: left; animation: dash-progress-grow .9s cubic-bezier(.16,1,.3,1); }
@keyframes dash-progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.dash-progress-label { display: block; margin-top: 7px; color: var(--muted); }

/* project workspace inside the portal: hero + sections become app cards */
.dash-app .page-hero { padding: 30px 0 4px; }
.dash-app .page-hero .eyebrow { color: var(--brand-ink); }
.dash-app .page-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.dash-app .page-hero .button-row { margin-top: 14px; }
.dash-app main .section { width: min(1100px, calc(100% - 38px)); margin: 0 auto 18px; padding: 26px 30px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--elev-1); }
.dash-app main .section.split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 760px) { .dash-app main .section.split { grid-template-columns: 1fr; } }
/* support-tier feature matrix (reuses .vs-table) */
.support-matrix { margin: 24px 0 6px; }
.support-matrix-head { font: 800 .8rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; }
.support-vs .vs-attr { font-size: .9rem; }
.support-vs .vs-txt { font-weight: 800; font-size: .92rem; color: var(--ink); }
@media (max-width: 700px) {
    .support-matrix { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .support-vs { min-width: 560px; }
}
/* portal empty state — welcoming command-center intro */
.dash-app .dash-empty h2 { font-size: 1.55rem; margin-bottom: 10px; }
.dash-app .dash-empty p { max-width: 560px; margin: 0 auto 12px; color: var(--muted); }
.dash-empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 20px 0 6px; }
.dash-empty-alt { margin-top: 10px; }
.dash-app .dash-empty .dash-empty-note { font-size: .84rem; margin-top: 18px; }

.starter-scope-card { max-width: 760px; margin: 0 auto; }
/* Flash message states — an error must not look like a reassuring success. */
.message.error { background: #fdecea; color: #7a271a; }
.message.warning { background: #fcefcf; color: #7a4f0a; }

/* ============================================================
   Client portal SPA — sidebar shell + overview components.
   All token-driven (see :root semantic roles + .dash-app rebind).
   ============================================================ */

/* ---- Shell: fixed left sidebar + scrolling main ---- */
.dash-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    min-height: calc(100vh - 58px);
    background: var(--surface-bg);
}
.dash-sidebar {
    position: sticky;
    top: 58px;
    align-self: start;
    height: calc(100vh - 58px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 14px 24px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
}
.dash-sidebar .dash-brand { padding: 0 12px 8px; font-size: 1rem; color: var(--sidebar-text-strong); }
.dash-sidebar .dash-portal-tag { background: var(--sidebar-active); color: var(--sidebar-text-strong); }
.dash-side-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-side-group-label {
    margin: 16px 12px 6px;
    font: 800 .66rem Inter, sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--sidebar-text);
    /* Was .62 (~4.47:1); .72 lifts the dimmed group label to ~5.6:1. */
    opacity: .72;
}
.dash-side-group-label:first-of-type { margin-top: 4px; }
.dash-side-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 11px;
    color: var(--sidebar-text);
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.2;
    transition: background .16s ease, color .16s ease;
}
.dash-side-link:hover { background: var(--sidebar-active); color: var(--sidebar-text-strong); }
.dash-side-link.is-active,
.dash-side-link[aria-current="page"] {
    background: var(--sidebar-active);
    color: var(--sidebar-text-strong);
    box-shadow: inset 3px 0 0 var(--brand);
}
.dash-side-ico {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 1.02rem;
    line-height: 1;
}
.dash-side-ico svg { width: 18px; height: 18px; }

.dash-main {
    min-width: 0;
    padding: 30px clamp(18px, 3vw, 38px) 64px;
    background: var(--surface-bg);
}
.dash-main > .dash-head { margin-bottom: 22px; }

/* ---- KPI tiles ---- */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.dash-kpi {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--elev-1);
    overflow: hidden;
}
.dash-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--kpi-accent, var(--brand));
}
.dash-kpi[data-accent="brand"] { --kpi-accent: var(--brand); }
.dash-kpi[data-accent="gold"]  { --kpi-accent: var(--gold); }
.dash-kpi[data-accent="green"] { --kpi-accent: var(--green); }
.dash-kpi[data-accent="blue"]  { --kpi-accent: var(--blue); }
.dash-kpi-body { min-width: 0; }
.dash-kpi-label {
    font: 800 .72rem Inter, sans-serif;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin: 0 0 6px;
}
.dash-kpi-value {
    font: 800 1.7rem Inter, sans-serif;
    letter-spacing: -.03em;
    color: var(--ink);
    line-height: 1.05;
}
.dash-kpi-sub { display: block; margin-top: 5px; font-size: .82rem; color: var(--muted); }

/* ---- SVG progress ring (right side of a KPI tile) ---- */
.dash-ring {
    flex: none;
    position: relative;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dash-ring svg { width: 56px; height: 56px; transform: rotate(-90deg); display: block; }
.dash-ring .dash-ring-track { fill: none; stroke: var(--ring-track, var(--track)); stroke-width: 5; }
.dash-ring .dash-ring-fill {
    fill: none;
    stroke: var(--kpi-accent, var(--brand));
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dasharray .8s cubic-bezier(.16,1,.3,1);
}
.dash-ring-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 800 .8rem Inter, sans-serif;
    color: var(--ink);
}

/* ---- Pipeline (horizontal connected stages) ---- */
.dash-pipeline {
    display: block;
    margin: 0 0 22px;
    padding: 22px 24px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--elev-1);
}
.dash-pipeline-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.dash-pipeline-head h2 { font-size: 1.08rem; margin: 0; }
.dash-pipeline-head .dash-pipeline-pct { font: 800 .9rem Inter, sans-serif; color: var(--brand-ink); }
.dash-stages {
    list-style: none;
    counter-reset: stage;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}
.dash-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding-top: 4px;
    text-align: center;
}
/* connector line between dots */
.dash-stage::before {
    content: "";
    position: absolute;
    top: 12px;
    left: -50%;
    width: 100%;
    height: 3px;
    background: var(--track);
    z-index: 0;
}
.dash-stage:first-child::before { display: none; }
.dash-stage.is-done::before,
.dash-stage.is-current::before { background: var(--green); }
.dash-stage-dot {
    position: relative;
    z-index: 1;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-card);
    border: 3px solid var(--track);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-stage.is-done .dash-stage-dot { background: var(--green); border-color: var(--green); }
.dash-stage.is-done .dash-stage-dot::after {
    content: "";
    width: 5px;
    height: 9px;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.dash-stage.is-current .dash-stage-dot {
    background: var(--surface-card);
    /* Non-color cue (1.4.1): thicker ring + halo distinguishes "current" from
       "todo" dots without relying on the green hue alone. */
    border-color: var(--green);
    border-width: 4px;
    box-shadow: 0 0 0 4px rgba(19,163,111,.18);
}
.dash-stage.is-current .dash-stage-dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
}
.dash-stage-label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--muted);
    line-height: 1.2;
}
.dash-stage.is-current .dash-stage-label,
.dash-stage.is-done .dash-stage-label { color: var(--ink); }
/* Heavier weight on the current label is a second non-color cue for "where am I". */
.dash-stage.is-current .dash-stage-label { font-weight: 800; }

/* ---- Split: activity feed + checklist ---- */
.dash-split {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.dash-split > .dash-section { margin-bottom: 0; }

/* ---- Activity feed ---- */
.dash-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dash-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-strong);
}
.dash-feed-item:last-child { border-bottom: none; padding-bottom: 0; }
.dash-feed-ico {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .92rem;
    font-weight: 800;
    background: var(--surface-sunk);
    color: var(--ink);
}
.dash-feed-item[data-accent="green"] .dash-feed-ico { background: rgba(19,163,111,.13); color: var(--green-ink); }
.dash-feed-item[data-accent="blue"]  .dash-feed-ico { background: rgba(40,120,216,.13); color: var(--blue-ink); }
.dash-feed-item[data-accent="gold"]  .dash-feed-ico { background: rgba(245,189,67,.20); color: #8a5a06; }
.dash-feed-item[data-accent="brand"] .dash-feed-ico { background: rgba(135,95,170,.14); color: var(--brand-ink); }
.dash-feed-item[data-accent="muted"] .dash-feed-ico { background: var(--surface-sunk); color: var(--muted); }
.dash-feed-body { min-width: 0; flex: 1; }
.dash-feed-text { display: block; font-size: .92rem; color: var(--ink); line-height: 1.4; }
.dash-feed-when { display: block; margin-top: 2px; font-size: .78rem; color: var(--muted); }

/* ---- Checklist (next steps) ---- */
.dash-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    background: var(--surface-sunk);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--ink);
    font-weight: 600;
    font-size: .92rem;
    transition: border-color .16s ease, transform .16s ease;
}
a.dash-check-item:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.dash-check-item::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 2px solid var(--border-strong);
    background: var(--surface-card);
}
.dash-check-item.is-urgent {
    border-color: rgba(255,107,74,.45);
    background: rgba(255,107,74,.07);
}
.dash-check-item.is-urgent::before { border-color: var(--coral); background: var(--coral); }
.dash-check-item .dash-check-arrow { margin-left: auto; color: var(--muted); font-weight: 800; }

/* ---- Card row (used for builds/scorecards mini cards under overview) ---- */
.dash-cardrow {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.dash-cardrow > * {
    padding: 16px 18px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--elev-1);
}

/* ---- Sparkline polylines (token-driven, accent-coded) ---- */
.dash-spark { display: block; width: 100%; height: 38px; }
.dash-spark polyline { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-spark[data-accent="green"] polyline { stroke: var(--chart-1); }
.dash-spark[data-accent="blue"]  polyline { stroke: var(--chart-2); }
.dash-spark[data-accent="brand"] polyline { stroke: var(--chart-3); }
.dash-spark[data-accent="gold"]  polyline { stroke: var(--chart-4); }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-split { grid-template-columns: 1fr; }
    .dash-split > .dash-section { margin-bottom: 0; }
}
@media (max-width: 900px) {
    /* Sidebar collapses to a horizontal scroll strip above main */
    .dash-shell { grid-template-columns: 1fr; }
    .dash-sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 14px;
        white-space: nowrap;
    }
    .dash-sidebar .dash-brand,
    .dash-side-group-label { display: none; }
    .dash-side-nav { flex-direction: row; gap: 4px; }
    /* WCAG 2.5.5 touch targets: >=44px tall on mobile. */
    .dash-side-link { padding: 11px 14px; min-height: 44px; }
    .dash-side-link.is-active,
    .dash-side-link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--brand); }
    .dash-bell { width: 44px; height: 44px; }
    .dash-main { padding: 22px 16px 56px; }
    .dash-stages { grid-auto-flow: row; grid-auto-columns: auto; gap: 4px; }
    .dash-stage { flex-direction: row; justify-content: flex-start; gap: 12px; text-align: left; padding: 6px 0; }
    .dash-stage::before {
        top: -50%;
        left: 10px;
        width: 3px;
        height: 100%;
    }
}
@media (max-width: 560px) {
    .dash-kpis { grid-template-columns: 1fr; }
    .dash-cardrow { grid-template-columns: 1fr; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .dash-ring .dash-ring-fill,
    .dash-check-item,
    a.dash-check-item:hover,
    .dash-side-link { transition: none; }
    .dash-progress-bar { animation: none; }
}

/* ---- Client portal: dedicated Build + Messages pages ---- */
.dash-build-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-strong);
    flex-wrap: wrap;
}
.dash-build-card:last-child { border-bottom: none; }
.dash-build-main { flex: 1 1 240px; min-width: 0; }
.dash-build-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-build-head strong { font-size: 1.05rem; }
.dash-build-ring { flex: none; position: relative; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }
.dash-build-ring svg { width: 56px; height: 56px; transform: rotate(-90deg); display: block; }
.dash-build-ring .dash-ring-track { fill: none; stroke: var(--ring-track, var(--track)); stroke-width: 5; }
.dash-build-ring .dash-ring-fill {
    fill: none;
    stroke: var(--brand);
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dasharray .8s cubic-bezier(.16,1,.3,1);
}
.dash-build-ring .dash-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 .78rem Inter, sans-serif; color: var(--ink); }
.dash-build-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }

/* Message thread */
.dash-msg-section { padding-bottom: 18px; }
.dash-msg-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dash-msg-section-head .dash-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.dash-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); display: inline-block; box-shadow: 0 0 0 4px rgba(135,95,170,.16); }
.dash-unread-count { font: 800 .72rem Inter, sans-serif; color: var(--brand-ink); }
.dash-msg-thread { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 18px; }
.dash-msg { display: flex; flex-direction: column; max-width: 82%; }
.dash-msg.is-founder { align-self: flex-start; align-items: flex-start; }
.dash-msg.is-client { align-self: flex-end; align-items: flex-end; }
.dash-msg-bubble {
    padding: 11px 15px;
    border-radius: 16px;
    font-size: .96rem;
    line-height: 1.45;
    word-break: break-word;
}
.dash-msg.is-founder .dash-msg-bubble { background: var(--surface-2, #f2f6f4); color: var(--ink); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.dash-msg.is-client .dash-msg-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.dash-msg-meta { display: flex; gap: 8px; align-items: center; margin-top: 5px; font-size: .74rem; color: var(--muted); }
.dash-msg-who { font-weight: 800; }
.dash-msg-empty { color: var(--muted); font-size: .92rem; }
.dash-msg-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.dash-msg-form textarea {
    width: 100%;
    border: 1px solid var(--field-border, var(--border-strong));
    border-radius: 12px;
    padding: 11px 13px;
    font: inherit;
    color: var(--ink);
    background: var(--surface-card);
    resize: vertical;
}
.dash-msg-form textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
@media (max-width: 600px) {
    .dash-build-actions { align-items: flex-start; width: 100%; }
    .dash-msg { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .dash-build-ring .dash-ring-fill { transition: none; }
}

/* ============================================================
   Client portal: Scorecards (radar) + Support (plan + upgrades)
   ============================================================ */

/* responsive card grid shared by the scorecards page */
.dash-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.dash-card-grid > .dash-section { margin-bottom: 0; }

/* ---- Scorecard card ---- */
.dash-score-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dash-score-title strong { display: block; font-size: 1.05rem; }
.dash-score-title small { color: var(--muted); }
.dash-score-ring .dash-ring-fill { stroke: var(--brand); }
.dash-score-ring.is-strong .dash-ring-fill { stroke: var(--green); }
.dash-score-ring.is-fair .dash-ring-fill { stroke: #a07408; }
.dash-score-ring.is-weak .dash-ring-fill { stroke: var(--coral); }
.dash-score-ring .dash-ring-num { font-size: .92rem; }

.dash-score-band { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font: 800 .82rem Inter, sans-serif; }
.dash-score-band-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); display: inline-block; }
.dash-score-band.is-strong { color: var(--green-ink); }
.dash-score-band.is-strong .dash-score-band-dot { background: var(--green); }
.dash-score-band.is-fair { color: #7a5600; }
.dash-score-band.is-fair .dash-score-band-dot { background: var(--gold); }
.dash-score-band.is-weak { color: var(--coral-ink); }
.dash-score-band.is-weak .dash-score-band-dot { background: var(--coral); }

/* ---- 5-axis radar ---- */
.dash-radar { margin: 16px 0 6px; }
.dash-radar svg { display: block; width: 100%; max-width: 240px; margin: 0 auto; }
.dash-radar-grid { fill: var(--surface-sunk); stroke: var(--border-strong); stroke-width: .6; }
.dash-radar-axis { stroke: var(--border-strong); stroke-width: .5; }
.dash-radar-shape { fill: var(--chart-3); fill-opacity: .22; stroke: var(--brand); stroke-width: 1.2; stroke-linejoin: round; }
.dash-radar-node { fill: var(--brand); }
.dash-radar-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 0; font-size: .8rem; color: var(--muted); }
.dash-radar-key b { color: var(--ink); margin-right: 3px; }

.dash-score-actions { margin-top: 16px; }
.dash-score-actions .dash-pending { color: var(--muted); font-size: .9rem; }

/* ---- Support plan card ---- */
.dash-plan-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dash-plan-main { flex: 1 1 280px; min-width: 0; }
.dash-plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-plan-head strong { font-size: 1.15rem; }
.dash-plan-price { margin: 10px 0 14px; font: 800 1.05rem Inter, sans-serif; color: var(--ink); }
.dash-plan-cycle { font: 700 .78rem Inter, sans-serif; color: var(--muted); margin-left: 6px; }
.dash-plan-note { color: var(--muted); margin: 4px 0 16px; max-width: 52ch; }
.dash-plan-facts { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 0 0 16px; }
.dash-plan-facts dt { font: 800 .72rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dash-plan-facts dd { margin: 3px 0 0; font-weight: 700; color: var(--ink); }
.dash-plan-ring { flex: none; }
.dash-plan-ring .dash-ring-fill { stroke: var(--blue); }

/* ---- Upgrade request form + history ---- */
.dash-form-intro { color: var(--muted); margin: 0 0 16px; max-width: 60ch; }
.dash-upgrade-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.dash-field { display: flex; flex-direction: column; gap: 6px; }
.dash-field-label { font: 800 .78rem Inter, sans-serif; color: var(--ink); }
.dash-field-required { font-weight: 600; color: var(--coral-ink); }
.dash-upgrade-form select,
.dash-upgrade-form input[type="text"],
.dash-upgrade-form textarea {
    width: 100%;
    border: 1px solid var(--field-border, var(--border-strong));
    border-radius: 12px;
    padding: 11px 13px;
    font: inherit;
    color: var(--ink);
    background: var(--surface-card);
}
.dash-upgrade-form textarea { resize: vertical; }
.dash-upgrade-form select:focus,
.dash-upgrade-form input[type="text"]:focus,
.dash-upgrade-form textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.dash-upgrade-form button { align-self: flex-start; }

.dash-upgrade-list { list-style: none; margin: 0; padding: 0; }
.dash-upgrade-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-strong); flex-wrap: wrap; }
.dash-upgrade-item:last-child { border-bottom: none; }
.dash-upgrade-main strong { display: block; font-size: 1rem; }
.dash-upgrade-main small { color: var(--muted); }
.dash-upgrade-status { background: var(--soft); color: var(--ink); }
.dash-upgrade-status.is-new { background: rgba(40,120,216,.12); color: #1a5fb4; }
.dash-upgrade-status.is-reviewed { background: rgba(245,189,67,.18); color: #8a6300; }
.dash-upgrade-status.is-approved,
.dash-upgrade-status.is-sent { background: var(--mint); color: var(--green-ink); }
.dash-upgrade-status.is-declined { background: #fdecea; color: var(--coral-ink); }

@media (max-width: 600px) {
    .dash-plan-card { flex-direction: column-reverse; align-items: stretch; }
    .dash-plan-ring { align-self: flex-start; }
}

/* ---- Account / settings form ---- */
.dash-account-form { display: block; }
.dash-account-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 720px; }
.dash-account-form .dash-field-help { font-size: .8rem; color: var(--muted); }
.dash-account-form .dash-field-error { font-size: .8rem; color: var(--coral-ink); }
.dash-account-form input[type="text"],
.dash-account-form input[type="tel"],
.dash-account-form input[type="url"],
.dash-account-form input[type="email"],
.dash-account-form select {
    width: 100%;
    border: 1px solid var(--field-border, var(--border-strong));
    border-radius: 12px;
    padding: 11px 13px;
    font: inherit;
    color: var(--ink);
    background: var(--surface-card);
}
.dash-account-form input:focus,
.dash-account-form select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.dash-checkbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dash-checkbox-row { display: flex; align-items: flex-start; gap: 10px; }
.dash-checkbox-row input[type="checkbox"] { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.dash-checkbox-row label { color: var(--ink); }
.dash-email-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-email-item { padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--ink); font-weight: 600; }
.dash-account-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dash-account-save { margin-top: 4px; }

/* client portal: notifications bell + page */
.dash-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.10); }
.dash-bell:hover { color: #fff; background: rgba(255,255,255,.20); }
.dash-bell-ico { width: 20px; height: 20px; }
.dash-bell-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font: 800 .68rem Inter, sans-serif; line-height: 1; color: #fff; background: var(--blue); border: 2px solid var(--dark); border-radius: 999px; }
.dash-app .dash-notif-list { list-style: none; margin: 0; padding: 0; }
.dash-app .dash-notif-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border-strong); }
.dash-app .dash-notif-item:last-child { border-bottom: none; }
.dash-app .dash-notif-item.is-unread { background: rgba(40,120,216,.05); margin: 0 -26px; padding-left: 26px; padding-right: 26px; border-left: 3px solid var(--blue); }
.dash-notif-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; color: var(--brand-ink); background: var(--mint); }
.dash-notif-ico svg { width: 19px; height: 19px; }
.dash-notif-ico.is-payment { color: var(--green-ink); background: var(--mint); }
.dash-notif-ico.is-message { color: var(--blue-ink); background: rgba(40,120,216,.12); }
.dash-notif-main { min-width: 0; flex: 1; }
.dash-notif-title { display: block; font-weight: 800; font-size: 1.02rem; color: var(--ink); }
a.dash-notif-title:hover { color: var(--blue-ink); text-decoration: underline; }
.dash-notif-body { margin: 4px 0 0; color: var(--muted); font-size: .95rem; }
.dash-notif-time { display: block; margin-top: 6px; color: var(--muted); font-size: .82rem; }
.dash-notif-dot { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 999px; background: var(--blue); }

/* ---- "Your site" analytics: trend line chart (token-driven polylines) ---- */
.dash-trend-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dash-trend-head .dash-section-title { margin-bottom: 0; }
.dash-trend-legend { display: flex; gap: 16px; margin: 0; }
.dash-legend-key { display: inline-flex; align-items: center; gap: 6px; font: 700 .8rem Inter, sans-serif; color: var(--muted); }
.dash-legend-dot { width: 11px; height: 3px; border-radius: 2px; }
.dash-legend-key.is-visits .dash-legend-dot { background: var(--chart-3); }
/* Leads swatch is hollow/outlined (vs the solid visits swatch) so the legend
   distinguishes the two series by shape, matching the dashed leads line. */
.dash-legend-key.is-leads .dash-legend-dot {
    background: none;
    height: 0;
    border-top: 3px dashed var(--chart-1);
    border-radius: 0;
}
.dash-trend { margin: 14px 0 0; }
.dash-trend svg { display: block; width: 100%; height: 160px; }
.dash-trend-axis { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash-trend-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dash-trend-line.is-visits { stroke: var(--chart-3); }
/* Non-color cue (1.4.1): dash the leads line so it reads as distinct from the
   solid visits line even without color (e.g. monochrome / color-blind). */
.dash-trend-line.is-leads { stroke: var(--chart-1); stroke-dasharray: 5 4; }
.dash-trend-labels { display: flex; justify-content: space-between; margin: 6px 2px 0; font-size: .76rem; color: var(--muted); }
.dash-trend-foot { margin: 12px 0 0; font-size: .86rem; color: var(--muted); }

/* ---- Top pages / referrers horizontal bars ---- */
.dash-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dash-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 2fr) auto; align-items: center; gap: 12px; }
.dash-bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .9rem Inter, sans-serif; color: var(--ink); }
.dash-bar-track { display: block; width: 100%; }
.dash-bar-track svg { display: block; width: 100%; height: 10px; }
.dash-bar-fill { fill: var(--chart-3); }
.dash-bar-fill.is-1 { fill: var(--chart-3); }
.dash-bar-fill.is-2 { fill: var(--chart-2); }
.dash-bar-count { font: 800 .9rem Inter, sans-serif; color: var(--muted); justify-self: end; }
.dash-bars-empty { margin: 0; color: var(--muted); font-size: .92rem; }

/* ---- Install / tracking snippet code block ---- */
.dash-snippet-help { margin: 0 0 14px; color: var(--muted); max-width: 62ch; }
.dash-snippet {
    margin: 0;
    padding: 14px 16px;
    background: var(--dark);
    color: #e7f0ff;
    border-radius: 12px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}
.dash-snippet code { font: 500 .86rem "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; color: inherit; background: none; }
.dash-snippet-note { margin: 12px 0 0; font-size: .82rem; color: var(--muted); }

/* ============================================================
   Pricing "build your plan" — base plan + monthly AI add-ons
   ============================================================ */
.plan-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
    margin-top: 8px;
}
.plan-base {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow-soft);
}
.plan-base-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.plan-base-head h2 { margin: 6px 0 4px; font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.plan-base-head .muted { margin: 0; max-width: 46ch; }
.plan-tag {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--brand-grad-1);
    color: var(--brand-ink);
    font: 800 .68rem Inter, Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.plan-base-price { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.plan-base-price .plan-from { font-size: .8rem; color: var(--muted); font-weight: 600; margin-right: 2px; }
.plan-base-price strong { font: 800 2rem Inter, Arial, sans-serif; color: var(--ink); letter-spacing: -.02em; }
.plan-base-price .support-unit { font-size: .9rem; color: var(--muted); }
.plan-base-list { margin: 16px 0 12px; display: grid; gap: 8px; }
.plan-base-list li { display: flex; align-items: flex-start; gap: 9px; font-size: .95rem; }

.ai-addons { margin-top: 22px; }
.ai-addons-head { margin: 0 0 12px; font: 800 1.05rem Inter, Arial, sans-serif; color: var(--brand-deep); }
.ai-addons-head .muted { font-weight: 600; font-size: .92rem; }
.ai-addon-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ai-addon {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ai-addon:hover { border-color: var(--brand); }
.ai-addon.is-on { border-color: var(--brand); background: var(--brand-grad-1); box-shadow: var(--shadow-soft); }
.ai-addon-input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; cursor: pointer; }
.ai-addon-box { display: grid; gap: 4px; }
.ai-addon-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ai-addon-row strong { font-size: .98rem; color: var(--ink); }
.ai-addon-price { color: var(--brand-ink); font-weight: 800; white-space: nowrap; }
.ai-addon-price .support-unit { font-size: .78rem; color: var(--muted); font-weight: 600; }
.ai-addon-sum { font-size: .86rem; color: var(--muted); line-height: 1.45; }
.ai-addons-foot { margin: 14px 0 0; font-size: .92rem; }

.plan-summary {
    position: sticky;
    top: 90px;
    background: linear-gradient(160deg, var(--brand-grad-1), var(--brand-grad-3));
    border: 1px solid #ddd2ea;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-soft);
    text-align: center;
}
.plan-summary-label { margin: 0; font: 800 .72rem Inter, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); }
.plan-summary-total { margin: 6px 0 2px; }
.plan-summary-total strong { font: 800 2.6rem Inter, Arial, sans-serif; color: var(--brand-deep); letter-spacing: -.02em; }
.plan-summary-total .support-unit { font-size: 1rem; color: var(--muted); }
.plan-summary-line { margin: 0 0 16px; font-size: .85rem; color: var(--muted); min-height: 2.4em; line-height: 1.4; }
.plan-summary .button { width: 100%; }
.plan-summary-note { margin: 12px 0 0; font-size: .78rem; }
@media (max-width: 880px) {
    .plan-builder { grid-template-columns: 1fr; }
    .ai-addon-list { grid-template-columns: 1fr; }
    .plan-summary { position: static; }
}

/* ============================================================
   Coded UI mockups — "we build real product", no stock imagery
   ============================================================ */
.ui-mock {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    overflow: hidden;
    width: 100%;
    max-width: 420px;
}
.ui-mock-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: #f4f1ea;
    border-bottom: 1px solid var(--line);
}
.ui-mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9d2c4; display: inline-block; }
.ui-mock-bar i:nth-child(1) { background: #ff6b5e; }
.ui-mock-bar i:nth-child(2) { background: #ffc043; }
.ui-mock-bar i:nth-child(3) { background: #2fc46b; }
.ui-mock-url { margin-left: 8px; flex: 1; height: 20px; border-radius: 999px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; padding: 0 10px; font: 600 .7rem Inter, Arial, sans-serif; color: var(--muted); }
.ui-mock-body { padding: 16px; display: grid; gap: 10px; }

/* chat widget */
.ui-mock-chat { display: grid; gap: 8px; }
.ui-mock-msg { max-width: 80%; padding: 9px 12px; border-radius: 14px; font-size: .82rem; line-height: 1.4; }
.ui-mock-msg.bot { background: #f1edf7; color: var(--ink-2); border-bottom-left-radius: 4px; justify-self: start; }
.ui-mock-msg.user { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; justify-self: end; }
.ui-mock-lead { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #cdeede; background: #effaf3; border-radius: 12px; font-size: .82rem; }
.ui-mock-lead b { color: var(--green-ink); }
.ui-mock-lead .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }

/* phone transcript */
.ui-mock-phone .ui-mock-line { display: flex; gap: 8px; align-items: baseline; font-size: .82rem; }
.ui-mock-phone .who { font-weight: 800; color: var(--brand-ink); flex: 0 0 64px; }
.ui-mock-phone .who.ai { color: var(--blue-ink); }

/* ticket queue */
.ui-mock-ticket .tk { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; font-size: .82rem; }
.ui-mock-ticket .pri { font: 800 .64rem Inter, Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.ui-mock-ticket .pri.low { background: #e7f6ef; color: var(--green-ink); }
.ui-mock-ticket .pri.med { background: #fff3da; color: #8a5d0e; }
.ui-mock-ticket .pri.high { background: #ffe7e2; color: var(--coral-ink); }
.ui-mock-ticket .tk-status { margin-left: auto; color: var(--muted); font-weight: 600; }

/* mini dashboard */
.ui-mock-dash .ui-mock-stat { font: 800 1.6rem Inter, Arial, sans-serif; color: var(--brand-deep); }
.ui-mock-dash .ui-mock-stat span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.ui-mock-bars { display: flex; align-items: flex-end; gap: 8px; height: 64px; }
.ui-mock-bars i { flex: 1; background: linear-gradient(var(--brand), var(--brand-grad-1)); border-radius: 6px 6px 0 0; display: block; }
@media (prefers-reduced-motion: reduce) { .ui-mock, .ai-addon { transition: none; } }
.ai-hero-visual { position: relative; z-index: 1; justify-self: end; width: 100%; max-width: 440px; }
@media (max-width: 860px) { .ai-hero-visual { justify-self: center; margin-top: 6px; } }

/* Hero CTAs: keep the two buttons side by side, free starter site on the left.
   flex shrink + min-width:0 lets them narrow (and wrap text) on tight laptop
   widths instead of overflowing; they stay single-line on wider screens. */
.hero-cta-row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
.hero-cta-row .button { flex: 0 1 auto; min-width: 0; text-align: center; }
.hero-cta-row .button.lg { padding: 15px 20px; font-size: 1rem; }
@media (max-width: 620px) {
    .hero-cta-row { flex-wrap: wrap; }
    .hero-cta-row .button { flex-basis: 100%; }
}

/* ============================================================
   Animated, stacked hero demo — a deck of product "frames"
   that play in, then advance to the next example.
   ============================================================ */
.swrl-demo { position: relative; width: 100%; max-width: 440px; padding-top: 16px; }
.swrl-demo-stack { position: relative; height: 322px; }
.swrl-demo-card {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; flex-direction: column;
    height: 292px; overflow: hidden;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-sm); box-shadow: var(--shadow);
    transform-origin: 50% 100%;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .45s ease;
    will-change: transform, opacity;
}
.swrl-demo-card[data-state="front"]  { transform: translateY(0)     scale(1);    opacity: 1;   z-index: 30; }
.swrl-demo-card[data-state="near"]   { transform: translateY(12px)  scale(.955); opacity: .85; z-index: 20; }
.swrl-demo-card[data-state="far"]    { transform: translateY(24px)  scale(.912); opacity: .55; z-index: 10; }
.swrl-demo-card[data-state="hidden"] { transform: translateY(24px)  scale(.912); opacity: 0;   z-index: 1; }
.swrl-demo-card[data-state="out"]    { transform: translateY(-30px) scale(.97);  opacity: 0;   z-index: 40; }

/* The frame-title pill — a small tab that names what's on screen */
.swrl-demo-pill {
    position: absolute; top: 0; left: 18px; z-index: 40;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px 5px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .94); border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(16, 16, 20, .12);
    font: 800 .68rem Inter, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase;
    color: var(--brand-ink); white-space: nowrap;
    transition: opacity .2s ease;
}
.swrl-demo-pill.is-swap { opacity: 0; }
.swrl-demo-pill .swrl-demo-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand); box-shadow: 0 0 0 3px rgba(135, 95, 170, .18);
}

.swrl-demo-screen { flex: 1; padding: 16px; overflow: hidden; display: grid; align-content: start; gap: 9px; }
.swrl-demo-screen.ui-mock-chat { gap: 8px; align-content: end; }

/* pop-in: only active while JS is driving the animation (.is-anim);
   without JS the content stays fully visible. */
.swrl-demo.is-anim .pop { opacity: 0; transform: translateY(9px) scale(.99); transition: opacity .5s ease, transform .5s ease; }
.swrl-demo.is-anim .pop.is-in { opacity: 1; transform: none; }

/* Conversion-funnel frame */
.swrl-funnel { align-content: center; gap: 14px; }
.swrl-funnel-row { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 10px; font: 700 .8rem Inter, Arial, sans-serif; }
.swrl-funnel-label { color: var(--muted); }
.swrl-funnel-track { height: 13px; border-radius: 999px; background: #f1edf7; overflow: hidden; }
.swrl-funnel-track i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--violet)); }
.swrl-demo.is-anim .swrl-funnel-track i { width: 0; transition: width .85s cubic-bezier(.22, .61, .36, 1); }
.swrl-demo.is-anim .swrl-funnel-row.is-in .swrl-funnel-track i { width: var(--w); }
.swrl-funnel-row b { font-weight: 800; color: var(--brand-deep); min-width: 44px; text-align: right; }
.swrl-funnel-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: .78rem; font-weight: 600; color: var(--muted); }

/* Auto follow-up frame */
.swrl-mail { align-content: center; gap: 11px; }
.swrl-mail-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: .8rem; color: var(--ink-2); }
.swrl-mail-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #f1edf7; color: var(--brand-ink); flex: 0 0 auto; }
.swrl-mail-from { font-weight: 700; }
.swrl-mail-tag { margin-left: auto; font: 800 .6rem Inter, Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: #fff3da; color: #8a5d0e; }
.swrl-mail-reply { padding: 11px 13px; border-radius: 12px; background: #f1edf7; color: var(--ink-2); font-size: .8rem; line-height: 1.45; }

/* Built-for-you frame */
.swrl-stack-list { align-content: center; gap: 9px; }
.swrl-stack-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font: 700 .82rem Inter, Arial, sans-serif; color: var(--ink-2); }
.swrl-stack-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-size: .72rem; flex: 0 0 auto; }
.swrl-stack-foot { margin: 4px 0 0; text-align: center; font: 800 .82rem Inter, Arial, sans-serif; color: var(--brand-deep); }

/* Progress dots */
.swrl-demo-dots { display: flex; justify-content: center; gap: 7px; margin-top: 18px; }
.swrl-demo-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--line); transition: width .3s ease, background .3s ease; }
.swrl-demo-dots i.is-on { width: 20px; background: var(--brand); }

@media (prefers-reduced-motion: reduce) {
    .swrl-demo-card, .swrl-demo.is-anim .pop, .swrl-demo.is-anim .swrl-funnel-track i, .swrl-demo-dots i, .swrl-demo-pill { transition: none; }
}

/* Upcoming-call banner (any page, signed-in client) + booking embed fallback */
.appt-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px auto 0;
    padding: 10px 16px;
    background: var(--brand-grad-1);
    border: 1px solid #ddd2ea;
    border-radius: 12px;
    font-size: .9rem;
    color: var(--brand-deep);
}
.appt-banner-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.appt-banner-text { font-weight: 600; }
.appt-banner-actions { margin-left: auto; display: flex; gap: 14px; }
.appt-banner-actions a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.calendly-inline-widget { margin: 20px 0 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.booking-fallback { margin-top: 12px; font-size: .85rem; }
.booking-fallback a { color: var(--blue); text-decoration: underline; }
.finalize-li-actions { margin: 10px 0 2px; }
.finalize-total-label { text-align: right; color: var(--muted); }
.finalize-items tfoot th[data-li-total] { font-size: 1.05rem; color: var(--ink); }
.ai-addon--static { cursor: default; }
.ai-addon--static:hover { border-color: var(--line); box-shadow: none; background: #fff; }
.ai-free-tag { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #e7f6ef; color: var(--green-ink); font: 800 .7rem Inter, Arial, sans-serif; }
.support-list li.support-free { color: var(--green-ink); font-weight: 700; }
/* Faded "not included" (✗) list under a card's deliverables — sets tier limits explicitly */
.not-included { list-style: none; padding: 0; margin: 4px 0 16px; display: grid; gap: 7px; }
.not-included li { position: relative; padding-left: 27px; font-size: .88rem; color: var(--muted); line-height: 1.4; }
.not-included li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: #efece6; }
.not-included li::after { content: "\2715"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; line-height: 18px; text-align: center; color: var(--muted); font-size: .68rem; font-weight: 700; }
/* Honest "bought separately" value stack — real à-la-carte total, struck via CSS (no <s> tag, no fake "was") */
.value-stack { margin: 2px 0 14px; font-size: .82rem; color: var(--muted); line-height: 1.4; }
.value-stack .vs-was { text-decoration: line-through; color: var(--ink-2); font-weight: 700; }
/* "Complete AI" bundle add-on — gently highlighted as the best-value pick */
.ai-addon--bundle { border-color: var(--brand); background: var(--brand-grad-1); }

/* ============================================================
   Plan wizard (/start/<plan>/): stepped card flow + running total.
   Markup + inline JS ship in plan_wizard.html; these styles render it.
   ============================================================ */
.wizard-shell { max-width: 680px; margin: 0 auto; }
.wizard-login-cue { margin: 0 0 20px; font-size: .92rem; }
.wizard-login-cue a { color: var(--brand-deep); font-weight: 700; }

.wizard-progress { display: flex; justify-content: center; gap: 10px; margin: 4px 0 24px; }
.wizard-dot { width: 40px; height: 6px; border-radius: 999px; background: var(--line); transition: background .3s ease; }
.wizard-dot.is-active { background: var(--brand); }

.wizard-step { display: none; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper-2);
    padding: 28px 26px; margin: 0 0 18px; box-shadow: var(--shadow-soft); }
.wizard-step.is-active { display: block; animation: wizardStepIn .35s cubic-bezier(.2,.7,.3,1) both; }
@keyframes wizardStepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wizard-step-title { font: 800 1.2rem Inter, sans-serif; color: var(--ink); margin: 0 0 18px; padding: 0; border: 0; }

.wizard-plan-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 14px 16px; background: rgba(135,95,170,.05); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 14px; }
.wizard-plan-line strong { font-weight: 800; }
.wizard-plan-price { font: 800 1.15rem Inter, sans-serif; white-space: nowrap; }

.wizard-included { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: var(--paper-2); }
.wizard-included > summary { cursor: pointer; font: 700 .9rem Inter, sans-serif; color: var(--brand-deep); padding: 12px 0; list-style: none; }
.wizard-included > summary::-webkit-details-marker { display: none; }
.wizard-included > summary::before { content: "\25B8"; display: inline-block; margin-right: 8px; transition: transform .2s ease; }
.wizard-included[open] > summary::before { transform: rotate(90deg); }
.wizard-included[open] > summary { border-bottom: 1px solid var(--line); }
.wizard-included .check-list { margin: 12px 0 14px; }

.wizard-addons-head { font: 700 .95rem Inter, sans-serif; color: var(--ink-2); margin: 6px 0 12px; }
.wizard-addons { display: grid; gap: 10px; margin: 0; }
.wizard-addon { display: block; position: relative; border: 1.5px solid var(--line); border-radius: 14px;
    padding: 14px 16px 14px 46px; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.wizard-addon:hover { border-color: var(--brand); }
.wizard-addon > input[type=checkbox] { position: absolute; left: 16px; top: 15px; width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.wizard-addon.is-on { border-color: var(--brand); background: rgba(135,95,170,.07); box-shadow: inset 0 0 0 1px var(--brand); }
.wizard-addon-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wizard-addon-row strong { font-weight: 800; }
.wizard-addon-price { font-weight: 800; white-space: nowrap; }
.wizard-addon-sum { display: block; color: var(--muted); font-size: .88rem; line-height: 1.42; margin-top: 4px; }
.wizard-addon--bundle { border-style: dashed; }
.wizard-addon--included { padding-left: 16px; background: #f3faf6; border-color: #cdeadd; cursor: default; }
.wizard-addon--included .wizard-addon-row { flex-wrap: wrap; }
.wizard-addon.is-folded { opacity: .5; }
.wizard-bundle-members { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.wizard-bundle-member { font-size: .8rem; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }

.wizard-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wizard-choice { display: block; position: relative; border: 1.5px solid var(--line); border-radius: 14px;
    padding: 16px 16px 16px 46px; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.wizard-choice:hover { border-color: var(--brand); }
.wizard-choice > input[type=radio] { position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.wizard-choice:has(input:checked) { border-color: var(--brand); background: rgba(135,95,170,.07); box-shadow: inset 0 0 0 1px var(--brand); }
.wizard-choice-body strong { display: block; font-weight: 800; }
.wizard-choice-body .muted { display: block; font-size: .86rem; margin-top: 3px; }
.wizard-subchoice { margin-top: 18px; }
.wizard-subchoice .wizard-addons-head { margin-top: 0; }
.wizard-branch-note { margin-top: 16px; padding: 14px 16px; background: rgba(135,95,170,.05);
    border: 1px solid var(--line); border-radius: 12px; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }

.wizard-step-nav { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.wizard-step-nav .button { margin: 0; width: auto; }
.wizard-step-nav [data-wizard-next], .wizard-step-nav [type=submit] { margin-left: auto; }
.wizard-step .form-legal { margin-top: 14px; }
.wizard-step [data-wizard-error] { color: var(--red-ink, #c0392b); font-size: .9rem; margin-top: 12px; }

.wizard-summary { border: 1.5px solid var(--brand); border-radius: var(--radius); background: var(--paper-2);
    padding: 18px 20px; box-shadow: var(--shadow-soft); }
.wizard-summary-title { font: 800 .95rem Inter, sans-serif; color: var(--brand-deep); margin: 0 0 12px; }
.wizard-summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--ink-2); padding: 5px 0; }
.wizard-summary-total { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 700; }
.wizard-summary-total strong { font: 800 1.2rem Inter, sans-serif; color: var(--ink); }
.wizard-summary-line s, .wizard-price-was { color: var(--muted); }
.wizard-summary-line--free span:last-child { white-space: nowrap; }
.wizard-free { color: var(--green-ink); font-weight: 800; font-size: .78rem; letter-spacing: .02em; margin-left: 4px; }
.wizard-price-was { font-weight: 600; margin-right: 3px; }
.wizard-addon-savings { display: inline-block; margin-top: 4px; color: var(--green-ink); font-weight: 700; }

/* Two-column on desktop: steps on the left, running-total summary sticky on the right. */
@media (min-width: 860px) {
    .wrap.wizard-shell { width: min(920px, calc(100% - 38px)); max-width: none; }
    form[data-wizard] { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
    .wizard-steps { min-width: 0; }
    .wizard-summary { position: sticky; top: 96px; }
}
@media (max-width: 859px) { .wizard-summary { margin-top: 18px; } }

@media (max-width: 620px) {
    .wizard-choice-grid { grid-template-columns: 1fr; }
    .wizard-addon-row { flex-wrap: wrap; }
    .wizard-step { padding: 22px 18px; }
}

/* Rotating hero value phrase: the changing clause in accent blue, cycled by JS. */
.hero-rotate .hero-rotator { color: var(--blue-ink, #1a5fb4); transition: opacity .28s ease; }
.hero-rotate .hero-rotator.is-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero-rotate .hero-rotator { transition: none; } }

/* ============================================================
   Website checkup (audit_report.html):
   1) 5-step animated progress tracker for the in-progress state.
      Statuses map queued/awaiting_verification->1, scanning->2,
      researching->3, scoring->4, building_report->5; site.js flips
      .is-active/.is-done as the poll advances.
   2) Concise results view (score line, numbered findings accordion,
      "Fix my website now" CTA) for WEBSITE-type complete reports.
   Micro-animations are pure CSS on inline SVG parts; every part is
   fully drawn at rest so idle/done steps, no-JS, and reduced-motion
   users see static art instead of blank icons.
   ============================================================ */
.checkup-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; text-align: center; }
.checkup-step { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 16px 8px 12px; color: var(--muted); background: #f4f5f1; border: 1.5px solid transparent; border-radius: 16px; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.checkup-step.is-active { color: var(--ink); background: white; border-color: rgba(19, 163, 111, .45); box-shadow: var(--shadow-soft); }
.checkup-step.is-done { color: #0d6845; background: var(--mint); }
.checkup-step-label { font-size: .76rem; font-weight: 800; line-height: 1.3; }
.checkup-step-art { display: grid; place-items: center; width: 56px; height: 46px; }
.checkup-step-art svg { width: 100%; height: 100%; overflow: visible; }
.checkup-step.is-active .checkup-step-art { color: var(--green); }
.checkup-step-check { position: absolute; top: -8px; right: -6px; display: grid; place-items: center; width: 21px; height: 21px; color: white; background: var(--green); border: 2px solid white; border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.4, .64, 1); }
.checkup-step-check svg { width: 11px; height: 11px; }
.checkup-step.is-done .checkup-step-check { opacity: 1; transform: none; }

/* Step 1: map pin drops in, ripple spreads at its base. */
.checkup-step .step-pin { transform-box: fill-box; transform-origin: 50% 100%; }
.checkup-step.is-active .step-pin { animation: checkupPinDrop 2s cubic-bezier(.25, 1.2, .4, 1) infinite; }
.checkup-step .step-pin-ripple { opacity: 0; transform-box: fill-box; transform-origin: center; }
.checkup-step.is-active .step-pin-ripple { animation: checkupPinRipple 2s ease-out infinite; }
@keyframes checkupPinDrop { 0% { transform: translateY(-12px); opacity: 0; } 22% { transform: none; opacity: 1; } 88% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes checkupPinRipple { 0%, 18% { transform: scale(.35); opacity: 0; } 30% { opacity: .75; } 78%, 100% { transform: scale(1.45); opacity: 0; } }

/* Step 2: scan line sweeps down the browser frame. */
.checkup-step .step-scan-beam { stroke: var(--green); }
.checkup-step.is-active .step-scan-beam { animation: checkupScanSweep 1.7s ease-in-out infinite alternate; }
@keyframes checkupScanSweep { from { transform: translateY(0); } to { transform: translateY(15px); } }

/* Step 3: radar sweep rotates, competitor blips pulse. */
.checkup-step .step-radar-sweep { transform-box: view-box; transform-origin: 50% 50%; }
.checkup-step.is-active .step-radar-sweep { animation: checkupRadarSweep 2.4s linear infinite; }
@keyframes checkupRadarSweep { to { transform: rotate(360deg); } }
.checkup-step .step-radar-blip { fill: currentColor; stroke: none; }
.checkup-step.is-active .step-radar-blip { opacity: .25; animation: checkupRadarBlip 2.4s ease-in-out infinite; }
.checkup-step.is-active .step-radar-blip-2 { animation-delay: .8s; }
.checkup-step.is-active .step-radar-blip-3 { animation-delay: 1.5s; }
@keyframes checkupRadarBlip { 0%, 45%, 100% { opacity: .25; } 12% { opacity: 1; } }

/* Step 4: score bars grow from the baseline (grow-bar, vertical). */
.checkup-step .step-score-bar { fill: currentColor; stroke: none; transform-box: fill-box; transform-origin: 50% 100%; }
.checkup-step.is-active .step-score-bar { animation: checkupBarGrow 1.9s cubic-bezier(.22, 1, .36, 1) infinite; }
.checkup-step.is-active .step-score-bar-2 { animation-delay: .12s; }
.checkup-step.is-active .step-score-bar-3 { animation-delay: .24s; }
@keyframes checkupBarGrow { 0% { transform: scaleY(0); } 30% { transform: scaleY(1); } 85% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

/* Step 5: report blocks assemble into place. */
.checkup-step .step-asm-block { fill: currentColor; stroke: none; opacity: .9; transform-box: fill-box; transform-origin: center; }
.checkup-step.is-active .step-asm-block { animation: checkupAssemble 2.1s cubic-bezier(.25, 1, .4, 1) infinite; }
.checkup-step.is-active .step-asm-block-2 { animation-delay: .18s; }
.checkup-step.is-active .step-asm-block-3 { animation-delay: .36s; }
@keyframes checkupAssemble { 0% { transform: translateY(7px); opacity: 0; } 22% { transform: none; opacity: .9; } 85% { transform: none; opacity: .9; } 100% { transform: none; opacity: 0; } }

@media (max-width: 640px) {
    .checkup-steps { grid-template-columns: 1fr; gap: 8px; text-align: left; }
    .checkup-step { grid-template-columns: 44px 1fr; justify-items: start; align-items: center; gap: 12px; padding: 10px 14px; }
    .checkup-step-art { width: 44px; height: 36px; }
    .checkup-step-check { top: 50%; right: 12px; transform: translateY(-50%) scale(.4); }
    .checkup-step.is-done .checkup-step-check { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .checkup-step .step-pin, .checkup-step .step-pin-ripple, .checkup-step .step-scan-beam, .checkup-step .step-radar-sweep, .checkup-step .step-radar-blip, .checkup-step .step-score-bar, .checkup-step .step-asm-block { animation: none !important; }
    .checkup-step, .checkup-step-check { transition: none; }
}

/* Concise checkup results (WEBSITE-type complete reports). */
.checkup-result { max-width: 860px; }
.checkup-score-card { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 14px; padding: 18px 22px; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-soft); }
.checkup-score-label { color: var(--muted); font-weight: 800; }
.checkup-score-value { font: 800 2.6rem/1 Inter, Arial, sans-serif; letter-spacing: -.02em; }
.checkup-score-value small { color: var(--muted); font-size: 1.15rem; font-weight: 800; }
.finding-num { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; color: #0d6845; background: var(--mint); border-radius: 50%; font: 800 .85rem Inter, Arial, sans-serif; }
.checkup-findings .finding-card { background: white; border: 1px solid var(--line); }
.checkup-fix { margin-top: 22px; padding: 26px 22px; background: linear-gradient(150deg, #fdfcf7, #f1f8f3); border: 1px solid #d9e9de; border-radius: 18px; text-align: center; }
.checkup-fix .button { width: min(100%, 420px); }
.checkup-fix-note { margin: 10px 0 0; color: var(--muted); font-size: .92rem; }
.checkup-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 16px; text-align: center; }

/* Upgrade-path variant of the free preview page: quiet one-time-setup link. */
.free-site-alt { margin-top: 12px; font-size: .95rem; }

/* =====================================================================
   AI-BUILT-IN OFFER REWORK (2026-07-01) — see docs/offer-rework-build-spec.md
   Outcome-first plan cards, the "3 AI systems" section, the Scale
   phone-agent crown-jewel callout, and the wizard read-only "AI included"
   block. Uses only existing tokens (--brand, --ink, --muted, --line,
   --paper-2, --radius, etc.) so it themes with the rest of the sheet.
   ===================================================================== */

/* --- Per-tier outcome headline + "who it's for" line on each plan card --- */
/* .support-outcome sits between the plan <h3> and the summary line; it is the
   escalating CAPTURE -> NURTURE -> CLOSE promise, so it reads big and brand. */
.support-outcome {
    font: 700 1.12rem Inter, sans-serif;
    line-height: 1.3;
    color: var(--brand-ink);
    margin: .25rem 0 .35rem;
}
/* .support-for is the small "who it's for" one-liner under the summary. */
.support-for {
    font-size: .85rem;
    font-style: italic;
    color: var(--muted);
    line-height: 1.45;
    margin: .15rem 0 .6rem;
}

/* --- The Scale card's phone-agent CROWN-JEWEL callout (above its bullets) --- */
/* An inset accent panel inside the plan card, clearly heavier than a bullet. */
.phone-agent-callout {
    position: relative;
    margin: 4px 0 18px;
    padding: 14px 16px 14px 17px;
    background: linear-gradient(135deg, var(--brand-grad-1), var(--brand-grad-3));
    border: 1px solid var(--brand);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
}
.phone-agent-label {
    display: inline-block;
    margin: 0 0 6px;
    font: 800 .68rem Inter, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-ink);
}
.phone-agent-headline {
    margin: 0 0 8px;
    font: 800 1.02rem Inter, sans-serif;
    line-height: 1.32;
    color: var(--ink);
}
.phone-agent-body {
    margin: 0 0 8px;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.phone-agent-proof {
    margin: 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--muted);
}

/* --- The "3 AI systems working for you" section (own block below cards) --- */
.ai-systems-section { padding-top: 8px; }
.ai-systems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
    margin-top: 18px;
}
.ai-system-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}
.ai-system-name {
    font: 800 1.18rem Inter, sans-serif;
    color: var(--ink);
    margin: 0 0 6px;
}
.ai-system-job {
    font: 700 .98rem Inter, sans-serif;
    color: var(--brand-ink);
    line-height: 1.4;
    margin: 0 0 12px;
}
.ai-system-impact {
    font-size: .92rem;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0 0 12px;
}
.ai-system-example {
    font-size: .88rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--muted);
    margin: 0 0 14px;
}
/* Push the "Included from X" eyebrow to the card bottom so the 3 align. */
.ai-system-from {
    margin: auto 0 0;
    align-self: flex-start;
    padding: 4px 12px;
    font: 800 .7rem Inter, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brand-ink);
    background: var(--brand-grad-1);
    border-radius: 999px;
}

/* --- Crown-jewel card (Phone & Text): mirror the featured plan-card ring --- */
.ai-system--crown {
    border: 1.5px solid var(--brand);
    box-shadow: 0 18px 46px rgba(135, 95, 170, .16);
}
/* Colored top ribbon, matching .build-card::before on featured plan cards. */
.ai-system--crown::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand);
    border-radius: var(--radius) var(--radius) 0 0;
}
.ai-system--crown .ai-system-from { background: var(--brand); color: #fff; }
/* "The crown jewel" ribbon pill, mirroring .build-flag placement/styling. */
.ai-system-crown-tag {
    position: absolute;
    top: -13px;
    left: 22px;
    padding: 5px 14px;
    background: var(--brand);
    color: #fff;
    font: 800 .7rem Inter, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
}

/* --- Wizard Step 1: read-only "AI built into your plan" block --- */
/* Mirrors .wizard-addon--included (soft green surface, no checkbox affordance). */
.wizard-included-ai { margin: 6px 0 4px; }
.wizard-included-ai-head {
    font: 700 .95rem Inter, sans-serif;
    color: var(--ink-2);
    margin: 6px 0 10px;
}
.wizard-included-ai-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.wizard-included-ai-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: #f3faf6;
    border: 1.5px solid #cdeadd;
    border-radius: 14px;
}
.wizard-included-ai-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
.wizard-included-ai-row strong { font-weight: 800; }
.wizard-included-ai-sum {
    font-size: .88rem;
    line-height: 1.42;
}

/* --- Getting-started reassurance chip (reuses .addon-chip; hook for tweaks) --- */
.start-note-chip .check-list { margin: 12px 0 14px; }

/* Collapse the 3-up AI-systems grid to one column on mobile (mirror .support-grid). */
@media (max-width: 860px) {
    .ai-systems-grid { grid-template-columns: 1fr; }
}