/* site.css — site-specific layout styles using only design system tokens */
/* No new token values are introduced; all values reference tokens/ custom properties */

/* ===================================================================
   NavBar layout
   =================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface-page);
    border-bottom: var(--border);
    padding: var(--sp-4) var(--sp-6);
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
    max-width: 1120px;
    margin: 0 auto;
}

.site-nav .nav-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    text-decoration: none;
    min-height: 44px;
}

.nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-6);
}

.nav-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: var(--sp-2) var(--sp-1);
    text-decoration: none;
    font: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
    transition: color var(--transition);
}

.nav-links a:hover {
    color: var(--ansiva-answer-hover);
}

.nav-links a[aria-current="page"] {
    color: var(--text-brand);
}

/* ===================================================================
   Footer layout
   =================================================================== */
.site-footer {
    background: var(--surface-dark);
    color: var(--ansiva-chalk);
    padding: var(--sp-16) var(--sp-6) var(--sp-8);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-12);
    max-width: 1120px;
    margin: 0 auto;
    padding-bottom: var(--sp-8);
    border-bottom: 1px solid var(--ansiva-slate-dark);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-8);
}

.footer-links a {
    color: var(--ansiva-chalk);
    text-decoration: none;
    font: var(--text-body);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    transition: color var(--transition);
}

.footer-links a:hover {
    color: var(--ansiva-signal);
}

.footer-legal {
    max-width: 1120px;
    margin: var(--sp-6) auto 0;
    font: var(--text-small);
    color: var(--ansiva-slate-dark);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
}

/* ===================================================================
   Section spacing
   =================================================================== */
.section {
    padding: var(--sp-16) var(--sp-6);
}

.section--tight {
    padding: var(--sp-12) var(--sp-6);
}

.section-inner {
    max-width: 1120px;
    margin: 0 auto;
}

.section--dark {
    background: var(--surface-dark);
    color: var(--ansiva-chalk);
}

.section--dark .eyebrow {
    color: var(--ansiva-slate-dark);
}

/* ===================================================================
   Grid systems
   =================================================================== */
.grid {
    display: grid;
    gap: var(--sp-6);
}

.grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Centered narrow content */
.content-narrow {
    max-width: 640px;
    margin: 0 auto;
}

/* Centered wide content */
.content-wide {
    max-width: 960px;
    margin: 0 auto;
}

/* ===================================================================
   Section headings
   =================================================================== */
.section-heading {
    font: var(--text-h2);
    letter-spacing: -0.015em;
    color: var(--text-brand);
    margin-bottom: var(--sp-8);
}

.section--dark .section-heading {
    color: var(--ansiva-chalk);
}

/* ===================================================================
   Focus indicators (Requirement 9.3)
   All interactive elements receive visible focus via keyboard
   =================================================================== */
*:focus-visible {
    outline: 2px solid var(--ansiva-answer);
    outline-offset: 2px;
}

/* ===================================================================
   Minimum tap targets (Requirement 9.4)
   All interactive elements meet 44px minimum
   =================================================================== */
a,
button,
input,
select,
textarea,
[role="tab"],
[role="button"] {
    min-height: 44px;
}

button,
[role="tab"],
[role="button"] {
    min-width: 44px;
}

/* ===================================================================
   Reduced motion (Requirements 10.3, 10.4, 10.5)
   =================================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        animation-duration: 0ms !important;
        transition-duration: 0ms !important;
    }
}

/* ===================================================================
   Base page layout
   =================================================================== */
html {
    background: var(--surface-page);
}

body {
    font: var(--text-body);
    color: var(--text-primary);
    margin: 0;
}

main {
    min-height: 100vh;
}

/* ===================================================================
   Hero section (Section 1)
   =================================================================== */
.section--dark[data-surface="dark"] {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 9vw, 104px) clamp(20px, 5vw, 48px);
}

.hero-waveform {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    pointer-events: none;
    animation: ansiva-pulse var(--pulse-duration) ease-in-out infinite alternate;
}

.hero-waveform__bar {
    display: block;
    width: 7px;
    border-radius: 4.2px;
    background: var(--ansiva-signal);
    opacity: 0.13;
}

/* Bar heights derived from WaveformDivider component (scale 3.4) */
.hero-waveform__bar:nth-child(1) {
    height: 27.2px;
}

.hero-waveform__bar:nth-child(2) {
    height: 54.4px;
}

.hero-waveform__bar:nth-child(3) {
    height: 37.4px;
}

.hero-waveform__bar:nth-child(4) {
    height: 64.6px;
}

.hero-waveform__bar:nth-child(5) {
    height: 23.8px;
}

.hero-waveform__bar:nth-child(6) {
    height: 47.6px;
}

.hero-waveform__bar:nth-child(7) {
    height: 74.8px;
}

.hero-waveform__bar:nth-child(8) {
    height: 30.6px;
}

.hero-waveform__bar:nth-child(9) {
    height: 57.8px;
}

.hero-waveform__bar:nth-child(10) {
    height: 40.8px;
}

.hero-waveform__bar:nth-child(11) {
    height: 68.0px;
}

.hero-waveform__bar:nth-child(12) {
    height: 27.2px;
}

.hero-waveform__bar:nth-child(13) {
    height: 51.0px;
}

.hero-waveform__bar:nth-child(14) {
    height: 34.0px;
}

.hero-waveform__bar:nth-child(15) {
    height: 61.2px;
}

.hero-waveform__bar:nth-child(16) {
    height: 23.8px;
}

.hero-waveform__bar:nth-child(17) {
    height: 44.2px;
}

.hero-waveform__bar:nth-child(18) {
    height: 71.4px;
}

.hero-waveform__bar:nth-child(19) {
    height: 30.6px;
}

.hero-waveform__bar:nth-child(20) {
    height: 54.4px;
}

.hero-waveform__bar:nth-child(21) {
    height: 27.2px;
}

.hero-waveform__bar:nth-child(22) {
    height: 54.4px;
}

.hero-waveform__bar:nth-child(23) {
    height: 37.4px;
}

.hero-waveform__bar:nth-child(24) {
    height: 64.6px;
}

.hero-waveform__bar:nth-child(25) {
    height: 23.8px;
}

.hero-waveform__bar:nth-child(26) {
    height: 47.6px;
}

.hero-content {
    position: relative;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: var(--sp-6);
}

.hero-lockup {
    font: 600 clamp(26px, 4vw, 34px)/1 var(--font-display);
    letter-spacing: -0.025em;
    color: var(--ansiva-chalk);
}

.hero-lockup__tld {
    color: var(--ansiva-signal);
}

.hero-title {
    font: var(--text-display);
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ansiva-chalk);
}

.hero-sub {
    font: 400 clamp(16px, 2vw, 18px)/1.55 var(--font-text);
    color: var(--ansiva-chalk-muted);
    margin: 0;
    max-width: 54ch;
}

.hero-actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--sp-2);
}

.btn--hero {
    min-height: 44px;
}

.btn--secondary-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--sp-3) var(--sp-6);
    font: 600 14px/1 var(--font-text);
    color: var(--ansiva-chalk);
    background: transparent;
    border: 1px solid var(--ansiva-chalk);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.btn--secondary-dark:hover {
    background: var(--ansiva-chalk);
    color: var(--ansiva-midnight);
}

.hero-demo-number {
    font: 400 13.5px/1.5 var(--font-text);
    color: var(--ansiva-slate-dark);
}

.placeholder-label {
    font: 600 11px/1 var(--font-text);
    color: var(--ansiva-amber);
    margin-left: var(--sp-2);
}

/* ===================================================================
   Flip Strip section (Section 2)
   =================================================================== */
.flip-strip {
    text-align: center;
}

.flip-strip__row {
    display: flex;
    gap: 0.7em;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
}

.flip-strip__from {
    font: 600 26px/1.2 var(--font-display);
    color: var(--ansiva-missed-text);
    text-decoration: line-through;
    text-decoration-thickness: 3px;
}

.flip-strip__to {
    font: 600 26px/1.2 var(--font-display);
    color: var(--ansiva-answer);
}

.flip-strip__arrow {
    font: 400 22px/1 var(--font-text);
    color: var(--ansiva-slate);
}

.flip-strip__line {
    font: 400 15px/1.55 var(--font-text);
    color: var(--ansiva-slate);
    margin: 12px auto 0;
    max-width: 48ch;
}


/* ===================================================================
   How It Works section (Section 3)
   =================================================================== */

/* Section head — kicker + heading */
.section-head {
    max-width: 60ch;
}

/* Eyebrow accent variant — Answer Green for step labels */
.eyebrow--accent {
    color: var(--ansiva-answer);
}

/* How It Works grid spacing */
.how-grid {
    margin-top: var(--sp-8);
}

/* Individual step card layout */
.how-step {
    display: grid;
    gap: 12px;
    align-content: start;
}

.how-step__title {
    font: var(--text-h3);
    color: var(--ansiva-ink);
    margin: 0;
}

.how-step__desc {
    font: 400 14.5px/1.55 var(--font-text);
    color: var(--ansiva-slate);
    margin: 0;
}

/* How-card (surface card with border) */
.how-card {
    background: var(--ansiva-surface);
    border: 1px solid var(--ansiva-line);
    border-radius: var(--r-card);
    padding: var(--sp-4);
}

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

.how-card__quote {
    font: 600 13px/1.3 var(--font-text);
    color: var(--ansiva-ink);
}

.how-card__readback {
    font: 400 12.5px/1.5 var(--font-text);
    color: var(--ansiva-slate);
    margin-top: 8px;
}

.how-card__chip-row {
    margin-top: 8px;
}

.how-card__booking-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.how-card__booking-title {
    font: 600 13px/1.3 var(--font-text);
    color: var(--ansiva-ink);
}

.how-card__booking-sub {
    font: 400 12.5px/1.5 var(--font-text);
    color: var(--ansiva-slate);
}

.how-card__teach-note {
    font: 400 12.5px/1.5 var(--font-text);
    color: var(--ansiva-slate);
    margin-top: 6px;
}

/* Chip component extensions (base .chip in utilities.css) */
.chip--answer {
    background: var(--ansiva-answer-tint);
    color: var(--ansiva-answer);
}

.chip--pending {
    background: var(--ansiva-amber-tint);
    color: var(--ansiva-amber-text);
}

.chip--neutral {
    background: var(--ansiva-surface);
    color: var(--ansiva-slate);
    border: 1px solid var(--ansiva-line);
}

/* Waveform divider (inline decorative bars) */
.waveform-divider {
    display: flex;
    gap: 5px;
    align-items: flex-end;
    height: 22px;
}

.waveform-divider__bar {
    display: block;
    width: 5px;
    border-radius: 3px;
    background: var(--ansiva-answer);
    opacity: 0.9;
}

/* ===================================================================
   Pillars section (Section 4) — Answered / Booked / Paid
   =================================================================== */
.pillars-section {
    background: var(--ansiva-surface);
    border-top: 1px solid var(--ansiva-line);
    border-bottom: 1px solid var(--ansiva-line);
}

.pillars-grid {
    margin-top: var(--sp-8);
}

/* StatCard base */
.stat-card {
    background: var(--ansiva-surface);
    border: 1px solid var(--ansiva-line);
    border-radius: var(--r-card);
    padding: var(--sp-6);
}

.stat-card--chalk {
    background: var(--ansiva-chalk);
}

.stat-card__live {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 600 13px/1 var(--font-text);
    color: var(--ansiva-answer);
    margin-bottom: 12px;
}

.stat-card__pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ansiva-signal);
    display: inline-block;
    animation: ansiva-pulse var(--pulse-duration) ease-in-out infinite;
}

.stat-card__label {
    font: 600 12px/1.4 var(--font-text);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ansiva-slate);
}

.stat-card__value {
    font: 600 32px/1.2 var(--font-display);
    font-variant-numeric: tabular-nums;
    color: var(--ansiva-ink);
    margin-top: 4px;
}

.stat-card__caption {
    font: 400 13.5px/1.5 var(--font-text);
    color: var(--ansiva-slate);
    margin-top: 6px;
}

.stat-card__rows {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.stat-card__row {
    display: flex;
    gap: 10px;
    font: 400 13px/1.4 var(--font-text);
    color: var(--ansiva-ink);
    background: var(--ansiva-surface);
    border: 1px solid var(--ansiva-line);
    border-radius: 8px;
    padding: 7px 10px;
}

.stat-card__row--spaced {
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.stat-card__row-time {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stat-card__row-desc {
    color: var(--ansiva-slate);
}

/* ===================================================================
   Integrations section (Section 5)
   =================================================================== */
.integrations__inner {
    text-align: center;
}

.integrations__chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.integration-chip {
    font: 600 13px/1 var(--font-text);
    color: var(--ansiva-ink);
    background: var(--ansiva-surface);
    border: 1px solid var(--ansiva-line);
    border-radius: var(--r-pill);
    padding: 11px 16px;
    display: inline-flex;
    align-items: center;
}

.integrations__note {
    font: 400 13.5px/1.5 var(--font-text);
    color: var(--ansiva-slate);
    margin-top: 14px;
}

/* ===================================================================
   Trade Tabs section (Section 6)
   =================================================================== */
.trade-tabs {
    background: var(--ansiva-surface);
    border-top: 1px solid var(--ansiva-line);
    border-bottom: 1px solid var(--ansiva-line);
}

.trade-tabs__tablist-wrap {
    margin-top: var(--sp-6);
}

.trade-tabs__tablist {
    display: inline-flex;
    gap: 4px;
    background: var(--ansiva-surface);
    border: 1px solid var(--ansiva-line);
    border-radius: var(--r-pill);
    padding: 4px;
    max-width: 100%;
    overflow-x: auto;
}

.trade-tabs__tab {
    font: 600 13.5px/1 var(--font-text);
    padding: 0 18px;
    min-height: 44px;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
    background: transparent;
    color: var(--text-primary);
}

.trade-tabs__tab[aria-selected="true"] {
    background: var(--ansiva-answer);
    color: #fff;
}

.trade-tabs__panel {
    margin-top: var(--sp-6);
}

.trade-tabs__panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--sp-6);
    align-items: center;
}

.trade-tabs__copy {
    font: 400 17px/1.55 var(--font-text);
    color: var(--text-primary);
    margin: 0;
    max-width: 46ch;
}

.trade-tabs__cta {
    display: inline-block;
    font: 600 14px/1 var(--font-text);
    color: var(--ansiva-answer);
    text-decoration: none;
    margin-top: 14px;
    padding: 8px 0;
    min-height: 44px;
}

.trade-tabs__cta:hover {
    color: var(--ansiva-answer-hover);
}

.trade-tabs__screenshot {
    background: var(--ansiva-chalk);
    border: 1px dashed var(--ansiva-line);
    border-radius: var(--r-card);
    min-height: 190px;
    display: grid;
    place-items: center;
    color: var(--ansiva-slate);
    font: 400 13px/1.5 var(--font-text);
    text-align: center;
    padding: 16px;
}


/* ===================================================================
   Pricing section (Section 7)
   =================================================================== */
.pricing-section {
    padding: var(--sp-16) var(--sp-6);
}

.pricing-sub {
    font: 400 15px/1.55 var(--font-text);
    color: var(--ansiva-slate);
    margin: 0;
}

.pricing-grid {
    margin-top: var(--sp-8);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-4);
}

/* PricingCard base */
.pricing-card {
    background: var(--ansiva-surface);
    border: 1px solid var(--ansiva-line);
    border-radius: var(--r-card);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
}

.pricing-card--highlighted {
    border: 1.5px solid var(--ansiva-answer);
}

.pricing-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.pricing-card__name {
    font: 600 16px/1.3 var(--font-display);
    color: var(--ansiva-ink);
}

.pricing-card__badge {
    font: 600 11px/1 var(--font-text);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--r-pill);
    padding: 4px 10px;
    background: var(--ansiva-answer-tint);
    color: var(--ansiva-answer);
}

.pricing-card__price {
    margin-top: 10px;
    font: 600 40px/1.1 var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
    color: var(--ansiva-ink);
}

.pricing-card__per {
    font: 400 14px/1 var(--font-text);
    color: var(--ansiva-slate);
    letter-spacing: 0;
}

.pricing-card__minutes {
    font: 400 14px/1.5 var(--font-text);
    color: var(--ansiva-slate);
    margin-top: 2px;
}

.pricing-card__features {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
    flex: 1;
}

.pricing-card__features li {
    display: flex;
    gap: 9px;
    font: 400 14px/1.5 var(--font-text);
    color: var(--ansiva-ink);
}

.pricing-card__features svg {
    flex: none;
    margin-top: 3px;
}

.pricing-card__action {
    margin-top: 16px;
    display: grid;
}

/* Pricing notes (spend alert / hard-cap) */
.pricing-notes {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--sp-6);
    font: 400 13.5px/1.5 var(--font-text);
    color: var(--ansiva-slate);
    text-align: center;
}

/* Pricing trial box */
.pricing-trial {
    margin-top: var(--sp-6);
    background: var(--ansiva-surface);
    border: 1px solid var(--ansiva-line);
    border-radius: var(--r-section);
    padding: var(--sp-6);
    text-align: center;
}

.pricing-trial__title {
    font: var(--text-h3);
    color: var(--ansiva-ink);
}

.pricing-trial__desc {
    font: 400 15px/1.55 var(--font-text);
    color: var(--ansiva-slate);
    margin: 8px auto 0;
    max-width: 58ch;
}

/* AWS Marketplace line */
.pricing-aws {
    font: 400 12.5px/1.5 var(--font-text);
    color: var(--ansiva-slate);
    text-align: center;
    margin-top: 14px;
}


/* ===================================================================
   Trust Band section (Section 8)
   =================================================================== */
.trust-band {
    padding: var(--sp-12) var(--sp-6);
}

.trust-band__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-6);
}

.trust-band__statement {
    font: 600 16px/1.5 var(--font-display);
    color: var(--ansiva-chalk);
    margin: 0;
    text-align: center;
}


/* ===================================================================
   Comparison Line section (Section 9)
   =================================================================== */
.comparison-line {
    text-align: center;
}

.comparison-line__statement {
    font: var(--text-h2);
    letter-spacing: -0.015em;
    color: var(--ansiva-ink);
    margin: 0;
}


/* ===================================================================
   FAQ Accordion section (Section 10)
   =================================================================== */
.faq-section {
    padding: 0 var(--sp-6) var(--sp-16);
}

.faq-inner {
    max-width: 820px;
    margin: 0 auto;
}

.faq-inner .section-head {
    margin-bottom: var(--sp-6);
}

/* Accordion container */
.accordion {
    background: var(--ansiva-surface);
    border: 1px solid var(--ansiva-line);
    border-radius: var(--r-card);
    overflow: hidden;
}

/* Accordion item borders */
.accordion__item+.accordion__item {
    border-top: 1px solid var(--ansiva-line);
}

/* Accordion trigger button */
.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 16px 20px;
    min-height: 44px;
    font: 600 15px/1.4 var(--font-text);
    color: var(--ansiva-ink);
}

/* Accordion toggle icon */
.accordion__icon {
    flex: none;
    color: var(--ansiva-answer);
    transition: transform var(--transition);
    font: 400 22px/1 var(--font-text);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
    transform: rotate(45deg);
}

/* Accordion content panel */
.accordion__panel {
    padding: 0 20px 18px;
}

.accordion__panel p {
    margin: 0;
    font: 400 15px/1.55 var(--font-text);
    color: var(--ansiva-ink);
    max-width: 64ch;
}