:root {
    --sand: #f6f1e9;
    --shell: #fff8f1;
    --teal: #14b8a6;
    --teal-700: #0f766e;
    --coral: #ff7f6e;
    --ocean: #0ea5e9;
    --palm: #2e7d32;
    --ink: #0f172a;
    --ink-2: #1f2937;
    --ink-light: #475569;
    --muted: #6b7280;
    --line: #e5e7eb;
    --bg: #fff;
    --card: #fff;

    /* Abstain neutrals */
    --abstain-bg: #f9fafb; /* light gray background */
    --abstain-border: #d1d5db; /* neutral border */
    --abstain-text: #6b7280; /* muted gray text */

    /* new utility colors for states/backgrounds */
    --band-start: #e0fbff;
    --band-end: #fffbe8;
    --success-bg: #ecfdf5;
    --success-border: #bbf7d0;
    --error-bg: #fef2f2;
    --error-border: #fecaca;
    --info-bg: #f0f9ff;
    --info-border: #bae6fd;
    --checklist-bg: #eefdf5;

    --shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    --radius: 14px;
    --radius-sm: 10px;
    --max: 1100px;
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--sand);
    color: var(--ink);
    font-family: 'Plus_Jakarta_Sans', sans-serif;
}

a {
    color: var(--teal-700);
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 20px
}

section {
    padding: 54px 0
}

.section-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px
}

.section-head h3 {
    margin: 0;
    font-size: 24px
}

.section-head p {
    margin: 0;
    color: var(--muted)
}

.btn-primary {
    padding: 12px 16px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(180deg, var(--teal), var(--teal-700));
    border: 1px solid var(--teal);
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.3);
    cursor: pointer
}

.btn-secondary {
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--teal-700);
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    cursor: pointer
}

img, .phone-mock, .card {
    max-width: 100%;
    height: auto;
}

.features,
.cta-grid {
    min-width: 0; /* critical: lets children shrink */
}

.features > *,
.cta-grid > * {
    min-width: 0;
}

/* Ensure grids collapse gracefully */
.features,
.cta-grid {
    display: grid;
    gap: 16px;
}

@media (max-width: 900px) {
    .features,
    .cta-grid {
        grid-template-columns: 1fr; /* stack items */
    }

    /* Add spacing when stacked so form/card don’t touch */
    .cta-grid > *:not(:last-child) {
        margin-bottom: 20px;
    }
}

/* Collapse all grids into 1 column on small screens */
@media (max-width: 700px) {
    .hero-grid,
    .band .grid,
    .features,
    .pricing,
    .cta-grid,
    .footer-grid {
        grid-template-columns: 1fr !important;
    }
}

@font-face {
    font-family: 'Plus_Jakarta_Sans';
    src: url('../assets/fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* covers all weights */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus_Jakarta_Sans';
    src: url('../assets/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

.brand-mark {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}

/* Start hidden */
section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.2s linear;
    will-change: opacity, transform, filter;
}

section.in-view {
    opacity: 1;
    transform: translateY(0);
}

/*
* {
    outline: 1px solid red;
}
 */

/* --- */

/* =========================
   HERO SECTION
   ========================= */
.hero {
    background: radial-gradient(1200px 400px at 50% -10%, #bff0ff44, transparent 60%),
    radial-gradient(800px 300px at 10% 0%, #a7ffe744, transparent 60%),
    var(--bg);
    border-bottom: 1px solid var(--line);

    /* Fill screen */
    min-height: calc(100vh - 65px); /* subtract header */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 0;
}

/* Single column grid */
.hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    gap: 24px;
}



/* =========================
   TEXT & HEADINGS
   ========================= */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;

    font-weight: 600;
    color: var(--teal-700);
    background: #ecfeff;
    border: 1px solid var(--teal);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 6px 12px;
}

.kicker .dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--ocean), var(--teal));
}

.hero h2 {
    font-size: 36px;
    line-height: 1.15;
    margin: 12px 0 8px;
}

.hero-copy .subhead {
    font-size: 18px;
    color: var(--ink-light);
    margin-top: 20px;
    margin-bottom: 20px;

    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp 0.7s ease forwards;
    animation-delay: 0.1s;
}

.hero p {
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.6;
    margin-top: 10px;
    margin-bottom: 18px;
}

.hero .cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.hero-copy .btn-primary {
    display: inline-block;
    margin-top: 24px;
}

/* =========================
   PHONE MOCK
   ========================= */
.phone {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 16px;
    box-shadow: var(--shadow);
}

.phone-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.signal {
    display: flex;
    gap: 4px;
}

.bar {
    width: 6px;
    height: 10px;
    background: #e5e7eb;
    border-radius: 2px;
}

.bar:nth-child(2) {
    height: 12px;
}

.bar:nth-child(3) {
    height: 14px;
}

.bar:nth-child(4) {
    height: 16px;
    background: var(--teal);
}

.screen {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    background: linear-gradient(180deg, #f9fafb, #ffffff);
}

.ticket {
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    margin-bottom: 10px;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    color: #0369a1;
}

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

.row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--ocean), var(--teal));
    display: inline-block;
}

/* =========================
   BULLETS
   ========================= */
/* Desktop bullets */
.hero-bullets {
    list-style: none;
    padding: 0;
    margin: 26px 0;
    display: flex;
    justify-content: center;
    gap: 48px;
    font-size: 16px;
    font-weight: 500;
    flex-wrap: nowrap; /* keep all in one row */
}

.hero-bullets li {
    display: flex;
    flex-direction: column; /* icon above text */
    align-items: center;
    text-align: center;
    gap: 8px;
    white-space: nowrap;


    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp 0.7s ease forwards;
}

.hero-bullets li:nth-child(1) {
    animation-delay: 0.2s;
}

.hero-bullets li:nth-child(2) {
    animation-delay: 0.4s;
}

.hero-bullets li:nth-child(3) {
    animation-delay: 0.6s;
}

.bullet-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin: 0;
}

/* =========================
   COMPLIANCE
   ========================= */
.compliance-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.compliance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    color: var(--teal-700);

    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp 0.7s ease forwards;
    animation-delay: 1s;
}

.compliance .bullet-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.compliance-wrap .btn-primary {
    margin-top: 20px;
}

/* =========================
   ANIMATIONS
   ========================= */
@keyframes flyIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h2 .highlight {
    position: relative;
}

.hero h2 .highlight::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 4px; /* thinner, confident stroke */
    background: linear-gradient(90deg, var(--ocean), var(--teal));
    clip-path: ellipse(100% 100% at 50% 100%);
    transform: scaleX(0);
    transform-origin: left;
    animation: swoosh 0.8s ease-out forwards 0.4s;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); /* subtle depth */
}

@keyframes swoosh {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* =========================
   RESPONSIVE
   ========================= */

/* Equal widths only on desktop */
@media (min-width: 801px) {
    .hero-bullets li {
        flex: 1 1 0;
        max-width: 200px;
    }
}

@media (max-width: 800px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-bullets {
        flex-direction: column; /* stack vertically */
        gap: 16px;
        align-items: center; /* center the list */
    }

    .hero-bullets li {
        flex: none;
        flex-direction: row; /* icon left of text */
        align-items: center;
        gap: 10px;
        text-align: left;

        max-width: 320px; /* keeps column narrow */
        width: 100%;
        margin: 0 auto; /* center in the page */
        justify-content: center;
    }

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

    .phone {
        margin-top: 24px;
        width: 100%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile-only reveal for the phone mock */
@media (max-width: 800px) {
    .phone {
        margin-top: 24px;
        width: 100%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;

        /* NEW: start hidden */
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .phone.in-view {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hide desktop-only versions by default */
.kicker-desktop,
.cta-desktop {
    display: none;
}

/* Desktop layout */
@media (min-width: 801px) {
    /* Make sure mobile versions are hidden, override hero-copy rule */
    .hero-copy .kicker-mobile,
    .hero-copy .btn-mobile {
        display: none !important;
    }

    /* Desktop kicker centered, fixed width */
    .kicker-desktop {
        display: flex;
        justify-content: center;
        margin: 0 auto 32px;
        width: 200px; /* fixed width */
        text-align: center;
    }

    /* Desktop CTA centered below grid */
    .cta-desktop {
        display: flex;
        justify-content: center;
    }
}


/* Glow animation for primary CTA */
.btn-primary {
    position: relative;
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 0px rgba(0, 200, 200, 0.0);
    }
    50% {
        box-shadow: 0 0 12px rgba(0, 200, 200, 0.6),
        0 0 24px rgba(0, 200, 200, 0.4);
    }
    100% {
        box-shadow: 0 0 0px rgba(0, 200, 200, 0.0);
    }
}

/* =========================
   PHONE SLIDE-IN (desktop only)
   ========================= */
@media (min-width: 801px) {
    .phone {
        opacity: 0;
        transform: translateX(60px); /* start slightly offscreen to right */
        animation: slideInRight 0.8s ease-out forwards;
        animation-delay: 1s; /* wait 3 seconds after load */
    }
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scroll indicator - only shows on mobile */
.scroll-indicator {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    color: var(--teal-700);
    animation: bounce 2s infinite;
}
.scroll-indicator svg {
    width: 40px;
    height: 40px;
}

@media (max-width: 800px) {
    .scroll-indicator {
        display: flex;
        justify-content: center;
        margin-top: 5px;
        color: var(--teal-700);
        animation: bounce 2s infinite;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(10px);
    }
    60% {
        transform: translateY(5px);
    }
}

/* Scale up further on large screens */
@media (min-width: 801px) {
    .hero h2 {
        font-size: 64px;
    }

    .hero-copy .subhead {
        font-size: 24px;
    }

    .hero-bullets {
        font-size: 18px;
        gap: 60px;
    }
    div.compliance-wrap p.compliance {
        font-size: 22px;
    }
}


/* --- */

.features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
}

.card h4 {
    margin: 0;
    font-size: 18px
}

.card p {
    margin: 0 0 10px;
    color: var(--ink-2);
    line-height: 1.55
}

.list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.list li {
    padding-left: 22px;
    position: relative;
    margin: 8px 0;
    color: #334155;
}

.list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--ocean), var(--teal));
}

.card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.card-icon {
    width: 28px;
    height: 28px;
    stroke: #333;
    flex-shrink: 0;
    opacity: 0.9;
    transition: transform 0.2s ease, stroke 0.2s ease;
}

/* subtle hover feedback */
.card:hover .card-icon {
    stroke: #000;
    transform: scale(1.05);
}

/* --- */

.band .grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
    align-items: stretch;
}

.box {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}

/* =========================
   MINUTES EXAMPLE (law box)
   ========================= */
.law {
    background: var(--card);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 20px;
    box-shadow: var(--shadow);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}

.law header {
    margin: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 6px;
}

.law header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

/* sections inside minutes */
.law section {
    margin: 0;
    padding: 0;
}

.law .label {
    margin: 0;
    font-weight: 600;
    color: var(--ink-2);
}

/* lists */
.law ul {
    list-style: none;
    padding-left: 0;
    margin: 6px 0;
}

.law li {
    margin: 4px 0;
    padding-left: 18px;
    position: relative;
}

.law li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--teal);
}

/* vote outcome colors */
.law .yes {
    color: var(--palm);
    font-weight: 600;
}

.law .no {
    color: var(--coral);
    font-weight: 600;
}

.law .abstain {
    color: var(--abstain-text);
    font-weight: 600;
}


/* =========================
   Checklist with green checks
   ========================= */
.checklist {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.checklist li {
    margin: 6px 0;
    padding-left: 20px;
    position: relative;
}

.checklist li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--palm);
    font-weight: bold;
}

.checklist.closing {
    margin-top: 24px;
    padding: 16px;
    border-radius: 8px;
    background: var(--checklist-bg);
    border: 1px solid var(--success-border);
}

.checklist.closing li {
    margin: 6px 0;
    padding-left: 22px;
}

.checklist.closing li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--palm);
    font-weight: bold;
}

/* status labels */
.law .status {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}

.law .status.pass {
    background: var(--success-bg);
    color: var(--palm);
    border: 1px solid var(--success-border);
}

.law .status.fail {
    background: var(--error-bg);
    color: var(--coral);
    border: 1px solid var(--error-border);
}

/* action links */
.law .action {
    font-size: 12px;
    margin-left: 10px;
    color: var(--ocean);
    text-decoration: underline;
    cursor: pointer;
}

/* vote results container */
.law .vote-results {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 4px 0 10px 0;
}

/* vote pill badges */
.law .vote {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.law .vote.yes {
    background: var(--success-bg);
    color: var(--palm);
    border: 1px solid var(--success-border);
}

.law .vote.no {
    background: var(--error-bg);
    color: var(--coral);
    border: 1px solid var(--error-border);
}

.law .vote.abstain {
    background: var(--abstain-bg);
    color: var(--abstain-text);
    border: 1px solid var(--abstain-border);
}

.compliance-band {
    padding-top: 0;
    padding-bottom: 26px;
}

.compliance-list {
    list-style: none;
    margin: 16px 0;
    padding: 0;
}

.compliance-list li {
    margin: 14px 0;
    padding-left: 24px;
    position: relative;
}

.compliance-list li::before {
    content: "⚖"; /* gavel / scale emoji alternative */
    position: absolute;
    left: 0;
    color: var(--teal-700);
    font-size: 14px;
}

.requirement {
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

.cite {
    font-size: 12px;
    color: var(--muted);
}

.compliance-in-action {
    margin-top: 16px;
}

.example-footer {
    margin-top: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}

.example-logo {
    height: 16px;
    width: auto;
    opacity: 0.8;
}


/* --- */

.table-wrap {
    overflow-x: auto;
}

table.compare {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.compare thead th {
    background: var(--shell);
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 2px solid var(--line);
}

.compare th.competitor {
    color: var(--muted);
}

.compare th.ours {
    color: var(--teal-700);
}

.compare tbody td {
    padding: 14px 16px;
    vertical-align: top;
}

.compare tbody tr:first-child td {
    border-top: none;
}

.compare td:first-child {
    font-weight: 500;
    color: var(--ink);
    width: 28%;
}

.compare .price {
    background: var(--teal);
    color: #fff;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 14px;
}

/* Mobile-first responsive table */
@media (max-width: 640px) {
    table.compare {
        font-size: 13px;
    }

    .compare td,
    .compare th {
        padding: 10px 8px;
        word-break: break-word; /* allow wrapping */
        white-space: normal; /* break long phrases */
    }

    .compare td:first-child {
        width: 35%; /* give features more space */
    }

    .compare th.competitor,
    .compare th.ours {
        font-size: 13px;
    }
}

/* Add icons before Neighborly and Competitor cells */
.compare td.ours:before,
.compare td.competitor:before {
    position: absolute;
    left: 0;
    font-weight: bold;
    margin-right: 8px;
}

/* Neighborly = green check */
.compare td.ours {
    position: relative;
    padding-left: 24px; /* space for checkmark */
}

.compare td.ours:before {
    content: "✓";
    color: var(--palm); /* green */
}

/* Competitors = red X */
.compare td.competitor {
    position: relative;
    padding-left: 24px; /* space for X */
}

.compare td.competitor:before {
    content: "✗";
    color: #e11d48; /* red-600 */
}

.compare td:last-child {
    font-weight: 400;
}

/* --- */

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

.price {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 18px;
}

.price .num {
    font-size: 32px;
    font-weight: 700;
    color: var(--ink);
}

.price .per {
    color: var(--muted);
    font-size: 14px
}

.price ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0
}

.price li {
    margin: 8px 0;
    padding-left: 20px;
    position: relative
}

.price li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--palm)
}

.price-num {
    margin: 16px 0 16px
}

.addons {
    margin-top: 20px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--shell);
    font-size: 14px;
    color: var(--ink-light);
    text-align: center;
}

.addons-label {
    font-weight: 600;
    color: var(--teal-700);
    margin-right: 6px;
}

/* Mobile layout */
@media (max-width: 600px) {
    .addons {
        text-align: left; /* optional, could keep center */
    }

    .addons-label {
        display: block; /* put "Coming soon:" on its own line */
        margin: 0 0 6px 0; /* add space below */
    }
}

.law-quote {
    margin-top: 12px;
    padding: 10px 14px;
    border-left: 3px solid var(--teal-700);
    background: #f9fafb;
    font-size: 14px;
    color: var(--ink-light);
    font-style: italic;
}

.law-quote .law-cite {
    display: block;
    font-weight: 600;
    font-style: normal;
    color: var(--teal-700);
    margin-bottom: 4px;
}

.price li .cite {
    font-size: 12px;
    color: var(--muted);
    margin-left: 4px;
}

.price li {
    margin: 10px 0;
    padding-left: 20px;
    position: relative;
}

.price li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--palm);
}

.law-note {
    font-size: 13px;
    color: var(--muted);
    margin-top: 6px;
}


/* --- */

.cta-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 16px;
}

form {
    display: grid;
    gap: 10px
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px
}

label {
    font-size: 14px;
    color: #334155;
    font-weight: 600;
}

input, select, textarea {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    font-size: 15px;
}

input:focus, select:focus, textarea:focus {
    outline: 3px solid #bae6fd;
    border-color: #38bdf8;
}

.success, .error {
    display: none;
    margin-top: 8px;
    padding: 10px;
    border-radius: 8px;
}

.success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0
}

.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* bullets at top, anchor at bottom */
    min-height: 100%; /* stretch to match form column */
    padding: 24px;
}

.card-anchor {
    margin-top: auto; /* stays at bottom of card */
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--line); /* visual separation from bullets */

    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: var(--ink-2);
    justify-content: center;
    height: 100%; /* allows centering vertically */
}

.card-anchor .highlight {
    position: relative;
    margin-bottom: 12px;
}

.card-anchor .highlight::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8px;
    width: 78%; /* slimmer than text width */
    height: 2px;
    background: linear-gradient(90deg, var(--ocean, #38bdf8), var(--teal, #2dd4bf));
    border-radius: 2px;
    opacity: 0.9;
}

@media (max-width: 800px) {
    .card-anchor {
        margin-top: 20px;
        font-size: 32px;
    }
}

/* ----- CARD ANCHOR ----- */

.eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--teal-700, #0f766e);
    background: #ecfeff;
    border: 1px solid var(--teal, #2dd4bf);
    border-radius: 999px;
    white-space: nowrap;
}

.eyebrow-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.headline {
    display: inline-block; /* so underline can size to text */
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--ink-2, #0f172a);
    text-align: center;
    max-width: 22ch; /* elegant line length if wrap */
    margin-top: 16px;
}

@media (min-width: 900px) {
    .headline {
        font-size: 40px;
    }
}

@media (max-width: 800px) {
    .headline {
        font-size: 32px;
    }
}

ul.pilot-list > li {
    margin-bottom: 12px;
}

@media (min-width: 801px) {
    div.pilot-card {
        margin-left: 50px;
    }
}

select {
    appearance: none; /* removes native arrow (Chrome, Safari, Edge) */
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none;
    padding-right: 32px; /* space for custom arrow */
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

#signup {
    background: linear-gradient(90deg, var(--band-start), var(--band-end));
}

input.error-field, select.error-field, textarea.error-field {
    border-color: #dc2626; /* red border */
    outline: 2px solid #fecaca; /* light red outline */
    background: #fff5f5; /* subtle red background */
}

.btn-primary.loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}

.btn-primary.loading::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    transform: translateY(-50%);
}

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

#success {
    display: none;
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.btn-primary.success {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.btn-primary.success::after {
    content: "✓";
    margin-left: 8px;
    font-weight: bold;
}

.checkmark {
    width: 80px;
    height: 80px;
    display: inline-block;
}

.checkmark__circle {
    stroke: #16a34a;
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    fill: none;
    animation: draw-circle 0.6s ease forwards;
}

.checkmark__check {
    stroke: #16a34a;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: draw-check 0.3s ease forwards;
    animation-delay: 0.6s; /* wait until circle draws */
}

@keyframes draw-circle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes draw-check {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 40px #16a34a;
    }
}

.success-card {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    animation: fadeIn 0.3s ease;


    /* NEW for centering */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%; /* fill parent column height */
}

/* --- */

/* FAQ section styles */
.faq .card {
    justify-content: normal; /* bullets at top, anchor at bottom */
}

.faq .features .card p {
    margin-top: 10px; /* adjust as needed */
}

/* --- */

footer {
    padding: 28px 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

.footer-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 16px;
}

.legal {
    font-size: 12px;
    color: #6b7280
}

@media (max-width: 800px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center; /* centers text in both columns */
    }

    .footer-grid .brand {
        justify-content: center; /* centers the logo + text horizontally */
        display: flex; /* ensure flex container for logo alignment */
    }

    .footer-grid > div:last-child {
        text-align: center; /* make the right-side links centered too */
    }
}

/* --- */

header {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, #ffffffee, #ffffffcc);
    backdrop-filter: saturate(120%) blur(6px);
    border-bottom: 1px solid var(--line);
    z-index: 40;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    transition: height 0.2s ease, padding 0.2s ease;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px
}


.brand h1 {
    font-size: 18px;
    margin: 0;
    color: var(--ink);
    transition: font-size 0.2s ease;
}


/* Header button tweak */
.nav .btn-primary {
    padding: 10px 10px;
    font-size: 14px;
    line-height: 1;
    border-radius: 8px;
    white-space: nowrap; /* keep text on one line */
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* On small screens, shrink further */
@media (max-width: 640px) {
    .nav .btn-primary {
        padding: 10px 10px;
        font-size: 13px;
        border-radius: 6px;
    }
}

/* Shrink state */
header.scrolled .nav {
    height: 50px;
}

header.scrolled .brand h1 {
    font-size: 16px;
}

#signup {
    scroll-margin-top: 70px; /* header height + a little breathing room */
}

.brand img {
    height: 32px; /* default size */
    transition: height 0.2s ease;
}

/* Shrink state */
header.scrolled .brand img {
    height: 24px; /* smaller when scrolled */
}

/* --- */

/* TIMELINE SECTION */
.timeline-band {
    background: linear-gradient(90deg, #f0f9ff, #fff);
}

.timeline {
    position: relative;
    max-width: 400px; /* play with this number */
    margin: 0 auto; /* centers horizontally */
    padding-left: 40px; /* space for dots + line */
    border-left: 2px solid var(--line);
}

.timeline-band .wrap {
    margin: 0 auto; /* centers horizontally */
    padding: 0 20px;
}

.event {
    position: relative;
    margin-bottom: 28px;
}

.event .dot {
    position: absolute;
    left: -9px; /* center on the line */
    top: 0.4em; /* aligns vertically with first text line */
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--line);
}

.event .time {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
    display: block; /* keep it full line so card text starts below */
    margin-left: 4px; /* gentle nudge right, avoids dot collision */
}
.event .dot {
    position: absolute;
    left: -28px;
    top: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--line);
}

.event .dot.notice {
    background: var(--ocean);
}

.event .dot.ballot {
    background: var(--teal);
}

.event .dot.violation {
    background: var(--coral);
}

.event .dot.minutes {
    background: var(--palm);
}

.event .details {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 12px 16px;
    max-width: 400px;
}

.event .details strong {
    font-size: 15px;
    margin-bottom: 4px;
    color: var(--ink);
}

.event .details .detail-title {
    display: block;
}

.event .details p {
    margin: 0 0 6px 0;
    font-size: 14px;
    color: var(--ink-light);
    line-height: 1.5;
}

.event .action {
    font-size: 12px;
    color: var(--ocean);
    text-decoration: underline;
    cursor: pointer;
}

.status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.status.pass {
    background: #ecfdf5;
    color: var(--palm);
    border: 1px solid #bbf7d0;
}

.status.fail {
    background: #fef2f2;
    color: var(--coral);
    border: 1px solid #fecaca;
}

/* vote results container */
.vote-results {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 4px 0 10px 0;
}

/* vote pill badges */
.vote {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.vote.yes {
    background: #ecfdf5;
    color: var(--palm);
    border: 1px solid #bbf7d0;
}

.vote.no {
    background: #fef2f2;
    color: var(--coral);
    border: 1px solid #fecaca;
}


.law .abstain {
    color: var(--abstain-text);
    font-weight: 600;
}


.vote.abstain {
    background: var(--abstain-bg);
    color: var(--abstain-text);
    border: 1px solid var(--abstain-border);
}


/* smaller gray helper text */
.details .mini {
    font-size: 12px;
    color: var(--muted);
    margin: 4px 0;
}

/* violation thumbnail */
.details .mini {
    font-size: 13px;
    color: var(--ink-light);
    margin: 6px 0;
}

.violation-thumb {
    margin: 8px 0 4px 0; /* space above and below */
    max-width: 180px;
    border-radius: 6px;
    border: 1px solid var(--line);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.timeline-section-head {
    margin-bottom: 50px;
}

@media (max-width: 800px) {

    .timeline-section-head {
        margin-bottom: 25px;
    }

}


/* --- */

/* Base section */
.voices-band {
    background: linear-gradient(90deg, var(--band-start), var(--band-end));
    padding: 60px 0;
}

/* Grid layout */
.voices-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Blockquote cards */
.voices-grid blockquote {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* separates text and footer */
    background: var(--card);
    padding: 32px 28px 18px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-style: italic;
    color: var(--ink);
    line-height: 1.6;
    overflow: visible;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.voices-grid blockquote.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Quote paragraph */
.voices-grid blockquote p {
    margin: 0;
    font-size: 16px;
    position: relative;
    z-index: 1;
    text-align: center;
    flex-grow: 1; /* fills above footer */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

/* Decorative quotes */
.voices-grid blockquote p::before,
.voices-grid blockquote p::after {
    position: absolute;
    font-size: 1.5rem;
    color: var(--ink);
    opacity: 0.75;
    pointer-events: none;
}

.voices-grid blockquote p::before {
    content: "❝";
    top: 0;
    left: 0;
    transform: translate(-18px, -18px);
}

.voices-grid blockquote p::after {
    content: "❞";
    bottom: 0;
    right: 0;
    transform: translate(8px, 18px);
}

/* Alternating border-left colors */
.voices-grid blockquote:nth-child(3n+1) {
    border-left: 4px solid var(--teal);
}

.voices-grid blockquote:nth-child(3n+2) {
    border-left: 4px solid var(--coral);
}

.voices-grid blockquote:nth-child(3n+3) {
    border-left: 4px solid var(--palm);
}

/* Footer */
footer.voice-footer {
    margin-top: 20px;
    padding: 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

footer.voice-footer .footer-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

footer.voice-footer .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

footer.voice-footer .person {
    display: flex;
    justify-content: space-between; /* push text to the right */
    align-items: center;
    gap: 12px;
}

footer.voice-footer .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

footer.voice-footer .person-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* right-align text */
    text-align: right; /* ensures text itself aligns right */
    line-height: 1.3;
}

footer.voice-footer .role {
    font-weight: 600;
    font-size: 13px; /* smaller */
    color: var(--ink);
}


footer.voice-footer .source {
    font-size: 12px; /* smaller */
    color: var(--muted);
}