/* ============================================================
   Humble for Education — shared design system
   Ported from the Humble marketing-site design system
   (purple #4705D0 / pink #FEBBCC anchor, paper neutrals),
   plus the project's dark-band rule for "negative message" sections:
   #16171C (dark) <-> #A0A0A0 (mid-grey, ink-dark text) <-> #16171C
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Newsreader:ital,wght@0,400;0,500;1,400;1,500&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  /* Purple scale — brand anchor */
  --purple-50:  #F2ECFF;
  --purple-100: #E1D3FF;
  --purple-200: #C2A7FF;
  --purple-300: #9E76FF;
  --purple-400: #7A46F0;
  --purple-500: #4705D0;
  --purple-600: #3A03AA;
  --purple-700: #2D0287;
  --purple-800: #1D0059;
  --purple-900: #10002F;

  /* Pink scale — warm counterpart */
  --pink-50:  #FFF5F8;
  --pink-100: #FFE6EE;
  --pink-200: #FFD3E0;
  --pink-300: #FEBBCC;
  --pink-400: #F597AE;
  --pink-500: #E76E8E;
  --pink-600: #C14A6B;

  /* Neutrals */
  --paper:   #FCFAF7;
  --paper-2: #F5F1EA;
  --ink:     #1A1530;
  --ink-2:   #47425E;
  --ink-3:   #7A7690;
  --line:    #EBE4D9;
  --line-2:  #D8D0C2;

  --success: #2F8A5F;
  --warning: #C97B1A;
  --error:   #C74545;

  /* Negative-message dark bands (see CLAUDE.md banding rule) */
  --dark-1: #16171C;
  --dark-2: #202939;
  --dark-3: #242430;
  --dark-card: #2E2E3A;
  --dark-border: #3A3A48;
  --dark-mid: #A0A0A0;

  --bg: var(--paper);
  --bg-elev: #FFFFFF;
  --bg-sunken: var(--paper-2);
  --fg: var(--ink);
  --fg-muted: var(--ink-2);
  --fg-subtle: var(--ink-3);
  --accent: var(--purple-500);
  --accent-hover: var(--purple-600);
  --border: var(--line);
  --border-strong: var(--line-2);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(26, 21, 48, 0.04), 0 1px 1px rgba(26, 21, 48, 0.03);
  --shadow-md: 0 4px 12px rgba(26, 21, 48, 0.06), 0 1px 3px rgba(26, 21, 48, 0.04);
  --shadow-lg: 0 12px 32px rgba(26, 21, 48, 0.08), 0 2px 6px rgba(26, 21, 48, 0.04);
  --shadow-brand: 0 8px 24px rgba(71, 5, 208, 0.18);

  --font-display: 'Hanken Grotesk', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Hanken Grotesk', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  --container: 1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent); text-underline-offset: 2px; transition: color 160ms ease; }
a:hover { color: var(--accent-hover); }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

.site { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .site { padding: 0 20px; } }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 700;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(38px, 5.6vw, 68px); letter-spacing: -0.03em; }
h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; }
h3 { font-size: 22px; line-height: 1.2; }
h4 { font-size: 17px; font-weight: 600; }

p { font-size: 16px; line-height: 1.55; color: var(--fg); margin: 0; }
.body-lg { font-size: 18px; line-height: 1.6; }

.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 14px; display: block; }

.serif-quote { font-family: var(--font-serif); font-style: italic; line-height: 1.4; text-wrap: pretty; }

/* On dark bands */
.on-dark { color: #FCFAF7; }
.on-dark .eyebrow { color: var(--pink-300); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #FCFAF7; }
.on-dark p { color: rgba(252, 250, 247, 0.72); }

/* Mid-grey band per CLAUDE.md — ink-dark text, not paper-light text */
.on-mid { color: var(--ink); }
.on-mid .eyebrow { color: var(--purple-700); }
.on-mid h1, .on-mid h2, .on-mid h3, .on-mid h4 { color: var(--ink); }
.on-mid p { color: rgba(26, 21, 48, 0.78); }

/* ---------- Buttons ---------- */

.btn { font-family: var(--font-display); font-weight: 700; font-size: 15px; border-radius: var(--radius-pill); padding: 13px 24px; border: none; cursor: pointer; transition: all 180ms ease; letter-spacing: -0.005em; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.btn-primary { background: var(--purple-500); color: var(--pink-300); box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--purple-600); color: var(--pink-200); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.98); background: var(--purple-700); }
.btn-secondary { background: transparent; color: var(--fg); border: 1.5px solid var(--fg); padding: 11.5px 22.5px; }
.btn-secondary:hover { background: var(--fg); color: var(--bg); }
.btn-on-dark { background: var(--pink-300); color: var(--purple-800); }
.btn-on-dark:hover { background: var(--pink-200); }
.btn-ghost-on-dark { background: transparent; color: #FCFAF7; border: 1.5px solid rgba(252,250,247,0.35); padding: 11.5px 22.5px; }
.btn-ghost-on-dark:hover { border-color: var(--pink-300); color: var(--pink-300); }
.btn-sm { font-size: 13px; padding: 10px 18px; }

/* ---------- Nav ---------- */

.nav-wrap { position: sticky; top: 16px; z-index: 100; padding: 0 32px; }
.nav { background: rgba(252, 250, 247, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 10px 12px 10px 22px; display: flex; align-items: center; gap: 22px; max-width: var(--container); margin: 0 auto; box-shadow: var(--shadow-sm); }
.nav .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--fg); text-decoration: none; }
.nav .logo img { width: 30px; height: 30px; border-radius: 9px; }
.nav .tag { font-size: 11px; font-weight: 700; color: var(--purple-500); background: var(--purple-50); padding: 3px 10px; border-radius: var(--radius-pill); letter-spacing: 0.01em; }
.nav .links { display: flex; gap: 26px; font-family: var(--font-display); font-size: 14.5px; color: var(--fg-muted); font-weight: 500; margin-left: auto; }
.nav .links a { color: inherit; text-decoration: none; transition: color 160ms; }
.nav .links a:hover, .nav .links a.cur { color: var(--fg); }
.nav .actions { display: flex; align-items: center; gap: 14px; }
.nav .login { font-size: 14.5px; font-weight: 600; color: var(--fg-muted); }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-wrap { padding: 0 16px; top: 12px; }
  .nav { gap: 10px; padding: 8px 8px 8px 16px; }
  .nav .logo { font-size: 16px; gap: 6px; }
  .nav .actions .btn-sm { padding: 8px 12px; font-size: 12.5px; }
  .nav .links { position: fixed; inset: 76px 16px auto 16px; background: var(--paper); border: 1px solid var(--border); border-radius: 20px; flex-direction: column; align-items: flex-start; padding: 20px; gap: 18px; box-shadow: var(--shadow-lg); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: all 0.2s ease; }
  .nav .links.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav .login { display: none; }
  .nav-toggle { display: flex; flex-direction: column; gap: 4px; width: 22px; margin-left: auto; }
  .nav-toggle span { height: 2px; background: var(--ink); border-radius: 2px; }
}

@media (max-width: 380px) {
  .nav { gap: 6px; padding: 8px 6px 8px 12px; }
  .nav .tag { display: none; }
}

/* ---------- Sections ---------- */

section { padding: 96px 0; }
@media (max-width: 720px) { section { padding: 64px 0; } }

.bg-paper { background: var(--paper); }
.bg-paper-2 { background: var(--paper-2); }
.bg-dark1 { background: var(--dark-1); }
.bg-dark2 { background: var(--dark-2); }
.bg-dark3 { background: var(--dark-3); }
.bg-mid { background: var(--dark-mid); }
.bg-purple { background: var(--purple-500); }
.bg-purple-800 { background: var(--purple-800); }
.bg-ink { background: var(--ink); }

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin: 8px 0 12px; }
.section-head p { color: var(--fg-muted); font-size: 17px; max-width: 60ch; line-height: 1.5; }
.on-dark .section-head p, .on-mid .section-head p { color: inherit; opacity: 0.85; }

/* ---------- Grid ---------- */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-fixed-260 { display: grid; grid-template-columns: minmax(260px,360px) minmax(0,1fr); gap: 48px; align-items: center; }
.grid-fixed-300 { display: grid; grid-template-columns: minmax(300px,420px) minmax(0,1fr); gap: 48px; align-items: center; }
.grid-2fr-3fr { display: grid; grid-template-columns: 2fr 3fr; gap: 48px; align-items: center; }
.grid-3-gap24 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-5fr-4fr { grid-template-columns: 5fr 4fr; }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4, .grid-fixed-260, .grid-fixed-300, .grid-2fr-3fr, .grid-3-gap24, .grid-5fr-4fr { grid-template-columns: 1fr; }
}

/* ---------- Cards ---------- */

.feat { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: all 200ms ease; }
.feat:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feat h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
.feat p { color: var(--fg-muted); line-height: 1.55; font-size: 15px; }
.feat .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--purple-50); color: var(--purple-500); display: grid; place-items: center; margin-bottom: 18px; }

.card-dark { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-lg); padding: 28px; color: #FCFAF7; }

.pr { padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-elev); }
.pr h4 { font-size: 17px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.pr p { color: var(--fg-muted); font-size: 14px; line-height: 1.5; margin: 0; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; background: var(--paper-2); color: var(--fg); }

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

.hero { padding: 56px 0 48px; text-align: center; position: relative; }
.hero .eyebrow { display: inline-block; }
.hero h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; margin: 0 auto 22px; max-width: 17ch; }
.hero p.sub { font-size: 19px; color: var(--fg-muted); max-width: 56ch; margin: 0 auto 32px; line-height: 1.5; text-wrap: pretty; }
.hero .actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 22px; flex-wrap: wrap; }
.hero .promise { font-size: 14px; color: var(--fg-subtle); display: flex; align-items: center; gap: 8px; justify-content: center; }
.hero .promise::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

/* dark hero variant */
.hero-dark { background: var(--purple-500); color: #FCFAF7; overflow: hidden; position: relative; padding: 76px 0 64px; }
.hero-dark h1 { color: #FCFAF7; }
.hero-dark p.sub { color: rgba(252, 250, 247, 0.75); }
.hero-dark .promise { color: rgba(252, 250, 247, 0.65); }

/* ---------- Persona tabs ---------- */

.tab-bar { display: inline-flex; gap: 4px; padding: 6px; background: var(--paper-2); border-radius: var(--radius-pill); margin-bottom: 8px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn { border: 0; background: transparent; color: var(--fg-muted); font-family: var(--font-display); font-weight: 600; font-size: 14.5px; padding: 11px 22px; border-radius: var(--radius-pill); cursor: pointer; transition: all 180ms ease; }
.tab-btn.active { background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow-sm); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadein 0.35s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Feature tabs (underline style, full width) ---------- */

.tab-bar--underline { display: flex; width: 100%; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 40px; padding: 0; background: none; border-radius: 0; overflow-x: auto; scrollbar-width: none; }
.tab-bar--underline::-webkit-scrollbar { display: none; }
.tab-btn--underline { display: flex; align-items: center; gap: 9px; flex-shrink: 0; background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 16px 22px; border-radius: 0; font-size: 15.5px; box-shadow: none; }
.tab-btn--underline svg { width: 18px; height: 18px; flex-shrink: 0; }
.tab-btn--underline.active { background: none; box-shadow: none; color: var(--purple-500); border-bottom-color: var(--purple-500); }
@media (max-width: 720px) { .tab-btn--underline { padding: 13px 16px; font-size: 13.5px; } .tab-btn--underline svg { width: 16px; height: 16px; } }

/* ---------- Pricing ---------- */

.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.pricing-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; } }
.plan { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px; position: relative; display: flex; flex-direction: column; }
.plan.hot { border-color: var(--accent); border-width: 2px; box-shadow: var(--shadow-brand); }
.plan .tag { position: absolute; top: -14px; left: 32px; background: var(--accent); color: var(--pink-300); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-pill); font-family: var(--font-display); }
.plan h3 { font-size: 23px; font-weight: 700; margin: 0 0 4px; }
.plan .desc { color: var(--fg-muted); font-size: 14px; margin: 0 0 20px; min-height: 40px; }
.plan .price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.plan .price .n { font-family: var(--font-display); font-size: 42px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.plan .price .per { color: var(--fg-muted); font-size: 15px; }
.plan .bill { color: var(--fg-subtle); font-size: 13px; margin-bottom: 24px; }
.plan ul { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; flex: 1; }
.plan li { display: flex; gap: 10px; font-size: 14px; color: var(--fg); }
.plan li::before { content: ""; width: 16px; height: 16px; background: var(--accent); mask: url("data:image/svg+xml;utf8,<svg 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'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml;utf8,<svg 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'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat; flex-shrink: 0; margin-top: 3px; }

/* ---------- CTA band ---------- */

.cta-band { background: var(--purple-800); color: var(--pink-300); border-radius: var(--radius-2xl); padding: 64px 48px; text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--pink-300); margin: 0 0 12px; text-wrap: balance; }
.cta-band p { color: var(--pink-300); opacity: 0.82; font-size: 17px; margin: 0 0 24px; }
.cta-band .btn-primary { background: var(--pink-300); color: var(--purple-800); }
.cta-band .btn-primary:hover { background: var(--pink-200); }
.cta-band .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Trust bar ---------- */

.trust-bar { background: var(--paper-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 44px 0; text-align: center; }
.trust-bar .label { font-size: 13px; color: var(--fg-subtle); margin: 0 0 22px; letter-spacing: 0.04em; }
.trust-logos { display: flex; gap: 48px; justify-content: center; align-items: center; flex-wrap: wrap; filter: grayscale(1); opacity: 0.55; }

/* ---------- Mockup dashboard ---------- */

.mockup { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.mockup-top { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: var(--paper-2); border-bottom: 1px solid var(--border); }
.mockup-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.mockup-body { display: grid; grid-template-columns: 150px 1fr; }
.mockup-side { background: var(--paper-2); border-right: 1px solid var(--border); padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.mockup-side-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 10px; color: var(--fg-muted); font-size: 13px; font-weight: 600; }
.mockup-side-item.active { background: var(--purple-100); color: var(--purple-500); font-weight: 700; }
.mockup-main { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.mockup-card { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.mockup-card-top { padding: 9px 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.mockup-card-body { padding: 12px 14px; background: var(--bg-elev); font-size: 12.5px; color: var(--fg-muted); }
.mockup-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .mockup-body, .mockup-row2 { grid-template-columns: 1fr; } .mockup-side { display: none; } }

/* ---------- Avatars (real mascot images) ---------- */

.mascot { display: block; }
.mascot-float { animation: mfloat 6s ease-in-out infinite; }
@keyframes mfloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.mascot-drift { animation: drift 5.5s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* speech bubble, used in "energy" style scenes */
.bubble { position: absolute; max-width: 230px; background: #6A2FE0; border-radius: 999px; padding: 12px 18px; font-size: 13px; font-weight: 600; color: #FCFAF7; line-height: 1.4; }

/* scattered faint mascot silhouettes on dark bands — mask-image set inline per element
   (CSS custom properties containing url() resolve relative to the stylesheet they're
   read in, not where they're declared, so the mask path is set directly in markup) */
.mascot-scatter { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mascot-scatter i { position: absolute; background: #202939; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* ---------- Quote / testimonial ---------- */

.quote-card { background: var(--paper-2); border-radius: var(--radius-lg); padding: 26px 28px; }
.quote-card p.serif-quote { font-size: 17px; color: var(--fg); margin: 0 0 16px; }
.quote-role { font-size: 13px; font-weight: 700; color: var(--purple-500); }
.quote-note { font-size: 12px; color: var(--fg-subtle); margin-top: 2px; }

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

footer { border-top: 1px solid var(--border); padding: 56px 0 32px; background: var(--paper); }
footer .row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 32px; }
@media (max-width: 720px) { footer .row { grid-template-columns: 1fr; } }
footer h5 { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); margin: 0 0 14px; font-weight: 700; }
footer ul { display: flex; flex-direction: column; gap: 12px; }
footer a { color: var(--fg-muted); text-decoration: none; font-size: 14px; }
footer a:hover { color: var(--fg); }
footer .legal { padding-top: 24px; border-top: 1px solid var(--border); color: var(--fg-subtle); font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
footer .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--fg); }
footer .brand img { width: 28px; height: 28px; border-radius: 8px; }
footer .tag { color: var(--fg-muted); font-size: 14px; max-width: 42ch; line-height: 1.5; }

/* ---------- Utility ---------- */

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.badge-soon { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: #FBEFD9; color: var(--warning); padding: 3px 10px; border-radius: var(--radius-pill); }
.badge-live { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: #E4F2EB; color: var(--success); padding: 3px 10px; border-radius: var(--radius-pill); }
.checklist { display: flex; flex-direction: column; gap: 12px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.checklist svg { flex-shrink: 0; margin-top: 3px; }