: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; }

/* Private build journey: one status, one inline preview, one publish action. */
.free-site-head { padding-top: clamp(34px, 6vw, 70px); padding-bottom: 8px; }
.free-site-head.is-building {
  width: min(1120px, calc(100% - 38px));
  max-width: none;
  padding-top: clamp(28px, 5vw, 54px);
}
.free-site-head.is-building h1 {
  max-width: 900px;
  font-size: clamp(2.45rem, 6vw, 4.45rem);
  line-height: 1;
}
.free-site-head.is-building .lead { max-width: 800px; }
.free-site-preview-card {
  margin: clamp(28px, 5vw, 58px) auto 18px; padding: clamp(16px, 2.5vw, 26px);
  background: white; border: 1px solid #d9e6e0; border-radius: 24px; box-shadow: 0 22px 60px rgba(29, 70, 54, .1);
}
.free-site-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.free-site-preview-head h2 { margin: 3px 0 0; font-size: clamp(1.3rem, 2.8vw, 2rem); }
.free-site-preview-head .eyebrow { margin: 0; }
.free-site-preview-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.free-site-preview-actions .button.secondary { min-height: 0; padding: 9px 14px; font-size: .88rem; }
.free-site-badge, .free-site-timer { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.free-site-badge { color: #0a6b3f; background: var(--mint); }
.free-site-timer { color: var(--muted); background: #f4f6f5; }
.free-site-iframe { width: 100%; height: min(82vh, 920px); min-height: 680px; border: 0; border-radius: 16px; background: #fff; display: block; }
.free-site-iframe-shell { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #f4f7f5; }
.free-site-iframe-shell .free-site-iframe { border-radius: inherit; transition: opacity .5s ease, transform .65s cubic-bezier(.16,1,.3,1); }
.free-site-iframe-shell.is-ai-ready .free-site-iframe { opacity: .72; transform: scale(.996); }
.free-site-iframe-shell.is-ai-ready .free-site-preview-sheen { opacity: 0; transition: opacity .45s ease; }
.free-site-ai-badge { display: inline-flex; align-items: center; gap: 6px; color: #1a5fb4 !important; background: #eef4ff !important; }
.free-site-ai-badge i { display: inline-block; color: var(--blue); font-style: normal; animation: buildSparkle 1.5s ease-in-out infinite; }
.free-site-preview-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border: 1px solid rgba(61, 112, 210, .24); border-radius: inherit; }
.free-site-preview-sheen::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 18%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.56), rgba(175,220,255,.22), transparent); transform: skewX(-12deg); animation: previewPolishSweep 3.6s ease-in-out infinite; }
@keyframes buildSparkle { 0%, 100% { transform: scale(.72) rotate(0deg); opacity: .48; } 50% { transform: scale(1.2) rotate(18deg); opacity: 1; } }
@keyframes previewPolishSweep { 0%, 16% { left: -30%; opacity: 0; } 30% { opacity: 1; } 72%, 100% { left: 112%; opacity: 0; } }
.free-site-publish-card {
  margin-top: clamp(24px, 4vw, 42px); padding: clamp(22px, 4vw, 38px);
  background: linear-gradient(145deg, #f8fdf9, #f4f8ff); border: 1px solid #d3e5dc; border-radius: 24px;
  box-shadow: 0 18px 48px rgba(33, 76, 59, .08);
}
.free-site-publish-card [hidden] { display: none !important; }
.free-site-publish-card h2 { margin: 4px 0 9px; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.publish-confirmation {
  display: flex; align-items: flex-start; gap: 11px; margin: 20px 0 18px; padding: 14px 16px;
  background: white; border: 1px solid var(--line); border-radius: 14px; color: var(--ink-2); cursor: pointer;
}
.publish-confirmation input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); }
.publish-action { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.publish-feedback { min-height: 1.35em; margin: 12px 0 0; color: #8a4428; font-weight: 700; }
.publish-state { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.publish-state p { margin: 4px 0 0; color: var(--muted); }
.publish-state .eyebrow { margin: 0; color: var(--green); }
.publish-state-icon {
  display: grid; place-items: center; width: 48px; height: 48px; color: white;
  background: var(--green); border-radius: 50%; font: 800 1.2rem Inter, Arial, sans-serif;
}
.publish-state-icon.is-working { position: relative; background: #edf4ff; border: 4px solid #cddcf4; }
.publish-state-icon.is-working::after {
  content: ""; position: absolute; inset: -4px; border: 4px solid transparent; border-top-color: #4b82dc; border-radius: 50%;
  animation: publishSpin 1s linear infinite;
}
@keyframes publishSpin { to { transform: rotate(360deg); } }
.free-site-next {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  margin-top: 22px; margin-bottom: 70px; padding: 22px 0; border-top: 1px solid var(--line);
}
.free-site-next h2 { margin: 3px 0 7px; font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.free-site-next p:not(.eyebrow) { max-width: 660px; margin: 0; color: var(--muted); }
@media (max-width: 720px) {
  .free-site-preview-head, .free-site-next { align-items: flex-start; flex-direction: column; }
  .free-site-preview-actions { justify-content: flex-start; }
  .free-site-preview-card { width: min(100% - 20px, 1120px); padding: 12px; border-radius: 18px; }
  .publish-state { grid-template-columns: 42px 1fr; }
  .publish-state-icon { width: 40px; height: 40px; }
}

/* Live website-build studio. Every visual state is driven by the real
   AuditStatus value; the animation never invents an extra pipeline stage. */
.website-build-studio { position: relative; width: min(1120px, calc(100% - 38px)); margin: 28px auto 18px; padding: clamp(22px, 4vw, 42px); overflow: hidden; background:
    radial-gradient(circle at 12% 10%, rgba(152, 226, 195, .28), transparent 32%),
    radial-gradient(circle at 90% 8%, rgba(153, 195, 255, .24), transparent 30%),
    linear-gradient(145deg, #fbfffc, #f7fafc 68%, #f4f8f6);
    border: 1px solid #d7e7df; border-radius: 30px; box-shadow: 0 24px 70px rgba(33, 76, 59, .12); transition: opacity .55s ease, transform .55s ease; }
.website-build-studio::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .48; background-image: radial-gradient(circle, rgba(38, 108, 79, .12) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom, #000, transparent 68%); }
.website-build-studio > * { position: relative; z-index: 1; }
.website-build-studio-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.website-build-studio-head .eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.website-build-studio-head h2 { margin: 0 0 8px; font-size: clamp(1.55rem, 3.3vw, 2.35rem); letter-spacing: -.035em; }
.website-build-studio-head p:last-child { max-width: 690px; margin: 0; color: var(--muted); }
.build-live-dot { display: inline-block; width: 9px; height: 9px; background: var(--green); border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 3px rgba(19, 163, 111, .2); animation: buildLivePulse 1.8s ease-out infinite; }
@keyframes buildLivePulse { 0% { box-shadow: 0 0 0 0 rgba(19,163,111,.34); } 70%, 100% { box-shadow: 0 0 0 8px rgba(19,163,111,0); } }
.build-progress-summary { flex: 0 0 auto; min-width: 122px; padding: 12px 15px; color: #15523c; background: rgba(255,255,255,.84); border: 1px solid rgba(19,163,111,.23); border-radius: 16px; box-shadow: 0 8px 24px rgba(33,76,59,.07); text-align: right; }
.build-progress-summary strong, .build-progress-summary span { display: block; }
.build-progress-summary strong { font: 800 1.08rem Inter, sans-serif; }
.build-progress-summary span { margin-top: 2px; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.website-build-meter .progress-track { height: 9px; margin: 24px 0 26px; background: rgba(25,69,53,.1); }
.website-build-meter .progress-track i { position: relative; overflow: hidden; background: linear-gradient(90deg, #34a877, #4b82dc, #34a877); background-size: 200% 100%; transition: width .7s cubic-bezier(.16,1,.3,1); animation: buildMeterFlow 2.4s linear infinite; }
.website-build-meter .progress-track i::after { content: ""; position: absolute; top: 0; right: 0; width: 18px; height: 100%; background: rgba(255,255,255,.68); filter: blur(4px); }
@keyframes buildMeterFlow { to { background-position: -200% 0; } }
.website-build-studio-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, .72fr); gap: 24px; align-items: stretch; }

.build-browser { min-width: 0; overflow: hidden; background: rgba(255,255,255,.88); border: 1px solid #cbdcd4; border-radius: 20px; box-shadow: 0 20px 44px rgba(36,72,58,.13); }
.build-browser-bar { display: flex; align-items: center; gap: 7px; min-height: 43px; padding: 9px 12px; background: #f7faf8; border-bottom: 1px solid #dce6e1; }
.build-browser-bar > span { width: 9px; height: 9px; background: #cbd8d2; border-radius: 50%; }
.build-browser-bar > span:first-child { background: #ffaaa1; }
.build-browser-bar > span:nth-child(2) { background: #f5d27b; }
.build-browser-bar > span:nth-child(3) { background: #8dd2a9; }
.build-browser-address { flex: 1; min-width: 0; margin-left: 4px; padding: 5px 12px; overflow: hidden; color: #62776d; background: white; border: 1px solid #e0e8e4; border-radius: 9px; font-size: .7rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.build-browser-ai { display: grid; place-items: center; width: 28px; height: 24px; color: #1a5fb4; background: #e9f1ff; border-radius: 8px; font: 800 .66rem Inter, sans-serif; letter-spacing: .04em; }
.build-browser-canvas { position: relative; min-height: 390px; overflow: hidden; background:
    linear-gradient(130deg, rgba(232,247,239,.9), rgba(244,248,255,.92)),
    white; }
.build-browser-canvas::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px); background-size: 26px 26px; opacity: .42; }

.build-queue-pulse { position: absolute; top: 50%; left: 50%; display: flex; gap: 8px; opacity: 0; transform: translate(-50%, -50%); transition: opacity .35s ease; }
.build-queue-pulse i { width: 12px; height: 12px; background: var(--green); border-radius: 50%; animation: buildQueueDot 1.25s ease-in-out infinite; }
.build-queue-pulse i:nth-child(2) { animation-delay: .16s; }
.build-queue-pulse i:nth-child(3) { animation-delay: .32s; }
@keyframes buildQueueDot { 0%, 70%, 100% { opacity: .3; transform: translateY(0) scale(.82); } 35% { opacity: 1; transform: translateY(-9px) scale(1); } }
.website-build-studio[data-build-status="awaiting_verification"] .build-queue-pulse,
.website-build-studio[data-build-status="queued"] .build-queue-pulse { opacity: 1; }

.build-source-site { position: absolute; inset: 30px 8%; padding: 24px; opacity: 0; background: rgba(255,255,255,.94); border: 1px solid #d3dcd8; border-radius: 13px; box-shadow: 0 16px 35px rgba(38,69,57,.12); transform: translateY(10px) scale(.985); transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.build-source-nav, .build-source-copy, .build-source-grid i { background: #d7dedb; border-radius: 8px; }
.build-source-nav { width: 38%; height: 14px; }
.build-source-hero { width: 100%; height: 116px; margin: 22px 0 16px; background: linear-gradient(135deg, #e0e6e3, #cfd8d4); border-radius: 11px; }
.build-source-copy { width: 72%; height: 11px; }
.build-source-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.build-source-grid i { height: 80px; }
.build-scan-beam { position: absolute; left: 3%; right: 3%; top: 8%; height: 3px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(19,163,111,.9), #63a4ff, transparent); border-radius: 99px; box-shadow: 0 0 14px rgba(19,163,111,.48), 0 0 30px rgba(75,130,220,.2); }
.website-build-studio[data-build-kind="upgrade"][data-build-status="scanning"] .build-source-site { opacity: 1; transform: none; }
.website-build-studio[data-build-kind="upgrade"][data-build-status="scanning"] .build-scan-beam { opacity: 1; animation: buildSourceScan 2.2s ease-in-out infinite; }
@keyframes buildSourceScan { 0%, 8% { top: 8%; } 78%, 100% { top: 90%; } }

.build-blueprint { position: absolute; inset: 24px 5%; overflow: hidden; opacity: 0; background: rgba(255,255,255,.95); border: 1px solid #d4e1db; border-radius: 14px; box-shadow: 0 16px 35px rgba(38,69,57,.11); transform: translateY(14px) scale(.98); transition: opacity .55s ease, transform .65s cubic-bezier(.16,1,.3,1), border-color .35s ease; }
.build-blueprint-grid { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(55,130,98,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(55,130,98,.14) 1px, transparent 1px); background-size: 18px 18px; }
.build-site-nav, .build-site-hero, .build-site-cards, .build-site-footer { position: absolute; z-index: 1; }
.build-site-nav { top: 8%; left: 6%; right: 6%; display: flex; align-items: center; gap: 8px; }
.build-site-nav i { width: 8%; min-width: 20px; height: 6px; background: #bad3c8; border-radius: 99px; transition: background .45s ease; }
.build-site-nav .build-site-logo { width: 26%; height: 13px; margin-right: auto; background: #6bb897; }
.build-site-hero { top: 22%; left: 6%; right: 6%; display: grid; grid-template-columns: 1.2fr .75fr; gap: 8%; align-items: center; }
.build-site-hero > div { display: grid; gap: 8px; }
.build-site-hero i { display: block; border-radius: 99px; }
.build-site-kicker { width: 30%; height: 6px; background: #75ba9b; }
.build-site-title { width: 94%; height: 17px; background: #275e49; }
.build-site-title.short { width: 66%; }
.build-site-copy { width: 88%; height: 8px; background: #b8cbc3; }
.build-site-copy.short { width: 73%; }
.build-site-button { width: 34%; height: 20px; margin-top: 4px; background: #2ea778; }
.build-site-photo { width: 100%; height: 126px; background: linear-gradient(135deg, #d8eee4, #c7dcf8); border: 1px solid #b9d8ca; border-radius: 16px !important; }
.build-site-cards { left: 6%; right: 6%; bottom: 12%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; }
.build-site-cards i { height: 68px; background: #eff6f2; border: 1px solid #cbded5; border-radius: 11px; }
.build-site-footer { left: 6%; right: 6%; bottom: 5%; height: 7px; background: #d7e5df; border-radius: 99px; }
.website-build-studio[data-build-status="researching"] .build-blueprint,
.website-build-studio[data-build-status="scoring"] .build-blueprint,
.website-build-studio[data-build-status="building_report"] .build-blueprint,
.website-build-studio[data-build-status="complete"] .build-blueprint,
.website-build-studio[data-build-kind="new"][data-build-status="scanning"] .build-blueprint { opacity: 1; transform: none; }
.website-build-studio[data-build-status="researching"] .build-blueprint,
.website-build-studio[data-build-kind="new"][data-build-status="scanning"] .build-blueprint { border-color: #74b99c; }
.website-build-studio[data-build-status="researching"] .build-blueprint-grid,
.website-build-studio[data-build-kind="new"][data-build-status="scanning"] .build-blueprint-grid { animation: buildBlueprintBreathe 2.4s ease-in-out infinite; }
@keyframes buildBlueprintBreathe { 0%,100% { opacity: .18; } 50% { opacity: .58; } }
.website-build-studio[data-build-status="scoring"] .build-site-nav,
.website-build-studio[data-build-status="scoring"] .build-site-hero,
.website-build-studio[data-build-status="scoring"] .build-site-cards,
.website-build-studio[data-build-status="building_report"] .build-site-nav,
.website-build-studio[data-build-status="building_report"] .build-site-hero,
.website-build-studio[data-build-status="building_report"] .build-site-cards { animation: buildSectionIn 1.7s cubic-bezier(.16,1,.3,1) both; }
.website-build-studio[data-build-status="scoring"] .build-site-hero,
.website-build-studio[data-build-status="building_report"] .build-site-hero { animation-delay: .16s; }
.website-build-studio[data-build-status="scoring"] .build-site-cards,
.website-build-studio[data-build-status="building_report"] .build-site-cards { animation-delay: .32s; }
@keyframes buildSectionIn { 0% { opacity: .16; transform: translateY(12px); } 42%, 100% { opacity: 1; transform: none; } }
.build-polish-sweep { position: absolute; top: -20%; bottom: -20%; left: -30%; width: 18%; z-index: 3; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), rgba(121,181,255,.18), transparent); transform: skewX(-10deg); }
.website-build-studio[data-build-status="building_report"] .build-polish-sweep { opacity: 1; animation: buildPolishSweep 2.6s ease-in-out infinite; }
@keyframes buildPolishSweep { 0%, 12% { left: -30%; } 78%, 100% { left: 118%; } }
.build-ai-cursor { position: absolute; z-index: 4; width: 16px; height: 16px; opacity: 0; transform: rotate(45deg); }
.build-ai-cursor::before, .build-ai-cursor::after { content: ""; position: absolute; inset: 7px 0; background: #4b82dc; border-radius: 99px; box-shadow: 0 0 10px rgba(75,130,220,.55); }
.build-ai-cursor::after { transform: rotate(90deg); }
.build-ai-cursor span { position: absolute; inset: 4px; background: white; border-radius: 50%; }
.website-build-studio[data-build-status="researching"] .build-ai-cursor,
.website-build-studio[data-build-status="scoring"] .build-ai-cursor { opacity: 1; animation: buildCursorTravel 4.2s cubic-bezier(.45,.05,.25,1) infinite; }
@keyframes buildCursorTravel { 0% { top: 18%; left: 12%; } 28% { top: 35%; left: 72%; } 56% { top: 68%; left: 34%; } 82%,100% { top: 82%; left: 78%; } }
.build-complete-mark { position: absolute; z-index: 6; top: 50%; left: 50%; display: grid; place-items: center; width: 78px; height: 78px; color: white; background: var(--green); border: 7px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 18px 45px rgba(19,163,111,.28); opacity: 0; transform: translate(-50%, -50%) scale(.55); font: 800 2rem Inter, sans-serif; transition: opacity .3s ease, transform .55s cubic-bezier(.16,1.5,.3,1); }
.website-build-studio[data-build-status="complete"] .build-complete-mark { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.build-activity { display: flex; flex-direction: column; padding: 20px; background: rgba(255,255,255,.78); border: 1px solid rgba(45,105,80,.16); border-radius: 20px; box-shadow: 0 14px 35px rgba(37,79,62,.07); }
.build-activity-head { padding: 0 2px 14px; border-bottom: 1px solid #e0e9e5; }
.build-activity-head span, .build-activity-head strong { display: block; }
.build-activity-head span { color: var(--green-ink); font: 800 .68rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .09em; }
.build-activity-head strong { margin-top: 4px; color: var(--ink); font-size: .98rem; }
.build-activity ol { display: grid; gap: 2px; margin: 12px 0; padding: 0; list-style: none; }
.build-activity-step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 9px 7px; color: #7c8e86; border: 1px solid transparent; border-radius: 12px; transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease; }
.build-activity-step strong, .build-activity-step small { display: block; }
.build-activity-step strong { font-size: .82rem; line-height: 1.2; }
.build-activity-step small { margin-top: 2px; color: inherit; font-size: .7rem; line-height: 1.3; }
.build-activity-mark { position: relative; display: grid; place-items: center; width: 22px; height: 22px; background: #e5ece8; border: 2px solid #d6e0db; border-radius: 50%; transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.build-activity-step.is-active { color: var(--ink); background: white; border-color: rgba(75,130,220,.2); box-shadow: 0 7px 20px rgba(42,82,66,.07); transform: translateX(3px); }
.build-activity-step.is-active .build-activity-mark { background: #e8f1ff; border-color: #4b82dc; animation: buildActivityPulse 1.55s ease-out infinite; }
.build-activity-step.is-active .build-activity-mark::after { content: ""; width: 6px; height: 6px; background: #4b82dc; border-radius: 50%; }
.build-activity-step.is-done { color: #176044; }
.build-activity-step.is-done .build-activity-mark { color: white; background: var(--green); border-color: var(--green); transform: scale(1.04); }
.build-activity-step.is-done .build-activity-mark::after { content: "✓"; font: 800 .72rem Inter, sans-serif; }
@keyframes buildActivityPulse { 0% { box-shadow: 0 0 0 0 rgba(75,130,220,.28); } 75%,100% { box-shadow: 0 0 0 8px rgba(75,130,220,0); } }
.build-activity-note { margin: auto 2px 0; padding-top: 13px; color: var(--muted); border-top: 1px solid #e0e9e5; font-size: .7rem; line-height: 1.45; }
.free-site-journey.is-build-complete .website-build-studio { opacity: .9; transform: translateY(-4px) scale(.995); }

@media (max-width: 860px) {
    .website-build-studio-grid { grid-template-columns: 1fr; }
    .build-activity ol { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; padding-bottom: 7px; scrollbar-color: rgba(75,130,220,.34) transparent; scrollbar-width: thin; scroll-snap-type: x proximity; }
    .build-activity ol::-webkit-scrollbar { height: 4px; }
    .build-activity ol::-webkit-scrollbar-track { background: transparent; }
    .build-activity ol::-webkit-scrollbar-thumb { background: rgba(75,130,220,.3); border-radius: 99px; }
    .build-activity-step { min-width: 135px; scroll-snap-align: start; }
}
@media (max-width: 620px) {
    .website-build-studio { width: min(100% - 24px, 1120px); padding: 20px 14px; border-radius: 22px; }
    .website-build-studio-head { display: block; }
    .build-progress-summary { display: inline-block; min-width: 0; margin-top: 15px; text-align: left; }
    .build-browser-canvas { min-height: 295px; }
    .build-source-site { inset: 22px 5%; padding: 16px; }
    .build-source-hero { height: 82px; }
    .build-source-grid i { height: 56px; }
    .build-blueprint { inset: 18px 3.5%; }
    .build-site-photo { height: 92px; }
    .build-site-cards i { height: 52px; }
    .free-site-iframe { min-height: 570px; }
}
@media (prefers-reduced-motion: reduce) {
    .build-live-dot, .website-build-meter .progress-track i, .build-queue-pulse i,
    .build-scan-beam, .build-blueprint-grid, .build-site-nav, .build-site-hero,
    .build-site-cards, .build-polish-sweep, .build-ai-cursor, .build-activity-mark,
    .free-site-ai-badge i, .free-site-preview-sheen::after,
    .publish-state-icon.is-working::after { animation: none !important; }
    .website-build-studio, .build-source-site, .build-blueprint, .build-complete-mark,
    .build-activity-step, .build-activity-mark, .website-build-meter .progress-track i,
    .free-site-iframe-shell .free-site-iframe, .free-site-preview-sheen { transition: none !important; }
}
.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; }
    .intake-stepped .intake-step, .intake-details, textarea.afield-collapse { transition: none; }
    .intake-stepped .intake-step.is-entering,
    .intake-stepped .intake-details.is-entering,
    .intake-stepped .intake-webconfirm.is-entering { opacity: 1; transform: none; }
    .intake-dot { transition: 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; }

/* ---- low-friction multistep (find your business -> contact -> review) ----
   Shared by the checkup form, the free-website form, and book-a-call. */
.intake-progress { display: flex; gap: 7px; margin: 2px 0 16px; }
.intake-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .2s ease, transform .2s ease; }
.intake-dot.is-active { background: var(--brand); transform: scale(1.15); }
.intake-stepped .intake-step { transition: opacity .25s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1); }
.intake-stepped .intake-step.is-off { display: none; }
.intake-stepped .intake-step.is-entering,
.intake-stepped .intake-details.is-entering,
.intake-stepped .intake-webconfirm.is-entering { opacity: 0; transform: translateY(10px); }
.intake-details { transition: opacity .3s cubic-bezier(.22, 1, .36, 1), transform .35s cubic-bezier(.22, 1, .36, 1); }
.intake-details.is-collapsed { display: none; }
.intake-step:focus { outline: none; }
.intake-step-title { margin: 0 0 12px; color: var(--ink); font: 700 1rem Inter, Arial, sans-serif; }
.intake-step-copy { margin: -5px 0 14px; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.intake-step-nav { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.intake-step-nav .button { margin: 0; width: auto; }
.intake-step-nav [data-step-next] { margin-left: auto; }
.intake-step-back { padding: 6px 0; color: var(--muted); background: none; border: 0; font: 600 .82rem Inter, Arial, sans-serif; cursor: pointer; }
.intake-step-back:hover { color: var(--ink); }
.intake-manual {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 2px 0 8px;
    background: none; border: 0; color: var(--muted); font: 600 .85rem Inter, Arial, sans-serif; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
.intake-manual:hover { color: var(--ink); }
.intake-webconfirm { margin: 14px 0 4px; padding: 14px 16px; border: 1.5px solid var(--brand); border-radius: 14px; background: var(--brand-grad-1); }
.intake-webconfirm-msg { margin: 0 0 12px; color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
.intake-webconfirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.intake-webconfirm-actions .button { margin: 0; width: auto; padding: 10px 14px; font-size: .85rem; }
.intake-review-group { margin-bottom: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; }
.intake-review-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--ink); font: 700 .85rem Inter, Arial, sans-serif; }
.intake-review-edit { background: none; border: 0; color: var(--brand-ink); font: 600 .8rem Inter, Arial, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.intake-review-list { display: grid; gap: 6px; margin: 0; }
.intake-review-list > div { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; gap: 10px; font-size: .88rem; }
.intake-review-list dt { color: var(--muted); }
.intake-review-list dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.intake-review-note { color: var(--muted); font-size: .82rem; margin: 0 6px; }
.intake-photo-picker { display: grid; gap: 10px; }
.intake-photo-zone {
    display: grid; place-items: center; gap: 4px; min-height: 150px; padding: 22px;
    color: var(--ink); background: #fbfdfc; border: 1.5px dashed #adc9bc; border-radius: 16px;
    cursor: pointer; text-align: center; transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.intake-photo-zone:hover, .intake-photo-zone.is-over, .intake-photo-zone:focus-within {
    background: #f0faf5; border-color: var(--green); transform: translateY(-1px);
}
.intake-photo-icon {
    display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 3px;
    color: white; background: var(--green); border-radius: 50%; font: 500 1.5rem/1 Inter, Arial, sans-serif;
}
.intake-photo-zone strong { font: 700 .95rem Inter, Arial, sans-serif; }
.intake-photo-zone small { color: var(--muted); }
.intake-photo-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.intake-photo-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; }
.intake-photo-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .82rem; }
.intake-photo-clear { padding: 0; color: var(--green); background: none; border: 0; font: 700 .78rem Inter, Arial, sans-serif; cursor: pointer; }
.intake-photo-rights { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
@media (max-width: 520px) {
    .intake-photo-thumbs { grid-template-columns: repeat(4, 1fr); }
}
/* Optional notes render as one quiet line and grow once used. */
textarea.afield-collapse { height: 46px; min-height: 46px; overflow: hidden; resize: none; transition: height .25s cubic-bezier(.22, 1, .36, 1); }
textarea.afield-collapse:focus,
textarea.afield-collapse:not(:placeholder-shown) { height: 104px; overflow: auto; resize: vertical; }
/* Book-a-call topic cards: intake-choice cards wrapping hidden radios. */
.call-form fieldset.intake-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.call-form fieldset.intake-step > legend { padding: 0 0 12px; }
.call-topics { gap: 8px; }
.call-topic { position: relative; padding: 13px 16px; }
.call-topic input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.call-topic strong { display: block; color: var(--ink); font: 600 .93rem Inter, Arial, sans-serif; }
.call-topic:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgba(135, 95, 170, .14); }
.call-topic:has(input:checked) { border-color: var(--brand); background: var(--brand-grad-1); }
.call-topic:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
/* Readiness chips: the one-tap seriousness signal on the business step. */
.call-readiness { min-width: 0; margin: 0 0 13px; padding: 0; border: 0; }
.call-readiness > legend { padding: 0 0 7px; color: var(--ink); font: 600 .86rem Inter, Arial, sans-serif; }
.call-readiness-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.call-readiness-chip {
    position: relative; display: inline-flex; align-items: center; padding: 8px 13px;
    background: #fff; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer;
    color: var(--ink-2); font: 600 .82rem Inter, Arial, sans-serif;
    transition: border-color .14s ease, background .14s ease;
}
.call-readiness-chip input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.call-readiness-chip:hover { border-color: var(--brand); }
.call-readiness-chip:has(input:checked) { border-color: var(--brand); background: var(--brand-grad-1); color: var(--ink); }
.call-readiness-chip:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
/* Scope step: the product-selection tiles on the "I know what I want" branch. */
.scope-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scope-tile {
    position: relative; display: flex; padding: 12px 14px;
    background: #fff; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer;
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.scope-tile input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.scope-tile-body { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.scope-tag { color: var(--muted); font: 600 .7rem Inter, Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.scope-name { color: var(--ink); font: 700 .92rem Inter, Arial, sans-serif; }
.scope-price { margin-top: 2px; color: var(--brand); font: 700 .9rem Inter, Arial, sans-serif; }
.scope-unit { color: var(--muted); font-weight: 600; font-size: .78rem; }
.scope-tile:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgba(135, 95, 170, .14); transform: translateY(-1px); }
.scope-tile:has(input:checked) { border-color: var(--brand); background: var(--brand-grad-1); }
.scope-tile:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.scope-tile--featured { border-color: var(--brand); }
.scope-tile--plain .scope-name { color: var(--ink-2); font-weight: 600; }

@media (max-width: 560px) {
    .afield-row { grid-template-columns: 1fr; }
    .scope-choices { 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; }
}


/* 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; }
/* Pricing ladder: four rungs (Free / Growth / Front Desk / Custom). */
.outcome-grid.support-grid.support-grid--ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1180px) {
    .outcome-grid.support-grid.support-grid--ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .outcome-grid.support-grid.support-grid--ladder { grid-template-columns: 1fr; }
}

/* 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; }
.support-examples-label { margin: 8px 0 4px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; }
/* No nowrap: the ES setup line ("Configuración hecha por mí, $297 por única
   vez") is ~46 unbreakable chars and forces page-level horizontal scroll on
   small phones if it can't wrap. */
.upgrade-cue strong { color: var(--brand-ink); }

.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); }
/* Free-website strip on Pricing (2026-07): the loss-leader demoted from a ladder
   card to a slim disarming band above the paid menu. Reuses .own-callout. */
.free-strip { margin: 0 0 26px; }
.free-strip .button { margin-left: auto; flex-shrink: 0; }

/* Custom Builds "menu": named one-time offerings, each with a starting-at price
   and one indented example bullet. Prices are honest floors from the catalog. */
.build-menu { list-style: none; margin: 12px 0 14px; padding: 0; display: grid; gap: 10px; }
.build-menu > li { padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.build-menu > li:last-child { border-bottom: 0; padding-bottom: 0; }
.build-menu-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.build-menu-name { font-weight: 700; font-size: .93rem; line-height: 1.35; }
.build-menu-price { color: var(--green-ink); font-weight: 800; font-size: .82rem; white-space: nowrap; }
.build-menu-sub { list-style: disc; margin: 4px 0 0; padding-left: 26px; }
.build-menu-sub li { color: var(--muted); font-size: .85rem; line-height: 1.4; }

/* Honest market aside next to a founder price ("others charge" a labeled range,
   never a fictitious "was" price — FTC 16 CFR 233). */
.market-aside { margin: 12px 0 0; font-size: .82rem; color: var(--muted); }

@media (max-width: 680px) {
    .own-callout { flex-direction: column; align-items: flex-start; gap: 12px; }
    .free-strip .button { margin-left: 0; }
    .guard-chip { font-size: .82rem; }
    .build-menu-top { flex-direction: column; gap: 2px; }
}
@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; }

/* Native Google Calendar booking */
.booking-page { max-width: 920px; align-items: stretch; }
.booking-page > h1, .booking-page > .lead, .booking-page > .muted { max-width: 760px; }
.booking-slots { display: grid; gap: 22px; margin-top: 28px; }
.booking-slot-picker {
    padding: clamp(18px, 3vw, 24px);
    border: 1px solid rgba(22, 68, 49, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .86);
}
.booking-slot-picker > label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--ink);
}
.booking-slot-picker select { min-height: 52px; background-color: #fff; }
.booking-slot-picker select:focus-visible {
    border-color: var(--green);
    outline: 3px solid rgba(46, 139, 87, .28);
    outline-offset: 2px;
    box-shadow: none;
}
.booking-slot-picker-hint {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
}
.booking-empty, .booking-manage-panel {
    margin-top: 28px;
    padding: 22px;
    border: 1px solid rgba(22, 68, 49, .15);
    border-radius: 18px;
    background: #fff;
}
.booking-manage-panel summary { cursor: pointer; font-family: var(--font-display); font-weight: 800; }
.booking-manage-panel[open] summary { margin-bottom: 16px; }
.booking-cancel textarea { display: block; width: 100%; margin: 8px 0 14px; }
.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 AI-systems catalog strip (own block below the pricing cards) ---
   D30: four à-la-carte tiles (2×2) with badge tags + own prices, then the
   full-width bundle card that makes $497 the obvious pick. */
.ai-systems-section { padding-top: 8px; }
/* Pricing is a content page, not a stack of full-screen hero sections. The
   global .section rule gives every section a ~100vh min-height and vertically
   centers its content, which left short sections (the legal footer especially)
   floating in a viewport-tall empty box. Let pricing sections hug their content. */
.page-pricing .section { min-height: 0; justify-content: flex-start; }
#monthly-support { padding-top: 8px; padding-bottom: 48px; }
.ai-systems-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 22px;
    align-items: stretch;
    margin-top: 28px; /* room for the -13px badge pills on the first row */
}
.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;
}
/* The phone's proof stat + live-demo + SMS notice, pulled out of the phone
   tile into one compact full-width strip. Keeps the four à-la-carte tiles the
   same height so the shorter ones aren't left stretched with empty space.
   Spans the whole grid; sits just above the bundle card. */
.ai-demo-strip {
    grid-column: 1 / -1;
    padding: 14px 18px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.ai-demo-strip > *:last-child { margin-bottom: 0; }
.ai-demo-stat { font-size: .9rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 6px; }
.ai-demo-cta { font-size: .9rem; font-style: italic; line-height: 1.5; color: var(--muted); margin: 0 0 8px; }
.ai-demo-cta a { font-style: normal; font-weight: 700; white-space: nowrap; }
.ai-demo-sms { font-size: .72rem; line-height: 1.4; color: var(--muted); margin: 0; }
/* Bottom action row on each tile: the price eyebrow + its own scoping CTA
   (D34: every option actionable). The row, not the price, takes the
   push-to-bottom job when present. */
.ai-system-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.ai-system-act .ai-system-from { margin: 0; }
.ai-system-act .button { margin: 0; width: auto; padding: 9px 14px; font-size: .82rem; }
/* Push the price eyebrow to the card bottom so the tiles 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 (AI Front Desk): 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. Offset by the 1.5px border so the ribbon sits flush on
   the card's outer top edge and its rounded corners line up with the border's,
   instead of sitting inside the border with a mismatched seam at the corners. */
.ai-system--crown::before {
    content: "";
    position: absolute;
    top: -1.5px;
    left: -1.5px;
    right: -1.5px;
    height: 5px;
    background: var(--brand);
    border-radius: var(--radius) var(--radius) 0 0;
}
.ai-system--crown .ai-system-from { background: var(--brand); color: #fff; }
/* Badge pill sitting on every tile's top border (phone/email/chat/reviews),
   plus the bundle's crown tag — same styling, mirroring .build-flag. */
.ai-system-crown-tag,
.ai-system-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);
}
/* Tile bullets: tighter than the plan-card check-list. */
.ai-system-points { margin: 0 0 16px; gap: 8px; }
.ai-system-points li { font-size: .93rem; }
/* Honest "bought separately" sum, struck like .value-stack .vs-was. */
.ai-system-points .vs-was { text-decoration: line-through; color: var(--ink-2); font-weight: 700; }
/* Full-width bundle card: copy left, price + CTA right, stacks when narrow. */
.ai-system--bundle {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 30px;
    padding: 28px 26px 26px;
}
.ai-bundle-copy { flex: 1 1 400px; min-width: 0; }
.ai-bundle-copy .ai-system-points { margin: 0; }
.ai-bundle-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 0 0 auto;
}
.ai-bundle-cta .ai-system-from { margin: 0; }

/* --- 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 2-up AI-systems grid to one column on mobile (mirror .support-grid). */
@media (max-width: 860px) {
    .ai-systems-grid { grid-template-columns: 1fr; }
}

/* --- Setup & care panels (pricing #setup-care): the two paid hands-on lanes
   under the free website, spelled out so nobody has to fill a form to ask. --- */
.setup-care-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 880px; margin: 0 auto; }
@media (max-width: 860px) { .setup-care-grid { grid-template-columns: 1fr; } }

/* --- Email-capture modal (D20, owner-upgraded 2026-07-10): dimmed takeover
   with a right-side art panel, plus a re-open nudge above the chat launcher. */
.swrl-emodal-backdrop { position: fixed; inset: 0; z-index: 240; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(16,16,20,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s ease; }
/* display:flex would defeat the [hidden] attribute (same gotcha as
   .toolkit-modal / .swrl-chat-panel): without this, the hidden overlay is an
   invisible full-page click shield. */
.swrl-emodal-backdrop[hidden], .swrl-emodal-nudge[hidden], .swrl-emodal-fab[hidden] { display: none; }
/* During the 250ms close fade the backdrop is transparent but not yet hidden:
   without this it would transiently be that same invisible click shield. */
.swrl-emodal-backdrop:not(.is-in) { pointer-events: none; }
.swrl-emodal-backdrop.is-in { opacity: 1; }
.swrl-emodal { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; width: min(720px, 100%);
  max-height: min(92dvh, 640px); overflow: hidden; background: var(--paper); border: 1px solid var(--line);
  border-radius: 24px; box-shadow: 0 40px 90px rgba(16,16,20,.35); transform: translateY(14px) scale(.98);
  transition: transform .25s ease; }
.swrl-emodal-backdrop.is-in .swrl-emodal { transform: none; }
.swrl-emodal-body { padding: 30px 26px 24px; overflow-y: auto; max-height: min(92dvh, 640px); }
.swrl-emodal-art { display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(160deg, var(--brand-grad-1), var(--brand-grad-3)); }
.swrl-emodal-art svg { display: block; width: 100%; height: auto; flex: none; }
.swrl-emodal-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; font-size: 1.35rem;
  background: white; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; line-height: 1; }
.swrl-emodal-title { margin: 0 24px 6px 0; font-weight: 800; font-size: 1.4rem; line-height: 1.2; }
.swrl-emodal-sub { margin: 0 0 14px; font-size: .95rem; color: #4d5560; }
.swrl-emodal-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-bottom: 8px; }
.swrl-emodal-row input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; min-width: 0; background: #fff; }
.swrl-emodal-consent { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; font-size: .8rem; color: #4d5560; }
.swrl-emodal-consent input { margin-top: 2px; }
.swrl-emodal .button.full { width: 100%; }
.swrl-emodal-lock { overflow: hidden; }
/* The re-open nudge: parked above the chat launcher (60px + its 20px inset),
   below the chat's z-index so an open chat panel covers it. */
.swrl-emodal-nudge { position: fixed; right: 20px; bottom: 94px; z-index: 118; display: flex; align-items: flex-start; gap: 4px;
  max-width: 264px; padding: 10px 12px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px;
  border-bottom-right-radius: 6px; box-shadow: 0 16px 44px rgba(16,16,20,.22); opacity: 0; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease; }
.swrl-emodal-nudge.is-in { opacity: 1; transform: none; }
.swrl-emodal-nudge-open { padding: 0; font: inherit; font-size: .84rem; line-height: 1.4; text-align: left;
  color: var(--ink); background: none; border: none; cursor: pointer; }
.swrl-emodal-nudge-x { flex: none; width: 24px; height: 24px; margin: -2px -4px 0 0; font-size: 1rem; line-height: 1;
  color: var(--muted); background: none; border: none; border-radius: 50%; cursor: pointer; }
.swrl-emodal-nudge-x:hover { background: var(--soft); }
/* The bubble's quieter successor: a small round free-website button parked in
   the nudge's spot (above the chat launcher, below the chat panel's z-index). */
.swrl-emodal-fab { position: fixed; right: 20px; bottom: 94px; z-index: 118; display: flex; align-items: center;
  justify-content: center; width: 48px; height: 48px; color: #fff; background: var(--brand); border: none;
  border-radius: 50%; box-shadow: 0 14px 36px rgba(16,16,20,.28); cursor: pointer; opacity: 0;
  transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease; }
.swrl-emodal-fab.is-in { opacity: 1; transform: none; }
.swrl-emodal-fab:hover { box-shadow: 0 18px 44px rgba(16,16,20,.34); }
.swrl-emodal-fab svg { display: block; }
@media (max-width: 640px) {
  .swrl-emodal-backdrop { padding: 14px; }
  .swrl-emodal { grid-template-columns: 1fr; }
  .swrl-emodal-art { order: -1; height: 118px; flex: none; }
  .swrl-emodal-body { max-height: calc(min(92dvh, 640px) - 118px); }
  .swrl-emodal-row { grid-template-columns: 1fr; }
  .swrl-emodal-nudge { right: 14px; bottom: 86px; max-width: calc(100vw - 96px); }
  .swrl-emodal-fab { right: 14px; bottom: 86px; }
}
@media (max-height: 560px) {
  .swrl-emodal { grid-template-columns: 1fr; width: min(480px, 100%); }
  .swrl-emodal-art { display: none; }
  .swrl-emodal-body { max-height: 92dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .swrl-emodal-backdrop, .swrl-emodal, .swrl-emodal-nudge, .swrl-emodal-fab { transition: none; }
  .swrl-emodal { transform: none; }
  .swrl-emodal-nudge, .swrl-emodal-fab { transform: none; }
}

/* --- Owner photo drop box (free_site_ready) + claim boosters ------------- */
.photo-drop-zone {
  border: 2px dashed var(--border, #cdd5df);
  border-radius: 14px;
  padding: 28px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  outline-offset: 3px;
}
.photo-drop-zone.is-over,
.photo-drop-zone:hover,
.photo-drop-zone:focus-visible {
  border-color: var(--primary, #16705a);
  background: rgba(22, 112, 90, 0.06);
}
.photo-drop-zone.is-busy { opacity: 0.6; pointer-events: none; }
.photo-drop-title { margin: 0 0 4px; }
.photo-drop-hint { margin: 0; font-size: 0.85rem; opacity: 0.7; }
.photo-drop-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.photo-drop-thumb {
  width: 72px; height: 72px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--border, #cdd5df);
}
.photo-drop-status { min-height: 1.2em; font-size: 0.9rem; margin: 10px 0 0; }
.photo-drop-rights { font-size: 0.8rem; opacity: 0.65; margin-top: 10px; }
.photo-drop [data-rebuild] { margin-top: 10px; }

.claim-boosters { display: grid; gap: 10px; margin: 0 0 14px; }
.claim-boosters-lead { margin: 0; font-weight: 600; }
.claim-boosters label { display: grid; gap: 4px; font-size: 0.9rem; }
.claim-boosters input, .claim-boosters textarea { width: 100%; }
.claim-verify-nudge { font-size: 0.9rem; opacity: 0.8; }