/* =========================================================================
   ChoreoSync site — THE HOME PAGE (2026-10-20, the conversion pass)

   Loaded after cs-stage.css (and before cs-light.css on play's light
   preview). Styles the sections that pass added — the offer line, the
   before/after, the three steps, the showcase tabs, the four reasons, the
   founder's note, the plan cards, the FAQ disclosures and the sticky bar —
   plus the hero's new type.

   Rules it keeps, from the files before it:
   · product UI is never cropped: device captures are sized whole
   · light goes BEHIND product art (glow z 0, device z 1, copy z 1)
   · colours are the tokens, so the light preview inherits it
   · everything that moves stops under prefers-reduced-motion
   ========================================================================= */

/* ---------- Shared: section bands and heads -------------------------- */
.cs-sound, .cs-steps, .cs-style, .cs-why, .cs-founder, .cs-proof, .cs-free {
    position: relative;
    overflow: hidden;
    padding: var(--cs-band) 0;
}
.cs-sound > .container, .cs-steps > .container, .cs-style > .container,
.cs-why > .container, .cs-founder > .container, .cs-proof > .container,
.cs-free > .container { position: relative; z-index: 1; }

.cs-sec-head { max-width: 46rem; margin: 0 0 2.5rem; }
.cs-sec-head.is-center { margin-inline: auto; text-align: center; }
.cs-sec-head.is-center .cs-eyebrow { justify-content: center; }
.cs-sec-head .cs-statement { margin: 0; }
.cs-sec-lead {
    margin: 1rem auto 0;
    max-width: 40ch;
    font-size: clamp(1.02rem, 1.4vw, 1.2rem);
    line-height: 1.5;
    color: var(--cs-body);
}

/* The lit bands alternate with quiet ones, like the rest of the page. */
.cs-sound, .cs-style, .cs-free {
    background:
        radial-gradient(80% 110% at 50% 45%, rgba(var(--cs-primary-rgb), .13) 0%, rgba(var(--cs-primary-rgb), 0) 70%),
        linear-gradient(180deg, rgba(8, 5, 18, 0) 0%, rgba(8, 5, 18, .55) 22%,
                                rgba(8, 5, 18, .55) 78%, rgba(8, 5, 18, 0) 100%);
}

/* ---------- Hero: the benefit headline --------------------------------
   Two sentences, not three verbs, so the poster size steps down: at the old
   5.2rem the second line ran to four lines in the 45% column. */
/* ⚠ min-height: 0 — cs-stage.css reserves 5.8 lines on `.cs-hero .cs-poster` for
   the old five-word headline that grew one word at a time. Two still sentences
   need no reserve, and without this the box ran ~50px past its last line. The
   0-2-0 selector plus load order beats that rule; its font-size is restated
   here for the same reason. */
.cs-hero .cs-poster.cs-hero-title {
    font-size: clamp(2.05rem, 4.4vw, 4rem);
    line-height: .98;
    min-height: 0;
    margin-bottom: 1.1rem;
}
.cs-hero .cs-hero-lead { max-width: 36ch; margin-bottom: 1.25rem; }

/* THE OFFER. One line, lit like a pill so the eye finds it between the lead
   and the badges — it is the reason to tap one of them now. */
.cs-offer {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .55rem 1rem .55rem .8rem;
    border-radius: 999px;
    font-size: .98rem;
    line-height: 1.3;
    color: var(--cs-ink);
    text-align: left;
    background: rgba(var(--cs-primary-rgb), .16);
    box-shadow: inset 0 0 0 1px rgba(var(--cs-primary-rgb), .5), 0 0 22px rgba(var(--cs-primary-rgb), .22);
}
.cs-offer i { color: #c9b2ff; font-size: 1rem; }
.cs-offer strong { color: var(--cs-ink); font-weight: 700; letter-spacing: .02em; }
.cs-hero .cs-store-badges { margin-top: 1.4rem; }

.cs-hero-more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    min-height: 44px;
    font-weight: 600;
    color: #c9b2ff;
}
.cs-hero-more:hover, .cs-hero-more:focus-visible { color: #fff; }
.cs-hero-more i { font-size: .85em; }

/* ⚠ ON A PHONE THE WORDS COME FIRST NOW (2026-10-20), REVERSING CARLOS'S
   2026-08-26 "THE PHONE GOES FIRST ON A PHONE" (cs-stage.css, Hero, smaller
   screens). The conversion brief asks for the headline, the free-export line
   and both store badges in the first screen of a phone, and a 60vh device
   above them pushed all three below the fold. The device follows the badges.
   To put it back: delete these two order rules. */
@media (max-width: 991px) {
    .cs-hero > .container > .row > .order-first { order: 1 !important; }
    .cs-hero > .container > .row > .order-last  { order: 2 !important; }
    #hero-16.cs-hero { padding-top: 88px; }
    .cs-hero-stage { margin-top: 2.25rem; margin-bottom: 0; }
}
@media (max-width: 767px) {
    .cs-hero .cs-eyebrow { margin-bottom: .7rem; font-size: .7rem; }
    .cs-hero .cs-poster.cs-hero-title { font-size: clamp(1.85rem, 8.6vw, 2.6rem); }
    .cs-hero .cs-hero-lead { font-size: 1rem; margin-inline: auto; }
    .cs-hero .cs-store-badges { justify-content: center; margin-top: 1.1rem; }
    .cs-hero .cs-hero-txt { display: flex; flex-direction: column; align-items: center; }
    .cs-offer { font-size: .92rem; }
}
/* Two badges side by side down to the narrowest phone: 46px tall is
   138px wide each, still above Apple's 40px minimum. */
@media (max-width: 359px) {
    .cs-badge img { height: 46px; }
    .cs-store-badges { gap: .5rem; }
}

/* ---------- SAME DANCE. BETTER SOUND. -------------------------------- */
/* The player. */
.cs-ab {
    margin: 0 auto;
    max-width: 30rem;
    display: grid;
    gap: 1rem;
    justify-items: center;
}
.cs-ab-screen {
    position: relative;
    /* Capped by HEIGHT too (56vh of 9:16), so on a phone the Before / After
       switch and the controls are on screen with the picture, not under it. */
    width: min(100%, 22rem, calc(56vh * 9 / 16));
    border-radius: 1.6rem;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 0 0 1px rgba(var(--cs-primary-rgb), .55),
        0 0 30px 4px rgba(var(--cs-primary-rgb), .3),
        0 30px 60px rgba(0, 0, 0, .6);
}
.cs-ab-video { display: block; width: 100%; height: auto; }
.cs-ab-big {
    position: absolute; left: 50%; top: 50%;
    width: 76px; height: 76px;
    transform: translate(-50%, -50%);
    border: 0; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1.6rem; color: #fff;
    background: rgba(var(--cs-primary-rgb), .85);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 10px 30px rgba(0, 0, 0, .5);
    transition: opacity .25s ease;
}
.cs-ab.is-playing .cs-ab-big { opacity: 0; pointer-events: none; }
.cs-ab-tag {
    position: absolute; left: .75rem; top: .75rem;
    padding: .3rem .7rem; border-radius: 999px;
    font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: rgba(0, 0, 0, .55);
}
.cs-ab-switch {
    display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
    width: min(100%, 22rem);
    padding: .35rem;
    border-radius: 999px;
    background: var(--cs-panel);
    box-shadow: inset 0 0 0 1px var(--cs-line);
}
.cs-ab-opt {
    min-height: 52px;
    border: 0; border-radius: 999px;
    display: grid; align-content: center; justify-items: center;
    color: var(--cs-body); background: transparent;
    line-height: 1.15;
    transition: background .2s ease, color .2s ease;
}
.cs-ab-opt strong { font-family: var(--cs-display-font); font-size: 1.05rem; font-weight: 600; color: inherit; }
.cs-ab-opt small { font-size: .74rem; opacity: .85; }
.cs-ab-opt[aria-pressed="true"] {
    color: #fff;
    background: rgba(var(--cs-primary-rgb), .9);
    box-shadow: 0 0 22px rgba(var(--cs-primary-rgb), .45);
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes cs-ab-hint { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(var(--cs-magenta-rgb), 0); } 50% { box-shadow: inset 0 0 0 2px rgba(var(--cs-magenta-rgb), .9); } }
    .cs-ab.is-hint .cs-ab-opt[aria-pressed="false"] { animation: cs-ab-hint 1.2s ease-in-out 3; }
}
.cs-ab-bar {
    display: flex; align-items: center; gap: .6rem;
    width: min(100%, 22rem);
}
.cs-ab-btn {
    flex: 0 0 44px; height: 44px;
    border: 0; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--cs-ink); background: var(--cs-panel);
    box-shadow: inset 0 0 0 1px var(--cs-line);
}
.cs-ab-seek { flex: 1 1 auto; min-width: 0; accent-color: #8B5CF6; height: 44px; }
.cs-ab-vol  { flex: 0 0 72px; accent-color: #8B5CF6; height: 44px; }
.cs-ab-time { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--cs-muted); min-width: 2.6rem; }
.cs-ab figcaption { font-size: .9rem; color: var(--cs-muted); text-align: center; }
.cs-ab-before { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 400px) { .cs-ab-vol { display: none; } }

/* The still: two descriptions either side of the real mixer. */
.cs-ab-still {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.75rem);
}
.cs-ab-card {
    padding: 1.6rem 1.5rem;
    border-radius: 1.25rem;
    background: var(--cs-panel);
    box-shadow: inset 0 0 0 1px var(--cs-line);
}
.cs-ab-card.is-after {
    background: rgba(var(--cs-primary-rgb), .14);
    box-shadow: inset 0 0 0 1px rgba(var(--cs-primary-rgb), .55), 0 0 40px rgba(var(--cs-primary-rgb), .18);
}
.cs-ab-label {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-bottom: .8rem;
    font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--cs-muted);
}
.cs-ab-card.is-after .cs-ab-label { color: #c9b2ff; }
.cs-ab-card h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.15; margin: 0 0 .6rem; color: var(--cs-ink); }
.cs-ab-card p { margin: 0; color: var(--cs-body); line-height: 1.55; }
.cs-ab-shot { position: relative; margin: 0; text-align: center; }
.cs-ab-shot .cs-device { position: relative; z-index: 1; }
.cs-ab-shot .cs-device > img { display: block; width: clamp(200px, 21vw, 250px); height: auto; }
.cs-ab-shot figcaption {
    position: relative; z-index: 1;
    margin-top: var(--cs-device-floor);
    font-size: .9rem; color: var(--cs-muted);
}
@media (max-width: 991px) {
    .cs-ab-still { grid-template-columns: 1fr 1fr; }
    .cs-ab-shot { grid-column: 1 / -1; grid-row: 1; margin-bottom: .5rem; }
}
@media (max-width: 575px) {
    .cs-ab-still { grid-template-columns: 1fr; gap: 1rem; }
    .cs-ab-shot .cs-device > img { width: 200px; }
    .cs-ab-card { padding: 1.3rem 1.2rem; text-align: center; }
    .cs-ab-label { justify-content: center; }
}

/* ---------- HOW IT WORKS: three steps --------------------------------- */
.cs-steps-list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    counter-reset: none;
}
.cs-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cs-step-shot { position: relative; z-index: 1; }
.cs-step-shot > img { display: block; width: clamp(190px, 18vw, 232px); height: auto; }
.cs-step-txt { margin-top: var(--cs-device-floor); max-width: 30ch; }
.cs-step .cs-rail-node { width: 56px; height: 56px; margin: 0 auto .9rem; background: transparent; }
.cs-step .cs-rail-node .cs-glint-ring { font-size: 1.2rem; }
.cs-step-title { font-size: clamp(1.35rem, 2vw, 1.7rem); margin: 0 0 .5rem; color: var(--cs-ink); text-transform: uppercase; }
.cs-step p { margin: 0; color: var(--cs-body); line-height: 1.55; }
.cs-steps-fine { position: relative; z-index: 1; text-align: center; margin-top: 2.5rem; }

/* A phone: rows, picture beside words, so three steps are not three towers. */
@media (max-width: 767px) {
    .cs-steps-list { grid-template-columns: 1fr; gap: 2rem; }
    .cs-step { flex-direction: row; align-items: center; gap: 1.1rem; text-align: left; }
    .cs-step-shot { flex: 0 0 auto; padding: 5px; border-radius: 1.4rem; }
    .cs-step-shot > img { width: 128px; border-radius: 1.05rem; }
    .cs-step-shot::after { display: none; }
    .cs-step-txt { margin-top: 0; }
    .cs-step .cs-rail-node { width: 44px; height: 44px; margin: 0 0 .6rem; }
    .cs-step .cs-rail-node .cs-glint-ring { font-size: 1rem; }
    .cs-step-title { font-size: 1.25rem; }
    .cs-step p { font-size: .95rem; }
}

/* ---------- YOUR DANCE. YOUR STYLE. — the showcase ------------------- */
.cs-style-tabs {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin: 0 auto 2rem;
    padding: .35rem;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 999px;
    background: var(--cs-panel);
    box-shadow: inset 0 0 0 1px var(--cs-line);
}
.cs-style-tabs::-webkit-scrollbar { display: none; }
.cs-style-tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: .55rem 1.15rem;
    border: 0; border-radius: 999px;
    font-weight: 600; font-size: .95rem; white-space: nowrap;
    color: var(--cs-body); background: transparent;
    transition: background .2s ease, color .2s ease;
}
.cs-style-tab:hover { color: var(--cs-ink); }
.cs-style-tab[aria-selected="true"] {
    color: #fff;
    background: rgba(var(--cs-primary-rgb), .9);
    box-shadow: 0 0 22px rgba(var(--cs-primary-rgb), .45);
}
.cs-js .cs-style-panel[data-hide] { display: none; }
.cs-style-panel {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4.5rem);
    max-width: 58rem;
    margin: 0 auto;
}
.cs-style-panel:focus-visible { outline: 2px solid #a98cff; outline-offset: 8px; border-radius: 1rem; }
html:not(.cs-js) .cs-style-panel + .cs-style-panel { margin-top: 3rem; }
.cs-style-shot { position: relative; margin: 0; text-align: center; }
.cs-style-shot .cs-device { position: relative; z-index: 1; }
.cs-style-shot .cs-device > img { display: block; width: clamp(210px, 22vw, 262px); height: auto; }
.cs-style-txt h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.05; margin: 0 0 .8rem; color: var(--cs-ink); text-transform: uppercase; }
.cs-style-txt p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--cs-body); max-width: 42ch; }

.cs-chips-row {
    list-style: none;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .55rem;
    margin: 3rem auto 0; padding: 0;
    max-width: 52rem;
}
.cs-chips-row li {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    font-size: .9rem; color: var(--cs-ink);
    background: var(--cs-panel);
    box-shadow: inset 0 0 0 1px var(--cs-line);
}
.cs-chips-row i { color: #a98cff; }

@media (max-width: 767px) {
    .cs-style-tabs { justify-content: flex-start; width: auto; margin-inline: -4px; }
    .cs-style-panel { grid-template-columns: 1fr; text-align: center; gap: 0; }
    .cs-style-txt { margin-top: var(--cs-device-floor); }
    .cs-style-txt p { margin-inline: auto; }
    .cs-style-shot .cs-device > img { width: 220px; }
    .cs-chips-row { margin-top: 2.25rem; }
}

/* ---------- LESS EDITING. MORE DANCING. ------------------------------- */
.cs-why-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}
.cs-why-card {
    padding: 1.6rem 1.4rem;
    border-radius: 1.25rem;
    background: var(--cs-panel);
    box-shadow: inset 0 0 0 1px var(--cs-line);
}
.cs-why-ico {
    display: grid; place-items: center;
    width: 48px; height: 48px;
    margin-bottom: 1rem;
    border-radius: 50%;
    font-size: 1.15rem; color: #fff;
    background: rgba(var(--cs-primary-rgb), .3);
    box-shadow: inset 0 0 0 1px rgba(var(--cs-primary-rgb), .7), 0 0 20px rgba(var(--cs-primary-rgb), .35);
}
.cs-why-card h3 { font-size: 1.12rem; line-height: 1.25; margin: 0 0 .5rem; color: var(--cs-ink); text-transform: uppercase; letter-spacing: -.01em; }
.cs-why-card p { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--cs-body); }
@media (max-width: 991px) { .cs-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) {
    .cs-why-grid { grid-template-columns: 1fr; gap: .85rem; }
    .cs-why-card { display: grid; grid-template-columns: 48px 1fr; column-gap: 1rem; padding: 1.2rem; }
    .cs-why-ico { grid-row: span 2; margin: 0; }
}

/* ---------- OUR STORY — set like a letter ---------------------------- */
.cs-founder-box {
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: 1.5rem;
    background: var(--cs-panel);
    box-shadow: inset 0 0 0 1px var(--cs-line);
}
.cs-founder-title {
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    line-height: 1.08;
    margin: 0 0 1.6rem;
    color: var(--cs-ink);
}
.cs-founder-note { margin: 0; padding: 0 0 0 1.25rem; border-left: 3px solid rgba(var(--cs-primary-rgb), .8); }
.cs-founder-note p { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.65; color: var(--cs-body); margin: 0 0 1rem; }
.cs-founder-note .cs-founder-punch { font-family: var(--cs-display-font); font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--cs-ink); margin: 0; }
.cs-founder-sign { display: grid; gap: .1rem; margin: 1.75rem 0 0; }
.cs-founder-sign strong { font-size: 1.05rem; color: var(--cs-ink); }
.cs-founder-sign span { font-size: .92rem; color: var(--cs-muted); }

/* ---------- Social proof (renders only with approved quotes) --------- */
.cs-proof-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem;
}
.cs-proof-card { padding: 1.6rem; border-radius: 1.25rem; background: var(--cs-panel); box-shadow: inset 0 0 0 1px var(--cs-line); }
.cs-proof-card blockquote { margin: 0; }
.cs-proof-card blockquote p { font-size: 1.05rem; line-height: 1.6; color: var(--cs-ink); margin: 0; }
.cs-proof-who { margin: 1rem 0 0; display: grid; gap: .1rem; }
.cs-proof-who span { font-size: .9rem; color: var(--cs-muted); }

/* ---------- TRY IT FREE — the plan cards (also /pricing/) ------------ */
.cs-plan-pair {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 1.5rem;
    max-width: 56rem;
    margin: 0 auto;
    align-items: stretch;
}
.cs-plan {
    position: relative;
    display: flex; flex-direction: column;
    padding: 2rem 1.75rem;
    border-radius: 1.4rem;
    background: var(--cs-panel-hard, #100d1b);
    box-shadow: inset 0 0 0 1px var(--cs-line), 0 24px 60px rgba(0, 0, 0, .4);
    overflow: hidden;
}
.cs-plan > *:not(.cs-glow) { position: relative; z-index: 1; }
.cs-plan.is-featured {
    box-shadow:
        inset 0 0 0 1px rgba(var(--cs-primary-rgb), .7),
        0 0 34px 4px rgba(var(--cs-primary-rgb), .22),
        0 0 90px 20px rgba(var(--cs-magenta-rgb), .1),
        0 28px 64px rgba(0, 0, 0, .55);
}
.cs-plan.is-featured .cs-glow-cta { --gw: 140%; }
.cs-plan.is-featured .cs-glow-edge,
.cs-plan.is-featured .cs-glow-a,
.cs-plan.is-featured .cs-glow-b { display: none; }   /* the glints landed on the copy */
.cs-plan-name { font-size: 1.35rem; margin: 0; color: var(--cs-ink); text-transform: uppercase; }
.cs-plan-price { font-family: var(--cs-display-font); font-weight: 600; font-size: 2.6rem; line-height: 1; margin: .6rem 0 0; color: var(--cs-ink); }
.cs-plan-sub { margin: .5rem 0 0; color: var(--cs-body); }
.cs-plan .cs-plan-list { margin: 1.4rem 0 1.6rem; flex: 1 1 auto; }
.cs-plan .cs-plan-list li::before { color: #a98cff; text-shadow: 0 0 10px rgba(var(--cs-primary-rgb), .8); }
.cs-plan .btn { margin-top: auto; }

.cs-plan-terms { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.2rem; }
.cs-term {
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px var(--cs-line);
}
.cs-term.is-best {
    background: rgba(var(--cs-primary-rgb), .2);
    box-shadow: inset 0 0 0 2px rgba(var(--cs-primary-rgb), .9), 0 0 26px rgba(var(--cs-primary-rgb), .3);
}
.cs-term-tag { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-muted); }
.cs-term.is-best .cs-term-tag { color: #e6d9ff; }
.cs-term-price { font-family: var(--cs-display-font); font-weight: 600; font-size: 1.85rem; line-height: 1.05; margin: .45rem 0 .25rem; color: var(--cs-ink); }
.cs-term-price small { font-family: 'Inter', sans-serif; font-size: .85rem; font-weight: 500; color: var(--cs-body); margin-left: .15rem; }
.cs-term-note { margin: 0; font-size: .82rem; line-height: 1.35; color: var(--cs-body); }

.cs-plan-fine {
    max-width: 44rem;
    margin: 1.75rem auto 0;
    text-align: center;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--cs-muted);
}
.cs-free .cs-store-badges, .cs-pricing .cs-store-badges { justify-content: center; }

@media (max-width: 767px) {
    .cs-plan-pair { grid-template-columns: 1fr; }
    /* The offer leads on a phone too: Pro under Free, but the annual term first. */
    .cs-plan { padding: 1.6rem 1.3rem; }
}
@media (max-width: 380px) {
    .cs-plan-terms { grid-template-columns: 1fr; }
}

/* ---------- The FAQ, as disclosures ------------------------------------ */
.cs-faq { margin-bottom: 1.1rem; border-bottom: 1px solid var(--cs-line); padding-bottom: 1rem; }
.cs-faq summary {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    list-style: none; cursor: pointer;
    min-height: 44px; padding-top: .35rem;
}
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary h3 { margin: 0; font-size: 1.15rem; line-height: 1.35; color: var(--cs-ink); font-family: inherit; letter-spacing: 0; font-weight: 600; }
.cs-faq summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.4rem; line-height: 1; color: #a98cff;
    transition: transform .2s ease;
}
.cs-faq[open] summary::after { transform: rotate(45deg); }
.cs-faq summary:focus-visible { outline: 2px solid #a98cff; outline-offset: 4px; border-radius: .4rem; }
.cs-faq p { margin: .6rem 0 0; color: var(--cs-body); }

/* ---------- The sticky download bar (phones) -------------------------- */
.cs-sticky {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1040;
    display: none;
    align-items: center; justify-content: space-between; gap: .75rem;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--cs-panel-hard, #100d1b);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 -1px 0 var(--cs-line), 0 -12px 30px rgba(0, 0, 0, .45);
    transform: translateY(110%);
    transition: transform .3s ease;
}
@media (max-width: 767px) {
    .cs-js .cs-sticky { display: flex; }
    .cs-sticky.is-on { transform: none; }
    body.cs-sticky-room #footer-4 { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important; }
}
.cs-sticky-txt { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.cs-sticky-txt img { border-radius: .55rem; flex: 0 0 auto; }
.cs-sticky-txt span { display: grid; line-height: 1.2; min-width: 0; }
.cs-sticky-txt strong { color: var(--cs-ink); font-size: .95rem; }
.cs-sticky-txt small { color: var(--cs-body); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-sticky-btn { flex: 0 0 auto; min-height: 44px; padding: .6rem 1.2rem !important; font-size: .85rem !important; }

/* ---------- Anchors, and motion --------------------------------------- */
#sound, #features, #why, #about, #pricing, #voices { scroll-margin-top: 110px; }

@media (prefers-reduced-motion: reduce) {
    .cs-sticky, .cs-ab-big, .cs-ab-opt, .cs-style-tab, .cs-faq summary::after { transition: none; }
}

/* ---------- The phone header gets a floor ------------------------------
   Below 992px the template's mobile header is fixed and fully transparent, so
   every heading scrolled up under the logo and the burger (true on the live
   site before this pass too). A canvas-coloured glass behind it; over the hero
   it reads as the same dark it sits on. */
@media (max-width: 991px) {
    .wsmobileheader {
        background: color-mix(in srgb, var(--cs-canvas, #050409) 88%, transparent);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 1px 0 var(--cs-line);
    }
}