/*
    DentalRay landing site — single plain-CSS stylesheet (no framework).

    This file is a direct, framework-free port of the previous Tailwind +
    BaseCoat build. It keeps the full 100–900 neutral & brand color theme
    and every editorial component (hero, paths, audience, benefits, forms,
    pricing, legal, footer), and adds a small hand-written "utilities"
    layer that re-implements the subset of Tailwind utility classes the
    views actually use — so the markup in /views can stay exactly as-is.

    Load it from /assets/css/app.css.
*/

/* ------------------------------------------------------------------
   DentalRay theme tokens — full gradual color scales + semantic
   aliases (previously defined in Tailwind's @theme block).
   ------------------------------------------------------------------ */
:root {
    /* ---- Neutral scale (near-paper → near-ink) ------------------ */
    --color-neutral-100: #f4f4f0;
    --color-neutral-200: #e8e8e3;
    --color-neutral-300: #d4d4ce;
    --color-neutral-400: #b0b0a8;
    --color-neutral-500: #8f8f86;
    --color-neutral-600: #6e6e66;
    --color-neutral-700: #4a4a44;
    --color-neutral-800: #262624;
    --color-neutral-900: #0a0a09;

    /* ---- Brand accent scale (teal — "ray" / medical radiology) --- */
    --color-brand-100: #CDEDFD;
    --color-brand-200: #9BD8FB;
    --color-brand-300: #69BAF4;
    --color-brand-400: #439CEA;
    --color-brand-500: #0B71DD;
    --color-brand-600: #0857BE;
    --color-brand-700: #05419F;
    --color-brand-800: #032D80;
    --color-brand-900: #02206A;

    /* ---- Semantic aliases (readable, themeable templates) ------- */
    --color-bg: var(--color-neutral-900);
    --color-surface: var(--color-neutral-800);
    --color-surface-secondary: var(--color-neutral-700);
    --color-fg: var(--color-neutral-100);
    --color-muted: var(--color-neutral-500);
    --color-line: color-mix(in srgb, var(--color-neutral-100) 22%, transparent);

    /* ---- Typography --------------------------------------------- */
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */
/* Base element defaults (see also the utilities layer below). */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* Headings use the Manrope display face, everything else uses Inter. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
}

a,
a:visited {
    color: var(--color-neutral-100);
    text-decoration: none;
}

a:hover {
    color: var(--color-neutral-300);
    text-decoration: none;
}

em {
    font-style: italic;
}

/* Global box-sizing reset (previously from Tailwind Preflight). */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------
   Utilities — plain re-implementations of the Tailwind utility classes
   used by the views, so /views markup needs no edits for layout.
   ------------------------------------------------------------------ */
/* Margins */
.m-0 {
    margin: 0;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mt-10 {
    margin-top: 2.5rem;
}

.mb-\[16px\] {
    margin-bottom: 16px;
}

/* Padding */
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.pt-4 {
    padding-top: 1rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

/* Layout */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.gap-2\.5 {
    gap: 0.625rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-y-8 {
    row-gap: 2rem;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-self-end {
    justify-self: end;
}

.block {
    display: block;
}

.hidden {
    display: none;
}

.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.w-7 {
    width: 1.75rem;
}

.h-6 {
    height: 1.5rem;
}

.h-px {
    height: 1px;
}

.bg-current {
    background-color: currentColor;
}

/* Typography */
.uppercase {
    text-transform: uppercase;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.leading-none {
    line-height: 1;
}

.leading-snug {
    line-height: 1.375;
}

.leading-relaxed {
    line-height: 1.625;
}

.text-center {
    text-align: center;
}

.text-muted {
    color: var(--color-muted);
}

.font-medium {
    font-weight: 500;
}

.font-bold {
    font-weight: 700;
}

.text-\[10px\] {
    font-size: 10px;
}

.text-\[11px\] {
    font-size: 11px;
}

.text-\[13px\] {
    font-size: 13px;
}

.text-\[14px\] {
    font-size: 14px;
}

.text-\[15px\] {
    font-size: 15px;
}

.text-\[17px\] {
    font-size: 17px;
}

/* Width constraints */
.max-w-xs {
    max-width: 20rem;
}

.max-w-sm {
    max-width: 24rem;
}

.max-w-lg {
    max-width: 32rem;
}

.max-w-xl {
    max-width: 36rem;
}

/* Responsive helpers (md = 768px breakpoint, matching Tailwind) */
@media (min-width: 768px) {
    .md\:block {
        display: block;
    }

    .md\:col-span-2 {
        grid-column: span 2 / span 2;
    }
}

/* ------------------------------------------------------------------
   Buttons — re-implementation of the BaseCoat .btn styles the views
   previously relied on (BaseCoat is no longer vendored).
   ------------------------------------------------------------------ */
.btn,
a.btn,
a:visited.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    color: var(--color-neutral-900);
    background: var(--color-neutral-100);
    transition: background 0.16s, border-color 0.16s, color 0.16s;
    white-space: nowrap;
}

.btn:hover {
    background: var(--color-neutral-300);
    color: var(--color-neutral-900);
}

.btn[data-variant="outline"] {
    background: transparent;
    color: var(--color-fg);
    border-color: var(--color-neutral-600);
}

.btn[data-variant="outline"]:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-neutral-400);
    color: var(--color-fg);
}

.btn[data-variant="ghost"] {
    background: transparent;
    color: var(--color-fg);
    border-color: transparent;
    padding: 8px;
}

.btn[data-variant="ghost"]:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-fg);
}

.btn[data-size="icon"] {
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 999px;
}

/* ------------------------------------------------------------------
   Form fields — previously styled partly by BaseCoat; standardised here
   so the standalone interest forms keep their look.
   ------------------------------------------------------------------ */
.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
}

.field input,
.field textarea,
.field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-neutral-700);
    border-radius: 8px;
    background: var(--color-neutral-800);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.4;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--color-neutral-500);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--color-brand-500);
}

.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238f8f86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 42px;
}

/* ------------------------------------------------------------------
   Mobile header / drawer — previously from BaseCoat's drawer component.
   The native <dialog> is positioned as a right-hand side drawer.
   ------------------------------------------------------------------ */
.header-menu-toggle {
    display: none;
}

.drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 90vw);
    height: 100%;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--color-line);
    background: var(--color-bg);
    color: var(--color-fg);
    overflow-y: auto;
}

.drawer article {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.drawer::backdrop {
    background: color-mix(in srgb, var(--color-bg) 70%, transparent);
    backdrop-filter: blur(4px);
}


/* ------------------------------------------------------------------
   Editorial components (built on the neutral/brand theme tokens)
   ------------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 86px;
    padding: 0 3.2vw;
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 24px;
    border-bottom: 1px solid var(--color-line);
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(16px);
}

/* Wordmark on the left, nav center, actions right — keep grid tidy */
.site-header>a:first-child {
    justify-self: start;
}

.desktop-nav {
    display: flex;
    gap: 28px;
}

.desktop-nav a {
    font-size: 11px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.12em;
    color: var(--color-fg);
    transition: color 0.16s;
    padding-bottom: 4px;
}

.desktop-nav a:hover {
    color: var(--color-muted);
}

.desktop-nav a.is-active {
    color: var(--color-fg);
    border-bottom: 1px solid var(--color-fg);
}

/* ---------- Home hero ---------------------------------------- */
.home-hero {
    position: relative;
    min-height: calc(100vh - 86px);
    overflow: hidden;
    display: grid;
    align-items: end;
    padding: 7vw 3.2vw 5vw;
    border-bottom: 1px solid var(--color-line);
}

.home-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-bg) 96%, transparent), color-mix(in srgb, var(--color-bg) 82%, transparent) 42%, color-mix(in srgb, var(--color-bg) 38%, transparent));
    pointer-events: none;
}

.hero-image {
    position: absolute;
    inset: 0;
    background-color: var(--color-bg);
    background-size: cover;
    background-position: center;
}

.hero-copy {
    position: relative;
    z-index: 2;
    max-width: 990px;
}

.hero-copy h1 {
    letter-spacing: -.005rem;
    margin: 0;
    font-size: clamp(54px, 9vw, 116px);
    font-weight: 400;
    line-height: 1.05;
}

/* ---------- Paths ("Choose where you fit") ------------------- */
.paths {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 7vw;
    padding: 10vw 3.2vw 12vw;
}

.section-intro h2,
.audience-hero h1,
.statement,
.form-heading h2,
.liability h2,
.case-heading h2,
.submission h2 {
    margin: 0;
    letter-spacing: -0.025em;
    font-size: clamp(54px, 9vw, 116px);
    font-weight: 400;
    line-height: 1.15;
}

.section-intro h2 {
    font-size: clamp(54px, 7vw, 104px);
}

.path-list {
    border-top: 1px solid var(--color-line);
}

.path-row {
    min-height: 142px;
    display: grid;
    grid-template-columns: 1fr 1fr 36px;
    gap: 24px;
    align-items: center;
    border-bottom: 1px solid var(--color-line);
    transition: padding 0.2s, background 0.2s;
}

.path-row a {
    color: var(--color-neutral-500);
}

.path-row:hover {
    padding: 0 18px;
    background: var(--color-fg);
    color: var(--color-bg);
}

.path-title {
    font-size: clamp(24px, 2.4vw, 40px);
    letter-spacing: -0.045em;
    line-height: 1.25;
}

.path-arrow {
    justify-self: end;
    font-size: 22px;
}

/* ---------- Audience pages ------------------------------------ */
.audience {
    scroll-margin-top: 86px;
}

.audience-hero {
    min-height: calc(100vh - 86px);
    padding: 7vw 3.2vw 4vw;
    display: grid;
    grid-template-columns: 1fr 0.48fr;
    gap: 3vw;
    align-items: end;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    background: radial-gradient(circle at 78% 32%, color-mix(in srgb, var(--color-fg) 8%, transparent), transparent 30%);
}

.audience-hero h1 {
    font-size: clamp(54px, 9vw, 116px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.audience-summary {
    max-width: 430px;
    margin: 0 0 1vw;
    color: var(--color-muted);
    font-size: 17px;
    line-height: 1.65;
}

.statement-wrap {
    padding: 10vw 3.2vw;
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 7vw;
    /* border-bottom: 1px solid var(--color-line); */
}

.statement {
    max-width: 1000px;
    font-family: var(--font-sans);
    font-size: clamp(38px, 5.3vw, 80px);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--color-line);
}

.benefit {
    min-height: 370px;
    padding: 44px 3.2vw;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-line);
}

.benefit:last-child {
    border-right: 0;
}

.benefit h3 {
    margin: auto 0 18px;
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.15;
}

.benefit p {
    min-height: 63px;
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* ---------- Forms ---------------------------------------------- */
.form-section {
    padding: 10vw 3.2vw;
    display: grid;
    grid-template-columns: 1fr .75fr;
    gap: 7vw;
    border-bottom: 1px solid var(--color-line);
}

.form-heading h2,
.liability h2,
.case-heading h2,
.submission h2 {
    font-size: clamp(48px, 6vw, 90px);
    line-height: 1.15;
}

.form-heading>p:last-child {
    max-width: 430px;
    margin: 38px 0 0;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.65;
}

/* Third-party (HubSpot) form container — fills the right grid column */
.hubspot-form {
    align-self: start;
}

.hubspot-form form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 18px;
    align-content: start;
}

.hubspot-form .hs-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.hubspot-form label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
}

.hubspot-form input,
.hubspot-form textarea,
.hubspot-form select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-neutral-700);
    border-radius: 8px;
    background: var(--color-neutral-800);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.4;
}

.hubspot-form input:focus,
.hubspot-form textarea:focus,
.hubspot-form select:focus {
    outline: none;
    border-color: var(--color-brand-500);
}

.hubspot-form .hs_submit {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

.hubspot-form .hs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    color: var(--color-neutral-900);
    background: var(--color-neutral-100);
    transition: background 0.16s;
    margin-left: auto;
}

.hubspot-form .hs-button:hover {
    background: var(--color-neutral-300);
}

.interest-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 18px;
    align-content: start;
}

.form-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 24px;
}

.form-actions .btn {
    margin-left: auto;
}

/* ---------- Liability / dentists ------------------------------- */
.liability {
    padding: 10vw 3.2vw;
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 7vw;
}

.cases {
    padding: 10vw 3.2vw;
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 7vw;
    border-bottom: 1px solid var(--color-line);
}

.case-list {
    border-top: 1px solid var(--color-line);
}

.case-row {
    min-height: 124px;
    display: grid;
    grid-template-columns: 64px 1fr 0.55fr 24px;
    gap: 20px;
    align-items: center;
    border-bottom: 1px solid var(--color-line);
    transition: padding 0.18s, background 0.18s;
}

.case-row:hover {
    padding: 0 16px;
    background: var(--color-fg);
    color: var(--color-bg);
}

div.case-row:hover {
    padding: 0;
    background: inherit;
    color: inherit;
}

/* Plain case rows (title + source only — no year/icon columns) */
.case-row--plain {
    grid-template-columns: 0.35fr .55fr;
}

.case-title {
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.03em;
}

/* ---------- Submission ----------------------------------------- */
.submission {
    padding: 10vw 3.2vw;
    display: grid;
    grid-template-columns: 2fr 1.5fr;
    gap: 7vw;
    border-bottom: 1px solid var(--color-line);
    align-items: center;
    justify-content: space-between;
}

.submission-card {
    padding: 54px;
    border: 1px solid var(--color-line);
    max-width: 768px;
}

.submission-kicker {
    margin: 0 0 70px;
    color: var(--color-muted);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.submission-card h3 {
    max-width: 700px;
    margin: 0 0 2rem;
    font-size: clamp(32px, 4vw, 58px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.05em;
}

.submission-card>p:not(.submission-kicker) {
    max-width: 600px;
    margin: 30px 0;
    /* color: var(--color-); */
    font-size: 16px;
    line-height: 1.65;
}

.submission-card small {
    display: block;
    margin-top: 16px;
    color: var(--color-neutral-600);
    font-size: 10px;
    letter-spacing: 0.06em;
}

/* ---------- Pricing --------------------------------------------- */
.pricing {
    padding: 10vw 3.2vw;
    border-bottom: 1px solid var(--color-line);
}

.pricing-head {
    max-width: 1440px;
    margin-bottom: 4vw;
}

.pricing-head h2 {
    margin: 0;
    font-size: clamp(48px, 6vw, 90px);
    line-height: 0.93;
    letter-spacing: -0.065em;
    font-weight: 400;
}

.pricing-head>p:not(.eyebrow-hook) {
    max-width: 990px;
    margin: 30px 0 0;
    color: var(--color-muted);
    font-size: 17px;
    line-height: 1.65;
}

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

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 34px;
    border: 1px solid var(--color-line);
    /* background: var(--color-surface); */
}

.pricing-card.is-featured {
    border-color: var(--color-fg);
    background: rgba(255, 255, 255, .05);
}

.pricing-badge {
    align-self: flex-start;
    margin-bottom: 24px;
    padding: 6px 12px;
    border: 1px solid currentColor;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pricing-tier {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    word-spacing: .5rem;
}

/* .is-featured .pricing-tier,
    .is-featured .pricing-muted {
        color: var(--color-neutral-600);
    } */

.pricing-cost {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 14px 0 6px;
}

.pricing-price {
    font-family: var(--font-display);
    font-size: clamp(40px, 4vw, 60px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
}

.pricing-unit {
    color: var(--color-muted);
    font-size: 13px;
}

.is-featured .pricing-unit {
    color: var(--color-neutral-600);
}

.pricing-note {
    margin: 0 0 24px;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.5;
}

.is-featured .pricing-note {
    color: var(--color-neutral-600);
}

.pricing-features {
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-line);
}

.pricing-features li {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-line);
    font-size: 14px;
    line-height: 1.5;
}

.is-featured .pricing-features li {
    border-color: var(--color-neutral-300);
}

.pricing-card .btn {
    margin-top: auto;
}

.pricing-disclaimer {
    margin: 48px 0 0;
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* ---------- Legal / document pages ------------------------------ */
.legal {
    max-width: 860px;
    margin: 0 auto;
    padding: 8vw 5vw 12vw;
}

.legal-head {
    margin-bottom: 56px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-line);
}

.legal-head h1 {
    margin: 12px 0 0;
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1;
}

.legal h4 {
    margin: 40px 0 16px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-fg);
}

.legal h3 {
    margin: 56px 0 16px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-fg);
}

.legal p {
    margin: 0 0 24px;
    color: var(--color-neutral-300);
    font-size: 16px;
    line-height: 1.7;
}

.legal ul {
    margin: 0 0 24px;
    padding-left: 24px;
    color: var(--color-neutral-300);
    font-size: 16px;
    line-height: 1.7;
    list-style: disc;
}

.legal li {
    margin-bottom: 8px;
}

/* ---------- Form success / error message ------------------------ */
.form-success {
    margin-bottom: 40px;
    padding: 20px 24px;
    border: 1px solid var(--color-brand-500);
    background: color-mix(in srgb, var(--color-brand-800) 40%, transparent);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-success.is-error {
    border-color: #ef4444;
    background: color-mix(in srgb, #b91c1c 30%, transparent);
}

/* ---------- Mobile header / drawer ------------------------------ */
.header-menu-toggle {
    display: none;
}

.drawer::backdrop {
    background: color-mix(in srgb, var(--color-bg) 70%, transparent);
    backdrop-filter: blur(4px);
}

.mobile-nav {
    display: flex;
    flex-direction: column;
}

.mobile-nav a {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-line);
    font-size: 18px;
    letter-spacing: -0.02em;
}

.mobile-nav a.is-active {
    color: var(--color-fg);
    font-weight: 600;
}

/* ---------- Footer ---------------------------------------------- */
.site-footer {
    min-height: 110px;
    padding: 32px 3.2vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 24px;
    border-top: 1px solid var(--color-line);
}

.site-footer a,
.site-footer a:visited {
    color: var(--color-muted);
}

.site-footer a:hover {
    color: var(--color-neutral-300);
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 800px) {
    .site-header {
        min-height: 72px;
        grid-template-columns: 1fr auto;
        padding: 0 20px;
        gap: 12px;
    }

    .desktop-nav {
        display: none;
    }

    .header-actions-desktop {
        display: none;
    }

    .header-menu-toggle {
        display: inline-flex;
    }

    .home-hero {
        min-height: 720px;
        padding: 84px 20px 40px;
        align-items: end;
    }

    .paths,
    .audience-hero,
    .statement-wrap,
    .form-section,
    .liability,
    .cases,
    .submission {
        grid-template-columns: 1fr;
    }

    .paths {
        padding: 90px 20px 100px;
    }

    .path-row {
        min-height: 124px;
        grid-template-columns: 1fr 32px;
        gap: 12px;
    }

    .path-row a,
    .path-row a:visited {
        color: var(--color-muted);
    }

    .path-row a:hover {
        color: var(--color-neutral-300);
    }

    .audience-hero {
        min-height: 660px;
        padding: 80px 20px 42px;
        gap: 28px;
        align-items: end;
    }

    .audience-summary {
        font-size: 15px;
    }

    .statement-wrap,
    .form-section,
    .liability,
    .cases,
    .submission {
        padding: 90px 20px;
    }

    .benefits {
        grid-template-columns: 1fr;
    }

    .benefit {
        min-height: 290px;
        padding: 36px 20px;
        border-right: 0;
        border-bottom: 1px solid var(--color-line);
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .benefit:last-child {
        border-bottom: 0;
    }

    .interest-form,
    .hubspot-form form {
        grid-template-columns: 1fr;
    }

    .hubspot-form .hs_submit {
        grid-column: 1;
        justify-content: flex-start;
    }

    .hubspot-form .hs-button {
        margin-left: 0;
        width: 100%;
    }

    .form-actions {
        grid-column: 1;
        align-items: flex-start;
        flex-direction: column;
    }

    .form-actions .btn {
        margin-left: 0;
        width: 100%;
    }

    .case-row {
        grid-template-columns: 48px 1fr 24px;
        min-height: 116px;
    }

    .case-row--plain {
        grid-template-columns: 1fr;
    }

    .submission-card {
        padding: 34px 24px;
    }

    .submission-kicker {
        margin-bottom: 54px;
    }

    .site-footer {
        grid-template-columns: 1fr auto;
        padding: 30px 20px;
    }
}