:root {
    /* Spacing: Stripe precision */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;
    --space-10: 96px;

    /* Radius: Stripe structural crispness */
    --radius-control: 8px;
    --radius-card: 16px;
    --radius-panel: 24px;
    --radius-pill: 999px;

    /* Typography */
    --font-14: 0.875rem;
    --font-16: 1rem;
    --font-20: 1.25rem;
    --font-28: 1.75rem;
    --font-40: 2.5rem;

    --container-max: 1180px;
    --content-max: 760px;

    /* Colors: "Apple Pro" Neo-SaaS */
    --bg: #F5F5F7;
    /* Apple system background (Zinc 100) */
    --surface: #FFFFFF;
    /* Pure white for elevated components */
    --surface-muted: #F4F4F5;
    /* Inset shaded areas */
    --surface-subtle: #FAFAFA;

    /* Inverted -> Replaced with Apple Pro Elevation separation */
    --surface-inverted: #FFFFFF;
    --surface-inverted-muted: #F9FAFB;
    --text-inverted: #1D1D1F;
    /* Apple dark gray */
    --text-inverted-muted: #636366;
    --line-inverted: #E5E5EA;

    --line: #E5E5EA;
    /* Apple structural border */
    --line-strong: #D1D1D6;

    --text: #1D1D1F;
    /* Apple dark gray */
    --text-muted: #515154;
    /* Apple secondary */
    --text-subtle: #636366;
    /* Apple tertiary */

    /* Semantic: Apple Blue Accent */
    --primary: #0066CC;
    /* Apple System Blue */
    --primary-hover: #0055BB;
    --status-ok: #34C759;
    /* Apple Green */
    --status-warn: #FF9500;
    --status-danger: #FF3B30;

    /* Shadows: Apple Premium Elevation */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-soft: 0 4px 8px -2px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    --shadow-glow: 0 0 0 4px rgba(0, 102, 204, 0.2);
    /* Massive floating shadow for the Decision Board */
    --shadow-inverted: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 20px 40px -8px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03);

    /* Interactions (Fluid Apple Physics) */
    --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    color-scheme: light;
}

body.neo-body {
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--text);
    text-decoration-color: var(--line-strong);
    text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
    text-decoration-color: var(--text);
}

p,
ul,
ol {
    margin: 0;
    color: var(--text-muted);
}

ul,
ol {
    padding-left: 1.1rem;
}

h1,
h2,
h3 {
    margin: 0;
    color: var(--text);
    font-family: inherit;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

h1 {
    font-size: clamp(2.25rem, 3.5vw, var(--font-40));
    font-weight: 800;
    letter-spacing: -0.04em;
}

h2 {
    font-size: clamp(1.5rem, 2.5vw, var(--font-28));
    letter-spacing: -0.03em;
}

h3 {
    font-size: var(--font-20);
    letter-spacing: -0.02em;
}

.font-display {
    font-family: inherit;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.app-container,
.shell {
    width: min(var(--container-max), calc(100% - (var(--space-5) * 2)));
    margin-inline: auto;
}

.app-main,
.shell--main {
    display: grid;
    gap: var(--space-5);
    padding-block: var(--space-5) var(--space-8);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    border-bottom: 1px solid var(--line);
    background: rgba(244, 244, 245, 0.94);
    backdrop-filter: blur(6px);
}

.app-header-row,
.shell--header {
    min-height: 72px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-4);
    align-items: center;
    padding-block: var(--space-3);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    min-width: 0;
}

.brand-mark {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-14);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.brand-copy {
    display: grid;
    gap: 2px;
}

.brand-copy strong {
    font-size: var(--font-14);
    font-weight: 700;
}

.brand-copy small {
    font-size: 0.75rem;
    color: var(--text-subtle);
    font-weight: 600;
}

.site-nav {
    display: inline-flex;
    justify-self: center;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.site-nav a {
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: 6px var(--space-3);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 650;
}

.site-nav a:hover,
.site-nav a:focus-visible {
    border-color: var(--line);
    color: var(--text);
    background: var(--surface);
}

.site-header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.trust-pill {
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.73rem;
    font-weight: 700;
    padding: 6px 10px;
    white-space: nowrap;
}

.ui-button,
.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font-size: var(--font-14);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.ui-button:hover,
.ui-button:focus-visible,
.button-link:hover,
.button-link:focus-visible {
    border-color: var(--text-muted);
    background: var(--surface-muted);
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

.ui-button:active,
.button-link:active {
    transform: translateY(0) scale(0.98);
}

.ui-button--primary,
.button-link.primary {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: var(--shadow-soft);
}

.ui-button--primary:hover,
.ui-button--primary:focus-visible,
.button-link.primary:hover,
.button-link.primary:focus-visible {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: var(--shadow-glow);
}

.ui-button--ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.ui-button--ghost:hover {
    background: var(--surface-subtle);
    border-color: transparent;
    box-shadow: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.ui-input,
input,
select,
textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    padding: 10px 12px;
}

input:focus,
select:focus,
textarea:focus,
.ui-input:focus {
    outline: 2px solid #111827;
    outline-offset: 1px;
}

.ui-field {
    display: grid;
    gap: var(--space-2);
}

.ui-field__label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.ui-card,
.panel,
.neo-support-card,
.hero-insight,
.neo-hero,
.hero-proof,
.result-card,
.rule-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    padding: var(--space-4);
}

.panel,
.neo-support-card,
.hero-proof,
.result-card,
.rule-card {
    display: grid;
    gap: var(--space-3);
}

.hero-insight,
.neo-hero {
    display: grid;
    gap: var(--space-4);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--space-4);
    align-items: start;
}

.answer-first {
    border-left: 3px solid var(--line-strong);
    background: var(--surface-muted);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    padding: var(--space-3);
    color: var(--text);
    font-weight: 600;
}

.eyebrow,
.neo-eyebrow {
    color: var(--text-subtle);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.meta-note {
    color: var(--text-subtle);
    font-size: 0.8rem;
    font-weight: 600;
}

.ui-badge,
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ui-badge--neutral,
.badge.neutral {
    background: var(--surface-muted);
    border-color: var(--line);
    color: var(--text-muted);
}

.ui-badge--ok,
.badge.ok {
    background: rgba(16, 185, 129, 0.1);
    color: #065F46;
    /* Tailwind Emerald 800 */
    border-color: rgba(16, 185, 129, 0.2);
}

.ui-badge--warn,
.badge.warn {
    background: rgba(245, 158, 11, 0.1);
    color: #92400E;
    /* Tailwind Amber 800 */
    border-color: rgba(245, 158, 11, 0.2);
}

.ui-badge--danger,
.badge.danger {
    background: rgba(239, 68, 68, 0.1);
    color: #991B1B;
    /* Tailwind Red 800 */
    border-color: rgba(239, 68, 68, 0.2);
}

.ui-accordion,
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    overflow: hidden;
}

.ui-accordion>summary,
.faq-item>summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding: 12px 14px;
    color: var(--text);
    font-weight: 700;
}

.ui-accordion>summary::-webkit-details-marker,
.faq-item>summary::-webkit-details-marker {
    display: none;
}

.ui-accordion>summary small {
    color: var(--text-subtle);
    font-size: 0.72rem;
    font-weight: 600;
}

.ui-accordion__body,
.faq-item>p {
    border-top: 1px solid var(--line);
    padding: 12px 14px;
    color: var(--text-muted);
}

.faq-list {
    display: grid;
    gap: var(--space-2);
}

.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.data-table caption {
    caption-side: top;
    text-align: left;
    color: var(--text-subtle);
    font-size: 0.78rem;
    font-weight: 600;
    padding: var(--space-3);
}

.data-table th,
.data-table td {
    text-align: left;
    border-top: 1px solid var(--line);
    padding: 10px 12px;
}

.data-table th {
    color: var(--text);
    background: var(--surface-muted);
    border-top: 0;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.data-table td {
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 600;
}

.link-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.link-grid li {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    padding: var(--space-3);
    display: grid;
    gap: var(--space-1);
}

.link-grid li a {
    font-weight: 700;
    text-decoration: none;
}

.link-grid li span {
    font-size: 0.82rem;
    color: var(--text-subtle);
}

.rule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.mistake-callout {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    background: var(--surface-subtle);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-2);
}

.intent-widget {
    display: grid;
    gap: var(--space-2);
}

.intent-widget label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.intent-widget button {
    min-height: 44px;
    border: 1px solid #111827;
    border-radius: var(--radius-control);
    background: #111827;
    color: #f9fafb;
    font-size: var(--font-14);
    font-weight: 700;
    cursor: pointer;
}

.entry-surface {
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    padding: clamp(var(--space-4), 2vw, var(--space-6));
    display: grid;
    gap: var(--space-4);
}

.entry-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--space-4);
    align-items: start;
}

.quick-answer-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface-muted);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-3);
}

.quick-answer-card h1 {
    font-size: clamp(1.7rem, 2.4vw, 2.5rem);
}

.quick-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.fact-chip {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    padding: 10px 12px;
    display: grid;
    gap: 2px;
}

.fact-chip strong {
    font-size: 0.8rem;
}

.fact-chip span {
    color: var(--text-subtle);
    font-size: 0.78rem;
    font-weight: 600;
}

.launch-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-3);
}

.mistake-strip {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface-subtle);
    padding: var(--space-3);
    display: grid;
    gap: var(--space-1);
}

.mistake-strip strong {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mistake-strip p {
    font-size: 0.84rem;
    color: var(--text-muted);
}

.module-stack {
    display: grid;
    gap: var(--space-3);
}

.decision-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.decision-tile {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    padding: var(--space-3);
    display: grid;
    gap: var(--space-2);
}

.decision-tile h3 {
    font-size: 1rem;
}

.decision-tile p,
.decision-tile li {
    font-size: 0.86rem;
}

.scenario-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.scenario-chip {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    padding: 5px 10px;
}

.table-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-3);
}

.inline-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.inline-cta-row .ui-button,
.inline-cta-row .button-link {
    min-height: 38px;
}

.compact-faq {
    display: grid;
    gap: var(--space-2);
}

.compact-faq .faq-item>summary {
    padding: 10px 12px;
    font-size: 0.88rem;
}

.compact-faq .faq-item>p {
    padding: 0 12px 10px;
    font-size: 0.84rem;
}

.policy-summary-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface-muted);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-2);
}

.policy-do-dont {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.policy-do-dont article {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    padding: var(--space-3);
    display: grid;
    gap: var(--space-2);
}

.policy-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.stack {
    display: grid;
    gap: var(--space-4);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: var(--space-4);
    align-items: start;
}

.sticky-panel {
    position: sticky;
    top: 88px;
}

.site-footer {
    border-top: 1px solid var(--line);
    background: var(--surface-muted);
}

.app-footer-row,
.shell--footer {
    padding-block: var(--space-4) var(--space-5);
    display: grid;
    gap: var(--space-2);
}

.app-footer-row p,
.site-footer p {
    font-size: 0.82rem;
    color: var(--text-subtle);
}

.micro-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
}

.micro-links span,
.micro-links a {
    font-size: 0.78rem;
}

.micro-links span {
    color: var(--text-subtle);
    font-weight: 600;
}

.micro-links a {
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 980px) {

    .app-container,
    .shell {
        width: calc(100% - (var(--space-4) * 2));
    }

    .app-header-row,
    .shell--header {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .site-nav {
        justify-self: start;
    }

    .site-header-actions {
        justify-self: stretch;
        justify-content: space-between;
    }

    .hero-grid,
    .grid-2,
    .rail,
    .entry-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sticky-panel {
        position: static;
    }

    .quick-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .policy-do-dont {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {

    .app-container,
    .shell {
        width: calc(100% - (var(--space-3) * 2));
    }

    .app-main,
    .shell--main {
        gap: var(--space-4);
        padding-block: var(--space-4) var(--space-7);
    }

    .site-header {
        position: static;
    }

    .site-nav {
        width: 100%;
    }

    .site-header-actions {
        flex-direction: column;
        align-items: stretch;
    }

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

    .ui-button,
    .button-link,
    .intent-widget button {
        width: 100%;
    }

    .data-table {
        min-width: 560px;
    }

    .quick-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .inline-cta-row {
        flex-direction: column;
        align-items: stretch;
    }

    .inline-cta-row .ui-button,
    .inline-cta-row .button-link {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}