/* ==========================================================================
   RAQT public site — marketing layer
   --------------------------------------------------------------------------
   Sits on top of _content/RAQT.WebComponents/raqt-web.css, which owns every
   colour, radius, gradient and glow. Nothing here redefines a token: if a
   value looks brand-ish it is a var(), so the site and the member app cannot
   drift apart. This file only adds the shapes a marketing page needs and the
   member app has no use for — a sticky header, hero bands, feature grids,
   step lists, FAQ disclosures, comparison tables.

   Conventions inherited from the app, kept deliberately:
     - headings are weight 900 with negative tracking, never 600/700
     - all-caps is only ever a kicker: <= .76rem, weight 800+, tracking >= .06em
     - every corner is a token radius; every CTA is a full pill
     - gradients are 135deg three-stop; is-brand default, is-sun for reward,
       is-ink for closing bands
     - hover moves transform + border + glow, never the background of a card
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 900; letter-spacing: -.02em; color: var(--ink-900); }
p { margin: 0; }
img { max-width: 100%; }

a { color: var(--brand-700); }

/* The design system styles .raqt-gradient-btn for <button> — the member app renders it
   through GradientButton — and never clears the anchor underline. Every CTA on this site
   is a link, so they all arrived underlined. Same for cards that are whole-area links. */
a.raqt-gradient-btn,
a.raqt-gradient-btn:hover,
a.card,
a.card:hover {
    text-decoration: none;
}

a.card { color: inherit; display: flex; }

/* A CTA that is not yet wired — reads as present but inactive rather than absent. */
.raqt-gradient-btn.is-disabled {
    opacity: .55;
    box-shadow: none;
    cursor: default;
    align-self: flex-start;
}

/* Same idea on the quiet button. Dashed, because two greyed-out solid buttons side by side
   read as a rendering fault rather than as a deliberate "not yet". */
.btn-ghost.is-disabled {
    border-style: dashed;
    color: var(--ink-400);
    cursor: default;
}

.btn-ghost.is-disabled:hover { border-color: var(--ink-200); color: var(--ink-400); }

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .75rem 1.25rem;
    background: #fff;
    border-radius: 0 0 var(--radius-xl) 0;
    font-weight: 800;
}

.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.hd {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ink-100);
}

.hd-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: .7rem 1.5rem;
}

.hd-brand { display: inline-flex; align-items: center; flex: none; }

.hd-nav { display: flex; align-items: center; gap: .35rem; margin-left: .75rem; }

.hd-nav a {
    padding: .5rem .75rem;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--ink-600);
    text-decoration: none;
    transition: color .16s ease, background-color .16s ease;
}

.hd-nav a:hover { color: var(--brand-700); background: var(--brand-50); }

.hd-actions { display: flex; align-items: center; gap: .85rem; margin-left: auto; }

.hd-signin {
    font-size: .84rem;
    font-weight: 800;
    color: var(--ink-700);
    text-decoration: none;
}

.hd-signin:hover { color: var(--brand-700); }

/* The header CTA is the one place the pill shrinks below the design-system size. */
.hd-cta { padding: .6rem 1.15rem; font-size: .84rem; font-weight: 800; }

/* Mobile disclosure menu */
.hd-menu { display: none; margin-left: auto; position: relative; }
.hd-menu summary { list-style: none; cursor: pointer; padding: .4rem; }
.hd-menu summary::-webkit-details-marker { display: none; }
.hd-menu summary:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; border-radius: var(--radius-xl); }

.hd-burger { display: block; width: 22px; }
.hd-burger span {
    display: block;
    height: 2px;
    margin: 4px 0;
    border-radius: 2px;
    background: var(--ink-800);
}

.hd-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .6rem);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    width: min(74vw, 260px);
    padding: .6rem;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-2xl);
    box-shadow: 0 18px 44px rgba(15, 22, 31, .14);
}

.hd-menu-panel a {
    padding: .6rem .75rem;
    border-radius: var(--radius-xl);
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink-700);
    text-decoration: none;
}

.hd-menu-panel a:hover { background: var(--brand-50); color: var(--brand-700); }
.hd-menu-panel a.raqt-gradient-btn { color: #fff; margin-top: .2rem; padding: .7rem 1rem; font-size: .88rem; }
.hd-menu-panel hr { border: 0; border-top: 1px solid var(--ink-100); margin: .4rem .25rem; }

@media (max-width: 979px) {
    .hd-nav, .hd-actions { display: none; }
    .hd-menu { display: block; }
}

/* --------------------------------------------------------------------------
   Page rhythm
   -------------------------------------------------------------------------- */

main { display: block; min-height: 60vh; }

.pg {
    max-width: 1080px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4.5rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.pg.is-wide { max-width: 1180px; }
.pg.is-narrow { max-width: 780px; }

.sec { display: flex; flex-direction: column; gap: 1.25rem; }

/* Section heading: kicker, 900 title with the 72x4 gradient underline, sub. */
.sec-head { display: flex; flex-direction: column; gap: .55rem; }

.sec-title {
    position: relative;
    margin: 0;
    padding-bottom: .7rem;
    font-size: 1.5rem;
    letter-spacing: -.025em;
}

.sec-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 4px;
    border-radius: 999px;
    background-image: var(--raqt-gradient-brand);
}

.sec-sub {
    max-width: 68ch;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink-600);
}

.sec.is-centered { align-items: center; text-align: center; }
.sec.is-centered .sec-title::after { left: 50%; transform: translateX(-50%); }
.sec.is-centered .sec-sub { text-align: center; }

@media (max-width: 767px) {
    .pg { gap: 2.25rem; padding: 1.5rem 1.15rem 3.5rem; }
    .sec-title { font-size: 1.3rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero-inner {
    position: relative;
    z-index: 1;
    padding: 3rem 3rem 3.25rem;
}

.hero-kicker { color: rgba(255, 255, 255, .85) !important; }

.hero-title {
    font-size: clamp(2.1rem, 4.6vw, 3.2rem);
    letter-spacing: -.035em;
    line-height: 1.05;
    color: #fff;
    text-wrap: balance;
    margin: 0;
}

/* The one line of the headline that gets the sun ramp — the app uses sun for the
   "reward" note, and on a green gradient it is the only tint with enough contrast. */
.hero-title em { font-style: normal; color: var(--sun-300); }

.hero-sub {
    max-width: 54ch;
    margin-top: .9rem;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; }

/* Ghost CTA on a gradient: white fill, ink text — the app's Player page pattern. */
.btn-ghost-light {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 1rem 1.6rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 800;
    color: var(--ink-900);
    text-decoration: none;
    transition: background-color .16s ease, transform .12s ease;
}

.btn-ghost-light:hover { background: #fff; }
.btn-ghost-light:active { transform: scale(.98); }
.btn-ghost-light:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Ghost CTA on light: 2px border, the app's .ghost. */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .9rem 1.5rem;
    border: 2px solid var(--ink-200);
    border-radius: 999px;
    background: none;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 800;
    color: var(--ink-700);
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease;
}

.btn-ghost:hover { border-color: var(--brand-400); color: var(--brand-700); }

.hero-note {
    margin-top: 1.1rem;
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .78);
}

/* Translucent pill used for "no card required"-style notes on a gradient. */
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #fff;
}

.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }

@media (max-width: 767px) {
    .hero-inner { padding: 2.1rem 1.4rem 2.4rem; }
    .hero-sub { font-size: .95rem; }
}

/* --------------------------------------------------------------------------
   Stat strip — the white card that overlaps the hero
   -------------------------------------------------------------------------- */

.stats {
    display: grid;
    /* Four tiles: 4 across, then 2+2. Never 3+1. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .25rem;
    margin: -2.25rem 1.5rem 0;
    padding: 1.4rem 1rem;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-3xl);
    box-shadow: 0 5px 12px rgba(146, 208, 80, .08);
    position: relative;
    z-index: 2;
}

.stat { text-align: center; padding: .35rem .75rem; }

.stat-value {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--ink-900);
}

.stat-value.is-brand { color: var(--brand-600); }

.stat-label {
    margin-top: .3rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-400);
}

@media (max-width: 767px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: -1.5rem .75rem 0; padding: 1rem .5rem; }
    .stat-value { font-size: 1.4rem; }
}

/* --------------------------------------------------------------------------
   Card grids
   -------------------------------------------------------------------------- */

/* Explicit column counts, NOT auto-fit. auto-fit packs in as many columns as happen to
   fit, so a six-card grid rendered 4 + 2 on a wide screen and left an orphan row. The
   count is now fixed per breakpoint, and every step halves cleanly:
     is-3 with 6 cards -> 3+3, then 2+2+2, then 1 per row
     is-4 with 4 cards -> 4, then 2+2, then 1 per row
   A grid holding a single row (3 cards in is-3) keeps its columns until the mobile
   break rather than dropping to 2+1. */
.grid { display: grid; gap: 1rem; }
.grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 979px) {
    /* Only grids that already wrap need the halving — :has counts the children. */
    .grid.is-3:has(> :nth-child(4)),
    .grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .grid.is-2,
    .grid.is-3,
    .grid.is-4 { grid-template-columns: 1fr; }
}

.card {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-3xl);
    box-shadow: 0 5px 12px rgba(146, 208, 80, .08);
    transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}

.card.is-hover:hover {
    transform: translateY(-3px);
    border-color: var(--brand-200);
    box-shadow: var(--glow-brand);
}

.card-accent {
    border-color: var(--brand-200);
    background: linear-gradient(180deg, var(--brand-50), #fff 60%);
}

.card-sun {
    border-color: var(--sun-300);
    background: linear-gradient(180deg, var(--sun-50), #fff 65%);
    box-shadow: var(--glow-sun-sm);
}

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xl);
    background: var(--brand-50);
    color: var(--brand-600);
    flex: none;
}

.card-sun .card-icon { background: var(--sun-100); color: var(--sun-700); }

/* Icon paired with the title instead of stacked above it. On a narrow grid card the
   stacked tile reads fine, but on a full-width feature card it floats alone over a long
   heading and looks like a stray mark — beside the title it reads as a label. */
.card-head { display: flex; align-items: center; gap: .85rem; }

/* Filled variant for the one card that leads a page. The tinted tile is deliberately
   quiet in a grid of six; when a single card carries the call to action, that same
   quietness makes the icon disappear. */
.card-icon.is-solid { background: var(--brand-600); color: #fff; }

.card-title { font-size: 1rem; letter-spacing: -.01em; line-height: 1.3; }

.card-body {
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--ink-600);
}

.card-body strong { font-weight: 900; color: var(--ink-800); }

.card-tag {
    align-self: flex-start;
    padding: .18rem .6rem;
    border-radius: 999px;
    background: var(--brand-50);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-700);
}

.card-link {
    margin-top: auto;
    padding-top: .35rem;
    font-size: .78rem;
    font-weight: 800;
    color: var(--brand-600);
    text-decoration: none;
}

.card-link:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Photo frames
   --------------------------------------------------------------------------
   The gradient lives on the <figure>, not the <img>. When artwork is missing
   the img removes itself and the gradient remains, so the slot looks like a
   brand block instead of a broken image.
   -------------------------------------------------------------------------- */

.fig {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-3xl);
    background-image: var(--raqt-gradient-brand);
    box-shadow: var(--glow-brand-sm);
    line-height: 0;
}

.fig.is-wide { aspect-ratio: 16 / 9; }
.fig.is-photo { aspect-ratio: 4 / 3; }
.fig.is-square { aspect-ratio: 1 / 1; }
.fig.is-tall { aspect-ratio: 3 / 4; }

.fig-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A faint ball-arc motif so an empty slot reads as intentional, never as a gap. */
.fig.is-empty::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 78% 22%, rgba(255, 255, 255, .22), transparent 42%),
        radial-gradient(circle at 22% 82%, rgba(227, 242, 74, .3), transparent 46%);
}

.fig-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 1.25rem .9rem;
    background: linear-gradient(180deg, transparent, rgba(15, 22, 31, .72));
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

/* Full-bleed art behind a hero: sits under the gradient card's own aura. */
.hero-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: .34;
}

.hero-art .fig-img { mix-blend-mode: luminosity; }

/* --------------------------------------------------------------------------
   Numbered steps
   -------------------------------------------------------------------------- */

/* Same fixed-column rule as .grid — a four-step row must not render 3 + 1. */
.steps { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 979px) {
    .steps:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .steps,
    .steps:has(> :nth-child(4)) { grid-template-columns: 1fr; }
}

.step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.5rem 1.5rem 1.5rem;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-3xl);
    box-shadow: 0 5px 12px rgba(146, 208, 80, .08);
}

.step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-2xl);
    background-image: var(--raqt-gradient-brand);
    box-shadow: var(--glow-brand-sm);
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
}

.step-title { font-size: 1rem; letter-spacing: -.01em; }
.step-body { font-size: .88rem; font-weight: 500; line-height: 1.6; color: var(--ink-600); }

/* --------------------------------------------------------------------------
   Season calendar
   --------------------------------------------------------------------------
   A vertical timeline: the months sit in a fixed-width gutter with a rule
   running through them, so the year reads top-to-bottom at a glance.
   -------------------------------------------------------------------------- */

.cal { display: flex; flex-direction: column; }

.cal-row {
    display: grid;
    /* Wide enough for the longest label ("AGO/SET – NOV") so every chip is the same
       width — the connecting rule below is centred on that column, and a variable-width
       chip would leave the line emerging off-centre. */
    grid-template-columns: 8.75rem minmax(0, 1fr);
    gap: 1.25rem;
    padding: 0 0 1.4rem;
    position: relative;
}

/* The connecting rule, running between chips down the centre of the first column.
   It starts below the chip rather than behind it: an absolutely-positioned ::before
   paints above a static sibling, so drawing it behind would need the chip lifted out
   of flow, and a 2px line crossing a gradient pill reads as a rendering fault. */
.cal-row::before {
    content: "";
    position: absolute;
    left: calc(4.375rem - 1px);
    top: 2.1rem;
    bottom: 0;
    width: 2px;
    background: var(--ink-100);
}

.cal-row:last-child { padding-bottom: 0; }
.cal-row:last-child::before { display: none; }

.cal-when {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    /* Fills the column, so all chips match and the rule meets each one dead centre. */
    width: 100%;
    /* Above the connecting rule, whatever the paint order would otherwise be. */
    position: relative;
    z-index: 1;
    padding: .4rem .7rem;
    border-radius: 999px;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-500);
    white-space: nowrap;
}

/* The competition blocks carry the brand; the quiet months stay neutral. */
.cal-row.is-key .cal-when {
    background-image: var(--raqt-gradient-brand);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--glow-brand-sm);
}

.cal-row.is-peak .cal-when {
    background-image: var(--raqt-gradient-sun);
    border-color: transparent;
    color: var(--ink-900);
    box-shadow: var(--glow-sun-sm);
}

/* The constant that runs under the whole year, not a step in it — so it sits outside
   the timeline rule and carries a tinted chip rather than a gradient one. */
.cal-row.is-always {
    margin-top: .4rem;
    padding-top: 1.2rem;
    border-top: 1px dashed var(--ink-200);
}

.cal-row.is-always::before { display: none; }

.cal-row.is-always .cal-when {
    background: var(--brand-50);
    border-color: var(--brand-200);
    color: var(--brand-700);
}

.cal-title { font-size: 1rem; letter-spacing: -.01em; margin-bottom: .2rem; }
.cal-body { font-size: .88rem; font-weight: 500; line-height: 1.6; color: var(--ink-600); }
.cal-body strong { font-weight: 900; color: var(--ink-800); }

@media (max-width: 599px) {
    .cal-row { grid-template-columns: 1fr; gap: .45rem; }
    .cal-row::before { display: none; }
    /* Single column and no rule to line up with, so the chip shrinks back to its label
       instead of stretching the full width of the screen. */
    .cal-when { display: inline-flex; width: auto; justify-self: start; }
}

/* --------------------------------------------------------------------------
   Split panel (text beside a supporting block)
   -------------------------------------------------------------------------- */

.split { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); align-items: start; }

/* Side-by-side comparison panels: stretch so the two cards match height regardless of
   how many bullets each carries. `.split` itself stays top-aligned, because there a
   short sidebar next to long prose should not grow to match it. */
.split.is-even { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: stretch; }
.split.is-even > .card { height: 100%; }

/* Pricing split: the inclusions list is naturally much taller than the price card, which
   left the card floating against a long column of text. Stretch it and space its content
   so it reads as a deliberate panel rather than a short box next to a long list. */
.split.is-balanced { align-items: stretch; }
.split.is-balanced > .price-panel { justify-content: space-between; }

@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.prose { display: flex; flex-direction: column; gap: .85rem; }
.prose p { font-size: .95rem; line-height: 1.7; color: var(--ink-600); max-width: 68ch; }
.prose p strong { font-weight: 900; color: var(--ink-800); }

/* --------------------------------------------------------------------------
   Key/value list (rating rules, parameters)
   -------------------------------------------------------------------------- */

.kv { display: flex; flex-direction: column; gap: .5rem; }

.kv-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.25rem;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-2xl);
}

.kv-row.is-top { border-color: var(--sun-300); background: linear-gradient(180deg, var(--sun-50), #fff 65%); box-shadow: var(--glow-sun-sm); }

.kv-label { font-size: .88rem; font-weight: 700; color: var(--ink-700); }
.kv-note { display: block; margin-top: .1rem; font-size: .78rem; font-weight: 500; color: var(--ink-400); }

.kv-value {
    flex: none;
    font-size: 1.05rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--ink-900);
    letter-spacing: -.01em;
}

.kv-row.is-top .kv-value { color: var(--sun-700); }

/* --------------------------------------------------------------------------
   Tier ladder
   -------------------------------------------------------------------------- */

.ladder { display: flex; flex-direction: column; gap: .5rem; }

.rung {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.25rem;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-2xl);
}

.rung-range {
    flex: none;
    min-width: 8.5rem;
    font-size: .85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ink-500);
}

.rung-note { font-size: .84rem; font-weight: 500; color: var(--ink-600); }

@media (max-width: 599px) {
    .rung { flex-wrap: wrap; gap: .4rem 1rem; }
    .rung-range { min-width: 0; }
    .rung-note { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { display: flex; flex-direction: column; gap: .6rem; }

.faq details {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    transition: border-color .18s ease;
}

.faq details[open] { border-color: var(--brand-200); }

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    list-style: none;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 800;
    color: var(--ink-800);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-700); }
.faq summary:focus-visible { outline: 3px solid var(--brand-500); outline-offset: -3px; }

.faq summary::after {
    content: "";
    flex: none;
    width: .55rem;
    height: .55rem;
    border-right: 2.5px solid var(--ink-400);
    border-bottom: 2.5px solid var(--ink-400);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}

.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.faq-body {
    padding: 0 1.25rem 1.15rem;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.65;
    color: var(--ink-600);
}

.faq-body strong { font-weight: 900; color: var(--ink-800); }

/* --------------------------------------------------------------------------
   Closing band (is-ink) + callouts
   -------------------------------------------------------------------------- */

.close-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
    align-items: center;
    gap: 1.5rem;
    padding: 2.4rem 2.6rem;
}

@media (max-width: 900px) { .close-inner { grid-template-columns: 1fr; padding: 1.9rem 1.4rem; } }

.close-title { font-size: 1.7rem; letter-spacing: -.03em; line-height: 1.15; color: #fff; }
.close-body { margin-top: .6rem; max-width: 56ch; font-size: .95rem; font-weight: 600; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.close-actions { display: flex; flex-direction: column; gap: .6rem; }
.close-actions .raqt-gradient-btn { width: 100%; }
.close-actions .btn-ghost-light { justify-content: center; }

/* --------------------------------------------------------------------------
   Contact form
   --------------------------------------------------------------------------
   The only form on the site. Styled from scratch rather than borrowed from the
   member app's MudBlazor inputs, which would cost this site a stylesheet it
   otherwise has no use for. */

.form { display: flex; flex-direction: column; gap: 1.1rem; }

.form-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }

.field-label { font-size: .8rem; font-weight: 800; letter-spacing: -.005em; color: var(--ink-700); }

.input,
.select,
.textarea {
    width: 100%;
    padding: .72rem .9rem;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    background: #fff;
    font: inherit;
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink-800);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.input::placeholder { color: var(--ink-300); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--ink-300); }

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--brand-400);
    box-shadow: 0 0 0 3px var(--brand-100);
}

.textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }

/* The native arrow is inconsistent across platforms and sits badly against the
   rounded field, so it is replaced with a drawn chevron. */
.select {
    appearance: none;
    padding-right: 2.4rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-400) 50%),
                      linear-gradient(135deg, var(--ink-400) 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) 55%, calc(100% - .85rem) 55%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.field-error { font-size: .78rem; font-weight: 700; color: #b4462c; }

.check-field {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--ink-600);
    cursor: pointer;
}

.check-field input { margin-top: .18rem; width: 1.05rem; height: 1.05rem; accent-color: var(--brand-600); flex: none; }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden inputs,
   and this one is only useful if they fill it in. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form .raqt-gradient-btn { align-self: flex-start; border: 0; cursor: pointer; }

@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
}

/* Inline note block — used for honest caveats (draft legal text, etc.). */
.note {
    display: flex;
    gap: .85rem;
    padding: 1.1rem 1.25rem;
    border: 1px dashed var(--ink-200);
    border-radius: var(--radius-2xl);
    background: #fff;
}

.note.is-warn { border-color: #e6bfae; background: #fdf7f4; }
.note-title { font-size: .88rem; font-weight: 900; color: var(--ink-800); }
.note-body { margin-top: .2rem; font-size: .85rem; font-weight: 500; line-height: 1.6; color: var(--ink-600); }

/* A note that closes with an action. The button sits directly under a paragraph, which
   gives it no room of its own — every other CTA on the site inherits gap from a flex
   parent that the note's text column does not have. */
.note .btn-ghost { margin-top: .9rem; }

/* --------------------------------------------------------------------------
   Legal / long-form documents
   -------------------------------------------------------------------------- */

.doc { display: flex; flex-direction: column; gap: 1.6rem; }

.doc-sec { display: flex; gap: 1rem; }

.doc-n {
    flex: none;
    width: 2rem;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--brand-500);
    font-variant-numeric: tabular-nums;
}

.doc-title { font-size: 1.05rem; letter-spacing: -.015em; margin-bottom: .45rem; }
.doc-body { display: flex; flex-direction: column; gap: .6rem; font-size: .92rem; font-weight: 500; line-height: 1.7; color: var(--ink-600); }
.doc-body strong { font-weight: 900; color: var(--ink-800); }
.doc-body ul { margin: .1rem 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }

.doc-updated {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-400);
}

/* --------------------------------------------------------------------------
   Checklist (plan inclusions)
   -------------------------------------------------------------------------- */

.checks { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding: 0; list-style: none; }

.checks li { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; font-weight: 500; line-height: 1.5; color: var(--ink-700); }

.checks svg { flex: none; margin-top: .1rem; color: var(--brand-500); }

/* Wrapper so a bullet can carry a muted second line. Without it, a bold lead followed by
   an em-dash clause wrapped into a ragged two-column shape. */
.checks li > span { min-width: 0; }

.check-note {
    display: block;
    margin-top: .1rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--ink-400);
}

/* --------------------------------------------------------------------------
   Price panel
   -------------------------------------------------------------------------- */

.price-panel {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-3xl);
    box-shadow: var(--glow-brand-sm);
}

.price-row { display: flex; align-items: baseline; gap: .4rem; }
.price-value { font-size: 2.9rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--ink-900); }
.price-per { font-size: .95rem; font-weight: 800; color: var(--ink-400); }
.price-note { font-size: .8rem; font-weight: 600; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ft { background-image: var(--raqt-gradient-ink); color: #fff; }

.ft-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
    gap: 2.5rem;
    max-width: 1080px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2.25rem;
}

@media (max-width: 767px) { .ft-inner { grid-template-columns: 1fr; gap: 2rem; padding: 2.25rem 1.15rem 1.75rem; } }

.ft-tag { margin-top: .9rem; max-width: 32ch; font-size: .88rem; font-weight: 600; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.ft-city { margin-top: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .5); }

/* Inline-flex, not flex: the row is only as wide as the handle, so the hover and the
   focus ring stop at the text instead of spanning the whole brand column. */
.ft-social {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .9rem;
    font-size: .84rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    transition: color .16s ease;
}

.ft-social:hover { color: #fff; }

/* Three link columns, fixed — auto-fit could land 2 + 1 at some widths. */
.ft-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }

@media (max-width: 479px) {
    .ft-cols { grid-template-columns: 1fr; }
}
.ft-col { display: flex; flex-direction: column; gap: .5rem; }

.ft-col h2 {
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sun-300);
    margin-bottom: .15rem;
}

.ft-col a {
    font-size: .86rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    transition: color .16s ease;
}

.ft-col a:hover { color: #fff; }

.ft-base {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.ft-base p {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.1rem 1.5rem;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------------------
   Motion

   Two layers, both fail-safe:

     1. A hero entrance on load — ordinary keyframes, supported everywhere.
     2. A scroll reveal driven by `animation-timeline: view()`, which keeps this
        site's no-JavaScript promise: no IntersectionObserver, no script tag.

   The reveal sits behind @supports because Safari and Firefox have not shipped
   scroll-driven animations. Without that guard their visitors would be left on
   the `from` keyframe — opacity 0 — and the page would render blank. Inside the
   guard, an unsupported browser never applies the hidden state at all, so the
   worst case is simply no animation.

   The reveal animates `translate`, NOT `transform`, deliberately: fill-mode
   keeps the last frame applied indefinitely, and a filled `transform: none`
   would outrank `.card.is-hover:hover`'s lift and kill the hover. Using the
   independent `translate` property leaves `transform` free for hover/active.
   -------------------------------------------------------------------------- */

@keyframes raqt-rise {
    from { opacity: 0; translate: 0 14px; }
    to { opacity: 1; translate: none; }
}

/* The hero stack arrives in sequence rather than all at once. The offsets are
   small on purpose — this should read as the page settling, not as a slideshow. */
@media (prefers-reduced-motion: no-preference) {
    .hero-kicker,
    .hero-title,
    .hero-sub,
    .hero-cta {
        animation: raqt-rise .5s cubic-bezier(.22, .61, .36, 1) both;
    }

    .hero-kicker { animation-delay: .04s; }
    .hero-title { animation-delay: .10s; }
    .hero-sub { animation-delay: .18s; }
    .hero-cta { animation-delay: .26s; }
}

/* Scroll reveal. Every element carries its own view timeline, so a grid of cards
   staggers by itself as it scrolls past — no nth-child delays to keep in sync
   with however many cards a page happens to have. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .sec-head,
        .card,
        .step,
        .split > *,
        .faq details,
        .cal-row,
        .note {
            animation: raqt-rise linear both;
            animation-timeline: view();
            animation-range: entry 10% entry 70%;
        }
    }
}

/* Arrow links nudge toward their destination — the cheapest possible signal that
   a link actually goes somewhere. */
.card-link .ico,
.btn-ghost .ico,
.btn-ghost-light .ico { transition: translate .16s ease; }

.card-link:hover .ico,
.btn-ghost:hover .ico,
.btn-ghost-light:hover .ico { translate: 3px 0; }

@media (prefers-reduced-motion: reduce) {
    .card,
    .hd-nav a,
    .btn-ghost,
    .btn-ghost-light,
    .faq details,
    .faq summary::after,
    .ft-col a,
    .ft-social { transition: none; }

    /* The nudge is a transition, so it needs muting independently of the
       animation layers above (those are already gated on no-preference). */
    .card-link .ico,
    .btn-ghost .ico,
    .btn-ghost-light .ico { transition: none; }

    .card-link:hover .ico,
    .btn-ghost:hover .ico,
    .btn-ghost-light:hover .ico { translate: none; }
}