/*!
 * Serpong Creative Agency: site styles
 * Brand: "Spotlight Gem". Token values copied from brand/brand-tokens.json (ui.cssVariables).
 * Plain CSS, no build step.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  --sc-color-ink: #130B24;
  --sc-color-ivory: #FAF6EF;
  --sc-color-magenta: #D81B6A;
  --sc-color-violet: #6D28D9;
  --sc-color-gold: #FFB23F;
  --sc-color-flare: #F4512C;
  --sc-color-magenta-deep: #BE165D;
  --sc-color-magenta-pressed: #A8124F;
  --sc-color-magenta-glow: #FF5C98;
  --sc-color-rose: #E3265F;
  --sc-color-amethyst: #7C3AED;
  --sc-color-violet-lift: #9A5CFF;
  --sc-color-lilac: #B9A6FF;
  --sc-color-gold-deep: #F29A1F;
  --sc-color-ink-surface: #1C1234;
  --sc-color-ink-raised: #271B45;
  --sc-color-mist: #C9C1D6;
  --sc-color-slate: #5B5168;
  --sc-color-line: #E3DACB;
  --sc-color-ivory-sunken: #F2ECE2;
  --sc-color-white: #FFFFFF;

  --sc-gradient-mark-lit: linear-gradient(176deg, #F4512C 0%, #E3265F 30%, #D81B6A 100%);
  --sc-gradient-mark-shade-light: linear-gradient(184deg, #7C3AED 0%, #6D28D9 100%);
  --sc-gradient-mark-shade-dark: linear-gradient(184deg, #9A5CFF 0%, #7C3AED 100%);

  --sc-dark-border: rgba(250, 246, 239, 0.12);
  --sc-radius-xs: 4px;
  --sc-radius-sm: 8px;
  --sc-radius-md: 12px;
  --sc-radius-lg: 20px;
  --sc-radius-xl: 28px;
  --sc-radius-pill: 9999px;
  --sc-shadow-sm: 0 1px 2px rgba(19, 11, 36, 0.08), 0 1px 1px rgba(19, 11, 36, 0.04);
  --sc-shadow-md: 0 6px 16px -4px rgba(19, 11, 36, 0.14), 0 2px 4px rgba(19, 11, 36, 0.06);
  --sc-shadow-lg: 0 24px 48px -12px rgba(19, 11, 36, 0.28);
  --sc-shadow-cta-glow-on-dark: 0 8px 24px -8px rgba(216, 27, 106, 0.55);

  /* 4px spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px;

  --font-display: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  --header-h: 76px;
  --header-h-condensed: 64px;
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* Theme scopes: every section declares one. */
.theme-dark {
  --bg: var(--sc-color-ink);
  --surface: var(--sc-color-ink-surface);
  --surface-2: var(--sc-color-ink-raised);
  --border: var(--sc-dark-border);
  --text: var(--sc-color-ivory);
  --muted: var(--sc-color-mist);
  --subtle: var(--sc-color-lilac);
  --link: var(--sc-color-magenta-glow);
  --accent: var(--sc-color-gold);
  --eyebrow: var(--sc-color-gold);
  --violet-tone: var(--sc-color-violet-lift);
  --focus: var(--sc-color-gold);
  --field-bg: var(--sc-color-ink-raised);
  background-color: var(--bg);
  color: var(--text);
}
.theme-light,
.theme-sunken {
  --bg: var(--sc-color-ivory);
  --surface: var(--sc-color-white);
  --surface-2: var(--sc-color-ivory-sunken);
  --border: var(--sc-color-line);
  --text: var(--sc-color-ink);
  --muted: var(--sc-color-slate);
  --subtle: var(--sc-color-slate);
  --link: var(--sc-color-violet);
  --accent: var(--sc-color-violet);
  --eyebrow: var(--sc-color-violet);
  --violet-tone: var(--sc-color-violet);
  --focus: var(--sc-color-violet);
  --field-bg: var(--sc-color-white);
  background-color: var(--bg);
  color: var(--text);
}
.theme-sunken { --bg: var(--sc-color-ivory-sunken); --surface-2: var(--sc-color-ivory); }

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h-condensed) + 12px);
  background: var(--sc-color-ink);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sc-color-ivory);
  background: var(--sc-color-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.is-locked { overflow: hidden; }
html.is-locked body { padding-right: var(--scrollbar-gap, 0); }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--link, var(--sc-color-magenta-glow)); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 var(--s-4); }
ul, ol { margin: 0; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-weight: 800; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus, var(--sc-color-gold));
  outline-offset: 2px;
  border-radius: 6px;
}
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Form honeypot ("website"): invisible, unreachable by keyboard (tabindex="-1") and hidden from screen
   readers (aria-hidden), so only bots fill it. Clipped rather than moved off-screen, so it can never
   add a horizontal scrollbar to a modal. */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--sc-radius-pill);
  background: var(--sc-color-gold);
  color: var(--sc-color-ink);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-base) var(--ease);
}
.skip-link:focus { transform: none; outline: 3px solid var(--sc-color-ivory); outline-offset: 2px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 18px; height: 18px; }
.icon--fill { fill: currentColor; stroke: none; }

/* ==========================================================================
   3. Sections, headings, eyebrows
   ========================================================================== */
.section {
  position: relative;
  padding-block: clamp(64px, 9vw, 112px);
  overflow: clip;
}
.section:focus { outline: none; }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-title { font-size: clamp(30px, 4.4vw, 44px); }
.section-title .accent { color: var(--accent); }
.theme-light .section-title .accent, .theme-sunken .section-title .accent { color: var(--sc-color-violet); }
.section-lede { margin-top: var(--s-4); margin-bottom: 0; font-size: clamp(16px, 1.6vw, 18px); color: var(--muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eyebrow);
}
.live-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sc-color-flare);
  box-shadow: 0 0 0 4px rgba(244, 81, 44, 0.28);
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(244, 81, 44, 0.5);
  opacity: 0;
  animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ==========================================================================
   4. Buttons, chips, badges
   ========================================================================== */
.btn {
  --btn-h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--sc-radius-pill);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.btn .icon { width: 20px; height: 20px; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { cursor: progress; opacity: 0.75; }
.btn--sm { --btn-h: 44px; padding: 10px 18px; font-size: 14px; }
.btn--lg { --btn-h: 56px; padding: 14px 28px; font-size: 16px; }
.btn--block { width: 100%; }

.btn--primary { background: var(--sc-color-magenta); color: var(--sc-color-white); }
.btn--primary:hover { background: var(--sc-color-magenta-deep); }
.btn--primary:active { background: var(--sc-color-magenta-pressed); }
.theme-dark .btn--primary { box-shadow: var(--sc-shadow-cta-glow-on-dark); }

.btn--spotlight { background: var(--sc-color-gold); color: var(--sc-color-ink); }
.btn--spotlight:hover, .btn--spotlight:active { background: var(--sc-color-gold-deep); }

.btn--ghost { background: transparent; color: var(--sc-color-ivory); border-color: rgba(250, 246, 239, 0.32); }
.btn--ghost:hover { background: rgba(250, 246, 239, 0.08); border-color: rgba(250, 246, 239, 0.56); }
.theme-light .btn--ghost, .theme-sunken .btn--ghost { color: var(--sc-color-violet); border-color: var(--sc-color-violet); }
.theme-light .btn--ghost:hover, .theme-sunken .btn--ghost:hover { background: rgba(109, 40, 217, 0.08); }

.btn--whatsapp { background: var(--sc-color-ink); color: var(--sc-color-ivory); }
.btn--whatsapp:hover { background: var(--sc-color-ink-raised); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border, var(--sc-dark-border));
  border-radius: 50%;
  background: transparent;
  color: inherit;
  transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.icon-btn:hover { background: rgba(127, 110, 160, 0.14); }
.icon-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }

.tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1.5px solid var(--sc-dark-border);
  border-radius: var(--sc-radius-pill);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.tier-chip .icon { width: 14px; height: 14px; }
.theme-dark .tier-chip[data-tier="rookie"] { border-color: rgba(250, 246, 239, 0.24); color: var(--sc-color-ivory); }
.theme-dark .tier-chip[data-tier="rising"] { border-color: var(--sc-color-magenta-glow); color: var(--sc-color-magenta-glow); }
.theme-dark .tier-chip[data-tier="pro"] { border-color: var(--sc-color-violet-lift); color: var(--sc-color-lilac); }
.theme-dark .tier-chip[data-tier="elite"] { border-color: var(--sc-color-gold); color: var(--sc-color-gold); }
.theme-light .tier-chip[data-tier="rookie"], .theme-sunken .tier-chip[data-tier="rookie"] { border-color: var(--sc-color-line); color: var(--sc-color-ink); background: var(--sc-color-white); }
.theme-light .tier-chip[data-tier="rising"], .theme-sunken .tier-chip[data-tier="rising"] { border-color: var(--sc-color-magenta); color: var(--sc-color-magenta); background: var(--sc-color-white); }
.theme-light .tier-chip[data-tier="pro"], .theme-sunken .tier-chip[data-tier="pro"] { border-color: var(--sc-color-violet); color: var(--sc-color-violet); background: var(--sc-color-white); }
.theme-light .tier-chip[data-tier="elite"], .theme-sunken .tier-chip[data-tier="elite"] {
  border-color: var(--sc-color-line);
  border-left: 3px solid var(--sc-color-gold);
  border-radius: 4px var(--sc-radius-pill) var(--sc-radius-pill) 4px;
  color: var(--sc-color-ink);
  background: var(--sc-color-white);
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(250, 246, 239, 0.24);
  border-radius: var(--sc-radius-xs);
  background: rgba(19, 11, 36, 0.72);
  color: var(--sc-color-ivory);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.live-badge .live-dot { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(244, 81, 44, 0.28); }

/* ==========================================================================
   5. Header + mobile drawer
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(19, 11, 36, 0.78);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
}
.site-header.is-condensed { background: rgba(19, 11, 36, 0.95); border-bottom-color: var(--sc-dark-border); }
.header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
  transition: height var(--dur-slow) var(--ease);
}
.is-condensed .header-inner { height: var(--header-h-condensed); }
.brand { display: flex; flex: none; border-radius: 8px; }
.brand img { width: auto; height: 56px; transition: height var(--dur-slow) var(--ease); }
.is-condensed .brand img { height: 50px; }

.header-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding-left: 12px;
  border-left: 1px solid var(--sc-dark-border);
  color: var(--sc-color-mist);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
/* Two lines ("TikTok" / "Creator Network"); only below 360px, where two lines cannot fit beside the
   minimum-size logo and the menu button, does "Creator" / "Network" stack as well. */
.header-live__text > span { display: block; white-space: nowrap; }
@media (max-width: 359.98px) { .header-live__text > span > span { display: block; } }

.site-nav { display: none; margin-inline: auto; }
.site-nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 9px;
  border-radius: var(--sc-radius-pill);
  color: var(--sc-color-mist);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 9px; right: 9px; bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--sc-color-gold);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease);
}
.site-nav a:hover { color: var(--sc-color-ivory); }
.site-nav a.is-active { color: var(--sc-color-ivory); }
.site-nav a.is-active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.header-cta { display: none; }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(250, 246, 239, 0.24);
  border-radius: var(--sc-radius-pill);
  background: transparent;
  color: var(--sc-color-ivory);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}
.menu-toggle:hover { background: rgba(250, 246, 239, 0.08); }
.menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 299.98px) {
  .header-live { display: none; }
}
@media (min-width: 480px) {
  .menu-toggle__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@media (min-width: 768px) {
  .header-cta { display: inline-flex; }
  .header-live { font-size: 11px; }
}
@media (min-width: 1280px) {
  .site-nav { display: block; }
  .menu-toggle { display: none; }
  .header-actions { margin-left: 0; }
}
/* From 1280px the header shares the page's 1240px content width so the logo lines up with the content.
   The seven README nav links and the CTA fill that width, so the descriptor moves out of the header
   (the hero kicker directly below carries the same live dot and "Official TikTok Creator Network"). */
@media (min-width: 1280px) {
  .header-live { display: none; }
}

.drawer { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end; }
.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(19, 11, 36, 0.64);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.drawer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  height: 100%;
  padding: 0 var(--gutter) max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(154, 92, 255, 0.18), transparent 60%),
    var(--sc-color-ink-surface);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
}
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 12px; }
.drawer__head img { width: auto; height: 50px; }
.drawer__nav ul { margin: 8px 0 0; padding: 0; list-style: none; }
.drawer__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  border-bottom: 1px solid var(--sc-dark-border);
  color: var(--sc-color-ivory);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  text-decoration: none;
}
.drawer__nav a .icon { color: var(--sc-color-mist); transition: transform var(--dur-base) var(--ease); }
.drawer__nav a:hover .icon { transform: translateX(4px); }
.drawer__nav a.is-active { color: var(--sc-color-gold); }
.drawer__foot { display: grid; gap: 12px; margin-top: auto; padding-top: 28px; }
.drawer__foot .eyebrow { margin-bottom: 4px; }
.drawer__meta { margin: 8px 0 0; color: var(--sc-color-mist); font-size: 14px; }

/* ==========================================================================
   6. Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(40px, 7vw, 88px) clamp(56px, 7vw, 88px);
}
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 78% 8%, rgba(154, 92, 255, 0.26), transparent 70%),
    radial-gradient(40% 40% at 92% 62%, rgba(216, 27, 106, 0.2), transparent 72%),
    radial-gradient(45% 50% at -5% 105%, rgba(109, 40, 217, 0.22), transparent 70%);
}
.hero__facets {
  position: absolute;
  top: -8%;
  right: -12%;
  width: min(900px, 110vw);
  height: auto;
  opacity: 0.9;
}
/* minmax(0, 1fr): the single mobile column may shrink below the min-content width of long words or
   no-wrap text, so nothing is pushed past the gutter and clipped by .hero { overflow: clip }. */
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 64px); align-items: center; }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
@media (min-width: 960px) and (max-width: 1279.98px) {
  .hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 40px; }
}
.hero .eyebrow .live-dot { animation: dot-ignite 600ms var(--ease) both; }
@keyframes dot-ignite { from { transform: scale(0); } to { transform: scale(1); } }

.hero__title { font-size: clamp(38px, 6.2vw, 66px); line-height: 1.03; letter-spacing: -0.03em; }
/* Sized to the copy column so the headline sets in 4 lines ("Management Agency" on one line)
   and both CTAs stay above the fold on 1024x768 and 1280x800 screens. */
@media (min-width: 1280px) {
  .hero__title { font-size: clamp(56px, 4.7vw, 63px); }
}
@media (min-width: 960px) and (max-width: 1279.98px) {
  .hero__title { font-size: clamp(42px, 4.5vw, 54px); }
  .hero__sub { font-size: 18px; margin-top: 18px; }
  .hero__actions { margin-top: 26px; }
}

/* Hero kicker: "Official TikTok Creator Network · Makati City, PH".
   The "·" is generated before the location and sits in the 1.5em gap between the two parts. Parts that
   start a line are shifted into the clipped strip on the left, so a wrapped line never starts with "·". */
.hero__kicker { align-items: flex-start; max-width: 100%; }
.hero__kicker .live-dot { margin-top: 4.5px; }
.kicker-clip { display: block; min-width: 0; overflow: hidden; }
.kicker-parts { display: flex; flex-wrap: wrap; margin-left: -1.5em; }
.kicker-parts > span { position: relative; margin-left: 1.5em; white-space: nowrap; }
.kicker-parts > span + span::before { content: "\00B7"; content: "\00B7" / ""; position: absolute; left: -1.05em; width: 0.6em; text-align: center; }
@media (max-width: 399.98px) {
  .kicker-parts > span { white-space: normal; }
}
.hero__title-2 {
  display: block;
  margin-top: 6px;
  color: var(--sc-color-lilac);
  background: linear-gradient(95deg, var(--sc-color-magenta-glow) 0%, var(--sc-color-lilac) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) {
  .hero__title-2 { -webkit-text-fill-color: currentColor; background: none; }
}
.hero__sub { max-width: 600px; margin: 22px 0 0; color: var(--sc-color-mist); font-size: clamp(17px, 1.9vw, 20px); line-height: 1.55; }
.hero__sub strong { color: var(--sc-color-ivory); font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 519.98px) {
  .hero__actions .btn { width: 100%; }
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: var(--sc-color-mist);
  font-size: 14px;
}
.hero__trust li { display: flex; align-items: center; gap: 8px; }
.hero__trust .icon { width: 18px; height: 18px; color: var(--sc-color-gold); }

/* Metrics */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}
@media (min-width: 900px) { .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.metric {
  position: relative;
  overflow: hidden;
  padding: 20px 18px;
  border: 1px solid var(--sc-dark-border);
  border-radius: var(--sc-radius-lg);
  background: linear-gradient(180deg, rgba(39, 27, 69, 0.85), rgba(28, 18, 52, 0.6));
}
.metric::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 2px;
  background: linear-gradient(90deg, var(--sc-color-magenta), var(--sc-color-violet-lift));
  opacity: 0.8;
}
.metric__icon { position: absolute; top: 18px; right: 16px; width: 22px; height: 22px; color: var(--sc-color-gold); }
.metric__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 40px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--sc-color-ivory);
}
.metric__label { display: block; margin-top: 8px; color: var(--sc-color-mist); font-size: 14px; line-height: 1.4; padding-right: 8px; }

/* ---------- Hero stage illustration (original brand artwork) ----------
   A studio stage card: ring light, host silhouette, spotlight, gem facets and the On-Air Flare dot.
   It must never look like a phone running the TikTok LIVE app: no device frame, comment bar, gift
   button, username pill, viewer count, chat overlay or floating hearts. */
.stage { position: relative; width: min(100%, 460px); margin-inline: auto; padding: 16px 0 24px; }
.stage__beam {
  position: absolute;
  left: 50%;
  top: -180px;
  width: 560px;
  height: 820px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 178, 63, 0.2), rgba(255, 178, 63, 0) 72%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.stage__card {
  position: relative;
  width: min(320px, 76%);
  aspect-ratio: 4 / 5;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(250, 246, 239, 0.14);
  border-radius: 32px;
  background: var(--sc-color-ink-surface);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8);
  animation: stage-rise 700ms 80ms var(--ease) both;
}
@keyframes stage-rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.stage__scene { width: 100%; height: 100%; }
.stage__sparkles path { transform-box: fill-box; transform-origin: center; animation: twinkle 3.4s ease-in-out infinite; }
.stage__sparkles path:nth-child(2) { animation-delay: -1.2s; }
.stage__sparkles path:nth-child(3) { animation-delay: -2.3s; }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.72); } }
.stage__onair {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(250, 246, 239, 0.2);
  border-radius: var(--sc-radius-pill);
  background: rgba(19, 11, 36, 0.78);
  color: var(--sc-color-gold);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.stage__onair .live-dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(244, 81, 44, 0.28); }

.float-card {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid rgba(250, 246, 239, 0.16);
  border-radius: 16px;
  background: rgba(28, 18, 52, 0.92);
  box-shadow: var(--sc-shadow-lg);
  font-size: 11px;
  color: var(--sc-color-mist);
  animation: bob 6s ease-in-out infinite;
}
.float-card strong { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--sc-color-ivory); line-height: 1.1; }
.float-card strong small { font-size: 11px; font-weight: 600; color: var(--sc-color-mist); }
/* Diagonal composition: tier card over the top-right lights, earn card as a lower third on the left,
   so neither covers the host or the ring light. */
.float-card--tier { right: 0; top: 16%; }
.float-card--earn { left: 0; bottom: 6%; animation-delay: -3s; }
.float-card .tier-chip { font-size: 11px; padding: 2px 9px; }
@keyframes bob { 50% { transform: translateY(-8px); } }
@media (max-width: 519.98px) {
  .float-card { padding: 8px 10px; }
  .float-card strong { font-size: 15px; }
  .float-card--tier { top: 12%; }
  .float-card--earn { bottom: 4%; max-width: 188px; }
  .float-card__meta { white-space: nowrap; }
}
@media (max-width: 359.98px) {
  .hero__actions .btn--lg { padding-inline: 16px; font-size: 15px; }
}

/* ==========================================================================
   7. Why Join Us: benefit cards
   ========================================================================== */
.benefits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.benefit {
  position: relative;
  padding: 28px 24px 26px;
  border: 1px solid var(--border);
  border-radius: var(--sc-radius-lg);
  background: var(--surface);
  box-shadow: var(--sc-shadow-sm);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.benefit:hover { transform: translateY(-4px); box-shadow: var(--sc-shadow-md); border-color: #D6C8B2; }
.gem-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  color: var(--sc-color-white);
}
.gem-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(90deg, var(--sc-color-magenta) 0 50%, var(--sc-color-violet) 50% 100%);
}
.gem-icon .icon { position: relative; width: 22px; height: 22px; }
.benefit h3 { font-size: 20px; margin-bottom: 8px; }
.benefit p { margin: 0; color: var(--muted); }
.benefit__tag {
  display: inline-block;
  margin-top: 14px;
  padding: 2px 10px;
  border-radius: var(--sc-radius-pill);
  background: rgba(109, 40, 217, 0.08);
  color: var(--sc-color-violet);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
}

/* ==========================================================================
   8. Commission & Benefits: tiers
   ========================================================================== */
.tier-table-wrap {
  display: none;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--sc-radius-xl);
  background: rgba(28, 18, 52, 0.72);
}
.tier-table { width: 100%; min-width: 860px; border-collapse: collapse; }
.tier-table th, .tier-table td { padding: 22px 24px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tier-table thead th {
  padding-block: 16px;
  background: rgba(39, 27, 69, 0.7);
  color: var(--sc-color-mist);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tier-table tbody tr:last-child > * { border-bottom: 0; }
.tier-table tbody th { font-weight: 400; width: 19%; }
.tier-table tbody tr[data-tier="elite"] th { box-shadow: inset 3px 0 0 var(--sc-color-gold); }
.tier-table tbody tr[data-tier="pro"] th { box-shadow: inset 3px 0 0 var(--sc-color-violet-lift); }
.tier-table tbody tr[data-tier="rising"] th { box-shadow: inset 3px 0 0 var(--sc-color-magenta-glow); }
.tier-note { display: block; margin-top: 10px; color: var(--sc-color-mist); font-size: 13px; }
.num { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--sc-color-ivory); font-variant-numeric: tabular-nums; }
.num small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--sc-color-mist); }
.share-bar { display: block; width: 100%; max-width: 160px; height: 8px; margin-top: 10px; border-radius: 99px; background: rgba(250, 246, 239, 0.14); overflow: hidden; }
.share-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sc-color-magenta), var(--sc-color-violet-lift)); }
.gem-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.gem-list li { display: flex; gap: 10px; }
.gem-list li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  transform: rotate(45deg);
  background: linear-gradient(90deg, var(--sc-color-magenta) 50%, var(--sc-color-violet-lift) 50%);
}
.theme-dark .gem-list li::before { background: linear-gradient(90deg, var(--sc-color-gold) 50%, var(--sc-color-violet-lift) 50%); }

.tier-cards { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.tier-card {
  padding: 24px 20px;
  border: 1px solid var(--border);
  border-radius: var(--sc-radius-lg);
  background: linear-gradient(180deg, var(--sc-color-ink-raised), var(--sc-color-ink-surface));
}
.tier-card[data-tier="rising"] { border-color: rgba(255, 92, 152, 0.5); }
.tier-card[data-tier="pro"] { border-color: rgba(154, 92, 255, 0.55); }
.tier-card[data-tier="elite"] { border-color: rgba(255, 178, 63, 0.55); }
.tier-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 18px; }
.tier-card__head h3 { font-size: 13px; }
.tier-card__range { color: var(--sc-color-mist); font-size: 13px; }
.tier-card__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.tier-card__stats div { padding: 12px 14px; border-radius: 12px; background: rgba(250, 246, 239, 0.05); }
.tier-card__stats dt { color: var(--sc-color-mist); font-size: 12px; letter-spacing: 0.04em; }
.tier-card__stats dd { margin: 2px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.tier-card h4 { margin-bottom: 10px; color: var(--sc-color-gold); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
/* The table needs 860px; below 960px its wrapper is narrower than that, so the cards are used instead. */
@media (min-width: 640px) and (max-width: 959.98px) {
  .tier-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-card__head { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 960px) {
  .tier-table-wrap { display: block; }
  .tier-cards { display: none; }
}

.why-choose {
  display: grid;
  gap: 32px;
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--border);
  border-radius: var(--sc-radius-xl);
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(216, 27, 106, 0.2), transparent 60%),
    radial-gradient(60% 90% at 100% 100%, rgba(109, 40, 217, 0.26), transparent 60%),
    var(--sc-color-ink-surface);
}
/* Two columns only from 1280px; at 1024px the intro column was too narrow and left "Choose" on its own line. */
@media (min-width: 1280px) { .why-choose { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: start; } }
.why-choose__title { font-size: clamp(24px, 3vw, 32px); }
.why-choose__intro p { margin: 14px 0 24px; color: var(--sc-color-mist); }
.why-list { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; } }
.why-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
.why-list__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 178, 63, 0.12); color: var(--sc-color-gold); }
.why-list__icon .icon { width: 20px; height: 20px; }
.why-list h4 { margin-bottom: 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.why-list p { margin: 0; color: var(--sc-color-mist); font-size: 15px; }

/* ==========================================================================
   9. Earnings & Commission Calculator
   ========================================================================== */
.calc { display: grid; gap: 20px; }
@media (min-width: 1024px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: start; } }
.calc__inputs {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--sc-radius-xl);
  background: var(--surface);
  box-shadow: var(--sc-shadow-md);
}
.calc__group { margin: 0 0 28px; padding: 0; border: 0; min-width: 0; }
.calc__group:last-child { margin-bottom: 0; }
.calc__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.calc__label { font-family: var(--font-display); font-size: 16px; font-weight: 600; padding: 0; }
.calc__hint { display: block; color: var(--muted); font-size: 14px; }
.calc__value {
  flex: none;
  padding: 2px 12px;
  border-radius: var(--sc-radius-pill);
  background: rgba(109, 40, 217, 0.08);
  color: var(--sc-color-violet);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calc__scale { display: flex; justify-content: space-between; margin-top: -2px; color: var(--muted); font-size: 13px; }

.range {
  --fill: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--sc-color-magenta), var(--sc-color-violet)) 0 0 / var(--fill) 100% no-repeat, var(--sc-color-ivory-sunken);
  box-shadow: inset 0 0 0 1px var(--sc-color-line);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -10px;
  border: 3px solid var(--sc-color-violet);
  border-radius: 50%;
  background: var(--sc-color-white);
  box-shadow: var(--sc-shadow-md);
  transition: transform var(--dur-fast) var(--ease);
}
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range::-moz-range-track { height: 10px; border-radius: 99px; background: var(--sc-color-ivory-sunken); }
.range::-moz-range-progress { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--sc-color-magenta), var(--sc-color-violet)); }
.range::-moz-range-thumb { width: 24px; height: 24px; border: 3px solid var(--sc-color-violet); border-radius: 50%; background: var(--sc-color-white); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--sc-color-violet); outline-offset: 3px; }
.range:focus-visible::-moz-range-thumb { outline: 3px solid var(--sc-color-violet); outline-offset: 3px; }

.calc__results {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--sc-radius-xl);
  background:
    radial-gradient(80% 55% at 100% 0%, rgba(154, 92, 255, 0.3), transparent 60%),
    radial-gradient(70% 55% at 0% 100%, rgba(216, 27, 106, 0.22), transparent 60%),
    var(--sc-color-ink);
  box-shadow: var(--sc-shadow-lg);
}
/* The short slider card stays in view while the (taller than the viewport) results are read. */
@media (min-width: 1024px) and (min-height: 560px) { .calc__inputs { position: sticky; top: calc(var(--header-h-condensed) + 16px); } }
.takehome__label { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--sc-color-mist); font-size: 14px; }
.takehome__value {
  display: block;
  margin: 10px 0 4px;
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sc-color-ivory);
  font-variant-numeric: tabular-nums;
}
.takehome__per { margin: 0; color: var(--sc-color-mist); font-size: 14px; }
.takehome__value.is-salary { font-size: clamp(30px, 4.6vw, 42px); letter-spacing: -0.02em; }
.calc__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; }
/* Below 380px two stat cards leave barely 100px of text width, so labels broke over 3-4 lines. */
@media (max-width: 379.98px) {
  .calc__stats { grid-template-columns: minmax(0, 1fr); }
}
.stat { padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(250, 246, 239, 0.04); min-width: 0; }
.stat dt { color: var(--sc-color-mist); font-size: 12.5px; }
.stat dd { margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat dd small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 12.5px; font-weight: 400; color: var(--sc-color-mist); }

.split-viz { margin-top: 18px; }
.salary-note { margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; color: var(--sc-color-mist); font-size: 13.5px; line-height: 1.5; }
.split-viz__bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: rgba(250, 246, 239, 0.16); }
.split-viz__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--sc-color-magenta), var(--sc-color-violet-lift)); transition: width var(--dur-slow) var(--ease); }
.split-viz__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--sc-color-mist); }
.split-viz__legend b { color: var(--sc-color-ivory); font-weight: 600; }
.split-viz__legend li { display: flex; align-items: center; gap: 8px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--sc-color-magenta), var(--sc-color-violet-lift)); }
.swatch--agency { background: rgba(250, 246, 239, 0.3); }

.tier-out {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(39, 27, 69, 0.72);
  transition: border-color var(--dur-slow) var(--ease);
}
.tier-out[data-tier="rising"] { border-color: rgba(255, 92, 152, 0.55); }
.tier-out[data-tier="pro"] { border-color: rgba(154, 92, 255, 0.6); }
.tier-out[data-tier="elite"] { border-color: rgba(255, 178, 63, 0.65); }
.tier-out.is-levelup { animation: level-up 800ms var(--ease); }
@keyframes level-up {
  0% { transform: scale(1); }
  35% { transform: scale(1.025); box-shadow: 0 0 0 6px rgba(255, 178, 63, 0.28); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 178, 63, 0); }
}
.tier-out__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.tier-out__head p { margin: 0; color: var(--sc-color-mist); font-size: 13px; }
.tier-out__head .tier-chip { font-size: 15px; padding: 5px 14px; }
.progress { height: 10px; margin: 16px 0 8px; border-radius: 99px; background: rgba(250, 246, 239, 0.14); overflow: hidden; }
.progress__fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sc-color-magenta), var(--sc-color-gold)); transition: width var(--dur-slow) var(--ease); }
.progress-label { margin: 0; color: var(--sc-color-ivory); font-size: 14px; font-weight: 600; }
.tier-lists { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 520px) { .tier-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tier-lists h4 { margin-bottom: 8px; color: var(--sc-color-gold); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.tier-lists .gem-list { font-size: 14px; color: var(--sc-color-mist); }
.calc__cta { margin-top: 22px; }
.calc__disclaimer { display: flex; gap: 10px; margin: 18px 0 0; color: var(--sc-color-mist); font-size: 13px; line-height: 1.5; }
.calc__disclaimer .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--sc-color-gold); }

/* ==========================================================================
   10. How It Works: onboarding timeline
   ========================================================================== */
.steps { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding-bottom: 28px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: "";
  position: absolute;
  left: 27px; top: 60px; bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg, var(--sc-color-magenta), var(--sc-color-violet-lift));
  opacity: 0.7;
}
.step:last-child::before { display: none; }
.step__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--sc-color-white);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
}
.step__num::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(90deg, var(--sc-color-magenta) 0 50%, var(--sc-color-violet) 50% 100%);
}
.step__num span { position: relative; }
.step__body {
  height: 100%;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--sc-radius-lg);
  background: var(--surface);
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.step__body:hover { border-color: rgba(255, 178, 63, 0.45); transform: translateY(-3px); }
.step h3 { margin-bottom: 8px; font-size: 20px; }
.step p { margin: 0; color: var(--muted); }
.step__meta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--subtle); font-size: 13.5px; font-weight: 500; }
.step__meta .icon { width: 16px; height: 16px; color: var(--sc-color-gold); }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .step { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px 1fr; gap: 18px; padding-bottom: 0; }
  .step::before { left: 68px; right: -8px; top: 27px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--sc-color-magenta), var(--sc-color-violet-lift)); }
}
.section-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(32px, 5vw, 48px); }
.section-cta p { margin: 0; color: var(--muted); font-size: 15px; }

/* ==========================================================================
   11. Makati Studio
   ========================================================================== */
.studio-grid { display: grid; gap: 20px; }
/* Side by side only from 1280px, where the tour and the address card are close in height; the viewer
   absorbs any small difference (its scene covers the viewer, cropping the sides slightly). Below that
   the tour runs full width and the address card lays out in two columns. */
@media (min-width: 1280px) {
  .studio-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 24px; align-items: stretch; }
  .tour { display: flex; flex-direction: column; }
  .tour__viewer { flex: 1 0 auto; }
}
.tour { overflow: hidden; border-radius: var(--sc-radius-xl); box-shadow: var(--sc-shadow-lg); }
.tour__viewer { position: relative; aspect-ratio: 16 / 10; max-width: 100%; background: var(--sc-color-ink); }
.tour__scene { position: absolute; inset: 0; margin: 0; }
.tour__scene svg { width: 100%; height: 100%; }
/* Cover the viewer whatever its height (16:10 scenes; real photos would use object-fit: cover). */
@supports (width: 1cqw) {
  .tour__viewer { container-type: size; }
  .tour__scene { overflow: hidden; }
  .tour__scene svg { position: absolute; left: 50%; top: 50%; width: max(100cqw, 160cqh); height: max(100cqh, 62.5cqw); max-width: none; transform: translate(-50%, -50%); }
}
.tour__scene:not([hidden]) { animation: scene-in 420ms var(--ease); }
@keyframes scene-in { from { opacity: 0; } to { opacity: 1; } }
.tour__badge { position: absolute; top: 14px; left: 14px; }
.tour__nav { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.tour__nav .icon-btn { background: rgba(19, 11, 36, 0.78); border-color: rgba(250, 246, 239, 0.3); color: var(--sc-color-ivory); }
.tour__nav .icon-btn:hover { background: var(--sc-color-ink-raised); }
.tour__caption { margin: 0; padding: 14px 16px 10px; color: var(--sc-color-mist); font-size: 14px; }
.tour__thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0 16px 16px; list-style: none; }
@media (min-width: 640px) { .tour__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tour__thumb {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border: 1.5px solid var(--sc-dark-border);
  border-radius: 12px;
  background: var(--sc-color-ink-surface);
  color: var(--sc-color-mist);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.tour__thumb .icon { width: 18px; height: 18px; color: var(--sc-color-gold); }
.tour__thumb:hover { color: var(--sc-color-ivory); }
.tour__thumb[aria-pressed="true"] { border-color: var(--sc-color-gold); background: var(--sc-color-ink-raised); color: var(--sc-color-ivory); }

.address-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--sc-radius-xl);
  background: var(--surface);
  box-shadow: var(--sc-shadow-md);
}
.address-card__main, .address-card__tour { display: flex; flex-direction: column; min-width: 0; }
.address-card__tour { flex: 1 1 auto; }
@media (min-width: 720px) and (max-width: 1279.98px) {
  .address-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; padding: 28px 32px; }
  .address-card__main .address-card__hours { margin-bottom: 0; }
  .address-card__tour { padding-top: 64px; }
}
.address-card__pin { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 14px; background: rgba(109, 40, 217, 0.1); color: var(--sc-color-violet); }
.address-card h3 { font-size: 20px; }
.address-card address { margin: 10px 0 18px; color: var(--muted); font-style: normal; line-height: 1.6; }
.address-card__descriptor { margin: 0 0 6px; color: var(--sc-color-slate); font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.address-card__actions { display: grid; gap: 10px; margin-top: auto; }
.address-card__hours { display: flex; gap: 8px; margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.address-card__hours .icon { width: 18px; height: 18px; color: var(--sc-color-violet); margin-top: 2px; }

.features { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1023.98px) { .feature:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.feature__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--sc-color-ink); color: var(--sc-color-gold); }
.feature__icon .icon { width: 20px; height: 20px; }
.feature > div > strong { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.3; }
.feature > div > span { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.45; }

/* ==========================================================================
   12. Forms (shared)
   ========================================================================== */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 16px; }
@media (min-width: 600px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field--full { grid-column: 1 / -1; }
.field__label, .field > legend { padding: 0; color: var(--text); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.field > legend { margin-bottom: 8px; float: left; width: 100%; }
.field > legend + * { clear: both; }
.optional { color: var(--muted); font-weight: 400; }
.field__hint { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid #8A7F98;
  border-radius: 12px;
  background: var(--field-bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.3;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.theme-dark .input { border-color: rgba(250, 246, 239, 0.45); color-scheme: dark; }
.input:hover { border-color: var(--violet-tone); }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--violet-tone); border-radius: 12px; }
.input::placeholder { color: var(--muted); opacity: 0.85; }
textarea.input { min-height: 96px; resize: vertical; }
select.input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5168' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.theme-dark select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9C1D6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.theme-dark select.input option { background: var(--sc-color-ink-raised); color: var(--sc-color-ivory); }

.field__error { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: #A8124F; font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.field__error:empty { display: none; }
.field__error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: #A8124F;
  color: var(--sc-color-white);
  font-size: 12px;
  font-weight: 700;
}
.theme-dark .field__error { color: #FF8DB6; }
.theme-dark .field__error::before { background: #FF5C98; color: var(--sc-color-ink); }
.field.has-error .input { border-color: #A8124F; box-shadow: 0 0 0 1px #A8124F; }
.theme-dark .field.has-error .input { border-color: #FF5C98; box-shadow: 0 0 0 1px #FF5C98; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.choice { position: relative; display: flex; }
.choice input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 16px 10px 12px;
  border: 1.5px solid #8A7F98;
  border-radius: 12px;
  background: var(--field-bg);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.theme-dark .choice label { border-color: rgba(250, 246, 239, 0.45); }
.choice label::before { content: ""; flex: none; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 50%; opacity: 0.7; }
.choice:hover label { border-color: var(--violet-tone); }
.choice input:checked + label { border-color: var(--violet-tone); background: rgba(109, 40, 217, 0.08); box-shadow: inset 0 0 0 1px var(--violet-tone); }
.theme-dark .choice input:checked + label { background: rgba(154, 92, 255, 0.16); }
.choice input:checked + label::before { opacity: 1; border-color: var(--violet-tone); background: radial-gradient(circle, var(--violet-tone) 0 4px, transparent 4.5px); }
.choice input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.field.has-error .choice label { border-color: #A8124F; }
.theme-dark .field.has-error .choice label { border-color: #FF5C98; }

.check { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--field-bg); }
.check input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  border: 2px solid #8A7F98;
  border-radius: 6px;
  background: var(--field-bg);
  cursor: pointer;
}
.check input:checked {
  border-color: var(--violet-tone);
  background: var(--violet-tone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.check input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.check label { font-size: 14.5px; line-height: 1.5; cursor: pointer; }
.check label strong { font-weight: 600; }
.field.has-error .check { border-color: #A8124F; }
.theme-dark .field.has-error .check { border-color: #FF5C98; }

.error-summary { margin-bottom: 18px; padding: 14px 16px; border: 1.5px solid #A8124F; border-radius: 14px; background: rgba(216, 27, 106, 0.06); color: var(--text); }
.theme-dark .error-summary { border-color: #FF5C98; background: rgba(255, 92, 152, 0.1); }
.error-summary__title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 600; font-size: 15px; }
.error-summary__title .icon { width: 20px; height: 20px; color: #A8124F; }
.theme-dark .error-summary__title .icon { color: #FF5C98; }
.error-summary ul { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.5; }
/* Each link is at least 27px tall with a 4px gap between links (WCAG 2.2 target size 2.5.8). */
.error-summary li + li { margin-top: 4px; }
.error-summary a { display: inline-block; padding-block: 3px; color: inherit; }

/* In modals the summary sticks to the top of the scrolling body while errors exist. Its backgrounds are
   opaque (tint over the panel colour) so fields scrolling underneath never show through. */
.modal__panel { --panel-bg: var(--bg); }
.theme-dark.modal__panel { --panel-bg: var(--sc-color-ink-surface); }
.error-summary-wrap { position: sticky; top: 0; z-index: 2; }
.error-summary-wrap.is-active { margin-top: -10px; padding-top: 10px; background: var(--panel-bg); }
.modal__panel .error-summary {
  background: linear-gradient(rgba(216, 27, 106, 0.06), rgba(216, 27, 106, 0.06)), var(--panel-bg);
  box-shadow: 0 12px 18px -16px rgba(19, 11, 36, 0.5);
}
.modal__panel.theme-dark .error-summary { background: linear-gradient(rgba(255, 92, 152, 0.1), rgba(255, 92, 152, 0.1)), var(--panel-bg); box-shadow: 0 12px 18px -14px rgba(0, 0, 0, 0.7); }
/* The summary must never crowd out the field it is talking about: it is capped so that the first
   invalid control still fits in the scrolling body (a long list scrolls inside the summary). */
.modal__panel .error-summary ul { max-height: 22vh; overflow-y: auto; }

.done__icon { margin-bottom: 18px; }
.done__title { font-size: clamp(22px, 3vw, 28px); }
.done__lede { margin: 8px 0 0; color: var(--muted); }
.done__note { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(109, 40, 217, 0.08); font-size: 14px; }
.theme-dark .done__note { background: rgba(154, 92, 255, 0.14); }
.done__note[data-state="error"] { border: 1.5px solid #A8124F; background: rgba(216, 27, 106, 0.08); }
.theme-dark .done__note[data-state="error"] { border-color: #FF5C98; background: rgba(255, 92, 152, 0.1); }
.done__edit { margin: 6px 0 0; }
.done__edit .link-inline { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.summary__title { margin: 18px 0 0; color: var(--muted); font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.summary__title + .summary { margin-top: 10px; }
.summary { display: grid; margin: 18px 0 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.summary div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.summary div:nth-child(even) { background: var(--surface-2); }
.summary div:last-child { border-bottom: 0; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.done__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.done__actions .btn { flex: 1 1 220px; }

/* ==========================================================================
   13. Host Stories carousel
   ========================================================================== */
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 16px;
  margin: 0;
  padding: 4px 2px 12px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--sc-radius-xl);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: 4px; }
@media (min-width: 640px) { .carousel__track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (min-width: 1024px) { .carousel__track { grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; } }
.carousel__slide { min-width: 0; scroll-snap-align: start; }
.story {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  margin: 0;
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: var(--sc-radius-xl);
  background: linear-gradient(180deg, var(--sc-color-ink-raised), var(--sc-color-ink-surface));
}
.story__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.story__quote { width: 30px; height: 30px; color: var(--sc-color-magenta-glow); }
.story__niche { padding: 3px 10px; border: 1px solid rgba(250, 246, 239, 0.24); border-radius: var(--sc-radius-pill); color: var(--sc-color-mist); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.story blockquote { margin: 0; color: var(--sc-color-ivory); font-size: 16.5px; line-height: 1.6; }
.story blockquote p { margin: 0; }
.story__result { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(154, 92, 255, 0.12); color: var(--sc-color-lilac); font-size: 13.5px; }
.story__result .icon { width: 18px; height: 18px; color: var(--sc-color-gold); }
.story figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.avatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--sc-color-magenta), var(--sc-color-magenta-deep)); color: var(--sc-color-white); font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.avatar[data-hue="violet"] { background: linear-gradient(135deg, var(--sc-color-amethyst), var(--sc-color-violet)); }
.avatar[data-hue="gold"] { background: var(--sc-color-ink); box-shadow: inset 0 0 0 2px var(--sc-color-gold); color: var(--sc-color-gold); }
.avatar[data-hue="lilac"] { background: var(--sc-color-ink); box-shadow: inset 0 0 0 2px var(--sc-color-lilac); color: var(--sc-color-lilac); }
.story__name { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.3; }
.story__meta { display: block; color: var(--sc-color-mist); font-size: 13px; }
.carousel__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 18px; }
.carousel__status { margin: 0; color: var(--sc-color-mist); font-size: 14px; }
.carousel__buttons { display: flex; gap: 10px; }
.carousel__buttons .icon-btn { width: 48px; height: 48px; border-color: rgba(250, 246, 239, 0.3); }
.sample-note { display: flex; gap: 8px; margin: 18px 0 0; color: var(--sc-color-mist); font-size: 13px; }
.sample-note .icon { width: 18px; height: 18px; color: var(--sc-color-gold); }

/* ==========================================================================
   14. FAQ
   ========================================================================== */
.faq-wrap { display: grid; gap: 32px; }
@media (min-width: 1024px) { .faq-wrap { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 48px; align-items: start; } }
.faq-aside { display: grid; gap: 12px; margin-top: 24px; padding: 22px; border: 1px solid var(--border); border-radius: var(--sc-radius-lg); background: var(--surface); }
.faq-aside h3 { font-size: 18px; }
.faq-aside p { margin: 0; color: var(--muted); font-size: 15px; }
.faq-list { display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.faq-item:has([aria-expanded="true"]) { border-color: #CDBDA6; box-shadow: var(--sc-shadow-md); }
.faq-item h3 { margin: 0; font-size: inherit; letter-spacing: normal; }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 16px 18px 16px 20px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: left;
}
.faq-q__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(109, 40, 217, 0.08); color: var(--sc-color-violet); transition: transform var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease); }
.faq-q__icon .icon { width: 18px; height: 18px; }
.faq-q:hover .faq-q__icon { background: rgba(109, 40, 217, 0.16); }
.faq-q[aria-expanded="true"] .faq-q__icon { transform: rotate(180deg); }
.faq-a { padding: 0 20px 20px; color: var(--muted); }
.faq-a p { margin: 0 0 10px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a:not([hidden]) { animation: fade-down 260ms var(--ease); }
@keyframes fade-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pill-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.pill-list li { padding: 2px 10px; border: 1px solid var(--border); border-radius: var(--sc-radius-pill); background: var(--surface-2); color: var(--text); font-size: 13.5px; }

/* ==========================================================================
   15. Footer + closing CTA band
   ========================================================================== */
.site-footer { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 88px) 28px; border-top: 1px solid var(--border); }
.cta-band {
  position: relative;
  display: grid;
  gap: 24px;
  align-items: center;
  padding: clamp(32px, 6vw, 60px) clamp(20px, 5vw, 56px);
  overflow: hidden;
  border: 1px solid rgba(250, 246, 239, 0.14);
  border-radius: var(--sc-radius-xl);
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(216, 27, 106, 0.42), transparent 62%),
    radial-gradient(70% 120% at 100% 100%, rgba(109, 40, 217, 0.5), transparent 62%),
    var(--sc-color-ink-raised);
}
@media (min-width: 960px) { .cta-band { grid-template-columns: minmax(0, 1.25fr) auto; } }
.cta-band h2 { font-size: clamp(28px, 4.2vw, 46px); }
.cta-band p:not(.eyebrow) { margin: 12px 0 0; color: var(--sc-color-mist); font-size: 17px; max-width: 560px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 519.98px) { .cta-band__actions .btn { width: 100%; } }

.footer-grid { display: grid; gap: 36px; margin-top: clamp(48px, 6vw, 72px); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Contact holds the longest lines (address, email), so it gets the widest column after the brand. */
@media (min-width: 1100px) { .footer-grid { column-gap: 40px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.72fr) minmax(0, 0.82fr) minmax(0, 1.25fr); } }
.footer-brand img { width: 240px; height: auto; margin-left: -18px; }
.footer-brand p { max-width: 360px; margin: 8px 0 0; color: var(--sc-color-mist); font-size: 15px; }
.footer-descriptor { margin-top: 14px !important; color: var(--sc-color-mist); font-family: var(--font-display); font-size: 12px !important; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.footer-col h2 { margin-bottom: 12px; color: var(--sc-color-gold); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.footer-col address { color: var(--sc-color-mist); font-style: normal; font-size: 15px; line-height: 1.6; }
.footer-links { display: grid; margin: 0; padding: 0; list-style: none; }
/* The icon and the label are the only two flex items: the label keeps its words together and wraps as
   ordinary text under itself, instead of each word becoming an item of its own. */
.footer-links a, .footer-links .link-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 11px 0;
  border: 0;
  background: none;
  color: var(--sc-color-ivory);
  font-size: 15px;
  text-align: left;
  text-decoration: none;
}
.footer-links a:hover, .footer-links .link-btn:hover { color: var(--sc-color-gold); }
.footer-links .icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--sc-color-lilac); }
/* min-width: 0 lets a long address or email wrap inside the column instead of stretching it. */
.footer-links__text { min-width: 0; }
.footer-links small { color: var(--sc-color-mist); font-size: 13px; }
.footer-bottom { display: grid; gap: 12px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--sc-color-mist); font-size: 13.5px; }
@media (min-width: 900px) { .footer-bottom { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 32px; } }
.footer-bottom p { margin: 0; }
.legal { max-width: 780px; }

/* ==========================================================================
   16. Sticky mobile CTA bar
   ========================================================================== */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--sc-dark-border);
  background: rgba(19, 11, 36, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform var(--dur-slow) var(--ease), visibility 0s;
}
.mobile-cta__text { flex: 1; min-width: 0; margin: 0; color: var(--sc-color-mist); font-size: 12.5px; line-height: 1.35; }
.mobile-cta__text strong { display: flex; align-items: center; gap: 8px; color: var(--sc-color-ivory); font-family: var(--font-display); font-size: 13.5px; font-weight: 600; }
.mobile-cta .btn { flex: none; }
.mobile-cta.is-hidden, html.is-locked .mobile-cta {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
}
@media (min-width: 768px) { .mobile-cta { display: none; } }
@media (max-width: 359.98px) { .mobile-cta__text { font-size: 12px; } .mobile-cta .btn { padding-inline: 14px; } }

/* ==========================================================================
   17. Modals (dialogs) + application wizard
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(19, 11, 36, 0.74); opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(660px, 100%);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  border-radius: var(--sc-radius-xl);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-slow) var(--ease);
}
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
.modal__header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--sc-color-magenta) 50%, var(--sc-color-violet) 50%); }
.modal__header .eyebrow { margin-bottom: 6px; font-size: 12px; }
.modal__title { font-size: clamp(21px, 2.8vw, 26px); }
.modal__subtitle { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.modal__close { flex: none; margin: -4px -8px 0 0; }
.modal__form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.modal__body { flex: 1; min-height: 0; padding: 20px 24px 24px; overflow-y: auto; overscroll-behavior: contain; }
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.modal__footer .spacer { flex: 1; }
.modal__footer .btn { min-width: 120px; }
.theme-dark.modal__panel { background: var(--sc-color-ink-surface); }
.theme-dark .modal__footer { background: var(--sc-color-ink); }
/* Full-screen modals on phones AND on short viewports (landscape phones), where a centred card would
   leave the form body only a sliver of height. */
@media (max-width: 639.98px), (max-height: 500px) {
  .modal { padding: 0; place-items: stretch; }
  .modal__panel { width: 100%; height: 100%; max-height: none; border-radius: 0; transform: translateY(32px); }
  .modal__header { padding: 16px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
  .modal__body { padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); }
  .modal__footer { padding: 12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .wizard-progress { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
}
@media (max-width: 639.98px) {
  /* The main action gets two thirds of the row so "Submit application" and "Request tour" stay on one line. */
  .modal__footer .btn { flex: 1 1 0; min-width: 0; padding-inline: 14px; }
  .modal__footer .btn--primary, .modal__footer .btn--spotlight { flex-grow: 2; }
  .modal__footer .spacer { display: none; }
}
/* Narrow phones: "Submit application" and "Request tour" must still set on one line. */
@media (max-width: 399.98px) {
  .modal__footer .btn { gap: 6px; padding-inline: 12px; font-size: 14px; }
  .modal__footer .btn .icon { width: 18px; height: 18px; }
}
/* At 320px the label alone fills the button, so the decorative arrow/check icons step aside
   rather than let the main action wrap onto two lines. */
@media (max-width: 359.98px) {
  .modal__footer .btn { padding-inline: 10px; font-size: 13.5px; }
  .modal__footer .btn .icon { display: none; }
}
/* Short viewports: compact chrome so the form body keeps most of the height. The subtitle stays in the
   DOM (the dialog's aria-describedby still reads it). */
@media (max-height: 500px) {
  .modal__header { align-items: center; padding-top: 6px; padding-bottom: 6px; }
  .modal__header .eyebrow, .modal__subtitle { display: none; }
  .modal__title { font-size: 19px; }
  .modal__close { margin: 0 -6px 0 0; }
  .modal__body { padding-top: 12px; }
  .modal__footer { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .modal__footer .btn { --btn-h: 44px; padding-block: 8px; }
  /* Landscape phones: the body is only ~240px tall, so the sticky summary is trimmed to about two
     rows (the rest scrolls inside it) and the draft note is compact. Together that leaves room for
     the first invalid field to be scrolled fully into view underneath. */
  .error-summary { margin-bottom: 12px; padding: 10px 12px; }
  .error-summary__title { margin-bottom: 2px; font-size: 14px; }
  .error-summary__title .icon { width: 18px; height: 18px; }
  .modal__panel .error-summary ul { max-height: 3.4em; }
  .draft-note { margin-bottom: 10px; padding: 6px 10px; font-size: 12px; }
  .done__icon { display: none; }
}

/* Progress sits above the scrolling body with a divider, so content scrolling up never touches it. */
.wizard-progress { padding: 14px 24px 12px; border-bottom: 1px solid var(--border); }
@media (max-width: 639.98px) { .wizard-progress { padding-top: 12px; padding-bottom: 10px; } }
.wizard-progress ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.wizard-progress li { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.wizard-progress li::before { content: ""; display: block; height: 6px; margin-bottom: 6px; border-radius: 99px; background: var(--border); transition: background-color var(--dur-base) var(--ease); }
.wizard-progress li.is-current, .wizard-progress li.is-done { color: var(--text); }
.wizard-progress li.is-current::before, .wizard-progress li.is-done::before { background: linear-gradient(90deg, var(--sc-color-magenta), var(--sc-color-violet)); }
/* The check is a background at the end of the (inline) label, so it stays on the line of the last word. */
.wizard-progress li.is-done span { padding-right: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D28D9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E") right center / 14px no-repeat; }
.wizard-count { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
@media (max-height: 500px) {
  /* Short viewports: bars and "Step N of 3" on one row; step names stay available to screen readers. */
  .wizard-progress { display: flex; align-items: center; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
  .wizard-progress ol { flex: 1; gap: 6px; }
  .wizard-progress li::before { margin-bottom: 0; }
  .wizard-progress li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wizard-progress .wizard-count { flex: none; margin: 0; }
}
.step-heading { margin-bottom: 4px; font-size: 19px; }
.step-intro { margin: 0 0 18px; color: var(--muted); font-size: 14.5px; }
.draft-note { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 13px; }
.draft-note .icon { width: 16px; height: 16px; color: var(--sc-color-violet); }

/* ==========================================================================
   18. Reduced motion, forced colours, print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .live-dot::after { display: none; }
  .stage__card, .float-card, .stage__sparkles path { animation: none !important; }
  .benefit:hover, .step__body:hover { transform: none; }
}
@media (forced-colors: active) {
  .btn, .tier-chip, .choice label, .check, .input, .faq-item { border: 1px solid CanvasText; }
  .gem-icon::before, .step__num::before { background: Highlight; }
}
@media print {
  .site-header, .mobile-cta, .modal, .drawer, .hero__visual { display: none !important; }
  .theme-dark { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   19. Nested theme fixes + small utilities
   A dark card inside a light section keeps its dark component styles.
   ========================================================================== */
.theme-light .theme-dark .tier-chip, .theme-sunken .theme-dark .tier-chip { background: transparent; border-width: 1.5px; border-radius: var(--sc-radius-pill); }
.theme-light .theme-dark .tier-chip[data-tier="rookie"], .theme-sunken .theme-dark .tier-chip[data-tier="rookie"] { border-color: rgba(250, 246, 239, 0.24); color: var(--sc-color-ivory); }
.theme-light .theme-dark .tier-chip[data-tier="rising"], .theme-sunken .theme-dark .tier-chip[data-tier="rising"] { border-color: var(--sc-color-magenta-glow); color: var(--sc-color-magenta-glow); }
.theme-light .theme-dark .tier-chip[data-tier="pro"], .theme-sunken .theme-dark .tier-chip[data-tier="pro"] { border-color: var(--sc-color-violet-lift); color: var(--sc-color-lilac); }
.theme-light .theme-dark .tier-chip[data-tier="elite"], .theme-sunken .theme-dark .tier-chip[data-tier="elite"] { border-color: var(--sc-color-gold); color: var(--sc-color-gold); }
.theme-light .theme-dark .btn--ghost, .theme-sunken .theme-dark .btn--ghost { color: var(--sc-color-ivory); border-color: rgba(250, 246, 239, 0.32); }
.theme-light .theme-dark .btn--ghost:hover, .theme-sunken .theme-dark .btn--ghost:hover { background: rgba(250, 246, 239, 0.08); }

.link-inline { padding: 0; border: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* break-word, not anywhere: only a word that cannot fit on its own is broken (a long email address),
   so "WhatsApp" and ordinary words stay whole. */
.footer-links a, .footer-links .link-btn { overflow-wrap: break-word; }

/* Header fit */
.header-actions { flex: none; }
.header-cta { white-space: nowrap; }
@media (max-width: 479.98px) {
  /* 48px tall keeps the mark at its 32px screen minimum. */
  .brand img, .is-condensed .brand img { height: 48px; }
  .header-inner { gap: 8px; }
  .header-live { padding-left: 8px; gap: 7px; font-size: 9.5px; letter-spacing: 0.1em; }
  .menu-toggle { padding: 0; }
}

/* Hero on small screens */
.nowrap { white-space: nowrap; }
.btn__stack { display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.2; }
.btn__stack small { font-size: 12.5px; font-weight: 600; }
@media (min-width: 520px) {
  .btn__stack { display: inline; }
  .btn__stack small { font-size: inherit; opacity: 1; }
}

/* v5: metrics units, hero example card, tier leads, rewards note, why-list odd item */
.metric__unit { font-size: 0.6em; font-weight: 700; letter-spacing: -0.01em; }
.metric__value { padding-right: 30px; }
@media (min-width: 900px) { .metric__value { font-size: clamp(28px, 3vw, 40px); } }
@media (max-width: 599.98px) {
  .metric { padding: 16px 16px 18px; }
  .metric__icon { position: static; display: block; margin-bottom: 10px; }
  .metric__value { padding-right: 0; font-size: 28px; }
}
.float-card__meta { font-size: 10.5px; color: var(--sc-color-lilac); }
.float-card__fine { margin-top: 2px; padding-top: 5px; border-top: 1px solid rgba(250, 246, 239, 0.12); font-size: 11px; color: var(--sc-color-mist); }
.tier-lead { margin: 0 0 8px; color: var(--sc-color-mist); font-size: 13.5px; font-style: italic; }
.num--text { font-size: 18px; }
.tier-card__stats dd.dd--text { font-size: 16px; line-height: 1.25; }
.tier-card__stats dd small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--sc-color-mist); }
.rewards-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 178, 63, 0.35);
  border-radius: var(--sc-radius-lg);
  background: linear-gradient(90deg, rgba(255, 178, 63, 0.08), rgba(28, 18, 52, 0.4));
}
.rewards-note__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 178, 63, 0.14); color: var(--sc-color-gold); }
.rewards-note__icon .icon { width: 20px; height: 20px; }
.rewards-note__title { margin: 0 0 10px; font-size: 17px; }
.rewards-note .gem-list { color: var(--sc-color-mist); }
@media (min-width: 900px) { .rewards-note { margin-top: 20px; } }
@media (min-width: 640px) { .why-list li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.tier-lists .tier-lead { font-size: 13px; }

/* Address card tour list */
.address-card__subhead { margin: 0 0 10px; font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.address-card .gem-list { margin: 0 0 22px; font-size: 14.5px; }

/* ==========================================================================
   20. Utilities that replace style="" attributes
   The site sends a strict Content-Security-Policy (see .htaccess) with no 'unsafe-inline',
   which blocks style attributes in the markup. Static values live here; JavaScript still
   sets .style.width on the two meters below (CSSOM writes are not inline styles).
   ========================================================================== */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.section-head--flush { margin-bottom: 0; }
.footer-links--spaced { margin-top: 8px; }
.share-bar[data-fill="60"] span { width: 60%; }
.share-bar[data-fill="70"] span { width: 70%; }
.share-bar[data-fill="80"] span { width: 80%; }
/* Starting values; the calculator updates both as the sliders move. */
#out-split-bar { width: 60%; }
#out-progress-fill { width: 10%; }

/* ==========================================================================
   21. Draft controls, handoff destination, privacy notice page
   ========================================================================== */
.draft-note { flex-wrap: wrap; }
.draft-note__text { flex: 1 1 200px; }
.draft-note .link-inline { flex: none; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.done__dest { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.done__dest .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--violet-tone); }
.done__dest b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.done__dest b.nowrap { overflow-wrap: normal; }
.consent-link { font-weight: 600; }

.legal-page { padding-block: clamp(32px, 5vw, 56px) clamp(56px, 8vw, 96px); }
.legal-head { max-width: 760px; }
.legal-updated { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.legal-toc { margin: 28px 0 0; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--sc-radius-lg); background: var(--surface); }
.legal-toc h2 { font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.legal-toc ol { margin: 10px 0 0; padding-left: 20px; color: var(--muted); font-size: 15px; }
.legal-toc li { margin-top: 4px; }
.prose { max-width: 760px; margin-top: clamp(32px, 5vw, 48px); }
.prose h2 { margin-top: 40px; font-size: clamp(21px, 2.6vw, 26px); }
.prose h3 { margin-top: 24px; font-size: 17px; }
.prose p, .prose li { color: var(--muted); font-size: 16px; line-height: 1.65; }
.prose ul, .prose ol { margin: 12px 0 16px; padding-left: 22px; }
.prose li { margin-top: 6px; }
.prose li > strong, .prose p > strong { color: var(--text); }
.prose a { font-weight: 500; }
.prose address { margin: 8px 0 16px; color: var(--muted); font-style: normal; line-height: 1.6; }
.prose table { width: 100%; margin: 14px 0 20px; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; color: var(--muted); }
.prose th { color: var(--text); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.prose .table-scroll { overflow-x: auto; }
.callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin: 24px 0; padding: 18px 20px; border: 1px solid rgba(109, 40, 217, 0.35); border-radius: var(--sc-radius-lg); background: rgba(109, 40, 217, 0.06); }
.callout__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(109, 40, 217, 0.12); color: var(--sc-color-violet); }
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }
.callout--todo { border-color: rgba(255, 178, 63, 0.5); background: rgba(255, 178, 63, 0.08); }
.callout--todo .callout__icon { background: rgba(255, 178, 63, 0.18); color: #8A5A00; }
.legal-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; }
.legal-back .icon { width: 18px; height: 18px; }

/* ==========================================================================
   22. Newsroom: the news index and the article pages
   Written against the theme aliases (--surface, --border, --text, --muted,
   --accent, --link, --focus), so every band behaves in .theme-dark and
   .theme-light without a second set of rules. Static pages, no scripts.
   One measure throughout: 760px, the same spine as .prose and .legal-head.
   ========================================================================== */

/* The dark masthead both news pages open with. */
.news-masthead { padding-block: clamp(36px, 5vw, 64px) clamp(32px, 4.5vw, 56px); }
.news-masthead__inner { max-width: 760px; }
.news-masthead .section-title { overflow-wrap: break-word; }
.news-masthead .section-lede { max-width: 62ch; }

/* The article's opening paragraph, set larger than the body copy. */
.news-standfirst {
  max-width: 58ch; margin: var(--s-5) 0 0; color: var(--muted);
  font-size: clamp(16.5px, 15.4px + 0.45vw, 19px); line-height: 1.55;
}

/* Date, category and reading time. */
.news-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin: var(--s-5) 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px;
}
.news-meta li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.news-meta time { font-variant-numeric: tabular-nums; }

.news-tag {
  display: inline-flex; align-items: center; padding: 4px 12px;
  border: 1px solid var(--border); border-radius: var(--sc-radius-pill);
  background: var(--surface-2); color: var(--text);
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.theme-dark .news-tag { background: rgba(250, 246, 239, 0.06); color: var(--sc-color-lilac); }

/* A plain link in body copy or a footer line. Used by the generated pages. */
.text-link { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { text-decoration-thickness: 2px; }

/* Breadcrumbs, matching the BreadcrumbList the page also declares. */
.news-crumbs { margin: 0 0 var(--s-4); color: var(--muted); font-size: 13.5px; }
.news-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.news-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.6; }
.news-crumbs a { color: inherit; text-decoration: none; }
.news-crumbs a:hover { text-decoration: underline; }
.news-crumbs [aria-current] { color: var(--text); }

/* The light band that holds the list or the article. */
.news-page { padding-block: clamp(36px, 5vw, 64px) clamp(56px, 8vw, 96px); }
.news-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 24px; margin: 0 0 clamp(20px, 3vw, 28px);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--border);
}
.news-bar__title { font-size: clamp(19px, 2.2vw, 24px); }
.news-bar__note { margin: 0; color: var(--muted); font-size: 14px; }

/* The lead story. */
.news-lead {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  margin: 0 0 clamp(28px, 4vw, 48px);
  border: 1px solid var(--border); border-radius: var(--sc-radius-xl);
  background: var(--surface); box-shadow: var(--sc-shadow-sm); overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.news-lead:hover { box-shadow: var(--sc-shadow-md); }
.news-lead:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (min-width: 900px) {
  .news-lead { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  /* A post with no picture keeps one column rather than leaving a hole. */
  .news-lead--text { grid-template-columns: minmax(0, 1fr); }
  .news-lead--text .news-lead__body { max-width: 760px; }
}
.news-lead__media { position: relative; height: 100%; margin: 0; background: var(--surface-2); }
.news-lead__media img { display: block; width: 100%; aspect-ratio: 40 / 21; object-fit: cover; }
@media (min-width: 900px) { .news-lead__media img { height: 100%; aspect-ratio: auto; } }
.news-lead__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(22px, 3vw, 40px); }
.news-lead__body > * { margin: 0; }
.news-lead__title { font-size: clamp(23px, 3.2vw, 34px); font-weight: 800; line-height: 1.16; overflow-wrap: break-word; }
.news-lead__excerpt { color: var(--muted); font-size: clamp(15.5px, 1.5vw, 17.5px); line-height: 1.6; }
.news-lead__foot { margin-top: auto; }

/* The rest of the archive. auto-fill, so two posts do not leave empty columns. */
.news-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (min-width: 1024px) { .news-list { gap: 20px; } }
.news-item {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--sc-radius-lg);
  background: var(--surface); box-shadow: var(--sc-shadow-sm); overflow: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.news-item:hover { transform: translateY(-4px); box-shadow: var(--sc-shadow-md); }
.news-item:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.news-item__media { margin: 0; background: var(--surface-2); }
.news-item__media img { display: block; width: 100%; aspect-ratio: 40 / 21; object-fit: cover; }
.news-item__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 20px 22px; }
.news-item__body > * { margin: 0; }
.news-item__title { font-size: clamp(18px, 2vw, 21px); line-height: 1.25; overflow-wrap: break-word; }
.news-item__excerpt { color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.news-item__foot { margin-top: auto; padding-top: var(--s-1); }
.news-item .news-meta { margin: 0; font-size: 13.5px; gap: 8px 14px; }

/* One link per card: the headline's hit area covers the card, so a screen
   reader hears the headline once and "Read the story" stays decorative. */
.news-lead__title a, .news-item__title a { color: inherit; text-decoration: none; }
.news-lead__title a::after, .news-item__title a::after { content: ""; position: absolute; inset: 0; }
.news-lead__title a:hover, .news-item__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.news-more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--link); font-family: var(--font-display); font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.news-more::after { content: "\2192"; transition: transform var(--dur-base) var(--ease); }
.news-lead:hover .news-more::after, .news-item:hover .news-more::after { transform: translateX(4px); }

.news-empty {
  margin: 0; padding: clamp(28px, 4vw, 44px);
  border: 1px dashed var(--border); border-radius: var(--sc-radius-lg);
  background: var(--surface); color: var(--muted); text-align: center;
}

/* The article's picture, on the same 760px spine as the text. */
.news-figure { max-width: 760px; margin: 0; }
.news-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--sc-radius-xl); background: var(--surface-2); }
@media (max-width: 519.98px) { .news-figure img { border-radius: var(--sc-radius-lg); } }

/* Body copy. The page sets class="prose news-body", so everything .prose
   already handles (nested lists, addresses) still applies underneath. */
.news-body { max-width: 760px; margin-top: clamp(28px, 4vw, 44px); }
.news-body > p, .news-body li { color: var(--text); font-size: clamp(16.5px, 15.8px + 0.3vw, 18px); line-height: 1.7; }
.news-body > p { margin: 0 0 var(--s-5); }
.news-body > *:last-child { margin-bottom: 0; }
.news-body > h2 { margin-top: clamp(38px, 5vw, 56px); margin-bottom: var(--s-4); font-size: clamp(22px, 2.8vw, 28px); }
.news-body > h3 { margin-top: clamp(28px, 3.5vw, 36px); margin-bottom: var(--s-3); font-size: clamp(17.5px, 1.9vw, 20px); }
.news-body strong { color: var(--text); font-weight: 600; }
.news-body a { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: break-word; }
.news-body code {
  padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--sc-radius-xs);
  background: var(--surface-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em;
}
.news-code {
  margin: 0 0 var(--s-6); padding: var(--s-4); overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--sc-radius-md); background: var(--surface-2);
  font-size: 14px; line-height: 1.6;
}

/* Brand diamond bullets, matching .gem-list. */
.news-body > ul { display: grid; gap: var(--s-3); margin: 0 0 var(--s-6); padding: 0; list-style: none; }
.news-body > ul > li { position: relative; padding-left: 28px; }
.news-body > ul > li::before {
  content: ""; position: absolute; left: 4px; top: 0.62em; width: 8px; height: 8px;
  transform: rotate(45deg); background: linear-gradient(90deg, var(--sc-color-magenta) 50%, var(--sc-color-violet) 50%);
}
.news-body > ol { display: grid; gap: var(--s-3); margin: 0 0 var(--s-6); padding: 0; list-style: none; counter-reset: news-step; }
.news-body > ol > li { position: relative; padding-left: 40px; counter-increment: news-step; }
.news-body > ol > li::before {
  content: counter(news-step); position: absolute; left: 0; top: 0.15em;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(109, 40, 217, 0.1); color: var(--sc-color-violet);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; line-height: 1;
}
.news-body li > ul, .news-body li > ol { margin: var(--s-2) 0 0; padding-left: 0; }

/* Pull quote. No negative margins: .section uses overflow: clip. */
.news-quote { margin: clamp(28px, 4vw, 40px) 0; padding: 2px 0 2px clamp(16px, 3vw, 26px); border-left: 3px solid var(--accent); }
.news-quote p {
  margin: 0; color: var(--text); font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 23px); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;
}

/* A markdown table becomes a real table in a scroller, never a line of pipes. */
.news-table-scroll {
  margin: 0 0 var(--s-6); overflow-x: auto; border: 1px solid var(--border);
  border-radius: var(--sc-radius-md); background: var(--surface); overscroll-behavior-x: contain;
}
.news-table { width: 100%; min-width: 30rem; margin: 0; border-collapse: collapse; font-size: 15px; }
.news-table th, .news-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.news-table thead th { background: var(--surface-2); color: var(--text); white-space: nowrap; font-family: var(--font-display); font-size: 13px; }
.news-table td { color: var(--muted); }
.news-table tbody tr:last-child td { border-bottom: 0; }

/* The line under the article. */
.news-article__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 24px; max-width: 760px; margin-top: clamp(36px, 5vw, 56px);
  padding-top: var(--s-6); border-top: 1px solid var(--border);
}
.news-article__foot p { margin: 0; color: var(--muted); font-size: 14px; }

/* The closing band, the same on the index and on every article. */
.news-closing { padding-block: clamp(44px, 6vw, 80px); }
.news-closing__grid { display: grid; gap: clamp(20px, 3vw, 32px); align-items: center; }
@media (min-width: 900px) { .news-closing__grid { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }
.news-closing__title { max-width: 26ch; font-size: clamp(22px, 2.8vw, 30px); }
.news-closing p { max-width: 54ch; margin: var(--s-3) 0 0; color: var(--muted); font-size: clamp(15px, 1.5vw, 16.5px); }

@media (max-width: 379.98px) {
  .news-lead__body, .news-item__body { padding-inline: 18px; }
  .news-table { min-width: 26rem; }
  .news-meta { gap: 8px 12px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .news-item:hover { transform: none; }
  .news-lead:hover .news-more::after, .news-item:hover .news-more::after { transform: none; }
}
@media (forced-colors: active) {
  .news-lead, .news-item, .news-tag, .news-empty, .news-table-scroll { border: 1px solid CanvasText; }
  .news-body > ul > li::before { background: Highlight; }
  .news-body > ol > li::before { border: 1px solid CanvasText; background: Canvas; }
  .news-quote { border-left-color: CanvasText; }
}
@media print {
  .news-closing, .news-more { display: none !important; }
  .news-lead, .news-item { border-color: #999; box-shadow: none; }
  .news-figure img { border-color: #999; }
}