/*
 * Landing page (phoneremo.com), spec §10.1. "Living-room premium": dark,
 * cinematic, one violet accent and the mint signal color for anything live.
 * Logical properties throughout, so the Hebrew (RTL) page mirrors itself.
 */

.landing { overflow-x: clip; }
.landing main:focus { outline: none; }

/* Shared stroke icons */
.hero__points svg, .tv__features svg, .tv__note > svg, .step__icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[dir="rtl"] .flip { transform: scaleX(-1); }

/* ---- hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--s-8) var(--s-9);
}
@media (min-width: 960px) { .hero { padding-block: var(--s-9) var(--s-10); } }

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.hero__orb {
  position: absolute;
  inline-size: 70vmax;
  block-size: 70vmax;
  border-radius: 50%;
  opacity: .55;
  will-change: transform;
}
.hero__orb--a {
  inset-block-start: -38vmax;
  inset-inline-end: -22vmax;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--violet-500) 55%, transparent), transparent);
  animation: orb-drift 22s var(--ease-in-out) infinite alternate;
}
.hero__orb--b {
  inset-block-end: -46vmax;
  inset-inline-start: -30vmax;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--mint-600) 32%, transparent), transparent);
  animation: orb-drift 28s var(--ease-in-out) infinite alternate-reverse;
}
.hero__grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--ink-300) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--ink-300) 7%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%);
}
@keyframes orb-drift { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } }

.hero__layout {
  display: grid;
  gap: var(--s-8);
  align-items: center;
}
@media (min-width: 960px) {
  .hero__layout { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--s-8); }
}

.hero__copy { display: grid; gap: var(--s-5); justify-items: start; }
.hero__eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding-block: var(--s-1);
  padding-inline: var(--s-1) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.hero__wordmark {
  padding-block: 2px;
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
}
/* The Hebrew wordmark appears on the Hebrew hero only (§9.1). */
html[lang="en"] .hero__wordmark { display: none; }
html[lang="en"] .hero__eyebrow { padding-inline-start: var(--s-4); }
/* Narrow phones: the eyebrow wraps, and a two-line pill reads as a broken
   shape, so the outer capsule drops away and only the wordmark keeps its pill. */
@media (max-width: 479px) {
  html .hero__eyebrow { padding: 0; border: 0; background: none; }
}

.hero__title {
  font-size: clamp(2.6rem, 7.2vw, var(--fs-5xl));
  font-weight: var(--fw-black);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  background: linear-gradient(180deg, #FFFFFF 30%, var(--violet-300) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[lang="he"] .hero__title { letter-spacing: -0.015em; line-height: 1.06; }
.hero__lead {
  max-inline-size: 36rem;
  color: var(--text-muted);
  font-size: clamp(var(--fs-md), 1.6vw, var(--fs-lg));
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-2); }
@media (max-width: 520px) { .hero__actions { align-self: stretch; } .hero__actions .pr-btn { flex: 1 1 100%; } }
.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.hero__points li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__points svg { inline-size: 18px; block-size: 18px; color: var(--mint-500); stroke-width: 2.5; }

/* ---- live demo card ------------------------------------------------------- */
.demo {
  --_tile: 220px;
  position: relative;
  display: grid;
  gap: var(--s-4);
  justify-self: center;
  inline-size: min(100%, 440px);
  min-block-size: 520px;
  padding: var(--s-6);
  overflow: hidden;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--violet-500) 18%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--surface-2) 90%, transparent), color-mix(in oklab, var(--surface) 96%, transparent));
  box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in oklab, var(--violet-400) 18%, transparent);
  backdrop-filter: blur(10px);
}
.demo__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.demo__badge { color: var(--mint-400); border-color: color-mix(in oklab, var(--mint-500) 30%, transparent); }
.demo__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.demo__stage { position: relative; display: grid; }
.demo__stage > * { grid-area: 1 / 1; }

/* Concentric signal rings behind the QR */
.demo__qr { position: relative; }
.demo__rings { position: absolute; inset: -44px; pointer-events: none; }
.demo__rings span {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in oklab, var(--mint-500) 35%, transparent);
  border-radius: 50%;
  opacity: 0;
  animation: ring 3.6s var(--ease-out) infinite;
}
.demo__rings span:nth-child(2) { animation-delay: 1.2s; }
.demo__rings span:nth-child(3) { animation-delay: 2.4s; }
.demo:not([data-state="ready"]) .demo__rings { display: none; }
@keyframes ring {
  0% { opacity: 0; transform: scale(.7); }
  25% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.35); }
}

/*
 * The live, connected and offline views share one grid cell and all take part
 * in layout; only the current one is visible. The stage is therefore always as
 * tall as the tallest view, and no state change (connecting → offline → ready,
 * at whatever time a slow network brings it) can move the card or the hero copy
 * beside it (CLS). `visibility: hidden` also takes the other views out of the
 * accessibility tree and the tab order.
 */
.demo__live, .demo__connected, .demo__offline {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--s-3);
  text-align: center;
  visibility: hidden;
}
.demo__mobile { display: none; align-content: start; justify-items: center; gap: var(--s-3); text-align: center; }
.demo[data-state="connecting"] .demo__live,
.demo[data-state="ready"] .demo__live,
.demo[data-state="connected"] .demo__connected,
.demo[data-state="offline"] .demo__offline { visibility: visible; animation: pr-pop var(--dur-3) var(--ease-out); }
/* Views that are not shown keep their size but run no animations. */
.demo:not([data-state="offline"]) .demo__anim * { animation: none; }
.demo:not([data-state="connected"]) .demo__signal path { animation: none; }

.demo__tile { position: relative; inline-size: var(--_tile); aspect-ratio: 1; padding: 14px; }
.demo__tile-skeleton {
  position: absolute;
  inset: 14px;
  overflow: hidden;
  border-radius: 6px;
  background: repeating-conic-gradient(var(--ink-200) 0 25%, #FFFFFF 0 50%) 0 0 / 22px 22px;
  opacity: .45;
}
/* The sweep moves by transform only: it runs on the compositor and costs the
   main thread no repaints while the QR is on its way (time-to-QR gate). */
.demo__tile-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .75) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 1.4s linear infinite;
}
.demo:not([data-state="connecting"]) .demo__tile-skeleton { display: none; }
@keyframes shimmer { to { transform: translateX(100%); } }

.demo__scan { font-weight: var(--fw-bold); }
.demo__code { display: inline-flex; align-items: baseline; gap: var(--s-3); color: var(--text-muted); font-size: var(--fs-sm); }
.demo__code.is-empty { visibility: hidden; }
.demo__code-value {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: .18em;
  direction: ltr;
  unicode-bidi: isolate;
}
.demo__or { color: var(--text-muted); font-size: var(--fs-sm); max-inline-size: 30ch; }

.demo__signal svg { inline-size: 88px; block-size: 88px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.demo__signal circle { stroke: color-mix(in oklab, var(--mint-500) 45%, transparent); stroke-width: 2; fill: color-mix(in oklab, var(--mint-500) 10%, transparent); }
.demo__signal path { stroke: var(--mint-400); stroke-width: 3.5; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw var(--dur-4) var(--ease-out) .1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.demo__signal { margin-block: var(--s-6) var(--s-2); filter: drop-shadow(0 0 24px color-mix(in oklab, var(--mint-500) 45%, transparent)); }
.demo__connected-title { font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.demo__connected-hint { color: var(--text-muted); max-inline-size: 32ch; }
.demo__players { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); padding: 0; margin-block-start: var(--s-3); list-style: none; }

.demo__offline p { color: var(--text-muted); max-inline-size: 34ch; }
.demo__anim { inline-size: 100%; max-inline-size: 340px; margin-block-start: var(--s-3); }
.demo__anim .a-screen { fill: var(--ink-900); stroke: var(--border-strong); stroke-width: 2; }
.demo__anim .a-stand { fill: var(--ink-600); }
.demo__anim .a-tiles rect { fill: var(--surface-3); }
.demo__anim .a-tiles rect:nth-child(2) { fill: color-mix(in oklab, var(--violet-500) 55%, var(--surface-3)); animation: tile-hot 6s var(--ease-in-out) infinite; }
.demo__anim .a-cursor circle { fill: color-mix(in oklab, var(--violet-400) 30%, transparent); stroke: var(--violet-300); stroke-width: 2; }
.demo__anim .a-cursor .a-cursor-dot { fill: #FFFFFF; stroke: none; }
.demo__anim .a-cursor { animation: cursor-path 6s var(--ease-in-out) infinite; }
.demo__anim .a-phone rect { fill: var(--ink-800); stroke: var(--ink-300); stroke-width: 2; }
.demo__anim .a-phone circle { fill: var(--mint-500); }
.demo__anim .a-phone { animation: phone-tilt 6s var(--ease-in-out) infinite; transform-box: view-box; }
@keyframes cursor-path {
  0%, 100% { transform: translate(80px, 62px); }
  30% { transform: translate(160px, 62px); }
  45% { transform: translate(160px, 62px) scale(.8); }
  50% { transform: translate(160px, 62px); }
  75% { transform: translate(240px, 118px); }
}
@keyframes phone-tilt {
  0%, 100% { transform: translate(268px, 160px) rotate(-14deg); }
  30%, 50% { transform: translate(268px, 160px) rotate(0deg); }
  75% { transform: translate(268px, 160px) rotate(14deg); }
}
@keyframes tile-hot { 0%, 40% { opacity: .55; } 45%, 70% { opacity: 1; } 100% { opacity: .55; } }

.demo__mobile-art { inline-size: 180px; margin-block: var(--s-5) var(--s-3); }
.demo__mobile-art .mm-tv { fill: var(--ink-900); stroke: var(--ink-400); stroke-width: 2; }
.demo__mobile-art .mm-qr { fill: #FFFFFF; }
.demo__mobile-art .mm-phone { fill: var(--accent); }
.demo__mobile-art .mm-arc { fill: none; stroke: var(--mint-500); stroke-width: 2.5; stroke-linecap: round; }
.demo__mobile-title { font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: var(--lh-snug); text-wrap: balance; }
.demo__mobile-body { color: var(--text-muted); }

/* Phones: no live session, a pointer to the big screen instead (§10.1). */
@media (pointer: coarse) and (max-width: 820px) {
  .demo { min-block-size: 0; }
  .demo .demo__live, .demo .demo__connected, .demo .demo__offline, .demo .demo__rings, .demo__conn, .demo__title { display: none !important; }
  .demo .demo__mobile { display: grid; }
}

/* ---- below the fold --------------------------------------------------------- */
/* The sections after the hero skip style, layout and paint until they near the
   viewport, so the first render (and the live QR) does not wait for the whole
   page. `auto` remembers each real size once rendered; offscreen size changes
   never count as layout shift. */
.section { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ---- how it works ---------------------------------------------------------- */
.steps { display: grid; gap: var(--s-4); padding: 0; margin: 0; list-style: none; counter-reset: none; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.step { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-6); overflow: hidden; }
.step__num {
  position: absolute;
  inset-block-start: -.18em;
  inset-inline-end: var(--s-4);
  color: transparent;
  font-size: 7rem;
  font-weight: var(--fw-black);
  line-height: 1;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--ink-300) 22%, transparent);
  pointer-events: none;
}
.step__icon {
  inline-size: 52px;
  block-size: 52px;
  padding: 10px;
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--violet-500) 16%, transparent);
  color: var(--violet-300);
  stroke-width: 2.4;
}
.step:nth-child(2) .step__icon { background: color-mix(in oklab, var(--mint-500) 14%, transparent); color: var(--mint-400); }
.step:nth-child(3) .step__icon { background: color-mix(in oklab, var(--rose-500) 16%, transparent); color: var(--rose-500); }
.step__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); margin-block-start: var(--s-2); }
.step__body { color: var(--text-muted); }

/* ---- games ----------------------------------------------------------------- */
.games { background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--ink-900) 80%, transparent) 30%, transparent); }
.game-grid { display: grid; gap: var(--s-5); padding: 0; margin: 0; list-style: none; }
@media (min-width: 640px) { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.game-grid > li { display: flex; }
.game { flex: 1; }
.game--tilt-racers { --_c: var(--orange-500); }
.game--star-sentinel { --_c: var(--sky-500); }
.game--bullseye { --_c: var(--amber-500); }
.game--sumo-spheres { --_c: var(--magenta-500); }
.game .pr-gamecard__body { flex: 1; align-content: start; }
.game__body { color: var(--text-muted); font-size: var(--fs-sm); }
.game .pr-gamecard__meta { margin-block-start: auto; padding-block-start: var(--s-2); }
.game__control { color: var(--text); border-color: color-mix(in oklab, var(--_c) 55%, transparent); background: color-mix(in oklab, var(--_c) 16%, transparent); }

/* ---- TV app ------------------------------------------------------------------ */
.tv__layout { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 960px) { .tv__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tv__copy { display: grid; gap: var(--s-4); justify-items: start; }
.tv__features { display: grid; gap: var(--s-3); padding: 0; margin: var(--s-2) 0 0; list-style: none; }
.tv__features li { display: flex; gap: var(--s-3); align-items: flex-start; }
.tv__features svg { inline-size: 22px; block-size: 22px; margin-block-start: 3px; flex: none; color: var(--mint-500); stroke-width: 2.5; }

/* Call to action priority (§10.1): store badge, else the APK, else nothing. */
.tv__cta, .tv__apk, .tv__install { display: none; }
html[data-apk="true"] .tv__cta, html[data-store="true"] .tv__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-3); }
html[data-apk="true"] .tv__apk { display: inline-flex; }
html[data-apk="true"] .tv__install { display: grid; }
html[data-store="true"] .tv__apk, html[data-store="true"] .tv__install { display: none; }
.tv__install { gap: var(--s-3); inline-size: 100%; padding: var(--s-5); }
.tv__install-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.tv__install-steps { display: grid; gap: var(--s-2); margin: 0; padding-inline-start: var(--s-5); color: var(--text-muted); }
.tv__install-steps li::marker { color: var(--violet-300); font-weight: var(--fw-bold); }

.tv__side { display: grid; gap: var(--s-4); }
.tv__note { display: flex; gap: var(--s-4); padding: var(--s-5); }
.tv__note > svg { inline-size: 28px; block-size: 28px; flex: none; color: var(--violet-300); }
.tv__note h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); margin-block-end: var(--s-1); }
.tv__note p { color: var(--text-muted); font-size: var(--fs-sm); }
.tv__note a { display: inline-block; margin-block-start: var(--s-2); color: var(--violet-300); font-size: var(--fs-sm); font-weight: var(--fw-medium); }

.tv__visual { position: relative; padding-block-end: var(--s-6); }
.tv__screen {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6%;
  aspect-ratio: 16 / 9;
  padding: 7%;
  border: 10px solid var(--ink-800);
  border-radius: var(--r-lg);
  background: radial-gradient(90% 90% at 30% 0%, color-mix(in oklab, var(--violet-500) 25%, var(--ink-900)), var(--ink-950));
  box-shadow: var(--shadow-2), 0 30px 80px -30px color-mix(in oklab, var(--violet-500) 60%, transparent);
}
.tv__tile { position: relative; border-radius: var(--r-sm); background: var(--surface-3); }
/* The focus ring fades in on a pseudo-element (opacity + transform only, no box-shadow repaints). */
.tv__tile--b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 3px var(--mint-400); opacity: 0; animation: tile-ring 5s var(--ease-in-out) infinite; }
.tv__tile--a { background: linear-gradient(135deg, var(--orange-500), color-mix(in oklab, var(--orange-500) 30%, var(--ink-800))); }
.tv__tile--b { background: linear-gradient(135deg, var(--sky-500), color-mix(in oklab, var(--sky-500) 30%, var(--ink-800))); animation: tile-focus 5s var(--ease-in-out) infinite; }
.tv__tile--c { background: linear-gradient(135deg, var(--amber-500), color-mix(in oklab, var(--amber-500) 30%, var(--ink-800))); }
.tv__tile--d { background: linear-gradient(135deg, var(--magenta-500), color-mix(in oklab, var(--magenta-500) 30%, var(--ink-800))); }
.tv__cursor {
  position: absolute;
  inset-block-start: 30%;
  inset-inline-start: 30%;
  inline-size: 22px;
  block-size: 22px;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  background: color-mix(in oklab, var(--violet-400) 60%, transparent);
  box-shadow: 0 0 18px var(--violet-400);
  animation: tv-cursor 5s var(--ease-in-out) infinite;
}
@keyframes tv-cursor { 0%, 100% { transform: translate(0, 0); } 40%, 60% { transform: translate(150%, -40%); } 80% { transform: translate(60%, 180%); } }
[dir="rtl"] .tv__cursor { animation-name: tv-cursor-rtl; }
@keyframes tv-cursor-rtl { 0%, 100% { transform: translate(0, 0); } 40%, 60% { transform: translate(-150%, -40%); } 80% { transform: translate(-60%, 180%); } }
@keyframes tile-focus { 0%, 35% { transform: none; } 45%, 65% { transform: scale(1.06); } 75%, 100% { transform: none; } }
@keyframes tile-ring { 0%, 35% { opacity: 0; } 45%, 65% { opacity: 1; } 75%, 100% { opacity: 0; } }
.tv__phone {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 6%;
  inline-size: 18%;
  aspect-ratio: 9 / 18;
  border: 3px solid var(--ink-300);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  box-shadow: var(--shadow-2);
  transform: rotate(-8deg);
}
.tv__phone span {
  position: absolute;
  inset: 22% 18% auto;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--mint-500) 60%, transparent);
  box-shadow: inset 0 0 18px color-mix(in oklab, var(--mint-500) 35%, transparent);
}

/* ---- developers ----------------------------------------------------------- */
.dev__layout { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) { .dev__layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.dev__copy { display: grid; gap: var(--s-4); justify-items: start; }
.dev__list { display: grid; gap: var(--s-3); padding: 0; margin: var(--s-2) 0 var(--s-3); list-style: none; }
.dev__list li { position: relative; padding-inline-start: var(--s-5); color: var(--text-muted); }
.dev__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .6em;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 2px;
  background: var(--violet-400);
  transform: rotate(45deg);
}
.dev__code { margin: 0; box-shadow: var(--shadow-2); }
.dev__code-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: 48px;
  padding-inline: var(--s-4) 110px;
  border-block-end: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
[dir="rtl"] .dev__code-bar { padding-inline: var(--s-4) 110px; }
.dev__dots { display: inline-flex; gap: 6px; }
.dev__dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--ink-600); }
.dev__code .pr-code__copy { inset-block-start: 7px; }
.dev__code pre { text-align: left; }
.tk-k { color: var(--violet-300); }
.tk-s { color: var(--mint-400); }

/* ---- FAQ ---------------------------------------------------------------- */
.faq__layout { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .faq__layout { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: start; } }
.faq__list { display: grid; gap: var(--s-3); }
.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.faq__item[open] { border-color: color-mix(in oklab, var(--violet-400) 35%, transparent); background: var(--surface-2); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-md);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  inline-size: 12px;
  block-size: 12px;
  flex: none;
  border-inline-end: 2px solid var(--text-muted);
  border-block-end: 2px solid var(--text-muted);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur-2) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq__item p { padding: 0 var(--s-5) var(--s-5); color: var(--text-muted); }
.faq__item p a { color: var(--violet-300); font-weight: var(--fw-medium); text-underline-offset: 3px; }

/* ---- reduced motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__orb, .demo__rings span, .demo__anim *, .tv__cursor, .tv__tile--b, .tv__tile--b::after { animation: none !important; }
}