:root {
  color-scheme: light;
  --bg: #f8f5fb;
  --bg-2: #eef6f4;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.74);
  --ink: #19171f;
  --muted: #6d6578;
  --line: rgba(36, 25, 55, 0.11);
  --purple: #6a1cf6;
  --purple-2: #8b5cf6;
  --purple-dark: #4b10be;
  --cyan: #6bd8ff;
  --teal: #087284;
  --yellow: #ffd327;
  --lavender: #ded4ed;
  --shadow: 0 24px 70px rgba(65, 36, 101, 0.15);
  --max: 1160px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, #fbf9fd 0%, var(--bg) 42%, var(--bg-2) 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  text-rendering: geometricPrecision;
}

body[dir="rtl"] {
  direction: rtl;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
select,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid rgba(106, 28, 246, 0.34);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  width: 100%;
  padding: 18px max(18px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid rgba(36, 25, 55, 0.08);
  background: rgba(251, 249, 253, 0.9);
  backdrop-filter: blur(18px);
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--purple);
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.brand-mark {
  width: 28px;
  height: 28px;
  object-fit: contain;
}


.nav-links {
  display: flex;
  justify-content: center;
  gap: 26px;
  color: #332a44;
  font-size: 0.9rem;
  font-weight: 700;
}

.nav-links a {
  padding: 8px 0;
  border-bottom: 3px solid transparent;
}

.nav-links a:hover {
  color: var(--purple);
  border-bottom-color: var(--purple);
}

.nav-links a.nav-bigscreen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border: 0;
  border-bottom: 0;
  border-radius: 999px;
  background: #ff7733;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(255, 119, 51, 0.28);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.nav-links a.nav-bigscreen:hover {
  background: #ff8c52;
  color: #ffffff;
  border-bottom-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(255, 119, 51, 0.36);
}

.nav-links a.nav-bigscreen.is-active {
  box-shadow:
    0 0 0 3px rgba(255, 119, 51, 0.22),
    0 4px 10px rgba(255, 119, 51, 0.28);
}

.nav-bigscreen-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
}

.nav-bigscreen-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.language-control {
  position: relative;
}

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 4px 14px 4px 5px;
  border: 1px solid rgba(106, 28, 246, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font: 800 0.86rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 120ms ease;
}

.lang-trigger:hover {
  border-color: rgba(106, 28, 246, 0.4);
  background: #ffffff;
}

.lang-trigger:focus-visible {
  outline: 3px solid rgba(106, 28, 246, 0.34);
  outline-offset: 2px;
}

.lang-flag {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(106, 28, 246, 0.08);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.lang-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.lang-code {
  letter-spacing: 0.08em;
}

.lang-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--purple);
  border-bottom: 2px solid var(--purple);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

.lang-trigger[aria-expanded="true"] .lang-chevron {
  transform: translateY(2px) rotate(225deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 200px;
  max-height: 64vh;
  overflow-y: auto;
  border: 1px solid rgba(36, 25, 55, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 22px 50px rgba(65, 36, 101, 0.22),
    0 4px 10px rgba(65, 36, 101, 0.08);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.lang-menu li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 6px;
  border-radius: 12px;
  font: 700 0.94rem "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.lang-menu li:hover {
  background: rgba(106, 28, 246, 0.08);
}

.lang-menu li[aria-selected="true"] {
  background: rgba(106, 28, 246, 0.12);
  color: var(--purple);
}

.lang-menu .lang-flag {
  width: 30px;
  height: 30px;
}

body[dir="rtl"] .lang-trigger {
  padding: 4px 5px 4px 14px;
}

body[dir="rtl"] .lang-menu {
  right: auto;
  left: 0;
}

select {
  width: 148px;
  min-height: 42px;
  padding: 0 34px 0 14px;
  border: 1px solid rgba(106, 28, 246, 0.16);
  border-radius: 999px;
  appearance: none;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 24px rgba(65, 36, 101, 0.08);
  font: 800 0.88rem "Plus Jakarta Sans", Inter, sans-serif;
}

body[dir="rtl"] select {
  padding: 0 14px 0 34px;
}

.btn-3d,
.store-button {
  transform: translateY(0);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 160ms ease;
}

.btn-3d {
  display: inline-grid;
  min-height: 42px;
  place-items: center;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: var(--purple);
  box-shadow:
    0 6px 0 var(--purple-dark),
    0 16px 36px rgba(106, 28, 246, 0.24);
  font: 900 0.88rem "Plus Jakarta Sans", Inter, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.btn-3d:hover {
  background: #772aff;
}

.btn-3d:active,
.store-button:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--purple-dark), 0 8px 18px rgba(106, 28, 246, 0.16);
}

.btn-3d.light {
  color: var(--purple);
  background: #ffffff;
  box-shadow:
    0 6px 0 rgba(222, 212, 237, 0.86),
    0 16px 38px rgba(0, 0, 0, 0.14);
}

.section-pad {
  width: min(var(--max), calc(100% - 32px));
  margin-inline: auto;
  padding: 78px 0;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
  align-items: center;
  gap: clamp(42px, 7vw, 92px);
  min-height: min(760px, calc(100svh - 118px));
  padding-top: 54px;
}

.hero-copy {
  max-width: 590px;
}

/* Phone mockup removed. On DESKTOP ONLY (the 900/760/520px breakpoints below
   own the narrow layouts, so phones/tablets stay exactly as they were) let
   the hero go single-column and the headline + its typewriter word-cycle span
   wider. */
@media (min-width: 901px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: min(560px, calc(100svh - 150px));
    justify-items: center;
    text-align: center;
    padding-bottom: clamp(140px, 12vw, 200px);
  }
  .hero-copy {
    max-width: 920px;
    margin-inline: auto;
  }
  .hero h1 {
    max-width: 18ch;
    margin-inline: auto;
  }
  .hero .hero-text {
    margin-inline: auto;
  }
  .hero .store-buttons {
    justify-content: center;
    margin-top: clamp(16px, 1.9vw, 30px);
  }
}

.phone-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding-top: 0;
  padding-bottom: 0;
}

.phone-section:empty {
  display: none;
}


.fx-rise {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--fx-delay, 0ms);
  will-change: opacity, transform;
}

.fx-rise.is-revealed {
  opacity: 1;
  transform: none;
}


.hero-title-cycle {
  word-break: normal;
  overflow-wrap: normal;
}

.hero-title-cycle-slot {
  display: inline-block;
  vertical-align: baseline;
  text-align: left;
  white-space: nowrap;
  color: var(--purple);
  font-style: italic;
  /* The slot glides closed after a word is deleted and open (to the next
     word's full width) before typing begins — the only two moments the
     sentence reflows. */
  transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-title-cycle-word {
  display: inline;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title-cycle-word {
    background: linear-gradient(98deg, #6a1cf6 8%, #9b4dff 92%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Italic glyphs overhang their advance width; the gradient only paints
       inside the box, so without this the last letter's tip gets cut off. */
    padding-right: 0.1em;
    margin-right: -0.04em;
  }
}

.hero-title-cycle-caret {
  display: inline-block;
  width: 0.09em;
  min-width: 3px;
  height: 0.92em;
  margin-left: 4px;
  vertical-align: -0.12em;
  background: var(--purple);
  border-radius: 2px;
  animation: hero-caret-blink 1.05s step-end infinite;
}

/* Editors show a solid caret while typing and only blink at rest. */
.hero-title-cycle-slot.is-typing .hero-title-cycle-caret {
  animation: none;
  opacity: 1;
}

@keyframes hero-caret-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-cycle-caret { animation: none; opacity: 0.6; }
}

.hero-demo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 50;
}

.hero-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  z-index: 60;
  opacity: 0;
  transform: translate(-200px, -200px);
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease-out;
  will-change: transform, opacity;
}

.hero-cursor-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter:
    drop-shadow(0 8px 16px rgba(106, 28, 246, 0.32))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
  transform-origin: 12% 12%;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-cursor-svg path {
  fill: var(--purple);
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.hero-cursor.is-pressed .hero-cursor-svg {
  animation: hero-cursor-press 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hero-cursor-press {
  0%   { transform: scale(1);    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.22)) drop-shadow(0 2px 4px rgba(0,0,0,0.16)); }
  35%  { transform: scale(0.78); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18)) drop-shadow(0 1px 2px rgba(0,0,0,0.12)) brightness(1.12); }
  100% { transform: scale(1);    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.22)) drop-shadow(0 2px 4px rgba(0,0,0,0.16)); }
}

.hero-context-menu {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 200px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    0 18px 40px rgba(36, 25, 55, 0.22),
    0 2px 6px rgba(36, 25, 55, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(36, 25, 55, 0.06);
  font: 600 0.95rem/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
  color: #1c1525;
  z-index: 50;
  opacity: 0;
  transform: translate(-200px, -200px) scale(0.94);
  transform-origin: top left;
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease-out;
  pointer-events: none;
}

.hero-context-menu.is-open {
  opacity: 1;
}

.hero-context-item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: default;
  transition: transform 80ms ease-out, filter 80ms ease-out;
}

.hero-context-item.is-hover {
  background: var(--purple);
  color: #ffffff;
}

.hero-context-item.is-pressed {
  background: #4b10be;
  color: #ffffff;
  filter: brightness(0.85);
  transform: scale(0.97);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-context-sep {
  height: 1px;
  margin: 5px 8px;
  background: rgba(36, 25, 55, 0.1);
}

.hero-selection-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 6px;
  background: rgba(106, 28, 246, 0.28);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease-out;
  will-change: width, height, opacity;
}

.hero-selection-box.is-active {
  opacity: 1;
}

.hero-typing {
  display: inline;
  color: var(--ink);
}
.hero-typing-accent {
  display: inline;
  color: var(--purple);
  font-style: italic;
}

.hero-title-cycle.is-demo {
}

/* Description scroll-reveal phase: the demo types a long paragraph at full
   headline size into a fixed-height window, and the big cursor drags a fake
   scrollbar to reveal it all. */
.hero-title-cycle.is-demo-scroll {
  position: relative;
  max-width: none;
}
/* The emphasized word ("you") in the description: bigger + purple. */
.hero-title-cycle.is-demo-scroll .hero-typing-accent {
  font-size: 1.22em;
  font-weight: 800;
  color: var(--purple);
}
/* The brand name in the description: purple, same size. */
.hero-typing-brand {
  color: var(--purple);
  font-weight: 800;
}
/* Description words load in one by one with a calm rise. */
.hero-intro-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.34em);
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.hero-intro-word.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-intro-word { opacity: 1; transform: none; transition: none; }
}
/* Purple "select all" highlight used by the demo's delete step. */
.hero-title-cycle.is-demo ::selection {
  background: rgba(106, 28, 246, 0.30);
}
.hero-title-cycle.is-demo ::-moz-selection {
  background: rgba(106, 28, 246, 0.30);
}
.hero-demo-scrollview {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
}
/* Clips + masks only the text (the scrollbar is a sibling, so it never fades). */
.hero-demo-scrollclip {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-demo-scrollinner {
  display: block;
  padding-right: 30px;
  padding-bottom: 0.7em;
  transform: translateY(0);
  will-change: transform;
}
.hero-demo-scrolltrack {
  position: absolute;
  top: 6px;
  right: 0;
  bottom: 6px;
  width: 9px;
  border-radius: 999px;
  background: rgba(106, 28, 246, 0.12);
  z-index: 3;
}
.hero-demo-scrollthumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  border-radius: 999px;
  background: rgba(106, 28, 246, 0.55);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero-demo-overlay { display: none; }
}

@media (max-width: 600px) {
  .hero-cursor {
    width: 64px;
    height: 64px;
  }
  .hero-context-menu {
    min-width: 168px;
    font-size: 0.88rem;
  }
  .hero-context-item {
    padding: 8px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-rise,
  .fx-rise.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.hero-visual[hidden] {
  display: none !important;
}

.eyebrow,
.mini-label,
.card-kicker {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 18px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #134c5d;
  background: rgba(107, 216, 255, 0.42);
  font: 900 0.76rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  line-height: 0.98;
  letter-spacing: 0;
}

h1 {
  max-width: 11.6ch;
  font-size: clamp(3.1rem, 6.4vw, 5.85rem);
  font-weight: 900;
  overflow-wrap: normal;
  word-break: normal;
}

h1 [data-i18n="heroTitleMain"] {
  display: block;
  white-space: pre-line;
  overflow-wrap: normal;
  word-break: normal;
}

.rhythm {
  display: block;
  color: var(--purple);
  font-style: italic;
  font-size: 0.92em;
  overflow-wrap: normal;
}

.rhythm:empty {
  display: none;
}

.hero-text {
  max-width: 54ch;
  margin: 22px 0 28px;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  font-weight: 500;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 560px;
  margin-top: 22px;
}

.hero-proof span {
  padding: 8px 10px;
  border: 1px solid rgba(36, 25, 55, 0.1);
  border-radius: 999px;
  color: #332a44;
  background: rgba(255, 255, 255, 0.7);
  font: 800 0.76rem "Plus Jakarta Sans", Inter, sans-serif;
}

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
  padding-bottom: 12px;
}

:root[data-platform="ios"] #download-android,
:root[data-platform="android"] #download-ios {
  display: none;
}

.store-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 208px;
  min-height: 62px;
  padding: 0 22px;
  border-radius: 999px;
  color: #ffffff;
  background: #101014;
  box-shadow:
    0 6px 0 #000000,
    0 14px 26px rgba(0, 0, 0, 0.18);
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
}

.store-button.soft {
  color: #17131f;
  background: #e7e0eb;
  box-shadow:
    0 6px 0 #cfc3dc,
    0 14px 26px rgba(65, 36, 101, 0.12);
}

.store-button small,
.store-button strong {
  display: block;
  line-height: 1.05;
}

.store-button small {
  font-size: 0.72rem;
  font-weight: 800;
  opacity: 0.82;
}

.store-button strong {
  margin-top: 3px;
  font-size: 1.08rem;
  font-weight: 900;
}

/* Store marks are the real Apple and Google Play logos, sitting directly on
   the button the way the official badges do — no enclosing white chip. The
   Apple glyph inherits the button's ink via currentColor; the Play arrow
   keeps its own four brand colours. */
.store-icon {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  color: currentColor;
}

.store-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The Play arrow reads optically larger than the Apple glyph in an equal box,
   so it is nudged down a touch to make the two marks look the same weight. */
.store-icon.play {
  width: 25px;
  height: 25px;
}

/* ---------------------------------------------------------------------------
   Intro film — a plain YouTube player. Its own controls, nothing layered over
   it, white all around. The only styling here is the size and the 16:9 box.
--------------------------------------------------------------------------- */
/* No background of its own — the body's gradient has to run straight through,
   or the section reads as a lighter band cut out of the page. */
.filmstrip {
  padding: clamp(10px, 4vw, 54px) 0 clamp(16px, 5vw, 72px);
}

.filmstrip-frame {
  position: relative;
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

/* YT.Player swaps the mount div for an iframe that keeps this id. */
#introFilmMount {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.locked-download {
  position: relative;
}

.btn-3d.locked-download,
.btn-3d.locked-download:hover {
  min-width: 182px;
  color: #ffffff;
  background: #85838a;
  box-shadow:
    0 6px 0 #5f5d64,
    0 16px 34px rgba(25, 23, 31, 0.16);
}

.btn-3d.locked-download:active,
.store-button.locked-download:active {
  transform: translateY(7px);
  box-shadow:
    0 1px 0 #3b0d8f,
    0 8px 18px rgba(106, 28, 246, 0.18);
}

.store-button.locked-download,
.store-button.soft.locked-download {
  color: #ffffff;
  background: linear-gradient(155deg, #6a1cf6 0%, #4b10be 100%);
  box-shadow:
    0 8px 0 #3b0d8f,
    0 18px 28px rgba(106, 28, 246, 0.22);
}

.locked-download > :not(.curtain-label) {
  opacity: 0;
  filter: grayscale(1);
}

.curtain-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 18px;
  color: #ffffff;
  background: transparent;
  text-align: center;
  text-transform: uppercase;
  font: 900 0.72rem/1.12 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.06em;
  pointer-events: none;
}

.header-curtain {
  gap: 2px;
  line-height: 1;
}

.header-curtain b,
.header-curtain small {
  display: block;
}

.header-curtain b {
  font-size: 0.76rem;
}

.header-curtain small {
  font-size: 0.54rem;
}

.hero-visual {
  display: grid;
  place-items: center;
  width: 100%;
  overflow: visible;
}

.phone-stage {
  position: relative;
  display: grid;
  /* reserve the up-scaled phone footprint: 330 * 1.33 ≈ 439px wide */
  width: min(100%, 460px);
  min-height: 868px;
  place-items: center;
}

.phone-card {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.phone-shell {
  position: relative;
  width: 330px;
  min-height: 646px;
  /* scale the whole frame (and its content) up on desktop: 330 -> ~439px */
  transform: scale(1.33);
  transform-origin: center center;
  overflow: hidden;
  padding: 56px 16px 16px;
  border: 9px solid #1c1c1e;
  border-radius: 52px;
  color: var(--ink);
  background: #ffffff;
  box-shadow:
    0 34px 70px rgba(25, 23, 31, 0.24),
    0 6px 0 rgba(0, 0, 0, 0.18),
    inset 0 0 0 2px rgba(255, 255, 255, 0.65),
    inset 0 0 0 3px rgba(0, 0, 0, 0.18);
}

.phone-island {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 108px;
  height: 30px;
  border-radius: 999px;
  background: #0a0a0c;
  transform: translateX(-50%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.phone-island::before,
.phone-island::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a2a2e 0%, #0a0a0c 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(-50%);
}

.phone-island::before {
  left: 14px;
}

.phone-island::after {
  right: 14px;
  width: 5px;
  height: 5px;
  background: radial-gradient(circle at 35% 30%, #1f1f23 0%, #050507 60%);
}

.phone-status {
  display: flex;
  justify-content: space-between;
  color: rgba(25, 23, 31, 0.58);
  font-size: 0.66rem;
  font-weight: 800;
}

.demo-screen {
  display: flex;
  flex-direction: column;
  min-height: 604px;
  gap: 10px;
  padding-top: 4px;
}

.demo-top {
  display: block;
  padding: 2px 2px 4px;
}

.demo-close {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--purple);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(65, 36, 101, 0.08);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
}

.demo-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(36, 25, 55, 0.08);
}

.demo-progress span {
  display: block;
  width: 5%;
  height: 100%;
  border-radius: inherit;
  background: #ff7132;
  transition: width 180ms ease;
}

.demo-energy {
  display: inline-grid;
  min-width: 38px;
  min-height: 28px;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #6a4300;
  background: #fff1b9;
  font-size: 0.74rem;
  font-weight: 900;
}

.demo-content-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 24px;
  color: var(--ink);
  background: #ffffff;
  box-shadow:
    0 6px 20px rgba(37, 35, 45, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.86) inset;
}

.demo-cover {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 90% 70% at 80% -10%, rgba(255, 134, 64, 0.45) 0%, transparent 60%),
    linear-gradient(155deg, #5b15de 0%, #2d0879 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 10px rgba(45, 8, 121, 0.28);
}

.demo-cover strong {
  color: #ffffff;
  font: 900 0.86rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.demo-content-card strong,
.demo-content-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-content-card strong {
  font: 900 0.86rem "Plus Jakarta Sans", Inter, sans-serif;
}

.demo-content-card small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.demo-play {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  color: #ff6a00;
  background: #ffe2d6;
  font-size: 1rem;
  font-weight: 900;
}

.demo-picker {
  display: grid;
  gap: 5px;
  color: #6d6578;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-picker select {
  width: 100%;
  min-height: 34px;
  padding-inline: 12px 28px;
  border-color: #d9d2e5;
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 6px 0 #ded8e8;
  font-size: 0.76rem;
}

.demo-picker option {
  color: var(--ink);
}


.demo-course-picker {
  position: relative;
}

.demo-course-trigger {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px 10px 10px;
  border: 1px solid rgba(36, 25, 55, 0.08);
  border-radius: 22px;
  color: var(--ink);
  background: #ffffff;
  box-shadow:
    0 6px 0 #ded8e8,
    0 1px 0 rgba(255, 255, 255, 0.86) inset;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  text-align: left;
  font: inherit;
}

.demo-course-trigger:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #ded8e8, 0 1px 0 rgba(255, 255, 255, 0.86) inset;
}

.demo-course-flag {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(106, 28, 246, 0.08);
  flex-shrink: 0;
}

.demo-course-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.demo-course-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.demo-course-label {
  color: #6d6578;
  font: 900 0.6rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-course-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font: 900 0.86rem "Plus Jakarta Sans", Inter, sans-serif;
}

.demo-course-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--purple);
  border-bottom: 2px solid var(--purple);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms ease;
  justify-self: center;
}

.demo-course-trigger[aria-expanded="true"] .demo-course-chevron {
  transform: translateY(2px) rotate(225deg);
}

.demo-course-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 268px;
  overflow-y: auto;
  border: 1px solid rgba(36, 25, 55, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 38px rgba(20, 8, 42, 0.18);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.demo-course-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 6px;
  border-radius: 12px;
  font: 800 0.78rem "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.demo-course-menu li:hover {
  background: rgba(106, 28, 246, 0.08);
}

.demo-course-menu li[aria-selected="true"] {
  background: rgba(106, 28, 246, 0.12);
  color: var(--purple);
}

.demo-course-menu .demo-course-flag {
  width: 26px;
  height: 26px;
}

.demo-copy {
  color: var(--ink);
}

.demo-copy span {
  display: block;
  color: #ef3e35;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.demo-copy h2 {
  margin-top: 4px;
  font-size: 1.08rem;
  line-height: 1.1;
  letter-spacing: 0;
}

.demo-question-area {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 12px;
  min-height: 250px;
}

.demo-meaning-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 3px solid #ff7132;
  border-radius: 24px;
  color: #ff7132;
  background: rgba(255, 246, 240, 0.92);
  text-align: center;
}

.demo-meaning-card span,
.demo-word-bank > span,
.demo-fill-hint {
  color: rgba(25, 23, 31, 0.62);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.demo-meaning-card strong {
  font: 900 1.6rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0;
}

.demo-text-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 13px;
  padding: 18px 14px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(25, 23, 31, 0.08);
}

.demo-word-tap {
  border: 0;
  color: #444148;
  background: transparent;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
  font: 900 1.18rem/1.15 "Plus Jakarta Sans", Inter, sans-serif;
}

.demo-word-tap.is-selected,
.demo-highlight-word {
  color: var(--purple);
}

.demo-word-tap.is-correct,
.demo-bank-chip.is-correct,
.demo-option.is-correct {
  border-color: #2f8f6a;
  background: #ebf8f1;
}

.demo-word-tap.is-wrong,
.demo-bank-chip.is-wrong,
.demo-option.is-wrong {
  border-color: #e63b2e;
  background: #fff0ee;
}

.demo-highlight-word {
  padding: 17px 14px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(25, 23, 31, 0.08);
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
  font: 900 2.15rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0;
}

.demo-fill-panel {
  padding: 18px 14px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(25, 23, 31, 0.08);
  text-align: center;
}

.demo-fill-hint {
  margin: 0 0 12px;
  color: var(--purple);
  font-style: italic;
  text-transform: uppercase;
}

.demo-fill-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #242128;
  font: 900 1rem/1.15 "Plus Jakarta Sans", Inter, sans-serif;
}

.demo-fill-blank {
  display: inline-grid;
  min-width: 72px;
  min-height: 38px;
  place-items: center;
  padding: 0 12px;
  border: 2px solid #dedede;
  border-radius: 999px;
  color: #a8a8a8;
  background: #eeeeee;
}

.demo-fill-blank.is-correct {
  color: #216d4e;
  border-color: #2f8f6a;
  background: #ebf8f1;
}

.demo-fill-blank.is-wrong {
  color: #b92d23;
  border-color: #e63b2e;
  background: #fff0ee;
}

.demo-word-bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.demo-word-bank > span {
  flex: 0 0 100%;
  text-align: center;
}

.demo-bank-chip {
  min-height: 38px;
  padding: 0 15px;
  border: 2px solid transparent;
  border-radius: 999px;
  color: #16131b;
  background: #ff7132;
  font: 900 0.8rem "Plus Jakarta Sans", Inter, sans-serif;
}

.demo-bank-chip.is-selected {
  color: #ffffff;
  background: var(--purple);
}

.demo-option-list {
  display: grid;
  gap: 10px;
}

.demo-prompt-card p {
  margin: 0;
  font: 900 1rem/1.18 "Plus Jakarta Sans", Inter, sans-serif;
}

.demo-prompt-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.demo-options {
  display: grid;
  gap: 8px;
}

.demo-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  padding: 10px 14px;
  border: 2px solid transparent;
  border-radius: 24px;
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(25, 23, 31, 0.07);
  text-align: start;
  font: 800 0.82rem "Plus Jakarta Sans", Inter, sans-serif;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.demo-option:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
}

.demo-option b {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #ff8d62;
  background: transparent;
  font-size: 0.7rem;
}

.demo-option.is-selected {
  border-color: var(--purple);
  background: #f3edff;
}

.demo-option.is-correct {
  border-color: #2f8f6a;
  background: #e9f7f0;
}

.demo-option.is-wrong {
  border-color: #e63b2e;
  background: #fff0ee;
}

.demo-feedback {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.demo-feedback.is-correct {
  color: #216d4e;
}

.demo-feedback.is-wrong {
  color: #b92d23;
}

.demo-action {
  width: 100%;
  min-height: 46px;
  margin-top: auto;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: #ff7132;
  box-shadow: 0 5px 0 #b8501e;
  font: 900 0.92rem "Plus Jakarta Sans", Inter, sans-serif;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    opacity 150ms ease;
}

.demo-action:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #b8501e;
}

.demo-action:disabled {
  color: rgba(25, 23, 31, 0.62);
  background: #e9b89f;
  box-shadow: 0 5px 0 #d59a7c;
  opacity: 1;
}

.demo-complete-card {
  display: grid;
  gap: 10px;
  place-items: center;
  min-height: 210px;
  padding: 22px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(25, 23, 31, 0.08);
  text-align: center;
}

.demo-complete-card strong {
  color: var(--purple);
  font: 900 3rem/1 "Plus Jakarta Sans", Inter, sans-serif;
}

.demo-complete-card span {
  color: var(--muted);
  font-weight: 800;
}

body.modal-open {
  overflow: hidden;
}

.testflight-modal[hidden] {
  display: none;
}

.testflight-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}

.testflight-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 20, 0.54);
  backdrop-filter: blur(8px);
}

.testflight-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(25, 23, 31, 0.28);
}

.testflight-dialog .mini-label {
  margin-bottom: 14px;
}

.testflight-dialog h2 {
  padding-right: 34px;
  font-size: 1.65rem;
  line-height: 1.08;
}

body[dir="rtl"] .testflight-dialog h2 {
  padding-right: 0;
  padding-left: 34px;
}

.testflight-dialog p:not(.mini-label):not(.testflight-status) {
  margin: 12px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--purple);
  background: #f3edff;
  font-size: 1.2rem;
  font-weight: 900;
}

body[dir="rtl"] .modal-close {
  right: auto;
  left: 14px;
}

.testflight-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}


.testflight-view[hidden] {
  display: none;
}


.patreon-benefits {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.patreon-benefits li {
  position: relative;
  padding-left: 32px;
  color: var(--ink);
  font: 600 0.96rem/1.4 Inter, sans-serif;
}

.patreon-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6a1cf6 0%, #4b10be 100%);
  color: #ffffff;
  font: 900 12px/1 "Plus Jakarta Sans", Inter, sans-serif;
  box-shadow:
    0 2px 0 #3b0d8f,
    0 4px 12px rgba(106, 28, 246, 0.25);
}

body[dir="rtl"] .patreon-benefits li {
  padding-left: 0;
  padding-right: 32px;
}
body[dir="rtl"] .patreon-benefits li::before {
  left: auto;
  right: 0;
}

.patreon-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 0 28px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(155deg, #6a1cf6 0%, #4b10be 100%);
  box-shadow:
    0 8px 0 #3b0d8f,
    0 18px 28px rgba(106, 28, 246, 0.24);
  font: 900 1rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background 160ms ease;
}

.patreon-cta:hover {
  background: linear-gradient(155deg, #7a2dff 0%, #5818d6 100%);
}

.patreon-cta:active {
  transform: translateY(6px);
  box-shadow:
    0 1px 0 #3b0d8f,
    0 8px 18px rgba(106, 28, 246, 0.2);
}

.patreon-cta-arrow {
  font-size: 1.2rem;
  font-weight: 900;
  transition: transform 200ms ease;
}

.patreon-cta:hover .patreon-cta-arrow {
  transform: translateX(3px);
}

body[dir="rtl"] .patreon-cta-arrow {
  transform: scaleX(-1);
}
body[dir="rtl"] .patreon-cta:hover .patreon-cta-arrow {
  transform: scaleX(-1) translateX(3px);
}

.patreon-alt-link,
.testflight-back-link {
  display: block;
  width: 100%;
  margin: 18px 0 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 700 0.92rem/1.4 Inter, sans-serif;
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 160ms ease;
}

.patreon-alt-link:hover,
.testflight-back-link:hover {
  color: var(--purple);
}

.testflight-back-link {
  margin: 6px 0 18px;
  font-size: 0.86rem;
  text-decoration: none;
}

.testflight-form label {
  color: #332a44;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.testflight-form input[type="email"],
.testflight-form input[type="text"] {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(106, 28, 246, 0.2);
  border-radius: 16px;
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(65, 36, 101, 0.08);
  font: 800 0.95rem Inter, sans-serif;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.testflight-form input[type="email"]::placeholder,
.testflight-form input[type="text"]::placeholder {
  color: rgba(36, 25, 55, 0.45);
  font-weight: 600;
}

.testflight-form input[type="email"]:focus,
.testflight-form input[type="text"]:focus {
  border-color: rgba(106, 28, 246, 0.55);
  box-shadow:
    0 8px 20px rgba(65, 36, 101, 0.08),
    0 0 0 4px rgba(106, 28, 246, 0.14);
}

.testflight-form textarea {
  width: 100%;
  min-height: 88px;
  padding: 14px;
  border: 1px solid rgba(106, 28, 246, 0.2);
  border-radius: 16px;
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(65, 36, 101, 0.08);
  font: 600 0.95rem/1.45 Inter, sans-serif;
  resize: vertical;
  font-family: Inter, sans-serif;
}

.testflight-form textarea::placeholder {
  color: #9089a0;
  font-weight: 600;
}

.testflight-form .demo-action {
  margin-top: 2px;
}

.testflight-consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(36, 25, 55, 0.10);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--muted);
  font: 600 0.85rem/1.45 Inter, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}
.testflight-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--purple);
  cursor: pointer;
}
.testflight-consent-text {
  display: block;
  color: #2c2536;
}
.testflight-consent-text a {
  color: var(--purple);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.testflight-consent-text a:hover {
  color: var(--purple-dark);
}


.puzzle-captcha {
  display: grid;
  gap: 8px;
  margin: 4px 0 2px;
  user-select: none;
  -webkit-user-select: none;
}

.puzzle-board {
  position: relative;
  width: 100%;
  height: 78px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 90% 70% at 80% -10%, rgba(255, 134, 64, 0.32) 0%, transparent 60%),
    linear-gradient(155deg, #5b15de 0%, #2d0879 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 6px 14px rgba(45, 8, 121, 0.18);
  overflow: hidden;
  touch-action: none;
}

.puzzle-target {
  position: absolute;
  top: 50%;
  left: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  outline: 2px dashed rgba(255, 255, 255, 0.55);
  outline-offset: -2px;
  transform: translate(0, -50%);
  pointer-events: none;
  transition: opacity 200ms ease;
}

.puzzle-target img {
  width: 32px;
  height: 32px;
  opacity: 0.42;
  filter: brightness(2.2) saturate(0);
}

.puzzle-piece {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    0 8px 18px rgba(20, 8, 42, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
  cursor: grab;
  transform: translate(0, -50%);
  transition: box-shadow 140ms ease;
  touch-action: none;
}

.puzzle-piece:active,
.puzzle-piece[aria-grabbed="true"] {
  cursor: grabbing;
  box-shadow:
    0 12px 22px rgba(20, 8, 42, 0.42),
    0 0 0 3px rgba(255, 134, 64, 0.45);
}

.puzzle-piece img {
  width: 36px;
  height: 36px;
  pointer-events: none;
  -webkit-user-drag: none;
}

.puzzle-success-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2f8f6a;
  color: #ffffff;
  font: 900 0.92rem "Plus Jakarta Sans", Inter, sans-serif;
  transform: translate(0, -50%) scale(0.6);
  opacity: 0;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.puzzle-hint {
  margin: 0;
  color: var(--muted);
  font: 700 0.78rem "Plus Jakarta Sans", Inter, sans-serif;
  text-align: center;
  letter-spacing: 0.01em;
}

.puzzle-captcha[data-state="solved"] .puzzle-board {
  background:
    radial-gradient(ellipse 90% 70% at 30% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 60%),
    linear-gradient(155deg, #2f8f6a 0%, #196b4d 100%);
}

.puzzle-captcha[data-state="solved"] .puzzle-target {
  opacity: 0;
}

.puzzle-captcha[data-state="solved"] .puzzle-piece {
  cursor: default;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22), 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.puzzle-captcha[data-state="solved"] .puzzle-success-icon {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}

.puzzle-captcha[data-state="solved"] .puzzle-hint {
  color: #196b4d;
}

.puzzle-captcha[data-state="missed"] .puzzle-piece {
  animation: puzzle-wobble 280ms ease-out;
}

@keyframes puzzle-wobble {
  0%   { transform: translate(var(--puzzle-x, 0px), -50%) rotate(0deg); }
  25%  { transform: translate(calc(var(--puzzle-x, 0px) - 4px), -50%) rotate(-3deg); }
  75%  { transform: translate(calc(var(--puzzle-x, 0px) + 4px), -50%) rotate(3deg); }
  100% { transform: translate(0px, -50%) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .puzzle-piece,
  .puzzle-success-icon,
  .puzzle-target {
    transition: none !important;
  }
  .puzzle-captcha[data-state="missed"] .puzzle-piece {
    animation: none !important;
  }
}

.testflight-status {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.testflight-status.is-success {
  color: #216d4e;
}

.testflight-status.is-error {
  color: #b92d23;
}

.lesson-screen {
  display: grid;
  gap: 16px;
  padding-top: 46px;
}

.screen-pill {
  justify-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  color: #2ff2ff;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.lesson-screen h2 {
  font-size: 1.78rem;
  line-height: 1.05;
  letter-spacing: 0;
}

.waveform,
.bars,
.equalizer {
  display: flex;
  align-items: center;
  gap: 5px;
}

.waveform span {
  width: 7px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff3fd4, #2ff2ff);
}

.waveform span:nth-child(2n) {
  height: 72px;
}

.waveform span:nth-child(3n) {
  height: 54px;
}

.lesson-screen p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
}

mark {
  padding: 2px 5px;
  border-radius: 7px;
  color: #101014;
  background: #ffd327;
}

.quiz-row {
  display: flex;
  gap: 8px;
}

.quiz-row button {
  flex: 1;
  min-height: 35px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  font-weight: 800;
}

.phone-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.phone-nav span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
}

.phone-nav span:first-child {
  width: 34px;
  background: #ffffff;
}

.accuracy-card {
  position: absolute;
  right: -54px;
  bottom: 88px;
  width: 174px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
  pointer-events: none;
}

.accuracy-card span,
.accuracy-card small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.accuracy-card span {
  color: var(--purple);
  letter-spacing: 0.08em;
}

.accuracy-card strong {
  display: block;
  margin: 4px 0;
  font: 900 1.2rem "Plus Jakarta Sans", Inter, sans-serif;
}

.how {
  width: 100%;
  max-width: none;
  padding-inline: max(18px, calc((100vw - var(--max)) / 2));
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.54) 0 1px, transparent 1px 100%),
    rgba(234, 228, 239, 0.72);
  background-size: 88px 100%, auto;
}

.section-heading {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.mini-label {
  color: var(--purple);
  background: rgba(106, 28, 246, 0.08);
}

.section-heading h2,
.feature-intro h2,
.cta-panel h2 {
  font-size: clamp(2.1rem, 4vw, 3.6rem);
}

.section-heading p:not(.mini-label),
.feature-intro p,
.cta-panel p,
.shelf-card p,
.quiz-card p,
.levels-card p {
  color: var(--muted);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--max);
  margin: 0 auto;
}

.shelf-card,
.quiz-card,
.levels-card {
  border-radius: 28px;
}

.shelf-card {
  padding: 28px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 7px 0 rgba(214, 203, 226, 0.9),
    0 18px 42px rgba(65, 36, 101, 0.08);
}

.shelf-card h3,
.quiz-card h3,
.levels-card h3 {
  margin: 18px 0 10px;
  font-size: 1.28rem;
  line-height: 1.12;
}

.shelf-card p,
.quiz-card p,
.levels-card p {
  margin: 0;
  font-size: 0.94rem;
}

.feature-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 999px;
  color: #111018;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 10px rgba(36, 25, 55, 0.06);
}

.feature-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

.cyan {
  background: var(--cyan);
}

.purple {
  color: var(--purple);
  background: #eee5ff;
}

.yellow {
  background: var(--yellow);
}

.orange {
  color: #ffffff;
  background: #ff7132;
}

.beige {
  background: #efe5d1;
}

.feature-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 42px;
}

.feature-intro p {
  max-width: 660px;
  margin: 16px 0 0;
}


.equalizer span,
.bars span {
  display: block;
  width: 6px;
  border-radius: 999px;
  background: var(--purple);
}

.equalizer span {
  height: 32px;
  opacity: 0.26;
}

.equalizer span:nth-child(2),
.bars span:nth-child(2) {
  height: 52px;
}

.equalizer span:nth-child(3),
.bars span:nth-child(3) {
  height: 42px;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.7fr 1.45fr;
  align-items: stretch;
  gap: 24px;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.product-card .practice-stack,
.product-card .word-table,
.product-card .level-preview,
.product-card .rights-mini {
  margin-top: auto;
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.72);
  pointer-events: none;
}

.practice-stack {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.practice-stack span {
  display: block;
  padding: 12px 14px;
  border: 1px solid rgba(36, 25, 55, 0.1);
  border-radius: 14px;
  color: #241c31;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 8px 18px rgba(65, 36, 101, 0.06);
  font: 900 0.86rem "Plus Jakarta Sans", Inter, sans-serif;
}

.app-metric small {
  line-height: 1.25;
}


.create-lesson {
  width: min(var(--max), calc(100% - 32px));
  margin-inline: auto;
  padding: 56px 0;
}

.create-lesson-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 44px;
  align-items: center;
  padding: 40px 44px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 22px 48px rgba(65, 36, 101, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.create-lesson-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55), transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(106, 28, 246, 0.07), transparent 28%);
}

.create-lesson-card > * {
  position: relative;
  z-index: 1;
}

.create-lesson-copy .feature-icon {
  margin-bottom: 18px;
}

.create-lesson-copy .card-kicker {
  margin: 0 0 14px;
}

.create-lesson-copy h2 {
  margin: 0 0 12px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 900;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

.create-lesson-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  max-width: 46ch;
}

.create-lesson-mock {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cl-input {
  display: flex;
}

.cl-input textarea {
  width: 100%;
  min-height: 168px;
  padding: 18px 20px;
  resize: none;
  border: 1px solid rgba(36, 25, 55, 0.12);
  border-radius: 20px;
  color: #5f566a;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    inset 0 2px 0 rgba(214, 203, 226, 0.7),
    0 6px 18px rgba(65, 36, 101, 0.04);
  font: 700 0.96rem/1.5 Inter, sans-serif;
}

.cl-confirm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(36, 25, 55, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.cl-confirm input {
  width: 18px;
  height: 18px;
  accent-color: var(--purple);
}

.cl-cta {
  display: inline-grid;
  place-items: center;
  width: 100%;
  min-height: 56px;
  margin-top: 4px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: var(--purple);
  box-shadow:
    0 6px 0 var(--purple-dark),
    0 18px 32px rgba(106, 28, 246, 0.22);
  font: 900 1rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 120ms ease, box-shadow 120ms ease, background 160ms ease;
}

.cl-cta:hover {
  background: #772aff;
  text-decoration: none;
}

.cl-cta:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 var(--purple-dark),
    0 8px 18px rgba(106, 28, 246, 0.18);
}

.cl-cta.is-disabled,
.cl-cta[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  background: #b5a3e3;
  box-shadow:
    0 6px 0 #8d7ec1,
    0 14px 24px rgba(106, 28, 246, 0.12);
}

.cl-cta.is-disabled:hover,
.cl-cta[aria-disabled="true"]:hover {
  background: #b5a3e3;
}



.nav-links.nav-app a {
  position: relative;
}

.nav-links.nav-app a.is-active {
  color: var(--purple);
  border-bottom-color: var(--purple);
}

.hero-visual-app {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-add-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 28px 30px 30px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 22px 50px rgba(65, 36, 101, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.hero-add-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.45), transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(106, 28, 246, 0.07), transparent 28%);
}

.hero-add-card > * {
  position: relative;
  z-index: 1;
}

.hero-add-card h2 {
  margin: 0 0 8px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.hero-add-card .card-kicker {
  margin: 0 0 12px;
  background: rgba(107, 216, 255, 0.42);
  color: #134c5d;
}

.hero-add-card .hero-add-lede {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.5;
}

.hero-add-card .login-form {
  display: grid;
  gap: 16px;
}

.hero-add-card .login-field {
  display: grid;
  gap: 8px;
}

.hero-add-card .login-field span {
  color: var(--muted);
  font: 800 0.72rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-add-card .login-error {
  margin: 4px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(239, 68, 68, 0.32);
  border-radius: 12px;
  color: #b91c1c;
  background: rgba(254, 226, 226, 0.7);
  font-size: 0.88rem;
  font-weight: 700;
}

.hero-add-card .login-success-msg {
  margin: 4px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(34, 197, 94, 0.32);
  border-radius: 12px;
  color: #15803d;
  background: rgba(220, 252, 231, 0.7);
  font-size: 0.88rem;
  font-weight: 700;
}

.hero-add-card textarea {
  width: 100%;
  min-height: 140px;
  padding: 14px 16px;
  resize: vertical;
  border: 1px solid rgba(36, 25, 55, 0.14);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 2px 0 rgba(214, 203, 226, 0.55);
  font: 600 0.94rem/1.5 Inter, sans-serif;
  outline: none;
}

.hero-add-card textarea:focus {
  border-color: rgba(106, 28, 246, 0.45);
  box-shadow:
    inset 0 2px 0 rgba(214, 203, 226, 0.55),
    0 0 0 4px rgba(106, 28, 246, 0.16);
}

.hero-add-card select {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(36, 25, 55, 0.14);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 2px 0 rgba(214, 203, 226, 0.55);
  font: 700 0.94rem Inter, sans-serif;
  outline: none;
}

.hero-add-card .login-field input {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(36, 25, 55, 0.14);
  border-radius: 14px;
  font: 600 0.94rem Inter, sans-serif;
}

.hero-add-card .btn-3d {
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
}

@media (max-width: 760px) {
  .create-lesson-card {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 28px 22px;
  }
  .create-lesson-copy p {
    max-width: 100%;
  }

  .hero-title-cycle .hero-title-suffix {
    display: block;
  }
}


.transform-stage {
  --card-w: 280px;
  --card-h: 220px;
  --gap: 28px;
  --duration: 32s;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin: 12px calc(50% - 50vw) 0;
  height: 360px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
}

.transform-stage::before {
  display: none;
}

.transform-half {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.transform-half-raw   { clip-path: inset(0 50% 0 0); }
.transform-half-final { clip-path: inset(0 0 0 50%); }

.transform-track {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  gap: var(--gap);
  padding: 0 var(--gap);
  transform: translate3d(0, -50%, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  animation: convey var(--duration) linear infinite;
  will-change: transform;
}

@keyframes convey {
  from { transform: translate3d(calc(-5 * (var(--card-w) + var(--gap))), -50%, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}

.transform-card {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: var(--card-h);
  padding: 18px 22px;
  border-radius: 22px;
  font: 600 0.82rem/1.45 Inter, sans-serif;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.transform-card .transform-tag {
  display: inline-flex;
  margin: 0 0 14px;
  padding: 5px 11px;
  border-radius: 999px;
  font: 900 0.62rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


.transform-card-plain {
  background:
    linear-gradient(180deg, rgba(247, 244, 252, 0.96) 0%, rgba(232, 226, 244, 0.92) 100%);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 20px rgba(36, 25, 55, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.transform-card-plain .transform-tag {
  color: #4d435e;
  background: rgba(36, 25, 55, 0.08);
}

.transform-card-plain .raw-quote {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
}

.transform-card-plain .raw-sub {
  margin: 0;
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
  font-style: italic;
}


.chat-bubble {
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 16px 16px 16px 4px;
  background: rgba(106, 28, 246, 0.1);
  font: 600 0.92rem/1.4 Inter, sans-serif;
  color: #4b10be;
}


.transform-card-course {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid rgba(36, 25, 55, 0.08);
  box-shadow:
    0 8px 20px rgba(36, 25, 55, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  text-shadow: none;
  justify-content: flex-start;
}

.course-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 14px;
}

.course-pair {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(106, 28, 246, 0.1);
  color: var(--purple);
  font: 900 0.66rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.1em;
}

.course-level {
  padding: 5px 11px;
  border-radius: 999px;
  background: #ff7132;
  color: #ffffff;
  font: 900 0.62rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.12em;
}

.course-title {
  margin: 0 0 6px;
  font: 900 1.42rem/1.1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.course-subtitle {
  margin: 0;
  font: 600 0.88rem/1.4 Inter, sans-serif;
  color: var(--muted);
}

.course-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.course-progress {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(36, 25, 55, 0.08);
  overflow: hidden;
}

.course-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: #ff7132;
}

.course-pct {
  font: 800 0.78rem "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--ink);
  letter-spacing: -0.01em;
}


.course-vocab .vocab-word {
  margin: 6px 0 2px;
  font: 900 1.55rem/1.05 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.course-vocab .vocab-meaning {
  margin: 0 0 12px;
  font: 700 0.95rem Inter, sans-serif;
  color: #ff7132;
}

.course-vocab .vocab-example {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(36, 25, 55, 0.05);
  font: 600 0.84rem/1.4 Inter, sans-serif;
  font-style: italic;
  color: var(--muted);
}


.course-quiz .quiz-prompt {
  margin: 4px 0 10px;
  font: 800 1.02rem/1.25 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.course-quiz .quiz-prompt em {
  font-style: italic;
  color: var(--purple);
}

.course-quiz .quiz-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.course-quiz .quiz-options li {
  position: relative;
  padding: 8px 12px 8px 32px;
  border-radius: 11px;
  background: rgba(36, 25, 55, 0.05);
  font: 700 0.84rem Inter, sans-serif;
  color: var(--ink);
}

.course-quiz .quiz-options li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 1.5px solid rgba(36, 25, 55, 0.28);
  border-radius: 50%;
  background: #ffffff;
  transform: translateY(-50%);
}

.course-quiz .quiz-options li.is-correct {
  background: rgba(255, 113, 50, 0.13);
  color: #ff7132;
}

.course-quiz .quiz-options li.is-correct::before {
  border-color: #ff7132;
  background:
    radial-gradient(circle, #ff7132 50%, transparent 52%),
    #ffffff;
}


.course-translate .trans-source,
.course-translate .trans-target {
  margin: 0;
  padding: 11px 13px;
  border-radius: 13px;
  font: 700 0.92rem/1.35 Inter, sans-serif;
}

.course-translate .trans-source {
  margin-top: 6px;
  margin-bottom: 28px;
  background: rgba(106, 28, 246, 0.09);
  color: var(--purple);
  position: relative;
}

.course-translate .trans-source::after {
  content: "→";
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translate(-50%, 50%) rotate(90deg);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ff7132;
  color: #ffffff;
  font: 900 0.78rem "Plus Jakarta Sans", sans-serif;
  z-index: 1;
}

.course-translate .trans-target {
  background: rgba(255, 113, 50, 0.09);
  color: var(--ink);
}


.course-lyric .lyric-line {
  margin: 6px 0 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(106, 28, 246, 0.09);
  font: 800 1.05rem/1.3 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.005em;
  color: var(--purple);
}

.course-lyric .lyric-meaning {
  margin: 0 0 10px;
  font: 700 0.86rem/1.4 Inter, sans-serif;
  color: var(--ink);
}

.course-lyric .lyric-source {
  margin: auto 0 0;
  font: 700 0.74rem Inter, sans-serif;
  color: #ff7132;
  letter-spacing: 0.02em;
}


.transform-bloom {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 90px;
  background: linear-gradient(90deg,
    rgba(255, 134, 64, 0.22) 0%,
    rgba(106, 28, 246, 0.14) 30%,
    transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  filter: blur(10px);
  z-index: 4;
  pointer-events: none;
  animation: gate-pulse 3.4s ease-in-out infinite;
}

.transform-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(106, 28, 246, 0.3) 14%,
    rgba(106, 28, 246, 0.65) 50%,
    rgba(106, 28, 246, 0.3) 86%,
    transparent 100%);
  z-index: 6;
  pointer-events: none;
}

@keyframes gate-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

.transform-spark {
  position: absolute;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ff7132;
  box-shadow:
    0 0 4px rgba(255, 113, 50, 0.5),
    0 0 9px rgba(255, 113, 50, 0.35),
    0 0 14px rgba(255, 211, 39, 0.2);
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  animation: spark-fly 2.6s ease-out infinite;
}

.transform-spark-1 { top: 14%; animation-delay: 0s;    --sx:  44px;  }
.transform-spark-2 { top: 22%; animation-delay: 0.4s;  --sx:  78px;  }
.transform-spark-3 { top: 38%; animation-delay: 0.8s;  --sx:  56px;  }
.transform-spark-4 { top: 48%; animation-delay: 1.2s;  --sx:  92px;  }
.transform-spark-5 { top: 58%; animation-delay: 1.6s;  --sx:  62px;  }
.transform-spark-6 { top: 70%; animation-delay: 2.0s;  --sx:  104px; }
.transform-spark-7 { top: 80%; animation-delay: 0.2s;  --sx:  50px;  }
.transform-spark-8 { top: 86%; animation-delay: 1.4s;  --sx:  82px;  }
.transform-spark-5,
.transform-spark-6 { width: 4px; height: 4px; }

@keyframes spark-fly {
  0%   { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--sx, 60px)), -6px) scale(0.9); opacity: 0; }
}


@media (max-width: 860px) {
  .transform-stage {
    --card-w: 240px;
    --card-h: 200px;
    --gap: 22px;
    height: 310px;
    border-radius: 28px;
  }
  .transform-card { padding: 16px 18px; }
  .course-title { font-size: 1.18rem; }
}

@media (max-width: 760px) {
  .hero-text {
    display: none;
  }


  .phone-section {
    padding-top: 0;
    padding-bottom: 56px;
  }

  .transform .section-heading {
    display: none;
  }

  .transform.section-pad {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 32px 0 32px;
  }

  .transform-stage {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }
}

@media (max-width: 560px) {
  .transform-stage {
    --card-w: 210px;
    --card-h: 196px;
    --gap: 18px;
    --duration: 26s;
    height: 290px;
  }
  .course-title { font-size: 1.06rem; }
  .transform-card-plain .raw-quote { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .transform-track,
  .transform-bloom,
  .transform-spark {
    animation: none !important;
  }
  .transform-spark { display: none; }
}


/* ── QuackPath Plus ───────────────────────────────────────────────────────
   Full-bleed benefit board. Six hero tiles carry the headline benefits with
   their explanation always readable; six quiet chips name the rest; one
   yellow link ends the spread. Pointing at a tile lights it up: it lifts, a
   cursor-following gradient edge springs to the pointer, the flat accent blob
   blooms, the icon chip fills and the rule doubles.

   Nothing here rotates, orbits or circles anything. No decorative element is
   a circle. The old ring / halo / disc / three-sparks planet is deleted, not
   restyled. */

.plus-section {
  --plus-ink-soft: rgba(255, 255, 255, 0.88);
  --plus-face: linear-gradient(158deg, rgba(54, 18, 120, 0.88) 0%, rgba(33, 8, 84, 0.92) 100%);
  --plus-face-live: linear-gradient(158deg, rgba(62, 22, 134, 0.94) 0%, rgba(37, 9, 92, 0.96) 100%);
  --plus-edge: rgba(255, 255, 255, 0.14);
  --plus-edge-live: rgba(255, 255, 255, 0.28);
  --plus-radius: 26px;
  --plus-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.plus-stage {
  position: relative;
  display: grid;
  gap: clamp(30px, 4vw, 46px);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(64px, 8vw, 104px) clamp(20px, 4vw, 56px) clamp(58px, 7vw, 92px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: radial-gradient(125% 92% at 50% -12%, #7c2dff 0%, #6a1cf6 44%, #43109c 100%);
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
}

.plus-stage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* The bars are drawn cheap and softened here. The veil is three layers: a top
   scrim so the header keeps its contrast, a bottom scrim that sinks the bars'
   footing under the chips and the billing note, and a corner vignette. It
   never lifts to zero anywhere text sits. */
.plus-stage-bg .aurora-bars {
  filter: blur(22px);
  opacity: 0.55;
}

.plus-stage-bg .aurora-veil {
  background:
    linear-gradient(180deg, rgba(46, 12, 112, 0.92) 0%, rgba(46, 12, 112, 0.25) 34%, rgba(46, 12, 112, 0) 46%),
    linear-gradient(0deg, rgba(30, 6, 80, 0.95) 0%, rgba(30, 6, 80, 0.86) 14%, rgba(30, 6, 80, 0.42) 24%, rgba(30, 6, 80, 0) 34%),
    radial-gradient(ellipse 118% 86% at 50% 72%, transparent 34%, rgba(38, 9, 98, 0.62) 100%);
}

/* The site-wide purple focus ring is invisible on this surface. */
.plus-stage :focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: 3px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.plus-stage-header {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  justify-items: center;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.plus-title {
  display: grid;
  gap: 14px;
  justify-items: center;
  margin: 0;
}

/* Block, not flex, and a real space in the markup: flex would drop the space
   and reorder the two words in the Arabic build. direction:ltr is belt and
   braces so the brand lockup can never mirror. */
.plus-wordmark {
  display: block;
  direction: ltr;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 5.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
}

.plus-wordmark-brand { color: #ffffff; }
.plus-wordmark-tier  { color: var(--yellow); }

.plus-headline {
  display: block;
  font: 800 clamp(1.3rem, 2.5vw, 1.9rem)/1.22 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.014em;
  color: rgba(255, 255, 255, 0.95);
}

.plus-promise {
  margin: 0;
  max-width: 60ch;
  font: 500 clamp(1rem, 1.35vw, 1.12rem)/1.6 Inter, sans-serif;
  color: var(--plus-ink-soft);
}

/* ── The board ──────────────────────────────────────────────────────────── */

.plus-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* The resting edge is an inset box-shadow, not a border, so the masked ring in
   ::before lands exactly on it instead of drawing a second line inside it. */
.plus-tile {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  padding: clamp(20px, 2vw, 26px);
  border: 0;
  border-radius: var(--plus-radius);
  background: var(--plus-face);
  box-shadow: inset 0 0 0 1px var(--plus-edge);
  overflow: hidden;
  transition:
    transform 420ms var(--plus-ease),
    background 420ms ease,
    box-shadow 420ms var(--plus-ease);
}

/* Cursor-following gradient edge, ported from the owner's MagicCard: the
   gradient is painted over the whole tile then masked down to a 1.4px frame,
   so it reads as a lit border rather than a wash. Guarded, because without
   mask compositing the unmasked gradient would cover the text — the plain
   inset edge above is the intended fallback. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .plus-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1.4px;
    border-radius: inherit;
    background: radial-gradient(
      240px circle at var(--mx, 50%) var(--my, 0%),
      var(--acc) 0%,
      var(--acc-2) 40%,
      rgba(255, 255, 255, 0.14) 74%,
      transparent 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease;
  }
}

/* Inner sheen, same centre as the edge. */
.plus-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.12) 0%,
    transparent 64%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 340ms ease;
}

/* Flat one-colour morphing blob — the app's design language. Only
   border-radius is keyframed, so hover owns `transform` outright. */
.plus-tile-blob {
  position: absolute;
  right: -20%;
  bottom: -30%;
  z-index: -1;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 54% 46% 58% 42% / 56% 44% 56% 44%;
  background: var(--acc);
  opacity: 0.16;
  filter: blur(12px);
  pointer-events: none;
  animation: plus-blob-morph 19s ease-in-out infinite;
  transition: opacity 460ms ease, transform 560ms var(--plus-ease);
}

@keyframes plus-blob-morph {
  0%, 100% { border-radius: 54% 46% 58% 42% / 56% 44% 56% 44%; }
  33%      { border-radius: 44% 56% 40% 60% / 48% 58% 42% 52%; }
  66%      { border-radius: 62% 38% 52% 48% / 40% 62% 38% 60%; }
}

.plus-tile:nth-child(2) .plus-tile-blob { animation-delay: -3.2s; }
.plus-tile:nth-child(3) .plus-tile-blob { animation-delay: -6.4s; }
.plus-tile:nth-child(4) .plus-tile-blob { animation-delay: -9.6s; }
.plus-tile:nth-child(5) .plus-tile-blob { animation-delay: -12.8s; }
.plus-tile:nth-child(6) .plus-tile-blob { animation-delay: -16s; }

.plus-tile-icon {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: start;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: var(--acc);
  transition: color 380ms ease, transform 420ms var(--plus-ease);
}

/* The tint rides a pseudo-element so each accent needs no alpha variant. */
.plus-tile-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--acc);
  opacity: 0.18;
  transition: opacity 380ms ease;
}

.plus-tile-icon svg {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}

.plus-tile-title {
  margin: 15px 0 0;
  font: 800 clamp(1.08rem, 1.5vw, 1.26rem)/1.24 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.016em;
  color: #ffffff;
}

.plus-tile-rule {
  display: block;
  justify-self: start;
  width: 32px;
  height: 2px;
  margin: 13px 0;
  border-radius: 2px;
  background: var(--acc);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 460ms var(--plus-ease);
}

.plus-tile-body {
  margin: 0;
  font: 500 0.975rem/1.62 Inter, sans-serif;
  color: rgba(255, 255, 255, 0.82);
  transition: color 380ms ease;
}

/* ── Also included ──────────────────────────────────────────────────────── */

.plus-more {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  justify-items: center;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.plus-more-title {
  margin: 0;
  font: 900 0.74rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}

/* Arabic joins its letters and tracking breaks the joins; Devanagari
   conjuncts fare no better, and neither script has case. */
[dir="rtl"] .plus-more-title,
:lang(ar) .plus-more-title,
:lang(hi) .plus-more-title {
  letter-spacing: 0;
  text-transform: none;
}

.plus-more-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 820px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plus-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(30, 6, 82, 0.55);
  font: 600 0.9rem/1.25 Inter, sans-serif;
  color: rgba(255, 255, 255, 0.92);
  transition:
    transform 320ms var(--plus-ease),
    border-color 320ms ease,
    background-color 320ms ease;
}

.plus-chip-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--acc);
}

.plus-chip-mark svg {
  display: block;
  width: 19px;
  height: 19px;
}

/* ── Outro ──────────────────────────────────────────────────────────────── */

.plus-outro {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
  justify-items: center;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
}

.plus-note {
  margin: 0;
  font: 500 0.94rem/1.6 Inter, sans-serif;
  color: rgba(255, 255, 255, 0.78);
}

.plus-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 27px;
  border-radius: 999px;
  background: var(--yellow);
  color: #2a0a63;
  font: 800 1rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 18px 38px -18px rgba(255, 211, 39, 0.75);
  transition: transform 260ms var(--plus-ease), box-shadow 260ms ease;
}

.plus-cta svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* ── Accents ────────────────────────────────────────────────────────────── */

.plus-a-tutor   { --acc: #c4b0ff; --acc-2: #6bd8ff; }
.plus-a-create  { --acc: #ffa35c; --acc-2: #ffd84d; }
.plus-a-energy  { --acc: #ffd84d; --acc-2: #ffa35c; }
.plus-a-library { --acc: #6bd8ff; --acc-2: #c4b0ff; }
.plus-a-scenes  { --acc: #ff8fc4; --acc-2: #c4b0ff; }
.plus-a-word    { --acc: #6ee7b7; --acc-2: #6bd8ff; }
.plus-a-paste   { --acc: #6bd8ff; }
.plus-a-freeze  { --acc: #9cc4ff; }
.plus-a-gift    { --acc: #6ee7b7; }
.plus-a-teach   { --acc: #ff8fc4; }
.plus-a-host    { --acc: #c4b0ff; }
.plus-a-looks   { --acc: #ffd84d; }

/* ── Entrance ───────────────────────────────────────────────────────────── */

/* Animates `translate`, not `transform`, so the staggered entrance and the
   hover lift compose instead of clobbering each other. */
/* Slides only. Opacity is deliberately NOT animated: when the fade was part of
   the entrance, any failure to run the animation left the tiles permanently
   invisible and the section shipped as an empty purple block. Movement is a
   nice-to-have; being readable is not. */
@keyframes plus-rise-in {
  from { translate: 0 22px; }
  to   { translate: 0 0; }
}

/* Resting state is visible, always. */
.plus-tile,
.plus-chip {
  opacity: 1;
}

.plus-section.is-revealed .plus-tile,
.plus-section.is-revealed .plus-chip {
  animation: plus-rise-in 620ms var(--plus-ease) backwards;
  animation-delay: var(--plus-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .plus-section.is-revealed .plus-tile,
  .plus-section.is-revealed .plus-chip {
    animation: none;
  }
}

.plus-grid .plus-tile:nth-child(1) { --plus-delay: 40ms; }
.plus-grid .plus-tile:nth-child(2) { --plus-delay: 100ms; }
.plus-grid .plus-tile:nth-child(3) { --plus-delay: 160ms; }
.plus-grid .plus-tile:nth-child(4) { --plus-delay: 220ms; }
.plus-grid .plus-tile:nth-child(5) { --plus-delay: 280ms; }
.plus-grid .plus-tile:nth-child(6) { --plus-delay: 340ms; }

.plus-more-list .plus-chip:nth-child(1) { --plus-delay: 400ms; }
.plus-more-list .plus-chip:nth-child(2) { --plus-delay: 440ms; }
.plus-more-list .plus-chip:nth-child(3) { --plus-delay: 480ms; }
.plus-more-list .plus-chip:nth-child(4) { --plus-delay: 520ms; }
.plus-more-list .plus-chip:nth-child(5) { --plus-delay: 560ms; }
.plus-more-list .plus-chip:nth-child(6) { --plus-delay: 600ms; }

/* ── Hover, cursor devices only ─────────────────────────────────────────── */

/* Gated so a phone tap can never leave a tile stuck in its lit state, and so
   the whole board is complete and readable without a pointer. */
@media (hover: hover) and (pointer: fine) {
  .plus-tile:hover {
    transform: translateY(-6px);
    background: var(--plus-face-live);
    box-shadow:
      inset 0 0 0 1px var(--plus-edge-live),
      0 28px 62px -24px rgba(9, 1, 34, 0.85);
  }

  .plus-tile:hover::before,
  .plus-tile:hover::after { opacity: 1; }

  .plus-tile:hover .plus-tile-blob {
    opacity: 0.3;
    transform: scale(1.16) translate(-5%, -7%);
  }

  .plus-tile:hover .plus-tile-icon {
    color: #260a5e;
    transform: translateY(-2px);
  }

  .plus-tile:hover .plus-tile-icon::before { opacity: 1; }

  .plus-tile:hover .plus-tile-rule { transform: scaleX(2.2); }

  .plus-tile:hover .plus-tile-body { color: rgba(255, 255, 255, 0.98); }

  .plus-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(30, 6, 82, 0.72);
  }

  .plus-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 48px -18px rgba(255, 211, 39, 0.9);
  }
}

/* ── RTL ────────────────────────────────────────────────────────────────── */

[dir="rtl"] .plus-tile-rule { transform-origin: right center; }
[dir="rtl"] .plus-tile-blob { right: auto; left: -20%; }
[dir="rtl"] .plus-cta svg { transform: scaleX(-1); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1020px) {
  .plus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .plus-stage { gap: 28px; padding: 58px 18px 54px; }
  .plus-grid { grid-template-columns: minmax(0, 1fr); }
  .plus-tile-icon { width: 42px; height: 42px; border-radius: 14px; }
  .plus-tile-icon svg { width: 22px; height: 22px; }
}

@media (max-width: 460px) {
  .plus-stage { padding: 48px 14px 46px; }
  .plus-chip { padding: 8px 13px; font-size: 0.84rem; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

/* Still, and still finished: gradient stage, one static frame of aurora
   (initAuroraBars paints once before it decides whether to start its loop),
   flat accent blobs frozen mid-morph, accent rules, icons, type. Nothing
   moves and nothing is missing. */
@media (prefers-reduced-motion: reduce) {
  .plus-tile,
  .plus-tile::before,
  .plus-tile::after,
  .plus-tile-blob,
  .plus-tile-icon,
  .plus-tile-icon::before,
  .plus-tile-rule,
  .plus-tile-body,
  .plus-chip,
  .plus-cta {
    transition: none;
    animation: none;
  }

  .plus-section.is-revealed .plus-tile,
  .plus-section.is-revealed .plus-chip {
    animation: none;
    opacity: 1;
    translate: none;
  }

  .plus-tile:hover,
  .plus-tile:hover .plus-tile-blob,
  .plus-tile:hover .plus-tile-icon,
  .plus-chip:hover,
  .plus-cta:hover {
    transform: none;
  }

  .plus-tile:hover .plus-tile-rule { transform: scaleX(1); }
}


.profile-page {
  min-height: calc(100vh - 200px);
}

.profile-hero {
  display: grid;
  justify-items: center;
  gap: 20px;
  text-align: center;
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 96px);
  max-width: 640px;
  margin: 0 auto;
}

.profile-eyebrow {
  margin-bottom: 0;
}

.profile-headline {
  margin: 0;
  font: 900 clamp(2.1rem, 5vw, 3.4rem)/1.05 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.profile-handle {
  display: inline-block;
  color: var(--purple);
  font-style: italic;
  letter-spacing: -0.01em;
  background: rgba(106, 28, 246, 0.08);
  padding: 0 0.18em;
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.profile-lede {
  margin: 0;
  max-width: 48ch;
  font: 600 1.05rem/1.55 Inter, sans-serif;
  color: var(--muted);
}

.profile-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  width: min(100%, 360px);
  padding: 16px 20px;
  margin: 8px 0 4px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 6px 0 rgba(214, 203, 226, 0.6),
    0 16px 32px rgba(65, 36, 101, 0.07);
  text-align: left;
}

.profile-card-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(106, 28, 246, 0.08);
  box-shadow: inset 0 0 0 1px rgba(106, 28, 246, 0.12);
}

.profile-card-mark img {
  display: block;
  width: 44px;
  height: 44px;
}

.profile-card-text {
  min-width: 0;
}

.profile-card-handle {
  font: 900 1.15rem/1.1 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card-meta {
  margin-top: 4px;
  font: 700 0.78rem/1.2 Inter, sans-serif;
  color: var(--muted);
}

.profile-card-status {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(106, 28, 246, 0.08);
  color: var(--purple);
  font: 800 0.76rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: fit-content;
}

.profile-card-status svg {
  color: var(--purple);
}

.profile-hero .store-buttons {
  margin-top: 8px;
  justify-content: center;
}

.profile-fineprint {
  margin: 8px 0 0;
  max-width: 44ch;
  font: 600 0.92rem/1.5 Inter, sans-serif;
  color: var(--muted);
}

.profile-fineprint b {
  color: var(--purple);
  font-weight: 900;
  font-style: italic;
}

@media (max-width: 600px) {
  .profile-hero {
    padding-top: 36px;
    padding-bottom: 56px;
    gap: 18px;
  }
  .profile-card {
    width: 100%;
  }
}


.not-found-page {
  min-height: calc(100vh - 200px);
}

.not-found-hero {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  padding-top: clamp(56px, 8vw, 120px);
  padding-bottom: clamp(48px, 6vw, 96px);
  max-width: 560px;
  margin: 0 auto;
}

.not-found-mark {
  font: 900 clamp(5rem, 18vw, 9.5rem)/0.9 "Plus Jakarta Sans", Inter, sans-serif;
  font-style: italic;
  color: var(--purple);
  letter-spacing: -0.04em;
  margin-bottom: -4px;
}

.not-found-headline {
  margin: 0;
  font: 900 clamp(1.8rem, 4vw, 2.6rem)/1.1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.not-found-lede {
  margin: 0;
  max-width: 38ch;
  font: 600 1rem/1.55 Inter, sans-serif;
  color: var(--muted);
}

.not-found-back-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--purple);
  color: #ffffff;
  text-decoration: none;
  font: 900 1rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.01em;
  box-shadow:
    0 6px 0 var(--purple-dark),
    0 14px 28px rgba(106, 28, 246, 0.22);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.not-found-back-cta:hover {
  background: #772aff;
  text-decoration: none;
  color: #ffffff;
}

.not-found-back-cta:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 var(--purple-dark),
    0 8px 18px rgba(106, 28, 246, 0.18);
}

.not-found-back-arrow {
  font-size: 1.1em;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.not-found-back-cta:hover .not-found-back-arrow {
  transform: translateX(-3px);
}

@media (max-width: 600px) {
  .not-found-hero {
    padding-top: 48px;
    padding-bottom: 56px;
    gap: 14px;
  }
}


.bigscreen-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 64px);
  max-width: 1200px;
  margin: 0 auto;
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

.bigscreen-center {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
  width: min(640px, 100%);
  justify-self: center;
}

.bigscreen-host-panel,
.bigscreen-participant-rail {
  display: grid;
  justify-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 380ms ease,
    transform 380ms ease;
  pointer-events: none;
}
.bigscreen-host-panel:not([hidden]),
.bigscreen-participant-rail:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bigscreen-host-panel {
  justify-self: end;
  text-align: center;
}
.bigscreen-host-panel .bigscreen-avatar,
.bigscreen-host-panel .bigscreen-host-name,
.bigscreen-host-panel .bigscreen-side-eyebrow {
  justify-self: center;
}

.bigscreen-participant-rail {
  justify-self: start;
  text-align: center;
}

.bigscreen-side-eyebrow {
  font: 900 0.74rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--muted, #6b6080);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}

.bigscreen-avatar {
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(106, 28, 246, 0.08);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.9),
    0 12px 28px rgba(65, 36, 101, 0.12);
  overflow: hidden;
  flex-shrink: 0;
}
.bigscreen-avatar--host {
  width: clamp(108px, 12vw, 156px);
  height: clamp(108px, 12vw, 156px);
}
.bigscreen-avatar--participant {
  width: 56px;
  height: 56px;
}
.bigscreen-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bigscreen-host-name {
  margin: 0;
  font: 900 clamp(1.4rem, 2.4vw, 1.9rem)/1.1 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--ink, #1b1330);
  letter-spacing: -0.01em;
  max-width: 18ch;
}

.bigscreen-participant-list {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 260px;
}

.bigscreen-participant {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--line, #e9e5f4);
  box-shadow: 0 6px 16px rgba(65, 36, 101, 0.07);
  animation: bigscreenParticipantPop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 240ms ease, transform 240ms ease;
}
.bigscreen-participant.is-leaving {
  opacity: 0;
  transform: translateX(8px) scale(0.92);
}

@keyframes bigscreenParticipantPop {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

.bigscreen-participant-name {
  margin: 0;
  font: 800 0.95rem/1.15 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--ink, #1b1330);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bigscreen-rail-empty {
  margin: 4px 0 0;
  font: 600 0.85rem/1.4 Inter, sans-serif;
  color: var(--muted, #6b6080);
}

.bigscreen-stage[data-lobby-status="running"] .bigscreen-qr-card {
  opacity: 0.45;
  filter: grayscale(0.5);
  transition: opacity 400ms ease, filter 400ms ease;
}
.bigscreen-stage[data-lobby-status="ended"] .bigscreen-qr-card {
  opacity: 0.3;
  filter: grayscale(1);
}

.bigscreen-stage[data-lobby-status="waiting_start"] .bigscreen-status {
  background: rgba(255, 119, 51, 0.10);
  color: #c54a14;
}
.bigscreen-stage[data-lobby-status="running"] .bigscreen-status {
  background: rgba(34, 139, 84, 0.10);
  color: #16623e;
}
.bigscreen-stage[data-lobby-status="ended"] .bigscreen-status {
  background: rgba(0, 0, 0, 0.05);
  color: #555;
}

@media (max-width: 900px) {
  .bigscreen-stage {
    grid-template-columns: minmax(0, 1fr);
  }
  .bigscreen-host-panel {
    justify-self: center;
    text-align: center;
    order: -1;
  }
  .bigscreen-host-panel .bigscreen-avatar,
  .bigscreen-host-panel .bigscreen-host-name,
  .bigscreen-host-panel .bigscreen-side-eyebrow {
    justify-self: center;
  }
  .bigscreen-participant-rail {
    justify-self: center;
    text-align: center;
  }
  .bigscreen-participant-list {
    max-width: 100%;
    justify-self: center;
  }
}


.bigscreen-page {
  min-height: calc(100vh - 200px);
}

.bigscreen-hero {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 96px);
  max-width: 720px;
  margin: 0 auto;
}

.bigscreen-eyebrow {
  margin-bottom: 0;
  color: #ffffff;
  background: #ff7733;
  gap: 6px;
  padding: 8px 14px;
  align-items: center;
  letter-spacing: 0.1em;
}

.bigscreen-eyebrow-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
}

.bigscreen-eyebrow-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bigscreen-headline {
  margin: 0;
  font: 900 clamp(2.2rem, 5.4vw, 3.6rem)/1.05 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.bigscreen-lede {
  margin: 0;
  max-width: 52ch;
  font: 600 1.05rem/1.55 Inter, sans-serif;
  color: var(--muted);
}

.bigscreen-qr-card {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: min(100%, 420px);
  padding: 16px;
  margin: 8px 0 4px;
  border: 1px solid #E9E5F4;
  border-radius: 24px;
  background: #F6F4FB;
  box-shadow: 0 18px 36px rgba(65, 36, 101, 0.08);
}

.bigscreen-qr {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.bigscreen-qr svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: geometricPrecision;
}

.bigscreen-qr-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: repeating-linear-gradient(
    45deg,
    rgba(106, 28, 246, 0.05),
    rgba(106, 28, 246, 0.05) 12px,
    rgba(106, 28, 246, 0.10) 12px,
    rgba(106, 28, 246, 0.10) 24px
  );
}

.bigscreen-code-block {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
}

.bigscreen-code-label {
  font: 800 0.72rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.bigscreen-code {
  font: 900 clamp(1.8rem, 5vw, 2.6rem)/1 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--ink);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  padding: 4px 14px;
  border-radius: 12px;
  background: rgba(106, 28, 246, 0.08);
  color: var(--purple);
}

.bigscreen-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(106, 28, 246, 0.08);
  color: var(--purple);
  font: 800 0.82rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bigscreen-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 0 rgba(106, 28, 246, 0.5);
  animation: bigscreenPulse 1.6s ease-out infinite;
}

@keyframes bigscreenPulse {
  0%   { box-shadow: 0 0 0 0 rgba(106, 28, 246, 0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(106, 28, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(106, 28, 246, 0); }
}

.bigscreen-hint {
  margin: 4px 0 0;
  max-width: 44ch;
  font: 600 0.92rem/1.5 Inter, sans-serif;
  color: var(--muted);
}

@media (max-width: 600px) {
  .bigscreen-hero {
    padding-top: 36px;
    padding-bottom: 56px;
    gap: 18px;
  }
  .bigscreen-qr-card {
    width: 100%;
    padding: 20px 20px 18px;
  }
}

.bigscreen-page {
  position: relative;
}

.bigscreen-fs-toggle {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #ff7733;
  color: #ffffff;
  cursor: pointer;
  box-shadow:
    0 4px 0 #d35e1f,
    0 10px 22px rgba(255, 119, 51, 0.28);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.bigscreen-fs-toggle:hover {
  background: #ff8c52;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 5px 0 #d35e1f,
    0 12px 26px rgba(255, 119, 51, 0.34);
}

.bigscreen-fs-toggle:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 #d35e1f,
    0 4px 12px rgba(255, 119, 51, 0.24);
}

.bigscreen-fs-toggle:focus-visible {
  outline: 3px solid rgba(255, 119, 51, 0.45);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .bigscreen-fs-toggle {
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
  }
}

.bigscreen-fs-icon {
  width: 18px;
  height: 18px;
}

.bigscreen-fs-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bigscreen-fs-toggle .bigscreen-fs-icon {
  display: none;
}
.bigscreen-fs-toggle[data-fs-state="enter"] .bigscreen-fs-icon--enter,
.bigscreen-fs-toggle:not([data-fs-state]) .bigscreen-fs-icon--enter,
.bigscreen-fs-toggle[data-fs-state="exit"] .bigscreen-fs-icon--exit {
  display: inline-flex;
}

body.is-fullscreen .site-header,
body.is-fullscreen .footer {
  display: none;
}
body.is-fullscreen .bigscreen-hero {
  padding-top: clamp(40px, 5vh, 80px);
}
body.is-fullscreen .bigscreen-stage[data-game-view="question"],
body.is-fullscreen .bigscreen-stage[data-game-view="reveal"],
body.is-fullscreen .bigscreen-stage[data-game-view="over"] {
  padding-top: clamp(20px, 3vh, 48px);
}


.bigscreen-game {
  display: none;
}
.bigscreen-stage[data-game-view="question"] > .bigscreen-center,
.bigscreen-stage[data-game-view="question"] > .bigscreen-host-panel,
.bigscreen-stage[data-game-view="question"] > .bigscreen-participant-rail,
.bigscreen-stage[data-game-view="reveal"] > .bigscreen-center,
.bigscreen-stage[data-game-view="reveal"] > .bigscreen-host-panel,
.bigscreen-stage[data-game-view="reveal"] > .bigscreen-participant-rail,
.bigscreen-stage[data-game-view="level"] > .bigscreen-center,
.bigscreen-stage[data-game-view="level"] > .bigscreen-host-panel,
.bigscreen-stage[data-game-view="level"] > .bigscreen-participant-rail,
.bigscreen-stage[data-game-view="over"] > .bigscreen-center,
.bigscreen-stage[data-game-view="over"] > .bigscreen-host-panel,
.bigscreen-stage[data-game-view="over"] > .bigscreen-participant-rail {
  display: none;
}
.bigscreen-stage[data-game-view="question"],
.bigscreen-stage[data-game-view="reveal"],
.bigscreen-stage[data-game-view="level"],
.bigscreen-stage[data-game-view="over"] {
  display: block;
  width: min(1480px, calc(100% - 48px));
  max-width: none;
}
.bigscreen-stage[data-game-view="question"] > .bigscreen-game,
.bigscreen-stage[data-game-view="reveal"] > .bigscreen-game,
.bigscreen-stage[data-game-view="level"] > .bigscreen-game,
.bigscreen-stage[data-game-view="over"] > .bigscreen-game {
  display: block;
  animation: bigscreenGameFade 360ms ease both;
}
@keyframes bigscreenGameFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bigscreen-play {
  display: grid;
  grid-template-columns: clamp(220px, 19vw, 300px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(20px, 2.4vw, 40px);
}
.bigscreen-game > .bigscreen-final { display: none; }
.bigscreen-game > .bigscreen-level { display: none; }
.bigscreen-stage[data-game-view="over"] .bigscreen-play,
.bigscreen-stage[data-game-view="level"] .bigscreen-play { display: none; }
.bigscreen-stage[data-game-view="over"] .bigscreen-final {
  display: flex;
}
.bigscreen-stage[data-game-view="level"] .bigscreen-level {
  display: flex;
}

.bigscreen-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 14px;
  border-radius: 28px 26px 30px 24px;
  background: linear-gradient(160deg, #ffffff 0%, #f6f2fe 100%);
  border: 1px solid var(--line);
  box-shadow: 0 22px 50px rgba(65, 36, 101, 0.12);
}
.bigscreen-rail-title {
  margin: 0 0 4px 6px;
  font: 900 0.82rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.bigscreen-rail-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bigscreen-rail-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(65, 36, 101, 0.07);
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 300ms ease, background 300ms ease;
  will-change: transform;
}
.bigscreen-rail-row[data-rank="1"] {
  background: linear-gradient(120deg, #fff8ec 0%, #ffffff 70%);
  border-color: rgba(255, 119, 51, 0.4);
  box-shadow: 0 10px 24px rgba(255, 119, 51, 0.2);
}
.bigscreen-rail-row[data-rank="2"] {
  border-color: rgba(106, 28, 246, 0.28);
}
.bigscreen-rail-row[data-rank="3"] {
  border-color: rgba(47, 143, 106, 0.3);
}
.bigscreen-rail-rank {
  width: 26px;
  text-align: center;
  font: 900 1rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bigscreen-rail-row[data-rank="1"] .bigscreen-rail-rank { color: #ff7733; }
.bigscreen-rail-row[data-rank="2"] .bigscreen-rail-rank { color: var(--purple); }
.bigscreen-rail-row[data-rank="3"] .bigscreen-rail-rank { color: #2f8f6a; }
.bigscreen-rail-name {
  margin: 0;
  font: 800 0.98rem/1.1 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--ink);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bigscreen-rail-score {
  font: 900 1.05rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.bigscreen-rail-row.is-bump {
  animation: bigscreenRailBump 760ms ease;
}
@keyframes bigscreenRailBump {
  0%   { box-shadow: 0 6px 16px rgba(65, 36, 101, 0.07); }
  30%  { box-shadow: 0 0 0 4px rgba(106, 28, 246, 0.28), 0 14px 30px rgba(106, 28, 246, 0.26); }
  100% { box-shadow: 0 6px 16px rgba(65, 36, 101, 0.07); }
}

.bigscreen-bubble {
  display: grid;
  place-items: center;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--purple);
  color: #fff;
  font: 800 0.95rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 8px 18px rgba(65, 36, 101, 0.16);
  width: 42px;
  height: 42px;
}
.bigscreen-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bigscreen-bubble[data-tint="0"] { background: linear-gradient(150deg, #7b3cff, #6a1cf6); }
.bigscreen-bubble[data-tint="1"] { background: linear-gradient(150deg, #ff8c52, #ff7733); }
.bigscreen-bubble[data-tint="2"] { background: linear-gradient(150deg, #3fae82, #2f8f6a); }
.bigscreen-bubble[data-tint="3"] { background: linear-gradient(150deg, #b96bff, #ac4ff6); }
.bigscreen-bubble[data-tint="4"] { background: linear-gradient(150deg, #ffc24d, #f5a623); color: #4a2d00; }

.bigscreen-board {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vh, 32px);
  min-height: clamp(420px, 72vh, 760px);
}
.bigscreen-qhead {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
}
.bigscreen-qlocator {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.bigscreen-qlevel {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  font: 900 clamp(1.05rem, 1.9vw, 1.7rem)/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.01em;
  color: var(--purple);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(106, 28, 246, 0.1));
  border: 1.5px solid rgba(106, 28, 246, 0.18);
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
}
.bigscreen-qlevel[hidden] { display: none; }
.bigscreen-qmeta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.bigscreen-qcount {
  font: 900 clamp(0.9rem, 1.3vw, 1.1rem)/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--purple);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(106, 28, 246, 0.28);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bigscreen-qkind {
  font: 800 0.78rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c54a14;
  background: rgba(255, 119, 51, 0.12);
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.bigscreen-speaker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vh, 22px);
  margin-bottom: clamp(8px, 1.6vh, 18px);
}
.bigscreen-speaker[hidden] { display: none; }
.bigscreen-speaker-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(96px, 11vw, 156px);
  height: clamp(96px, 11vw, 156px);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(150deg, #8b5cf6 0%, #6a1cf6 100%);
  box-shadow: 0 18px 40px rgba(106, 28, 246, 0.34);
}
.bigscreen-speaker-orb svg {
  width: 46%;
  height: 46%;
  position: relative;
  z-index: 1;
}
.bigscreen-speaker-wave {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 3px solid rgba(106, 28, 246, 0.5);
  animation: bigscreenSpeakerRipple 2.2s ease-out infinite;
}
.bigscreen-speaker-wave:nth-child(2) { animation-delay: 1.1s; }
@keyframes bigscreenSpeakerRipple {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.8); }
}
.bigscreen-speaker-replay {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 clamp(0.95rem, 1.5vw, 1.25rem)/1 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--purple);
  background: #fff;
  border: 2px solid rgba(106, 28, 246, 0.22);
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(106, 28, 246, 0.14);
  transition: transform 160ms ease, box-shadow 200ms ease, background 200ms ease;
}
.bigscreen-speaker-replay:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(106, 28, 246, 0.2);
}
.bigscreen-speaker-replay:active { transform: translateY(0); }
.bigscreen-speaker-replay:focus-visible {
  outline: 3px solid rgba(106, 28, 246, 0.5);
  outline-offset: 3px;
}
.bigscreen-speaker-replay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bigscreen-speaker-replay-icon svg {
  width: 1.15em;
  height: 1.15em;
  display: block;
}
.bigscreen-speaker.is-speaking .bigscreen-speaker-orb {
  box-shadow: 0 0 0 5px rgba(255, 119, 51, 0.3), 0 18px 44px rgba(106, 28, 246, 0.4);
}

.bigscreen-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(14px, 2.4vh, 26px);
  max-width: 100%;
}
.bigscreen-tiles[hidden] { display: none; }
.bigscreen-tile {
  font: 800 clamp(1.05rem, 2vw, 1.8rem)/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: #fff;
  border: 2px solid rgba(106, 28, 246, 0.2);
  padding: clamp(10px, 1.4vw, 16px) clamp(14px, 1.8vw, 22px);
  border-radius: 18px 16px 20px 14px;
  box-shadow: 0 8px 20px rgba(65, 36, 101, 0.1);
  animation: bigscreenTilePop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes bigscreenTilePop {
  0%   { opacity: 0; transform: translateY(10px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.bigscreen-tiles.is-correct .bigscreen-tile {
  color: #1f6b4d;
  background: linear-gradient(150deg, #eafaf2 0%, #d7f3e6 100%);
  border-color: rgba(47, 143, 106, 0.42);
  box-shadow: 0 8px 20px rgba(47, 143, 106, 0.18);
}

.bigscreen-assemble-result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.bigscreen-assemble-result[hidden] { display: none; }
.bigscreen-cluster {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(16px, 2vw, 26px);
  border-radius: 28px 24px 30px 22px;
  border: 1.5px solid var(--line);
  min-height: clamp(120px, 16vh, 180px);
}
.bigscreen-cluster--correct {
  background: linear-gradient(150deg, #f0fbf6 0%, #e3f6ed 100%);
  border-color: rgba(47, 143, 106, 0.3);
}
.bigscreen-cluster--wrong {
  background: linear-gradient(150deg, #fbfafc 0%, #f3f1f6 100%);
}
.bigscreen-cluster-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 900 clamp(1rem, 1.6vw, 1.5rem)/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.01em;
}
.bigscreen-cluster--correct .bigscreen-cluster-label { color: #2f8f6a; }
.bigscreen-cluster--wrong .bigscreen-cluster-label { color: var(--muted); }
.bigscreen-cluster-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.bigscreen-cluster-bubbles .bigscreen-bubble {
  width: clamp(40px, 4vw, 56px);
  height: clamp(40px, 4vw, 56px);
  font-size: clamp(0.9rem, 1.3vw, 1.2rem);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 5px 12px rgba(0, 0, 0, 0.14);
  animation: bigscreenBubblePop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.bigscreen-answers[data-kind="assemble"] { display: none; }

.bigscreen-timer {
  position: relative;
  width: clamp(72px, 8vw, 104px);
  height: clamp(72px, 8vw, 104px);
  flex-shrink: 0;
}
.bigscreen-timer svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
}
.bigscreen-timer-track {
  fill: none;
  stroke: rgba(106, 28, 246, 0.14);
  stroke-width: 9;
}
.bigscreen-timer-fill {
  fill: none;
  stroke: var(--purple);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 1000ms linear, stroke 300ms ease;
}
.bigscreen-timer.is-low .bigscreen-timer-fill { stroke: #e63b2e; }
.bigscreen-timer.is-low .bigscreen-timer-track { stroke: rgba(230, 59, 46, 0.16); }
.bigscreen-timer-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 900 clamp(1.5rem, 2.6vw, 2.2rem)/1 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bigscreen-timer.is-low .bigscreen-timer-num { color: #e63b2e; }

.bigscreen-prompt {
  margin: 0;
  text-align: center;
  font: 800 clamp(1.9rem, 4.6vw, 4rem)/1.08 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  padding: 6px 8px;
  animation: bigscreenBreathe 6s ease-in-out infinite;
}
.bigscreen-prompt-word {
  color: var(--purple, #6a1cf6);
  font-weight: 900;
}
.bigscreen-prompt-hint {
  margin: 2px auto 0;
  max-width: 56ch;
  text-align: center;
  font: 600 clamp(0.95rem, 1.8vw, 1.35rem)/1.45 Inter, sans-serif;
  color: var(--muted);
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(106, 28, 246, 0.07);
}
.bigscreen-prompt-hint b {
  color: var(--purple, #6a1cf6);
  font-weight: 800;
}
.bigscreen-prompt-card {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  min-height: clamp(140px, 22vh, 260px);
  padding: clamp(20px, 3vw, 44px);
  border-radius: 36px 32px 38px 30px;
  background: linear-gradient(150deg, #ffffff 0%, #f6f2fe 100%);
  border: 1px solid var(--line);
  box-shadow: 0 26px 60px rgba(65, 36, 101, 0.12);
}
@keyframes bigscreenBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.012); }
}

.bigscreen-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.bigscreen-answers[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bigscreen-answer {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  min-height: clamp(90px, 13vh, 140px);
  padding: clamp(16px, 2vw, 28px);
  border-radius: 30px 26px 32px 24px;
  color: #fff;
  text-align: left;
  box-shadow: 0 18px 36px rgba(65, 36, 101, 0.16);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 300ms ease, opacity 300ms ease, filter 300ms ease;
  overflow: hidden;
}
.bigscreen-answer[data-slot="0"] { background: linear-gradient(135deg, #8b5cf6 0%, #6a1cf6 100%); }
.bigscreen-answer[data-slot="1"] { background: linear-gradient(135deg, #ffa266 0%, #ff7733 100%); }
.bigscreen-answer[data-slot="2"] { background: linear-gradient(135deg, #3fae82 0%, #2f8f6a 100%); }
.bigscreen-answer[data-slot="3"] { background: linear-gradient(135deg, #c98bff 0%, #ac4ff6 100%); }
.bigscreen-answer-glyph {
  display: grid;
  place-items: center;
  width: clamp(40px, 4vw, 56px);
  height: clamp(40px, 4vw, 56px);
  border-radius: 18px 16px 20px 14px;
  background: rgba(255, 255, 255, 0.22);
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
  line-height: 1;
}
.bigscreen-answer-text {
  font: 800 clamp(1.15rem, 2.1vw, 1.9rem)/1.12 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.01em;
  text-wrap: balance;
  word-break: break-word;
}
.bigscreen-stage[data-game-view="reveal"] .bigscreen-answer {
  opacity: 0.34;
  filter: saturate(0.7);
}
.bigscreen-stage[data-game-view="reveal"] .bigscreen-answer.is-correct {
  opacity: 1;
  filter: none;
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 0 0 5px rgba(47, 143, 106, 0.5), 0 26px 56px rgba(47, 143, 106, 0.36);
  animation: bigscreenCorrectPop 620ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bigscreenCorrectPop {
  0%   { transform: translateY(-4px) scale(0.98); }
  55%  { transform: translateY(-6px) scale(1.05); }
  100% { transform: translateY(-4px) scale(1.015); }
}
.bigscreen-answer-check {
  position: absolute;
  top: 12px;
  right: 14px;
  width: clamp(30px, 3vw, 44px);
  height: clamp(30px, 3vw, 44px);
  display: none;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: #2f8f6a;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.bigscreen-answer-check svg { width: 64%; height: 64%; display: block; }
.bigscreen-answer.is-correct .bigscreen-answer-check { display: grid; }

.bigscreen-answer-bubbles {
  position: absolute;
  left: clamp(14px, 2vw, 24px);
  right: clamp(14px, 2vw, 24px);
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  pointer-events: none;
}
.bigscreen-stage[data-game-view="reveal"] .bigscreen-answer {
  align-content: start;
  padding-bottom: clamp(44px, 6vh, 60px);
}
.bigscreen-answer-bubbles .bigscreen-bubble {
  width: clamp(30px, 3vw, 40px);
  height: clamp(30px, 3vw, 40px);
  font-size: 0.78rem;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 4px 10px rgba(0, 0, 0, 0.18);
  animation: bigscreenBubblePop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes bigscreenBubblePop {
  0%   { opacity: 0; transform: scale(0.3); }
  70%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
.bigscreen-deltapop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 900 clamp(1.4rem, 2.4vw, 2.2rem)/1 "Plus Jakarta Sans", Inter, sans-serif;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  animation: bigscreenDeltaRise 1500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bigscreenDeltaRise {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.7); }
  20%  { opacity: 1; transform: translate(-50%, -10px) scale(1.1); }
  80%  { opacity: 1; transform: translate(-50%, -44px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1); }
}

.bigscreen-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vh, 40px);
  padding: clamp(8px, 2vh, 24px) 0 clamp(20px, 3vh, 40px);
}
.bigscreen-final-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font: 900 clamp(2rem, 4.4vw, 3.4rem)/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bigscreen-final-duck {
  width: clamp(54px, 6vw, 84px);
  height: clamp(54px, 6vw, 84px);
  object-fit: contain;
  animation: bigscreenDuckCheer 1.8s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes bigscreenDuckCheer {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(7deg) translateY(-8px); }
}

.bigscreen-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(12px, 1.6vw, 28px);
  width: min(900px, 100%);
}
.bigscreen-podium-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: bigscreenPodiumRise 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bigscreen-podium-col[data-place="1"] { order: 2; animation-delay: 240ms; }
.bigscreen-podium-col[data-place="2"] { order: 1; animation-delay: 80ms; }
.bigscreen-podium-col[data-place="3"] { order: 3; animation-delay: 160ms; }
@keyframes bigscreenPodiumRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bigscreen-podium-col .bigscreen-bubble {
  width: clamp(64px, 7vw, 104px);
  height: clamp(64px, 7vw, 104px);
  font-size: clamp(1.3rem, 2vw, 2rem);
}
.bigscreen-podium-col[data-place="1"] .bigscreen-bubble {
  width: clamp(84px, 9vw, 132px);
  height: clamp(84px, 9vw, 132px);
  box-shadow: 0 0 0 4px #ffd327, 0 0 0 8px rgba(255, 119, 51, 0.35), 0 16px 36px rgba(255, 119, 51, 0.3);
}
.bigscreen-podium-name {
  margin: 0;
  max-width: 12ch;
  text-align: center;
  font: 800 clamp(0.95rem, 1.5vw, 1.3rem)/1.1 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bigscreen-podium-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 16px 10px 14px;
  border-radius: 22px 20px 8px 8px;
  color: #fff;
}
.bigscreen-podium-col[data-place="1"] .bigscreen-podium-block {
  height: clamp(150px, 20vh, 230px);
  background: linear-gradient(180deg, #ffa266 0%, #ff7733 100%);
  box-shadow: 0 -6px 30px rgba(255, 119, 51, 0.3) inset, 0 18px 40px rgba(255, 119, 51, 0.24);
}
.bigscreen-podium-col[data-place="2"] .bigscreen-podium-block {
  height: clamp(112px, 15vh, 170px);
  background: linear-gradient(180deg, #8b5cf6 0%, #6a1cf6 100%);
  box-shadow: 0 18px 40px rgba(106, 28, 246, 0.22);
}
.bigscreen-podium-col[data-place="3"] .bigscreen-podium-block {
  height: clamp(88px, 12vh, 132px);
  background: linear-gradient(180deg, #3fae82 0%, #2f8f6a 100%);
  box-shadow: 0 18px 40px rgba(47, 143, 106, 0.22);
}
.bigscreen-podium-place {
  font: 900 clamp(1.6rem, 2.6vw, 2.4rem)/1 "Plus Jakarta Sans", Inter, sans-serif;
}
.bigscreen-podium-score {
  font: 900 clamp(1.1rem, 1.8vw, 1.6rem)/1 "Plus Jakarta Sans", Inter, sans-serif;
  font-variant-numeric: tabular-nums;
  opacity: 0.96;
}
.bigscreen-podium-score small {
  font-size: 0.6em;
  font-weight: 800;
  opacity: 0.85;
  margin-left: 2px;
}

.bigscreen-restlist {
  width: min(720px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bigscreen-rest-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(65, 36, 101, 0.07);
  animation: bigscreenRestIn 500ms ease both;
}
@keyframes bigscreenRestIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bigscreen-rest-rank {
  width: 30px;
  text-align: center;
  font: 900 1.1rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bigscreen-rest-name {
  margin: 0;
  font: 800 1.05rem/1.1 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bigscreen-rest-score {
  font: 900 1.15rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
}

.bigscreen-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bigscreen-confetti i {
  position: absolute;
  top: -8%;
  width: 11px;
  height: 14px;
  border-radius: 3px;
  opacity: 0.9;
  animation: bigscreenConfettiFall linear forwards;
}
@keyframes bigscreenConfettiFall {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.9; }
}
.bigscreen-final { position: relative; z-index: 1; }

.bigscreen-level {
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.6vh, 34px);
  padding: clamp(8px, 2vh, 24px) 0 clamp(16px, 2.4vh, 32px);
}
.bigscreen-level-eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 900 clamp(0.85rem, 1.3vw, 1.1rem)/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c54a14;
  background: rgba(255, 119, 51, 0.13);
  padding: 10px 20px;
  border-radius: 999px;
}
.bigscreen-level-eyebrow-icon {
  display: inline-grid;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  color: #ff7733;
}
.bigscreen-level-eyebrow-icon svg { width: 100%; height: 100%; }
.bigscreen-level-title {
  margin: 0;
  text-align: center;
  font: 900 clamp(1.7rem, 3.6vw, 2.9rem)/1.06 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.bigscreen-level-wait {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(4px, 1vh, 12px);
  font: 800 clamp(1rem, 1.7vw, 1.4rem)/1.2 "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--muted);
  text-align: center;
}
.bigscreen-level-wait .bigscreen-status-dot { flex-shrink: 0; }

@media (max-width: 900px) {
  .bigscreen-play {
    grid-template-columns: minmax(0, 1fr);
  }
  .bigscreen-rail {
    order: 2;
  }
  .bigscreen-answers {
    gap: 12px;
  }
  .bigscreen-podium-name { max-width: 9ch; }
}
@media (max-width: 560px) {
  .bigscreen-answers,
  .bigscreen-answers[data-count="2"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .bigscreen-qhead {
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  .bigscreen-qkind { display: none; }
  .bigscreen-assemble-result {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bigscreen-prompt,
  .bigscreen-final-duck { animation: none; }
  .bigscreen-rail-row { transition: none; }
  .bigscreen-answer.is-correct,
  .bigscreen-podium-col,
  .bigscreen-rest-row,
  .bigscreen-answer-bubbles .bigscreen-bubble,
  .bigscreen-cluster-bubbles .bigscreen-bubble,
  .bigscreen-tile,
  .bigscreen-rail-row.is-bump,
  .bigscreen-game,
  .bigscreen-stage[data-game-view="question"] > .bigscreen-game,
  .bigscreen-stage[data-game-view="reveal"] > .bigscreen-game,
  .bigscreen-stage[data-game-view="level"] > .bigscreen-game,
  .bigscreen-stage[data-game-view="over"] > .bigscreen-game {
    animation: none;
  }
  .bigscreen-speaker-wave { animation: none; opacity: 0; }
  .bigscreen-deltapop { animation-duration: 1200ms; }
  .bigscreen-confetti { display: none; }
  .bigscreen-timer-fill { transition: stroke-dashoffset 300ms linear; }
}


.bigscreen-join-page {
  min-height: calc(100vh - 200px);
}

.bigscreen-join-hero {
  display: grid;
  justify-items: center;
  gap: 20px;
  text-align: center;
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 96px);
  max-width: 640px;
  margin: 0 auto;
}

.bigscreen-join-eyebrow {
  margin-bottom: 0;
}

.bigscreen-join-headline {
  margin: 0;
  font: 900 clamp(2.1rem, 5vw, 3.4rem)/1.05 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.bigscreen-join-code {
  display: inline-block;
  color: var(--purple);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  background: rgba(106, 28, 246, 0.08);
  padding: 0 0.22em;
  border-radius: 10px;
  overflow-wrap: anywhere;
}

.bigscreen-join-lede {
  margin: 0;
  max-width: 52ch;
  font: 600 1.05rem/1.55 Inter, sans-serif;
  color: var(--muted);
}

.bigscreen-join-hero .store-buttons {
  margin-top: 8px;
  justify-content: center;
}

.bigscreen-join-fineprint {
  margin: 8px 0 0;
  max-width: 48ch;
  font: 600 0.92rem/1.5 Inter, sans-serif;
  color: var(--muted);
}

.bigscreen-join-fineprint b {
  color: var(--purple);
  font-weight: 900;
  letter-spacing: 0.06em;
}

@media (max-width: 600px) {
  .bigscreen-join-hero {
    padding-top: 36px;
    padding-bottom: 56px;
    gap: 18px;
  }
}


.header-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(36, 25, 55, 0.16);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 4px 0 rgba(214, 203, 226, 0.7);
  font: 900 0.82rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  transform: translateY(0);
  transition: transform 120ms ease, box-shadow 120ms ease, background 160ms ease;
}

.header-profile-btn:hover {
  background: #ffffff;
  text-decoration: none;
}

.header-profile-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(214, 203, 226, 0.7);
}

.header-profile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: var(--purple);
  background: rgba(106, 28, 246, 0.12);
}

.header-profile-btn.is-signed-in .header-profile-icon {
  color: #ffffff;
  background: var(--purple);
}

@media (max-width: 760px) {
  .header-profile-label {
    display: none;
  }
  .header-profile-btn {
    padding: 0 10px;
  }
}

.upload-card h3 {
  font-size: 1.45rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.mock-upload textarea {
  display: block;
  width: 100%;
  min-height: 200px;
  resize: none;
  padding: 20px 22px;
  border: 1px solid rgba(36, 25, 55, 0.12);
  border-radius: 22px;
  color: #5f566a;
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 2px 0 rgba(214, 203, 226, 0.7),
    0 8px 22px rgba(65, 36, 101, 0.05);
  font: 700 0.98rem/1.5 Inter, sans-serif;
}

.mock-confirm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid rgba(36, 25, 55, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
}

.mock-confirm input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--purple);
}

.mock-generate {
  display: inline-grid;
  place-items: center;
  min-height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: var(--purple);
  box-shadow:
    0 6px 0 var(--purple-dark),
    0 18px 32px rgba(106, 28, 246, 0.22);
  font: 900 1rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 120ms ease, box-shadow 120ms ease, background 160ms ease;
}

.mock-generate:hover {
  background: #772aff;
  text-decoration: none;
}

.mock-generate:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 var(--purple-dark),
    0 8px 18px rgba(106, 28, 246, 0.18);
}

.challenge-mini,
.rights-mini {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
}

.challenge-mini span,
.challenge-mini b,
.rights-mini span,
.rights-mini b {
  display: grid;
  min-height: 36px;
  place-items: center;
  border-radius: 999px;
  font: 900 0.78rem "Plus Jakarta Sans", Inter, sans-serif;
}

.challenge-mini span,
.rights-mini span {
  color: #ffffff;
  background: #19171f;
}

.challenge-mini b,
.rights-mini b {
  color: var(--purple);
  text-transform: uppercase;
}

.app-flow {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  align-items: start;
  gap: clamp(30px, 5vw, 68px);
}

.flow-copy {
  position: sticky;
  top: 112px;
}

.flow-copy h2 {
  font-size: clamp(2.2rem, 4vw, 4rem);
}

.flow-copy p:not(.mini-label) {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
}

.flow-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.flow-board article {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 24px;
  border: 1px solid rgba(36, 25, 55, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72));
  box-shadow:
    0 6px 0 rgba(214, 203, 226, 0.75),
    0 18px 42px rgba(65, 36, 101, 0.08);
}

.flow-board span {
  display: inline-flex;
  margin-bottom: 28px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #134c5d;
  background: rgba(107, 216, 255, 0.32);
  font: 900 0.68rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flow-board strong {
  display: block;
  font: 900 1.3rem/1.1 "Plus Jakarta Sans", Inter, sans-serif;
}

.flow-board p {
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.quiz-card {
  grid-column: span 2;
  min-height: 260px;
  padding: 34px;
  color: #ffffff;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(135deg, #8b20ff, #5c13e7);
  box-shadow:
    0 8px 0 #4b10be,
    0 22px 52px rgba(106, 28, 246, 0.2);
}

.quiz-card p {
  color: rgba(255, 255, 255, 0.86);
}

.quiz-card .card-kicker {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
}

.quiz-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
}

.quiz-meter span {
  height: 35px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.65) 0 48%, transparent 48%),
    rgba(255, 255, 255, 0.13);
}

.quiz-meter b {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 999px;
  color: #19171f;
  background: var(--yellow);
  box-shadow: 0 5px 0 #d4a800;
}

.vocab-card {
  min-height: 260px;
}

.word-table {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgba(36, 25, 55, 0.1);
  border-radius: 14px;
  background: #ffffff;
}

.word-table div {
  display: flex;
  justify-content: space-between;
  padding: 9px 12px;
  color: var(--teal);
  background: #eef7fa;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.word-table strong,
.word-table small {
  display: block;
  padding-inline: 12px;
}

.word-table strong {
  padding-top: 12px;
}

.word-table small {
  padding-bottom: 14px;
  color: var(--muted);
}

.wave-card {
  display: grid;
  place-items: center;
  min-height: 210px;
  text-align: center;
}

.bars {
  justify-content: center;
  height: 62px;
}

.bars span {
  height: 34px;
}

.levels-card {
  grid-column: span 2;
  min-height: 210px;
  padding: 34px;
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.11) 0 36%, transparent 36% 100%),
    linear-gradient(135deg, #ff9b18, #ff7a00);
  box-shadow:
    0 8px 0 #c76a00,
    0 18px 42px rgba(255, 122, 0, 0.18);
}

.levels-card p {
  color: rgba(255, 255, 255, 0.84);
}

.level-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.level-pills span {
  padding: 13px 17px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  font-size: 0.82rem;
  font-weight: 800;
}

.level-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.mini-level {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.mini-level span {
  font: 900 0.72rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.mini-level strong {
  font: 900 1.22rem/1.1 "Plus Jakarta Sans", Inter, sans-serif;
}

.mini-level small,
.mini-level b,
.mini-level em {
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.mini-level.is-cleared {
  background: rgba(255, 255, 255, 0.18);
}

.cta-wrap {
  padding-top: 42px;
}

.cta-panel {
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 330px;
  padding: 54px 24px;
  border-radius: 34px;
  color: #ffffff;
  text-align: center;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 42%, transparent 42% 58%, rgba(255, 255, 255, 0.08) 58%),
    linear-gradient(135deg, #7b2ff7, #5411d4);
  box-shadow:
    0 8px 0 #42109f,
    0 24px 60px rgba(106, 28, 246, 0.26);
}

.cta-panel h2 {
  max-width: 680px;
}

.cta-panel p {
  max-width: 650px;
  margin: 18px auto 28px;
  color: rgba(255, 255, 255, 0.88);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.outline-button {
  display: inline-grid;
  min-height: 48px;
  place-items: center;
  padding: 0 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  color: #ffffff;
  font: 900 0.9rem "Plus Jakarta Sans", Inter, sans-serif;
}

.footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: 42px;
  border: 1px solid var(--line);
  border-radius: 32px 32px 0 0;
  background: rgba(255, 255, 255, 0.56);
}

.footer p,
.footer small {
  color: var(--muted);
}

.footer-rights-note {
  max-width: 46ch;
  margin: 12px 0;
  font-size: 0.78rem;
  line-height: 1.45;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  color: #4d435e;
  font-weight: 700;
}

.footer a:hover {
  color: var(--purple);
}


.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 2px;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}
.footer-social svg {
  width: 19px;
  height: 19px;
  flex: none;
}
.footer a.footer-social:hover {
  color: var(--ink);
}

.features-page .section-pad {
  width: min(var(--max), calc(100% - 32px));
}

.brand-name {
  color: var(--purple);
  font-weight: inherit;
}
.challenge-detail .brand-name {
  color: #ffd75a;
}

.feature-hero {
  display: grid;
  place-items: center;
  padding-top: 46px;
  padding-bottom: 20px;
  text-align: center;
}

.feature-hero h1 {
  max-width: 12ch;
  font-size: clamp(2.8rem, 5.8vw, 5.05rem);
}

.feature-hero p:not(.eyebrow) {
  max-width: 720px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 600;
}

.feature-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-top: 10px;
}

.feature-detail-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 7px 0 rgba(214, 203, 226, 0.9),
    0 18px 42px rgba(65, 36, 101, 0.08);
}

.feature-detail-card h2 {
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.02;
}

.feature-detail-card p:not(.card-kicker) {
  color: var(--muted);
  font-weight: 600;
}

.level-detail,
.challenge-detail {
  grid-column: span 2;
}

.feature-detail-card .mini-level {
  color: var(--ink);
  background: rgba(245, 241, 250, 0.9);
  box-shadow: inset 0 0 0 1px rgba(36, 25, 55, 0.08);
}

.feature-detail-card .mini-level.is-cleared {
  color: #ffffff;
  background: #19171f;
}

.feature-detail-card .mini-level small,
.feature-detail-card .mini-level b,
.feature-detail-card .mini-level em {
  color: #4d435e;
  background: rgba(255, 255, 255, 0.82);
}

.feature-detail-card .mini-level.is-cleared small,
.feature-detail-card .mini-level.is-cleared b,
.feature-detail-card .mini-level.is-cleared em {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
}

.question-snippets {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.question-snippets span,
.challenge-preview {
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(25, 23, 31, 0.07);
}

.question-snippets span {
  padding: 18px 20px;
  color: #1f1c26;
  font: 900 1rem "Plus Jakarta Sans", Inter, sans-serif;
}

.challenge-detail {
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 38%, transparent 38% 100%),
    linear-gradient(135deg, #7b2ff7, #5411d4);
  box-shadow:
    0 8px 0 #42109f,
    0 22px 52px rgba(106, 28, 246, 0.22);
}

.challenge-detail p:not(.card-kicker) {
  color: rgba(255, 255, 255, 0.86);
}

.challenge-preview {
  display: grid;
  gap: 8px;
  max-width: 440px;
  margin-top: 24px;
  padding: 20px;
  color: var(--ink);
}

.challenge-preview span,
.challenge-preview b {
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--purple);
  background: rgba(106, 28, 246, 0.1);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.challenge-preview strong {
  font: 900 1.35rem "Plus Jakarta Sans", Inter, sans-serif;
}

.challenge-preview small {
  color: var(--muted);
  font-weight: 800;
}

body[dir="rtl"] .phone-card {
  transform: none;
}

body[dir="rtl"] .feature-intro,
body[dir="rtl"] .site-header,
body[dir="rtl"] .footer {
  direction: rtl;
}

@media (max-width: 900px) {
  .site-header {
    display: flex;
    justify-content: space-between;
    grid-template-columns: auto auto;
    gap: 12px;
  }

  .nav-links {
    display: none;
  }

  .header-actions {
    justify-content: end;
    margin-left: auto;
  }

  .header-download {
    display: none;
  }

  select {
    width: 132px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 42px;
    text-align: left;
  }

  .hero-copy {
    margin-inline: 0;
  }

  .eyebrow,
  .mini-label {
    margin-inline: 0;
  }

  h1 {
    max-width: min(100%, 14ch);
    margin-inline: 0;
    font-size: clamp(2.6rem, 13.5vw, 3.9rem);
  }

  .hero-text {
    margin-inline: 0;
  }

  .store-buttons {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

  .store-button {
    width: min(100%, 320px);
    min-width: 0;
  }

  .hero-proof {
    justify-content: flex-start;
    margin-inline: 0;
  }

  .phone-stage {
    min-height: 772px;
  }

  .phone-shell {
    /* gentler up-scale on tablet widths */
    transform: scale(1.16);
  }

  .hero-visual {
    overflow: visible;
  }

  .phone-card {
    width: 100%;
  }

  .accuracy-card {
    display: none;
  }

  .steps,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .quiz-card,
  .levels-card {
    grid-column: auto;
  }

  .feature-intro {
    display: block;
    text-align: start;
  }

  .document-lines {
    margin-top: 24px;
  }

  .footer {
    grid-template-columns: 1fr;
  }

  .feature-detail-grid {
    grid-template-columns: 1fr;
  }

  .app-flow {
    grid-template-columns: 1fr;
  }

  .flow-copy {
    position: static;
    text-align: center;
  }

  .flow-copy .mini-label {
    margin-inline: auto;
  }

  .level-detail,
  .challenge-detail {
    grid-column: auto;
  }

  .level-preview {
    grid-template-columns: 1fr;
  }

  .feature-hero h1 {
    max-width: min(100%, 11ch);
    font-size: clamp(2.55rem, 11vw, 3.1rem);
  }

  .feature-hero p:not(.eyebrow) {
    max-width: min(100%, 32ch);
  }

  .level-detail .mini-level {
    color: #ffffff;
    background:
      radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.18), transparent 22%),
      linear-gradient(135deg, #ff9b18, #ff7a00);
  }
}

@media (max-width: 520px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .site-header {
    position: sticky;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 13px 14px;
    overflow-x: clip;
    overflow-y: visible;
  }

  .header-actions {
    position: static !important;
    justify-self: end;
    z-index: 40;
    margin-left: 0;
  }

  body[dir="rtl"] .header-actions {
    margin-right: 0;
  }

  .brand {
    gap: 7px;
    font-size: 0.98rem;
  }

  .brand-lockup {
    gap: 7px;
  }

  .brand-mark {
    width: 25px;
    height: 25px;
  }

  select {
    width: 82px !important;
    min-height: 39px;
    font-size: 0.78rem;
  }

  .section-pad {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    overflow-x: clip;
    overflow-y: visible;
    padding: 56px 0;
  }

  .features-page .section-pad {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }

  .hero {
    gap: 34px;
    padding-top: 36px;
  }

  .hero-copy,
  .feature-hero,
  .feature-detail-card {
    max-width: 100%;
    overflow-x: clip;
    overflow-y: visible;
  }

  h1,
  .feature-hero h1 {
    width: 100%;
    max-width: 100% !important;
    font-size: clamp(2.4rem, 12.5vw, 3.4rem) !important;
    line-height: 1.04;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .rhythm {
    font-size: 0.92em;
  }

  .eyebrow {
    font-size: 0.66rem;
  }

  .hero-text {
    max-width: min(100%, 32ch);
    font-size: 0.95rem;
  }

  .hero-proof {
    gap: 7px;
    max-width: 310px;
  }

  .hero-proof span {
    padding: 7px 9px;
    font-size: 0.66rem;
  }

  .store-buttons {
    display: grid;
    gap: 14px;
    justify-items: center;
  }

  .store-button {
    min-width: min(100%, 322px);
  }

  .flow-board {
    grid-template-columns: 1fr;
  }

  .flow-board article,
  .flow-board article:nth-child(2),
  .flow-board article:nth-child(3) {
    min-height: auto;
    margin-top: 0;
    padding: 18px;
  }

  .flow-board span {
    margin-bottom: 18px;
  }

  .phone-stage {
    min-height: 662px;
    width: 100%;
  }

  .phone-card {
    width: 100%;
  }

  .phone-shell {
    width: min(100%, 322px);
    min-height: 630px;
    border-width: 8px;
    padding: 14px 12px 14px;
    /* no up-scaling on phones — stage width already constrains it */
    transform: none;
  }

  .demo-screen {
    min-height: 558px;
    gap: 8px;
  }

  .demo-content-card {
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    padding: 8px;
  }

  .demo-cover {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .demo-play {
    width: 34px;
    height: 34px;
  }

  .demo-copy h2 {
    font-size: 1rem;
  }

  .demo-question-area {
    min-height: 228px;
    gap: 9px;
  }

  .demo-meaning-card {
    padding: 13px;
  }

  .demo-meaning-card strong {
    font-size: 1.38rem;
  }

  .demo-highlight-word {
    padding: 14px 12px;
    font-size: 1.72rem;
  }

  .demo-text-panel,
  .demo-fill-panel {
    border-radius: 24px;
    padding: 14px 10px;
  }

  .demo-word-tap {
    font-size: 1rem;
  }

  .demo-fill-line {
    font-size: 0.86rem;
  }

  .demo-fill-blank {
    min-width: 62px;
    min-height: 34px;
  }

  .demo-bank-chip {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.72rem;
  }

  .demo-feedback {
    font-size: 0.64rem;
  }

  .demo-option {
    min-height: 36px;
    padding: 7px 8px;
    border-radius: 14px;
    font-size: 0.72rem;
  }

  .demo-action {
    min-height: 40px;
  }

  .waveform span {
    width: 5px;
    height: 34px;
  }

  .waveform span:nth-child(2n) {
    height: 55px;
  }

  .accuracy-card {
    width: 142px;
    padding: 13px;
    right: -1px;
    bottom: 28px;
  }

  .how {
    padding-inline: 12px;
  }

  .section-heading {
    margin-bottom: 34px;
  }

  .section-heading h2,
  .feature-intro h2,
  .cta-panel h2 {
    font-size: 2rem;
  }

  .shelf-card,
  .quiz-card,
  .levels-card {
    padding: 22px;
    border-radius: 22px;
  }

  .quiz-meter {
    grid-template-columns: 1fr 48px;
  }

  .quiz-meter b {
    width: 48px;
    height: 48px;
  }

  .cta-panel {
    min-height: 300px;
    border-radius: 28px;
  }

  .cta-actions {
    display: grid;
  }

  .footer {
    width: 100%;
    margin-bottom: 0;
    padding: 30px 18px;
    border-radius: 28px 28px 0 0;
    text-align: center;
  }

  .footer-brand {
    justify-content: center;
  }

  .footer nav {
    justify-content: center;
    gap: 14px 20px;
  }

  .feature-detail-card {
    padding: 22px;
    border-radius: 24px;
    width: 100%;
  }

  .feature-hero h1 {
    max-width: 300px !important;
    font-size: 2rem !important;
  }

  .feature-detail-card h2 {
    font-size: 1.55rem;
    line-height: 1.08;
  }

  .level-preview,
  .mini-level {
    min-width: 0;
    max-width: 100%;
  }

  .level-detail .mini-level {
    width: 100%;
  }
}


.buddy {
  position: relative;
  overflow: hidden;
}

.buddy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(36px, 6vw, 72px);
}

.buddy-copy .mini-label {
  margin-bottom: 16px;
}

.buddy-copy h2 {
  margin: 0 0 18px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 16ch;
  text-wrap: balance;
}

.buddy-copy h2 .rhythm {
  display: inline;
  font-size: 1em;
}

.buddy-copy > p {
  max-width: 56ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}


.buddy-visual {
  position: relative;
  aspect-ratio: 5 / 4;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.buddy-blob {
  position: absolute;
  border-radius: 50%;
  animation: buddy-float 9s ease-in-out infinite;
  will-change: transform;
}
.buddy-blob-1 {
  width: 18%; aspect-ratio: 1;
  top: 4%; right: 2%;
  background: #cfdcf6;
  opacity: 0.55;
  animation-delay: 0s;
}
.buddy-blob-2 {
  width: 42%; aspect-ratio: 1.05;
  bottom: -6%; right: 18%;
  background: #d6c9f3;
  opacity: 0.45;
  animation-delay: -2s;
}
.buddy-blob-3 {
  width: 14%; aspect-ratio: 1;
  bottom: 22%; right: 4%;
  background: #f6d4c1;
  opacity: 0.55;
  animation-delay: -4s;
}
.buddy-blob-4 {
  width: 18%; aspect-ratio: 1;
  top: 30%; left: 10%;
  background: #dad8f1;
  opacity: 0.5;
  animation-delay: -3s;
}
.buddy-blob-5 {
  width: 12%; aspect-ratio: 1;
  bottom: 4%; left: 24%;
  background: #f7d6cc;
  opacity: 0.5;
  animation-delay: -1.5s;
}

@keyframes buddy-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6px, -8px) scale(1.03); }
}

.buddy-orb-purple {
  position: absolute;
  width: 44%; aspect-ratio: 1;
  bottom: 12%; right: 26%;
  border-radius: 52% 48% 56% 44% / 60% 42% 58% 40%;
  background: #6a1cf6;
  animation: buddy-orb-morph 12s ease-in-out infinite;
  will-change: transform, border-radius;
  z-index: 2;
}

@keyframes buddy-orb-morph {
  0%, 100% { border-radius: 52% 48% 56% 44% / 60% 42% 58% 40%; transform: translate(0, 0); }
  33% { border-radius: 46% 54% 42% 58% / 50% 56% 44% 50%; transform: translate(-4px, -6px); }
  66% { border-radius: 60% 40% 50% 50% / 44% 60% 40% 56%; transform: translate(6px, 2px); }
}

.buddy-orb-orange {
  position: absolute;
  width: 22%; aspect-ratio: 1;
  top: 10%; right: 6%;
  display: grid;
  place-items: center;
  border-radius: 58% 42% 60% 40% / 50% 50% 50% 50%;
  background: #ff7132;
  animation: buddy-mic-pulse 2.6s ease-in-out infinite;
  will-change: transform;
  z-index: 1;
}
.buddy-orb-orange svg {
  width: 42%;
  height: auto;
  color: #ffffff;
}

@keyframes buddy-mic-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.buddy-msg {
  position: absolute;
  padding: 14px 20px;
  border-radius: 22px;
  background: #ffffff;
  color: #19171f;
  font: 700 0.98rem/1.3 Inter, sans-serif;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(65, 36, 101, 0.14);
  max-width: 64%;
  z-index: 3;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  transition:
    opacity 0.45s ease,
    transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.2);
  pointer-events: none;
}
.buddy-msg.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.buddy-msg-user {
  top: 6%;
  right: 30%;
}
.buddy-msg-assistant {
  top: 38%;
  right: 4%;
}

@media (prefers-reduced-motion: reduce) {
  .buddy-blob,
  .buddy-orb-purple,
  .buddy-orb-orange,
  .buddy-msg {
    animation: none !important;
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .buddy-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .buddy-copy h2 {
    max-width: 100%;
  }
  .buddy-visual {
    aspect-ratio: 16 / 11;
  }
}

@media (max-width: 560px) {
  .buddy-visual {
    aspect-ratio: 4 / 3;
    border-radius: 24px;
  }
  .buddy-msg {
    font-size: 0.84rem;
    padding: 10px 14px;
    max-width: 70%;
  }
}

.watch-feature {
  position: relative;
  overflow: hidden;
}

.watch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(36px, 6vw, 72px);
}

.watch-copy {
  position: relative;
  z-index: 1;
}

.watch-copy .mini-label {
  margin-bottom: 16px;
}

.watch-copy h2 {
  margin: 0 0 18px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 15ch;
  text-wrap: balance;
}

.watch-copy > p {
  max-width: 56ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  font-weight: 500;
  line-height: 1.55;
  margin: 0 0 24px;
}

.watch-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
}
.watch-point {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font: 800 0.96rem "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--ink);
}
.watch-point-ic {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(106, 28, 246, 0.1);
  color: var(--purple);
}
.watch-point-ic svg {
  width: 20px;
  height: 20px;
}
.watch-point:nth-child(2) .watch-point-ic {
  background: rgba(255, 119, 51, 0.12);
  color: #ff7733;
}

.watch-visual {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 5% 0;
  overflow: visible;
}

.watch-blob {
  position: absolute;
  border-radius: 50%;
  animation: watch-float 9s ease-in-out infinite;
  will-change: transform;
}
.watch-blob-1 {
  width: 48%; aspect-ratio: 1;
  top: 0; right: 6%;
  background: radial-gradient(circle at 35% 30%, #ece2ff, #cdb9f7);
  opacity: 0.62;
}
.watch-blob-2 {
  width: 32%; aspect-ratio: 1;
  bottom: 2%; left: 4%;
  background: radial-gradient(circle at 35% 30%, #ffe6d4, #ffc39c);
  opacity: 0.55;
  animation-delay: -3s;
}
.watch-blob-3 {
  width: 18%; aspect-ratio: 1;
  top: 18%; left: 16%;
  background: #cfe9ff;
  opacity: 0.5;
  animation-delay: -5s;
}
@keyframes watch-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5px, -9px) scale(1.04); }
}

.watch-photo-img {
  display: block;
  position: relative;
  z-index: 3;
  width: clamp(280px, 34vw, 400px);
  height: auto;
  margin-inline: auto;
  will-change: transform;
  filter: drop-shadow(0 26px 40px rgba(48, 28, 12, 0.26));
}
@media (prefers-reduced-motion: reduce) {
  .watch-photo-img { transform: none !important; }
}

.watch-screen {
  position: absolute;
  left: 22.2%;
  top: 24.7%;
  width: 55.4%;
  height: 50.4%;
  border-radius: 13% / 11%;
  overflow: hidden;
  background: radial-gradient(125% 125% at 30% 6%, #14141c 0%, #050507 72%);
  container-type: inline-size;
}
@supports (corner-shape: superellipse(2)) {
  .watch-screen { corner-shape: superellipse(2.8); }
}
.watch-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.06) 100%);
}

.watch-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 9% 8.5%;
  opacity: 0;
  animation: watch-cycle 13.5s ease-in-out infinite;
  will-change: opacity, transform;
}
.watch-frame-lock { animation-delay: 0s; justify-content: flex-start; }
.watch-frame-match { animation-delay: -4.5s; justify-content: center; }
.watch-frame-translate { animation-delay: -9s; justify-content: center; align-items: center; text-align: center; }

@keyframes watch-cycle {
  0% { opacity: 0; transform: translateY(7px) scale(0.97); }
  3% { opacity: 1; transform: none; }
  30% { opacity: 1; transform: none; }
  33% { opacity: 0; transform: translateY(-7px) scale(0.97); }
  100% { opacity: 0; }
}

.watch-statusbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 9%;
}
.watch-time {
  color: #fff;
  font: 800 8cqw "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.01em;
}
.watch-card {
  display: flex;
  flex-direction: column;
  gap: 1.5cqw;
  background: linear-gradient(160deg, rgba(106, 28, 246, 0.36), rgba(106, 28, 246, 0.13));
  border: 1px solid rgba(180, 150, 255, 0.34);
  border-radius: 9cqw;
  padding: 9% 9%;
}
.watch-card-tag {
  color: #fdd400;
  font: 800 5cqw Inter, sans-serif;
  letter-spacing: 0.08em;
}
.watch-card-word {
  color: #fff;
  font: 900 12cqw "Plus Jakarta Sans", Inter, sans-serif;
  line-height: 1.05;
}
.watch-card-mean {
  color: #c9bfe0;
  font: 600 6.6cqw Inter, sans-serif;
}

.watch-q-kicker {
  color: #ff8a4c;
  font: 900 5.6cqw Inter, sans-serif;
  letter-spacing: 0.12em;
}
.watch-q-word {
  color: #fff;
  font: 900 13cqw "Plus Jakarta Sans", Inter, sans-serif;
  line-height: 1.04;
  margin: 6% 0 9%;
}
.watch-q-opts {
  display: flex;
  flex-direction: column;
  gap: 6cqw;
}
.watch-q-opt {
  font: 800 7.2cqw Inter, sans-serif;
  color: #e7e1f5;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7cqw;
  padding: 5.5cqw 6cqw;
}
.watch-q-opt.is-correct {
  color: #fff;
  background: linear-gradient(120deg, #6a1cf6, #8b5cf6);
  border-color: transparent;
  position: relative;
}
.watch-q-opt.is-correct::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 6cqw;
  transform: translateY(-50%);
  font-size: 7cqw;
}

.watch-t-word {
  color: #cdb9f7;
  font: 800 11cqw "Plus Jakarta Sans", Inter, sans-serif;
}
.watch-t-arrow {
  color: #ff8a4c;
  font-size: 12cqw;
  line-height: 1;
  margin: 4% 0;
}
.watch-t-answer {
  color: #fff;
  font: 900 16cqw "Plus Jakarta Sans", Inter, sans-serif;
}

.watch-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #19171f;
  font: 800 0.82rem "Plus Jakarta Sans", Inter, sans-serif;
  padding: 9px 14px;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(65, 36, 101, 0.16);
  animation: watch-float 8s ease-in-out infinite;
  will-change: transform;
}
.watch-chip-ic {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 0.68rem;
  color: #fff;
  line-height: 1;
}
.watch-chip-fav {
  top: 13%;
  left: 1%;
  animation-delay: -1s;
}
.watch-chip-fav .watch-chip-ic {
  background: #fdd400;
  color: #6a5200;
}
.watch-chip-miss {
  bottom: 13%;
  right: 1%;
  animation-delay: -4s;
}
.watch-chip-miss .watch-chip-ic {
  background: #ff7733;
}

@media (prefers-reduced-motion: reduce) {
  .watch-blob,
  .watch-photo,
  .watch-chip,
  .watch-frame {
    animation: none !important;
  }
  .watch-frame-lock { opacity: 1 !important; }
  .watch-frame-match,
  .watch-frame-translate { opacity: 0 !important; }
}

@media (max-width: 900px) {
  .watch-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .watch-copy h2 { max-width: 100%; }
}

@media (max-width: 560px) {
  .watch-chip { font-size: 0.76rem; padding: 8px 12px; }
}



.bigscreen-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 3.5vw, 40px);
  text-align: center;
}
.bigscreen-feature-head {
  max-width: 720px;
  margin: 0 auto;
}
.bigscreen-feature-head h2 {
  margin: 10px 0 0;
}
.bigscreen-feature-head > p {
  margin: 16px auto 0;
  max-width: 640px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.bigscreen-screen {
  position: relative;
  width: min(100%, 1020px);
  margin: 0 auto;
  padding: clamp(8px, 1.3vw, 14px);
  border-radius: clamp(20px, 2.4vw, 30px);
  background: linear-gradient(157deg, #2a2735 0%, #1a1722 60%, #131019 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.06) inset,
    0 40px 80px -30px rgba(28, 16, 54, 0.6),
    0 18px 40px -24px rgba(28, 16, 54, 0.5);
}
.bigscreen-screen-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 720;
  overflow: hidden;
  border-radius: clamp(11px, 1.5vw, 18px);
  background: #f6f2fe;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}
.bigscreen-screen-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 720px;
  border: 0;
  transform-origin: top left;
  transform: scale(var(--bs-scale, 1));
  pointer-events: none;
}
.bigscreen-screen-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #f3eefe 55%, #ece6fb 100%);
  transition: opacity 0.45s ease;
}
.bigscreen-screen-placeholder img {
  width: clamp(48px, 6vw, 68px);
  height: auto;
  opacity: 0.9;
  animation: bigscreenPlaceholderPulse 1.8s ease-in-out infinite;
}
@keyframes bigscreenPlaceholderPulse {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.85; }
  50% { transform: translateY(-4px) scale(1.04); opacity: 1; }
}
.bigscreen-screen.is-loaded .bigscreen-screen-placeholder {
  opacity: 0;
  pointer-events: none;
}
.bigscreen-screen-tag {
  position: absolute;
  top: 0;
  left: clamp(18px, 3vw, 34px);
  transform: translateY(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(65, 36, 101, 0.18);
  font: 800 0.72rem/1 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink, #19171f);
}
.bigscreen-screen-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.5);
  animation: bigscreenLiveDot 1.6s ease-out infinite;
}
@keyframes bigscreenLiveDot {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(255, 59, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}
.bigscreen-screen-stand { display: none; }

.bigscreen-feature-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
}
.bigscreen-feature-point {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(65, 36, 101, 0.07);
  font: 700 0.92rem/1 Inter, sans-serif;
  color: var(--ink, #19171f);
}
.bigscreen-feature-point-ic {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(106, 28, 246, 0.1);
  color: var(--purple, #6a1cf6);
}
.bigscreen-feature-point-ic svg { width: 17px; height: 17px; }
.bigscreen-feature-cta {
  margin-top: 2px;
}

@media (max-width: 600px) {
  .bigscreen-feature-head > p { font-size: 0.98rem; }
  .bigscreen-feature-point { font-size: 0.84rem; padding: 8px 13px 8px 10px; }
  .bigscreen-feature-point-ic { width: 23px; height: 23px; }
}

/* QuackBits feature — phone mockup of the in-app hub */
.qb-phone {
  /* A real handset silhouette. The old box was 320x470 — a 0.68 ratio, far
     squatter than any phone — which is why it read as a rounded rectangle
     rather than a device. Modern phones sit near 9:19.5. */
  position: relative;
  display: flex;
  width: min(100%, 288px);
  aspect-ratio: 9 / 19;
  margin: 0 auto;
  padding: 11px;
  border-radius: clamp(38px, 8vw, 48px);
  /* Body, plus three side buttons drawn straight onto the edges — cheaper and
     steadier than extra elements, and they sell the object more than any
     amount of gloss. */
  background-image:
    linear-gradient(180deg, #4a4756 0%, #2a2735 100%),
    linear-gradient(180deg, #4a4756 0%, #2a2735 100%),
    linear-gradient(180deg, #4a4756 0%, #2a2735 100%),
    linear-gradient(158deg, #35313f 0%, #201d2a 55%, #14111c 100%);
  background-repeat: no-repeat;
  background-size: 3px 58px, 3px 30px, 3px 50px, 100% 100%;
  background-position:
    right 0 top 27%,
    left 0 top 19%,
    left 0 top 27%,
    0 0;
  box-shadow:
    0 38px 74px -34px rgba(28, 16, 54, 0.62),
    0 16px 34px -22px rgba(28, 16, 54, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Dynamic island. Replaces a pale speaker slit that read as a highlight bar
   pasted across the top rather than part of the hardware. */
.qb-phone::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 88px;
  height: 25px;
  border-radius: 999px;
  background: #08080a;
  transform: translateX(-50%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.65);
  z-index: 4;
}

/* The camera lens inside the island — the detail that stops it reading as a
   plain black pill. */
.qb-phone::after {
  content: "";
  position: absolute;
  top: 27px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #33333a 0%, #0b0b0e 62%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  z-index: 5;
}

.qb-phone-screen {
  --qb-purple: #6a1cf6;
  --qb-purple-soft: #ac8eff;
  --qb-orange: #ff7733;
  --qb-green: #22c55e;
  --qb-ink: #211a30;
  --qb-muted: #8b8398;
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  border-radius: clamp(28px, 6vw, 38px);
  /* Top padding clears the island so nothing tucks underneath it. */
  padding: 52px clamp(14px, 3.2vw, 18px) clamp(16px, 3vw, 20px);
  background:
    radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #f3eefe 55%, #ece6fb 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset;
  overflow: hidden;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
}

/* status bar header */
.qb-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: clamp(26px, 5vw, 30px);
  padding: 0 4px;
  margin-bottom: clamp(6px, 1.4vw, 9px);
}
.qb-statusbar-mark {
  font-size: clamp(0.95rem, 4.6vw, 1.12rem);
  line-height: 1;
}
.qb-statusbar-dots { display: inline-flex; gap: 4px; }
.qb-statusbar-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(106, 28, 246, 0.22);
}

/* carousel stage — screens stack, only .is-active is visible */
.qb-stage {
  position: relative;
  /* Fills whatever the taller body leaves, instead of pinning a fixed height
     that dictated the phone's proportions. */
  flex: 1;
  min-height: 0;
}
.qb-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The taller body leaves real room now, so each game sits centred in the
     screen instead of clinging to the top with a void beneath it. */
  justify-content: center;
  gap: clamp(2px, 1vw, 6px);
  opacity: 0;
  transform: translateX(14px) scale(0.985);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.qb-screen.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.qb-screen.is-leaving {
  opacity: 0;
  transform: translateX(-14px) scale(0.985);
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.4, 0, 1, 1);
}

.qb-prompt {
  margin: clamp(2px, 1vw, 6px) 0 clamp(12px, 2.6vw, 16px);
  text-align: center;
  font-size: clamp(0.92rem, 3.9vw, 1rem);
  font-weight: 700;
  color: var(--qb-muted);
}

/* segmented difficulty pills (Numbers) */
.qb-segmented {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(65, 36, 101, 0.1);
  margin-bottom: clamp(12px, 2.6vw, 16px);
}
.qb-segmented span {
  display: grid;
  place-items: center;
  width: clamp(22px, 5.4vw, 26px);
  height: clamp(22px, 5.4vw, 26px);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--qb-muted);
}
.qb-segmented span.is-on {
  color: #fff;
  background: linear-gradient(135deg, #6a1cf6, #ac8eff);
  box-shadow: 0 4px 12px rgba(106, 28, 246, 0.4);
}

/* speaker blob */
.qb-blob {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(86px, 22vw, 102px);
  height: clamp(86px, 22vw, 102px);
  border-radius: 45% 55% 45% 55% / 55% 45% 55% 45%;
  color: #fff;
  flex: none;
  animation: qbBlobMorph 7s ease-in-out infinite, qbBlobPulse 2.4s ease-in-out infinite;
}
.qb-blob-sm { width: clamp(82px, 21vw, 100px); height: clamp(82px, 21vw, 100px); }
.qb-blob-purple {
  background: linear-gradient(135deg, #6a1cf6, #ac8eff);
  box-shadow: 0 14px 34px -8px rgba(106, 28, 246, 0.55);
}
.qb-blob-orange {
  background: linear-gradient(135deg, #ff7733, #ac8eff);
  box-shadow: 0 14px 34px -8px rgba(255, 119, 51, 0.5);
}
.qb-blob-aura {
  position: absolute;
  inset: -22%;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(106, 28, 246, 0.3) 0%, rgba(106, 28, 246, 0) 68%);
  animation: qbAura 2.4s ease-in-out infinite;
}
.qb-blob-orange .qb-blob-aura {
  background: radial-gradient(circle, rgba(255, 119, 51, 0.32) 0%, rgba(255, 119, 51, 0) 68%);
}
.qb-blob-ic {
  position: relative;
  width: 42%;
  height: 42%;
}
@keyframes qbBlobMorph {
  0%, 100% { border-radius: 45% 55% 45% 55% / 55% 45% 55% 45%; }
  33% { border-radius: 55% 45% 55% 45% / 45% 55% 45% 55%; }
  66% { border-radius: 50% 50% 58% 42% / 56% 44% 54% 46%; }
}
@keyframes qbBlobPulse {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.035) rotate(2deg); }
}
@keyframes qbAura {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* answer box (Numbers) */
.qb-answer {
  margin: clamp(14px, 3vw, 18px) 0 clamp(12px, 2.6vw, 15px);
  min-width: clamp(120px, 32vw, 150px);
  padding: clamp(10px, 2.4vw, 14px) clamp(18px, 4vw, 24px);
  border-radius: 22px;
  background: #fff;
  border: 2px solid var(--qb-green);
  box-shadow: 0 10px 26px -10px rgba(34, 197, 94, 0.5), 0 4px 14px rgba(65, 36, 101, 0.06);
  text-align: center;
}
.qb-answer-digits {
  display: inline-block;
  min-height: 1em;
  font-size: clamp(1.7rem, 8vw, 2.1rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--qb-ink);
  line-height: 1;
}
.qb-answer-digits::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--qb-purple);
  animation: qbCaret 0.9s step-end infinite;
}
@keyframes qbCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* numpad hint */
.qb-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 1.6vw, 9px);
  width: clamp(150px, 40vw, 186px);
}
.qb-numpad span {
  display: grid;
  place-items: center;
  height: clamp(28px, 6.4vw, 33px);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(65, 36, 101, 0.07);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--qb-ink);
}

/* option grid (Letters / Colours) */
.qb-grid {
  margin-top: clamp(20px, 5vw, 28px);
  display: grid;
  gap: clamp(11px, 2.6vw, 15px);
  width: min(100%, 230px);
}
.qb-grid-2 { grid-template-columns: 1fr 1fr; }
.qb-opt {
  display: grid;
  place-items: center;
  height: clamp(58px, 14vw, 70px);
  border-radius: 20px;
  background: #fff;
  border: 2px solid transparent;
  box-shadow: 0 8px 18px rgba(65, 36, 101, 0.08);
  font-size: clamp(1.5rem, 7vw, 1.9rem);
  font-weight: 900;
  color: var(--qb-ink);
}
.qb-opt.is-correct {
  border-color: var(--qb-green);
  background: rgba(34, 197, 94, 0.12);
  color: #178347;
  box-shadow: 0 0 0 1px var(--qb-green), 0 10px 26px -8px rgba(34, 197, 94, 0.55);
  animation: qbCorrectPop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes qbCorrectPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1.035); }
}

/* colour swatches */
.qb-swatches .qb-swatch {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(58px, 14vw, 70px);
  border-radius: 20px;
  background: var(--sw);
  border: 3px solid transparent;
  box-shadow: 0 8px 18px -2px color-mix(in srgb, var(--sw) 55%, transparent);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--sw-ink, #fff);
  text-transform: capitalize;
}
.qb-swatches .qb-swatch.is-correct {
  border-color: var(--qb-green);
  box-shadow: 0 0 0 2px var(--qb-green), 0 10px 26px -6px rgba(34, 197, 94, 0.6);
  animation: qbCorrectPop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.qb-swatches .qb-swatch.is-correct::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--qb-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* preposition pills + scene */
.qb-pills {
  margin-top: clamp(18px, 4vw, 24px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(7px, 1.8vw, 10px);
  max-width: 250px;
}
.qb-pill {
  padding: clamp(8px, 2vw, 11px) clamp(13px, 3vw, 17px);
  border-radius: 999px;
  background: #fff;
  border: 2px solid transparent;
  box-shadow: 0 6px 16px rgba(65, 36, 101, 0.08);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--qb-ink);
}
.qb-pill.is-correct {
  border-color: var(--qb-green);
  background: rgba(34, 197, 94, 0.12);
  color: #178347;
  box-shadow: 0 0 0 1px var(--qb-green), 0 8px 22px -6px rgba(34, 197, 94, 0.55);
  animation: qbCorrectPop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.qb-scene {
  position: relative;
  width: clamp(150px, 40vw, 190px);
  height: clamp(120px, 30vw, 150px);
  margin-top: clamp(4px, 1.4vw, 8px);
  perspective: 520px;
}
.qb-scene-ball {
  position: absolute;
  left: 50%;
  top: 6px;
  width: clamp(26px, 7vw, 32px);
  height: clamp(26px, 7vw, 32px);
  margin-left: calc(clamp(26px, 7vw, 32px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #b79bff, #6a1cf6 70%);
  box-shadow: 0 8px 16px -4px rgba(106, 28, 246, 0.55);
  z-index: 3;
  animation: qbBallDrop 3.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.qb-cube {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: clamp(64px, 17vw, 82px);
  height: clamp(46px, 12vw, 56px);
  transform: translateX(-50%);
  transform-style: preserve-3d;
}
.qb-cube-top,
.qb-cube-front,
.qb-cube-side { position: absolute; border-radius: 6px; }
.qb-cube-front {
  inset: auto 0 0 0;
  height: 70%;
  background: linear-gradient(#ff8a4d, #ef6a23);
}
.qb-cube-top {
  left: 8%;
  top: 0;
  width: 84%;
  height: 36%;
  background: linear-gradient(#ffb37e, #ff8a4d);
  transform: skewX(-32deg);
  transform-origin: bottom;
}
.qb-cube-side {
  right: -10%;
  bottom: 0;
  width: 18%;
  height: 70%;
  background: linear-gradient(#e85f1c, #c84f16);
  transform: skewY(-26deg);
}
@keyframes qbBallDrop {
  0%, 14% { transform: translateY(0) scale(1); }
  46% { transform: translateY(clamp(58px, 15vw, 74px)) scale(1, 0.86); }
  54% { transform: translateY(clamp(54px, 14vw, 70px)) scale(1.05, 1); }
  86%, 100% { transform: translateY(clamp(56px, 14.5vw, 72px)) scale(1); }
}

/* directions toy-city */
.qb-city {
  position: relative;
  width: clamp(168px, 44vw, 210px);
  height: clamp(120px, 30vw, 150px);
  margin-top: clamp(4px, 1.4vw, 8px);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #eef0f4, #e4e7ee);
  box-shadow: inset 0 0 0 1px rgba(36, 25, 55, 0.06);
}
.qb-road {
  position: absolute;
  background: #c2c7d2;
}
.qb-road-h { left: 0; right: 0; top: 46%; height: 22%; }
.qb-road-v { top: 0; bottom: 0; left: 44%; width: 20%; }
.qb-road-h::after,
.qb-road-v::after {
  content: "";
  position: absolute;
  background: repeating-linear-gradient(to right, #fff 0 9px, transparent 9px 18px);
}
.qb-road-h::after { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.qb-road-v::after { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, #fff 0 9px, transparent 9px 18px); }
.qb-bldg { position: absolute; border-radius: 5px; }
.qb-bldg-1 { left: 8%; top: 10%; width: 24%; height: 26%; background: #c8b6f3; }
.qb-bldg-2 { right: 8%; top: 8%; width: 22%; height: 30%; background: #ffc8a8; }
.qb-bldg-3 { left: 9%; bottom: 9%; width: 22%; height: 24%; background: #aed6c4; }
.qb-bldg-4 { right: 9%; bottom: 8%; width: 24%; height: 28%; background: #f6c5d6; }
.qb-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.qb-route path {
  fill: none;
  stroke: var(--qb-purple);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 6 7;
  stroke-dashoffset: 0;
  animation: qbRouteDash 1.1s linear infinite;
}
@keyframes qbRouteDash { to { stroke-dashoffset: -26; } }
.qb-duck {
  position: absolute;
  left: 44%;
  top: 50%;
  width: clamp(22px, 6vw, 28px);
  height: clamp(22px, 6vw, 28px);
  transform: translate(-50%, -50%);
  z-index: 3;
  filter: drop-shadow(0 3px 4px rgba(40, 24, 70, 0.28));
  animation: qbDuckGo 3.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.qb-duck svg { width: 100%; height: 100%; }
@keyframes qbDuckGo {
  0%, 16% { left: 50%; top: 86%; transform: translate(-50%, -50%) scaleX(1); }
  50% { left: 50%; top: 53%; transform: translate(-50%, -50%) scaleX(1); }
  72%, 100% { left: 82%; top: 53%; transform: translate(-50%, -50%) scaleX(1); }
}

/* progress dots */
.qb-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: clamp(10px, 2.4vw, 14px);
}
.qb-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(106, 28, 246, 0.2);
  transition: width 0.4s ease, background 0.4s ease;
}
.qb-dot.is-active {
  width: 18px;
  background: var(--qb-purple);
}

@media (max-width: 600px) {
  .qb-phone { width: min(100%, 300px); }
  .qb-stage { height: clamp(312px, 84vw, 360px); }
}

@media (prefers-reduced-motion: reduce) {
  .qb-blob,
  .qb-blob-aura,
  .qb-answer-digits::after,
  .qb-ball,
  .qb-scene-ball,
  .qb-duck,
  .qb-route path,
  .qb-opt.is-correct,
  .qb-pill.is-correct,
  .qb-swatches .qb-swatch.is-correct { animation: none !important; }
  .qb-screen {
    transition: opacity 0.2s linear;
    transform: none;
  }
  /* show only the first screen, statically, when motion is reduced */
  .qb-screen { opacity: 0; }
  .qb-screen-numbers { opacity: 1; pointer-events: auto; }
}

.is-embed .site-header,
.is-embed .footer { display: none !important; }
.is-embed .bigscreen-stage {
  padding-top: clamp(16px, 3vh, 30px);
  padding-bottom: clamp(16px, 3vh, 30px);
  min-height: 100vh;
  align-content: center;
}
.is-demo .hugescreen-wordmark,
.is-demo .hugescreen-about,
.is-demo .hugescreen-howto,
.is-demo .bigscreen-hint { display: none; }

.features-page .how {
  width: 100%;
  max-width: none;
}

.bigscreen-feature .mini-label {
  background: linear-gradient(
    110deg,
    rgba(106, 28, 246, 0.15) 0 50%,
    rgba(255, 119, 51, 0.18) 50% 100%
  );
}
.bigscreen-feature .mini-label .hs-quack { color: var(--purple); }
.bigscreen-feature .mini-label .hs-huge { color: #ff7733; margin-left: 0.45em; }

.btn-3d.bigscreen-feature-cta {
  color: #ffffff;
  background: #ff7733;
  box-shadow:
    0 6px 0 #bf5418,
    0 16px 36px rgba(255, 119, 51, 0.28);
}
.btn-3d.bigscreen-feature-cta:hover {
  background: #ff8c52;
}
.btn-3d.bigscreen-feature-cta:active {
  box-shadow:
    0 1px 0 #bf5418,
    0 8px 18px rgba(255, 119, 51, 0.18);
}

#testflightModal .testflight-dialog {
  text-align: center;
}

.testflight-qr-block {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: 20px;
}
.testflight-direct-block {
  display: block;
  margin-top: 18px;
}
.testflight-qr-card.bigscreen-qr-card {
  width: min(100%, 212px);
  margin: 0 auto;
  padding: 16px;
  gap: 0;
  background: #ffffff;
  border: 1px solid rgba(36, 25, 55, 0.1);
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(65, 36, 101, 0.12);
}
.testflight-qr-hint {
  margin: 0 auto;
  max-width: 300px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.hugescreen-fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0e0b16;
}
.hugescreen-fs-overlay iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.hugescreen-fs-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 14, 34, 0.55);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease;
}
.hugescreen-fs-close:hover { background: rgba(20, 14, 34, 0.78); }

.is-embed #bigscreenFsToggle { display: none; }

.hugescreen-wordmark {
  margin: 0;
  font: 900 clamp(2.1rem, 5vw, 3.3rem)/1.05 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.01em;
}
.hugescreen-wordmark .hs-quack { color: var(--purple); }
.hugescreen-wordmark .hs-huge { color: #ff7733; }

.hugescreen-about {
  margin: 0 auto;
  max-width: 540px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.hugescreen-howto {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 600px;
}
.hugescreen-step {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--line, rgba(36, 25, 55, 0.1));
  box-shadow: 0 8px 20px rgba(65, 36, 101, 0.06);
  text-align: center;
  animation: hsStep 4.2s ease-in-out infinite;
}
.hugescreen-step:nth-child(1) { animation-delay: 0s; }
.hugescreen-step:nth-child(2) { animation-delay: 1.4s; }
.hugescreen-step:nth-child(3) { animation-delay: 2.8s; }
.hugescreen-step-num {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(106, 28, 246, 0.1);
  color: var(--purple);
  font: 900 0.95rem "Plus Jakarta Sans", Inter, sans-serif;
  animation: hsNum 4.2s ease-in-out infinite;
}
.hugescreen-step:nth-child(1) .hugescreen-step-num { animation-delay: 0s; }
.hugescreen-step:nth-child(2) .hugescreen-step-num { animation-delay: 1.4s; }
.hugescreen-step:nth-child(3) .hugescreen-step-num { animation-delay: 2.8s; }
.hugescreen-step-label {
  font: 600 0.92rem/1.4 Inter, sans-serif;
  color: var(--ink, #19171f);
}
.hugescreen-step-label b { font-weight: 800; }
.hugescreen-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  background: #ff7733;
  color: #ffffff;
  font-weight: 800;
  white-space: nowrap;
}
.hugescreen-chip-ic { display: inline-flex; width: 13px; height: 13px; }
.hugescreen-chip-ic svg { width: 100%; height: 100%; display: block; }

@keyframes hsStep {
  0%, 100% { transform: translateY(0); box-shadow: 0 8px 20px rgba(65, 36, 101, 0.06); border-color: rgba(36, 25, 55, 0.1); }
  9% { transform: translateY(-7px); box-shadow: 0 16px 30px rgba(255, 119, 51, 0.26); border-color: rgba(255, 119, 51, 0.5); }
  24% { transform: translateY(0); box-shadow: 0 8px 20px rgba(65, 36, 101, 0.06); border-color: rgba(36, 25, 55, 0.1); }
}
@keyframes hsNum {
  0%, 100% { background: rgba(106, 28, 246, 0.1); color: var(--purple); transform: scale(1); }
  9% { background: #ff7733; color: #ffffff; transform: scale(1.12); }
  24% { background: rgba(106, 28, 246, 0.1); color: var(--purple); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hugescreen-step,
  .hugescreen-step .hugescreen-step-num { animation: none; }
}
@media (max-width: 560px) {
  .hugescreen-howto { gap: 8px; }
  .hugescreen-step { flex-basis: 96px; min-width: 90px; padding: 12px 8px; }
  .hugescreen-step-label { font-size: 0.78rem; }
}

.bigscreen-host-panel.host-reveal {
  animation: hsHostPanel 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.bigscreen-host-panel.host-reveal .bigscreen-host-eyebrow {
  animation: hsHostEyebrow 0.5s ease-out both;
}
.bigscreen-host-panel.host-reveal .bigscreen-avatar--host {
  animation:
    hsHostAvatar 0.8s cubic-bezier(0.18, 0.7, 0.25, 1.5) both,
    hsHostGlow 1.1s ease-out 0.1s;
}
.bigscreen-host-panel.host-reveal .bigscreen-host-name {
  animation: hsHostName 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.3) 0.14s both;
}
@keyframes hsHostPanel {
  0% { transform: scale(0.92); opacity: 0.2; }
  60% { transform: scale(1.025); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes hsHostEyebrow {
  0% { opacity: 0; transform: translateY(-7px); }
  100% { opacity: 1; transform: none; }
}
@keyframes hsHostAvatar {
  0% { transform: scale(0) rotate(-20deg); }
  58% { transform: scale(1.2) rotate(7deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes hsHostGlow {
  0% { box-shadow: 0 0 0 0 rgba(255, 119, 51, 0.55); }
  100% { box-shadow: 0 0 0 28px rgba(255, 119, 51, 0); }
}
@keyframes hsHostName {
  0% { opacity: 0; transform: translateY(18px) scale(0.82); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bigscreen-host-panel.host-reveal,
  .bigscreen-host-panel.host-reveal .bigscreen-host-eyebrow,
  .bigscreen-host-panel.host-reveal .bigscreen-avatar--host,
  .bigscreen-host-panel.host-reveal .bigscreen-host-name { animation: none; }
}

html.is-embed-fit,
body.is-embed-fit,
body.is-fullscreen { height: 100%; overflow: hidden; }
:fullscreen,
:-webkit-full-screen { overflow: hidden; }
.is-embed-fit .bigscreen-page,
body.is-fullscreen .bigscreen-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.is-embed-fit .bigscreen-stage,
body.is-fullscreen .bigscreen-stage { min-height: 0; }

.bigscreen-feature-head .hugescreen-wordmark {
  margin: 4px 0 0;
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

/* ==========================================================================
   Homepage phone reel — auto-playing showcase of the methodology animations
   (course creation, the situation builder, the varied quiz types, vocabulary
   memory, the profile nameplate). Decorative; the whole .phone-section is
   aria-hidden. Namespaced .pm-* so it can't affect anything else. Card look
   and keyframes mirror features.css.
   ========================================================================== */
.pm-app {
  /* ground-truth app palette (light theme) */
  --pm-orange: #ff7733;
  --pm-on-primary: #191919;
  --pm-purple: #6a1cf6;
  --pm-green: #22a06b;
  --pm-green-text: #1e6248;
  --pm-red: #e5484d;
  --pm-red-text: #7a2219;
  --pm-surface: #fdfdfd;
  --pm-ink: #191919;
  --pm-ink-var: #5a5a5a;
  --pm-outline: #c9cbd0;
  --pm-low: #ffffff;
  --pm-high: #f8f8fa;
  --pm-highest: #eeeef2;
  --pm-clue: #eb923c;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  gap: 10px;
  /* app surface with a faint purple corner wash */
  background: linear-gradient(135deg, rgba(106, 28, 246, 0.086) 0%, #fdfdfd 100%);
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--pm-ink);
}

/* faux status bar under the notch */
.pm-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0;
  color: var(--pm-ink);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.pm-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.pm-signal i { display: block; width: 3px; border-radius: 1px; background: var(--pm-ink); }
.pm-signal i:nth-child(1) { height: 5px; }
.pm-signal i:nth-child(2) { height: 7px; }
.pm-signal i:nth-child(3) { height: 9px; }
.pm-signal b {
  display: block; width: 16px; height: 9px; margin-left: 2px;
  border-radius: 3px; border: 1.5px solid var(--pm-ink); position: relative;
}
.pm-signal b::after { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; right: 5px; border-radius: 1px; background: var(--pm-ink); }

/* course top bar: close X · progress · energy */
.pm-chrome { display: flex; align-items: center; gap: 10px; padding: 2px 0 0; }
.pm-close {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: rgba(253, 253, 253, 0.65);
  color: var(--pm-orange);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.pm-close svg { width: 16px; height: 16px; }
.pm-progress { flex: 1 1 auto; height: 10px; border-radius: 999px; background: var(--pm-high); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
.pm-progress i { display: block; width: 58%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff7733, #ffa266); }
.pm-energy {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  background: #dfdfdf; color: var(--pm-ink);
  font-weight: 800; font-size: 0.82rem;
}
.pm-energy svg { width: 14px; height: 14px; color: #5a5a5a; }

/* cross-fading screen stack */
.pm-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.pm-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: flex-start;
  padding: 10px 0 4px;
  opacity: 0;
  transform: translateY(9px) scale(0.99);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.pm-screen.is-active { opacity: 1; transform: none; }
.pm-screen.pm-center { align-items: center; justify-content: center; text-align: center; }

/* shared screen text */
.pm-eyebrow { margin: 0; font: 800 0.72rem "Plus Jakarta Sans", Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pm-orange); }
.pm-h { margin: 0; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-weight: 800; font-size: 1.32rem; line-height: 1.16; letter-spacing: -0.01em; color: var(--pm-ink); }
.pm-q { margin: 0; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--pm-ink); line-height: 1.2; }
.pm-sub { margin: 0; font-family: "Inter", sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--pm-ink-var); }

/* 1 · input methods */
.pm-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.pm-input {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 13px;
  border-radius: 20px;
  background: var(--pm-low);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  font: 700 0.92rem "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--pm-ink);
}
.pm-input-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; }
.pm-input-ic svg { width: 21px; height: 21px; }
.pm-app .ic-purple { background: var(--pm-purple); }
.pm-app .ic-purple2 { background: #8b5cf6; }
.pm-app .ic-orange { background: var(--pm-orange); color: var(--pm-on-primary); }

/* 2 · situation -> course */
.pm-sit { display: grid; gap: 12px; margin: 2px 0 0; }
.pm-card { border-radius: 22px; background: var(--pm-low); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); padding: 16px 18px; }
.pm-tag { display: inline-block; margin-bottom: 8px; font: 800 0.66rem "Plus Jakarta Sans", Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pm-purple); }
.pm-prompt p { margin: 0; font-family: "Inter", sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--pm-ink); }
/* app-style course card: orange level badge + title + subtitle */
.pm-coursecard { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; background: var(--pm-low); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1); }
.pm-level { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: var(--pm-orange); color: var(--pm-on-primary); font: 800 1.1rem "Plus Jakarta Sans", Inter, sans-serif; }
.pm-coursemeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-coursemeta strong { font-family: "Plus Jakarta Sans", Inter, sans-serif; font-weight: 800; font-size: 1.16rem; color: var(--pm-ink); line-height: 1.1; }
.pm-coursemeta small { font-family: "Inter", sans-serif; font-size: 0.82rem; font-weight: 500; color: var(--pm-ink-var); }

/* 3 · multiple choice — _AnswerCard */
.pm-focus {
  align-self: center; margin: 2px auto 2px; padding: 9px 22px; border-radius: 14px;
  background: rgba(106, 28, 246, 0.094); border: 1px solid var(--pm-purple);
  font: 800 1.32rem "Plus Jakarta Sans", Inter, sans-serif; color: var(--pm-purple);
}
.pm-options { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 10px; }
.pm-options li {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border-radius: 28px;
  border: 2px solid transparent; background: var(--pm-low);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  font: 700 1.18rem "Plus Jakarta Sans", Inter, sans-serif; color: var(--pm-ink);
}
.pm-ab { flex: 0 0 auto; font: 800 0.82rem "Plus Jakarta Sans", Inter, sans-serif; color: var(--pm-orange); }
.pm-options li.is-correct { border-color: var(--pm-green); background: rgba(34, 160, 107, 0.09); color: var(--pm-green-text); }
.pm-options li.is-correct .pm-ab { color: var(--pm-green); }
.pm-correctmark { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--pm-green); color: #fff; }
.pm-correctmark svg { width: 14px; height: 14px; }
.pm-options-tight li { padding: 13px 16px; border-radius: 22px; font-size: 1.04rem; }

/* 4 · tap the word */
.pm-tapcard { padding: 18px; border-radius: 22px; background: var(--pm-high); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06); }
.pm-tapline { margin: 0; font: 700 1.42rem "Plus Jakarta Sans", Inter, sans-serif; line-height: 1.5; color: var(--pm-ink); }
.pm-tok { border-bottom: 2px solid #8b8b8b; padding-bottom: 1px; }
.pm-tok.is-tap { border-radius: 9px; border-bottom-color: transparent; background: rgba(255, 119, 51, 0.18); padding: 2px 7px; color: #b8470f; box-shadow: 0 0 0 2px rgba(255, 119, 51, 0.32); }
.pm-clue {
  align-self: center; padding: 9px 20px; border-radius: 18px;
  background: rgba(235, 146, 60, 0.1); border: 2px solid var(--pm-clue);
  font: 800 1.28rem "Plus Jakarta Sans", Inter, sans-serif; color: var(--pm-clue);
}

/* 5 · fill the blank */
.pm-fillcard { padding: 18px; border-radius: 20px; background: var(--pm-highest); font: 700 1.32rem "Plus Jakarta Sans", Inter, sans-serif; line-height: 1.5; color: var(--pm-ink); }
.pm-slot { display: inline-block; width: 56px; height: 1.1em; vertical-align: -0.18em; border-radius: 13px; border: 2px dashed var(--pm-purple); }
.pm-bank { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 0; }
.pm-bank span {
  padding: 11px 18px; border-radius: 999px;
  border: 1.6px solid var(--pm-purple); background: var(--pm-low);
  box-shadow: 0 6px 14px rgba(106, 28, 246, 0.14);
  font: 800 1.06rem "Plus Jakarta Sans", Inter, sans-serif; color: var(--pm-purple);
}

/* 6 · build the sentence */
.pm-slots { display: flex; flex-wrap: wrap; gap: 9px; margin: 2px 0 0; min-height: 50px; }
.pm-slots span {
  min-width: 56px; min-height: 46px; padding: 11px 16px; border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px dashed rgba(106, 28, 246, 0.4);
  font: 700 1.02rem "Plus Jakarta Sans", Inter, sans-serif; color: var(--pm-purple);
}
.pm-slots span.is-filled { border-style: solid; border-color: var(--pm-purple); background: rgba(106, 28, 246, 0.094); }
.pm-banklabel { margin: 8px 0 0; font: 800 0.7rem "Plus Jakarta Sans", Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pm-ink-var); }
.pm-tiles { display: flex; flex-wrap: wrap; gap: 9px; margin: 2px 0 0; }
.pm-tiles span {
  padding: 11px 17px; border-radius: 22px; background: var(--pm-orange);
  box-shadow: 0 6px 14px rgba(255, 119, 51, 0.28);
  font: 700 1rem "Plus Jakarta Sans", Inter, sans-serif; color: var(--pm-on-primary);
}

/* 7 · match the pairs */
.pm-match { display: flex; gap: 14px; margin: 2px 0 0; }
.pm-match-col { display: grid; gap: 10px; flex: 1; }
.pm-match-col span {
  padding: 14px 12px; border-radius: 18px; border: 2px solid transparent;
  background: var(--pm-low); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.07);
  text-align: center; font: 700 1.02rem "Plus Jakarta Sans", Inter, sans-serif; color: var(--pm-ink);
}
.pm-match-col span.is-matched { border-color: var(--pm-green); background: rgba(34, 160, 107, 0.09); color: var(--pm-green-text); text-decoration: line-through; }

/* 8 · type it */
.pm-promptcard { padding: 16px 18px; border-radius: 20px; background: rgba(106, 28, 246, 0.078); border: 1.5px solid rgba(106, 28, 246, 0.4); font: 800 1.32rem "Plus Jakarta Sans", Inter, sans-serif; color: var(--pm-purple); }
.pm-field {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 16px;
  border: 1.6px solid var(--pm-outline); background: var(--pm-low);
}
.pm-field > span:first-child { flex: 1 1 auto; font: 700 1.16rem "Plus Jakarta Sans", Inter, sans-serif; color: var(--pm-ink); }
.pm-fieldmark { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--pm-green); color: #fff; }
.pm-fieldmark svg { width: 15px; height: 15px; }
.pm-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.12em; background: var(--pm-purple); animation: pmBlink 1.05s step-end infinite; }
@keyframes pmBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* 9 · listen & pick */
.pm-audiocard { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 18px; border-radius: 28px; background: #fdfdfe; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); }
.pm-play { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 999px; background: var(--pm-orange); color: #fff; box-shadow: 0 0 0 8px rgba(255, 119, 51, 0.12), 0 12px 26px rgba(255, 119, 51, 0.4); }
.pm-play svg { width: 36px; height: 36px; }
.pm-audiopills { display: flex; gap: 10px; }
.pm-apill { padding: 7px 16px; border-radius: 999px; background: rgba(255, 119, 51, 0.12); border: 1.4px solid rgba(255, 119, 51, 0.4); font: 700 0.86rem "Plus Jakarta Sans", Inter, sans-serif; color: #b8470f; }

/* 10 · speak it — signature morphing mic orb */
.pm-phrasecard { padding: 16px 20px; border-radius: 22px; background: var(--pm-highest); font: 800 1.34rem "Plus Jakarta Sans", Inter, sans-serif; color: var(--pm-ink); }
.pm-orbwrap { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin: 14px auto 6px; }
.pm-orb-halo { position: absolute; inset: -10px; border-radius: 999px; border: 2px solid rgba(255, 119, 51, 0.35); animation: pmHalo 2.6s ease-out infinite; }
.pm-orb {
  position: relative; display: grid; place-items: center; width: 150px; height: 150px;
  background: linear-gradient(135deg, #ff7733, #ffa266);
  box-shadow: 0 0 0 10px rgba(255, 119, 51, 0.1), 0 18px 44px rgba(255, 119, 51, 0.5);
  border-radius: 47% 53% 44% 56% / 54% 46% 54% 46%;
  animation: pmOrbMorph 6s ease-in-out infinite;
}
.pm-orb svg { width: 52px; height: 52px; }

/* 11 · mini-dialog / conversation */
.pm-chat { display: grid; gap: 12px; margin: 2px 0 0; }
.pm-bubble { max-width: 84%; padding: 14px 17px; border-radius: 22px; font: 600 1.04rem "Inter", sans-serif; line-height: 1.34; }
.pm-them { justify-self: start; border-bottom-left-radius: 5px; background: var(--pm-highest); color: var(--pm-ink); }
.pm-you { justify-self: end; border-bottom-right-radius: 5px; background: var(--pm-orange); color: var(--pm-on-primary); }

/* 12 · vocabulary card */
.pm-word { margin: 2px 0 0; padding: 18px 20px; border-radius: 24px; background: var(--pm-low); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1); }
.pm-word-top { display: flex; align-items: center; justify-content: space-between; }
.pm-word-top b { font: 800 1.28rem "Plus Jakarta Sans", Inter, sans-serif; color: var(--pm-ink); }
.pm-star { display: inline-grid; place-items: center; color: var(--pm-orange); }
.pm-star svg { width: 22px; height: 22px; }
.pm-word > p { margin: 6px 0 13px; font-family: "Inter", sans-serif; color: var(--pm-ink-var); font-size: 0.96rem; }
.pm-bar { height: 8px; border-radius: 999px; background: var(--pm-high); overflow: hidden; }
.pm-bar i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff7733, #ffa266); }
.pm-word small { display: block; margin-top: 10px; font: 800 0.7rem "Plus Jakarta Sans", Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pm-green-text); }

/* 13 · nameplate — Discord-style translucent banner */
.pm-banner { position: relative; display: flex; align-items: center; gap: 12px; height: 62px; margin-top: 4px; padding-left: 10px; border-radius: 14px; overflow: hidden; background: var(--pm-highest); }
.pm-banner-art { position: absolute; inset: 0; background: linear-gradient(90deg, #6a1cf6, #8b5cf6 45%, #ff7733); -webkit-mask-image: linear-gradient(90deg, transparent 0 20%, #000 72%); mask-image: linear-gradient(90deg, transparent 0 20%, #000 72%); opacity: 0.56; }
.pm-banner-av { position: relative; z-index: 1; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px; background: radial-gradient(circle at 40% 35%, #ffe06a, #ffb347); box-shadow: 0 0 0 3px var(--pm-surface); }
.pm-banner-name { position: relative; z-index: 1; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--pm-ink); }
.pm-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.pm-chip2 { padding: 9px 15px; border-radius: 999px; background: rgba(106, 28, 246, 0.094); border: 1px solid rgba(106, 28, 246, 0.3); color: var(--pm-purple); font: 800 0.86rem "Plus Jakarta Sans", Inter, sans-serif; }

/* persistent bottom CTA */
.pm-cta {
  flex: 0 0 auto; display: grid; place-items: center;
  height: 52px; border-radius: 999px; margin-top: 2px;
  background: var(--pm-orange); color: var(--pm-on-primary);
  box-shadow: 0 10px 22px rgba(255, 119, 51, 0.34);
  font: 800 1.12rem "Plus Jakarta Sans", Inter, sans-serif;
}

/* floating accent card reuses .accuracy-card positioning */
.accuracy-card.pm-float strong { color: var(--pm-purple); }
/* sits beside the up-scaled phone frame: nudge out + size up to match */
.accuracy-card.pm-float {
  right: -36px;
  bottom: 132px;
  width: 196px;
  padding: 18px;
}
.accuracy-card.pm-float span,
.accuracy-card.pm-float small { font-size: 0.74rem; }
.accuracy-card.pm-float strong { font-size: 1.34rem; }

@keyframes pmHalo { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes pmOrbMorph {
  0%   { border-radius: 47% 53% 44% 56% / 54% 46% 54% 46%; }
  33%  { border-radius: 58% 42% 55% 45% / 43% 57% 43% 57%; }
  66%  { border-radius: 42% 58% 48% 52% / 56% 44% 60% 40%; }
  100% { border-radius: 47% 53% 44% 56% / 54% 46% 54% 46%; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-screen { transition: opacity 200ms ease; transform: none; }
  .pm-orb, .pm-orb-halo, .pm-caret { animation: none !important; }
  .pm-orb { border-radius: 50%; }
}

/* ==========================================================================
   /hugescreen-demo/ — the public demo round.
   The wall is /hugescreen/ itself in a .bigscreen-screen bezel (reused, not
   forked); everything below is the PAD, the browser stand-in for a player's
   phone. Namespaced .hsd-* so it can only ever affect that page.
   ========================================================================== */

/* The CTA the wall page shows under its join hint. Both marketing embeds
   (homepage + business) disable pointer events on the iframe, so a visible
   button in there would be dead on arrival — hide it in every embedded and
   scripted-demo context, exactly where the wall stops being interactive. */
.is-demo .hugescreen-demo-cta,
.is-embed .hugescreen-demo-cta { display: none; }
.hugescreen-demo-cta { margin-top: 4px; }

/* `hidden` has to win here: an author `display` beats the UA's [hidden] rule,
   and almost every part of the pad is toggled with the attribute. */
.hsd-page [hidden] { display: none !important; }

.hsd-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
  padding-bottom: 34px;
}
.hsd-headline {
  margin: 0;
}
.hsd-lede {
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.hsd-start {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}
.hsd-field {
  display: grid;
  gap: 7px;
  text-align: start;
}
.hsd-field > span {
  color: #332a44;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hsd-field input[type="text"] {
  width: min(260px, 70vw);
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(106, 28, 246, 0.2);
  border-radius: 999px;
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(65, 36, 101, 0.08);
  font: 800 0.95rem Inter, sans-serif;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.hsd-field input[type="text"]::placeholder {
  color: rgba(36, 25, 55, 0.45);
  font-weight: 600;
}
.hsd-field input[type="text"]:focus {
  border-color: rgba(106, 28, 246, 0.55);
  box-shadow:
    0 8px 20px rgba(65, 36, 101, 0.08),
    0 0 0 4px rgba(106, 28, 246, 0.14);
}
.hsd-start-btn {
  min-height: 50px;
  padding: 0 30px;
  font-size: 0.98rem;
}
.hsd-start-btn[disabled] {
  opacity: 0.6;
  cursor: default;
}
/* Honeypot: off-screen for people, in the DOM for form-fillers. */
.hsd-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.hsd-note {
  margin: 12px 0 0;
  min-height: 1.2em;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.hsd-stage {
  display: grid;
  /* minmax(0, 1fr), never plain `auto`: an implicit auto column is floored at
     the widest item's MIN-content, and the pad's chip row is nowrap — on a
     375px phone that pushed the whole stage 23px past the viewport, hidden
     only by the global overflow-x. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 28px);
  padding-top: 0;
}
.hsd-screen-tag {
  gap: 9px;
}
.hsd-screen-code {
  color: var(--purple);
  letter-spacing: 0.18em;
}

/* ── the pad ──────────────────────────────────────────────────────────── */
.hsd-pad {
  width: min(560px, 100%);
  margin-inline: auto;
  display: grid;
  gap: 14px;
  padding: clamp(16px, 2.4vw, 24px);
  border-radius: 30px 26px 32px 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.hsd-pad-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  min-height: 44px;
}
.hsd-pad-who {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}
.hsd-pad-name {
  font: 900 1.02rem "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hsd-pad-code {
  font: 800 0.74rem Inter, sans-serif;
  letter-spacing: 0.18em;
  color: var(--purple);
}
.hsd-pad-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.hsd-chip {
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(106, 28, 246, 0.1);
  color: var(--purple);
  font: 900 0.7rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.hsd-chip-level {
  background: rgba(172, 79, 246, 0.13);
  color: #8a2fd6;
}

.hsd-ring {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.hsd-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.hsd-ring circle {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}
.hsd-ring-track { stroke: rgba(106, 28, 246, 0.14); }
.hsd-ring-fill {
  stroke: var(--purple);
  transition: stroke-dashoffset 120ms linear, stroke 200ms ease;
}
.hsd-ring.is-low .hsd-ring-fill { stroke: #ff7733; }
.hsd-ring-num {
  position: relative;
  font: 900 0.86rem "Plus Jakarta Sans", Inter, sans-serif;
  color: var(--ink);
}

.hsd-prompt {
  margin: 0;
  color: var(--ink);
  font: 800 1.02rem/1.3 "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* THE LOCKED SLOT MAPPING. Colours and grid positions are identical to
   .bigscreen-answer[data-slot] on the wall and to _kAnswerSlots in
   lib/pages/big_screen_player_page.dart: 0 purple triangle top-left,
   1 orange diamond top-right, 2 green circle bottom-left, 3 violet square
   bottom-right. Never re-order, never re-tint. */
.hsd-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  /* NEVER mirror. The slot positions are a physical contract with the wall and
     the phone, not a reading order — and on this page the two directions have
     different owners: the wall follows the HOST's locale, the pad follows the
     language the visitor picked in the site header. Under `dir="rtl"` the grid
     flipped the purple triangle to the top-RIGHT while the wall stayed
     left-to-right. Pinned, so slot 0 is top-left in all 15 languages. */
  direction: ltr;
}
.hsd-slot {
  display: grid;
  place-items: center;
  min-height: clamp(86px, 22vw, 116px);
  padding: 0;
  border: 0;
  border-radius: 26px 22px 28px 20px;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(65, 36, 101, 0.16);
  cursor: pointer;
  transform: translateY(0);
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 200ms ease,
    filter 200ms ease;
}
.hsd-slot[data-slot="0"] { background: linear-gradient(135deg, #8b5cf6 0%, #6a1cf6 100%); }
.hsd-slot[data-slot="1"] { background: linear-gradient(135deg, #ffa266 0%, #ff7733 100%); }
.hsd-slot[data-slot="2"] { background: linear-gradient(135deg, #3fae82 0%, #2f8f6a 100%); }
.hsd-slot[data-slot="3"] { background: linear-gradient(135deg, #c98bff 0%, #ac4ff6 100%); }
.hsd-slot-glyph {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px 16px 20px 14px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 1.5rem;
  line-height: 1;
}
.hsd-slot:hover { transform: translateY(-2px); }
.hsd-slot:active { transform: translateY(3px); box-shadow: 0 6px 14px rgba(65, 36, 101, 0.14); }
/* Idle preview: the shapes are spans, not buttons — inert by construction. */
.hsd-pad[data-state="idle"] .hsd-slot {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}
.hsd-pad[data-state="idle"] .hsd-slot:hover { transform: none; }
.hsd-slots[data-locked="1"] .hsd-slot {
  cursor: default;
  opacity: 0.42;
  filter: saturate(0.75);
}
.hsd-slots[data-locked="1"] .hsd-slot:hover { transform: none; }
.hsd-slots[data-locked="1"] .hsd-slot.is-picked {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 4px rgba(25, 23, 31, 0.14), 0 14px 28px rgba(65, 36, 101, 0.2);
}
.hsd-slots[data-locked="1"] .hsd-slot.is-correct {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 4px #2f8f6a, 0 14px 28px rgba(47, 143, 106, 0.28);
}
.hsd-slots[data-locked="1"] .hsd-slot.is-wrong {
  opacity: 0.72;
  box-shadow: 0 0 0 4px rgba(230, 59, 46, 0.75), 0 14px 28px rgba(65, 36, 101, 0.2);
}

/* ── assemble builder (the word-combine kind) ─────────────────────────── */
.hsd-build {
  display: grid;
  gap: 10px;
}
.hsd-build-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}
.hsd-build-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
  padding: 9px;
  border: 1px dashed rgba(106, 28, 246, 0.28);
  border-radius: 18px 16px 20px 14px;
  background: rgba(106, 28, 246, 0.045);
}
.hsd-build-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hsd-tile {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font: 800 0.92rem Inter, sans-serif;
  cursor: pointer;
  transition: opacity 160ms ease, transform 140ms ease;
}
.hsd-tile.is-used {
  opacity: 0.28;
  pointer-events: none;
}
.hsd-pad[data-state="locked"] .hsd-tile,
.hsd-pad[data-state="correct"] .hsd-tile,
.hsd-pad[data-state="wrong"] .hsd-tile { cursor: default; }
.hsd-tile-placed {
  border-color: rgba(106, 28, 246, 0.4);
  color: var(--purple);
}
.hsd-build-submit {
  justify-self: start;
  min-height: 44px;
}
.hsd-build-submit[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* ── the spotlight round (the spectator beat) ─────────────────────────────
   The AI asks one player to answer OUT LOUD. On this page that is always a
   practice player — the site denies the microphone site-wide, so no browser
   here can hold one — and the pad's job for those seconds is to say who is up
   and that the visitor's turn comes back on its own. The wall above is already
   running the full picture, so this stays deliberately small and flat. Orange
   is the accent the wall uses for the same round, so the two read as one. */
.hsd-spot {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 16px 14px;
  border-radius: 26px 22px 28px 20px;
  border: 1px solid rgba(255, 119, 51, 0.3);
  background: rgba(255, 119, 51, 0.07);
  text-align: center;
}
.hsd-spot-eyebrow {
  margin: 0;
  color: #b25417;
  font: 900 0.68rem "Plus Jakarta Sans", Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hsd-spot-who {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
}
.hsd-spot-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  /* The spotlight accent, deliberately NOT the wall's per-player avatar tint:
     that one is handed out in first-seen order and cannot be recomputed here,
     so matching it would be a coin flip. One accent that means "this is the
     player under the spotlight" reads right at 30px and can never disagree. */
  background: #ff7733;
  color: #ffffff;
  font: 900 0.85rem "Plus Jakarta Sans", Inter, sans-serif;
}
.hsd-spot-name {
  color: var(--ink);
  font: 900 1.06rem "Plus Jakarta Sans", Inter, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hsd-spot-steps {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hsd-spot-step {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 119, 51, 0.22);
  transition: background 220ms ease;
}
/* ask → listen → check, filling as the round moves. The verdict keeps all
   three lit and takes its colour from the outcome. */
.hsd-spot[data-phase="asking"] .hsd-spot-step[data-step="0"],
.hsd-spot[data-phase="listening"] .hsd-spot-step[data-step="0"],
.hsd-spot[data-phase="listening"] .hsd-spot-step[data-step="1"],
.hsd-spot[data-phase="thinking"] .hsd-spot-step,
.hsd-spot[data-phase="verdict"] .hsd-spot-step { background: #ff7733; }
.hsd-spot[data-outcome="correct"] .hsd-spot-step { background: #2f8f6a; }
.hsd-spot[data-outcome="wrong"] .hsd-spot-step,
.hsd-spot[data-outcome="no_answer"] .hsd-spot-step { background: var(--purple); }
.hsd-spot[data-outcome="ended"] .hsd-spot-step {
  background: rgba(255, 119, 51, 0.22);
}
/* A slow breath on the beat the round is standing on: enough to read as
   "still running", nowhere near enough to compete with the wall. */
.hsd-spot[data-phase="asking"] .hsd-spot-step[data-step="0"],
.hsd-spot[data-phase="listening"] .hsd-spot-step[data-step="1"],
.hsd-spot[data-phase="thinking"] .hsd-spot-step[data-step="2"] {
  animation: hsd-spot-breathe 1.6s ease-in-out infinite;
}
@keyframes hsd-spot-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .hsd-spot-step { animation: none; }
}
.hsd-spot-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  font-weight: 600;
  text-wrap: balance;
}

/* ── status + tally ───────────────────────────────────────────────────── */
.hsd-status {
  margin: 0;
  min-height: 1.4em;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 700;
  text-wrap: balance;
}
.hsd-pad[data-state="locked"] .hsd-status { color: var(--purple); }
.hsd-pad[data-state="correct"] .hsd-status { color: #1f7a58; }
.hsd-pad[data-state="wrong"] .hsd-status { color: #c4372c; }
.hsd-pad[data-state="spotlight"] .hsd-status { color: #b25417; }
/* Once the verdict lands, the line takes the outcome's colour so the words and
   the beats above them agree. Same specificity as the rule above, so it has to
   sit after it; `close` keeps the spotlight orange, which is what partial
   credit looks like everywhere else in the room. */
.hsd-spot[data-outcome="correct"] ~ .hsd-status { color: #1f7a58; }
.hsd-spot[data-outcome="wrong"] ~ .hsd-status,
.hsd-spot[data-outcome="no_answer"] ~ .hsd-status { color: var(--purple); }

.hsd-tally {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.hsd-tally-cell {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 18px 16px 20px 14px;
  background: rgba(106, 28, 246, 0.06);
}
.hsd-tally-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hsd-tally-value {
  color: var(--ink);
  font: 900 1.25rem "Plus Jakarta Sans", Inter, sans-serif;
}
.hsd-pad-again {
  display: grid;
  justify-items: center;
}
.hsd-again-btn {
  min-height: 46px;
  padding: 0 26px;
}

/* ── after the round ──────────────────────────────────────────────────── */
.hsd-after {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 18px;
  padding-top: 20px;
}
.hsd-practice {
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.6;
}
.hsd-back {
  color: var(--purple);
  font: 900 0.9rem "Plus Jakarta Sans", Inter, sans-serif;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 600px) {
  .hsd-hero { padding-bottom: 24px; }
  .hsd-lede { font-size: 0.98rem; }
  .hsd-start { gap: 10px; }
  .hsd-field { flex: 1 1 100%; justify-items: center; text-align: center; }
  .hsd-field input[type="text"] { width: min(320px, 82vw); }
  .hsd-start-btn { width: min(320px, 82vw); }
  .hsd-slot-glyph { width: 46px; height: 46px; font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hsd-slot,
  .hsd-tile { transition: none; }
  .hsd-slot:hover,
  .hsd-slot:active { transform: none; }
  .hsd-ring-fill { transition: none; }
}

/* ── Aurora bars ──────────────────────────────────────────────────────────
   Canvas backdrop of undulating bars. The blur is applied here rather than
   drawn, so the canvas itself stays cheap: one filter on one element. */
.aurora-bars {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Sinks the bottom corners into the surface so the bars have no hard footing
   and the text above them keeps its contrast. */
.aurora-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The grid was locked to three columns at every width: on a phone the tiles
   squeezed to 137px wide and stretched to 572px tall. */
@media (max-width: 1040px) {
  .plus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .plus-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Plus section (variant B): full-bleed + feathered top and bottom ──────
   The variant was built for a review panel that was already full width, so it
   uses width:100%. Dropped into a padded page container it left white gutters
   down both sides. This breaks it out of the container, and masks the top and
   bottom edges so the purple dissolves into the page instead of starting and
   stopping on a hard line. The stage's own 64-124px padding keeps the fade
   clear of the text. */
/* Class repeated on purpose: the variant ships its own `width: 100%` in a
   <style> block that sits later in the document, so an equal-specificity rule
   here loses. Doubling the class outranks it without resorting to !important. */
#panel-b .pv-b-section.pv-b-section {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(48px, 6vw, 88px);
}

/* Straight edges, no feathering: the gradient fade read as a smear where the
   purple met the page. The section is simply pushed clear of the cards above
   it instead, so the hard edge has room to breathe. */

/* Registered-mark symbol on the wordmark. Small, raised and non-selectable so
   it reads as a legal notice rather than part of the name — and so copying the
   brand name does not drag the symbol along. */
.brand-tm {
  font-size: 0.44em;
  font-weight: 700;
  top: -0.75em;
  margin-left: 0.12em;
  letter-spacing: 0;
  user-select: none;
}

/* Trademark line in the footer: a legal notice, so it sits quieter than the
   copyright line above it without disappearing. */
.footer-tm {
  display: block;
  margin-top: 4px;
  opacity: 0.72;
}

/* The hidden player mark: visually identical to the rest of the word, but it
   must not show a text cursor or a selection callout that would give it away. */
[data-tv] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---------------------------------------------------------------------------
   Weekly Challenge button on the home hero, right under the store badges. It
   borrows .store-button for its shape and its 900px / 520px rules, so on a
   phone it is the same width as the one badge that shows. Purple, not the
   HugeScreen orange: white on #6a1cf6 is 6.75:1, white on #ff7733 is 2.6:1
   and fails AA for the small line.
--------------------------------------------------------------------------- */
.hero-play {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
  padding-bottom: 12px;
}

.store-button.store-button--play {
  background: var(--purple);
  box-shadow:
    0 6px 0 var(--purple-dark),
    0 14px 26px rgba(106, 28, 246, 0.24);
}

.store-button.store-button--play:hover {
  background: #772aff;
}

.store-button.store-button--play:active {
  transform: translateY(5px);
  box-shadow:
    0 1px 0 var(--purple-dark),
    0 8px 18px rgba(106, 28, 246, 0.16);
}

/* Some languages run longer than "Weekly Challenge"; let them wrap inside the
   pill rather than push it wider than the screen. */
.store-button--play small,
.store-button--play strong {
  white-space: normal;
}

.store-button--play .store-icon svg {
  width: 26px;
  height: 26px;
}

/* On a computer the two badges sit side by side 16px apart; the extra 4px
   puts this button the same 16px under them. */
@media (min-width: 901px) {
  .hero .hero-play {
    justify-content: center;
    margin-top: 4px;
  }
}

@media (max-width: 900px) {
  .hero-play {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}

/* Below 520px the store badges sit in a content-sized grid track (see
   .store-buttons there; justify-content: center is what stops the track
   stretching). The same grid here keeps this button hugging its own label
   like the badge above it, instead of stretching wider than it. */
@media (max-width: 520px) {
  .hero-play {
    display: grid;
    gap: 14px;
    justify-content: center;
    justify-items: center;
  }
}