/* ==========================================================================
   Wick Journal Landing Page Styles
   Mobile-First Approach

   Design System v2 ("Ledger") pilot — this page loads design-system-v2.css.
   v2 is READ-ONLY: page-specific styles live here. Tokens used here are v2
   (--canvas/--panel/--rule/--text/--muted/--faint/--mark, --f-display/--f-ui/
   --f-num, --r/--r-pill, --d-fast/--e-out). Bebas Neue is kept ONLY for the
   hero promo ticket (signed-off exception, Marcos 2026-09-18).
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   Landing-only tokens — sample-landing.css § 1

   Values adapted to this page's existing rhythm rather than the sample's
   defaults: the page's sections are max-width 1200px with 1.5rem/2rem side
   padding, so --l-max and the gutters match that or the nav would sit out of
   line with every section below it. Structure is the sample's; only the
   measurements are ours.
   ========================================================================== */
:root {
    --l-max: 1200px;
    --l-gutter: 1.5rem;
    --l-gutter-lg: 2rem;
    --l-nav-h: 64px;
}

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

/* Sample switches gutters at 1024px; this page's sections switch at 768px, so
   the wrap follows the page to stay aligned. */
@media (min-width: 768px) {
    .l-wrap {
        padding: 0 var(--l-gutter-lg);
    }
}


/* ==========================================================================
   Section: Navigation — sample-landing.css § 3 (.l-topnav)

   Transparent over the hero, then a panel once the page scrolls; the motion
   layer adds `.is-stuck` past 24px. Without JS it stays transparent, which is
   still correct. Replaces an earlier hand-written `.topnav` that approximated
   this but was `position:fixed` and always-frosted (CP06 checklist 14).
   ========================================================================== */
.l-topnav {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    border-bottom: 1px solid transparent;
    transition: background var(--d-base), border-color var(--d-base),
                backdrop-filter var(--d-base);
}

.l-topnav.is-stuck {
    background: color-mix(in srgb, var(--canvas) 86%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--rule);
}

.l-topnav-in {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    height: var(--l-nav-h);
}

.l-topnav-links {
    display: none;
    gap: var(--s-6);
    margin-left: var(--s-6);
}

@media (min-width: 900px) {
    .l-topnav-links {
        display: flex;
    }
}

.l-topnav-links a {
    color: var(--muted);
    font-size: 14px;
    transition: color var(--d-fast);
}

.l-topnav-links a:hover {
    color: var(--text);
}

.l-topnav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

/* Brand slot carries the real lockup instead of the sample's text wordmark —
   same substitution the signed-off footer and register.html make. */
.l-topnav .brand {
    display: inline-flex;
    align-items: center;
}

.l-topnav .brand img {
    height: 2.75rem;
    width: auto;
    max-width: 100%;
    display: block;
}

/* The nav is in flow now, so anchor targets would land beneath it. */
#features,
#pricing,
#faq {
    scroll-margin-top: var(--l-nav-h);
}


/* ==========================================================================
   Section: Hero — vertical theatrical stack
   ==========================================================================
   The headline owns the entire first viewport at maximum display scale; one
   primary action; the Mountain dawn scene is a full-width cinematic band
   bleeding off the bottom edge — not a bordered card floating beside copy.
   Concept assignment via impeccable concept-seed (scope surface, persuade,
   key 3d7506a4). Palette is the exact dawn gradient from the real in-app
   Mountain scene (css/features/mountain/base.css .mountain-root). */

.hero {
    position: relative;
    /* The nav used to float over the hero; now it occupies flow above it, so the
       hero takes the viewport minus the nav and the pair still fills 100vh. */
    min-height: calc(100vh - var(--l-nav-h));
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg,
        #09090b 0%,
        #0b0f26 12%,
        #191a3f 32%,
        #432f5c 55%,
        #8a4f66 74%,
        #d9826a 90%,
        #f2a06b 100%);
    overflow: hidden;
}

.hero-inner {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    /* Was 7rem under the fixed nav: 112px from the viewport top, minus the 60px
       nav, left 52px clear. In flow that same gap is 3.25rem. */
    padding: 3.25rem 1.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-kicker {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--mark);
    margin: 0 0 1.5rem;
}

/* Forced two-line break on small screens: "A Trading Journal" /
   "Built for Prop Firm Futures Traders" (Marcos, 2026-09-18) */
@media (max-width: 640px) {
    .hero-kicker-line {
        display: block;
    }
}

.hero-title {
    font-family: var(--f-display);
    font-size: clamp(2.75rem, 6vw + 1rem, 5.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 1.5rem;
}

.hero-title-accent {
    color: var(--mark);
}

.hero-description {
    font-size: 1.125rem;
    color: var(--muted);
    max-width: 56ch;
    margin: 0 auto 2.25rem;
}

.hero-cta {
    display: flex;
    justify-content: center;
}

.btn-hero {
    font-size: 1.0625rem;
    padding: 1rem 2.25rem;
}

/* The dawn gradient sky lives on .hero; the mountain SVG is a
   bottom-anchored band with a clamped height, so the scene keeps consistent
   proportions across devices instead of being magnified to fill 100vh and
   clipped by overflow. Peaks/trail/marker stay pinned to the hero's bottom
   edge (xMidYMax) — copy reads over the dark upper sky. */
.hero-scene {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(260px, 42vh, 460px);
    z-index: 0;
}

.hero-scene-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mtn-layer {
    fill: #0b0f26;
}
.mtn-back { opacity: 0.35; }
.mtn-mid { opacity: 0.55; }
.mtn-front { opacity: 0.88; }

.mtn-trail {
    fill: none;
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 0.5 9;
}

.mtn-pack-dot {
    fill: rgba(255, 255, 255, 0.45);
}

/* The climber marker uses the dawn palette's warm amber (the same hue the
   in-app scene uses for its YOU marker) — never the P&L green, which would
   read as a gain signal (DESIGN.md: Signal Colors Rule). */
.mtn-you-dot {
    fill: #ffb454;
    filter: drop-shadow(0 0 6px rgba(255, 180, 84, 0.75));
    transform-box: fill-box;
    transform-origin: center;
    animation: mtn-you-pulse 2.4s ease-in-out infinite;
}

.mtn-you-tag-bg {
    fill: rgba(9, 9, 11, 0.6);
}

.mtn-you-tag-text {
    font-family: var(--f-ui);
    font-size: 13px;
    font-weight: 600;
    fill: var(--text);
}

@keyframes mtn-you-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.85; }
}

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-inner {
    animation: hero-rise 700ms ease both;
}

.hero-scene {
    animation: hero-rise 700ms ease 120ms both;
}

@media (prefers-reduced-motion: reduce) {
    .hero-inner,
    .hero-scene,
    .mtn-you-dot {
        animation: none;
    }
}


/* ==========================================================================
   Section: Hero promo — launch-offer urgency card (CP06 item 3)
   ==========================================================================
   Floats directly above the hero CTA, notch pointing down at the button:
   promo → action, one eye-path, first paint. Styled as a slapped-on ticket —
   dashed perforation border, warm tinted background, slight tilt, slow bob —
   so it reads as temporary (urgency now, gone later). Amber (#ffb454, the
   hero's "You" marker hue) pops against the dark dawn sky — never P&L green
   (DESIGN.md: Signal Colors Rule). Bebas Neue (kicker + number) cuts against
   the serif stack for extra urgency. The hero CTA is the claim action. */

.hero-promo {
    position: relative;
    max-width: 440px;
    width: 100%;
    margin: 0 auto 2rem;
    padding: 1.375rem 1.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(255, 180, 84, 0.14) 0%, rgba(217, 130, 106, 0.10) 100%),
                rgba(9, 9, 11, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px dashed rgba(255, 180, 84, 0.55);
    border-radius: var(--r);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55),
                0 8px 40px rgba(255, 180, 84, 0.14);
    animation: hero-promo-float 4s ease-in-out infinite,
               hero-promo-glow 3.2s ease-in-out infinite;
}

/* Notch pointing at the CTA below */
.hero-promo::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 16px;
    height: 16px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(20, 14, 10, 0.92);
    border-right: 1px dashed rgba(255, 180, 84, 0.55);
    border-bottom: 1px dashed rgba(255, 180, 84, 0.55);
}

.hero-promo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Bebas Neue", sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffb454;
    margin: 0 0 0.5rem;
}

.hero-promo-text {
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--text);
    margin: 0 0 1rem;
}

.hero-promo-text strong {
    color: #ffb454;
    font-weight: 700;
}

.hero-promo-meter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hero-promo-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
}

.hero-promo-number {
    font-family: "Bebas Neue", sans-serif;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #ffb454;
    text-shadow: 0 0 18px rgba(255, 180, 84, 0.45);
}

.hero-promo-count span:last-child {
    font-size: 0.875rem;
    color: var(--muted);
}

.hero-promo-bar {
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--panel-2);
    border: 1px solid var(--rule);
    overflow: hidden;
}

.hero-promo-fill {
    height: 100%;
    width: 0;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, #d9826a 0%, #ffb454 100%);
    transition: width 600ms ease;
}

@keyframes hero-promo-float {
    0%, 100% { transform: translateY(0) rotate(-1.2deg); }
    50%      { transform: translateY(-7px) rotate(-1.2deg); }
}

@keyframes hero-promo-glow {
    0%, 100% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 8px 40px rgba(255, 180, 84, 0.14); }
    50%      { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 8px 52px rgba(255, 180, 84, 0.26); }
}

/* Compact the promo on small screens so the CTA stays in the first paint */
@media (max-width: 640px) {
    .hero-description {
        font-size: 1.0625rem;
        margin-bottom: 1.5rem;
    }

    .hero-promo {
        padding: 1rem 1.25rem 1.125rem;
        margin-bottom: 1.5rem;
    }

    .hero-promo-text {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .hero-promo-number {
        font-size: 1.875rem;
    }
}

@media (max-width: 480px) {
    .hero-promo-count {
        flex-direction: column;
        align-items: center;
        gap: 0.125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-promo,
    .hero-promo-fill {
        animation: none;
        transition: none;
    }
}


/* ==========================================================================
   Section: Features (CP06 item 4)
   ==========================================================================
   Differentiator-led: one dominant lead card (peer benchmarking) + a
   supporting trio. Not a flat same-weight grid; not numbered. */

.features {
    padding: 4rem 1.5rem;
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-kicker {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mark);
    margin: 0 0 0.75rem;
}

.section-title {
    font-family: var(--f-display);
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
}

.section-description {
    font-size: 1rem;
    color: var(--muted);
    max-width: 600px;
    margin: 0 auto;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Feature rows (Marcos 2026-09-19): the card wraps ONLY the copy; the
   stage sits free of card chrome beside it. 1|2 split on desktop, flipped
   on even rows; mobile stacks copy first, stage last. */
.feature-card-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.feature-card-split .feature-copy {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    padding: 1.5rem;
}

/* Feature stage (CP20, MZW-6294): the product view rebuilt from separate
   pieces (scene + HUD crops) that GSAP assembles when the row scrolls into
   view (js/landing.js). The CSS is the finished composition, so no JS,
   reduced motion or a failed GSAP load all show the landed frame.
   Each stage keeps its capture canvas as its aspect ratio; piece positions
   are % of that canvas so the stage scales at any width. */
.feature-stage {
    position: relative;
    margin: 0 0 1.25rem;
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--panel-2);
}

.feature-stage img {
    position: absolute;
    display: block;
    height: auto;
}

.feature-stage .stage-scene {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 25%; /* the push-in lands on the summit */
}

/* Peer Benchmarking: the Mountain view's own HUD geometry
   (css/features/mountain/*: top bar padding 18/22px, tape at 74px) on the
   1707 × 952 canvas the HUD crops were captured at. */
.feature-stage[data-stage="peer"] { aspect-ratio: 1707 / 952; }

.stage-title   { left: 1.58%;  top: 2.31%; width: 16.99%; }
.stage-compare { right: 1.58%; top: 2.31%; width: 25.31%; }
.stage-ticker  { left: 1.58%;  top: 9.66%; width: 96.78%; }

/* Effortless Journaling: the Import dialog over the Trade Journal (1655 ×
   1016 canvas). The dialog frame is v2's .sheet (--panel, --rule hairline);
   the step images are its interior, normalised to one width with the title
   at the same offset, so the header holds still between steps. Top-anchored
   and sized so the tallest step (Preview) fits; the finished frame is the
   last step (Results), the only one in flow. */
.feature-stage[data-stage="journal"] { aspect-ratio: 1655 / 1016; }

.stage-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 9, 8, .72); /* v2 dialog::backdrop */
}

.stage-dialog {
    position: absolute;
    left: 28.25%;
    top: 4.18%;
    width: 43.5%;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--r);
}

.stage-dialog .stage-step {
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
}

.stage-dialog .stage-step:last-child {
    position: relative;
    opacity: 1;
}

/* Performance Analytics: the Performance view's pieces on a 1643 × 1025
   canvas. Everything outside the pieces is the page background, so the
   stage itself is --canvas and there's no scene image. The donut carries a
   conic mask whose --sweep (0→1 turn) the timeline animates, drawing the
   ring on from 12 o'clock like v2's .js-ring; at rest --sweep is 1 (whole
   image). The mask is centred on the ring (169, 123.5 in the crop). */
.feature-stage[data-stage="performance"] {
    aspect-ratio: 1643 / 1025;
    background: var(--canvas);
}

.stage-pnl      { left: 0.06%;  top: 0.88%;  width: 36.21%; }
.stage-donut    { right: 0;     top: 0.88%;  width: 20.75%; }
.stage-kpis     { left: 0;      top: 27.02%; width: 100%; }
.stage-calendar { left: 0;      top: 39.8%;  width: 100%; }

/* Prop-Firm Ready: the Accounts view's header and nine account cards in
   three rows of v2 .cols.thirds, on a 1589 × 818 canvas (trimmed to an even
   14px side margin, ending above the next row); page background elsewhere. */
.feature-stage[data-stage="accounts"] {
    aspect-ratio: 1589 / 818;
    background: var(--canvas);
}

.stage-header { left: 0; top: 0; width: 100%; }

.stage-card-1, .stage-card-4, .stage-card-7 { left: 0.88%;  width: 32.10%; }
.stage-card-2, .stage-card-5, .stage-card-8 { left: 33.98%; width: 32.03%; }
.stage-card-3, .stage-card-6, .stage-card-9 { left: 67.02%; width: 32.10%; }
.stage-card-1, .stage-card-2, .stage-card-3 { top: 16.26%; }
.stage-card-4, .stage-card-5, .stage-card-6 { top: 44.25%; }
.stage-card-7, .stage-card-8, .stage-card-9 { top: 72.25%; }

.stage-donut {
    -webkit-mask-image: conic-gradient(from 0deg at 49.56% 50%, #000 calc(var(--sweep, 1) * 1turn), transparent 0);
    mask-image: conic-gradient(from 0deg at 49.56% 50%, #000 calc(var(--sweep, 1) * 1turn), transparent 0);
}

@media (max-width: 767px) {
    .feature-copy {
        order: 1;
    }

    .feature-stage {
        order: 2;
    }
}

.feature-title {
    font-family: var(--f-display);
    font-size: var(--t-h3);
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.feature-description {
    font-size: 0.9375rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ==========================================================================
   Section: How It Works
   ========================================================================== */
.how-it-works {
    padding: 4rem 1.5rem;
    background: var(--panel);
}

.how-it-works-container {
    max-width: 1200px;
    margin: 0 auto;
}

.steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.step {
    text-align: center;
}

.step-number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mark);
    color: var(--canvas);
    font-family: var(--f-num);
    border-radius: var(--r-pill);
    font-weight: 700;
    margin: 0 auto 1rem;
}

.step-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.step-description {
    font-size: 0.9375rem;
    color: var(--muted);
}

/* ==========================================================================
   Section: Target Audience
   ========================================================================== */
.audience {
    padding: 4rem 1.5rem;
}

.audience-container {
    max-width: 1200px;
    margin: 0 auto;
}

.audience-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
}

.audience-card {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.audience-icon {
    font-size: 1.5rem;
}

.audience-text {
    font-weight: 500;
}

/* ==========================================================================
   Section: Tech Stack
   ========================================================================== */
.tech-stack {
    padding: 3rem 1.5rem;
    background: var(--panel);
}

.tech-stack-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.tech-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.tech-badge {
    padding: 0.5rem 1rem;
    background: var(--panel-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    font-size: 0.875rem;
    color: var(--muted);
}


/* ==========================================================================
   Tablet & Desktop Styles (min-width: 768px)
   ========================================================================== */
@media (min-width: 768px) {
    .hero {
        padding-top: 0;
    }

    /* Was 10rem while the nav was fixed and overlapped the hero: 160px from the
       viewport top, minus the 68px nav, left 92px of clear space. The nav is in
       flow now, so the same 92px gap is 5.75rem of padding. */
    .hero-inner {
        padding-top: 5.75rem;
    }

    .features {
        padding: 6rem 2rem;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Roomier title → description rhythm on large screens only */
    .feature-title {
        margin-bottom: 1rem;
    }

    .feature-card-split {
        grid-template-columns: 1fr 2fr;
        gap: 3rem;
    }

    .feature-card-split .feature-stage {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    .feature-card-split .feature-copy {
        grid-column: 1;
        grid-row: 1;
        padding: 2rem;
    }

    /* Flipped row: stage on the left, copy card on the right */
    .feature-card-split-flip {
        grid-template-columns: 2fr 1fr;
    }

    .feature-card-split-flip .feature-stage {
        grid-column: 1;
    }

    .feature-card-split-flip .feature-copy {
        grid-column: 2;
    }

    .how-it-works,
    .audience {
        padding: 6rem 2rem;
    }

    .steps {
        grid-template-columns: repeat(3, 1fr);
    }

    .audience-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================================================
   Large Desktop Styles (min-width: 1024px)
   ========================================================================== */
@media (min-width: 1024px) {

    .audience-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tech-stack-title {
    font-size: 1.25rem;
}

/* ==========================================================================
   Section: Pricing (CP06 item 7). Adapted from
   backend/docs/_misc/sample_v2_elements — that sample was already
   built on v2 tokens (--mark/--panel/--rule/--text/--muted/--faint/--win,
   --f-display, --s-*, --r/--r-pill, --d-fast), so this is a rename + a
   reduction from a 3-plan grid to Wick Journal's single tier. The sample's
   was/now promo-discount price substitution was dropped: our promo is a full
   fee waiver for the first 100 accounts, not a percentage discount, so it's
   represented as a banner above the card instead of a struck-through price.
   ========================================================================== */
.pricing {
    padding: 4rem 1.5rem;
}

.pricing-container {
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-plans {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 900px) {
    .pricing-plans {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.pricing-plan {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    padding: var(--s-6);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.pricing-plan--featured {
    border-color: color-mix(in srgb, var(--mark) 40%, transparent);
    background: var(--panel-2);
}

.pricing-plan-flag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mark);
    color: var(--canvas);
    border-radius: var(--r-pill);
    padding: 3px 11px;
    font-size: var(--t-2xs);
    font-weight: 600;
    white-space: nowrap;
}

.pricing-plan h3 {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: 26px;
    letter-spacing: -0.02em;
}

.pricing-plan-sub {
    color: var(--faint);
    font-size: var(--t-xs);
    margin-top: 4px;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.pricing-price-now {
    display: flex;
    align-items: baseline;
    font-family: var(--f-display);
    font-size: clamp(40px, 5vw, 54px);
    line-height: 1;
    letter-spacing: -0.035em;
}

.pricing-price-now .cur {
    font-size: 0.45em;
    color: var(--muted);
    align-self: flex-start;
    margin-top: 0.22em;
}

/* Diagonal cross-out mark instead of text-decoration: line-through, so the
   original price styling (color/weight/size) stays intact — only a mark is
   overlaid. --mark, not --loss/--win, per the Signal Colors Rule (those two
   are reserved for P&L meaning only). */
.pricing-price--struck .pricing-price-now {
    position: relative;
}

.pricing-price--struck .pricing-price-now::after {
    content: "";
    position: absolute;
    left: 0%;
    right: -6%;
    top: 50%;
    height: 2px;
    background: var(--mark);
    transform: translateY(-50%) rotate(-20deg);
    pointer-events: none;
}

.pricing-price-per {
    color: var(--muted);
    font-size: var(--t-sm);
}

.pricing-price-note {
    color: var(--faint);
    font-size: var(--t-xs);
    margin-top: 10px;
}

.pricing-plan-cta {
    width: 100%;
    margin-top: 22px;
    height: 42px;
}

.pricing-plan-list {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 13px;
    text-align: left;
}

.pricing-plan-list li {
    display: flex;
    gap: 11px;
    color: var(--muted);
    font-size: var(--t-sm);
    line-height: 1.45;
}

.pricing-plan-list li::before {
    content: "";
    width: 14px;
    height: 8px;
    flex: none;
    margin-top: 5px;
    border-left: 1.5px solid var(--win);
    border-bottom: 1.5px solid var(--win);
    transform: rotate(-45deg) scale(0.82);
    transform-origin: center;
}

/* ==========================================================================
   Section: FAQ (CP06 item 8). Adapted from
   backend/docs/_misc/sample_v2_elements — sticky aside + native
   <details>/<summary> accordion, all on v2 tokens already (--mark/--rule/
   --muted, --f-display, --d-base/--e-out).
   ========================================================================== */
.faq {
    padding: 4rem 1.5rem;
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
}

.faq-grid {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 900px) {
    .faq-grid {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
        gap: 4rem;
    }

    .faq-aside {
        position: sticky;
        top: 2rem;
    }
}

.faq-aside h2 {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(1.875rem, 3.6vw, 2.625rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 0 0 0.75rem;
}

.faq-lede {
    color: var(--muted);
    font-size: 0.9375rem;
}

.faq-list {
    border-top: 1px solid var(--rule);
}

.faq-item {
    border-bottom: 1px solid var(--rule);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.375rem 0;
    font-family: var(--f-display);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    transition: color var(--d-fast);
}

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

.faq-item summary:hover,
.faq-item[open] summary {
    color: var(--mark);
}

.faq-mark {
    position: relative;
    width: 14px;
    height: 14px;
    flex: none;
    margin-top: 7px;
}

.faq-mark::before,
.faq-mark::after {
    content: "";
    position: absolute;
    background: currentColor;
    left: 50%;
    top: 50%;
    transition: transform var(--d-base) var(--e-out), opacity var(--d-base);
}

.faq-mark::before {
    width: 14px;
    height: 1.5px;
    transform: translate(-50%, -50%);
}

.faq-mark::after {
    width: 1.5px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.faq-item[open] .faq-mark::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.faq-body {
    padding: 0 0 1.5rem;
    max-width: 62ch;
}

.faq-body p {
    color: var(--muted);
    font-size: 0.90625rem;
}

.faq-body p + p {
    margin-top: 0.75rem;
}

.faq-body a {
    color: var(--mark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Opening slide. Suppressed under reduced motion by the design system's
   global override, which is why the height is animated, not the display. */
@supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq-item::details-content {
        height: 0;
        overflow: hidden;
        transition: height var(--d-base) var(--e-out), content-visibility var(--d-base) allow-discrete;
    }
    .faq-item[open]::details-content {
        height: auto;
    }
}

/* ==========================================================================
   Section: Footer (CP06 item 9). Adapted from
   backend/docs/_misc/sample_v2_elements's .l-footer — already on v2
   tokens (--rule/--text/--muted/--faint, --t-xs/--t-sm/--t-2xs, --s-4).
   ========================================================================== */
.footer {
    border-top: 1px solid var(--rule);
    padding: 3rem 1.5rem 2.5rem;
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
    .footer-grid {
        grid-template-columns: 1.6fr repeat(3, 1fr);
    }
}

.footer-brand {
    grid-column: 1 / -1;
}

@media (min-width: 900px) {
    .footer-brand {
        grid-column: auto;
    }
}

.footer-brand img {
    height: 2.75rem;
    width: auto;
}

.footer-brand .faint {
    font-size: 0.8125rem;
    margin-top: 0.75rem;
    max-width: 32ch;
}

.footer-grid h4 {
    color: var(--text);
    font-size: var(--t-xs);
    font-weight: 500;
    margin: 0 0 0.875rem;
}

.footer-grid ul {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.footer-grid a {
    color: var(--muted);
    font-size: var(--t-sm);
    transition: color var(--d-fast);
}

.footer-grid a:hover {
    color: var(--text);
}

.footer-base {
    max-width: 1200px;
    margin: 2.75rem auto 0;
    padding-top: 1.375rem;
    border-top: 1px solid var(--rule);
    color: var(--faint);
    font-size: var(--t-2xs);
}

/* Paid phase (Sprint 09 CP4): js/seats.js swaps data-phase="free" for "paid"
   once the free seats are gone. Author display rules outrank the UA's
   [hidden], so the swap needs this guard. */
[data-phase][hidden],[data-promo][hidden],[data-no-promo][hidden]{display:none}