/* THE `#top` PREFIX IS STRIPPED, and that is part of the port.
 *
 * The mockup's post-approval patch block scopes 23 rules as `#top .x`,
 * purely to out-specify the Shopify theme CSS it had to live beside —
 * the same file carries a comment about needing "(0,1,1) to beat it".
 * This port does not ship that theme CSS, so the hack has no job here,
 * and keeping it made the rules depend on where `id="top"` happens to
 * sit in the markup.
 *
 * It was not academic: 18 of the 23 matched (their targets are inside
 * `<main id="top">`) and the FIVE FOOTER RULES DID NOT, because the
 * footer sits outside `<main>`. The footer therefore rendered at 12–14px
 * where the mockup renders 15–16px — under §2.8's "nothing under 15px"
 * floor, on the one part of the page that carries the real email address
 * and the company address. Found by measuring my render against the
 * mockup's, element by element.
 *
 * Safe to strip: the patch block is LAST in this file, so where it and
 * the earlier block set the same property on the same selector, source
 * order still gives the patch the win — no ID needed.
 */

/* P1-618 — the White look's landing page, scoped under ONE root class.
 *
 * PORTED, NOT REINTERPRETED. Every value comes from
 * `_redesign/mockup/app-lp/site/index.html` ("Songbond App Landing" v10,
 * APPROVED) — its own stylesheet, mechanically wrapped in `.sb-white` so it
 * cannot reach one of today's pages. The brief says "port the look and the
 * content, not the markup": the look IS this stylesheet, and re-deriving a
 * thousand lines of an approved design by hand would only introduce
 * differences nobody asked for.
 *
 * What the transform did:
 *   - comments stripped BEFORE parsing (a comment reads as a selector
 *     prelude otherwise, and the rule after it escapes the scope — that bug
 *     was caught by counting unscoped rules, not by reading);
 *   - every selector prefixed with `.sb-white`; `:root` BECAME `.sb-white`,
 *     so the design tokens live on the scope, not on the document;
 *   - `@font-face` dropped — the families come from `next/font` with
 *     `preload: false`, so today's visitors never fetch them (R10);
 *   - `'DM Sans'` / `'Lora'` rewritten to `var(--white-sans, …)` /
 *     `var(--white-serif, …)`, which is how next/font hands a family over,
 *     with the literal name kept as the fallback;
 *   - `#shopify-pc__banner` dropped — Shopify's cookie banner, not ours;
 *   - `@keyframes` left alone (its keys are not selectors); `@media` and
 *     `@container` recursed into.
 *
 * THREE DECLARATIONS FROM `html`/`body` ARE DELIBERATELY DROPPED, because
 * `.sb-white` is a div and those rules were written for the document:
 *   - `font-size: 62.5%` — the rem trick, and there is not ONE `rem` unit in
 *     the whole stylesheet (counted). In the mockup it is applied twice
 *     (html AND body), which would compound to 6.25px; every text element
 *     sets its own size, so it changes nothing and carrying it onto a div
 *     could only shrink inherited text.
 *   - `overflow-x: hidden` — on a div ANCESTOR this silently breaks
 *     `position: sticky` for every descendant, and the header is sticky.
 *     This is the same class of bug as P1-343.
 *   - `margin: 0` — a div has none.
 *
 * NOT IMPORTED BY ANY OF TODAY'S PAGES. Only the white landing tree imports
 * it, and `app/page.tsx` renders that tree only when the visitor's look is
 * `new`. `app/create/funnel.css` is untouched: the brief forbids adding the
 * new look to it.
 *
 * The six animations keep their mockup names (sbDrift2, sbHeroPulse,
 * sbLsBeat, sbMarquee, sbRwLtr, sbRwRtl); none collides with today's CSS.
 */

.sb-white {
    
    --sb-navy:         #0A2540;   
    --sb-bg:           #FFFFFF;
    --sb-surface:      #F6F9FC;   
    --sb-ink:          #0A2540;
    --sb-body:         #425466;   
    --sb-muted:        #697386;   
    --sb-on-navy:      #ADBDCC;   
    --sb-on-navy-meta: #8FA3B8;   
    --sb-hairline:     #E3E8EE;

    
    --sb-blurple:      #635BFF;
    --sb-blurple-hover:#5449E6;
    --sb-blurple-active:#4A40D1;
    --sb-cta:          #635BFF;   
    --sb-cta-hover:    #5449E6;

    
    --sb-cyan:         #00D4FF;

    
    --sb-green:        #00B67A;   
    --sb-error:        #D64545;

    
    --sb-occ-birthday:     #635BFF;
    --sb-occ-anniversary:  #C4707E;
    --sb-occ-mothers:      #D99B3C;
    --sb-occ-wedding:      #00D4FF;
    --sb-occ-memory:       #8E9BC4;
    --sb-occ-justbecause:  #425466;

    
    --sb-sans:   var(--white-sans, "DM Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --sb-serif:  var(--sb-sans);   

    --sb-fs-display: 64px; --sb-lh-display: 0.98; --sb-ls-display: -0.04em;
    --sb-fs-heading: 40px; --sb-lh-heading: 1.04; --sb-ls-heading: -0.035em;
    --sb-fs-title:   22px; --sb-ls-title:   -0.02em;
    --sb-fs-body-l:  17px; --sb-lh-body-l:  1.6;
    --sb-fs-body:    15px; --sb-lh-body:    1.55;
    --sb-fs-caption: 13px;
    --sb-fs-label:   11px; --sb-ls-label:   0.14em;

    
    --sb-s1: 4px; --sb-s2: 8px; --sb-s3: 12px; --sb-s4: 16px;
    --sb-s5: 22px; --sb-s6: 32px; --sb-s7: 48px;
    --sb-section-y: 72px;
    --sb-gutter: 48px;

    
    --sb-r-nav: 6px; --sb-r-btn: 10px; --sb-r-card: 16px; --sb-r-pill: 100px; --sb-r-phone: 40px;

    
    --sb-shadow-btn:  0 12px 28px -14px rgba(99, 91, 255, 0.9);
    --sb-shadow-card: 0 30px 70px -40px rgba(10, 37, 64, 0.4);
    --sb-shadow-dark: 0 40px 80px -40px rgba(0, 0, 0, 0.8);

    
    --sb-focus-ring:    0 0 0 3px rgba(99, 91, 255, 0.18);
    --sb-selected-bg:   rgba(99, 91, 255, 0.06);
    --sb-selected-ring: 0 0 0 3px rgba(99, 91, 255, 0.14);

    
    --sb-t-state: 200ms ease;
    --sb-t-lift:  400ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --sb-t-fade:  260ms ease;

    
    --sb-rule:        rgba(10, 37, 64, 0.10);
    --sb-rule-strong: rgba(10, 37, 64, 0.18);
    --sb-tap-min:     44px;

  }
.sb-white [class^="sb-"] div:empty, .sb-white [class*=" sb-"] div:empty { display: block; }
.sb-white .sb-wordmark {
    display: inline-block;
    font-family: var(--sb-sans);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.03em;
    line-height: 1;
    text-decoration: none;
    text-transform: lowercase;
    white-space: nowrap;
    color: var(--sb-navy);
  }
.sb-white .sb-wordmark:hover { text-decoration: none; opacity: 0.92; }
@media (max-width: 749px) {

}
.sb-white #shopify-pc__prefs { font-family: var(--sb-sans); z-index: 2147483001; }
.sb-white #shopify-pc__prefs .shopify-pc__prefs__overlay { background: rgba(10, 37, 64, 0.55); backdrop-filter: blur(2px); }
.sb-white #shopify-pc__prefs__dialog {
    background: #FFFFFF; color: var(--sb-body); border: 0; border-radius: 20px;
    box-shadow: 0 30px 80px rgba(10, 37, 64, 0.28); max-width: 560px; width: min(560px, calc(100vw - 24px));
    font-family: var(--sb-sans);
  }
.sb-white #shopify-pc__prefs__dialog header { border-bottom: 1px solid var(--sb-hairline); padding: 22px 24px 18px; }
.sb-white #shopify-pc__prefs__dialog header h2 {
    font-family: var(--sb-sans); font-size: 18px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; color: var(--sb-navy); margin: 0 0 14px;
  }
.sb-white #shopify-pc__prefs__header-close { top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--sb-surface); }
.sb-white #shopify-pc__prefs__header-close:hover { background: var(--sb-hairline); }
.sb-white #shopify-pc__prefs__header-close svg path { fill: var(--sb-navy); }
.sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__header-actions button {
    margin: 0; padding: 9px 14px; min-height: 38px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--sb-surface); color: var(--sb-navy);
    font-family: var(--sb-sans); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none;
  }
.sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__header-actions button:hover { background: var(--sb-hairline); color: var(--sb-navy); }
.sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__header-actions button:focus { outline: none; box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.28); }
.sb-white #shopify-pc__prefs__header-save, .sb-white #shopify-pc__prefs__header-save.primary, .sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__header-actions button:last-child { background: var(--sb-blurple); color: #FFFFFF; }
.sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__header-actions button:last-child:hover { background: var(--sb-blurple-hover); color: #FFFFFF; }
.sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__scrollable { padding: 6px 24px 22px; }
.sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__intro h3, .sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__intro-main h3 {
    font-family: var(--sb-sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--sb-navy); margin: 16px 0 4px;
  }
.sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__intro p, .sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__intro-main p, .sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__option p {
    font-family: var(--sb-sans); font-size: 13px; line-height: 1.5; color: var(--sb-muted); margin: 0;
  }
.sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__option { border-top: 1px solid var(--sb-hairline); padding: 14px 0; }
.sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__option:first-child { border-top: 0; }
.sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__option label {
    font-family: var(--sb-sans); font-size: 14px; font-weight: 600; color: var(--sb-navy); margin: 0 0 4px;
  }
.sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__option label span svg path { fill: var(--sb-blurple); }
.sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__option label input[aria-readonly="true"] ~ span svg path { fill: var(--sb-muted); }
.sb-white #shopify-pc__prefs__dialog .shopify-pc__prefs__option label input:focus ~ span { outline: none; box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.28); border-radius: 6px; }
.sb-white .sb-hero {
    position: relative;
    background: #FFFFFF;
    color: var(--sb-navy);
    font-family: var(--sb-sans);
  }
.sb-white .sb-hero *, .sb-white .sb-hero *::before, .sb-white .sb-hero *::after { box-sizing: border-box; }
.sb-white .sb-hero .sb-i { width: 1em; height: 1em; display: block; flex: none; }
.sb-white .sb-hero a { text-decoration: none; }
.sb-white .sb-hero__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding: clamp(32px, 4vw, 56px) var(--sb-s5);
  }
.sb-white .sb-hero__copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.sb-white .sb-hero__eyebrow {
    margin: 0;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: var(--sb-sans);
    font-size: 12px; font-weight: 700; line-height: 1.3;
    letter-spacing: 0.12em; text-transform: uppercase;
  }
.sb-white .sb-hero__eyebrow-a { color: var(--sb-blurple); }
.sb-white .sb-hero__eyebrow-dot { color: #C9D2DC; }
.sb-white .sb-hero__eyebrow-b { color: var(--sb-muted); }
.sb-white .sb-hero__h1 {
    margin: 0;
    font-family: var(--sb-sans);
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--sb-navy);
  }
.sb-white .sb-hero__rot { display: inline-grid; vertical-align: baseline; text-align: left; }
.sb-white .sb-hero__rot-item {
    grid-area: 1 / 1;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 220ms ease, transform 220ms ease;
  }
.sb-white .sb-hero__rot-item.is-on { opacity: 1; transform: none; }
.sb-white .sb-hero__rot-noun { color: var(--sb-blurple); }
.sb-white .sb-hero__rot-item::before { content: attr(data-pre); }
.sb-white .sb-hero__rot-item::after { content: attr(data-post); }
.sb-white .sb-hero__rot-noun::before { content: attr(data-word); }
.sb-white .sb-hero__lede {
    margin: 0;
    max-width: 460px;
    font-family: var(--sb-sans);
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.6;
    font-weight: 400;
    color: var(--sb-body);
  }
.sb-white .sb-hero__ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 2px; }
.sb-white .sb-hero .sb-hero__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 28px;
    background: var(--sb-blurple);
    color: #FFFFFF;
    font-family: var(--sb-sans);
    font-size: 16px; font-weight: 500; line-height: 1.2;
    border-radius: var(--sb-r-btn);
    box-shadow: 0 14px 30px -14px rgba(99, 91, 255, 0.9);
    transition: background var(--sb-t-state), transform var(--sb-t-state), box-shadow var(--sb-t-state);
  }
.sb-white .sb-hero .sb-hero__cta:hover { background: var(--sb-blurple-hover); color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(99, 91, 255, 0.95); }
.sb-white .sb-hero .sb-hero__cta:active { transform: none; }
.sb-white .sb-hero .sb-hero__cta .sb-i { width: 16px; height: 16px; }
.sb-white .sb-hero__trust {
    list-style: none; margin: 0; padding: 18px 0 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
    border-top: 1px solid var(--sb-hairline);
  }
.sb-white .sb-hero__trust-item {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--sb-sans);
    font-size: 14px; font-weight: 500; line-height: 1.3;
    color: var(--sb-navy);
  }
.sb-white .sb-hero__trust-item + .sb-hero__trust-item::before {
    content: ''; width: 1px; height: 14px; margin-right: 12px;
    background: var(--sb-hairline); flex: none;
  }
.sb-white .sb-hero__trust-item--check .sb-i { color: var(--sb-green); }
.sb-white .sb-hero__trust-item--bolt .sb-i { color: var(--sb-blurple); }
.sb-white .sb-hero__trust-item--lock .sb-i, .sb-white .sb-hero__trust-item--heart .sb-i { color: var(--sb-muted); }
.sb-white .sb-hero__trust-item--star .sb-i { color: var(--sb-green); }
.sb-white .sb-hero__trust-accent { color: var(--sb-blurple); }
.sb-white .sb-hero__trust-item--desk { display: none; }
.sb-white .sb-hero__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;          
    max-height: 720px;
    max-width: 576px;             
    justify-self: center;
    border-radius: 20px;
    overflow: hidden;
    background: #08203A;
    isolation: isolate;
  }
.sb-white .sb-hero__video, .sb-white .sb-hero__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
.sb-white .sb-hero__img--empty {
    display: grid; place-items: center; padding: 24px; text-align: center;
    font-family: var(--sb-sans); font-size: 13px; font-weight: 500; color: var(--sb-on-navy-meta);
    background: radial-gradient(90% 60% at 50% 30%, rgba(99, 91, 255, 0.35), rgba(99, 91, 255, 0) 60%), #08203A;
  }
.sb-white .sb-hero__badge {
    position: absolute; top: 20px; right: 20px;
    display: flex; align-items: center; gap: 7px;
    padding: 7px 13px;
    background: rgba(10, 37, 64, 0.5);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-radius: 100px;
    font-family: var(--sb-sans); font-size: 12px; font-weight: 500; color: #FFFFFF;
  }
.sb-white .sb-hero__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sb-cyan); animation: sbHeroPulse 2s ease-in-out infinite; }
@keyframes sbHeroPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.sb-white .sb-hero__sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px var(--sb-s5) calc(12px + env(safe-area-inset-bottom));
    background: #FFFFFF;
    border-top: 1px solid var(--sb-hairline);
    box-shadow: 0 -8px 24px -16px rgba(10, 37, 64, 0.4);
    transform: translateY(110%);
    transition: transform var(--sb-t-fade);
  }
.sb-white .sb-hero__sticky[data-sb-show] { transform: none; }
.sb-white .sb-hero__sticky-copy { display: flex; flex-direction: column; min-width: 0; }
.sb-white .sb-hero__sticky-price { font-family: var(--sb-sans); font-size: 15px; font-weight: 700; color: var(--sb-navy); letter-spacing: -0.02em; }
.sb-white .sb-hero__sticky-meta { font-family: var(--sb-sans); font-size: 12px; font-weight: 400; color: var(--sb-muted); }
.sb-white .sb-hero .sb-hero__cta--sm { padding: 12px 22px; font-size: 15px; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
.sb-white .sb-hero__rot-item { transition: none; }
.sb-white .sb-hero__dot { animation: none; }
.sb-white .sb-hero .sb-hero__cta:hover { transform: none; }
}
@media screen and (min-width: 900px) {
.sb-white .sb-hero__grid { padding: clamp(40px, 4vw, 72px) var(--sb-gutter); gap: clamp(32px, 4vw, 56px); }
.sb-white .sb-hero__copy { gap: 24px; }
.sb-white .sb-hero__trust-item--desk { display: flex; }
.sb-white .sb-hero__sticky { display: none; }
}
.sb-white .sb-mq {
    background: var(--sb-bg);
    border-bottom: 1px solid var(--sb-hairline);
    overflow: hidden;
    font-family: var(--sb-sans);
  }
.sb-white .sb-mq *, .sb-white .sb-mq *::before, .sb-white .sb-mq *::after { box-sizing: border-box; }
.sb-white .sb-mq__track {
    display: flex;
    width: max-content;
    padding: 18px 0;
    animation: sbMarquee var(--sb-mq-dur, 40s) linear infinite;
  }
.sb-white .sb-mq:hover .sb-mq__track { animation-play-state: paused; }
.sb-white .sb-mq__list {
    display: flex;
    align-items: center;
    gap: 56px;
    margin: 0;
    padding: 0 28px;
    list-style: none;
    white-space: nowrap;
  }
.sb-white .sb-mq__item {
    font-family: var(--sb-sans);
    font-size: var(--sb-fs-caption);
    font-weight: 500;
    color: var(--sb-body);
    line-height: 1.3;
  }
.sb-white .sb-mq__sep {
    width: 7px; height: 7px;
    background: #C9D2DC;
    transform: rotate(45deg);
    border-radius: 1px;
    flex: none;
  }
@keyframes sbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.sb-white .sb-mq__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
.sb-white .sb-mq__list { flex-wrap: wrap; justify-content: center; gap: 12px 24px; padding: 0 var(--sb-s5); }
.sb-white .sb-mq__list[aria-hidden="true"] { display: none; }
}
.sb-white .sb-rx { background: var(--sb-bg); color: var(--sb-navy); font-family: var(--sb-sans); padding: 40px 0; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.sb-white .sb-rx *, .sb-white .sb-rx *::before, .sb-white .sb-rx *::after { box-sizing: border-box; }
.sb-white .sb-rx .sb-i { width: 1em; height: 1em; display: block; }
.sb-white .sb-rx .sb-rx__scrim { display: block; }
.sb-white .sb-rx__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 var(--sb-s5); }
.sb-white .sb-rx__titles { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.sb-white .sb-rx__eyebrow { margin: 0; font-family: var(--sb-sans); font-size: var(--sb-fs-label); font-weight: 700; letter-spacing: var(--sb-ls-label); text-transform: uppercase; color: var(--sb-blurple); }
.sb-white .sb-rx__h2 { margin: 0; font-family: var(--sb-sans); font-size: 30px; line-height: var(--sb-lh-heading); font-weight: 700; letter-spacing: var(--sb-ls-heading); color: var(--sb-navy); text-wrap: pretty; }
.sb-white .sb-rx__sub { margin: 2px 0 0; font-family: var(--sb-sans); font-size: var(--sb-fs-body); line-height: var(--sb-lh-body); color: var(--sb-body); }
.sb-white .sb-rx__arrows { display: none; gap: 8px; flex: none; }
.sb-white .sb-rx__arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sb-hairline); background: #FFFFFF; color: var(--sb-navy); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease; }
.sb-white .sb-rx__arrow:hover { background: var(--sb-surface); border-color: var(--sb-navy); }
.sb-white .sb-rx__arrow[disabled] { opacity: 0.35; cursor: default; }
.sb-white .sb-rx__arrow[disabled]:hover { background: #FFFFFF; border-color: var(--sb-hairline); }
.sb-white .sb-rx__rail {
    display: flex; gap: 12px; padding: 0 var(--sb-s5) 8px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--sb-s5);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
.sb-white .sb-rx__rail::-webkit-scrollbar { display: none; }
.sb-white .sb-rx__card { flex: none; width: min(82vw, 340px); margin: 0; scroll-snap-align: start; }
.sb-white .sb-rx__frame { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #08203A; box-shadow: 0 24px 48px -28px rgba(10, 37, 64, 0.5); }
.sb-white .sb-rx__poster, .sb-white .sb-rx__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-white .sb-rx__poster { z-index: 0; }
.sb-white .sb-rx__video { z-index: 1; background: #08203A; }
.sb-white .sb-rx__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(10,37,64,0.28) 0%, rgba(10,37,64,0) 26%, rgba(10,37,64,0) 62%, rgba(10,37,64,0.78) 100%); }
.sb-white .sb-rx__sound {
    position: absolute; z-index: 3; top: 12px; right: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 11px 7px 9px; border: 0; border-radius: 100px; cursor: pointer;
    background: rgba(10, 37, 64, 0.62); color: #FFFFFF; backdrop-filter: blur(6px);
    font-family: var(--sb-sans); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.01em;
    transition: background 160ms ease;
  }
.sb-white .sb-rx__sound:hover { background: rgba(10, 37, 64, 0.82); }
.sb-white .sb-rx__sound:focus-visible { outline: 2px solid var(--sb-cyan); outline-offset: 2px; }
.sb-white .sb-rx__sound .sb-i { font-size: 16px; }
.sb-white .sb-rx__sound-on { display: none; }
.sb-white .sb-rx__sound[aria-pressed="true"] { background: var(--sb-cyan); color: var(--sb-navy); }
.sb-white .sb-rx__sound[aria-pressed="true"] .sb-rx__sound-on { display: block; }
.sb-white .sb-rx__sound[aria-pressed="true"] .sb-rx__sound-off { display: none; }
.sb-white .sb-rx__play {
    position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 64px; height: 64px; border: 0; border-radius: 50%; cursor: pointer;
    background: #FFFFFF; color: var(--sb-navy); font-size: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px -8px rgba(10, 37, 64, 0.6);
  }
.sb-white .sb-rx__play[hidden] { display: none; }
.sb-white .sb-rx__play .sb-i { margin-left: 3px; }
.sb-white .sb-rx__cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.sb-white .sb-rx__quote { font-family: var(--sb-sans); font-size: 14px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF; }
.sb-white .sb-rx__meta { font-family: var(--sb-sans); font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, 0.72); }
.sb-white .sb-rx__all { align-self: flex-start; margin: 0 var(--sb-s5); display: inline-flex; align-items: center; gap: 6px; font-family: var(--sb-sans); font-size: 14px; font-weight: 600; color: var(--sb-navy); text-decoration: none; }
.sb-white .sb-rx__all:hover { color: var(--sb-blurple); }
.sb-white .sb-rx__all .sb-i { font-size: 15px; }
@media (min-width: 900px) {
.sb-white .sb-rx { padding: clamp(48px, 5vw, 72px) 0; gap: 24px; }
.sb-white .sb-rx__head { padding: 0 var(--sb-gutter); }
.sb-white .sb-rx__h2 { font-size: var(--sb-fs-heading); }
.sb-white .sb-rx__arrows { display: inline-flex; }
.sb-white .sb-rx__rail { padding: 0 var(--sb-gutter) 10px; gap: 16px; scroll-padding-left: var(--sb-gutter); }
.sb-white .sb-rx__card { width: 300px; }
.sb-white .sb-rx__all { margin: 0 var(--sb-gutter); }
}
.sb-white .sb-op { position: relative; overflow: hidden; background: var(--sb-navy); color: #FFFFFF; font-family: var(--sb-sans); padding: clamp(40px, 4vw, 64px) var(--sb-s5); }
.sb-white .sb-op *, .sb-white .sb-op *::before, .sb-white .sb-op *::after { box-sizing: border-box; }
.sb-white .sb-op .sb-op__bloom, .sb-white .sb-op .sb-op__scrim, .sb-white .sb-op .sb-op__layer { display: block; }
.sb-white .sb-op .sb-i { width: 1em; height: 1em; display: block; }
.sb-white .sb-op__bloom { position: absolute; width: 900px; height: 900px; left: 30%; top: 40%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(99,91,255,0.45) 0%, rgba(196,112,126,0.18) 40%, rgba(10,37,64,0) 70%); filter: blur(30px); pointer-events: none; animation: sbDrift2 26s ease-in-out infinite; }
.sb-white .sb-op__grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: 1080px; margin: 0 auto; }
.sb-white .sb-op__copy { display: flex; flex-direction: column; gap: 18px; }
.sb-white .sb-op__eyebrow { margin: 0; font-family: var(--sb-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-cyan); }
.sb-white .sb-op__h2 { margin: 0; font-family: var(--sb-sans); font-size: clamp(34px, 3.6vw, 48px); line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; color: #FFFFFF; text-wrap: pretty; }
.sb-white .sb-op__sub { margin: 0; font-family: var(--sb-sans); font-size: 17px; line-height: 1.6; color: var(--sb-on-navy); max-width: 460px; }
.sb-white .sb-op__dots { display: flex; gap: 8px; padding-top: 8px; }
.sb-white .sb-op__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,0.3); cursor: pointer; transition: width 300ms ease, background 300ms ease; }
.sb-white .sb-op__dot.is-on { width: 28px; background: var(--sb-cyan); }
.sb-white .sb-op__dot:focus-visible { outline: 2px solid var(--sb-cyan); outline-offset: 3px; }
.sb-white .sb-op__stage { display: flex; justify-content: center; }
.sb-white .sb-op__phone { position: relative; width: min(300px, 100%); aspect-ratio: 9 / 17; background: var(--sb-navy); border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 50px 90px -35px rgba(0,0,0,0.85); border: 1px solid rgba(255,255,255,0.12); }
.sb-white .sb-op__layer { position: absolute; inset: 0; opacity: 0; transform: scale(1); transition: opacity 900ms ease, transform 5s linear; }
.sb-white .sb-op__layer.is-on { opacity: 1; transform: scale(1.06); }
.sb-white .sb-op__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-white .sb-op__photo--empty { display: grid; place-items: center; background: radial-gradient(90% 60% at 50% 30%, rgba(99,91,255,0.4) 0%, rgba(99,91,255,0) 60%), #08203A; }
.sb-white .sb-op__photo--empty span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35); }
.sb-white .sb-op__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,37,64,0.35) 0%, rgba(10,37,64,0) 30%, rgba(10,37,64,0.2) 55%, rgba(10,37,64,0.96) 100%); pointer-events: none; }
.sb-white .sb-op__in { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.sb-white .sb-op__kicker { display: block; padding: 24px 22px 0; text-align: center; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.85); transition: opacity 400ms ease; }
.sb-white .sb-op__bottom { padding: 0 22px 28px; display: flex; flex-direction: column; gap: 18px; }
.sb-white .sb-op__stack { display: flex; flex-direction: column; gap: 4px; transition: opacity 400ms ease; }
.sb-white .sb-op__title { font-size: 26px; line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; color: #FFFFFF; }
.sb-white .sb-op__meta { font-size: 12px; color: rgba(255,255,255,0.65); }
.sb-white .sb-op__transport { display: flex; align-items: center; gap: 14px; }
.sb-white .sb-op__play { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #FFFFFF; color: var(--sb-navy); font-size: 22px; flex: none; }
.sb-white .sb-op__prog { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sb-white .sb-op__bar { height: 3px; background: rgba(255,255,255,0.25); border-radius: 2px; overflow: hidden; }
.sb-white .sb-op__bar i { display: block; height: 100%; width: 0; background: var(--sb-cyan); transition: width 1s linear; }
.sb-white .sb-op__times { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; }
.sb-white .sb-op__lyric { font-size: 13px; line-height: 1.4; font-weight: 500; color: rgba(255,255,255,0.85); border-top: 1px solid rgba(255,255,255,0.14); padding-top: 14px; transition: opacity 400ms ease; }
.sb-white .sb-op.is-swapping .sb-op__kicker, .sb-white .sb-op.is-swapping .sb-op__stack, .sb-white .sb-op.is-swapping .sb-op__lyric { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.sb-white .sb-op__bloom { animation: none; }
.sb-white .sb-op__layer { transition: opacity 200ms ease; transform: none; }
.sb-white .sb-op__layer.is-on { transform: none; }
}
@keyframes sbDrift2 { 0% { transform: translate(-50%,-50%) scale(1); } 40% { transform: translate(-57%,-44%) scale(1.1); } 75% { transform: translate(-45%,-53%) scale(0.94); } 100% { transform: translate(-50%,-50%) scale(1); } }
.sb-white .sb-ls { background: var(--sb-bg); color: var(--sb-navy); font-family: var(--sb-sans); padding: 40px var(--sb-s5); display: flex; flex-direction: column; gap: 16px; }
.sb-white .sb-ls *, .sb-white .sb-ls *::before, .sb-white .sb-ls *::after { box-sizing: border-box; }
.sb-white .sb-ls .sb-i { width: 1em; height: 1em; display: block; }
.sb-white .sb-ls__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sb-white .sb-ls__titles { display: flex; flex-direction: column; gap: 6px; }
.sb-white .sb-ls__eyebrow { display: none; margin: 0; font-family: var(--sb-sans); font-size: 12px; font-weight: 700; letter-spacing: var(--sb-ls-label); text-transform: uppercase; color: var(--sb-blurple); }
.sb-white .sb-ls__h2 { margin: 0; font-family: var(--sb-sans); font-size: 26px; line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; color: var(--sb-navy); word-break: normal; }
.sb-white .sb-ls__chips { display: none; gap: 8px; flex-wrap: wrap; }
.sb-white .sb-ls .sb-ls__chip { padding: 8px 14px; border-radius: var(--sb-r-pill); border: 1px solid var(--sb-hairline); background: #FFFFFF; font-family: var(--sb-sans); font-size: 13px; font-weight: 500; color: var(--sb-body); cursor: pointer; transition: background var(--sb-t-state), color var(--sb-t-state), border-color var(--sb-t-state); }
.sb-white .sb-ls .sb-ls__chip:hover { border-color: var(--sb-navy); color: var(--sb-navy); }
.sb-white .sb-ls .sb-ls__chip.is-on { background: var(--sb-navy); border-color: var(--sb-navy); color: #FFFFFF; }
.sb-white .sb-ls .sb-ls__chip:focus-visible { outline: none; box-shadow: var(--sb-focus-ring); border-color: var(--sb-blurple); }
.sb-white .sb-ls .sb-ls__all { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sb-sans); font-size: 13px; font-weight: 500; color: var(--sb-blurple); text-decoration: none; white-space: nowrap; }
.sb-white .sb-ls .sb-ls__all .sb-i { width: 15px; height: 15px; }
.sb-white .sb-ls__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sb-white .sb-ls__song { display: flex; flex-direction: column; gap: 8px; }
.sb-white .sb-ls__song--5 { display: none; }
.sb-white .sb-ls__song[hidden] { display: none; }
.sb-white .sb-ls__cover { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--sb-navy); }
.sb-white .sb-ls__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-white .sb-ls__art { position: absolute; inset: -40%; filter: blur(24px); opacity: 0.88; }
.sb-white .sb-ls__bars { position: absolute; left: 12px; right: 12px; top: 50%; transform: translateY(-50%); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.8) 0 2px, transparent 2px 5px); background-size: 100% 80%; background-position: 0 50%; background-repeat: repeat-x; }
.sb-white .sb-ls .sb-ls__play { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; margin: 0; background: #FFFFFF; color: var(--sb-navy); display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; transition: transform var(--sb-t-state); }
.sb-white .sb-ls .sb-ls__play:hover { transform: scale(1.06); }
.sb-white .sb-ls .sb-ls__play:focus-visible { outline: none; box-shadow: var(--sb-focus-ring); }
.sb-white .sb-ls .sb-ls__play--off { opacity: 0.55; cursor: default; }
.sb-white .sb-ls__ic-pause { display: none; }
.sb-white .sb-ls__song[data-sb-ls-playing] .sb-ls__ic-play { display: none; }
.sb-white .sb-ls__song[data-sb-ls-playing] .sb-ls__ic-pause { display: block; }
.sb-white .sb-ls__txt { display: flex; flex-direction: column; gap: 1px; }
.sb-white .sb-ls__title { font-size: 14px; font-weight: 500; color: var(--sb-navy); text-decoration: none; }
.sb-white a.sb-ls__title:hover, .sb-white a.sb-ls__title:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.sb-white .sb-ls__meta { font-size: 12px; color: var(--sb-muted); }
.sb-white .sb-ls__desk { display: none; }
@media screen and (min-width: 900px) {
.sb-white .sb-ls { padding: var(--sb-section-y) var(--sb-gutter); gap: 30px; }
.sb-white .sb-ls__head { align-items: flex-end; gap: 40px; }
.sb-white .sb-ls__titles { gap: 10px; }
.sb-white .sb-ls__eyebrow { display: block; }
.sb-white .sb-ls__h2 { font-size: 42px; line-height: 1.02; letter-spacing: var(--sb-ls-heading); }
.sb-white .sb-ls__chips { display: flex; }
.sb-white .sb-ls .sb-ls__all { display: none; }
.sb-white .sb-ls__grid { grid-template-columns: repeat(5, 1fr); gap: var(--sb-s4); }
.sb-white .sb-ls__song { gap: 12px; }
.sb-white .sb-ls__song--5 { display: flex; }
.sb-white .sb-ls__song[hidden] { display: none; }
.sb-white .sb-ls__cover { box-shadow: 0 20px 40px -24px rgba(10,37,64,0.6); }
.sb-white .sb-ls__art { filter: blur(28px); }
.sb-white .sb-ls__bars { left: 14px; right: 14px; }
.sb-white .sb-ls .sb-ls__play { right: 12px; bottom: 12px; width: 36px; height: 36px; font-size: 17px; }
.sb-white .sb-ls__txt { gap: 2px; }
.sb-white .sb-ls__title { font-size: 15px; }
.sb-white .sb-ls__meta { font-size: 13px; }
.sb-white .sb-ls__desk { display: inline; }
}
.sb-white .sb-hw {
    background: #FFFFFF; color: var(--sb-navy); font-family: var(--sb-sans);
    padding: clamp(40px, 5vw, 80px) var(--sb-s5);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(24px, 4vw, 56px); align-items: start;
  }
.sb-white .sb-hw *, .sb-white .sb-hw *::before, .sb-white .sb-hw *::after { box-sizing: border-box; }
.sb-white .sb-hw__head { display: flex; flex-direction: column; gap: 12px; }
.sb-white .sb-hw__eyebrow { margin: 0; font-family: var(--sb-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-blurple); }
.sb-white .sb-hw__h2 { margin: 0; font-family: var(--sb-sans); font-size: clamp(30px, 3.4vw, 42px); line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; color: var(--sb-navy); }
.sb-white .sb-hw__aside { margin: 0; max-width: 380px; font-family: var(--sb-sans); font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--sb-body); }
.sb-white .sb-hw__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sb-white .sb-hw__step { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--sb-hairline); }
.sb-white .sb-hw__step--last { border-bottom: 1px solid var(--sb-hairline); }
.sb-white .sb-hw__num { font-family: var(--sb-sans); font-size: 30px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--sb-blurple); font-variant-numeric: tabular-nums; }
.sb-white .sb-hw__step--last .sb-hw__num { color: var(--sb-navy); }
.sb-white .sb-hw__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sb-white .sb-hw__t { font-family: var(--sb-sans); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; color: var(--sb-navy); }
.sb-white .sb-hw__d { font-family: var(--sb-sans); font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--sb-muted); }
@media screen and (min-width: 900px) {
.sb-white .sb-hw { padding: clamp(48px, 5vw, 80px) var(--sb-gutter); }
.sb-white .sb-hw__step { grid-template-columns: 56px 1fr; padding: 24px 0; }
.sb-white .sb-hw__num { font-size: 32px; }
.sb-white .sb-hw__t { font-size: 20px; }
}
.sb-white .sb-rw.sb-rw--cards { background: var(--sb-surface); color: var(--sb-navy); font-family: var(--sb-sans); padding: clamp(40px, 5vw, 72px) var(--sb-s5); display: flex; flex-direction: column; gap: 28px; }
.sb-white .sb-rw--cards *, .sb-white .sb-rw--cards *::before, .sb-white .sb-rw--cards *::after { box-sizing: border-box; }
.sb-white .sb-rw__chead { display: flex; flex-direction: column; gap: 24px; }
.sb-white .sb-rw__ctitles { display: flex; flex-direction: column; gap: 10px; }
.sb-white .sb-rw__crating { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--sb-sans); font-size: 13px; font-weight: 400; color: var(--sb-body); }
.sb-white .sb-rw__ch2 { margin: 0; font-family: var(--sb-sans); font-size: clamp(30px, 3.4vw, 42px); line-height: 1.04; font-weight: 700; letter-spacing: -0.035em; color: var(--sb-navy); text-wrap: pretty; }
.sb-white .sb-rw--cards .sb-rw__call { align-self: flex-start; font-family: var(--sb-sans); font-size: 14px; font-weight: 500; color: var(--sb-blurple); text-decoration: none; }
.sb-white .sb-rw--cards .sb-rw__call:hover { color: var(--sb-blurple-hover); }
.sb-white .sb-rw__cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.sb-white .sb-rw__ccard { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: #FFFFFF; border: 1px solid var(--sb-hairline); border-radius: 14px; }
.sb-white .sb-rw__cq { margin: 0; font-family: var(--sb-sans); font-size: 15px; line-height: 1.55; font-style: italic; color: var(--sb-body); }
.sb-white .sb-rw__cwho { font-family: var(--sb-sans); font-size: 13px; color: var(--sb-muted); }
@media screen and (min-width: 900px) {
.sb-white .sb-rw.sb-rw--cards { padding-left: var(--sb-gutter); padding-right: var(--sb-gutter); }
}
.sb-white .sb-rw { background: var(--sb-bg); color: var(--sb-navy); font-family: var(--sb-sans); padding: 40px 0; display: flex; flex-direction: column; gap: 22px; overflow: hidden; }
.sb-white .sb-rw *, .sb-white .sb-rw *::before, .sb-white .sb-rw *::after { box-sizing: border-box; }
.sb-white .sb-rw .sb-i { width: 1em; height: 1em; display: block; }
.sb-white .sb-rw__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 0 var(--sb-s5); }
.sb-white .sb-rw__titles { display: flex; flex-direction: column; gap: 8px; }
.sb-white .sb-rw__ex { display: flex; align-items: center; gap: 10px; }
.sb-white .sb-rw__exw { font-size: 16px; font-weight: 700; color: var(--sb-navy); }
.sb-white .sb-rw__stars { display: flex; gap: 2px; color: var(--sb-green); font-size: 16px; }
.sb-white .sb-rw__stars--sm { font-size: 12px; }
.sb-white .sb-rw__stars .sb-rw__star--off { color: var(--sb-hairline); }
.sb-white .sb-rw__h2 { margin: 0; font-family: var(--sb-sans); font-size: 28px; line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; color: var(--sb-navy); word-break: normal; }
.sb-white .sb-rw .sb-rw__all { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sb-sans); font-size: 14px; font-weight: 500; color: var(--sb-blurple); text-decoration: none; white-space: nowrap; }
.sb-white .sb-rw .sb-rw__all .sb-i { width: 15px; height: 15px; }
.sb-white .sb-rw__rows { display: flex; flex-direction: column; gap: 12px; }
.sb-white .sb-rw__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sb-white .sb-rw__track { display: flex; width: max-content; animation: sbRwLtr var(--sb-rw-dur, 120s) linear infinite; }
.sb-white .sb-rw__row--rtl .sb-rw__track { animation-name: sbRwRtl; }
.sb-white .sb-rw__row:hover .sb-rw__track, .sb-white .sb-rw__row.is-paused .sb-rw__track, .sb-white .sb-rw__row:focus-within .sb-rw__track { animation-play-state: paused; }
.sb-white .sb-rw__set { display: flex; align-items: flex-start; gap: 12px; padding-right: 12px; }
.sb-white .sb-rw__card { flex: 0 0 auto; width: 272px; padding: 16px 18px; border: 1px solid var(--sb-hairline); border-radius: 14px; background: #FFFFFF; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color var(--sb-t-state), box-shadow var(--sb-t-state); }
.sb-white .sb-rw__card:hover { border-color: var(--sb-navy); }
.sb-white .sb-rw__card:focus-visible { outline: none; box-shadow: var(--sb-focus-ring); border-color: var(--sb-blurple); }
.sb-white .sb-rw__card.is-open { border-color: var(--sb-blurple); box-shadow: var(--sb-selected-ring); }
.sb-white .sb-rw__row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-white .sb-rw__date { font-size: 11px; color: var(--sb-muted); font-variant-numeric: tabular-nums; }
.sb-white .sb-rw__t { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--sb-navy); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sb-white .sb-rw__q { margin: 0; font-family: var(--sb-sans); font-size: 13.5px; line-height: 1.5; color: var(--sb-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sb-white .sb-rw__card.is-open .sb-rw__q, .sb-white .sb-rw__card.is-open .sb-rw__t { -webkit-line-clamp: unset; display: block; }
.sb-white .sb-rw__who { font-size: 12px; color: var(--sb-muted); margin-top: auto; }
@keyframes sbRwLtr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sbRwRtl { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
.sb-white .sb-rw__track { animation: none; width: auto; }
.sb-white .sb-rw__row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; padding: 0 var(--sb-s5); scrollbar-width: none; }
.sb-white .sb-rw__row::-webkit-scrollbar { display: none; }
.sb-white .sb-rw__set[aria-hidden="true"] { display: none; }
.sb-white .sb-rw__card { scroll-snap-align: start; }
}
@media screen and (min-width: 900px) {
.sb-white .sb-rw { padding: var(--sb-section-y) 0; gap: 28px; }
.sb-white .sb-rw__head { padding: 0 var(--sb-gutter); }
.sb-white .sb-rw__h2 { font-size: 36px; }
.sb-white .sb-rw__card { width: 320px; }
}
.sb-white .sb-fq { background: var(--sb-bg); color: var(--sb-navy); font-family: var(--sb-sans); padding: 0 var(--sb-s5) 40px; display: flex; flex-direction: column; gap: 14px; }
.sb-white .sb-fq *, .sb-white .sb-fq *::before, .sb-white .sb-fq *::after { box-sizing: border-box; }
.sb-white .sb-fq .sb-i { width: 1em; height: 1em; display: block; }
.sb-white .sb-fq__h2 { margin: 0; font-family: var(--sb-sans); font-size: 24px; line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; color: var(--sb-navy); word-break: normal; }
.sb-white .sb-fq__list { display: flex; flex-direction: column; }
.sb-white .sb-fq__item { border-top: 1px solid var(--sb-hairline); }
.sb-white .sb-fq__item:last-child { border-bottom: 1px solid var(--sb-hairline); }
.sb-white .sb-fq .sb-fq__q { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 0; font-family: var(--sb-sans); font-size: 15px; font-weight: 500; color: var(--sb-navy); cursor: pointer; list-style: none; }
.sb-white .sb-fq .sb-fq__q::-webkit-details-marker { display: none; }
.sb-white .sb-fq .sb-fq__q:focus-visible { outline: none; box-shadow: var(--sb-focus-ring); border-radius: 6px; }
.sb-white .sb-fq__ic { color: var(--sb-muted); font-size: 18px; flex: none; margin-top: 1px; transition: transform var(--sb-t-state); }
.sb-white .sb-fq__item[open] .sb-fq__ic { transform: rotate(45deg); }
.sb-white .sb-fq__a { padding: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--sb-body); }
.sb-white .sb-fq__a p { margin: 0 0 10px; }
.sb-white .sb-fq__a p:last-child { margin: 0; }
@media screen and (min-width: 900px) {
.sb-white .sb-fq { padding: 0 var(--sb-gutter) 80px; display: flex; flex-direction: column; gap: 24px; max-width: calc(800px + 2 * var(--sb-gutter)); }
.sb-white .sb-fq__h2 { font-size: 32px; line-height: 1.06; letter-spacing: -0.03em; }
.sb-white .sb-fq .sb-fq__q { padding: 22px 0; font-size: 17px; gap: 20px; }
.sb-white .sb-fq__a { padding-bottom: 22px; font-size: 15px; line-height: 1.6; }
}
.sb-white .sb-cta { background: #FFFFFF; font-family: var(--sb-sans); padding: 0 var(--sb-s5) clamp(48px, 5vw, 80px); }
.sb-white .sb-cta *, .sb-white .sb-cta *::before, .sb-white .sb-cta *::after { box-sizing: border-box; }
.sb-white .sb-cta a { text-decoration: none; }
.sb-white .sb-cta__card {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--sb-navy); color: #FFFFFF;
    border-radius: 24px;
    display: grid; grid-template-columns: 1fr;
  }
.sb-white .sb-cta__bloom {
    position: absolute; left: -220px; bottom: -300px; width: 640px; height: 640px;
    border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, rgba(99, 91, 255, 0.45) 0%, rgba(99, 91, 255, 0) 68%);
  }
.sb-white .sb-cta__copy { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(28px, 5vw, 72px); }
.sb-white .sb-cta__eyebrow { margin: 0; font-family: var(--sb-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-cyan); }
.sb-white .sb-cta__h2 { margin: 0; font-family: var(--sb-sans); font-size: clamp(32px, 4.4vw, 60px); line-height: 0.98; font-weight: 700; letter-spacing: -0.04em; color: #FFFFFF; }
.sb-white .sb-cta__sub { margin: 0; max-width: 440px; font-family: var(--sb-sans); font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--sb-on-navy); }
.sb-white .sb-cta__row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding-top: 6px; }
.sb-white .sb-cta .sb-cta__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 17px 30px;
    background: var(--sb-blurple); color: #FFFFFF;
    font-family: var(--sb-sans); font-size: 17px; font-weight: 500; line-height: 1.2;
    border-radius: 10px; box-shadow: var(--sb-shadow-btn);
    transition: background var(--sb-t-state), transform var(--sb-t-state);
  }
.sb-white .sb-cta .sb-cta__btn:hover { background: var(--sb-blurple-hover); color: #FFFFFF; transform: translateY(-1px); }
.sb-white .sb-cta .sb-cta__btn:focus-visible { outline: none; box-shadow: var(--sb-shadow-btn), 0 0 0 3px rgba(255, 255, 255, 0.4); }
.sb-white .sb-cta .sb-cta__btn .sb-i { width: 16px; height: 16px; }
.sb-white .sb-cta__price { font-family: var(--sb-sans); font-size: 14px; font-weight: 400; color: var(--sb-on-navy-meta); }
.sb-white .sb-cta__trust { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.sb-white .sb-cta__trust-item { display: flex; align-items: center; gap: 6px; font-family: var(--sb-sans); font-size: 14px; font-weight: 400; color: #FFFFFF; }
.sb-white .sb-cta__stars { display: flex; gap: 1px; color: var(--sb-green); font-size: 13px; }
.sb-white .sb-cta__stars .sb-i { width: 13px; height: 13px; }
.sb-white .sb-cta__media { position: relative; min-height: 300px; overflow: hidden; }
.sb-white .sb-cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-white .sb-cta__fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 37, 64, 0.55) 0%, rgba(10, 37, 64, 0) 34%), linear-gradient(0deg, rgba(10, 37, 64, 0.9) 0%, rgba(10, 37, 64, 0) 45%); }
.sb-white .sb-cta__cap { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 4px; }
.sb-white .sb-cta__cap-t { font-family: var(--sb-sans); font-size: 15px; font-weight: 500; color: #FFFFFF; }
.sb-white .sb-cta__cap-m { font-family: var(--sb-sans); font-size: 13px; font-weight: 400; color: var(--sb-on-navy); }
@media (prefers-reduced-motion: reduce) {
.sb-white .sb-cta .sb-cta__btn:hover { transform: none; }
}
@media screen and (min-width: 900px) {
.sb-white .sb-cta { padding: 0 var(--sb-gutter) clamp(48px, 5vw, 80px); }
.sb-white .sb-cta__card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sb-white .sb-cta__copy { gap: 18px; }
.sb-white .sb-cta__media { min-height: 420px; }
.sb-white .sb-cta__fade { background: linear-gradient(90deg, var(--sb-navy) 0%, rgba(10, 37, 64, 0) 32%), linear-gradient(0deg, rgba(10, 37, 64, 0.85) 0%, rgba(10, 37, 64, 0) 40%); }
}
.sb-white .sb-ft { background: #061A2E; color: #FFFFFF; font-family: var(--sb-sans); padding: 32px var(--sb-s5) 40px; display: flex; flex-direction: column; gap: 24px; }
.sb-white .sb-ft *, .sb-white .sb-ft *::before, .sb-white .sb-ft *::after { box-sizing: border-box; }
.sb-white .sb-ft__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sb-white .sb-ft__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.sb-white .sb-ft .sb-wordmark { font-size: 17px; }
.sb-white .sb-ft__tag { display: none; margin: 0; font-size: 14px; line-height: 1.6; color: var(--sb-on-navy-meta); max-width: 280px; }
.sb-white .sb-ft__contact { font-style: normal; display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.sb-white .sb-ft__c { display: flex; flex-direction: column; gap: 4px; }
.sb-white .sb-ft__c-l { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: 0.02em; color: var(--sb-on-navy-meta); }
.sb-white .sb-ft__c-l .sb-i { width: 14px; height: 14px; color: var(--sb-cyan); }
.sb-white .sb-ft .sb-ft__c-v { font-family: var(--sb-sans); font-size: 14px; color: #FFFFFF; text-decoration: none; }
.sb-white .sb-ft .sb-ft__c-v:hover { color: var(--sb-cyan); }
.sb-white .sb-ft__col { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.sb-white .sb-ft__col--desk { display: none; }
.sb-white .sb-ft__h { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #FFFFFF; }
.sb-white .sb-ft .sb-ft__link { font-family: var(--sb-sans); font-size: 13px; color: var(--sb-on-navy); text-decoration: none; transition: color var(--sb-t-state); }
.sb-white .sb-ft .sb-ft__link:hover { color: #FFFFFF; }
.sb-white .sb-ft__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12px; color: var(--sb-on-navy-meta); }
.sb-white .sb-ft__bar-desk { display: none; }
.sb-white .sb-ft .sb-ft__bar a { color: var(--sb-on-navy-meta); text-decoration: none; }
.sb-white .sb-ft .sb-ft__bar a:hover { color: #FFFFFF; }
.sb-white .sb-ft a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; border-radius: 3px; }
@media screen and (min-width: 900px) {
.sb-white .sb-ft { padding: 56px var(--sb-gutter) 28px; gap: 40px; }
.sb-white .sb-ft__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; }
.sb-white .sb-ft__brand { grid-column: auto; }
.sb-white .sb-ft .sb-wordmark { font-size: 20px; }
.sb-white .sb-ft__tag { display: block; }
.sb-white .sb-ft__col, .sb-white .sb-ft__col--desk { display: flex; gap: 10px; font-size: 14px; }
.sb-white .sb-ft__h { font-size: 12px; margin-bottom: 4px; }
.sb-white .sb-ft .sb-ft__link { font-size: 14px; }
.sb-white .sb-ft__bar { padding-top: 24px; font-size: 13px; }
.sb-white .sb-ft__bar-desk { display: inline; }
.sb-white .sb-ft__bar-mob { display: none; }
}
.sb-white .sb-ls__cover--card {container-type:inline-size;background:linear-gradient(180deg,#FFFDFA 0%,#FAF7FF 58%,#F4F1FF 100%);box-shadow:inset 0 0 0 1px #E6E2F7}
.sb-white .sb-ls__cover--card::before {content:"";position:absolute;inset:5.5cqw;border:1px solid #E4DEFA;border-radius:8px;pointer-events:none;z-index:1}
.sb-white .sb-ls__cover--card::after {content:"";position:absolute;inset:0;background:radial-gradient(130% 75% at 50% 112%,var(--sb-wash) 0%,rgba(255,255,255,0) 72%);pointer-events:none}
.sb-white .sb-ls__cover--anniv {--sb-wash:rgba(196,112,126,.20)}
.sb-white .sb-ls__cover--bday {--sb-wash:rgba(99,91,255,.16)}
.sb-white .sb-ls__cover--mom {--sb-wash:rgba(217,155,60,.20)}
.sb-white .sb-ls__cover--mem {--sb-wash:rgba(142,155,196,.26)}
.sb-white .sb-ls__cover--wed {--sb-wash:rgba(0,170,220,.14)}
.sb-white .sb-ls__card {position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqw;padding:12cqw 11cqw 15cqw;text-align:center}
.sb-white .sb-ls__card p {margin:0}
.sb-white .sb-ls__k {font:700 max(10px,5cqw)/1.3 var(--sb-sans);letter-spacing:.12em;text-transform:uppercase;color:#4A40D1;text-wrap:balance}
.sb-white .sb-ls__o {font:400 max(11px,7.4cqw)/1.2 var(--white-serif, "Lora"),Georgia,serif;color:#41546A;text-wrap:balance}
.sb-white .sb-ls__n {font:500 18cqw/1 var(--white-serif, "Lora"),Georgia,serif;letter-spacing:-.01em;color:#0A2540}
.sb-white .sb-ls__t {font:500 11cqw/1.12 var(--white-serif, "Lora"),Georgia,serif;color:#0A2540;text-wrap:balance}
.sb-white .sb-ls__k + .sb-ls__t {margin-top:1cqw}
.sb-white .sb-ls__orn {display:flex;align-items:center;gap:3cqw;color:#E0457B;margin-top:2cqw}
.sb-white .sb-ls__orn i {width:10cqw;height:1px;background:#D8D2F5}
.sb-white .sb-ls__orn svg {width:5.4cqw;height:5.4cqw;display:block}
.sb-white .sb-ls__cover--card {cursor:pointer}
.sb-white .sb-ls__cover--card .sb-ls__play {z-index:2;right:8cqw;bottom:8cqw;width:clamp(32px,14cqw,46px);height:clamp(32px,14cqw,46px);font-size:clamp(15px,6.2cqw,20px);background:#0A2540;color:#FFFFFF}
@container (max-width: 200px) {
.sb-white .sb-ls__orn i {width:6cqw}
.sb-white .sb-ls__card {padding-bottom:19cqw}
}
.sb-white .sb-ls__song[data-sb-ls-playing] .sb-ls__cover--card::before {border-color:rgba(99,91,255,.6)}
@media (prefers-reduced-motion:no-preference) {
.sb-white .sb-ls__song[data-sb-ls-playing] .sb-ls__orn svg {animation:sbLsBeat 1.3s ease-in-out infinite}
}
@keyframes sbLsBeat {0%,100%{transform:scale(1)}35%{transform:scale(1.3)}}
@media (min-width: 900px) {
.sb-white .sb-ls__cover--card {box-shadow:inset 0 0 0 1px #E6E2F7,0 24px 44px -30px rgba(74,64,209,.55)}
}
.sb-white .sb-ft__bar {flex-wrap:wrap;row-gap:12px}
.sb-white .sb-ft__legal {display:flex;flex-wrap:wrap;gap:6px 20px}
.sb-white .sb-ft .sb-ft__legal a {color:#FFFFFF;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.sb-white .sb-ft .sb-ft__legal a:hover, .sb-white .sb-ft .sb-ft__legal a:focus-visible {text-decoration:underline;text-underline-offset:3px}
@media (max-width:899px) {
.sb-white .sb-ft__bar {flex-direction:column-reverse;align-items:flex-start}
}
.sb-white {background:#FFFFFF}
.sb-white {background:#FFFFFF;color:#0A2540;font-family:var(--white-sans, "DM Sans"),-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.sb-white .lp-hdr {position:sticky;top:env(safe-area-inset-top,0px);z-index:50;display:flex;align-items:center;gap:14px;padding:12px 22px;background:#FFFFFF;border-bottom:1px solid rgba(10,37,64,.10)}
.sb-white .lp-hdr__logo {display:block;line-height:0}
.sb-white .lp-hdr__logo img {display:block;height:24px;width:auto}
.sb-white .lp-hdr__cta {box-sizing:border-box;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 16px;border-radius:10px;background:#635BFF;color:#FFFFFF;font:500 14px/1.2 var(--white-sans, "DM Sans"),-apple-system,sans-serif;text-decoration:none;transition:background 200ms ease}
.sb-white .lp-hdr__cta:hover {background:#5449E6;color:#FFFFFF}
.sb-white .lp-hdr__cta:focus-visible {outline:none;box-shadow:0 0 0 3px rgba(99,91,255,.35)}
.sb-white .lp-hdr__cta .lp-long {display:none}
@media (min-width:900px) {
.sb-white .lp-hdr {padding:16px 48px}
.sb-white .lp-hdr__logo img {height:26px}
.sb-white .lp-hdr__cta {font-size:15px;padding:10px 18px}
.sb-white .lp-hdr__cta .lp-long {display:inline}
.sb-white .lp-hdr__cta .lp-short {display:none}
}
.sb-white .sb-wordmark--art {display:inline-block;line-height:0}
@media (max-width:899px) {
.sb-white .sb-hero .sb-hero__trust {flex-direction:column;align-items:flex-start;gap:9px}
.sb-white .sb-hero .sb-hero__trust-item + .sb-hero__trust-item::before {display:none}
}
.sb-white .sb-hero .lp-note {margin:-10px 0 0;font:500 13px/1.4 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#697386}
.sb-white .sb-hero .lp-quote {margin:0;max-width:460px;display:flex;flex-direction:column;gap:9px;padding:16px 18px;background:#F6F9FC;border:1px solid #E3E8EE;border-radius:14px}
.sb-white .sb-hero .lp-quote__stars {display:flex;gap:2px}
.sb-white .sb-hero .lp-quote__stars span {display:flex;align-items:center;justify-content:center;width:18px;height:18px;background:#00B67A}
.sb-white .sb-hero .lp-quote__stars svg {display:block;width:12px;height:12px}
.sb-white .sb-hero blockquote.lp-quote__text {margin:0;padding:0;border:0;font:500 16px/1.45 var(--white-sans, "DM Sans"),-apple-system,sans-serif;font-style:normal;letter-spacing:-0.01em;color:#0A2540}
.sb-white .sb-hero .lp-quote__who {font:400 13px/1.3 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#697386}
.sb-white .sb-cta .lp-cta-reviews {position:relative;display:flex;flex-direction:column;gap:12px;padding:0 clamp(28px,5vw,72px) clamp(28px,5vw,72px)}
@media (min-width:900px) {
.sb-white .sb-cta .lp-cta-reviews {justify-content:center;padding:clamp(28px,4vw,56px) clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0}
}
.sb-white .sb-cta .lp-cr {margin:0;display:flex;flex-direction:column;gap:8px;padding:16px 18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px}
.sb-white .sb-cta .lp-cr__stars {display:flex;gap:2px}
.sb-white .sb-cta .lp-cr__stars span {display:flex;align-items:center;justify-content:center;width:16px;height:16px;background:#00B67A}
.sb-white .sb-cta .lp-cr__stars svg {display:block;width:11px;height:11px}
.sb-white .sb-cta blockquote.lp-cr__q {margin:0;padding:0;border:0;font:500 15px/1.45 var(--white-sans, "DM Sans"),-apple-system,sans-serif;font-style:normal;letter-spacing:-0.005em;color:#FFFFFF}
.sb-white .sb-cta .lp-cr__who {font:400 13px/1.3 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#8FA3B8}
.sb-white .lp-toast {position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;max-width:calc(100% - 32px);padding:12px 18px;border-radius:12px;background:#0A2540;color:#FFFFFF;font:500 14px/1.4 var(--white-sans, "DM Sans"),-apple-system,sans-serif;box-shadow:0 18px 40px -18px rgba(10,37,64,.6)}
.sb-white .lp-hero {position:relative;background:radial-gradient(80% 70% at 50% -10%,rgba(99,91,255,.10),rgba(99,91,255,0) 65%),#FFFFFF;color:#0A2540;font-family:var(--white-sans, "DM Sans"),-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}
.sb-white .lp-hero *, .sb-white .lp-hero *::before, .sb-white .lp-hero *::after {box-sizing:border-box}
.sb-white .lp-hero__in {max-width:1080px;margin:0 auto;padding:26px 20px 36px;display:flex;flex-direction:column;align-items:center;text-align:center}
.sb-white .lp-hero__pill {margin:0 0 18px;display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 8px;background:#FFFFFF;border:1px solid #E3E8EE;border-radius:100px;box-shadow:0 8px 20px -14px rgba(10,37,64,.35);font:500 15px/1.2 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#0A2540}
.sb-white .lp-stars {display:inline-flex;gap:2px}
.sb-white .lp-stars span {display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:#00B67A}
.sb-white .lp-stars svg {display:block;width:13px;height:13px}
.sb-white .lp-hero .lp-hero__h1 {margin:0;font:700 clamp(38px,7vw,76px)/1.04 var(--white-sans, "DM Sans"),-apple-system,sans-serif;letter-spacing:-0.04em;color:#0A2540}
.sb-white .lp-hero__l1, .sb-white .lp-hero__l2 {display:block;text-wrap:balance}
.sb-white .lp-hero__l2 {color:#635BFF}
.sb-white .lp-hero .lp-hero__sub {margin:16px 0 0;max-width:28em;font:400 19px/1.55 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#33475B;text-wrap:balance}
.sb-white .lp-hero__go {margin-top:26px;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.sb-white .lp-hero .lp-hero__cta {display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:440px;min-height:62px;padding:18px 28px;border-radius:14px;background:#635BFF;color:#FFFFFF;font:700 19px/1.2 var(--white-sans, "DM Sans"),-apple-system,sans-serif;text-decoration:none;box-shadow:0 16px 32px -16px rgba(99,91,255,.95);transition:background 200ms ease,transform 200ms ease}
.sb-white .lp-hero .lp-hero__cta:hover {background:#5449E6;color:#FFFFFF;transform:translateY(-1px)}
.sb-white .lp-hero .lp-hero__cta:focus-visible {outline:none;box-shadow:0 0 0 4px rgba(99,91,255,.35)}
.sb-white .lp-hero__cta svg {width:20px;height:20px;flex:none}
.sb-white .lp-hero .lp-hero__note {margin:0;font:500 16px/1.4 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#4A5B6E;text-wrap:balance}
.sb-white .lp-offer {list-style:none;margin:30px 0 0;padding:8px;width:100%;max-width:520px;display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #E3E8EE;border-radius:18px;box-shadow:0 30px 60px -44px rgba(10,37,64,.5);text-align:left}
.sb-white .lp-offer__step {position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:14px;padding:16px 14px}
.sb-white .lp-offer__step + .lp-offer__step::before {content:'';position:absolute;left:14px;right:14px;top:0;height:1px;background:#EEF2F6}
.sb-white .lp-offer__n {display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#F3F2FF;border:1px solid #DCD9FF;font:700 17px/1 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#4A40D1}
/* P1-640: the third circle was filled purple to spotlight "it's yours";
   it read as "you are here" on a progress bar instead. All three alike. */
.sb-white .lp-offer__body {min-width:0;padding-top:2px}
.sb-white .lp-hero .lp-offer__t {margin:0;font:700 18px/1.3 var(--white-sans, "DM Sans"),-apple-system,sans-serif;letter-spacing:-0.01em;color:#0A2540}
.sb-white .lp-hero .lp-offer__d {margin:5px 0 0;font:400 17px/1.5 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#4A5B6E}
.sb-white .lp-hero .lp-hero__count {margin:20px 0 0;display:inline-flex;align-items:center;gap:8px;font:500 17px/1.3 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#0A2540}
.sb-white .lp-hero__count svg {width:18px;height:18px;color:#635BFF}
@media (min-width:900px) {
.sb-white .lp-hero__in {padding:76px 48px 68px}
.sb-white .lp-hero__pill {margin-bottom:26px;font-size:16px;padding:8px 18px 8px 9px}
.sb-white .lp-hero .lp-hero__sub {margin-top:20px;font-size:21px}
.sb-white .lp-hero__go {margin-top:34px}
.sb-white .lp-hero .lp-hero__cta {width:auto;min-width:340px;min-height:64px;padding:19px 36px;font-size:20px}
.sb-white .lp-offer {flex-direction:row;gap:8px;max-width:1040px;margin-top:54px;padding:10px}
.sb-white .lp-offer__step {flex:1 1 0;align-content:start;grid-template-columns:minmax(0,1fr);row-gap:16px;padding:24px 24px 26px}
.sb-white .lp-offer__step + .lp-offer__step::before {left:0;right:auto;top:24px;bottom:26px;width:1px;height:auto}
.sb-white .lp-offer__n {width:44px;height:44px;font-size:18px}
.sb-white .lp-hero .lp-offer__t {font-size:20px}
.sb-white .lp-hero .lp-offer__d {font-size:17px}
.sb-white .lp-hero .lp-hero__count {margin-top:26px}
}
@media (max-width:374px) {
.sb-white .lp-hero .lp-hero__h1 {font-size:34px}
.sb-white .lp-hero__pill {font-size:14px}
.sb-white .lp-hero .lp-hero__sub {font-size:18px}
}
.sb-white .sb-rx__h2 .lp-nw, .sb-white .sb-cta__h2 .lp-nw {white-space:nowrap}
.sb-white .lp-rv {background:#F6F9FC;color:#0A2540;font-family:var(--white-sans, "DM Sans"),-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;border-top:1px solid #E3E8EE;border-bottom:1px solid #E3E8EE}
.sb-white .lp-rv *, .sb-white .lp-rv *::before, .sb-white .lp-rv *::after {box-sizing:border-box}
.sb-white .lp-rv__in {max-width:1180px;margin:0 auto;padding:48px 20px 52px;display:flex;flex-direction:column;gap:26px}
.sb-white .lp-rv__head {display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.sb-white .lp-rv__titles {display:flex;flex-direction:column;gap:10px;min-width:0}
.sb-white .lp-rv__ex {margin:0;display:flex;align-items:center;gap:12px}
.sb-white .lp-rv__exw {font:700 19px/1 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#0A2540}
.sb-white .lp-rv__ex .lp-stars span {width:24px;height:24px}
.sb-white .lp-rv__ex .lp-stars svg {width:16px;height:16px}
.sb-white .lp-rv .lp-rv__h2 {margin:0;font:700 34px/1.08 var(--white-sans, "DM Sans"),-apple-system,sans-serif;letter-spacing:-0.035em;color:#0A2540;text-wrap:balance}
.sb-white .lp-rv .lp-rv__sub {margin:0;font:400 19px/1.5 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#33475B;max-width:34em}
.sb-white .lp-rv .lp-rv__all {display:inline-flex;align-items:center;min-height:48px;font:500 17px/1.3 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#4A40D1;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.sb-white .lp-rv .lp-rv__all:hover {color:#0A2540}
.sb-white .lp-rv__grid {columns:1;column-gap:20px}
.sb-white .lp-rv__card {break-inside:avoid;margin:0 0 18px;padding:24px 22px 22px;background:#FFFFFF;border:1px solid #E3E8EE;border-radius:18px;display:flex;flex-direction:column;gap:14px}
.sb-white .lp-rv .lp-rv__tag {margin:0;font:700 15px/1.3 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#4A40D1}
.sb-white .lp-rv blockquote.lp-rv__q {margin:0;padding:0;border:0;font:400 19px/1.6 var(--white-sans, "DM Sans"),-apple-system,sans-serif;font-style:normal;color:#0A2540;overflow-wrap:anywhere}
.sb-white .lp-rv__who {display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding-top:14px;border-top:1px solid #EEF2F6}
.sb-white .lp-rv__name {font:700 17px/1.3 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#0A2540}
.sb-white .lp-rv__meta {font:400 16px/1.3 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#4A5B6E}
.sb-white .lp-rv__src {margin-left:auto;display:inline-flex;align-items:center;gap:5px;font:500 15px/1.3 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#4A5B6E}
.sb-white .lp-rv__src svg {width:16px;height:16px;color:#00B67A}
.sb-white .lp-rv__grid:not(.is-open) .lp-rv__card:nth-child(n+4) {display:none}
.sb-white .lp-rv__more {align-self:center;width:100%;max-width:420px;min-height:60px;padding:16px 28px;border-radius:14px;border:2px solid #0A2540;background:#FFFFFF;color:#0A2540;font:700 18px/1.2 var(--white-sans, "DM Sans"),-apple-system,sans-serif;cursor:pointer;transition:background 200ms ease}
.sb-white .lp-rv__more:hover {background:#EEF2F6}
.sb-white .lp-rv__more:focus-visible {outline:none;box-shadow:0 0 0 4px rgba(99,91,255,.35)}
@media (min-width:640px) {
.sb-white .lp-rv__grid {columns:2}
.sb-white .lp-rv__grid:not(.is-open) .lp-rv__card:nth-child(4) {display:flex}
}
@media (min-width:1000px) {
.sb-white .lp-rv__in {padding:88px 48px 92px;gap:34px}
.sb-white .lp-rv .lp-rv__h2 {font-size:44px}
.sb-white .lp-rv__grid {columns:3;column-gap:22px}
.sb-white .lp-rv__grid:not(.is-open) .lp-rv__card:nth-child(-n+6) {display:flex}
.sb-white .lp-rv__card {margin-bottom:22px;padding:28px 26px 24px}
}
.sb-white .sb-cta .sb-cta__card {grid-template-columns:minmax(0,1fr)!important}
.sb-white .sb-cta .sb-cta__copy {align-items:center;text-align:center}
.sb-white .sb-cta .sb-cta__row {justify-content:center;flex-direction:column;gap:14px}
.sb-white .sb-cta__h2 {text-wrap:balance}
.sb-white .sb-cta__sub {font-size:20px;max-width:none}
.sb-white .sb-cta .sb-cta__btn {font-size:19px;font-weight:700;min-height:62px;padding:18px 34px}
.sb-white .sb-cta__price {font-size:17px}
.sb-white .lp-hdr__cta {font-size:16px!important;min-height:44px!important}
.sb-white .sb-rx__sub {font-size:19px;line-height:1.5}
.sb-white .sb-rx__quote {font-size:17px;line-height:1.35}
.sb-white .sb-rx__meta {font-size:15px;color:rgba(255,255,255,.85)}
.sb-white .sb-op__eyebrow, .sb-white .sb-ls__eyebrow {font-size:14px}
.sb-white .sb-op__sub {font-size:19px;line-height:1.55}
.sb-white .sb-op__meta {font-size:14px}
.sb-white .sb-ls .sb-ls__chip {font-size:16px;min-height:44px}
.sb-white .sb-ls .sb-ls__all {font-size:16px}
.sb-white .sb-ls__title {font-size:17px}
.sb-white .sb-ls__meta {font-size:15px}
.sb-white .sb-fq__h2 {font-size:32px}
.sb-white .sb-fq .sb-fq__q {font-size:19px;line-height:1.4;min-height:60px}
.sb-white .sb-fq__a, .sb-white .sb-fq__a p {font-size:18px;line-height:1.6}
.sb-white .sb-ft__tag, .sb-white .sb-ft .sb-ft__c-v, .sb-white .sb-ft .sb-ft__link {font-size:16px}
.sb-white .sb-ft__c-l, .sb-white .sb-ft__col, .sb-white .sb-ft__bar {font-size:15px}
.sb-white .sb-ft__h {font-size:13px}
@media (min-width:900px) {
.sb-white .sb-fq__h2 {font-size:40px}
.sb-white .sb-fq .sb-fq__q {font-size:20px}
.sb-white .sb-ls__title {font-size:18px}
}
.sb-white .lp-hero--v2 .lp-hero__in {padding:26px 20px 40px}
.sb-white .lh-pill {margin:0 0 20px;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:#FFFFFF;border:1px solid #E3E8EE;border-radius:100px;box-shadow:0 8px 20px -14px rgba(10,37,64,.35);font:500 15px/1.2 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#0A2540}
.sb-white .lh-pill svg {width:15px;height:15px;color:#E0457B;flex:none;display:block}
.sb-white .lp-hero .lh-h1 {margin:0;font:500 clamp(30px,9.4vw,80px)/1.08 var(--white-serif, "Lora"),Georgia,'Times New Roman',serif;letter-spacing:-0.02em;color:#0A2540}
.sb-white .lh-l1, .sb-white .lh-l2 {display:block}
.sb-white .lh-l2 {font-style:italic;color:#635BFF}
.sb-white .lp-hero .lh-sub {margin:16px 0 0;max-width:30em;font:400 18px/1.55 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#33475B;text-wrap:balance}
.sb-white .lh-sub b {font-weight:700;color:#0A2540}
.sb-white .lh-occ {margin-top:24px;width:100%;max-width:560px;display:grid;grid-template-columns:repeat(6,1fr);gap:16px 4px}
.sb-white .lh-occ__a {grid-column:span 2;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;min-height:44px;border-radius:14px}
.sb-white .lh-occ__a:nth-child(4) {grid-column:2 / span 2}
.sb-white .lh-occ__a:nth-child(5) {grid-column:4 / span 2}
.sb-white .lh-occ__d {width:58px;height:58px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 1px #ECE9FB,0 12px 24px -14px rgba(74,64,209,.55);display:flex;align-items:center;justify-content:center;color:#635BFF;transition:transform 200ms ease,box-shadow 200ms ease}
.sb-white .lh-occ__d svg {width:30px;height:30px;display:block}
.sb-white .lh-occ__l {font:500 15px/1.25 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#425466;white-space:nowrap}
.sb-white .lh-occ__a:hover .lh-occ__d {transform:translateY(-2px);box-shadow:0 0 0 1px #DAD5FA,0 16px 28px -14px rgba(74,64,209,.65)}
.sb-white .lh-occ__a:focus-visible {outline:none}
.sb-white .lh-occ__a:focus-visible .lh-occ__d {box-shadow:0 0 0 3px rgba(99,91,255,.4)}
.sb-white .lh-go {margin-top:26px;width:100%;display:flex;justify-content:center}
.sb-white .lh-trust {list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;font:500 16px/1.3 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#4A5B6E}
.sb-white .lh-trust li {display:inline-flex;align-items:center;gap:7px}
.sb-white .lh-trust svg {width:18px;height:18px;color:#635BFF;flex:none;display:block}
.sb-white .lp-hero .lh-proof {margin:22px 0 0;display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;padding:10px 16px;background:#FFFFFF;border:1px solid #E3E8EE;border-radius:12px;font:500 16px/1.3 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#0A2540}
.sb-white .lh-dot {color:#A3B1C2}
@media (max-width:519px) {
.sb-white .lh-dot {display:none}
.sb-white .lh-proof>span:last-child {flex-basis:100%}
}
@media (max-width:379px) {
.sb-white .lh-pill {display:inline-block;text-align:center;text-wrap:balance;border-radius:18px;padding:8px 14px}
.sb-white .lh-pill svg {display:inline-block;vertical-align:-2px;margin-right:6px}
.sb-white .lp-hero--v2 .lp-hero__in {padding-left:16px;padding-right:16px}
.sb-white .lh-occ {gap:16px 0}
.sb-white .lp-hero .lh-proof {padding:10px 12px}
}
.sb-white .lp-hero--v2 .lp-offer {margin-top:30px}
.sb-white .lp-hdr__nav {display:none}
.sb-white #how, .sb-white #reviews, .sb-white #listen, .sb-white #faq, .sb-white #reactions {scroll-margin-top:84px}
@media (min-width:520px) {
.sb-white .lh-occ {grid-template-columns:repeat(5,1fr);max-width:620px}
.sb-white .lh-occ__a, .sb-white .lh-occ__a:nth-child(4), .sb-white .lh-occ__a:nth-child(5) {grid-column:auto}
}
@media (min-width:900px) {
.sb-white .lp-hero--v2 .lp-hero__in {padding:60px 48px 64px}
.sb-white .lh-pill {font-size:16px;margin-bottom:26px}
.sb-white .lp-hero .lh-h1 {font-size:clamp(56px,6vw,82px)}
.sb-white .lp-hero .lh-sub {font-size:21px;margin-top:20px}
.sb-white .lh-occ {margin-top:34px;gap:18px}
.sb-white .lh-occ__d {width:68px;height:68px}
.sb-white .lh-occ__d svg {width:34px;height:34px}
.sb-white .lh-go {margin-top:32px}
.sb-white .lh-trust li+li {padding-left:20px;border-left:1px solid #E3E8EE}
.sb-white .lp-hero--v2 .lp-offer {margin-top:40px}
.sb-white .lp-hdr__nav {display:flex;align-items:center;gap:28px;margin-left:auto}
.sb-white .lp-hdr__nav a {font:500 15px/1.2 var(--white-sans, "DM Sans"),-apple-system,sans-serif;color:#425466;text-decoration:none;padding:12px 0}
.sb-white .lp-hdr__nav a:hover, .sb-white .lp-hdr__nav a:focus-visible {color:#0A2540;text-decoration:underline;text-underline-offset:4px;outline:none}
.sb-white .lp-hdr__nav .lp-hdr__contact {color:#0A2540;font-weight:700}
.sb-white .lp-hdr__nav + .lp-hdr__cta {margin-left:10px}
}
@media (min-width:900px) and (max-width:1099px) {
.sb-white .lp-hdr__nav {gap:18px}
.sb-white .lp-hdr__nav a {font-size:14px}
}

/* ═══════════════════════════════════════════════════════════════════════
 * POST-APPROVAL CHANGES — founder, 2026-09-20, exact values in their
 * message. Cowork-Claude updated the mockup for these, but that update is
 * NOT on `design/new-look-brief` (still e003b0c), so the founder's message
 * is the spec and the mockup in the repo is now behind for these four
 * areas. Appended rather than edited into the port above, so the verbatim
 * port stays auditable and source order gives these the win.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Footer: four columns from 900px ─────────────────────────────────
 * "brand (logo + tagline) | Email us + Address | page links | the app's
 * pages". The column vocabulary (`sb-ft__col`, `sb-ft__link`) was already
 * in the approved stylesheet — it was written for a five-column footer
 * whose markup never shipped — so this reuses it rather than inventing a
 * parallel set of classes.
 *
 * On phones the grid stays the approved `1fr 1fr`: brand and contact span
 * both columns, which drops the two link lists side by side underneath,
 * then the bar. That is the founder's phone order exactly, with no phone
 * rules needed.                                                          */
.sb-white .sb-ft__brand, .sb-white .sb-ft__col--contact { grid-column: 1 / -1; }
/* 16px, white, and a real 44px target — a footer link is the one thing on
 * this page a 65-year-old is most likely to be aiming at carefully. */
.sb-white .sb-ft .sb-ft__link {
  font-size: 16px;
  color: #FFFFFF;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.sb-white .sb-ft .sb-ft__link:hover { color: var(--sb-cyan); }
/* The rows are already 44px tall, so they sit flush: adjacent 44px targets,
 * no dead space, and a four-link column is 176px rather than 206px. */
.sb-white .sb-ft__col--links { gap: 0; }
/* The address is its own column now, not a block under the wordmark, so the
 * 4px it used to be nudged down by would misalign it from the brand. */
.sb-white .sb-ft__col--contact { margin-top: 0; }
/* hello@songbond.com is a footer link too, and it was 24px tall — the one
 * thing in this footer a 65-year-old is most likely to tap. `[href]` keeps
 * it off the postal address, which shares the class and is not a link. */
.sb-white .sb-ft .sb-ft__c-v[href] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media screen and (min-width: 900px) {
  /* 56px top / 32px bottom (was 56/28). */
  .sb-white .sb-ft { padding: 56px var(--sb-gutter) 32px; }
  /* Four columns, keeping the brand's approved relative weight. */
  .sb-white .sb-ft__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
  .sb-white .sb-ft__brand, .sb-white .sb-ft__col--contact { grid-column: auto; }
  .sb-white .sb-ft .sb-ft__link { font-size: 16px; }
}

/* ── 2 · FAQ: two columns from 900px ────────────────────────────────────
 * Left column sticky so "Before you buy" and the email stay beside the
 * questions while they are read; right column carries the list. The
 * approved `.sb-fq` capped itself at 800px, so that cap is lifted and the
 * inner grid takes over at 1180px centred.
 *
 * `top: 96px` clears the sticky header (77px at desktop) with the same
 * breathing room `scroll-margin-top: 84px` uses for anchor jumps.        */
/* On phones the wrapper has to carry the gap `.sb-fq` used to put between
 * the heading and the list — it is now `.sb-fq`'s only child, so `.sb-fq`'s
 * own gap has nothing left to act on. Same two values (14px / 24px). */
.sb-white .sb-fq__in { display: flex; flex-direction: column; gap: 14px; }
/* Phones unchanged means exactly that: no email line below 900px, because
 * today's FAQ has none. */
.sb-white .sb-fq__help { display: none; }

@media screen and (min-width: 900px) {
  .sb-white .sb-fq { max-width: none; padding: 0 var(--sb-gutter) 80px; }
  .sb-white .sb-fq__in {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 2fr;
    gap: 48px;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    align-items: start;
  }
  .sb-white .sb-fq__aside {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .sb-white .sb-fq__in { gap: 48px; }
  /* "Email us", then the address under it — the footer's own pattern. */
  .sb-white .sb-fq__help {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--sb-body);
  }
  /* 44px even though this line only exists at >=900px: a laptop with a
   * touchscreen is still a touchscreen. */
  .sb-white .sb-fq__help a {
    color: var(--sb-blurple);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .sb-white .sb-fq__help a:hover { text-decoration: underline; }
}

/* ── 3 · Review quotes: 17px / 1.6 at every width (were 19px) ───────────
 * Same selector as the rule above so source order settles it; only the
 * two properties change.                                                 */
.sb-white .lp-rv blockquote.lp-rv__q { font-size: 17px; line-height: 1.6; }

/* ── 4 · Hero occasion discs: all five in one row on phones ─────────────
 * 360px to 519px. The approved stylesheet does 3+2 below 520px and five
 * across above it; the founder wants five across on a phone too, matching
 * today's live hero.
 *
 * THE 13px LABEL IS THE ONE AGREED EXCEPTION to §2.8's 15px floor
 * (founder, 2026-09-20) — it is what today's live hero already does.
 *
 * Under 360px this does not apply and the approved 3+2 with 15px labels
 * comes back, which is why the range has a lower bound.
 *
 * 360–374px is the ONE range that keeps equal columns, because that is
 * what makes "Just Because" wrap (the column is 65.6px and the label
 * wants 81.4px). Hence `white-space: normal` here — the approved label is
 * `nowrap`, and left that way it would overflow its column instead.      */
@media (min-width: 360px) and (max-width: 519.98px) {
  .sb-white .lh-occ {
    grid-template-columns: repeat(5, 1fr);
    max-width: none;
    gap: 10px 4px;
  }
  .sb-white .lh-occ__a,
  .sb-white .lh-occ__a:nth-child(4),
  .sb-white .lh-occ__a:nth-child(5) { grid-column: auto; }
  .sb-white .lh-occ__d { width: 54px; height: 54px; }
  .sb-white .lh-occ__d svg { width: 28px; height: 28px; }
  .sb-white .lh-occ__l {
    font-size: 13px;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
  }
}

/* ── 4b · 375px and up: flex, not equal columns (founder, 2026-09-20) ────
 * "lay out the five discs with flex and justify-content: space-between,
 * each item as wide as its own content (not equal columns) … and 'Just
 * Because' then stays on one line from 375px up. Only wrap it at
 * 360–374px."
 *
 * Equal columns are what forced the wrap: five 1fr columns of a 390px rail
 * are 66.8px each and the label wants 81.4px. Sized to its own content it
 * fits, and `space-between` spends the remaining width on the gaps.
 *
 * `display: flex` makes the base rule's `grid-template-columns` and the
 * `grid-column` spans inert, so they do not need unsetting.
 *
 * `gap: 0` is deliberate: every pixel not spent on a gap floor is slack
 * against a wider fallback font, and `space-between` supplies the real
 * gaps. Slack at the tightest width (375px) is measured, not assumed —
 * see the WIP file. `nowrap` is the approved stylesheet's own value at
 * every other width, so this is a return to it, not a new idea.
 *
 * NOTE: the mockup in the repo is GRID at every width — `.lh-occ` is
 * `display: grid` in the approved file. The founder's message says the
 * mockup is flex, and Cowork-Claude's mockup update was never pushed
 * (`design/new-look-brief` is still at e003b0c), so the message is the
 * spec. 520px and up is left on the approved grid, because the founder
 * called that range unchanged and the labels already sit 17.5px+ apart
 * there.                                                                 */
@media (min-width: 375px) and (max-width: 519.98px) {
  .sb-white .lh-occ {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }
  .sb-white .lh-occ__a { flex: 0 0 auto; }
  .sb-white .lh-occ__l { white-space: nowrap; }
}


/* ═══════════════════════════════════════════════════════════════════════
 * SECOND ROUND — founder's decisions on the close-out report, 2026-09-20.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── 5 · The footer tagline shows on phones too ─────────────────────────
 * Founder: "Show the footer tagline on phones too. The updated mockup
 * shows it under the logo." The approved stylesheet hides it below 900px
 * (`.sb-ft__tag { display: none }`); source order overrides that.        */
.sb-white .sb-ft__tag { display: block; }

/* ── 6 · Seven invisible 44px hit areas ────────────────────────────────
 * Founder: "yes, add the invisible hit-area expansion to the seven you
 * listed (no visual change)."
 *
 * A CENTRED PSEUDO-ELEMENT, not padding and not min-height, and that is
 * the whole point: nothing moves. The glyph, the pill and the button keep
 * the exact size the mockup drew them; only the area that answers a
 * thumb grows. Proven by photographing each region before and after and
 * comparing the images byte for byte.
 *
 * EVERY ONE WAS CHECKED FOR WHAT IT REACHES OVER, because a pseudo-element
 * that extends across a sibling steals that sibling's taps:
 *   .lp-hdr__logo      24–26px tall, +10px each way into the header's own
 *                      12px padding. The nav is horizontally separate.
 *   .sb-wordmark--art  26.9px, +8.5px into the 12px flex gap above the
 *                      tagline. Nothing clickable in that gap.
 *   .sb-ls__all        24px, +10px inside `.sb-ls__head`, which holds only
 *                      the titles (not links) beside it.
 *   .sb-rx__sound      30px, +7px — and it sits at `top/right: 12px`
 *                      inside `.sb-rx__frame`, which is `overflow: hidden`,
 *                      so the growth stays INSIDE the frame. The scrim
 *                      above it is `pointer-events: none`.
 *   .sb-ls__play       32–46px, +6px — at `right/bottom: 10px` inside
 *                      `.sb-ls__cover`, also `overflow: hidden`. 6 < 10,
 *                      so again the growth is inward and nothing clips.
 *   .sb-rx__arrow      40px, +2px into the arrows' own 8px gap.
 *   .lp-hdr__nav a     40.8–42px, +1.6px into the nav's 28px gap. The
 *                      header's height is set by the CTA (44px), so this
 *                      cannot change it.
 *
 * `.sb-rx__sound` and `.sb-ls__play` ARE DELIBERATELY ABSENT from the
 * `position: relative` rule below. Both are already `position: absolute`,
 * which makes them a containing block for their own pseudo-element
 * anyway — and giving them `relative` would tear them off the corners
 * they are pinned to.
 *
 * `min-width: 100%` / `min-height: 100%` guard the other direction: a
 * target that is ALREADY bigger than 44px must not be shrunk by this.
 * `.sb-ls__play` reaches 46px under the cover's container queries.       */
.sb-white .lp-hdr__logo,
.sb-white .sb-ft .sb-wordmark--art,
.sb-white .sb-ls .sb-ls__all,
.sb-white .sb-rx__arrow,
.sb-white .lp-hdr__nav a { position: relative; }

.sb-white .lp-hdr__logo::after,
.sb-white .sb-ft .sb-wordmark--art::after,
.sb-white .sb-ls .sb-ls__all::after,
.sb-white .sb-rx__sound::after,
.sb-white .sb-ls .sb-ls__play::after,
.sb-white .sb-rx__arrow::after,
.sb-white .lp-hdr__nav a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  min-width: 100%;
  min-height: 100%;
}

/* ── 7 · The gift-page carousel: indicators, not buttons ────────────────
 * Founder: "make them indicators only, not buttons. The slides change by
 * themselves every 5 seconds. Also let people swipe the phone left and
 * right to change slides."
 *
 * They are `<span>`s now (see WhiteOpen.tsx), so the cursor and the focus
 * ring have to go with them — a focus ring on something that cannot be
 * focused is a lie, and a pointer cursor on something that does not
 * respond is worse. Everything else about them is the mockup's, unchanged:
 * 8px, 28px when current, the same cyan and the same 300ms.
 *
 * `touch-action: pan-y` on the phone lets the horizontal swipe be ours
 * while a vertical drag still scrolls the page — without it a swipe that
 * starts on the phone can be claimed by the page and the slide never
 * moves. `user-select: none` stops a swipe selecting the gift page's
 * words on the way past.                                                 */
.sb-white .sb-op__dot { cursor: default; }
.sb-white .sb-op__phone {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}