/* ===== Homepage + Get Started (2026-09 redesign) =====
   Builds on the tokens in styles.css. Hierarchy comes from scale, measure
   and thin rules, not from stacked rounded cards. One accent (magenta),
   used for the primary action, selected controls and small marks. */

.eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.eyebrow::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--magenta);
    margin-right: 10px;
    vertical-align: 1px;
}

/* ----- Hero ----- */
.hero2 {
    padding: 128px 0 64px;
    border-bottom: 1px solid var(--border-color);
}

.hero2-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
    align-items: center;
}

.hero2 h1 {
    font-size: clamp(2.5rem, 5.5vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 800;
    text-wrap: balance;
    margin-bottom: 20px;
}

.hero2 h1 em {
    font-style: normal;
    color: var(--magenta);
}

/* Desktop keeps "Plan the flight." on one line; phones may wrap it. */
@media (min-width: 769px) {
    .hero2 h1 .nowrap {
        white-space: nowrap;
    }
}

.hero2 .lede {
    font-size: 1.1875rem;
    color: var(--text-secondary);
    max-width: 44ch;
    margin-bottom: 28px;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.disclosure {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin-top: 14px;
}

.platform-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 22px;
    font-size: 0.9375rem;
}

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

.platform-row a {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-color: var(--border-color);
    text-underline-offset: 3px;
}

.platform-row a:hover {
    text-decoration-color: var(--magenta);
}

/* ----- Device frames (real screens, never illustrations) ----- */
.device-phone,
.device-tablet {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.device-phone img,
.device-tablet img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 22px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}

.device-tablet img {
    border-radius: 14px;
}

.device-phone {
    max-width: 340px;
    margin: 0 auto;
}

.device-phone img {
    aspect-ratio: 1320 / 2868;
}

.device-tablet img {
    aspect-ratio: 2752 / 2064;
}

figcaption {
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-align: center;
}

/* ----- Sections ----- */
.section2 {
    padding: 80px 0;
    border-bottom: 1px solid var(--border-color);
}

.section2 h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-wrap: balance;
    margin-bottom: 12px;
}

.section2 .intro {
    color: var(--text-secondary);
    max-width: 60ch;
    font-size: 1.0625rem;
    margin-bottom: 36px;
}

/* ----- Product evidence ----- */
.evidence {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    align-items: start;
}

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

.segmented button {
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-left: 3px solid var(--border-color);
    color: var(--text-secondary);
    padding: 12px 16px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0 8px 8px 0;
}

.segmented button small {
    display: block;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}

.segmented button[aria-selected="true"] {
    color: var(--text-primary);
    border-left-color: var(--magenta);
    background: var(--bg-card);
}

.segmented button:hover {
    color: var(--text-primary);
}

.segmented button:focus-visible {
    outline: 3px solid var(--text-primary);
    outline-offset: 2px;
}

.evidence-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 24px;
    align-items: start;
}

.evidence-stage .device-phone {
    max-width: 260px;
}

.evidence-panel[hidden] {
    display: none;
}

/* ----- Workflow steps (a real sequence: plan, prepare, record) ----- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    counter-reset: step;
}

.step {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.step::before {
    counter-increment: step;
    content: "0" counter(step);
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--magenta);
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}

.step h3 {
    font-size: 1.125rem;
    margin-bottom: 8px;
}

.step p {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

/* ----- Included / coverage lists ----- */
.included2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 32px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.included2 li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9375rem;
}

.included2 li::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--vfr-green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.included2 strong {
    display: block;
}

.included2 span {
    color: var(--text-secondary);
}

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px 40px;
}

.facts div {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.facts dt {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.facts dd {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

/* ----- Price block ----- */
.price-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.price-figure {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.price-figure .amount {
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.price-figure .period {
    color: var(--text-secondary);
    font-size: 1.25rem;
}

.price-tax {
    color: var(--text-muted);
    margin: 8px 0 20px;
}

/* ----- FAQ ----- */
.faq2 {
    max-width: 72ch;
}

.faq2 details {
    border-top: 1px solid var(--border-color);
}

.faq2 details:last-child {
    border-bottom: 1px solid var(--border-color);
}

.faq2 summary {
    cursor: pointer;
    padding: 18px 0;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.faq2 summary::-webkit-details-marker {
    display: none;
}

.faq2 summary::after {
    content: "+";
    color: var(--magenta);
    font-weight: 400;
    flex: none;
}

.faq2 details[open] summary::after {
    content: "−";
}

.faq2 summary:focus-visible {
    outline: 3px solid var(--text-primary);
    outline-offset: 2px;
}

.faq2 details p {
    color: var(--text-secondary);
    padding-bottom: 18px;
    max-width: 65ch;
}

/* ----- Get started ----- */
.gs-main {
    max-width: 760px;
    margin: 0 auto;
    padding: 120px 24px 80px;
}

.gs-main h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.gs-main .lede {
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.status-card {
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px 20px;
    align-items: center;
}

.status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.status-pill.good {
    color: var(--vfr-green);
    border-color: rgba(34, 197, 94, 0.4);
}

.status-pill.warn {
    color: var(--tfr-disaster);
    border-color: rgba(234, 179, 8, 0.4);
}

.status-pill.accent {
    color: var(--magenta);
    border-color: rgba(255, 0, 255, 0.4);
}

.status-pill.neutral {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.status-card p {
    margin: 0;
    color: var(--text-secondary);
}

.status-card .status-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Get started: signed-out line and outage panel sit where the status
   card would, above the public steps. */
.gs-signin-line {
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 40px;
}

.gs-signin-line a {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gs-status-panel {
    margin-bottom: 40px;
}

.gs-steps {
    counter-reset: gs;
    list-style: none;
    padding: 0;
    margin: 0;
}

.gs-steps li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    padding: 22px 0;
    border-top: 1px solid var(--border-color);
}

.gs-steps li::before {
    counter-increment: gs;
    content: counter(gs);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--magenta);
    color: var(--magenta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gs-steps h3 {
    font-size: 1.0625rem;
    margin-bottom: 6px;
}

.gs-steps p {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.device-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.device-tabs button {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 999px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.device-tabs button[aria-selected="true"] {
    border-color: var(--magenta);
    color: var(--text-primary);
}

.device-tabs button:focus-visible {
    outline: 3px solid var(--text-primary);
    outline-offset: 2px;
}

.device-panel[hidden] {
    display: none;
}

.device-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.device-panel a.btn {
    margin-top: 10px;
}

.beta-note {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 10px;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .hero2-grid,
    .evidence,
    .price-block {
        grid-template-columns: 1fr;
    }

    .evidence-stage {
        grid-template-columns: 1fr;
    }

    .evidence-stage .device-phone {
        max-width: 300px;
    }

    .steps {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    /* Bring the real screen into the first viewport: tighter hero
       spacing and a smaller phone crop (design note 2). */
    .hero2 {
        padding: 88px 0 32px;
    }

    .hero2-grid {
        gap: 28px;
    }

    .hero2 h1 {
        margin-bottom: 14px;
    }

    .hero2 .lede {
        margin-bottom: 20px;
    }

    .hero2-grid .device-phone {
        max-width: 220px;
    }

    .section2 {
        padding: 56px 0;
    }

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

    .price-figure .amount {
        font-size: 3rem;
    }

    .status-card {
        grid-template-columns: 1fr;
    }

    .gs-main {
        padding-top: 100px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .segmented button,
    .device-tabs button {
        transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }
}

/* ----- Store buttons (the old page's container class no longer exists) ----- */
.store-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

@media (max-width: 480px) {
    /* Two headline lines instead of three on a phone: the CTAs and the
       real screen move up by a line. */
    .hero2 h1 {
        font-size: 2.125rem;
    }

    .store-buttons {
        flex-direction: column;
        align-items: stretch;
    }
}