/* =========================================================
   Amplify Cohort — Landing page styles
   Built on the Practical PKM Colors & Type foundations.
   ========================================================= */

/* ---------- Fonts (self-hosted, matches lifehq.practicalpkm.com) ---------- */
@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SF-Pro-Display-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SF-Pro-Display-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SF-Pro-Display-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SF-Pro-Display-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SF-Pro-Display-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SF-Pro-Display-Heavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SF-Pro-Display-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --brand-violet: #c322ff;
  --brand-blue: #2469ff;
  --brand-gradient-flat: linear-gradient(135deg, #c322ff 0%, #2469ff 100%);

  /* Radii */
  --radius-xs: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-md: 0 6px 16px rgba(20, 24, 50, 0.08), 0 2px 4px rgba(20, 24, 50, 0.06);
  --shadow-lg: 0 16px 32px rgba(20, 24, 50, 0.12), 0 4px 8px rgba(20, 24, 50, 0.06);
  --shadow-xl: 0 28px 56px rgba(20, 24, 50, 0.16), 0 8px 16px rgba(20, 24, 50, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(20, 24, 50, 0.04);

  /* Motion */
  --ease-std: cubic-bezier(0.2, 0, 0, 1);

  /* Theme — dark (default) */
  --t-bg: #12141f;
  --t-bg2: #171a28;
  --t-bg3: #1c2033;
  --t-fg: #f5f6fa;
  --t-fg2: rgba(232, 236, 248, 0.85);
  --t-fg3: rgba(232, 236, 248, 0.75);
  --t-fg4: rgba(232, 236, 248, 0.6);
  --t-fg5: rgba(232, 236, 248, 0.45);
  --t-quote: rgba(232, 236, 248, 0.9);
  --t-card: rgba(255, 255, 255, 0.04);
  --t-border: rgba(255, 255, 255, 0.10);
  --t-border2: rgba(255, 255, 255, 0.14);
  --t-border3: rgba(255, 255, 255, 0.18);
  --t-hairline: rgba(255, 255, 255, 0.06);
  --t-hairline2: rgba(255, 255, 255, 0.08);
  --t-btn2: rgba(255, 255, 255, 0.08);
  --t-btn2h: rgba(255, 255, 255, 0.14);
  --t-navbg: rgba(18, 20, 31, 0.72);
  --t-accent: #a1bfff;
  --t-tick: rgba(255, 255, 255, 0.35);
  --t-arrow: rgba(255, 255, 255, 0.85);
}
:root[data-theme="light"] {
  --t-bg: #ffffff;
  --t-bg2: #f4f6fb;
  --t-bg3: #e8ecf5;
  --t-fg: #12141f;
  --t-fg2: rgba(18, 22, 40, 0.85);
  --t-fg3: rgba(18, 22, 40, 0.72);
  --t-fg4: rgba(18, 22, 40, 0.56);
  --t-fg5: rgba(18, 22, 40, 0.45);
  --t-quote: rgba(18, 22, 40, 0.9);
  --t-card: rgba(18, 22, 40, 0.03);
  --t-border: rgba(18, 22, 40, 0.12);
  --t-border2: rgba(18, 22, 40, 0.16);
  --t-border3: rgba(18, 22, 40, 0.22);
  --t-hairline: rgba(18, 22, 40, 0.08);
  --t-hairline2: rgba(18, 22, 40, 0.10);
  --t-btn2: rgba(18, 22, 40, 0.06);
  --t-btn2h: rgba(18, 22, 40, 0.11);
  --t-navbg: rgba(255, 255, 255, 0.72);
  --t-accent: #2469ff;
  --t-tick: rgba(18, 22, 40, 0.3);
  --t-arrow: #464c63;
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
body {
  margin: 0;
  background: var(--t-bg);
  color: var(--t-fg);
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}
a { color: var(--t-accent); text-decoration: none; }
a:hover { color: var(--t-accent); text-decoration: underline; }
img { max-width: 100%; }
*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: var(--radius-xs); }
::selection { background: rgba(195, 34, 255, 0.22); color: var(--t-fg); }

/* Theme-dependent logo swap */
.logo-dark { display: block; }
.logo-light { display: none; }
:root[data-theme="light"] .logo-dark { display: none; }
:root[data-theme="light"] .logo-light { display: block; }

/* ---------- Keyframes ---------- */
@keyframes amp-wave { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
@keyframes amp-flash { 0%, 88%, 100% { opacity: 0.07; } 3% { opacity: 1; } 9% { opacity: 0.16; } 13% { opacity: 0.85; } 21% { opacity: 0.09; } }
@keyframes amp-pulse { from { transform: scaleY(0.68); } to { transform: scaleY(1); } }
@keyframes amp-beaconpulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes amp-glow { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; } }
@keyframes amp-sweep { 0% { left: -28%; } 100% { left: 100%; } }

/* ---------- Layout primitives ---------- */
.section { padding: 96px 24px; }
.section--alt { background: var(--t-bg2); border-top: 1px solid var(--t-hairline); }
.section--line { border-top: 1px solid var(--t-hairline); }
.container { margin: 0 auto; }
.stack { display: flex; flex-direction: column; }

/* ---------- Typography ---------- */
.eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-accent);
}
.eyebrow--blue { color: #2469ff; }
h1, h2, h3 { color: var(--t-fg); margin: 0; }
.h-hero { font-size: 60px; line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; text-wrap: pretty; }
.h2-40 { font-size: 40px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: pretty; }
.h2-44 { font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; text-wrap: pretty; }
.h2-52 { font-size: 52px; line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; text-wrap: pretty; }
.h2-36 { font-size: 36px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--t-fg3); }
.body-17 { margin: 0; font-size: 17px; line-height: 1.55; color: var(--t-fg2); }
.grad-text {
  background: linear-gradient(135deg, #c322ff 0%, #2469ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.violet { color: #c322ff; }
strong.hl { color: var(--t-fg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--brand-gradient-flat);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-inset);
  transition: transform 200ms var(--ease-std), box-shadow 200ms var(--ease-std);
}
.btn:hover { transform: scale(1.04); color: #fff; text-decoration: none; }
.btn--nav { font-size: 15px; padding: 10px 24px; white-space: nowrap; }
.btn--hero { font-size: 17px; padding: 16px 38px; }
.btn--block { display: block; text-align: center; padding: 15px 32px; }
.btn--ghost {
  background: var(--t-btn2);
  border: 1px solid var(--t-border3);
  color: var(--t-fg);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--t-btn2h); color: var(--t-fg); }
.btn--white {
  background: #fff;
  color: #12141f;
  font-size: 17px;
  padding: 16px 40px;
  box-shadow: var(--shadow-lg);
}
.btn--white:hover { color: #12141f; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--t-navbg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--t-hairline2);
}
.nav__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav__logo { height: 30px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 112px 24px 120px; text-align: center; }
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(195, 34, 255, 0.22), transparent 65%),
    radial-gradient(700px 420px at 80% 20%, rgba(36, 105, 255, 0.18), transparent 70%);
}
.hero__inner {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.hero__sub { margin: 0; max-width: 620px; font-size: 20px; line-height: 1.55; color: var(--t-fg3); }
.cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.kickoff { font-size: 15px; color: var(--t-fg3); border-radius: var(--radius-pill); padding: 10px 20px; }
.kickoff strong { color: var(--t-fg); }
.waveform { display: flex; align-items: center; gap: 6px; height: 130px; justify-content: center; margin-top: 20px; }
.waveform span {
  width: 5px;
  border-radius: 999px;
  transform-origin: center;
}

/* ---------- Promo video ---------- */
.video-section { padding: 0 24px 96px; }
.video-frame {
  position: relative;
  padding-top: 56.277%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--t-bg);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Bullets & icon rows ---------- */
.bullets { display: flex; flex-direction: column; gap: 14px; }
.bullet { display: flex; gap: 14px; align-items: flex-start; }
.bullet::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2469ff;
  margin-top: 9px;
}
.bullet p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--t-fg2); }
.icon-row { display: flex; gap: 12px; align-items: flex-start; }
.icon-row > svg, .icon-row > i { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.icon-row p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--t-fg2); }
.icon-row--x > svg, .icon-row--x > i { color: #ff7a7a; }
.icon-row--check > svg, .icon-row--check > i { color: var(--t-accent); }

/* ---------- Creativity-is-a-system visuals ---------- */
.sys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  margin: 12px 0 4px;
}
.sys-item { display: flex; flex-direction: column; gap: 18px; }
.sys-item__visual { height: 130px; display: flex; align-items: center; }
.sys-item__visual--center { justify-content: center; }
.sys-flash {
  width: 74px;
  height: 74px;
  color: #c322ff;
  fill: #c322ff;
  animation: amp-flash 4.4s steps(1, end) infinite;
  filter: drop-shadow(0 0 26px rgba(195, 34, 255, 0.55));
}
.sys-beam {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, #c322ff, #2469ff);
  animation: amp-glow 3.2s ease-in-out infinite;
  box-shadow: 0 0 26px rgba(80, 90, 255, 0.5);
}
.sys-beam::after {
  content: "";
  position: absolute;
  top: 0;
  left: -28%;
  width: 28%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  animation: amp-sweep 3.4s linear infinite;
}
.sys-item__title { margin: 0; font-size: 17px; font-weight: 600; color: var(--t-fg); }
.sys-item__desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--t-fg4); }

/* ---------- Cards ---------- */
.card {
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card--lift { transition: transform 200ms var(--ease-std), box-shadow 200ms var(--ease-std); }
.card--lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card h3 { font-size: 20px; font-weight: 600; }
.card > svg, .card > i { width: 28px; height: 28px; color: #c322ff; }
.card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--t-fg3); }

/* Switch cards (dial section) */
.switch-card { padding: 28px; text-align: left; }
.switch-pill {
  width: 66px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: 3px;
  box-sizing: border-box;
}
.switch-pill--on {
  background: linear-gradient(135deg, #c322ff 0%, #2469ff 100%);
  justify-content: flex-end;
  box-shadow: 0 0 20px rgba(120, 70, 255, 0.4);
}
.switch-pill--on span { width: 28px; height: 28px; border-radius: 50%; background: #fff; }
.switch-pill--off { background: var(--t-btn2); border: 1px solid var(--t-border2); }
.switch-pill--off span { width: 28px; height: 28px; border-radius: 50%; background: var(--t-fg5); }
.switch-card .label { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-fg4); }
.switch-card .quote { margin: 0; font-size: 19px; line-height: 1.45; font-weight: 600; color: var(--t-fg); }
.switch-card .result { margin: 0; font-size: 15px; line-height: 1.5; color: var(--t-fg4); }

/* Benefit cards (the shift) */
.benefit-card { padding: 24px; gap: 12px; }
.benefit-card > svg, .benefit-card > i { width: 24px; height: 24px; color: #c322ff; }
.benefit-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--t-fg2); }

/* ---------- Dial ---------- */
.dial-wrap { max-width: 400px; width: 100%; }
.dial-wrap svg { width: 100%; height: auto; }
#dial-needle {
  transform-origin: 170px 170px;
  transform: rotate(-105deg);
  transition: transform 1.6s cubic-bezier(0.34, 1.35, 0.5, 1);
}

/* ---------- Amp demo (the shift) ---------- */
.amp-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--t-border);
}
.amp-btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  transition: background 200ms var(--ease-std), color 200ms;
  background: transparent;
  color: var(--t-fg4);
}
.amp-btn.is-active {
  background: linear-gradient(135deg, #c322ff 0%, #2469ff 100%);
  color: #fff;
}
.amp-stage {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.amp-col { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 140px; }
.amp-col--mid { min-width: 0; flex: none; }
.amp-col .amp-label { margin: 0; font-size: 14px; color: var(--t-fg4); text-align: center; }
.amp-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 130px;
  width: 100%;
}
.amp-bars span {
  width: 5px;
  border-radius: 999px;
  flex: none;
  transform-origin: center;
  transition: height 520ms var(--ease-std), background 320ms, opacity 320ms;
}
.amp-mega { height: 130px; display: flex; align-items: center; }
.amp-mega__art { position: relative; width: 92px; height: 92px; flex: none; }
.amp-mega__art img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; }
.amp-mega__art span {
  position: absolute;
  left: 60%;
  top: 44%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--t-fg);
}

/* ---------- Gradient-border cards ---------- */
.grad-border {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 3px;
  background: linear-gradient(135deg, #c322ff 0%, #2469ff 100%);
}
.grad-border__inner {
  background: var(--t-bg2);
  border-radius: 21px;
  padding: 46px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.intro-tagline { margin: 8px 0 0; font-size: 19px; font-weight: 600; color: var(--t-accent); }

/* ---------- Testimonials ---------- */
.testimonial {
  margin: 0;
  max-width: 680px;
  align-self: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testimonial blockquote { margin: 0; font-size: 20px; line-height: 1.5; color: var(--t-quote); }
.testimonial blockquote strong { color: var(--t-fg); }
.testimonial figcaption { display: flex; align-items: center; gap: 10px; justify-content: center; }
.testimonial figcaption img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.testimonial figcaption span { font-size: 15px; font-weight: 600; color: var(--t-fg3); }

/* ---------- Who-for cards ---------- */
.who-card { padding: 32px; gap: 18px; }
.who-card h3 { font-size: 22px; font-weight: 600; }

/* ---------- Flywheel ---------- */
/* Desktop: graphic left (vertically centered), heading + text right.
   Mobile (see media query): heading, then graphic, then text. */
.flywheel-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-areas: "art ." "art head" "art rest" "art .";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: 48px;
}
.flywheel { grid-area: art; align-self: center; }
.fw-head { grid-area: head; margin-bottom: 20px; }
.fw-rest { grid-area: rest; }
.flywheel {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1;
  justify-self: center;
}
.flywheel > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fw-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.8s var(--ease-std);
}
.fw-center p { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--t-fg); }
.fw-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.5s var(--ease-std);
}
.fw-node svg, .fw-node i { width: 38px; height: 38px; transform: scale(0.5); transition: transform 0.6s cubic-bezier(0.34, 1.45, 0.5, 1); }
.fw-node span { font-size: 12px; font-weight: 600; color: var(--t-fg3); }
.fw-node--capture { left: 50%; top: 17.4%; }
.fw-node--capture svg, .fw-node--capture i { color: #c322ff; }
.fw-node--curate { left: 81%; top: 39.9%; }
.fw-node--curate svg, .fw-node--curate i { color: #a24bff; }
.fw-node--connect { left: 69.2%; top: 76.4%; }
.fw-node--connect svg, .fw-node--connect i { color: #7a6cff; }
.fw-node--cultivate { left: 30.8%; top: 76.4%; }
.fw-node--cultivate svg, .fw-node--cultivate i { color: #4d85ff; }
.fw-node--create { left: 19%; top: 39.9%; }
.fw-node--create svg, .fw-node--create i { color: #2469ff; }
.fw-arc {
  opacity: 0;
  stroke-dasharray: 140 140;
  stroke-dashoffset: 140;
  transition: opacity 0.3s, stroke-dashoffset 0.7s var(--ease-std);
}
.fw-live .fw-node { opacity: 1; }
.fw-live .fw-node svg, .fw-live .fw-node i { transform: scale(1); }
.fw-live .fw-arc { opacity: 1; stroke-dashoffset: 0; }
.fw-live .fw-center { opacity: 1; }
.fw-steps { display: flex; flex-direction: column; gap: 12px; }
.fw-steps p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--t-fg2); }
.fw-steps strong { color: var(--t-fg); }

/* ---------- Curriculum ---------- */
.week-card {
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.week-badge {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--brand-gradient-flat);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.week-badge .wk { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.week-badge .num { font-size: 26px; font-weight: 800; line-height: 1; }
.week-body { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 12px; }
.week-body h3 { font-size: 24px; font-weight: 600; }
.week-body .desc { margin: 0; font-size: 16px; line-height: 1.55; color: var(--t-fg3); }
.week-list { display: flex; flex-direction: column; gap: 8px; }
.week-list p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--t-fg2); }

/* ---------- Schedule table ---------- */
.table-scroll { overflow-x: auto; }
.sched {
  min-width: 640px;
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  gap: 1px;
  background: var(--t-border);
  border: 1px solid var(--t-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sched__head {
  background: var(--t-bg3);
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-fg4);
}
.sched__week { background: var(--t-bg2); padding: 18px; font-size: 15px; font-weight: 600; color: var(--t-fg); }
.sched__week span { font-weight: 400; font-size: 13px; color: var(--t-fg4); }
.sched__cell {
  background: var(--t-bg);
  padding: 18px;
  position: relative;
  transition: transform 200ms var(--ease-std), background 200ms, box-shadow 200ms;
}
.sched__cell:hover,
.sched__cell.is-hot {
  background: var(--t-bg3);
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-lg);
  z-index: 1;
}
.sched__cell .t { margin: 0; font-size: 15px; font-weight: 600; color: var(--t-fg); }
.sched__cell .d { margin: 4px 0 0; font-size: 13px; color: var(--t-fg4); }
.sched__cell .s { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--t-fg3); }

/* ---------- Comparison table ---------- */
.compare {
  min-width: 600px;
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 1px;
  background: var(--t-border);
  border: 1px solid var(--t-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
}
.compare__corner { background: var(--t-bg3); padding: 16px 18px; }
.compare__us { background: rgba(36, 105, 255, 0.16); padding: 16px 18px; font-weight: 700; color: var(--t-fg); }
.compare__them-head { background: var(--t-bg3); padding: 16px 18px; font-weight: 600; color: var(--t-fg4); }
.compare__row { background: var(--t-bg2); padding: 16px 18px; font-weight: 600; color: var(--t-fg); }
.compare__us-cell { background: rgba(36, 105, 255, 0.08); padding: 16px 18px; color: var(--t-quote); }
.compare__them-cell { background: var(--t-bg); padding: 16px 18px; color: var(--t-fg4); }

/* ---------- CreatorBot bonus ---------- */
.bonus-shell {
  border-radius: var(--radius-xl);
  border: 1px solid var(--t-border);
  background: var(--t-bg);
}
.bonus-grid {
  padding: 44px;
  display: grid;
  grid-template-areas: "art ." "art head" "art rest" "art .";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: 44px;
}
.bonus-head { grid-area: head; display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.bonus-rest { grid-area: rest; }
.bonus-visual { grid-area: art; align-self: center; position: relative; display: flex; justify-content: center; align-items: center; min-height: 300px; }
.bonus-visual__halo {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(195, 34, 255, 0.32), transparent 68%);
}
.browser {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-xl);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  background: #1b1420;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.browser__bar .dot { width: 9px; height: 9px; border-radius: 50%; }
.browser__bar .dot--r { background: #ff5f57; }
.browser__bar .dot--y { background: #febc2e; }
.browser__bar .dot--g { background: #28c840; }
.browser__bar .url { flex: 1; text-align: center; font-size: 11px; color: rgba(255, 255, 255, 0.4); }
.browser img { display: block; width: 100%; }
.bonus-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand-gradient-flat);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.bonus-value { font-size: 17px; font-weight: 600; color: var(--t-fg3); }
.bonus-h { font-size: 38px; line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; }
.bonus-features { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.bonus-features .icon-row > svg, .bonus-features .icon-row > i { width: 19px; height: 19px; color: #c322ff; margin-top: 2px; }
.bonus-features strong { color: var(--t-fg); }

/* ---------- Pricing ---------- */
.price-card {
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--radius-xl);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.price-card__inner {
  background: var(--t-bg2);
  border-radius: 21px;
  padding: 38px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  box-sizing: border-box;
}
.price-head { display: flex; flex-direction: column; gap: 8px; }
.price-head h3 { font-size: 24px; font-weight: 700; }
.price-head .sub { margin: 0; font-size: 15px; color: var(--t-fg4); }
.price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.price-row .amount { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; }
.price-row .was { font-size: 20px; color: var(--t-fg5); text-decoration: line-through; }
.save-chip {
  align-self: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c322ff;
  background: transparent;
  border: 1px solid rgba(195, 34, 255, 0.5);
  border-radius: var(--radius-xs);
  padding: 5px 10px;
  line-height: 1;
}
.price-features { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.price-features .icon-row > svg, .price-features .icon-row > i { width: 17px; height: 17px; color: var(--t-accent); }
.price-features .icon-row p { font-size: 15px; }
.price-features strong { color: var(--t-fg); }
.spots-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--t-fg);
  background: rgba(195, 34, 255, 0.16);
  border: 1px solid rgba(195, 34, 255, 0.38);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.spots-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c322ff;
  flex: none;
  animation: amp-beaconpulse 1.8s ease-in-out infinite;
}
.guarantee-box {
  align-self: center;
  box-sizing: border-box;
  max-width: 720px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 30px 34px;
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--radius-xl);
}
.guarantee-box > svg, .guarantee-box > i { flex: none; width: 42px; height: 42px; color: #c322ff; }
.guarantee-box__text { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 7px; }
.guarantee-box__text .t { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--t-fg); }
.guarantee-box__text .s { margin: 0; font-size: 16px; line-height: 1.5; color: var(--t-fg3); }

/* ---------- Guarantee section ---------- */
.guarantee-grid {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 48px;
  align-items: center;
}
.guarantee-grid img { width: 100%; max-width: 320px; justify-self: center; border-radius: var(--radius-xl); }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.faq summary { cursor: pointer; font-size: 17px; font-weight: 600; color: var(--t-fg); }
.faq details p { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--t-fg3); }

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative;
  overflow: hidden;
  padding: 112px 24px;
  text-align: center;
  background: linear-gradient(135deg, #c322ff 0%, #7a6cff 45%, #2469ff 100%);
}
.final-cta__inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.final-cta h2 { font-size: 48px; line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; color: #fff; text-wrap: pretty; }
.final-cta .sub { margin: 0; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.85); }
.final-cta .fine { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.final-cta__logo { height: 72px; }

/* ---------- Footer ---------- */
.footer { padding: 32px 24px; border-top: 1px solid var(--t-hairline2); }
.footer__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer__inner p { margin: 0; font-size: 15px; color: var(--t-fg3); }
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--t-border);
}
.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  color: var(--t-fg4);
  transition: border-color 200ms var(--ease-std), color 200ms;
}
.theme-btn svg, .theme-btn i { width: 16px; height: 16px; }
:root:not([data-theme="light"]) .theme-btn--dark,
:root[data-theme="dark"] .theme-btn--dark { border-color: var(--t-border3); color: var(--t-fg); }
:root[data-theme="light"] .theme-btn--light { border-color: var(--t-border3); color: var(--t-fg); }

/* ---------- Scroll reveals ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-std), transform 0.7s var(--ease-std);
}
.reveal-live { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .waveform span, .amp-bars span, .sys-flash, .sys-beam, .sys-beam::after, .spots-badge::before { animation: none !important; }
  #dial-needle { transition: none; }
  .fw-node, .fw-node svg, .fw-node i, .fw-arc, .fw-center { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .section { padding: 72px 20px; }
  .hero { padding: 80px 20px 88px; }
  .h-hero { font-size: 40px; }
  .h2-52 { font-size: 38px; }
  .h2-44 { font-size: 34px; }
  .h2-40 { font-size: 32px; }
  .h2-36 { font-size: 30px; }
  .final-cta h2 { font-size: 36px; }
  .hero__sub { font-size: 18px; }
  .grad-border__inner { padding: 30px 24px; }
  .price-card { padding: 30px 24px; }
  .price-card__inner { padding: 28px 22px; }
  .bonus-grid { padding: 28px 22px; gap: 32px; }
  .week-card { padding: 26px 22px; }
  /* Waveform: 56 bars at 5px + 6px gaps = 610px; tighten so it fits a phone */
  .waveform { gap: 3px; }
  .waveform span { width: 4px; }

  /* Amplifier demo: keep voice → megaphone → output on ONE line */
  .amp-stage { flex-wrap: nowrap; gap: 10px; }
  .amp-col { min-width: 0; flex: 1 1 0; }
  .amp-col--mid { flex: 0 0 auto; }
  .amp-bars { gap: 2px; height: 110px; overflow: hidden; }
  .amp-bars span { width: 3px; }
  .amp-mega { height: 110px; }
  .amp-mega__art { width: 64px; height: 64px; }
  .amp-mega__art span { font-size: 12px; }
  .amp-col .amp-label { font-size: 13px; }

  /* Schedule: drop the 3-column spreadsheet; stack as cards under each week header */
  .sched { min-width: 0; grid-template-columns: 1fr; }
  .sched__head { display: none; }
  .sched__cell:hover, .sched__cell.is-hot { transform: none; box-shadow: none; }

  /* Comparison: stack each row as label → Amplify → others, with inline column tags */
  .compare { min-width: 0; grid-template-columns: 1fr; }
  .compare__corner, .compare__us, .compare__them-head { display: none; }
  .compare__row { padding-bottom: 8px; }
  .compare__us-cell::before,
  .compare__them-cell::before {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .compare__us-cell::before { content: "Amplify"; color: var(--t-accent); }
  .compare__them-cell::before { content: "Other AI courses"; color: var(--t-fg5); }

  /* Flywheel & CreatorBot bonus: heading first, graphic directly below it */
  .flywheel-grid,
  .bonus-grid {
    grid-template-areas: "head" "art" "rest";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 24px;
  }
  .fw-head, .bonus-head { margin-bottom: 0; }
  .bonus-visual { min-height: 0; }
}