/* ==========================================================================
   Pyramid Stream — Component styles
   Real CSS translations of the compiled React components in
   project/_ds/.../_ds_bundle.js. Class names are new; values (colors,
   spacing, radii, shadows, motion) are ported 1:1 from the bundle.
   ========================================================================== */

/* ---------- Genre color keys (Tag.jsx GENRE_VAR / Artwork.jsx GENRE_VAR) --- */
[data-genre="ufo"]{--genre-color:var(--genre-ufo)}
[data-genre="unexplained"]{--genre-color:var(--genre-unexplained)}
[data-genre="paranormal"]{--genre-color:var(--genre-paranormal)}
[data-genre="scifi"]{--genre-color:var(--genre-scifi)}
[data-genre="ancient"]{--genre-color:var(--genre-ancient)}
[data-genre="mind"]{--genre-color:var(--genre-mind)}
[data-genre="esoteric"]{--genre-color:var(--genre-esoteric)}
[data-genre="horror"]{--genre-color:var(--genre-horror)}
[data-genre="drama"]{--genre-color:var(--genre-drama)}
[data-genre="animation"]{--genre-color:var(--genre-animation)}

/* ---------- Icon (Icon.jsx) ------------------------------------------------ */
.icon{display:inline-block;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- GoldRule (GoldRule.jsx) ---------------------------------------- */
.gold-rule{border:0;margin:0;height:1px;width:100%;background:var(--grad-gold-rule)}
.gold-rule--solid{background:var(--line-hairline)}
.gold-rule--ornament{display:flex;align-items:center;gap:var(--sp-6);height:auto;background:none;width:100%}
.gold-rule--ornament .gold-rule__line{flex:1;height:1px;background:var(--grad-gold-rule)}
.gold-rule--ornament.gold-rule--solid .gold-rule__line{background:var(--line-hairline)}
.gold-rule__diamond{flex:0 0 auto;width:5px;height:5px;background:var(--gold-500);transform:rotate(45deg);box-shadow:var(--glow-gold-sm)}

/* ---------- Badge (Badge.jsx) ---------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:var(--sp-2);height:22px;padding:0 var(--sp-4);border-radius:var(--r-xs);font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap}
.badge .icon{width:11px;height:11px}
.badge--gold{background:var(--grad-gold);color:var(--text-on-gold);border:1px solid transparent}
.badge--member{background:transparent;color:var(--gold-300);border:1px solid var(--line-strong)}
.badge--live{background:var(--ember-500);color:var(--stone-050);border:1px solid transparent}
.badge--neutral{background:rgba(231,227,217,.10);color:var(--text-body);border:1px solid var(--line-subtle)}
.badge--rating{background:transparent;color:var(--text-muted);border:1px solid var(--line-subtle)}

/* ---------- Button (Button.jsx) --------------------------------------------
   sizes: sm 32/md 42/lg 52. variants: primary/secondary/outline/ghost/danger */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-4);height:42px;padding:0 var(--sp-8);border-radius:var(--r-sm);border:1px solid transparent;font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap;cursor:pointer;text-decoration:none;transition:var(--t-hover);background:none}
.btn:active{transform:var(--press-scale)}
.btn--full{display:flex;width:100%}
.btn .icon{width:16px;height:16px}
.btn--sm{height:32px;padding:0 var(--sp-6);font-size:var(--fs-2xs);gap:var(--sp-3)}
.btn--sm .icon{width:14px;height:14px}
.btn--lg{height:52px;padding:0 var(--sp-10);font-size:var(--fs-sm);gap:var(--sp-5)}
.btn--lg .icon{width:20px;height:20px}
.btn--primary{background:var(--grad-gold);color:var(--text-on-gold);box-shadow:var(--shadow-sm)}
.btn--primary:hover{box-shadow:var(--glow-gold-md);filter:brightness(1.08)}
.btn--secondary{background:var(--action-secondary);color:var(--text-heading);border-color:var(--line-subtle);backdrop-filter:blur(var(--blur-glass))}
.btn--secondary:hover{background:var(--action-secondary-hover);border-color:var(--line-strong)}
.btn--outline{background:transparent;color:var(--gold-200);border-color:var(--line-strong)}
.btn--outline:hover{background:rgba(201,162,74,.10);border-color:var(--gold-500)}
.btn--ghost{background:transparent;color:var(--text-muted);border-color:transparent}
.btn--ghost:hover{background:var(--action-secondary);color:var(--text-heading)}
.btn--danger{background:transparent;color:var(--ember-500);border-color:var(--ember-500)}
.btn--danger:hover{background:var(--ember-500);color:var(--stone-050)}
.btn[disabled]{cursor:not-allowed;opacity:.38}

/* ---------- IconButton (IconButton.jsx) ------------------------------------
   sizes: sm 30/md 38/lg 48. variants: glass/gold/bare */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:var(--r-circle);cursor:pointer;transition:var(--t-hover)}
.icon-btn .icon{width:17px;height:17px}
.icon-btn--sm{width:30px;height:30px}
.icon-btn--sm .icon{width:14px;height:14px}
.icon-btn--lg{width:48px;height:48px}
.icon-btn--lg .icon{width:22px;height:22px}
.icon-btn--glass{background:var(--surface-glass);border:1px solid var(--line-subtle);color:var(--text-heading);backdrop-filter:blur(var(--blur-glass))}
.icon-btn--glass:hover{background:var(--action-secondary-hover);border-color:var(--line-strong)}
.icon-btn--gold{background:var(--grad-gold);border:1px solid transparent;color:var(--text-on-gold)}
.icon-btn--gold:hover{box-shadow:var(--glow-gold-md)}
.icon-btn--bare{background:transparent;border:1px solid transparent;color:var(--text-muted)}
.icon-btn--bare:hover{color:var(--text-heading)}
.icon-btn--bare.is-active{color:var(--gold-300)}
.icon-btn[disabled]{cursor:not-allowed;opacity:.38}

/* ---------- Logo (Logo.jsx) ------------------------------------------------ */
.logo{display:inline-flex}
.logo__img{display:block;width:auto}

/* ---------- Tag (Tag.jsx) --------------------------------------------------
   default size md: h36 padding 0 20. sm: h28 padding 0 12 */
.tag{display:inline-flex;align-items:center;gap:var(--sp-4);height:36px;padding:0 var(--sp-7);background:transparent;border:1px solid var(--line-subtle);border-radius:var(--r-pill);color:var(--text-body);font-family:var(--font-ui);font-weight:var(--fw-medium);font-size:var(--fs-xs);letter-spacing:var(--ls-label-tight);text-transform:uppercase;cursor:pointer;transition:var(--t-hover)}
.tag__dot{width:6px;height:6px;border-radius:var(--r-circle);background:var(--genre-color,var(--gold-500))}
.tag:hover,.tag.is-selected{border-color:var(--genre-color,var(--gold-500));color:var(--stone-050)}
.tag:hover .tag__dot,.tag.is-selected .tag__dot{box-shadow:0 0 8px var(--genre-color,var(--gold-500))}
.tag.is-selected{background:rgba(201,162,74,.14)}

/* ---------- SectionHeader (SectionHeader.jsx) ------------------------------ */
.section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-8);margin-bottom:var(--sp-5)}
.section-header--page{margin-bottom:var(--sp-8)}
.section-header__title{margin:0;font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--fs-lg);letter-spacing:var(--ls-label-tight);text-transform:uppercase;color:var(--text-heading)}
.section-header--page .section-header__title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-3xl);letter-spacing:var(--ls-display);color:var(--text-display)}
.section-header__action{display:inline-flex;align-items:center;gap:var(--sp-2);font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);white-space:nowrap;padding-bottom:3px;transition:var(--t-hover)}
.section-header__action .icon{width:13px;height:13px;transition:var(--t-hover)}
.section-header__action:hover{color:var(--gold-100)}
.section-header__action:hover .icon{transform:translateX(2px)}

/* ---------- Artwork (Artwork.jsx) ------------------------------------------ */
.artwork{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;border-radius:var(--r-md);background:var(--ink-900)}
.artwork__img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}
.artwork__scrim{position:absolute;inset:0;background:var(--surface-scrim)}

/* ---------- TopNav (TopNav.jsx) --------------------------------------------
   default height 72, background gradient, transparent border.
   condensed: height 60, glass background, hairline border. */
.topnav{position:sticky;top:0;z-index:100;height:var(--header-h);display:flex;align-items:center;gap:var(--sp-10);padding:0 var(--page-gutter);background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,0));border-bottom:1px solid transparent;transition:var(--t-hover)}
.topnav .logo__img{height:24px}
.topnav--condensed{height:var(--header-h-condensed);background:var(--surface-glass);backdrop-filter:blur(var(--blur-glass));border-bottom-color:var(--line-hairline)}
.topnav--condensed .logo__img{height:20px}
.topnav__links{display:flex;align-items:center;gap:var(--sp-9)}
.topnav__link{position:relative;padding-bottom:3px;font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.topnav__link:hover{color:var(--gold-200)}
.topnav__link.is-active{color:var(--gold-200)}
.topnav__link.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--grad-gold-rule)}
.topnav__spacer{flex:1}
.topnav__actions{display:flex;align-items:center;gap:var(--sp-6)}
.topnav__signin{font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.topnav__signin:hover{color:var(--gold-100)}
@media (max-width:860px){
  .topnav{gap:var(--sp-6);padding:0 var(--page-gutter-sm)}
  .topnav__links{display:none}
}

/* ---------- HeroBanner (HeroBanner.jsx) ------------------------------------ */
.hero{position:relative;height:620px;overflow:hidden;background:var(--surface-void)}
.hero__art{position:absolute;inset:0}
.hero__art img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}
.hero__veil{position:absolute;inset:0;background:var(--grad-hero-veil)}
.hero__fade-base{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(0,0,0,0),var(--surface-base))}
.hero__content{position:relative;height:100%;max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter);display:flex;flex-direction:column;justify-content:center;gap:var(--sp-7)}
.hero__inner{max-width:620px;display:flex;flex-direction:column;gap:var(--sp-7)}
.hero__title{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-5xl);line-height:var(--lh-tight);letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--text-display);text-shadow:0 2px 30px rgba(0,0,0,.8)}
.hero__meta{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.hero__meta-item{display:flex;align-items:center;gap:var(--sp-5);font:var(--type-body-sm);color:var(--text-muted)}
.hero__meta-item::before{content:"";width:3px;height:3px;background:var(--gold-600);border-radius:var(--r-circle)}
.hero__meta-item:first-of-type::before{display:none}
.hero__synopsis{margin:0;font:var(--type-body);color:var(--text-body);max-width:560px}
.hero__cta{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-3)}

/* ---------- Rail (Rail.jsx) ------------------------------------------------ */
.rail{position:relative}
.rail__track{display:flex;gap:var(--rail-gap);overflow-x:auto;padding-bottom:var(--sp-4);scrollbar-width:none;-ms-overflow-style:none}
.rail__track::-webkit-scrollbar{display:none}
.rail__nav{position:absolute;right:0;top:52%;display:flex;gap:var(--sp-3);opacity:0;transition:var(--t-hover);pointer-events:none}
.rail:hover .rail__nav,.rail:focus-within .rail__nav{opacity:1;pointer-events:auto}

/* ---------- PosterCard (PosterCard.jsx) ------------------------------------
   NOTE — hover-clipping fix (see chats/chat1.md): the rail track scrolls
   horizontally, which makes its vertical overflow "auto" too, so a card that
   lifts -4px on hover had its top gold border clipped. The fix lives on the
   card's OWN style (margin-top:6px), not on a wrapper — that 6px headroom
   absorbs the -4px lift and the full top edge stays visible. */
.poster-card{display:block;width:var(--card-poster-w);flex:0 0 auto;margin-top:6px;cursor:pointer;color:inherit;transform:none;transition:var(--t-card)}
.poster-card:hover{transform:var(--lift-card)}
.poster-card__art{border:1px solid var(--line-subtle);box-shadow:var(--shadow-md);transition:var(--t-hover)}
.poster-card:hover .poster-card__art{border-color:var(--line-strong);box-shadow:var(--shadow-card-hover)}
.poster-card__art .artwork__scrim{opacity:.55;transition:var(--t-hover)}
.poster-card:hover .poster-card__art .artwork__scrim{opacity:.95}
.poster-card__badges{position:absolute;top:var(--sp-5);left:var(--sp-5);display:flex;gap:var(--sp-3)}
.poster-card__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--t-hover)}
.poster-card:hover .poster-card__play{opacity:1}
.poster-card__progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.6)}
.poster-card__progress-bar{height:100%;background:var(--gold-500);box-shadow:var(--glow-gold-sm)}
.poster-card__body{margin-top:var(--sp-5)}
.poster-card__title{position:absolute;left:0;right:0;bottom:0;padding:0 var(--sp-5) var(--sp-5);font:var(--type-body-sm);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label-tight);text-transform:uppercase;color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:var(--t-hover)}
.poster-card:hover .poster-card__title{color:var(--gold-100)}
.poster-card__meta{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-2);font:var(--type-body-sm);font-size:var(--fs-xs);color:var(--text-faint)}
.poster-card__meta .icon{width:12px;height:12px;opacity:.75}

/* ---------- StillCard (StillCard.jsx) --------------------------------------
   same hover-clip fix as PosterCard: margin-top:6px lives on the card itself */
.still-card{display:block;width:var(--card-still-w);flex:0 0 auto;margin-top:6px;cursor:pointer;color:inherit;transform:none;transition:var(--t-card)}
.still-card:hover{transform:var(--lift-card)}
.still-card__art{aspect-ratio:16/9;border:1px solid var(--line-subtle);box-shadow:var(--shadow-md);transition:var(--t-hover)}
.still-card:hover .still-card__art{border-color:var(--line-strong);box-shadow:var(--shadow-card-hover)}
.still-card__art .artwork__scrim{opacity:.5;transition:var(--t-hover)}
.still-card:hover .still-card__art .artwork__scrim{opacity:.9}
.still-card__badge{position:absolute;top:var(--sp-5);left:var(--sp-5)}
.still-card__duration{position:absolute;right:var(--sp-5);bottom:var(--sp-5);padding:2px var(--sp-4);background:rgba(0,0,0,.72);border:1px solid var(--line-subtle);border-radius:var(--r-xs);font:var(--type-label);letter-spacing:var(--ls-label-tight);color:var(--stone-100)}
.still-card__watch{position:absolute;left:var(--sp-6);bottom:var(--sp-6);display:flex;align-items:center;gap:var(--sp-4);opacity:0;transition:var(--t-hover)}
.still-card__watch .icon{color:var(--gold-300);width:16px;height:16px}
.still-card__watch span{font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-100)}
.still-card:hover .still-card__watch{opacity:1}
.still-card__body{margin-top:var(--sp-5)}
.still-card__title{font:var(--type-body-sm);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label-tight);text-transform:uppercase;color:var(--text-heading);transition:var(--t-hover)}
.still-card:hover .still-card__title{color:var(--gold-100)}
.still-card__meta{margin-top:var(--sp-2);font:var(--type-body-sm);font-size:var(--fs-xs);color:var(--text-faint)}

/* ---------- PlanCard (PlanCard.jsx) ----------------------------------------- */
.plan-card{position:relative;display:flex;flex-direction:column;gap:var(--sp-7);padding:var(--sp-10);min-width:280px;background:var(--surface-inset);border:1px solid var(--line-subtle);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden;transition:var(--t-hover)}
.plan-card:hover{border-color:var(--line-strong)}
.plan-card--featured{background:var(--surface-raised);border-color:var(--line-strong);box-shadow:var(--shadow-lg),var(--inset-gold)}
.plan-card--featured::before{content:"";position:absolute;inset:0;background:var(--grad-apex);pointer-events:none}
.plan-card__head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5)}
.plan-card__name{font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-400)}
.plan-card__price{position:relative;display:flex;align-items:baseline;gap:var(--sp-4)}
.plan-card__amount{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-5xl);letter-spacing:var(--ls-title);color:var(--text-display);line-height:1}
.plan-card__period{font:var(--type-body-sm);color:var(--text-muted)}
.plan-card__features{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-5)}
.plan-card__features li{display:flex;align-items:flex-start;gap:var(--sp-5);font:var(--type-body-sm);color:var(--text-body)}
.plan-card__features .icon{color:var(--gold-500);width:14px;height:14px;margin-top:4px;flex:0 0 auto}
.plan-card__cta{position:relative;margin-top:auto}

/* ---------- MemberGate (MemberGate.jsx) ------------------------------------- */
.member-gate{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--sp-7);padding:var(--sp-12) var(--sp-10);background:var(--surface-overlay);backdrop-filter:blur(var(--blur-glass));border:1px solid var(--line-hairline);border-radius:var(--r-lg);overflow:hidden}
.member-gate::before{content:"";position:absolute;inset:0;background:var(--grad-apex);pointer-events:none}
.member-gate--compact{gap:var(--sp-5);padding:var(--sp-9)}
.member-gate .icon{position:relative;color:var(--gold-400);width:26px;height:26px}
.member-gate--compact .icon{width:20px;height:20px}
.member-gate__headline{position:relative;margin:0;font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-3xl);letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--text-display);max-width:520px}
.member-gate--compact .member-gate__headline{font-size:var(--fs-xl)}
.member-gate__body{position:relative;margin:0;font:var(--type-body);color:var(--text-body);max-width:460px}
.member-gate__cta{position:relative}

/* ---------- CommentItem (CommentItem.jsx) ----------------------------------- */
.comment{display:flex;gap:var(--sp-6);padding:var(--sp-7) 0;border-top:1px solid var(--line-subtle)}
.comment__avatar{flex:0 0 auto;width:38px;height:38px;border-radius:var(--r-circle);display:flex;align-items:center;justify-content:center;background:var(--ink-800);border:1px solid var(--line-hairline);font:var(--type-label);letter-spacing:.06em;color:var(--gold-300)}
.comment__body{flex:1;min-width:0}
.comment__head{display:flex;align-items:center;gap:var(--sp-5);margin-bottom:var(--sp-3);flex-wrap:wrap}
.comment__author{font:var(--type-body-sm);font-weight:var(--fw-semibold);color:var(--text-heading)}
.comment__meta{font:var(--type-body-sm);font-size:var(--fs-xs);color:var(--text-faint)}
.comment__text{margin:0;font:var(--type-body-sm);color:var(--text-body)}
.comment__actions{display:flex;align-items:center;gap:var(--sp-8);margin-top:var(--sp-5)}
.comment__action{display:inline-flex;align-items:center;gap:var(--sp-3);background:none;border:0;padding:0;cursor:pointer;font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);transition:var(--t-hover)}
.comment__action .icon{width:13px;height:13px}
.comment__action.is-liked{color:var(--gold-300)}

/* ---------- MerchDrop (MerchDrop.jsx) --------------------------------------- */
.merch-drop{display:flex;gap:var(--sp-6);align-items:center;width:100%;max-width:348px;padding:var(--sp-6);background:var(--surface-glass);backdrop-filter:blur(var(--blur-glass));border:1px solid var(--line-hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.merch-drop__art{width:76px;flex:0 0 76px;aspect-ratio:1/1;border-radius:var(--r-sm)}
.merch-drop__body{flex:1;min-width:0}
.merch-drop__note{margin-bottom:var(--sp-2)}
.merch-drop__product{font:var(--type-body-sm);font-weight:var(--fw-semibold);color:var(--text-heading)}
.merch-drop__price{font:var(--type-body-sm);font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--sp-5)}

/* ---------- Input / field (Input.jsx) --------------------------------------- */
.field{display:flex;flex-direction:column;gap:var(--sp-3)}
.field__label{font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.field__control{position:relative;display:flex;align-items:center}
.field__icon{position:absolute;left:12px;color:var(--text-faint);transition:var(--t-hover);width:16px;height:16px}
.field__control:focus-within .field__icon{color:var(--gold-400)}
.field__input{width:100%;height:46px;padding:0 var(--sp-6);background:var(--surface-inset);border:1px solid var(--line-subtle);border-radius:var(--r-sm);color:var(--text-heading);font:var(--type-body);outline:none;transition:var(--t-hover)}
.field__control--icon .field__input{padding-left:38px}
.field__control:focus-within .field__input{border-color:var(--gold-500);box-shadow:var(--glow-gold-sm)}
.field__hint{font:var(--type-body-sm);font-size:var(--fs-xs);color:var(--text-faint)}

/* ---------- Checkbox (Checkbox.jsx) ----------------------------------------- */
.checkbox{display:flex;align-items:flex-start;gap:var(--sp-5);cursor:pointer}
.checkbox__input{position:absolute;opacity:0;width:0;height:0}
.checkbox__box{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:18px;height:18px;margin-top:2px;border-radius:var(--r-xs);background:var(--surface-inset);border:1px solid var(--line-subtle);color:var(--text-on-gold);transition:var(--t-hover)}
.checkbox__box .icon{width:12px;height:12px;opacity:0;transition:var(--t-hover)}
.checkbox__input:checked ~ .checkbox__box{background:var(--grad-gold);border-color:transparent}
.checkbox__input:checked ~ .checkbox__box .icon{opacity:1}
.checkbox__input:focus-visible ~ .checkbox__box{box-shadow:var(--ring-focus)}
.checkbox__label{display:block;font:var(--type-body-sm);color:var(--text-body)}

/* ---------- Footer (Footer.jsx) --------------------------------------------- */
.footer{padding:var(--sp-13) var(--page-gutter) var(--sp-10);background:var(--surface-void);border-top:1px solid var(--line-hairline)}
.footer__inner{max-width:var(--page-max);margin:0 auto}
.footer__cols{display:flex;flex-wrap:wrap;gap:var(--sp-13);justify-content:space-between}
.footer__brand{display:flex;flex-direction:column;gap:var(--sp-6);max-width:300px}
.footer__brand .logo__img{height:22px;align-self:flex-start}
.footer__brand p{margin:0;font:var(--type-body-sm);font-size:var(--fs-xs);color:var(--text-faint)}
.footer__col{display:flex;flex-direction:column;gap:var(--sp-5)}
.footer__col a{display:block;font:var(--type-body-sm);font-size:var(--fs-xs);color:var(--text-muted)}
.footer__col a:hover{color:var(--gold-200)}
.footer__rule{margin:var(--sp-11) 0 var(--sp-7)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:var(--sp-8);justify-content:space-between;font:var(--type-body-sm);font-size:var(--fs-3xs);letter-spacing:var(--ls-label-tight);text-transform:uppercase;color:var(--text-faint)}
.footer__legal{display:flex;gap:var(--sp-8)}
.footer__legal a{color:inherit}
.footer__legal a:hover{color:var(--gold-200)}