/* plaudit.in: the home and "Why Plaudit" pages. Same palette and type as the
   app (mobile/src/constants/theme.ts) and the waitlist page. */
:root {
  --ink: #0D0A08;
  --surface: #16120F;
  --raised: #1E1814;
  --line: #2B231D;
  --cream: #F2E8D6;
  --cream-2: #C2B39C;
  --dim: #8A7B69;
  --red: #C42330;
  --red-bright: #E0414C;
  --red-deep: #3B0B10;
  --gold: #CDAE72;
  --gold-bright: #E8D2A0;
  --gold-line: rgba(205, 174, 114, 0.28);
  --green: #9DB784;
  --display: 'Grenze Gotisch', Georgia, serif;
  --condensed: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --telugu: 'Noto Sans Telugu', sans-serif;
  --gutter: 20px;
  --head-h: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.6, .5, 1);
  color-scheme: dark;
  interpolate-size: allow-keywords;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); }
body { margin: 0; background: var(--ink); color: var(--cream); font: 400 16px/1.6 var(--body); overflow-x: clip; }
a { color: var(--gold); }
img, svg { display: block; }
h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--gold); color: var(--ink); padding: 10px 14px; border-radius: 6px; font-weight: 700; }
.skip:focus { top: 12px; }

/* Film grain over everything, very faint. */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(3) infinite;
}
@keyframes grain { 0% { translate: 0 0; } 33% { translate: -3% 2%; } 66% { translate: 2% -3%; } 100% { translate: 0 0; } }

/* Reading progress: a thin strip that runs red to gold. */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--red), var(--gold)); }

/* ---------- Header ---------- */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--head-h); transition: transform .4s var(--ease), background-color .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.site-head.scrolled { background: rgba(13, 10, 8, 0.82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); }
.site-head.away { transform: translateY(-100%); }
.head-row { height: 100%; display: flex; align-items: center; gap: 22px; }
.wordmark { font: 800 30px/1 var(--display); color: var(--gold); text-decoration: none; letter-spacing: 0.3px; display: inline-flex; align-items: flex-start; }
.wordmark i { font-style: normal; color: var(--red); font-size: 11px; margin: 1px 0 0 2px; transition: rotate .6s var(--spring); }
.wordmark:hover i { rotate: 144deg; }
.head-nav { display: none; gap: 26px; margin-left: auto; }
.head-nav a { color: var(--cream-2); text-decoration: none; font-size: 15px; position: relative; padding: 4px 0; }
.head-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--red); border-radius: 2px; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.head-nav a:hover, .head-nav a[aria-current='page'] { color: var(--cream); }
.head-nav a:hover::after, .head-nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.head-row .cta { margin-left: auto; }
.head-nav + .cta { margin-left: 0; }

/* ---------- Buttons ---------- */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px;
  background: var(--red); color: var(--cream); border: 0; border-radius: 6px; cursor: pointer;
  font: 400 23px/1 var(--condensed); letter-spacing: 1.4px; text-decoration: none;
  box-shadow: 0 12px 34px -12px rgba(196, 35, 48, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background-color .25s ease, transform .25s var(--ease), box-shadow .25s ease, translate .35s var(--ease);
}
/* A strip of light passes over the button on hover, like a projector catching it. */
.cta::before { content: ''; position: absolute; inset: 0 auto 0 -60%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 236, 200, 0.35), transparent); transform: skewX(-18deg); transition: left .7s var(--ease); }
.cta:hover { background: var(--red-bright); box-shadow: 0 18px 40px -12px rgba(224, 65, 76, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.cta:hover::before { left: 120%; }
.cta:active { transform: scale(0.97); }
.cta-sm { min-height: 40px; padding: 0 16px; font-size: 18px; letter-spacing: 1.1px; }
.ghost { display: inline-flex; align-items: center; min-height: 54px; padding: 0 6px; color: var(--cream); text-decoration: none; font-weight: 500; gap: 8px; }
.ghost svg { width: 18px; height: 18px; transition: translate .3s var(--ease); }
.ghost:hover { color: var(--gold-bright); }
.ghost:hover svg { translate: 0 3px; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--head-h) + 28px) 0 56px; min-height: min(100svh, 940px); display: flex; align-items: center; }
.burst {
  position: absolute; z-index: -3; left: 50%; top: 58%; width: 1500px; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(196, 35, 48, 0.36) 0deg 4deg, transparent 4deg 12deg);
  -webkit-mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 100%);
          mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 100%);
  opacity: 0; scale: 0.7;
  animation: spin 160s linear infinite;
}
.ready .burst { opacity: 1; scale: 1; transition: opacity 1.4s ease, scale 2.2s var(--ease); }
@keyframes spin { to { rotate: 360deg; } }
/* A soft light that follows the pointer. */
.spot { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(520px circle at var(--px, 72%) var(--py, 48%), rgba(232, 210, 160, 0.09), transparent 62%); }
.hero::after {
  content: ''; position: absolute; inset: 40% -10% -5%; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(13, 10, 8, 0.92) 1.1px, transparent 1.4px); background-size: 7px 7px;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 75%); mask: linear-gradient(to bottom, transparent, #000 75%);
}
.hero-grid { display: grid; gap: 40px; align-items: center; width: 100%; }

/* "Coming soon" in a marquee frame with chasing bulbs. */
.sign { position: relative; display: inline-block; padding: 9px 18px 7px; margin-bottom: 22px; font: 400 17px/1 var(--condensed); letter-spacing: 2.2px; color: var(--gold-bright); border-radius: 6px; background: rgba(59, 11, 16, 0.55); }
.sign::before, .sign::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 4px; pointer-events: none;
  background: radial-gradient(circle, var(--gold-bright) 1.6px, transparent 2.2px) 0 0 / 10px 10px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sign::after { background-position: 5px 5px; opacity: 0.25; }
.ready .sign::before { animation: chase 1.1s steps(1) infinite; }
.ready .sign::after { animation: chase 1.1s steps(1) infinite reverse; }
@keyframes chase { 0% { opacity: 1; } 50% { opacity: 0.25; } }

.telugu { font: 500 17px/1.6 var(--telugu); color: var(--gold); margin-bottom: 6px; }
.headline { font: 400 clamp(72px, 19vw, 148px)/0.84 var(--condensed); letter-spacing: 1px; color: var(--cream); }
.headline .line { display: block; overflow: hidden; padding-top: 0.06em; }
.headline .line > span { display: block; }
/* The third line gets a crimson underline brushed in. */
.headline .take span { position: relative; display: inline-block; }
.brush { position: absolute; left: -2%; right: -4%; bottom: 0.02em; height: 0.2em; width: 106%; overflow: visible; z-index: -1; }
.brush path { fill: none; stroke: var(--red); stroke-width: 9; stroke-linecap: round; }
.js .brush path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ready .brush path { transition: stroke-dashoffset 0.9s var(--ease) 1.05s; stroke-dashoffset: 0; }
.js .headline .line > span { translate: 0 105%; }
.ready .headline .line > span { translate: 0 0; transition: translate 1s var(--ease); }
.ready .headline .line:nth-child(2) > span { transition-delay: .12s; }
.ready .headline .line:nth-child(3) > span { transition-delay: .24s; }
.lede { font-size: 18px; color: var(--cream-2); max-width: 31em; margin: 26px 0 30px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
[data-offer]:not([hidden]) { animation: rise .7s var(--ease) both; }
@keyframes rise { from { opacity: 0; translate: 0 10px; } }
.offer-line { margin-top: 20px; font-size: 14.5px; color: var(--cream-2); display: flex; align-items: center; gap: 10px; }
.offer-line b { font: 400 24px/1 var(--condensed); color: var(--gold); letter-spacing: 1px; font-weight: 400; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-bright); box-shadow: 0 0 0 0 rgba(224, 65, 76, 0.6); animation: pulse 1.8s ease-out infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(224, 65, 76, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 65, 76, 0); } }
.js .hero-copy .fade { opacity: 0; translate: 0 14px; }
.ready .hero-copy .fade { opacity: 1; translate: 0 0; transition: opacity .8s ease, translate .8s var(--ease); transition-delay: var(--d, 0s); }

/* The stage: three app moments floating over the star-burst. */
.stage { position: relative; height: 480px; width: 100%; max-width: 470px; justify-self: center; --mx: 0; --my: 0; }
.float {
  position: absolute; background: linear-gradient(170deg, #211a15, var(--surface) 55%); border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  font-size: 13.5px; line-height: 1.45; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(205, 174, 114, 0.05);
  transform: translate3d(calc(var(--mx) * var(--depth) * 1px), calc(var(--my) * var(--depth) * 1px), 0);
  transition: transform .5s var(--ease);
}
.js .float { opacity: 0; scale: 0.9; }
.ready .float { opacity: 1; scale: 1; animation: bob 7s ease-in-out infinite; transition: transform .5s var(--ease), opacity .7s ease var(--d), scale .9s var(--spring) var(--d); }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.f-post { top: 2%; left: 0; width: 80%; rotate: -3deg; --depth: 14; --d: .45s; }
.f-poll { top: 37%; right: 0; width: 72%; rotate: 2.5deg; --depth: 26; --d: .6s; animation-delay: -2.5s !important; }
.f-title { bottom: 1%; left: 5%; width: 66%; rotate: -1.5deg; --depth: 9; --d: .75s; animation-delay: -4.5s !important; display: flex; gap: 12px; align-items: center; }
.spark { position: absolute; color: var(--gold); font-size: 18px; opacity: 0.8; animation: twinkle 3.2s ease-in-out infinite; pointer-events: none; }
.spark.a { top: 30%; left: 4%; }
.spark.b { top: 6%; right: 6%; font-size: 13px; animation-delay: -1s; color: var(--red-bright); }
.spark.c { bottom: 24%; right: 10%; font-size: 22px; animation-delay: -2s; }
@keyframes twinkle { 0%, 100% { opacity: 0.2; scale: 0.7; } 50% { opacity: 0.95; scale: 1.1; } }

/* ---------- Bits of app UI, shared by the hero and the scenes ---------- */
.who { display: flex; gap: 10px; align-items: center; }
.av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--red-deep); color: var(--gold); font: 400 15px/1 var(--condensed); flex: none; letter-spacing: 0.5px; }
.name { font-weight: 700; }
.handle { color: var(--dim); }
.chip { display: inline-block; margin: 9px 0 5px; padding: 3px 8px 2px; border-radius: 4px; background: var(--red); font: 400 14px/1.2 var(--condensed); letter-spacing: 1px; }
.acts { display: flex; gap: 18px; color: var(--dim); margin-top: 10px; font-size: 12.5px; align-items: center; }
.acts span { display: inline-flex; gap: 5px; align-items: center; }
.acts svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.q { font: 400 22px/1.05 var(--condensed); letter-spacing: 0.6px; margin-bottom: 10px; }
.opt { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.opt::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0); background: var(--gold-line); transform-origin: left; }
.js .opt::before { transform: scaleX(0); }
.opt > * { position: relative; }
.opt.mine { border-color: var(--gold); }
.pct { font: 400 16px/1.2 var(--condensed); color: var(--cream-2); letter-spacing: 0.5px; }
.ready .f-poll .opt::before { transform: scaleX(1); transition: transform 1.3s var(--ease) 1.2s; }
.big-av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--red-deep); border: 1.5px solid var(--gold); font: 400 24px/1 var(--condensed); color: var(--gold); flex: none; }
.pname { font: 400 26px/1 var(--condensed); letter-spacing: 1px; }
.stamp { display: inline-block; margin-top: 6px; padding: 3px 9px 2px; border: 1.5px solid var(--gold); border-radius: 5px; color: var(--gold); font: 400 17px/1.1 var(--condensed); letter-spacing: 1.4px; rotate: -3deg; }
.js .f-title .stamp { opacity: 0; scale: 2.2; }
.ready .f-title .stamp { opacity: 1; scale: 1; transition: opacity .2s ease 1.9s, scale .45s var(--spring) 1.9s; }
.heart svg { transition: fill .2s ease; }
.ready .f-post .heart { color: var(--red-bright); transition: color .2s ease 2.3s; }
.ready .f-post .heart svg { fill: var(--red-bright); animation: pop .45s ease 2.3s both; transition: fill .1s ease 2.3s; }
@keyframes pop { 50% { scale: 1.5; } }

/* ---------- Film band ---------- */
.band { position: relative; z-index: 2; background: var(--red); rotate: -2deg; margin: -10px -20px 0; padding: 14px 0 11px; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9); overflow: hidden; }
.band-track { display: flex; width: max-content; animation: marquee 95s linear infinite; }
.band:hover .band-track { animation-play-state: paused; }
.band ul { display: flex; gap: 34px; margin: 0; padding: 0 34px 0 0; list-style: none; }
.band li { font: 400 30px/1 var(--condensed); letter-spacing: 1.5px; white-space: nowrap; display: flex; align-items: center; gap: 34px; color: var(--cream); }
.band li::after { content: '★'; font-size: 15px; color: var(--gold-bright); }
.band li:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--cream); }
@keyframes marquee { to { translate: -50% 0; } }
.band-note { text-align: center; color: var(--dim); font-size: 13px; margin-top: 22px; }

/* ---------- Sections ---------- */
.section { padding: 104px 0 0; }
.section-head { max-width: 760px; margin-bottom: 56px; }
.h2 { font: 400 clamp(48px, 11vw, 92px)/0.9 var(--condensed); letter-spacing: 0.8px; text-wrap: balance; }
.section-head p { color: var(--cream-2); font-size: 18px; margin-top: 18px; max-width: 34em; }

/* Inside the app: each row is a scene that plays when it scrolls into view. */
.scene-row { display: grid; gap: 30px; align-items: center; padding: 34px 0; }
.scene-row + .scene-row { border-top: 1px solid var(--line); }
.scene-copy h3 { font: 400 clamp(38px, 8vw, 56px)/0.95 var(--condensed); letter-spacing: 0.6px; color: var(--gold); }
.scene-copy p { color: var(--cream-2); font-size: 17px; margin-top: 14px; max-width: 30em; }
.scene-copy ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; color: var(--cream); font-size: 15px; }
.scene-copy li { display: flex; gap: 10px; align-items: baseline; }
.scene-copy li::before { content: '★'; color: var(--red-bright); font-size: 11px; translate: 0 -1px; }

.screen {
  position: relative; width: 100%; max-width: 400px; justify-self: center; border-radius: 30px; padding: 56px 16px 18px; min-height: 380px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(59, 11, 16, 0.55), transparent 70%), var(--ink);
  box-shadow: 0 0 0 1px #3a2f26, 0 0 0 8px #120e0b, 0 0 0 9px #2a211b, 0 50px 90px -30px rgba(0, 0, 0, 0.95), 0 0 140px -50px rgba(196, 35, 48, 0.6);
  font-size: 13.5px; line-height: 1.45; overflow: hidden;
}
.screen-head { position: absolute; top: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; }
.screen-head b { font: 800 20px/1 var(--display); color: var(--gold); }
.screen-head span { font: 400 14px/1 var(--condensed); letter-spacing: 1.2px; color: var(--dim); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 13px; }
.card + .card { margin-top: 10px; }
.js .screen [data-step] { opacity: 0; translate: 0 12px; }
.screen.play [data-step] { opacity: 1; translate: 0 0; transition: opacity .5s ease, translate .6s var(--ease); transition-delay: calc(var(--at, 0) * 1ms); }
.card.dim { opacity: .5; }
.screen.play .dim[data-step] { opacity: .5; }

/* Take: the text types itself, then the likes come in. */
.typed { min-height: 3em; }
.caret { display: inline-block; width: 2px; height: 1.05em; background: var(--gold); vertical-align: -0.18em; margin-left: 1px; animation: blink 0.9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.screen.typed-out .caret { display: none; }
.js .s-take .chip { opacity: 0; scale: 0.6; }
.s-take.typed-out .chip { opacity: 1; scale: 1; transition: opacity .2s ease, scale .4s var(--spring); }
.s-take.typed-out .heart { color: var(--red-bright); transition: color .2s ease .5s; }
.s-take.typed-out .heart svg { fill: var(--red-bright); animation: pop .45s ease .5s both; transition: fill .1s ease .5s; }
.flip { display: inline-grid; }
.flip > span { grid-area: 1 / 1; transition: opacity .2s ease, translate .3s var(--ease); }
.flip > span + span { opacity: 0; translate: 0 8px; }
.s-take.typed-out .flip > span:first-child { opacity: 0; translate: 0 -8px; transition-delay: .5s; }
.s-take.typed-out .flip > span + span { opacity: 1; translate: 0 0; transition-delay: .5s; }
.reply { display: flex; gap: 10px; margin: 12px 0 0 16px; padding-left: 14px; border-left: 2px solid var(--line); }
.reply .av { width: 26px; height: 26px; font-size: 13px; }
.js .s-take .reply { opacity: 0; translate: 0 10px; }
.s-take.typed-out .reply { opacity: 1; translate: 0 0; transition: opacity .4s ease 1.1s, translate .5s var(--ease) 1.1s; }

/* Poll: bars fill and the numbers count up. */
.s-poll .opt::before { transition: transform 0s; }
.s-poll.play .opt::before { transform: scaleX(1); transition: transform 1.4s var(--ease) .35s; }
.check { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 700; margin-right: 6px; vertical-align: -2px; }
.js .s-poll .check { scale: 0; }
.s-poll.play .check { scale: 1; transition: scale .4s var(--spring) 1.5s; }
.note { color: var(--dim); font-size: 12px; margin-top: 10px; }

/* Fan card: a holographic card that follows the pointer, and a title ladder. */
.fan-card {
  position: relative; overflow: hidden; border-radius: 16px; padding: 16px; aspect-ratio: 1.6; display: grid; grid-template-rows: auto 1fr auto;
  background: radial-gradient(140% 120% at 100% 0%, #5a141c 0%, #2a0a0e 45%, #150c0a 100%); box-shadow: inset 0 0 0 1px var(--gold-line), 0 20px 40px -18px rgba(0, 0, 0, 0.9);
  transform: perspective(700px) rotateX(calc(var(--ty, 0) * 1deg)) rotateY(calc(var(--tx, 0) * 1deg)); transition: transform .4s var(--ease);
}
.fan-card::before { content: ''; position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg at 85% 15%, rgba(205, 174, 114, 0.12) 0 4deg, transparent 4deg 12deg); pointer-events: none; }
.fan-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .55; background: linear-gradient(115deg, transparent calc(var(--sheen, 40) * 1% - 22%), rgba(232, 210, 160, 0.38) calc(var(--sheen, 40) * 1%), transparent calc(var(--sheen, 40) * 1% + 22%)); }
.fc-top { position: relative; display: flex; justify-content: space-between; align-items: baseline; }
.fc-top b { font: 800 20px/1 var(--display); color: var(--gold); }
.fc-top span { font: 400 14px/1 var(--condensed); letter-spacing: 2px; color: var(--cream-2); }
.fc-no { position: relative; align-self: end; }
.fc-no small { display: block; color: var(--cream-2); font-size: 11.5px; }
.fc-no b { font: 400 52px/0.9 var(--condensed); letter-spacing: 1px; font-weight: 400; color: var(--cream); }
.fc-foot { position: relative; display: flex; justify-content: space-between; align-items: end; margin-top: 8px; }
.fc-foot .stamp { margin: 0; }
.js .s-card .stamp { opacity: 0; scale: 2.2; }
.s-card.play .stamp { opacity: 1; scale: 1; transition: opacity .2s ease 1.5s, scale .45s var(--spring) 1.5s; }
.ladder { margin-top: 18px; }
.ladder-track { position: relative; height: 4px; border-radius: 2px; background: var(--line); margin: 16px 6px 0; }
.ladder-fill { position: absolute; inset: 0 auto 0 0; width: 46%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--gold)); transform-origin: left; }
.js .ladder-fill { transform: scaleX(0); }
.s-card.play .ladder-fill { transform: scaleX(1); transition: transform 1.6s var(--ease) .4s; }
.rungs { display: flex; justify-content: space-between; margin-top: -9px; }
.rung { display: grid; justify-items: center; gap: 8px; font-size: 11.5px; color: var(--dim); width: 25%; }
.rung:first-child { justify-items: start; }
.rung:last-child { justify-items: end; }
.rung i { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--line); transition: background-color .3s ease, border-color .3s ease, scale .3s var(--spring); }
.s-card.play .rung.got i { background: var(--gold); border-color: var(--gold); scale: 1.15; transition-delay: var(--at); }
.s-card.play .rung.got { color: var(--cream); transition: color .3s ease var(--at); }
.ladder p { margin-top: 12px; color: var(--cream-2); font-size: 12.5px; }

/* Prediction: a live countdown, a pick that locks in. */
.pred-top { display: flex; justify-content: space-between; color: var(--gold); font: 400 14px/1.2 var(--condensed); letter-spacing: 1.2px; }
.lock { color: var(--red-bright); font: 500 12px/1.2 var(--body); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.s-predict .pick { transition: border-color .3s ease, background-color .3s ease; }
.s-predict.play .pick { border-color: var(--gold); background: rgba(205, 174, 114, 0.12); transition-delay: 1.2s; }
.js .s-predict .pick .pct { opacity: 0; }
.s-predict.play .pick .pct { opacity: 1; color: var(--gold); transition: opacity .3s ease 1.3s; }
.record { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--cream-2); font-size: 12.5px; }
.record i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.s-predict.play .record i.won { background: var(--gold); transition: background-color .3s ease calc(1800ms + var(--n) * 160ms); }
.free { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(157, 183, 132, 0.12); color: var(--green); font-size: 12.5px; font-weight: 500; }

/* Release day: the alert lands, then the room fills with applause. */
.s-release { padding-top: 22px; }
.clock { text-align: center; font: 400 64px/1 var(--condensed); letter-spacing: 2px; }
.date { text-align: center; color: var(--cream-2); font-size: 12.5px; margin-bottom: 18px; }
.notif { display: flex; gap: 10px; background: rgba(30, 24, 20, 0.94); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.notif b { display: block; }
.app-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--red); display: grid; place-items: center; font: 800 16px/1 var(--display); color: var(--gold-bright); flex: none; }
.js .s-release .notif { opacity: 0; translate: 0 -36px; }
.s-release.play .notif { opacity: 1; translate: 0 0; transition: opacity .3s ease .5s, translate .7s var(--spring) .5s; }
.room { position: relative; margin-top: 14px; border-radius: 14px; padding: 12px; background: var(--surface); border: 1px solid var(--line); min-height: 120px; }
.room-head { display: flex; justify-content: space-between; align-items: center; font: 400 15px/1 var(--condensed); letter-spacing: 1.2px; color: var(--gold); }
.room-head span { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--body); letter-spacing: 0; color: var(--cream-2); font-variant-numeric: tabular-nums; }
.room-line { margin-top: 10px; color: var(--cream-2); font-size: 12.5px; }
.room-line b { color: var(--cream); }
.js .s-release .room { opacity: 0; }
.s-release.play .room { opacity: 1; transition: opacity .5s ease 1.2s; }
.claps { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.clap { position: absolute; bottom: -10px; font-size: 20px; animation: floatUp var(--t, 2.6s) ease-out forwards; }
@keyframes floatUp { 0% { opacity: 0; translate: 0 0; scale: 0.6; } 15% { opacity: 1; scale: 1.1; } 100% { opacity: 0; translate: var(--x, 0px) -330px; scale: 0.9; rotate: var(--r, 0deg); } }

/* ---------- Verified ---------- */
.badges { display: grid; gap: 0; border-top: 1px solid var(--line); }
.badge { display: grid; grid-template-columns: 40px 1fr; align-content: start; gap: 4px 16px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: start; }
.badge svg { width: 30px; height: 30px; grid-row: span 2; fill: none; stroke: var(--c, var(--gold)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .5s var(--spring), scale .5s var(--spring); }
.badge:hover svg { rotate: -12deg; scale: 1.15; }
.badge h3 { font: 400 30px/1 var(--condensed); letter-spacing: 0.8px; color: var(--c, var(--gold)); }
.badge p { color: var(--cream-2); max-width: 32em; }
.js .badge .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.badges.in .badge .draw { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease) calc(var(--i) * 140ms + 200ms); }
.badge-note { margin-top: 22px; color: var(--dim); font-size: 14px; max-width: 46em; }

/* ---------- House rules ---------- */
.rules { display: grid; gap: 40px; }
.rule-col h3 { font: 400 34px/1 var(--condensed); letter-spacing: 0.8px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.rule-col.ok h3 { color: var(--green); }
.rule-col.no h3 { color: var(--red-bright); }
.rule-col ul { list-style: none; margin: 0; padding: 0; }
.rule-col li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--cream-2); }
.rule-col li svg { width: 20px; height: 20px; margin-top: 2px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rule-col.ok svg { stroke: var(--green); }
.rule-col.no svg { stroke: var(--red-bright); }
.js .rule-col .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rules.in .rule-col .draw { stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--ease) calc(var(--i) * 110ms + 150ms); }
.promises { display: grid; gap: 28px; align-items: end; margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--gold-line); }
.promise b { display: block; font: 400 clamp(56px, 12vw, 84px)/0.9 var(--condensed); color: var(--gold); letter-spacing: 1px; font-weight: 400; }
.promise p { color: var(--cream-2); margin-top: 8px; max-width: 22em; }

/* ---------- Steps ---------- */
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; counter-reset: step; }
.steps::before { content: ''; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--line); }
.steps::after { content: ''; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(var(--red), var(--gold)); transform-origin: top; }
.js .steps::after { transform: scaleY(0); }
.steps.in::after { transform: scaleY(1); transition: transform 1.4s var(--ease) .2s; }
.step { position: relative; display: grid; grid-template-columns: 48px 1fr; align-content: start; gap: 20px; counter-increment: step; }
.step::before {
  content: counter(step); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; z-index: 1;
  font: 400 26px/1 var(--condensed); color: var(--gold); background: var(--ink); box-shadow: inset 0 0 0 2px var(--line);
  transition: background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.steps.in .step::before { background: var(--red); color: var(--cream); box-shadow: inset 0 0 0 2px var(--red); transition-delay: calc(var(--i) * 450ms + 200ms); }
.step h3 { font: 400 34px/1 var(--condensed); letter-spacing: 0.6px; margin-top: 8px; }
.step p { color: var(--cream-2); margin-top: 8px; max-width: 30em; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 500 19px/1.35 var(--body); transition: color .2s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-bright); }
.plus { position: relative; width: 22px; height: 22px; flex: none; }
.plus::before, .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: var(--gold); border-radius: 2px; transition: rotate .35s var(--ease); }
.plus::after { rotate: 90deg; }
.faq details[open] .plus::after { rotate: 0deg; }
.faq details[open] .plus::before { rotate: 180deg; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq .answer { padding: 0 44px 24px 0; color: var(--cream-2); max-width: 40em; }
.faq .answer p + p { margin-top: 10px; }

/* ---------- The ticket ---------- */
/* Two pieces joined along a perforation, with matching torn edges (masks made
   from one jagged line), so together they read as one ticket. Hovering starts
   the tear (on phones it starts when the ticket scrolls into view), and
   "Join the waitlist" rips the stub off before the waitlist opens (site.js). */
.final { padding: 120px 0 110px; }
.ticket {
  --paper: #201712; --band: 8px;
  --peel: rotate(2.6deg); --rip: translate(30px, 110px) rotate(14deg);
  position: relative; display: grid; max-width: 880px; margin: 0 auto;
  filter: drop-shadow(0 26px 34px rgba(196, 35, 48, 0.3));
}
.ticket-main, .stub { background-color: var(--paper); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ticket-main {
  position: relative; z-index: 1; padding: 34px 26px calc(30px + var(--band)); border-radius: 16px 16px 0 0;
  background-image:
    radial-gradient(circle at 0 calc(100% - var(--band) / 2), var(--ink) 13px, transparent 13.5px),
    radial-gradient(circle at 100% calc(100% - var(--band) / 2), var(--ink) 13px, transparent 13.5px),
    radial-gradient(120% 140% at 0 0, #2e2018, transparent 60%);
  box-shadow: inset 1px 0 var(--gold-line), inset -1px 0 var(--gold-line), inset 0 1px var(--gold-line);
  -webkit-mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 1.44 L0.0 1.44 L3.85 4.88 L7.69 2.48 L11.54 4.63 L15.38 2.11 L19.23 5.57 L23.08 0.6 L26.92 6.02 L30.77 0.6 L34.62 5.79 L38.46 0.62 L42.31 4.69 L46.15 1.76 L50.0 7.05 L53.85 0.8 L57.69 5.11 L61.54 2.41 L65.38 7.4 L69.23 2.25 L73.08 5.67 L76.92 3.52 L80.77 4.55 L84.62 3.15 L88.46 5.33 L92.31 0.86 L96.15 4.78 L100.0 1.39 L100 0Z'/%3E%3C/svg%3E"); mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 1.44 L0.0 1.44 L3.85 4.88 L7.69 2.48 L11.54 4.63 L15.38 2.11 L19.23 5.57 L23.08 0.6 L26.92 6.02 L30.77 0.6 L34.62 5.79 L38.46 0.62 L42.31 4.69 L46.15 1.76 L50.0 7.05 L53.85 0.8 L57.69 5.11 L61.54 2.41 L65.38 7.4 L69.23 2.25 L73.08 5.67 L76.92 3.52 L80.77 4.55 L84.62 3.15 L88.46 5.33 L92.31 0.86 L96.15 4.78 L100.0 1.39 L100 0Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% calc(100% - var(--band)), 100% var(--band); mask-size: 100% calc(100% - var(--band)), 100% var(--band);
  -webkit-mask-position: top, bottom; mask-position: top, bottom;
  transition: transform .45s var(--spring);
}
.admit { color: var(--gold); font: 400 18px/1 var(--condensed); letter-spacing: 3px; }
.ticket h2 { font: 400 clamp(54px, 13vw, 96px)/0.88 var(--condensed); letter-spacing: 1px; margin: 14px 0 14px; }
.ticket-main > p:not(.admit) { color: var(--cream-2); max-width: 30em; margin-bottom: 26px; }
.stub-wrap { position: relative; z-index: 2; margin-top: calc(-1 * var(--band)); transform-origin: 0 0; transition: transform .6s var(--spring), opacity .3s ease; }
.stub {
  height: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: calc(22px + var(--band)) 26px 26px; border-radius: 0 0 16px 16px;
  background-image:
    radial-gradient(circle at 0 calc(var(--band) / 2), var(--ink) 13px, transparent 13.5px),
    radial-gradient(circle at 100% calc(var(--band) / 2), var(--ink) 13px, transparent 13.5px);
  box-shadow: inset 1px 0 var(--gold-line), inset -1px 0 var(--gold-line), inset 0 -1px var(--gold-line);
  -webkit-mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8 L0 1.44 L0.0 1.44 L3.85 4.88 L7.69 2.48 L11.54 4.63 L15.38 2.11 L19.23 5.57 L23.08 0.6 L26.92 6.02 L30.77 0.6 L34.62 5.79 L38.46 0.62 L42.31 4.69 L46.15 1.76 L50.0 7.05 L53.85 0.8 L57.69 5.11 L61.54 2.41 L65.38 7.4 L69.23 2.25 L73.08 5.67 L76.92 3.52 L80.77 4.55 L84.62 3.15 L88.46 5.33 L92.31 0.86 L96.15 4.78 L100.0 1.39 L100 8Z'/%3E%3C/svg%3E"); mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8 L0 1.44 L0.0 1.44 L3.85 4.88 L7.69 2.48 L11.54 4.63 L15.38 2.11 L19.23 5.57 L23.08 0.6 L26.92 6.02 L30.77 0.6 L34.62 5.79 L38.46 0.62 L42.31 4.69 L46.15 1.76 L50.0 7.05 L53.85 0.8 L57.69 5.11 L61.54 2.41 L65.38 7.4 L69.23 2.25 L73.08 5.67 L76.92 3.52 L80.77 4.55 L84.62 3.15 L88.46 5.33 L92.31 0.86 L96.15 4.78 L100.0 1.39 L100 8Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% calc(100% - var(--band)), 100% var(--band); mask-size: 100% calc(100% - var(--band)), 100% var(--band);
  -webkit-mask-position: bottom, top; mask-position: bottom, top;
}
.perf { position: absolute; left: 22px; right: 22px; top: calc(var(--band) / 2 - 1px); height: 2px; background: repeating-linear-gradient(90deg, rgba(205, 174, 114, 0.7) 0 5px, transparent 5px 10px); }
.stub small { display: block; color: var(--dim); font-size: 12px; }
.stub b { font: 400 44px/1 var(--condensed); color: var(--cream); letter-spacing: 2px; font-weight: 400; }
.stub .seat { text-align: right; }
.stub .seat b { color: var(--gold); }
@media (hover: hover) { .ticket:hover .stub-wrap { transform: var(--peel); } }
@media (hover: none) { .ticket.in .stub-wrap { transform: var(--peel); transition-delay: .6s; } }
.ticket.torn .stub-wrap { transform: var(--rip); opacity: 0; transition: transform .6s cubic-bezier(.45, 0, .75, .35), opacity .3s ease .25s; }
.ticket.torn .ticket-main { transform: translateY(-5px); }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding: 40px 0 48px; color: var(--dim); font-size: 14px; }
.foot-grid { display: grid; gap: 26px; }
.site-foot .wordmark { font-size: 34px; }
.site-foot p { max-width: 46em; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.site-foot nav a { color: var(--cream-2); text-decoration: none; }
.site-foot nav a:hover { color: var(--gold); }

/* ---------- Why Plaudit ---------- */
.define { padding: calc(var(--head-h) + 70px) 0 80px; position: relative; isolation: isolate; overflow: hidden; }
.define .burst { top: 30%; left: 78%; width: 1100px; }
.define .telugu { margin-bottom: 18px; }
.word { font: 800 clamp(96px, 26vw, 220px)/0.85 var(--display); color: var(--gold); letter-spacing: 1px; display: flex; flex-wrap: wrap; padding-bottom: 0.14em; }
.word span { display: inline-block; }
.js .word span { opacity: 0; translate: 0 -0.35em; rotate: -6deg; }
.ready .word span { opacity: 1; translate: 0 0; rotate: 0deg; transition: opacity .4s ease, translate .7s var(--spring), rotate .7s var(--spring); transition-delay: calc(var(--i) * 70ms + 150ms); }
.word .dot { color: var(--red); }
.phon { margin-top: 18px; font-size: 20px; color: var(--cream); display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.phon i { color: var(--dim); font-size: 16px; }
.sense { margin-top: 22px; font-size: clamp(22px, 4.6vw, 30px); line-height: 1.3; max-width: 22em; color: var(--cream); }
.etym { margin-top: 18px; color: var(--cream-2); max-width: 34em; font-size: 17px; }
.define .fade { opacity: 1; }
.js .define .fade { opacity: 0; translate: 0 12px; }
.ready .define .fade { opacity: 1; translate: 0 0; transition: opacity .8s ease var(--d), translate .8s var(--ease) var(--d); }
.claps-hero { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.claps-hero span { position: absolute; color: var(--gold); font-size: 26px; opacity: 0; animation: burstOut 1.6s var(--ease) forwards; animation-delay: var(--delay); }
@keyframes burstOut { 0% { opacity: 0; translate: 0 0; scale: .4; } 20% { opacity: 1; } 100% { opacity: 0; translate: var(--x) var(--y); scale: 1; rotate: var(--r); } }

.read-along { font: 400 clamp(34px, 7.4vw, 60px)/1.04 var(--condensed); letter-spacing: 0.5px; max-width: 20em; }
.read-along .w { color: #3d332b; transition: color .25s ease; }
.read-along .w.lit { color: var(--cream); }
.story { display: grid; gap: 22px; margin-top: 46px; max-width: 40em; color: var(--cream-2); font-size: 18px; }

.principles { display: grid; gap: 0; border-top: 1px solid var(--line); }
.principle { display: grid; gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.principle h3 { font: 400 clamp(36px, 7vw, 48px)/0.95 var(--condensed); letter-spacing: 0.6px; color: var(--cream); transition: color .3s ease, translate .4s var(--ease); }
.principle:hover h3 { color: var(--gold); translate: 8px 0; }
.principle p { color: var(--cream-2); max-width: 34em; }

.timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 40px; display: grid; gap: 40px; }
.timeline::before, .timeline::after { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; }
.timeline::before { background: var(--line); }
/* The line fills only as far as we've actually got. */
.timeline::after { background: linear-gradient(var(--red), var(--gold)); transform-origin: top; transform: scaleY(var(--to, 0.2)); }
.js .timeline::after { transform: scaleY(0); }
.timeline.in::after { transform: scaleY(var(--to, 0.2)); transition: transform 1.6s var(--ease) .3s; }
.tl-item { position: relative; }
.tl-item::before { content: ''; position: absolute; left: -36px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 2px solid var(--line); transition: background-color .3s ease, border-color .3s ease, scale .4s var(--spring); z-index: 1; }
.tl-item.now::before { background: var(--red-bright); border-color: var(--red-bright); animation: pulse 1.8s ease-out infinite; }
.tl-item small { font: 400 17px/1 var(--condensed); letter-spacing: 1.6px; color: var(--dim); }
.tl-item.now small { color: var(--red-bright); }
.tl-item h3 { font: 400 clamp(34px, 6vw, 44px)/1 var(--condensed); letter-spacing: 0.6px; margin-top: 6px; }
.tl-item p { color: var(--cream-2); margin-top: 6px; max-width: 32em; }

/* ---------- Wider screens ---------- */
@media (min-width: 720px) {
  .promises { grid-template-columns: repeat(3, 1fr); }
  .rules { grid-template-columns: 1fr 1fr; gap: 56px; }
  .badges { grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .ticket { grid-template-columns: 1fr 220px; --peel: rotate(-4deg); --rip: translate(90px, 40px) rotate(-16deg); }
  .ticket-main {
    padding: 46px calc(44px + var(--band)) 40px 44px; border-radius: 16px 0 0 16px;
    background-image:
      radial-gradient(circle at calc(100% - var(--band) / 2) 0, var(--ink) 13px, transparent 13.5px),
      radial-gradient(circle at calc(100% - var(--band) / 2) 100%, var(--ink) 13px, transparent 13.5px),
      radial-gradient(120% 140% at 0 0, #2e2018, transparent 60%);
    box-shadow: inset 1px 0 var(--gold-line), inset 0 1px var(--gold-line), inset 0 -1px var(--gold-line);
    -webkit-mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1.44 0 L1.44 0.0 L4.88 3.85 L2.48 7.69 L4.63 11.54 L2.11 15.38 L5.57 19.23 L0.6 23.08 L6.02 26.92 L0.6 30.77 L5.79 34.62 L0.62 38.46 L4.69 42.31 L1.76 46.15 L7.05 50.0 L0.8 53.85 L5.11 57.69 L2.41 61.54 L7.4 65.38 L2.25 69.23 L5.67 73.08 L3.52 76.92 L4.55 80.77 L3.15 84.62 L5.33 88.46 L0.86 92.31 L4.78 96.15 L1.39 100.0 L0 100Z'/%3E%3C/svg%3E"); mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1.44 0 L1.44 0.0 L4.88 3.85 L2.48 7.69 L4.63 11.54 L2.11 15.38 L5.57 19.23 L0.6 23.08 L6.02 26.92 L0.6 30.77 L5.79 34.62 L0.62 38.46 L4.69 42.31 L1.76 46.15 L7.05 50.0 L0.8 53.85 L5.11 57.69 L2.41 61.54 L7.4 65.38 L2.25 69.23 L5.67 73.08 L3.52 76.92 L4.55 80.77 L3.15 84.62 L5.33 88.46 L0.86 92.31 L4.78 96.15 L1.39 100.0 L0 100Z'/%3E%3C/svg%3E");
    -webkit-mask-size: calc(100% - var(--band)) 100%, var(--band) 100%; mask-size: calc(100% - var(--band)) 100%, var(--band) 100%;
    -webkit-mask-position: left, right; mask-position: left, right;
  }
  .stub-wrap { margin: 0 0 0 calc(-1 * var(--band)); }
  .stub {
    flex-direction: column; align-items: flex-start; justify-content: space-between;
    padding: 34px 26px 34px calc(26px + var(--band)); border-radius: 0 16px 16px 0;
    background-image:
      radial-gradient(circle at calc(var(--band) / 2) 0, var(--ink) 13px, transparent 13.5px),
      radial-gradient(circle at calc(var(--band) / 2) 100%, var(--ink) 13px, transparent 13.5px);
    box-shadow: inset -1px 0 var(--gold-line), inset 0 1px var(--gold-line), inset 0 -1px var(--gold-line);
    -webkit-mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 100' preserveAspectRatio='none'%3E%3Cpath d='M8 0 L1.44 0 L1.44 0.0 L4.88 3.85 L2.48 7.69 L4.63 11.54 L2.11 15.38 L5.57 19.23 L0.6 23.08 L6.02 26.92 L0.6 30.77 L5.79 34.62 L0.62 38.46 L4.69 42.31 L1.76 46.15 L7.05 50.0 L0.8 53.85 L5.11 57.69 L2.41 61.54 L7.4 65.38 L2.25 69.23 L5.67 73.08 L3.52 76.92 L4.55 80.77 L3.15 84.62 L5.33 88.46 L0.86 92.31 L4.78 96.15 L1.39 100.0 L8 100Z'/%3E%3C/svg%3E"); mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 100' preserveAspectRatio='none'%3E%3Cpath d='M8 0 L1.44 0 L1.44 0.0 L4.88 3.85 L2.48 7.69 L4.63 11.54 L2.11 15.38 L5.57 19.23 L0.6 23.08 L6.02 26.92 L0.6 30.77 L5.79 34.62 L0.62 38.46 L4.69 42.31 L1.76 46.15 L7.05 50.0 L0.8 53.85 L5.11 57.69 L2.41 61.54 L7.4 65.38 L2.25 69.23 L5.67 73.08 L3.52 76.92 L4.55 80.77 L3.15 84.62 L5.33 88.46 L0.86 92.31 L4.78 96.15 L1.39 100.0 L8 100Z'/%3E%3C/svg%3E");
    -webkit-mask-size: calc(100% - var(--band)) 100%, var(--band) 100%; mask-size: calc(100% - var(--band)) 100%, var(--band) 100%;
    -webkit-mask-position: right, left; mask-position: right, left;
  }
  .stub .seat { text-align: left; }
  .perf { left: calc(var(--band) / 2 - 1px); right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(205, 174, 114, 0.7) 0 5px, transparent 5px 10px); }
  .ticket.torn .ticket-main { transform: translateX(-5px); }
  .principle { grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: baseline; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
  .site-foot nav { justify-content: flex-end; }
}
@media (min-width: 900px) {
  :root { --gutter: 36px; --head-h: 72px; }
  .head-nav { display: flex; }
  .hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: 24px; }
  .burst { left: 74%; top: 52%; }
  .stage { height: 560px; }
  .scene-row { grid-template-columns: 1fr 1fr; gap: 70px; padding: 60px 0; }
  .scene-row:nth-child(even) .scene-copy { order: 2; }
  .section { padding: 150px 0 0; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .steps::before, .steps::after { left: 24px; right: 24px; top: 23px; bottom: auto; width: auto; height: 2px; }
  .steps::after { background: linear-gradient(90deg, var(--red), var(--gold)); transform-origin: left; transform: none; }
  .js .steps::after { transform: scaleX(0); }
  .steps.in::after { transform: scaleX(1); }
  .step { grid-template-columns: 1fr; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  body::after { display: none; }
}