/* Design language from Gaurav's Diwali posts: upGrad red and cream grounds, very heavy black type with the punchline
   swapped to cream/red, thin gold diya strings, small gold 4-point stars. No characters (Kratee: they don't work on Meta ads).
   Desktop first; phone pass later (notes in RESUME.md). */
:root {
  /* grounds: deeper, quieter crimson (Kratee 2026-10-29: "too much red"); upGrad red only for small accents */
  --bg: #9A1B2B; --bg-deep: #721322; --bg-night: #470B15;
  --red: #EE2C3C; --red-deep: #C8102E; --red-dark: #8E0E1A; --red-night: #470B15;
  --cream: #F8EFDF; --paper: #FFFBF4;
  --ink: #1A1A1A; --ink-soft: #6E5E50; --line: #E5D6BF;
  /* one muted gold, tuned to sit at the same visual weight as the crimson */
  --gold: #E2B65A; --gold-hi: #F3D9A0; --saffron: #E39A3B; --gold-ink: #9C6B1E;
  --festive: "Yatra One", "Archivo Black", serif;
  --display: "Archivo Black", "Arial Black", sans-serif;
  --body: "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { background: var(--bg-night); }
body { margin: 0; background: var(--bg-night); color: var(--ink); font: 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
body.lock { overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
#cursorFx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; } /* a canvas does not stretch from inset alone */

.band { position: relative; overflow: hidden; }
.band.red { background: radial-gradient(120% 90% at 30% 20%, var(--bg) 0%, var(--bg-deep) 70%, var(--bg-night) 100%); color: var(--cream); }
.band.cream { background: var(--cream); }
.inner { max-width: 1200px; margin: 0 auto; padding: 0 48px; position: relative; z-index: 2; }
.inner.narrow { max-width: 900px; }
.center { text-align: center; }
.tw { animation: tw 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.tw:nth-child(2n) { animation-delay: .8s; } .tw:nth-child(3n) { animation-delay: 1.5s; }
@keyframes tw { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }

/* ---------- type ---------- */
.lockup { font: 400 clamp(2.3rem, 5.4vw, 5.6rem)/.96 var(--display); letter-spacing: -.035em; margin: 14px 0 0; }
.lockup span { display: block; white-space: nowrap; }
.red .lockup .l1, .lockup.on-red .l1 { color: var(--cream); }
.red .lockup .l2, .lockup.on-red .l2 { color: var(--ink); }
.lockup.small { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.lockup.small span { display: inline; }
h2 { font: 400 clamp(2rem, 3.4vw, 2.9rem)/1.04 var(--display); letter-spacing: -.025em; margin: 6px 0 0; text-wrap: balance; }
.eyebrow, .step-tag { font: 700 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; margin: 0; }
.red .eyebrow, .step-tag.light { color: var(--gold); }
.step-tag { color: var(--red); }
.sub { color: var(--ink-soft); font-size: 18px; margin: 12px auto 0; max-width: 56ch; }

/* ---------- buttons ---------- */
.cta { display: inline-flex; align-items: center; gap: 10px; background: var(--gold); color: var(--bg-night); border: 0; font: 700 18px var(--body); padding: 18px 30px; border-radius: 999px; box-shadow: 0 12px 30px rgba(30,0,6,.35), inset 0 -2px 0 rgba(0,0,0,.12); transition: transform .15s, background .15s, box-shadow .15s; }
.cta:hover { transform: translateY(-2px); background: var(--gold-hi); box-shadow: 0 16px 36px rgba(30,0,6,.42), inset 0 -2px 0 rgba(0,0,0,.12); }
.red-cta { background: var(--red); color: #fff; margin-top: 34px; }
.red-cta:hover { background: var(--red-deep); }
.cream-cta { background: var(--cream); color: var(--bg-deep); }
.cream-cta:hover { background: #fff; }
.link { background: none; border: 0; color: var(--gold); font: 700 14px var(--body); text-decoration: underline; text-underline-offset: 4px; padding: 13px 16px; margin-top: 2px; min-height: 44px; }
.ghost { margin-top: 24px; background: none; border: 2px solid rgba(248,239,223,.5); color: var(--cream); font: 700 15px var(--body); padding: 12px 22px; border-radius: 999px; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- hero ---------- */
.hero { padding: 26px 0 70px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tb-left, .tb-right { display: flex; align-items: center; gap: 14px; }
.tb-brand { font: 700 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--cream); }
.tb-from { font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(246,231,200,.8); }
.tb-cta { border: 1.5px solid var(--gold); background: rgba(226,182,90,.12); color: var(--gold-hi); font: 700 14px/1 var(--body); padding: 11px 18px; border-radius: 999px; transition: background .15s, color .15s; }
.tb-cta:hover { background: var(--gold); color: var(--bg-night); }
.ug-logo { display: block; height: 30px; width: auto; }
.topbar-sep { width: 1px; height: 26px; background: rgba(246,231,200,.4); }
.festive { font: 400 26px/1 var(--festive); color: var(--gold-hi); letter-spacing: .01em; transform: translateY(2px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 30px; align-items: center; min-height: 640px; padding-top: 30px; }
/* reading order: headline → gift box → tagline → (quotes, lede: quiet) → price + CTA */
.tagline { font: 700 26px/1.25 var(--body); margin: 20px 0 0; color: var(--gold-hi); letter-spacing: -.01em; }
.quotes { font: 600 17px/1.4 var(--body); font-style: italic; color: rgba(246,231,200,.78); margin: 18px 0 0; }
.lede { font-size: 17px; max-width: 44ch; margin: 8px 0 0; color: rgba(246,231,200,.72); }
.hero-buy { display: flex; align-items: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.from { font-size: 16px; margin: 0; color: rgba(246,231,200,.85); }
.from b { font-family: var(--display); font-weight: 400; color: var(--gold-hi); font-size: 21px; }
.hero-art { position: relative; height: 520px; display: grid; place-items: center; }
.hero-art .glow { position: absolute; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(243,217,160,.34), rgba(226,182,90,0) 65%); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .8; } }
.hero-box { width: 86%; max-width: 480px; margin-top: 84px; cursor: pointer; }
.bubble { position: absolute; background: var(--paper); color: var(--bg-deep); font: 700 17px/1 var(--body); padding: 13px 18px; border-radius: 22px; box-shadow: 0 10px 24px rgba(40,0,8,.3); opacity: 0; transform: translateY(10px) scale(.9); }
.bubble::after { content: ""; position: absolute; left: 22px; bottom: -7px; width: 14px; height: 14px; background: var(--paper); transform: rotate(45deg); border-radius: 2px; }
.bubble.b1 { left: 2%; top: 14%; } .bubble.b2 { right: 4%; top: 6%; } .bubble.b3 { right: 0; top: 46%; }
.bubble.show { animation: pop .5s cubic-bezier(.34,1.6,.6,1) forwards; }
.bubble.gone { animation: poof .45s ease-in forwards; }
@keyframes pop { to { opacity: 1; transform: none; } }
@keyframes poof { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px) scale(.6); filter: blur(2px); } }

/* ---------- gift box (shared): Shriya's ivory + gold box, cut into layers (assets/box/*.webp, one 1260x1100 frame)
   stack, back to front: shadow · inside of the box · warm light · course cards · box body · lid
   .open lifts the lid off its left hinge; cards rise out of the box; closing sinks them back behind the front wall ---------- */
.giftbox { position: relative; width: 100%; aspect-ratio: 1260 / 1100; }
.gb-tilt { position: absolute; inset: 0; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.gb-pop, .gb-float { position: absolute; inset: 0; }
.gb-float { animation: gbfloat 4.6s ease-in-out infinite; will-change: transform; }
@keyframes gbfloat { 50% { transform: translateY(-2.2%); } }
.gb-shadow { position: absolute; left: 6%; right: 6%; bottom: -3%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(25,0,6,.55), rgba(25,0,6,0)); animation: gbshadow 4.6s ease-in-out infinite; }
@keyframes gbshadow { 50% { transform: scale(.92); opacity: .75; } }
.gb-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.gb-light { position: absolute; left: 49.7%; top: 40.5%; width: 95%; height: 95%; transform: translate(-50%, -62%) scale(.55); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,232,170,.7), rgba(255,206,120,.28) 45%, rgba(255,200,110,0) 100%); transition: opacity .45s ease, transform .7s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; }
.giftbox.open .gb-light { opacity: 1; transform: translate(-50%, -62%) scale(1); animation: gblight 3s ease-in-out .7s infinite; }
@keyframes gblight { 50% { opacity: .78; } }
.gb-cards { position: absolute; inset: 0; }
/* closing: one calm move with no overshoot, so the lid never dips into the box; opening: a soft spring */
.gb-lid { transform-origin: 2.1% 47.1%; transition: transform .6s cubic-bezier(.45,0,.25,1); will-change: transform; }
.giftbox.open .gb-lid { transform: translate(-3%, -27%) rotate(-11deg); transition: transform .8s cubic-bezier(.3,1.35,.5,1); }
.gb-lidbob { position: absolute; inset: 0; }
@keyframes bob { 50% { transform: translateY(-1.6%); } }
.giftbox.pop .gb-pop { animation: boxpop .5s cubic-bezier(.34,1.8,.6,1); }
@keyframes boxpop { 40% { transform: scale(1.035) rotate(-1.2deg); } }
.giftbox.jiggle:not(.open) .gb-lid { animation: jiggle .45s ease-in-out; }
@keyframes jiggle { 25% { transform: rotate(-2.5deg) translateY(-1%); } 60% { transform: rotate(1.8deg); } }
/* course cards: gold-foil tickets that drop into the box and peek out of it while it is open */
.gb-slot { position: absolute; width: 11.5%; height: 29.5%; }
/* ivory paper card like the carousel tiles: icon on top, short course name running down the card */
.gb-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; container-type: inline-size; border-radius: 10% / 4.5%; background: #FEF9E7; border: 1.5px solid #D9B266; transform-origin: 50% 100%; overflow: hidden;
  box-shadow: 0 6px 14px rgba(40,0,8,.28), inset 0 0 0 2px rgba(255,255,255,.55); opacity: 0; transform: translateY(-140%) rotate(var(--r, 0deg)); transition: transform .65s cubic-bezier(.34,1.5,.64,1), opacity .25s; will-change: transform; }
.gb-ic { display: block; flex: none; width: 84%; aspect-ratio: 1; margin-top: 5%; pointer-events: none; }
.gb-lbl { display: block; margin-top: 2%; writing-mode: vertical-rl; font: 400 19cqw/1 var(--display); letter-spacing: .06em; color: #9A1B2B; white-space: nowrap; }
.giftbox.open .gb-slot.on .gb-card { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
/* closing: cards sink behind the front wall, then fade so no corner can peek under the box */
.giftbox:not(.open) .gb-slot.on .gb-card { opacity: 0; transform: translateY(92%) rotate(var(--r, 0deg)); transition: transform .45s cubic-bezier(.4,0,.6,1), opacity .15s linear .3s; }
@media (prefers-reduced-motion: reduce) { .gb-float, .gb-shadow { animation: none !important; } }

/* ---------- packed: red section with the blurred tile carousel ---------- */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 1; pointer-events: none; background: linear-gradient(rgba(138,24,39,0), #8A1827); }
.band.red.packed { padding: 40px 0 110px; background: linear-gradient(180deg, #8A1827 0%, var(--bg-deep) 55%, var(--bg-night) 100%); }
.packed h2 { color: var(--cream); }
.sub.light { color: rgba(248,239,223,.85); }
.carousel { position: relative; isolation: isolate; height: 560px; margin: 36px 0 10px; touch-action: pan-y; outline: none; }
.carousel:focus-visible { box-shadow: inset 0 0 0 3px var(--gold); }
.c-track { position: absolute; inset: 0; }
.c-tile { position: absolute; left: 50%; top: 50%; width: 340px; background: var(--paper); color: var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px rgba(60,0,8,.35); transition: box-shadow .3s; user-select: none; -webkit-user-select: none; will-change: transform, filter; }
.c-tile.on { box-shadow: 0 36px 80px rgba(30,0,6,.55), 0 0 0 2px rgba(226,182,90,.6); }
.c-img { position: relative; aspect-ratio: 4 / 5; background: var(--paper); }
.c-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(rgba(255,251,244,0), var(--paper)); pointer-events: none; }
.c-img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.c-ph { display: none; position: absolute; inset: 0; place-items: center; font-size: 46px; color: var(--gold-ink); }
.c-tile.pending img { visibility: hidden; }
.c-tile.pending .c-ph { display: grid; }
.c-txt { padding: 4px 24px 24px; margin-top: -54px; position: relative; }
.c-txt h3 { font: 400 26px/1.05 var(--display); letter-spacing: -.02em; margin: 0; }
.c-txt p { font-size: 15px; color: var(--ink-soft); margin: 6px 0 0; }
.c-arrow { position: absolute; bottom: -62px; z-index: 200; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(248,239,223,.45); background: rgba(71,11,21,.4); color: var(--cream); font-size: 20px; backdrop-filter: blur(6px); }
.c-arrow:hover { background: rgba(94,7,16,.6); }
.c-arrow.prev { left: calc(50% - 150px); } .c-arrow.next { right: calc(50% - 150px); }
.c-dots { display: flex; justify-content: center; align-items: center; gap: 8px; height: 48px; margin: 6px 0 40px; }
.c-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(248,239,223,.35); transition: width .3s, background .3s; }
.c-dots i.on { width: 22px; border-radius: 4px; background: var(--gold); }
.chips { list-style: none; padding: 0; margin: 30px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 780px; }
.chips li { font: 700 15px var(--body); background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; padding: 11px 18px; }
.chips li::before { content: "✦ "; color: var(--gold-ink); }
.chips.on-dark li { background: rgba(248,239,223,.08); border-color: rgba(248,239,223,.25); color: var(--cream); }
.chips.on-dark li::before { color: var(--gold); }
.band.red.closing { padding: 80px 0 60px; background: var(--bg-night); }
.fine { color: rgba(248,239,223,.7); font-size: 13px; margin-top: 16px; }

/* ---------- builder ---------- */
.builder { position: fixed; inset: 0; z-index: 100; overflow-y: auto; color: var(--cream);
  background: radial-gradient(120% 80% at 50% 0%, var(--bg) 0%, var(--bg-deep) 50%, var(--bg-night) 100%); }
.builder.enter { animation: benter .35s ease-out; }
/* reactive backgrounds: embers (bgfx v2) behind the hero, small rangoli (bgfx v6) behind the builder */
.b-bg { position: fixed; inset: 0; z-index: 0; }
.builder > .b-top, .builder > .screen { position: relative; z-index: 1; }
.builder > .b-top { position: sticky; z-index: 5; }
@keyframes benter { from { opacity: 0; transform: scale(.985); } }
.b-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; background: linear-gradient(rgba(71,11,21,.6), rgba(71,11,21,0)); }
.b-back, .b-close { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(248,239,223,.35); background: rgba(248,239,223,.08); font-size: 18px; }
.b-back:hover, .b-close:hover { background: rgba(248,239,223,.18); }
.b-back[disabled] { visibility: hidden; }
.b-dots { display: flex; gap: 10px; }
.b-dots i { width: 34px; height: 5px; border-radius: 3px; background: rgba(248,239,223,.25); transition: background .3s; }
.b-dots i.on { background: var(--gold); }
.screen { max-width: 1040px; margin: 0 auto; padding: 20px 40px 80px; text-align: center; }
.screen.enter { animation: senter .45s cubic-bezier(.2,.8,.2,1); }
@keyframes senter { from { opacity: 0; transform: translateY(18px); } }
.screen h2 { color: var(--cream); }
.b-sub { font-size: 18px; color: rgba(248,239,223,.85); margin: 12px auto 0; max-width: 54ch; }

.tcard { position: relative; text-align: left; background: var(--paper); color: var(--ink); border: 0; border-radius: 24px; padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s; box-shadow: 0 18px 40px rgba(60,0,8,.35); }
.tcard:hover { box-shadow: 0 26px 60px rgba(60,0,8,.45); }
.tcard .sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; mix-blend-mode: multiply;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgba(242,193,78,.55), rgba(242,193,78,0) 42%),
              linear-gradient(115deg, rgba(255,255,255,0) calc(var(--sx, 50%) - 18%), rgba(255,236,190,.6) var(--sx, 50%), rgba(255,255,255,0) calc(var(--sx, 50%) + 18%)); }
.tcard:hover .sheen { opacity: 1; }
.tcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--red) 0 16px, var(--gold) 16px 22px); }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 820px; margin: 44px auto 0; perspective: 1000px; }
.who .em { font-size: 34px; }
.who .th { font: 400 34px/1 var(--display); letter-spacing: -.02em; margin-top: 6px; }
.who .tp { font-size: 16px; color: var(--ink-soft); min-height: 48px; }
.who .tgo, .dom .tgo { margin-top: 10px; font: 700 15px var(--body); color: var(--red); }
.domain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; perspective: 1000px; }
.dom { min-height: 260px; }
.dom .ico { width: 54px; height: 54px; border-radius: 16px; background: var(--cream); display: grid; place-items: center; color: var(--red); margin-top: 4px; }
.dom .ico svg { width: 28px; height: 28px; }
.dom .th { font: 400 22px/1.08 var(--display); letter-spacing: -.015em; margin-top: 10px; }
.dom .tp { font-size: 15px; color: var(--ink-soft); }
.dom .tgo { margin-top: auto; }

/* curation */
.curation { display: grid; grid-template-columns: 380px 1fr; gap: 60px; align-items: center; text-align: left; min-height: calc(100vh - 100px); min-height: calc(100svh - 100px); }
.cur-box { width: 100%; }
.cur-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cur-lines li { font: 600 20px/1.35 var(--body); color: rgba(248,239,223,.45); display: flex; gap: 12px; align-items: baseline; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s, color .35s; }
.cur-lines li.in { opacity: 1; transform: none; }
.cur-lines li.now { color: var(--cream); }
.cur-lines li::before { content: "✦"; color: var(--gold); font-size: 14px; }
.cur-lines li.final { font: 400 30px/1.15 var(--display); color: var(--cream); letter-spacing: -.015em; margin-top: 10px; }
.cur-lines li.final::before { content: none; }

/* reveal */
.reveal { max-width: 1100px; }
.rv-mix { max-width: 60ch; margin: 14px auto 0; color: rgba(248,239,223,.9); font-size: 17px; }
.rv-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; text-align: left; }
.group { background: var(--paper); color: var(--ink); border-radius: 22px; padding: 24px 24px 20px; position: relative; overflow: hidden; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; box-shadow: 0 18px 40px rgba(60,0,8,.3); }
.group.in { opacity: 1; transform: none; }
.group.wide { grid-column: 1 / -1; }
.group .gk { font: 700 12px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.group .gd { font-size: 15px; color: var(--ink-soft); margin: 6px 0 0; }
.group .gt { font: 400 22px/1.1 var(--display); letter-spacing: -.015em; margin-top: 8px; }
.group .gm { display: inline-block; margin-top: 12px; font: 700 13px var(--body); padding: 6px 12px; border-radius: 999px; background: #E6F4EA; color: #1E6B3A; }
.group .gm.coupon { background: #FFF1D6; color: #8A5A00; }
.group ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.group li { font: 600 15.5px/1.35 var(--body); padding-left: 22px; position: relative; }
.group li::before { content: "✦"; position: absolute; left: 0; top: 1px; color: var(--gold-ink); font-size: 13px; }
.group.free ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.group.big { background: linear-gradient(140deg, #FFF6DC, #F7DB92); }
.group.big .bigitem { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(168,114,27,.25); }
.group.big .gk + .bigitem, .group.big .gd + .bigitem { border-top: 0; padding-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form-lockup { text-align: center; margin: 22px 0 0; font-size: 1.6rem; }
.form-lockup .l1 { color: var(--ink); } .form-lockup .l2 { color: var(--red); }
.group.big .bt { font: 400 19px/1.15 var(--display); letter-spacing: -.01em; }
.group.big .bb { font: 700 13px var(--body); color: var(--gold-ink); margin-top: 4px; text-transform: uppercase; letter-spacing: .1em; }
.group.big .gnote { font-size: 14.5px; color: #5E4A1C; margin-top: 14px; }
.group.big .gm { background: rgba(26,26,26,.08); color: var(--ink); }
.rv-loaded { margin-top: 56px; }
.rv-loaded-h { font-size: 17px; color: rgba(248,239,223,.9); margin: 10px 0 0; }
.rv-cta { position: sticky; bottom: 0; margin: 50px -40px -80px; padding: 20px 40px; display: flex; align-items: center; justify-content: center; gap: 24px; background: linear-gradient(rgba(71,11,21,0), rgba(71,11,21,.94) 35%); }
.price { font: 400 54px/1 var(--display); letter-spacing: -.03em; color: var(--cream); }
.price .rs { font-size: .6em; vertical-align: .32em; margin-right: 2px; }

/* checkout */
.checkout { max-width: 760px; }
.form-card { background: var(--paper); color: var(--ink); border-radius: 24px; padding: 32px; margin-top: 30px; text-align: left; box-shadow: 0 30px 60px rgba(60,0,8,.4); }
.summary { background: var(--cream); border-radius: 14px; padding: 14px 18px; font-size: 15px; margin-bottom: 20px; }
.summary b { font-family: var(--display); font-weight: 400; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 12px; }
legend { font: 400 21px var(--display); margin-bottom: 10px; letter-spacing: -.01em; }
.self-line { margin: -4px 0 4px; color: var(--ink-soft); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: flex; flex-direction: column; gap: 6px; font: 700 12px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
input, textarea { width: 100%; min-width: 0; font: 500 16px var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; }
textarea { resize: vertical; line-height: 1.45; }
input:focus, textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(238,44,60,.15); }
input.bad { border-color: var(--red); background: #FFF5F5; }
.pay { width: 100%; margin-top: 8px; border: 0; background: var(--red); color: #fff; font: 400 20px var(--display); letter-spacing: -.01em; padding: 19px; border-radius: 999px; transition: background .15s, transform .1s; }
.pay:hover { background: var(--red-deep); }
.secure { text-align: center; color: var(--ink-soft); font-size: 14px; margin: 12px 0 0; }
.secure.err { color: var(--red-deep); font-weight: 600; }

/* success */
.success .giftbox.small { width: 280px; margin: 20px auto 0; }
.success .lockup.small { margin-top: 30px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---------- campaign logo (sticker lockup, transparent PNG/WebP) ---------- */
.logo-h1, .logo-p { margin: 0; }
.logo { display: block; height: auto; max-width: 100%; }
.logo-hero { width: min(480px, 100%); margin: 8px 0 0; filter: drop-shadow(0 12px 26px rgba(40,0,8,.28)); }
.logo-foot { width: min(460px, 86%); margin: 0 auto; }
.logo-form { width: 260px; margin: 22px auto 0; }
.logo-done { width: min(380px, 90%); margin: 30px auto 0; }

/* ---------- reviewer view toggle + phone frame (device.js) ---------- */
.view-toggle { position: fixed; white-space: nowrap; top: 14px; left: 50%; transform: translateX(-50%); z-index: 10000; background: rgba(26,26,26,.85); color: #fff; text-decoration: none; font: 700 13px var(--body); padding: 9px 16px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,.25); backdrop-filter: blur(6px); }
.view-toggle:hover { background: #000; }
html.device-mode, html.device-mode body { background: #241712; }
html.device-mode, html.device-mode * { cursor: auto !important; }
.device-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 70px 16px 30px; }
.phone { width: 414px; height: 868px; max-height: calc(100vh - 120px); border-radius: 54px; background: #0d0d0d; padding: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 2px #2a2a2a; }
.phone iframe { width: 390px; height: 100%; border: 0; border-radius: 42px; background: var(--bg); display: block; }
.device-note { color: rgba(255,255,255,.55); font: 500 13px var(--body); margin: 0; }

/* ---------- phone pass (findings M1–M16 in MOBILE_TODO.md) ---------- */
@media (max-width: 640px) {
  .inner { padding: 0 16px; }
  .screen { padding: 12px 16px 64px; }
  .hero { padding: 18px 0 40px; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 0; padding-top: 14px; }
  .hero-copy { display: contents; }
  .logo-h1 { order: 1; } .hero-art { order: 2; } .tagline { order: 3; } .quotes { order: 4; } .lede { order: 5; }
  .hero-art { height: auto; margin-top: 4px; place-items: end center; padding: 70px 0 12px; }
  .hero-box { margin-top: 0; }
  /* phone: the box sits right under the headline, so the lid lifts less and barely tilts */
  .giftbox.hero-box.open .gb-lid { transform: translate(-2%, -24%) rotate(-6deg); }
  .hero-art .glow { width: 260px; height: 260px; }
  .hero-box { width: 62%; }
  .topbar { gap: 12px; } .ug-logo { height: 24px; } .topbar-sep { height: 20px; } .festive { font-size: 21px; }
  .lockup { font-size: clamp(2.3rem, 11vw, 5.6rem); }
  .logo-hero { width: 100%; margin-left: -4px; }
  .tagline { font-size: 21px; margin-top: 6px; }
  .quotes { font-size: 15px; margin-top: 12px; }
  .lede, .from { font-size: 15.5px; }
  .cta { font-size: 16px; padding: 16px 22px; }
  .bubble { font-size: 13px; padding: 9px 12px; white-space: nowrap; }
  .bubble.b1 { left: 0; top: 4%; } .bubble.b2 { right: 0; top: 20%; } .bubble.b3 { left: 4%; right: auto; top: 44%; }
  .b-top { padding: 12px 16px; }
  .who-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  .who .tp { min-height: 0; }
  .who .th { font-size: 28px; }
  .tcard { padding: 22px 20px 18px; }
  .domain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
  .dom { min-height: 0; }
  .dom .th { font-size: clamp(16px, 4.8vw, 19px); overflow-wrap: anywhere; }
  .dom .tp { font-size: 13.5px; }
  .curation { grid-template-columns: 1fr; gap: 16px; justify-items: center; align-content: start; }
  .cur-box { width: 180px; margin-top: 46px; } /* room for the lid to lift without hitting the top bar */
  .cur-lines li { font-size: 16px; }
  .cur-lines li.final { font-size: 24px; }
  .rv-groups { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .group { padding: 20px 18px 16px; }
  .group .gt { font-size: 19px; }
  .group.free ul { grid-template-columns: 1fr; }
  .rv-cta { margin: 40px -16px -64px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .rv-cta .price { display: none; }
  .rv-cta .cta { width: 100%; justify-content: center; white-space: nowrap; }
  .row2 { grid-template-columns: 1fr; }
  .form-card { padding: 20px 16px; }
  .band.red.packed { padding: 28px 0 80px; }
  .carousel { height: 470px; margin-top: 24px; }
  .c-tile { width: 74vw; max-width: 320px; }
  .c-txt { padding: 4px 18px 18px; margin-top: -44px; }
  .c-txt h3 { font-size: 22px; }
  .c-arrow { display: none; }
  .c-dots { height: 28px; margin-bottom: 26px; }
}
body.lock .view-toggle { display: none; }

/* ---------- ?screens=1 static layout of every builder step (for the Figma import) ---------- */
html.screens-mode body { background: var(--red-night); }
html.screens-mode .view-toggle, html.screens-mode .b-top, html.screens-mode .b-bg, html.screens-mode #cursorFx { display: none !important; }
html.screens-mode .builder { position: static; overflow: visible; background: none; }
html.screens-mode .screen { background: radial-gradient(120% 80% at 50% 0%, var(--bg) 0%, var(--bg-deep) 55%, var(--bg-night) 100%); max-width: none; padding: 60px max(40px, calc((100% - 1040px) / 2)) 90px; border-bottom: 6px solid var(--gold); }
html.screens-mode .curation { min-height: 0; }
html.screens-mode .rv-cta { position: static; margin: 50px 0 0; background: none; }
.screen-label { grid-column: 1 / -1; font: 700 12px var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); background: var(--gold); display: inline-block; padding: 6px 12px; border-radius: 999px; margin: 0 0 24px; justify-self: start; }

/* ---------- AI Badhaai Box copy round (2026-10-29) ---------- */
.band.red.intro { padding: 30px 0 100px; background: linear-gradient(180deg, #8A1827 0%, var(--bg-deep) 60%, var(--bg-night) 100%); }
.intro h2 { color: var(--cream); font-size: clamp(2.2rem, 4vw, 3.4rem); }
.intro h2 .by { color: var(--gold-hi); }
.intro-lead { font: 700 22px/1.35 var(--body); color: var(--gold-hi); margin: 16px auto 0; max-width: 34ch; }
.intro .sub.light { margin-top: 12px; }
.intro-from { font: 400 22px/1 var(--display); color: var(--cream); margin: 30px 0 16px; }
.foot-brand { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 22px; }
.foot-brand .ug-logo { height: 26px; }
.foot-by { font: 700 15px var(--body); color: var(--gold-hi); margin: 18px 0 0; }
.to-top { display: inline-block; margin-top: 22px; font: 700 12px var(--body); letter-spacing: .16em; text-transform: uppercase; color: rgba(246,231,200,.75); text-decoration: none; padding: 12px 14px; }
.to-top:hover { color: var(--gold-hi); }
/* curation copy */
.cur-copy { display: flex; flex-direction: column; gap: 10px; }
.cur-h { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0 0 12px; }
.cur-lines li { white-space: pre-line; }
/* reveal: domain block + edition label */
.rv-domain { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 36px 0 0; text-align: left; background: rgba(246,231,200,.06); border: 1px solid rgba(246,231,200,.14); border-radius: 22px; padding: 24px 28px; }
.rv-domain h3 { font: 400 30px/1.05 var(--display); color: var(--cream); margin: 0; letter-spacing: -.015em; }
.rv-curated { font: 700 16px var(--body); color: var(--gold-hi); margin: 8px 0 0; }
.rv-line { font-size: 16px; color: rgba(246,231,200,.82); margin: 6px 0 0; max-width: 56ch; }
.edition { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 24px; border-radius: 16px; text-align: center;
  background: linear-gradient(150deg, #FBF1DC, #EBD4A2); color: var(--bg-deep); box-shadow: 0 14px 30px rgba(30,0,6,.35), inset 0 0 0 1.5px rgba(184,134,47,.5); }
.ed-brand { font: 700 12px var(--body); letter-spacing: .06em; }
.ed-name { font: 700 11px var(--body); letter-spacing: .18em; color: var(--gold-ink); }
.ed-price { font: 400 30px/1 var(--display); letter-spacing: -.02em; }
.rv-inside { margin-top: 40px; }
.rv-groups { margin-top: 18px; }
.rv-loaded { margin-top: 70px; }
.rv-loaded-h { font-size: clamp(1.6rem, 2.8vw, 2.3rem); max-width: 24ch; margin: 0 auto; }
.reveal .carousel { margin-top: 24px; }
/* payment summary */
.summary { display: grid; gap: 8px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.sum-k { font: 700 11px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.sum-v { font: 700 15px var(--body); color: var(--ink); text-align: right; }
.sum-row.total { border-top: 1px solid var(--line); padding-top: 8px; }
.sum-row.total .sum-v { font: 400 20px var(--display); }
.summary .link.change { justify-self: start; color: var(--bg-deep); padding: 8px 0 0; min-height: 0; }
.self-line { margin: 0 0 4px; color: var(--ink-soft); }
@media (max-width: 860px) { .tb-brand, .tb-brand-sep, .tb-from { display: none; } }
@media (max-width: 640px) {
  .tb-cta { padding: 9px 13px; font-size: 13px; white-space: nowrap; }
  .festive { white-space: nowrap; font-size: 19px; }
  .topbar { gap: 8px; }
  .tb-left { gap: 10px; }
  .logo-hero { width: 92%; margin-top: 4px; }
  .hero-buy { gap: 14px; margin-top: 18px; }
  .hero-copy .hero-buy { order: 7; }
  .band.red.intro { padding: 10px 0 70px; }
  .intro-lead { font-size: 19px; }
  .intro h2 .by { display: block; }
  .rv-domain { flex-direction: column; align-items: stretch; padding: 18px; gap: 16px; }
  .rv-domain h3 { font-size: 24px; }
  .rv-loaded { margin-top: 48px; }
}

/* landing carousel inside the "AI Badhaai Box by upGrad" band */
.intro-packed { margin-top: 46px; text-align: center; position: relative; z-index: 2; }
.packed-h { font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--display); color: var(--cream); letter-spacing: -.02em; margin: 0; }
.intro-packed .carousel { margin-top: 26px; }
.intro-packed .c-dots { margin-bottom: 10px; }

/* ================= v3 · Kratee's layout (2026-10-29): relatives' hero, How it works, What's inside ================= */
:root { --v3-red: #8E1730; --v3-red2: #7A1128; --v3-ink: #9B1B30; --v3-cream: #FBF4E8; --v3-gold: #D9A84A; --serif: "Playfair Display", Georgia, serif; --serif-b: "Lora", Georgia, serif; }
/* ground = the living rangoli canvas (bgfx v6 reads --bg) with drifting embers (bgfx v2) on top; plain red until they start */
.v3-hero { position: relative; overflow: hidden; padding: 22px 0 0; color: var(--v3-cream); --bg: #8E1730; background: var(--v3-red); }
.v3-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; z-index: 4;
  background: linear-gradient(135deg, var(--v3-cream) 33%, transparent 33%) 0 0 / 12px 12px repeat-x, linear-gradient(225deg, var(--v3-cream) 33%, transparent 33%) 0 0 / 12px 12px repeat-x, var(--v3-gold); }
.v3-nav { position: relative; z-index: 6; max-width: 1180px; margin: 0 auto; width: calc(100% - 48px); display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-radius: 14px; padding: 10px 22px; box-shadow: 0 10px 30px rgba(40,0,10,.25); }
.v3-ug { height: 30px; width: auto; display: block; }
.v3-sog { height: 46px; width: auto; display: block; }
.v3-strings { position: absolute; top: 74px; width: 90px; height: 300px; z-index: 1; pointer-events: none; }
.v3-strings svg { width: 100%; height: 100%; }
.v3-strings.left { left: 3%; } .v3-strings.right { right: 3%; transform: scaleX(-1); }
.v3-stage { position: relative; max-width: 1180px; margin: 0 auto; height: 700px; }
.v3-arch { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); width: 440px; height: 640px; z-index: 1; text-align: center;
  background: var(--v3-cream); border: 4px solid var(--v3-ink); border-radius: 220px 220px 0 0 / 260px 260px 0 0; border-bottom: 0;
  box-shadow: 0 0 0 12px var(--v3-cream), 0 0 0 15px rgba(217,168,74,.75); padding-top: 150px; }
.v3-title { font: 800 104px/.92 var(--serif); color: var(--v3-ink); margin: 0; letter-spacing: -.01em; }
.v3-tag { font: 500 22px/1.35 var(--body); color: #A13A40; margin: 22px 0 0; }
.char { position: absolute; bottom: 12px; z-index: 3; width: 410px; }
.char.aunty { left: 0; } .char.uncle { right: 0; }
.char-fig { position: relative; transform-origin: 50% 100%; }
.fig { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.fig-talk, .fig-blink { position: absolute; inset: 0; opacity: 0; }
.char.mouth .fig-talk { opacity: 1; } .char.blink .fig-blink { opacity: 1; }
.char.speaking .char-fig { animation: v3nod 1.4s ease-in-out; }
@keyframes v3nod { 20% { transform: rotate(-1.6deg) translateY(-4px); } 45% { transform: rotate(1.2deg); } 70% { transform: rotate(-.8deg) translateY(-2px); } }
.char-fig { animation: v3breathe 4.2s ease-in-out infinite; }
@keyframes v3breathe { 50% { transform: translateY(-3px) scale(1.006); } }
.char.speaking .char-fig { animation: v3nod 1.4s ease-in-out, v3breathe 4.2s ease-in-out infinite; }
/* speech bubbles slide in from the speaker's side */
.c-bubble { position: absolute; top: -40px; margin: 0; z-index: 5; font: 700 34px/1.05 var(--serif); color: var(--v3-red2); background: var(--v3-cream); border: 3px solid var(--v3-gold);
  border-radius: 50%; padding: 26px 30px; min-width: 170px; text-align: center; box-shadow: 0 10px 24px rgba(40,0,10,.28); opacity: 0; transition: opacity .35s ease, transform .55s cubic-bezier(.3,1.4,.5,1); }
.c-bubble::after { content: ""; position: absolute; bottom: -16px; width: 26px; height: 26px; background: var(--v3-cream); border: 3px solid var(--v3-gold); border-top: 0; border-left: 0; }
.aunty .c-bubble { left: 60px; transform: translateX(-60px) scale(.8); }
.aunty .c-bubble::after { left: 58%; transform: rotate(35deg) skew(12deg); }
.uncle .c-bubble { right: 40px; transform: translateX(60px) scale(.8); }
.uncle .c-bubble::after { right: 58%; transform: rotate(55deg) skew(-12deg); }
.char.said .c-bubble { opacity: 1; transform: none; }
.v3-down { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--v3-cream); color: var(--v3-cream); display: grid; place-items: center; animation: v3bob 2.4s ease-in-out infinite; }
.v3-down svg { width: 22px; height: 22px; }
@keyframes v3bob { 50% { transform: translate(-50%, 5px); } }
/* How it works */
.v3-how { background: var(--v3-cream); color: #3A1A12; padding: 60px 0 70px; position: relative; }
.v3-orn { display: flex; align-items: center; justify-content: center; gap: 12px; }
.v3-orn i { width: 90px; height: 1.5px; background: var(--v3-gold); }
.v3-orn svg { width: 40px; height: 24px; }
.v3-orn.bottom { margin-top: 40px; }
.v3-how h2 { font: 800 clamp(2.2rem, 4.4vw, 3.6rem)/1.05 var(--serif); color: var(--v3-ink); margin: 18px 0 0; letter-spacing: -.02em; }
.v3-sub { font: italic 400 clamp(1.1rem, 1.8vw, 1.5rem)/1.4 var(--serif-b); color: #4A2A20; margin: 12px 0 0; }
.v3-steps { list-style: none; padding: 0; margin: 56px auto 0; max-width: 900px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.v3-steps li { position: relative; background: #FFFBF3; border: 1.5px solid var(--v3-gold); border-radius: 18px; padding: 40px 18px 26px; box-shadow: inset 0 0 0 5px #FFFBF3, inset 0 0 0 6px rgba(217,168,74,.45); }
.v3-steps .n { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--v3-ink); color: #fff; font: 700 20px/44px var(--serif); box-shadow: 0 0 0 4px var(--v3-cream); }
.st-ic { width: 130px; height: 98px; display: block; margin: 0 auto 12px; }
.v3-steps h3 { font: 700 22px/1.2 var(--serif); color: var(--v3-ink); margin: 0; }
.v3-steps p { font: 400 17px/1.4 var(--serif-b); color: #4A2A20; margin: 6px 0 0; }
.v3-cta { display: inline-flex; align-items: center; gap: 14px; margin-top: 46px; background: var(--v3-red); color: var(--v3-cream); border: 2.5px solid var(--v3-gold); border-radius: 999px; padding: 18px 40px; font: 500 22px/1 var(--serif-b); box-shadow: 0 12px 28px rgba(80,0,20,.28); transition: transform .15s, background .15s; }
.v3-cta:hover { transform: translateY(-2px); background: var(--v3-red2); }
.v3-cta svg { width: 26px; height: 26px; color: #F3D9A0; }
.v3-cta.light { background: var(--v3-cream); color: var(--v3-ink); }
.v3-cta.light svg { color: var(--v3-ink); }
/* What's inside: red band with the tile slides and a drifting row of course cards */
.v3-courses { background: linear-gradient(180deg, var(--v3-red) 0%, var(--v3-red2) 100%); padding: 70px 0 80px; color: var(--v3-cream); overflow: hidden; }
.v3-courses h2 { font: 800 clamp(2rem, 3.8vw, 3.2rem)/1.1 var(--serif); color: var(--v3-cream); margin: 0; }
.v3-courses .intro-packed { margin-top: 10px; }
.course-strip { overflow: hidden; margin: 10px 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cs-track { display: flex; gap: 16px; width: max-content; animation: csdrift 50s linear infinite; padding: 10px 0 14px; }
.course-strip:hover .cs-track { animation-play-state: paused; }
@keyframes csdrift { to { transform: translateX(-50%); } }
.cs-card { flex: none; width: 96px; height: 214px; background: #FEF9E7; border: 1.5px solid #D9B266; border-radius: 14px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 10px 20px rgba(30,0,8,.3); }
.cs-card img { width: 86px; height: 86px; margin-top: 6px; }
.cs-card span { writing-mode: vertical-rl; font: 400 19px/1 var(--display); letter-spacing: .06em; color: #9A1B2B; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .cs-track { animation: none; } }
@media (max-width: 1100px) { .char { width: 36%; } .v3-arch { width: 380px; height: 580px; padding-top: 130px; } .v3-title { font-size: 88px; } }
@media (max-width: 640px) {
  .v3-hero { padding-top: 12px; }
  .v3-nav { width: calc(100% - 24px); padding: 8px 14px; border-radius: 12px; }
  .v3-ug { height: 22px; } .v3-sog { height: 34px; }
  .v3-strings { top: 60px; width: 46px; height: 150px; } .v3-strings.left { left: 1%; } .v3-strings.right { right: 1%; }
  .v3-stage { height: 168vw; }
  .v3-arch { top: 22px; width: 74vw; height: 120vw; padding-top: 18vw; border-radius: 37vw 37vw 0 0 / 44vw 44vw 0 0; box-shadow: 0 0 0 8px var(--v3-cream), 0 0 0 10px rgba(217,168,74,.75); }
  .v3-title { font-size: 17vw; } .v3-tag { font-size: 4.4vw; margin-top: 3vw; }
  .char { width: 50vw; bottom: 10px; } .char.aunty { left: -3vw; } .char.uncle { right: -3vw; }
  .c-bubble { font-size: 5.4vw; padding: 3.4vw 4vw; min-width: 0; top: -9vw; border-width: 2px; white-space: nowrap; }
  .aunty .c-bubble { left: 8vw; } .uncle .c-bubble { right: 8vw; }
  .v3-down { display: none; }
  .v3-how { padding: 44px 0 50px; }
  .v3-steps { grid-template-columns: 1fr; gap: 34px; margin-top: 40px; max-width: 340px; }
  .v3-cta { font-size: 18px; padding: 16px 26px; }
  .v3-courses { padding: 50px 0 60px; }
}

/* pinned hero: later sections slide over it (thoughtsofayush-style); top is set in JS for heroes taller than the screen */
.v3-hero { position: sticky; top: 0; z-index: 0; }
.v3-stage { transform-origin: 50% 30%; will-change: transform; }
.v3-dim { position: absolute; inset: 0; z-index: 7; background: #2A0610; opacity: 0; pointer-events: none; }
.v3-how, .v3-courses, .band.red.closing { position: relative; z-index: 2; }
.v3-how { border-radius: 28px 28px 0 0; box-shadow: 0 -24px 50px rgba(30,0,8,.35); margin-top: -28px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
/* first screen is all hero: it fills the viewport, characters sit on its bottom edge */
.v3-hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.v3-stage { width: 100%; margin-top: auto; }
/* bubbles sit higher and behind the heads (the figure paints over them), so a face is never covered */
.char-fig { position: relative; z-index: 1; }
.c-bubble { z-index: 0; top: -132px; }
.aunty .c-bubble { left: -10px; } .uncle .c-bubble { right: -20px; }
@media (max-width: 640px) { .c-bubble { top: -21vw; } .aunty .c-bubble { left: 4vw; } .uncle .c-bubble { right: 4vw; } }
@media (max-width: 640px) { .v3-stage { height: 186vw; } }
/* logos hang in the top corners (no white bar); the diya strings drop from under each logo */
.v3-hang-row { position: absolute; left: 0; right: 0; top: 18px; z-index: 6; max-width: 1320px; margin: 0 auto; padding: 0 28px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.v3-hang { display: flex; flex-direction: column; pointer-events: auto; }
.v3-hang.left { align-items: flex-start; } .v3-hang.right { align-items: flex-end; }
.v3-hang .v3-sog { height: 62px; width: auto; display: block; filter: drop-shadow(0 6px 14px rgba(30,0,8,.35)); }
.v3-hang .v3-ug { height: 34px; width: auto; display: block; margin-top: 12px; }
.v3-hang .v3-strings { position: static; width: 90px; height: 260px; margin-top: -4px; }
.v3-hang.left .v3-strings { margin-left: 18px; transform: none; }
.v3-hang.right .v3-strings { margin-right: 4px; transform: scaleX(-1); margin-top: 6px; }
@media (max-width: 640px) {
  .v3-hang-row { top: 12px; padding: 0 14px; }
  .v3-hang .v3-sog { height: 40px; } .v3-hang .v3-ug { height: 22px; margin-top: 8px; }
  .v3-hang .v3-strings { width: 46px; height: 132px; }
  .v3-hang.left .v3-strings { margin-left: 10px; }
}
@media (min-width: 641px) { .v3-hang .v3-sog { height: 84px; } .v3-hang .v3-ug { height: 40px; } }
/* stage scales as one piece (set in JS) from its bottom centre; a wrapper keeps the right height in the page */
@media (min-width: 641px) {
  .v3-stage { position: relative; left: 50%; width: 1180px; max-width: none; height: 700px; margin-top: 0; transform-origin: 50% 100%; }
  .v3-hero { justify-content: flex-end; }
  .v3-hero .v3-stage { margin-top: calc(var(--stage-h, 700px) - 700px); } /* the box keeps 700px; the scaled stage fills the bottom --stage-h */
  .c-bubble { font-size: 30px; padding: 22px 28px; }
  .aunty .c-bubble { left: 120px; } .uncle .c-bubble { right: 110px; }
  .v3-hang .v3-strings { height: 210px; }
}
@media (min-width: 641px) and (max-width: 1180px) { .v3-stage { width: 100vw; } }
@media (min-width: 641px) { .v3-stage { margin-left: 0; margin-right: 0; } }
/* logos always sit in the real screen corners (wide screens included), well clear of the bubbles */
.v3-hang-row { max-width: none; padding: 0 clamp(16px, 2.2vw, 40px); }

/* talk / blink: small patches (mouth open, eyes shut) cut from ChatGPT's aligned edits, laid exactly over the base image */
.char-fig .fig-patch { position: absolute; inset: auto; height: auto; opacity: 0; pointer-events: none; user-select: none; }

/* course tiles (paper-cut, same set as the homepage slides) on the domain cards and the "What's inside" cards */
.dom .dom-img { display: block; width: calc(100% + 56px); margin: -30px -28px 10px; aspect-ratio: 720 / 523; background: #FEF9EE; overflow: hidden; }
.dom .dom-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.group .g-img { height: 150px; margin: -24px -24px 16px; background: #FEF9EE; display: flex; justify-content: center; overflow: hidden; }
.group .g-img img { height: 100%; width: auto; display: block; }
.group.big .g-img { background: #FEF9EE; }
@media (max-width: 640px) {
  .dom .dom-img { width: calc(100% + 40px); margin: -22px -20px 8px; }
  .group .g-img { height: 120px; margin: -20px -18px 14px; }
}
.group .g-img { background: transparent; }
.group .g-img img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
@media (max-width: 640px) { .dom .th { font-size: clamp(14px, 3.9vw, 17px); overflow-wrap: normal; word-break: normal; } }

/* ---------- phone hero, refit (2026-10-29): everything is sized in --u, which is 1vw but shrinks on short screens
   so the arch (no empty space under the tagline), the bubble and the characters always fit on the first screen ---------- */
@media (max-width: 640px) {
  .v3-hero { --u: min(1vw, calc((100svh - 30px) / 185)); }
  .v3-stage { height: calc(185 * var(--u)); }
  .v3-arch { top: calc(14 * var(--u)); width: calc(76 * var(--u)); height: calc(120 * var(--u)); padding-top: calc(13 * var(--u));
    border-radius: calc(38 * var(--u)) calc(38 * var(--u)) 0 0 / calc(44 * var(--u)) calc(44 * var(--u)) 0 0; }
  .v3-title { font-size: calc(16 * var(--u)); }
  .v3-tag { font-size: calc(4.4 * var(--u)); margin-top: calc(3 * var(--u)); }
  .char { width: calc(56 * var(--u)); bottom: 0; }
  .char.aunty { left: calc(50% - 56 * var(--u)); } .char.uncle { right: calc(50% - 56 * var(--u)); left: auto; }
  .c-bubble { font-size: calc(5.2 * var(--u)); padding: calc(3 * var(--u)) calc(4 * var(--u)); top: calc(-17 * var(--u)); }
  .aunty .c-bubble { left: calc(12 * var(--u)); } .uncle .c-bubble { right: calc(10 * var(--u)); }
}
@media (max-width: 640px) { .c-bubble { top: calc(-14 * var(--u)); } }
/* ChatGPT step icons: fit inside the same 130×98 slot as the drawn ones, so all three cards stay level */
.st-ic.st-img { width: 150px; height: 112px; object-fit: contain; }
/* bubble tail: a gold-edged triangle that starts at the bubble's bottom edge, so it can never cover the words */
.c-bubble::before, .c-bubble::after { content: ""; position: absolute; border: 0 !important; transform: none !important; }
.c-bubble::before { top: calc(100% - 3px); width: 34px; height: 28px; background: var(--v3-gold); }
.c-bubble::after { top: calc(100% - 4px); width: 26px; height: 22px; background: var(--v3-cream); }
.aunty .c-bubble::before { left: 54%; clip-path: polygon(0 0, 100% 0, 18% 100%); }
.aunty .c-bubble::after { left: calc(54% + 4px); clip-path: polygon(0 0, 100% 0, 18% 100%); }
.uncle .c-bubble::before { right: 54%; left: auto; clip-path: polygon(0 0, 100% 0, 82% 100%); }
.uncle .c-bubble::after { right: calc(54% + 4px); left: auto; clip-path: polygon(0 0, 100% 0, 82% 100%); }
@media (max-width: 640px) {
  .c-bubble::before { width: 22px; height: 18px; top: calc(100% - 2px); }
  .c-bubble::after { width: 17px; height: 14px; top: calc(100% - 3px); }
  .aunty .c-bubble::after { left: calc(54% + 3px); } .uncle .c-bubble::after { right: calc(54% + 3px); }
}

/* details pop-up over the builder */
.dpop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.dpop-back { position: absolute; inset: 0; background: rgba(30,4,10,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dpop-card { position: relative; width: min(560px, 100%); max-height: calc(100svh - 40px); overflow-y: auto; margin: 0; text-align: left; }
.dpop.enter .dpop-back { animation: dfade .25s ease-out; }
.dpop.enter .dpop-card { animation: dpopin .38s cubic-bezier(.2,1.2,.3,1); }
@keyframes dfade { from { opacity: 0; } }
@keyframes dpopin { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.dpop-title { font: 700 26px/1.15 var(--serif); color: var(--v3-ink); margin: 0 30px 16px 0; }
.dpop-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); font-size: 15px; }
.dpop fieldset { margin-bottom: 14px; }
#selfLegend:not(.sr-only) { font: 700 16px var(--serif); color: var(--v3-ink); margin: 6px 0 8px; }
.sum-people { margin: 14px 0 4px; display: grid; gap: 8px; }
.sum-people .sum-v { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
#editDetails { padding: 4px 0 12px; min-height: 0; color: var(--bg-deep); }
@media (max-width: 640px) { .dpop { padding: 10px; align-items: end; } .dpop-card { border-radius: 22px 22px 16px 16px; } .dpop-title { font-size: 22px; } }
/* form buttons match the v3 page CTAs (maroon, gold edge, serif) */
.pay { background: var(--v3-red); border: 2px solid var(--v3-gold); font: 500 19px/1 var(--serif-b); color: var(--v3-cream); padding: 17px; box-shadow: 0 10px 24px rgba(80,0,20,.25); }
.pay:hover { background: var(--v3-red2); }
/* reveal heading: exactly two lines, "Congratulations … Box." then "There's a lot packed inside." */
.rv-loaded-h { max-width: none; font-size: clamp(1.15rem, 2.9vw, 2.3rem); }
.rv-loaded-h .l { display: block; white-space: nowrap; }
@media (max-width: 640px) { .rv-loaded-h { font-size: clamp(.95rem, 4.9vw, 1.3rem); } }
@media (max-width: 640px) { .rv-loaded-h { font-size: 3.6vw; letter-spacing: -.01em; } }
/* "Who's it for" cards: illustration across the top on warm cream */
.who .who-img { display: flex; justify-content: center; align-items: flex-end; height: 210px; margin: -30px -28px 14px; padding-top: 16px; background: radial-gradient(70% 90% at 50% 100%, #F6E3C0 0%, #FEF6E8 60%, #FFFBF3 100%); }
.who .who-img img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
@media (max-width: 640px) { .who .who-img { height: 150px; margin: -22px -20px 10px; } }