/* ── Landing Page: Hero ─────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--navbar-height) + 20px) 0 80px;
  position: relative;
  overflow: hidden;
}

@supports (min-height: 100svh) {
  .hero {
    min-height: 100svh;
  }
}

/* Desktop: shorter hero, content higher, so the demo peeks in below. */
@media (min-width: 861px) {
  .hero {
    min-height: 0;
    align-items: flex-start;
    justify-content: flex-start;
    padding: calc(var(--navbar-height) + 7rem) 0 7.5rem;
  }

  @supports (min-height: 100svh) {
    .hero {
      min-height: 0;
    }
  }

  .hero__logo-img,
  .hero__logo-svg {
    max-width: 300px;
  }

  .hero__eyebrow {
    margin-bottom: 1.25rem;
  }
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 1;
}

.hero__content {
  text-align: left;
}

.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__logo-img,
.hero__logo-svg {
  width: 100%;
  max-width: 380px;
  height: auto;
}

.hero__logo-img {
  filter: drop-shadow(0 0 80px rgba(230, 148, 32, 0.45)) drop-shadow(0 0 24px rgba(230, 148, 32, 0.28));
}

/* wrapper sized to the VISUAL rotated dimensions (landscape video → portrait display) */
.hero__vid-frame {
  position: relative;
  width: 380px;
  height: 676px;
  flex-shrink: 0;
}

/* Canvas renders video with black keyed out — no mix-blend-mode needed */
.hero__fretboard-vid {
  position: absolute;
  width: 676px;
  height: 380px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  display: block;
  clip-path: inset(0 round 10px);
}

.hero__eyebrow {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 2.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: 100px;
  /* Glass pill like the "Launch App" button: fine amber outline and a shimmering label (keyframes
     live in navbar.css). No glow, no spinning rim. */
  border: 1px solid rgba(230, 148, 32, 0.2);
  background: rgba(16, 13, 9, 0.52);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  /* span both grid columns so it sits centred above the two-column layout */
  grid-column: 1 / -1;
  justify-self: center;
}

.hero__eyebrow-icon {
  flex: none;
}

/* The last letter carries trailing letter-spacing; pull it back so the text sits truly centered. */
.hero__eyebrow-label {
  margin-right: -0.14em;
  background-image: linear-gradient(
    90deg,
    hsl(25 78% 48%) 0%,
    hsl(34 82% 55%) 25%,
    hsl(40 78% 62%) 50%,
    hsl(34 82% 55%) 75%,
    hsl(25 78% 48%) 100%
  );
  background-size: 200% 100%;
  background-repeat: repeat-x;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: nav-launch-shimmer 5.5s linear infinite;
}

/* Endless animations pause while their section is off screen (index.html toggles .is-offscreen). */
.is-offscreen,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow-label {
    animation: none;
  }
}

.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}

.hero__title-accent {
  display: inline-block;
  background: var(--brand-heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero__subtitle {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: var(--clr-text);
  max-width: 520px;
  margin: 0;
  font-weight: 400;
  line-height: 1.75;
}

/* ── Landing Page: Section Divider ─────────────────────────────────────── */
.section-header {
  text-align: center;
  padding: 80px 48px 40px;
}

.section-header__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 14px;
}

.section-header__title {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.section-header__title span {
  color: var(--clr-saffron);
}

/* ── Landing Page: Feature Cards ───────────────────────────────────────── */
/* -- Landing Page: Feature Cards ----------------------------------------- */
.features {
  padding: 8px 48px 100px;
  max-width: 1200px;
  margin: 0 auto;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.feature-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition),
              background var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}

.feature-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--clr-saffron-muted), var(--clr-saffron));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.24s ease;
}

.feature-card:hover,
.feature-card:focus-visible {
  border-color: rgba(230, 148, 32, 0.36);
  background: var(--clr-surface-raised);
  transform: translateY(-5px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
  outline: none;
}

.feature-card:hover::after,
.feature-card:focus-visible::after {
  transform: scaleX(1);
}

.feature-card__icon {
  width: 48px;
  height: 48px;
  background: var(--clr-saffron-glow);
  border: 1px solid rgba(230, 148, 32, 0.22);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  margin-bottom: 20px;
}

.feature-card__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.feature-card__desc {
  font-size: 0.87rem;
  color: var(--clr-text);
  line-height: 1.7;
}

.feature-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--clr-saffron);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
}

.feature-card:hover .feature-card__cta,
.feature-card:focus-visible .feature-card__cta {
  opacity: 1;
  transform: translateX(0);
}

.footer {
  background: color-mix(in srgb, var(--background) 60%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  padding: 28px 0;
  /* Clear the fixed "Cookie settings" pill (cookie-consent.js #cc-reopen). */
  padding-bottom: 72px;
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer__copy {
  font-size: 0.82rem;
  color: var(--clr-text-muted);
}

.footer__launch {
  margin-left: 0;
}

.footer__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.footer__grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
  gap: 8px 32px;
  align-items: start;
}

/* -- Download section ------------------------------------------------------ */
/* Download section: no cards - a device label above a pill button styled like the header's
   "Launch App" (.navbar__nav-launch, keyframes and all - see navbar.css). */
.dl-options {
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 6vw, 4.5rem);
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  flex-wrap: wrap;
}

.dl-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.dl-option__devices {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--clr-text-muted);
}

.dl-option__btn {
  margin-left: 0;
}

/* Inert variant of .navbar__nav-launch - "not available yet" buttons (download section, Pro
   pricing card): same pill, frozen/dimmed instead of interactive. */
.navbar__nav-launch--disabled {
  cursor: default;
  opacity: 0.5;
}

.navbar__nav-launch--disabled .navbar__nav-launch-label,
.navbar__nav-launch--disabled.navbar__nav-launch {
  animation: none;
}

.navbar__nav-launch--disabled:hover {
  border-color: rgba(230, 148, 32, 0.38);
  box-shadow: 0 0 16px 2px rgba(230, 148, 32, 0.24), 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Pricing's Pro button specifically: grey instead of a dimmed orange. */
.pricing-card__cta .navbar__nav-launch--disabled,
.pricing-card__cta .navbar__nav-launch--disabled:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.pricing-card__cta .navbar__nav-launch--disabled .navbar__nav-launch-label {
  background-image: none;
  color: rgba(248, 248, 248, 0.5);
  -webkit-text-fill-color: rgba(248, 248, 248, 0.5);
}

@media (max-width: 600px) {
  .dl-options {
    gap: 2rem;
  }
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer__column--right {
  align-items: flex-end;
  justify-content: flex-start;
}

.footer__link {
  font-size: 0.82rem;
  color: var(--clr-text-secondary);
  text-decoration: none;
  padding: 2px 0;
  transition: color var(--transition);
}

.footer__link:hover {
  color: var(--primary);
}

@media (max-width: 700px) {
  .footer__inner {
    padding: 0 24px;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .footer__column--right {
    align-items: flex-start;
  }
  .footer__actions {
    align-items: flex-start;
  }
}

/* Every landing section keeps the same distance from its top / bottom edge (where the divider sits) as
   the "How does it work?" section. */
main > section:not(.hero) {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* The hero has the same distance below its content, before the first divider. */
main > section.hero {
  padding-bottom: 5rem;
}

@media (max-width: 720px) {
  main > section:not(.hero) {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* Sections scroll into view just below the fixed navbar. */
main > section {
  scroll-margin-top: var(--navbar-height);
}

/* A subtle 1px divider between the landing sections: short, centered, fading out at both ends. */
main > section + section {
  position: relative;
}

main > section + section::before {
  content: '';
  position: absolute;
  top: 0;
  /* Centered with auto margins, not a transform: a transformed 1px line at a fractional y position
     gets smeared over two pixel rows and almost disappears. */
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(640px, 70%);
  /* A border (not a 1px-high box): a border always paints at least one device pixel, even at
     browser zoom levels / display scales where a 1px box can round down to nothing. */
  height: 0;
  border-top: 1px solid;
  border-image: linear-gradient(90deg, transparent, rgba(230, 148, 32, 0.75), transparent) 1;
  pointer-events: none;
}

/* #demo anchor = demo fretboard (scroll past fixed navbar) */
.dq#demo {
  scroll-margin-top: calc(var(--navbar-height) + 16px);
}


/* -- Landing Page: generic content sections (struggles / about / pricing / faq) ---- */
.lp-section {
  padding: 5rem 0;
  position: relative;
}

.lp-section__inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}

.lp-section__title {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 2rem;
}

/* Plain headings, same color as the hero's "Master the" (how it works, try it yourself). */
#core-loop-title,
.dq__title {
  color: var(--clr-text);
}

.lp-section__title-accent {
  display: inline-block;
  background: var(--brand-heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


/* Common problems: a horizontal level reel (Beginner / Intermediate / Advanced) below the title;
   the problem (red) beside the fix (green) for whichever one is active.
   --clr-problem/--clr-solution are the app's own practice colors (wrong answer / right answer). */
:root {
  --clr-problem: 186, 4, 4;
  --clr-solution: 3, 185, 6;
}

/* Level picker: 3 options, always visible, below the title - same pill style as the core-loop
   step buttons (1. New shape / 2. Practice / 3. Performance). Auto-advances on a timer
   (js/struggles.js) until clicked, which both jumps to that option and stops it for good. */
.cp-level-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.cp-level-option {
  appearance: none;
  background: rgba(16, 13, 9, 0.4);
  border: 1px solid rgba(230, 148, 32, 0.2);
  border-radius: 100px;
  padding: 0.55rem 1.25rem;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  font-weight: 600;
  color: var(--clr-text-secondary);
  cursor: pointer;
  transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.cp-level-option:hover,
.cp-level-option:focus-visible,
.cp-level-option.is-active {
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 16px rgba(230, 148, 32, 0.18);
}

.cp-level-option:focus-visible {
  outline: none;
}

/* One panel visible at a time, sliding in step with the active level. */
.cp-carousel {
  overflow: hidden;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.cp-track {
  --i: 0;
  display: flex;
  align-items: flex-start;
  transform: translateX(calc(var(--i) * -100%));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.cp-panel {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
}

.cp-panel__title {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  /* Bright grey like the other headings; the .lp-section__title-accent part is the gradient. */
  color: var(--clr-text);
}

.lp-level__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
}

.lp-panel {
  --accent: 230, 148, 32;
  padding: 0 1rem;
  text-align: left;
}

.lp-panel--problem {
  --accent: var(--clr-problem);
}

.lp-panel--solution {
  --accent: var(--clr-solution);
}

.lp-panel__label {
  margin: 0 0 1.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--accent));
}

.lp-panel .lp-list {
  gap: 1.1rem;
  font-size: 1rem;
}

.lp-panel .lp-list li::before {
  background: rgb(var(--accent));
}

@media (max-width: 860px) {
  .lp-level__cols {
    grid-template-columns: 1fr;
  }

  .lp-panel {
    padding: 0;
  }

  .cp-carousel {
    margin-top: 1rem;
  }
}

/* Loop steps are pills (fully rounded sides) with the same quiet outline as the hero badge.
   An inset box-shadow instead of `border`: this pill's width is container-query/cqw-based (see
   below), so its edges rarely land on a whole device pixel - a real `border` anti-aliases across
   2 physical pixels there and reads visibly thicker than the fixed-width borders elsewhere. */
.core-loop__step {
  background: rgba(16, 13, 9, 0.4);
  box-shadow: inset 0 0 0 1px rgba(230, 148, 32, 0.2);
  border-radius: 100px;
}

@media (max-width: 720px) {
  .lp-section {
    padding: 3.5rem 0;
  }

  .lp-section__inner {
    padding: 0 24px;
  }
}

/* -- Landing Page: About me / Pricing / FAQ (moved from the old pricing page) -------- */
/* Animate conic-gradient angle only (no transform) — gradient moves inside fixed 1px ring mask */
@property --pricing-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ── Pricing: intro (solo story + photo placeholder) ─────────────────── */
.pricing-intro {
  padding: 3rem 3rem 3rem;
  max-width: 920px;
  margin: 0 auto;
}
.pricing-intro__inner {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 2.5rem;
  align-items: center;
}
.pricing-intro__photo {
  aspect-ratio: 17 / 20;
  width: 100%;
  max-width: 260px;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.pricing-intro__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.pricing-intro__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary, #E69420);
  margin-bottom: 0.75rem;
}
.pricing-intro__title {
  font-family: var(--font-heading, 'Eau Sans', sans-serif);
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--clr-text);
  margin: 0 0 1rem;
  line-height: 1.15;
}
.pricing-intro__cta-link {
  background: var(--brand-heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  text-decoration: none;
}
.pricing-intro__body {
  font-size: 1.02rem;
  color: var(--clr-text);
  line-height: 1.75;
  margin: 0 0 1.5rem;
}

/* ── Plans section wrapper ───────────────────────────────────────────── */
.pricing-plans {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 3rem 3rem;
  overflow: visible;
}
.pricing-plans__title {
  font-family: var(--font-heading, 'Eau Sans', sans-serif);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--clr-text-primary, #f5f0e8);
  margin: 0 0 2.35rem;
  text-align: center;
  line-height: 1.15;
}
.pricing-plans__title-accent {
  background: var(--brand-heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.pricing-grid {
  display: grid;
  gap: 1.75rem;
  margin: 0 auto;
  padding: 0;
}
.pricing-grid--one {
  display: grid;
  grid-template-columns: minmax(260px, 380px);
  justify-content: center;
  max-width: 100%;
  overflow: visible;
}

/* Trial + Early Access + Pro, side by side; Early Access (the real, purchasable plan) keeps the
   spotlight (wider, featured border) in the middle. */
.pricing-grid--three {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(260px, 360px) minmax(240px, 320px);
  justify-content: center;
  align-items: start;
  max-width: 100%;
  overflow: visible;
}

.pricing-card--trial,
.pricing-card--future {
  align-self: center;
}

.pricing-card.pricing-card--trial,
.pricing-card.pricing-card--future {
  border: none;
}

/* All three CTAs are the "Launch App" pill, full width inside the card (no left margin). */
.pricing-card__cta .navbar__nav-launch {
  margin-left: 0;
}

@media (max-width: 980px) {
  .pricing-grid--three {
    grid-template-columns: 1fr;
    max-width: 380px;
  }
}

@media (max-width: 700px) {
  .pricing-grid--one {
    grid-template-columns: 1fr;
  }

  .pricing-intro__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* "Detailed comparison" disclosure below the cards: a small link-like toggle, then a table that
   expands open (same max-height transition as the FAQ accordion). */
.pricing-compare {
  max-width: 900px;
  margin: 2rem auto 0;
}

.pricing-compare__toggle {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 auto;
  padding: 0.4rem 0.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--clr-text-secondary);
  cursor: pointer;
  transition: color 0.2s ease;
}

.pricing-compare__toggle:hover,
.pricing-compare__toggle:focus-visible {
  color: var(--primary);
}

.pricing-compare__chevron {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.pricing-compare.open .pricing-compare__chevron {
  transform: rotate(180deg);
}

.pricing-compare__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.pricing-compare.open .pricing-compare__panel {
  /* Generous ceiling - the table has grown (separate rows, grouped sections); this just needs to
     clear the real content's height, not match it exactly. */
  max-height: 1400px;
}

.pricing-compare__scroll {
  margin-top: 1.5rem;
  overflow-x: auto;
}

.pricing-compare__table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.pricing-compare__table th,
.pricing-compare__table td {
  padding: 1rem 1.1rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--clr-text-secondary);
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

/* Hovering a row makes its contents glow - same amber glow as the pricing cards' bullets, not
   the always-gradient group header rows. */
.pricing-compare__table tbody tr:not(.pricing-compare__group):hover th,
.pricing-compare__table tbody tr:not(.pricing-compare__group):hover td {
  color: var(--primary);
  text-shadow: 0 0 10px rgba(230, 148, 32, 0.45);
}

.pricing-compare__table tbody tr:not(.pricing-compare__group):hover .pricing-compare__check,
.pricing-compare__table tbody tr:not(.pricing-compare__group):hover .pricing-compare__x {
  background: var(--primary);
  filter: drop-shadow(0 0 4px rgba(230, 148, 32, 0.6));
}

.pricing-compare__table thead th {
  border-bottom: 1px solid rgba(230, 148, 32, 0.25);
  vertical-align: bottom;
}

.pricing-compare__table tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--clr-text);
  white-space: nowrap;
}

/* Section header rows ("Features" / "Future content" / "Pricing") - a label spanning the row,
   not a data line. */
.pricing-compare__table .pricing-compare__group th {
  padding: 1.75rem 1.1rem 0.6rem;
  /* Same divider as between ordinary rows, so the first row of a section gets one above it too. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
  /* Slightly bigger than a row title (0.92rem, inherited), natural case, same gradient as the
     other section headings instead of a flat solid color. */
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font-heading);
  background: var(--brand-heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  white-space: normal;
}

.pricing-compare__table .pricing-compare__group:first-of-type th {
  padding-top: 1.1rem;
}

.pricing-compare__plan {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
}

/* Early Access keeps the gradient here too, matching its card title above. */
.pricing-compare__plan--featured {
  background: var(--brand-heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Mask instead of a fixed-color image, so hovering the row (above) can swap the fill to the
   accent color - green by default (--clr-solution, the app's own right-answer color). */
.pricing-compare__check,
.pricing-compare__x {
  display: inline-block;
  width: 0.78rem;
  height: 0.78rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.pricing-compare__check {
  background: rgb(var(--clr-solution));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.7 9.5 3.3' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.7 9.5 3.3' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Red X (--clr-problem, the app's own wrong-answer color) instead of a plain dash for "not included". */
.pricing-compare__x {
  background: rgb(var(--clr-problem));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 2.5 9.5 9.5M9.5 2.5 2.5 9.5' stroke='%23000' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 2.5 9.5 9.5M9.5 2.5 2.5 9.5' stroke='%23000' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
}

.pricing-compare__table td.pricing-compare__good {
  color: rgb(var(--clr-solution));
}

.pricing-compare__table td.pricing-compare__bad {
  color: rgb(var(--clr-problem));
}

@media (prefers-reduced-motion: reduce) {
  .pricing-compare__panel,
  .pricing-compare__chevron {
    transition: none;
  }
}

.pricing-card {
  position: relative;
  z-index: 0;
  /* Same glass as the rest of the site's cards/pills - all three plans share one background. */
  background: rgba(16, 13, 9, 0.52);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(230, 148, 32, 0.15);
  border-radius: 14px;
  /* Same soft shadow as the portrait in the About section above. */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  padding: 2.35rem 2rem 2.65rem;
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 1.65rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pricing-card:hover {
  transform: translateY(-4px);
  z-index: 12;
}
.pricing-card--featured:hover {
  box-shadow: 0 14px 32px rgba(230, 148, 32, 0.14);
}
/* Pro: 1px gradient border ring; angle animates via @property (layer stays axis-aligned) */
.pricing-card--featured {
  border: none;
  position: relative;
  overflow: visible;
  isolation: isolate;
  background: transparent;
}
.pricing-card--featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  box-sizing: border-box;
  --pricing-border-angle: 0deg;
  background: conic-gradient(
    from var(--pricing-border-angle),
    rgba(230, 148, 32, 0.14) 0deg,
    rgba(230, 148, 32, 0.08) 110deg,
    rgba(255, 210, 110, 0.28) 240deg,
    rgba(230, 148, 32, 0.78) 278deg,
    rgba(255, 198, 92, 0.62) 302deg,
    rgba(255, 220, 120, 0.22) 328deg,
    rgba(230, 148, 32, 0.14) 360deg
  );
  animation: pricing-border-angle-spin 7s linear infinite;
  z-index: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
@keyframes pricing-border-angle-spin {
  to {
    --pricing-border-angle: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-card--featured::before {
    animation: none;
  }
}
.pricing-card--featured::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  background: rgba(16, 13, 9, 0.52);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  z-index: 1;
  pointer-events: none;
}
.pricing-card--featured > * {
  position: relative;
  z-index: 2;
}
.pricing-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* Tier name + subtext stacked on the left; the amount sits alone on the right, same row. */
.pricing-card__heading {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pricing-card__tier,
.pricing-card__amount {
  font-family: var(--font-heading, 'Eau Sans', sans-serif);
  font-weight: 700;
  line-height: 1.05;
  /* Grey like the other plain section headings; Early Access keeps the gradient below. */
  color: var(--clr-text);
}

.pricing-card--featured .pricing-card__tier {
  background: var(--brand-heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.pricing-card__tier {
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  letter-spacing: 0.01em;
  text-transform: none;
}

.pricing-card__amount {
  font-size: 3rem;
  line-height: 1;
  text-align: right;
}

.pricing-card__cycle {
  font-size: 0.85rem;
  color: var(--clr-text-secondary);
}
/* Same fade-at-edges technique as the divider between landing sections, just dimmer. */
.pricing-card__divider {
  width: 85%;
  margin: 0 auto;
  height: 0;
  border: none;
  border-top: 1px solid;
  border-image: linear-gradient(90deg, transparent, rgba(230, 148, 32, 0.28), transparent) 1;
}
.pricing-card__features {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  flex: 1;
  overflow: visible;
}
.pricing-card__features li {
  font-size: 0.9rem;
  /* Dimmer than plain white; every plan's bullets look the same until hovered. */
  color: var(--clr-text-secondary);
  line-height: 1.5;
  padding-left: 1.35rem;
  position: relative;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}
.pricing-card__features li[data-tooltip] {
  cursor: help;
}
.pricing-card__features li::before {
  content: '';
  width: 0.72rem;
  height: 0.72rem;
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  display: block;
  position: absolute;
  left: 0;
  top: 0.38rem;
  /* Ticks stay the accent color always - independent of the dimmer, hover-only text next to them. */
  background: var(--primary);
  filter: drop-shadow(0 0 3px rgba(230, 148, 32, 0.35));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.7 9.5 3.3' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.7 9.5 3.3' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.pricing-card__features li:hover {
  color: var(--primary);
  text-shadow: 0 0 12px rgba(230, 148, 32, 0.45);
}
.pricing-card__features li[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.55rem);
  transform: translateX(-50%) translateY(4px);
  /* max-content (not a flat width, and not fit-content - shrink-to-fit sizing is constrained by
     the containing block, which is this narrow li itself, and collapses to a near-min-content
     column) so a short tooltip hugs its text on one line, and a long one wraps at max-width with
     balanced line breaks instead of being forced to a flat width regardless of content. */
  width: max-content;
  max-width: min(26rem, calc(100vw - 2rem));
  background: rgb(16, 13, 9);
  border: none;
  color: var(--clr-text-primary, #f5f0e8);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
  /* If this wraps, avoid a lone word stranded on its own line. */
  text-wrap: balance;
  /* Solid background, so the edge is just a crisp 1px ring plus a soft glow instead of a border. */
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(230, 148, 32, 0.28),
    0 0 18px rgba(230, 148, 32, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 30;
}
.pricing-card__features li[data-tooltip]::before {
  z-index: 1;
}
.pricing-card__features li[data-tooltip]:hover {
  z-index: 25;
}
.pricing-card__features li[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Same hover tooltip as the card feature lists, adapted for a centered table cell. */
.pricing-compare__table td[data-tooltip] {
  position: relative;
  cursor: help;
}
.pricing-compare__table td[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.55rem);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: min(18rem, calc(100vw - 2rem));
  background: rgb(16, 13, 9);
  border: none;
  color: var(--clr-text-primary, #f5f0e8);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
  /* If this wraps, avoid a lone word stranded on its own line. */
  text-wrap: balance;
  /* Solid background, so the edge is just a crisp 1px ring plus a soft glow instead of a border. */
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(230, 148, 32, 0.28),
    0 0 18px rgba(230, 148, 32, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 30;
}
.pricing-compare__table td[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.pricing-card__cta {
  margin-top: auto;
}
.pricing-card__cta .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* ── FAQ (same behavior as About; styles live here so partials work) ── */
.pricing-page-faq {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 3rem 2rem;
  box-sizing: border-box;
}
.pricing-page-faq .faq__title {
  font-family: var(--font-heading, 'Eau Sans', sans-serif);
  font-size: clamp(1.85rem, 4.2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #fff;
  text-align: center;
  margin: 0 0 2.4rem;
}
.pricing-page-faq .faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
}
.pricing-page-faq .faq__item {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.pricing-page-faq .faq__item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pricing-page-faq .faq__question {
  all: unset;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  padding: 1.2rem 0;
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--clr-text-primary, #f5f0e8);
  cursor: pointer;
  opacity: 0.8;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.pricing-page-faq .faq__question:hover {
  color: var(--primary, #E69420);
  opacity: 1;
}
.pricing-page-faq .faq__item.open .faq__question {
  color: var(--primary, #E69420);
  opacity: 1;
}
.pricing-page-faq .faq__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.2s ease;
}
.pricing-page-faq .faq__icon::before,
.pricing-page-faq .faq__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}
.pricing-page-faq .faq__icon::before { width: 18px; height: 2px; top: 8px; left: 0; }
.pricing-page-faq .faq__icon::after  { width: 2px; height: 18px; top: 0; left: 8px; transition: opacity 0.2s ease; }
.pricing-page-faq .faq__item.open .faq__icon::after {
  opacity: 0;
}
.pricing-page-faq .faq__answer {
  font-size: 0.93rem;
  color: var(--clr-text);
  line-height: 1.75;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.2s ease;
  padding-bottom: 0;
}
.pricing-page-faq .faq__item.open .faq__answer {
  max-height: 400px;
  padding-bottom: 1.2rem;
}

@media (max-width: 860px) {
  .pricing-intro,
  .pricing-plans,
  .pricing-page-faq {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

  

/* -- Landing sections scroll under the fixed navbar --------------------------------- */
.lp-section,
.pricing-plans,
.pricing-intro,
.pricing-page-faq,
.pricing-card__features {
  scroll-margin-top: calc(var(--navbar-height) + 16px);
}

/* -- Landing Page: showcase video (responsive 16:9 YouTube embed) -------------------- */
.showcase-video__frame {
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
}

.showcase-video__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -- Landing Page: core loop (circular graphic + carousel) --------------------------- */
.lp-section--center .lp-section__title {
  text-align: center;
}

.core-loop__layout {
  display: grid;
  /* text | loop | screenshot */
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px) minmax(0, 1fr);
  grid-template-areas: 'text graphic shots';
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.core-loop__carousel--text { grid-area: text; }
.core-loop__graphic { grid-area: graphic; }
.core-loop__carousel--shots { grid-area: shots; }

.core-loop__graphic {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  container-type: inline-size;
}

.core-loop__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Faint arrow line; the sparkle below travels along it. */
.core-loop__arc {
  fill: none;
  stroke: var(--clr-saffron);
  stroke-opacity: 0.18;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

/* Sparkles: the pricing card's border technique (a rotating conic gradient seen through a thin
   ring mask), repeated every 120deg so each of the three arrows gets its own sparkle, all at the
   same phase. The wrapper only lets the three arrow ranges through (33-87deg, +120deg each,
   clockwise from the top) and fades the ends. */
@property --core-loop-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.core-loop__sparks {
  --t: 1px;
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: repeating-conic-gradient(
    from 33deg,
    transparent 0deg,
    #000 6deg,
    #000 48deg,
    transparent 54deg,
    transparent 120deg
  );
  mask-image: repeating-conic-gradient(
    from 33deg,
    transparent 0deg,
    #000 6deg,
    #000 48deg,
    transparent 54deg,
    transparent 120deg
  );
}

.core-loop__sparks-ring {
  position: absolute;
  inset: calc(13.4615% - var(--t) / 2);
  padding: var(--t);
  box-sizing: border-box;
  border-radius: 50%;
  --core-loop-angle: 0deg;
  /* Same stops as the pricing card border, squeezed from 360deg into one 120deg repeat. */
  background: repeating-conic-gradient(
    from var(--core-loop-angle),
    rgba(230, 148, 32, 0.14) 0deg,
    rgba(230, 148, 32, 0.08) 36.7deg,
    rgba(255, 210, 110, 0.28) 80deg,
    rgba(230, 148, 32, 0.78) 92.7deg,
    rgba(255, 198, 92, 0.62) 100.7deg,
    rgba(255, 220, 120, 0.22) 109.3deg,
    rgba(230, 148, 32, 0.14) 120deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  /* 120deg per loop = the pricing border's speed (360deg in 7s). */
  animation: core-loop-spin 2.4s linear infinite;
}

@keyframes core-loop-spin {
  to {
    --core-loop-angle: 120deg;
  }
}

.core-loop__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.core-loop__item {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 36cqw;
}

.core-loop__item--1 { left: 50%;   top: 13.5%; }
.core-loop__item--2 { left: 81.6%; top: 68.3%; }
.core-loop__item--3 { left: 18.4%; top: 68.3%; }

/* Two states: inactive = dim text, quiet ring; active (current step, or hovered / focused) =
   primary color text, primary ring and a glow. Steps are buttons: click to jump there. */
.core-loop__step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  width: 100%;
  padding: 2cqw 2.4cqw;
  box-sizing: border-box;
  color: var(--clr-text-secondary);
  font: inherit;
  font-size: clamp(0.72rem, 3cqw, 1rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: color 0.35s ease, box-shadow 0.35s ease;
}

.core-loop__step:hover,
.core-loop__step:focus-visible,
.core-loop__step.is-active {
  color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary), 0 0 6px rgba(230, 148, 32, 0.12);
}

.core-loop__step:focus-visible {
  outline: none;
}

/* The number uses exactly the label's font, size and weight. */
.core-loop__num {
  flex: none;
  min-width: 1ch;
  font: inherit;
  color: inherit;
}

/* Two carousels (text on the left, app screenshot on the right) that slide in step with the
   highlighted step. Each slide is centered vertically, so it lines up with the middle of the loop. */
.core-loop__carousel {
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
  min-width: 0;
}

.core-loop__track {
  --i: 0;
  --gap: 1rem;
  display: flex;
  align-items: center;
  gap: var(--gap);
  transform: translateX(calc(var(--i) * (-100% - var(--gap))));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.core-loop__card,
.core-loop__slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  margin: 0;
  transition: opacity 0.6s ease;
}

.core-loop__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.core-loop__card[aria-hidden='true'],
.core-loop__slide[aria-hidden='true'] {
  opacity: 0.25;
}

.core-loop__card-title {
  margin: 0;
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  /* Same gradient as the section headings. */
  background: var(--brand-heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.core-loop__card-list,
.lp-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--clr-text);
}

.core-loop__card-list li,
.lp-list li {
  position: relative;
  padding-left: 1.1rem;
}

.core-loop__card-list li::before,
.lp-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}

/* App screenshot (phone-shaped), centered in its column. */
.core-loop__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.core-loop__caption {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--clr-text-muted);
}

.core-loop__shot {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  border-radius: 12px;
  /* Same soft shadow as the portrait in the About section. */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* Medium screens: the loop on the left, text above the screenshot on the right. */
@media (max-width: 1100px) {
  .core-loop__layout {
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    grid-template-areas:
      'graphic text'
      'graphic shots';
    row-gap: 1.5rem;
  }

  .core-loop__carousel--text {
    align-self: end;
  }

  .core-loop__carousel--shots {
    align-self: start;
  }

  .core-loop__graphic {
    grid-row: 1 / span 2;
    align-self: center;
  }

  .core-loop__slide {
    align-items: flex-start;
  }

  .core-loop__shot {
    max-height: 300px;
  }
}

/* Narrow screens: one column - loop, text, screenshot. */
@media (max-width: 860px) {
  .core-loop__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'graphic'
      'text'
      'shots';
  }

  .core-loop__graphic {
    grid-row: auto;
    justify-self: center;
  }

  .core-loop__slide {
    align-items: center;
  }
}

/* Screenshots open in a lightbox (built by js/core-loop.js). */
.core-loop__zoom {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  max-width: 100%;
  border-radius: 12px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.core-loop__zoom:hover,
.core-loop__zoom:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(230, 148, 32, 0.18);
  outline: none;
}

html.cl-lightbox-open {
  overflow: hidden;
}

.cl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(8, 5, 1, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cl-lightbox[hidden] {
  display: none;
}

.cl-lightbox.is-open {
  opacity: 1;
}

.cl-lightbox__track {
  --i: 0;
  display: flex;
  width: 100%;
  transform: translateX(calc(var(--i) * -100%));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.cl-lightbox__slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 3.5rem 5rem;
  height: 100vh;
  height: 100dvh;
}

.cl-lightbox__slide img {
  display: block;
  max-width: 100%;
  max-height: min(100%, 951px);
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(230, 148, 32, 0.12);
  user-select: none;
  -webkit-user-drag: none;
}

.cl-lightbox__btn {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(230, 148, 32, 0.3);
  border-radius: 50%;
  background: rgba(16, 13, 9, 0.6);
  color: var(--foreground);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cl-lightbox__btn:hover,
.cl-lightbox__btn:focus-visible {
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 18px rgba(230, 148, 32, 0.3);
  outline: none;
}

.cl-lightbox__btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cl-lightbox__close {
  top: 1rem;
  right: 1rem;
}

.cl-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.cl-lightbox__nav--prev { left: 1rem; }
.cl-lightbox__nav--next { right: 1rem; }

@media (max-width: 640px) {
  .cl-lightbox__slide {
    padding: 4rem 1rem 2rem;
  }

  .cl-lightbox__nav {
    top: auto;
    bottom: 0.75rem;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .core-loop__sparks {
    display: none;
  }

  .core-loop__arc {
    stroke-opacity: 0.7;
  }

  .core-loop__step,
  .core-loop__track,
  .core-loop__card,
  .core-loop__slide,
  .core-loop__zoom,
  .cl-lightbox,
  .cl-lightbox__track,
  .cp-track {
    transition: none;
  }
}

/* Download: install instructions (js/install-app.js). Padding lives on __body so a click whose
   target is the <dialog> itself can only be the backdrop. */
.install-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(26rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--clr-saffron-border);
  border-radius: 1rem;
  background: var(--clr-surface);
  color: var(--clr-text);
}

.install-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.install-dialog__body {
  padding: 1.5rem;
}

.install-dialog__title {
  margin: 0 0 1rem;
  font-size: 1.15rem;
}

.install-dialog__steps {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--clr-text-secondary);
}

.install-dialog__steps strong {
  color: var(--clr-text);
}

.install-dialog__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.install-dialog__close {
  background: none;
  border: none;
  color: var(--clr-text-secondary);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.install-dialog__close:hover {
  color: var(--clr-text);
}