@font-face {
  font-family: "TS Display";
  src: url("../fonts/archivo-black.woff2") format("woff2");
  font-weight: 400 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TS Body";
  src: url("../fonts/mulish-variable.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --yellow: #ffc928;
  --cream: #f4efe4;
  --paper: #fffdf8;
  --ink: #101010;
  --muted: #625e56;
  --red: #f25742;
  --blue: #4c8fff;
  --green: #63c174;
  --lilac: #a58bff;
  --line: 2px solid var(--ink);
  --display: "TS Display", "Arial Black", "Avenir Next Heavy", Impact, sans-serif;
  --body: "TS Body", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --shell: 1320px;
  --shadow: 7px 7px 0 var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--body); overflow-x: hidden; }
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
.shell { width: min(var(--shell), calc(100% - 48px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.micro { display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: .15em; line-height: 1.2; text-transform: uppercase; }
.display { font-family: var(--display); font-weight: 900; letter-spacing: -.055em; text-wrap: balance; }
.section { padding: 104px 0; }
.section-dark { color: #fff; background: var(--ink); }
.section-yellow { background: var(--yellow); }
.section-red { background: var(--red); }
.section-blue { background: var(--blue); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 48px; }
.section-head h2 { max-width: 900px; margin: 8px 0 0; font-family: var(--display); font-size: clamp(52px, 7vw, 104px); font-weight: 900; letter-spacing: -.065em; line-height: .88; text-wrap: balance; }
.section-head p { max-width: 430px; margin: 0; font-size: 19px; font-weight: 650; line-height: 1.45; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 13px 20px; border: var(--line); border-radius: 12px; font-weight: 900; line-height: 1; white-space: nowrap; box-shadow: 4px 4px 0 var(--ink); transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; }
.button:hover { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.button-dark { color: #fff; background: var(--ink); }
.button-dark:hover { color: var(--ink); background: var(--yellow); }
.button-yellow { color: var(--ink); background: var(--yellow); }
.button-light { color: var(--ink); background: var(--paper); }
.button-red { color: #fff; background: var(--red); }
.button-wide { width: 100%; }
.text-button { padding: 0; border: 0; border-bottom: 2px solid currentColor; color: inherit; background: transparent; font-weight: 900; }
.icon-button { width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: var(--line); border-radius: 50%; background: var(--paper); font-size: 29px; font-weight: 800; line-height: 1; }

/* Header */
.site-header { position: sticky; z-index: 80; top: 0; border-bottom: var(--line); color: var(--ink); background: rgba(255, 201, 40, .96); backdrop-filter: blur(12px); }
.header-inner { min-height: 88px; display: grid; grid-template-columns: 240px 1fr auto; align-items: center; gap: 28px; }
.site-logo { width: 220px; height: 52px; display: block; overflow: hidden; }
.logo-crop { position: relative; display: block; width: 220px; height: 52px; overflow: hidden; }
.logo-crop img { position: absolute; width: 238px; max-width: none; left: -7px; top: -93px; }
.logo-crop-dark img { top: -93px; }
.main-nav { display: flex; justify-content: center; gap: 12px; }
.main-nav a { min-width: 150px; display: flex; flex-direction: column; gap: 1px; padding: 9px 14px; border-radius: 11px; transition: background .18s ease, transform .18s ease; }
.main-nav a:hover { background: rgba(255, 255, 255, .7); transform: translateY(-2px); }
.main-nav strong { font-family: var(--display); font-size: 17px; letter-spacing: -.03em; }
.main-nav small { color: #514615; font-size: 11px; font-weight: 800; }
.cart-trigger { min-width: 102px; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 8px 12px; border: var(--line); border-radius: 12px; background: var(--paper); box-shadow: 4px 4px 0 var(--ink); font-weight: 900; }
.cart-trigger b { min-width: 26px; height: 26px; display: grid; place-items: center; padding: 0 7px; border-radius: 999px; color: #fff; background: var(--ink); }
.menu-toggle { display: none; }

/* Home hero */
.home-hero { position: relative; min-height: 730px; display: flex; align-items: center; overflow: hidden; border-bottom: var(--line); background: var(--yellow); }
.hero-noise { position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(#111 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; }
.home-hero-grid { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 24px; padding: 70px 0 76px; }
.home-hero-copy { position: relative; z-index: 3; }
.home-hero h1 { max-width: 700px; margin: 12px 0 22px; font-family: var(--display); font-size: clamp(72px, 8.8vw, 142px); font-weight: 900; letter-spacing: -.075em; line-height: .82; }
.home-hero h1 span { display: block; }
.home-hero h1 .hero-hit { color: #fff; -webkit-text-stroke: 3px var(--ink); text-shadow: 5px 5px 0 var(--ink); }
.home-hero-copy > p { max-width: 610px; margin: 0 0 28px; font-size: clamp(20px, 2vw, 27px); font-weight: 750; line-height: 1.25; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.hero-shelf { position: relative; min-height: 560px; }
.hero-card { position: absolute; overflow: hidden; border: var(--line); border-radius: 34px; box-shadow: 10px 10px 0 var(--ink); background: var(--paper); }
.hero-card img { width: 100%; height: 100%; object-fit: cover; }
.hero-card span { position: absolute; right: 10px; bottom: 10px; padding: 8px 11px; border: var(--line); border-radius: 9px; background: var(--paper); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.hero-card-one { z-index: 3; width: 43%; height: 55%; left: 4%; top: 6%; transform: rotate(-7deg); }
.hero-card-two { z-index: 4; width: 40%; height: 50%; right: 4%; top: 2%; transform: rotate(7deg); }
.hero-card-three { z-index: 5; width: 44%; height: 50%; left: 8%; bottom: 0; transform: rotate(5deg); }
.hero-card-four { z-index: 6; width: 43%; height: 54%; right: 2%; bottom: -1%; transform: rotate(-5deg); }
.hero-card:hover { z-index: 10; transform: rotate(0) translateY(-8px); transition: transform .22s ease; }
.marquee { overflow: hidden; border-bottom: var(--line); color: #fff; background: var(--ink); }
.marquee-track { width: max-content; display: flex; gap: 26px; padding: 15px 0; animation: marquee 28s linear infinite; }
.marquee span { font-family: var(--display); font-size: 20px; letter-spacing: -.02em; white-space: nowrap; }
.marquee i { color: var(--yellow); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Home products */
.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 54px 28px; }
.game-tile { position: relative; min-width: 0; }
.game-image { position: relative; height: 500px; overflow: hidden; border-radius: 38% 38% 24px 24px; background: #e8e3da; }
.game-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.game-tile:hover .game-image img { transform: scale(1.04); }
.game-number { position: absolute; z-index: 2; top: 20px; left: 20px; width: 52px; height: 52px; display: grid; place-items: center; border: var(--line); border-radius: 50%; background: var(--paper); font-family: var(--display); font-size: 21px; }
.game-copy { padding: 22px 4px 0; }
.game-title-row { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.game-title-row h3 { max-width: 540px; margin: 0; font-family: var(--display); font-size: clamp(40px, 5vw, 72px); font-weight: 900; letter-spacing: -.06em; line-height: .88; }
.game-copy > p { max-width: 610px; margin: 13px 0 17px; font-size: 18px; font-weight: 700; line-height: 1.4; }
.price-lockup { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.price-lockup del { color: var(--muted); font-size: 17px; font-weight: 800; }
.price-lockup strong { font-size: 30px; font-weight: 900; }
.spec-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0; }
.spec-chip { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1.5px solid var(--ink); border-radius: 999px; background: rgba(255, 255, 255, .55); font-size: 12px; font-weight: 850; }
.spec-chip svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.game-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.quick-cart { min-height: 44px; padding: 10px 16px; border: var(--line); border-radius: 10px; background: transparent; font-weight: 900; transition: background .18s ease; }
.quick-cart:hover { background: var(--yellow); }

/* Find a game */
.mood-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mood-card { min-height: 290px; display: flex; flex-direction: column; justify-content: space-between; padding: 25px; border: var(--line); border-radius: 24px; box-shadow: 5px 5px 0 var(--ink); transition: transform .18s ease; }
.mood-card:hover { transform: translateY(-7px); }
.mood-card:nth-child(1) { background: var(--yellow); }
.mood-card:nth-child(2) { background: var(--blue); }
.mood-card:nth-child(3) { background: var(--green); }
.mood-card:nth-child(4) { color: #fff; background: var(--ink); }
.mood-card b { font-family: var(--display); font-size: 53px; line-height: 1; }
.mood-card h3 { margin: 0 0 9px; font-family: var(--display); font-size: 27px; letter-spacing: -.04em; line-height: .95; }
.mood-card p { margin: 0 0 18px; font-size: 15px; font-weight: 700; line-height: 1.35; }
.mood-card span { font-size: 13px; font-weight: 900; text-decoration: underline; text-underline-offset: 4px; }

/* Bundles */
.bundle-showcase { display: grid; grid-template-columns: repeat(12, 1fr); gap: 26px; }
.bundle-tile { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: var(--paper); }
.bundle-tile:nth-child(1) { grid-column: span 7; }
.bundle-tile:nth-child(2) { grid-column: span 5; }
.bundle-tile:nth-child(3), .bundle-tile:nth-child(4) { grid-column: span 6; }
.bundle-photo { height: 360px; overflow: hidden; }
.bundle-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.bundle-tile:hover .bundle-photo img { transform: scale(1.035); }
.bundle-copy { display: flex; flex-direction: column; flex: 1; padding: 24px; color: var(--ink); }
.bundle-copy h3 { margin: 7px 0 10px; font-family: var(--display); font-size: clamp(38px, 4.7vw, 66px); letter-spacing: -.06em; line-height: .9; }
.bundle-copy p { max-width: 600px; margin: 0 0 22px; font-size: 17px; font-weight: 700; line-height: 1.4; }
.bundle-bottom { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-top: auto; }
.saving { display: block; margin-top: 5px; color: #216e33; font-size: 13px; font-weight: 900; text-transform: uppercase; }

/* Proof and eSchool home */
.proof-strip { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: var(--line); border-radius: 28px; background: var(--paper); }
.proof-stat { padding: 32px; border-right: var(--line); }
.proof-stat:last-child { border-right: 0; }
.proof-stat strong { display: block; font-family: var(--display); font-size: clamp(54px, 7vw, 96px); letter-spacing: -.06em; line-height: .9; }
.proof-stat span { display: block; margin-top: 8px; font-size: 15px; font-weight: 800; line-height: 1.35; }
.eschool-home { display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; align-items: center; }
.eschool-home h2 { margin: 10px 0 20px; font-family: var(--display); font-size: clamp(62px, 8vw, 118px); letter-spacing: -.07em; line-height: .82; }
.eschool-home p { max-width: 570px; margin: 0 0 25px; font-size: 20px; font-weight: 700; line-height: 1.4; }
.eschool-board { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 22px; border: 2px solid #fff; border-radius: 28px; background: #1b1b1b; }
.eschool-chip { min-height: 155px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: 18px; color: var(--ink); background: var(--paper); }
.eschool-chip b { font-family: var(--display); font-size: 38px; letter-spacing: -.04em; }
.eschool-chip span { font-size: 14px; font-weight: 800; }

/* Product page */
.product-page { --page-accent: var(--yellow); }
.product-page.theme-ee { --page-accent: var(--blue); }
.product-page.theme-sfs { --page-accent: var(--green); }
.product-page.theme-sh { --page-accent: var(--red); }
.product-hero { padding: 48px 0 80px; border-bottom: var(--line); background: var(--page-accent); }
.breadcrumb { display: flex; gap: 8px; margin: 0 0 25px; color: rgba(0, 0, 0, .68); font-size: 13px; font-weight: 800; }
.product-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 50px; align-items: start; }
.product-gallery, .product-summary { min-width: 0; }
.product-gallery { overflow: hidden; }
.gallery-main { height: 610px; overflow: hidden; border-radius: 46% 46% 24px 24px; background: var(--paper); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.gallery-thumb { aspect-ratio: 1; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 14px; background: transparent; opacity: .68; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.is-active { border-color: var(--ink); opacity: 1; }
.product-summary { position: sticky; top: 118px; padding-top: 12px; }
.product-summary h1 { margin: 9px 0 17px; font-family: var(--display); font-size: clamp(62px, 7vw, 108px); font-weight: 900; letter-spacing: -.075em; line-height: .82; text-wrap: balance; }
.product-pitch { max-width: 620px; margin: 0 0 22px; font-size: clamp(20px, 2vw, 27px); font-weight: 750; line-height: 1.3; }
.product-price { display: flex; align-items: baseline; gap: 12px; margin: 17px 0; }
.product-price del { font-size: 21px; font-weight: 800; opacity: .62; }
.product-price strong { font-size: 48px; font-weight: 900; }
.purchase-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin: 18px 0 12px; }
.qty-control { min-height: 54px; display: grid; grid-template-columns: 46px 52px 46px; overflow: hidden; border: var(--line); border-radius: 12px; background: var(--paper); box-shadow: 4px 4px 0 var(--ink); }
.qty-control button, .qty-control input { min-width: 0; border: 0; background: transparent; text-align: center; font-size: 20px; font-weight: 900; }
.qty-control input { border-right: var(--line); border-left: var(--line); }
.purchase-row .button { min-height: 54px; }
.parent-share { width: 100%; min-height: 47px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 0; border-bottom: 2px solid currentColor; background: transparent; font-size: 14px; font-weight: 900; }
.buy-reassurance { margin: 15px 0 0; font-size: 13px; font-weight: 800; }
.demo-section { padding: 88px 0; overflow: hidden; }
.demo-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; align-items: center; }
.demo-copy h2 { margin: 9px 0 16px; font-family: var(--display); font-size: clamp(54px, 7vw, 104px); letter-spacing: -.065em; line-height: .86; }
.demo-copy p { max-width: 530px; font-size: 19px; font-weight: 700; line-height: 1.45; }
.demo-stage { padding: 28px; border: var(--line); border-radius: 28px; box-shadow: var(--shadow); background: var(--paper); }
.idea-combo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.idea-card { min-height: 210px; display: flex; align-items: end; padding: 18px; border: var(--line); border-radius: 18px; font-family: var(--display); font-size: clamp(24px, 3vw, 38px); letter-spacing: -.04em; line-height: .95; }
.idea-card:nth-child(1) { background: var(--green); }
.idea-card:nth-child(2) { background: var(--red); }
.idea-card:nth-child(3) { background: var(--blue); }
.demo-prompt { margin: 18px 0; font-size: 16px; font-weight: 850; }
.demo-answer { margin-top: 18px; padding: 18px; border-radius: 14px; color: #fff; background: var(--ink); font-size: 17px; font-weight: 750; line-height: 1.45; }
.ee-card-demo { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: var(--line); border-radius: 22px; }
.ee-card-demo > div { min-height: 150px; display: grid; place-items: center; padding: 20px; border-right: var(--line); border-bottom: var(--line); text-align: center; font-weight: 900; line-height: 1.25; }
.ee-card-demo > div:nth-child(2n) { border-right: 0; }
.ee-card-demo > div:nth-child(3), .ee-card-demo > div:nth-child(4) { border-bottom: 0; }
.ee-card-demo > div:nth-child(1) { background: #ef6359; }
.ee-card-demo > div:nth-child(2) { background: #f4bc42; }
.ee-card-demo > div:nth-child(3) { background: #5e9fe0; }
.ee-card-demo > div:nth-child(4) { background: #74a36d; }
.taboo-centre { margin-top: 16px; padding: 18px; border: var(--line); border-radius: 16px; background: var(--ink); color: #fff; text-align: center; }
.taboo-centre strong { display: block; font-family: var(--display); font-size: 39px; }
.decision-options { display: grid; gap: 10px; }
.decision-options button { min-height: 65px; padding: 14px 18px; border: var(--line); border-radius: 14px; background: var(--paper); text-align: left; font-weight: 850; transition: background .18s ease, transform .18s ease; }
.decision-options button:hover, .decision-options button.is-picked { background: var(--yellow); transform: translateX(5px); }
.decision-result { margin: 15px 0 0; padding: 15px; border-radius: 12px; color: #fff; background: var(--ink); font-weight: 750; }
.feature-flow { padding: 100px 0; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; margin-bottom: 80px; }
.feature-row:last-child { margin-bottom: 0; }
.feature-row:nth-child(even) .feature-photo { order: 2; }
.feature-photo { height: 520px; overflow: hidden; border-radius: 30px; }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; }
.feature-copy { padding: 18px; }
.feature-copy h2 { margin: 9px 0 15px; font-family: var(--display); font-size: clamp(42px, 5.5vw, 78px); letter-spacing: -.06em; line-height: .9; }
.feature-copy p { max-width: 560px; margin: 0; font-size: 19px; font-weight: 680; line-height: 1.5; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: var(--line); border-radius: 26px; background: var(--paper); }
.step { min-height: 250px; padding: 26px; border-right: var(--line); }
.step:last-child { border-right: 0; }
.step b { font-family: var(--display); font-size: 62px; line-height: 1; }
.step h3 { margin: 18px 0 9px; font-family: var(--display); font-size: 25px; letter-spacing: -.04em; line-height: .95; }
.step p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; }
.parent-band { padding: 38px 0; color: #fff; background: var(--ink); }
.parent-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.parent-band h2 { margin: 6px 0 0; font-family: var(--display); font-size: clamp(31px, 4vw, 56px); letter-spacing: -.05em; line-height: .95; }
.related-offer { display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; border: var(--line); border-radius: 30px; background: var(--paper); }
.related-offer-image { min-height: 440px; }
.related-offer-image img { width: 100%; height: 100%; object-fit: cover; }
.related-offer-copy { display: flex; flex-direction: column; justify-content: center; padding: 42px; }
.related-offer-copy h2 { margin: 10px 0 14px; font-family: var(--display); font-size: clamp(42px, 5vw, 72px); letter-spacing: -.06em; line-height: .9; }
.related-offer-copy p { margin: 0 0 20px; font-size: 18px; font-weight: 700; line-height: 1.45; }
.mobile-buy-bar { display: none; }

/* Bundle detail */
.bundle-page { --bundle-accent: var(--yellow); }
.bundle-page.theme-ideator { --bundle-accent: var(--blue); }
.bundle-page.theme-founder { --bundle-accent: var(--green); }
.bundle-page.theme-full { --bundle-accent: var(--red); }
.bundle-hero { padding: 50px 0 78px; border-bottom: var(--line); background: var(--bundle-accent); }
.bundle-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.bundle-hero-photo { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 40px; background: var(--paper); }
.bundle-hero-photo img { width: 100%; height: 100%; object-fit: contain; }
.bundle-summary h1 { margin: 10px 0 18px; font-family: var(--display); font-size: clamp(68px, 8vw, 120px); letter-spacing: -.075em; line-height: .82; }
.bundle-summary > p { max-width: 590px; margin: 0 0 18px; font-size: 23px; font-weight: 750; line-height: 1.35; }
.save-line { display: inline-flex; padding: 8px 12px; border: var(--line); border-radius: 9px; background: var(--paper); font-size: 13px; font-weight: 900; }
.bundle-inside-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.inside-card { display: grid; grid-template-columns: 180px 1fr; overflow: hidden; border-radius: 24px; background: var(--paper); }
.inside-card img { width: 100%; height: 100%; object-fit: cover; }
.eschool-mini-art { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; color: #fff; background: var(--ink); text-align: center; }
.eschool-mini-art strong { color: var(--yellow); font-family: var(--display); font-size: 31px; letter-spacing: -.04em; }
.eschool-mini-art small { margin-top: 5px; font-weight: 850; text-transform: uppercase; }
.inside-card div { padding: 22px; }
.inside-card h3 { margin: 0 0 8px; font-family: var(--display); font-size: 28px; letter-spacing: -.04em; line-height: .95; }
.inside-card p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; }
.value-maths { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.math-card { overflow: hidden; border: var(--line); border-radius: 24px; background: var(--paper); }
.math-line { display: flex; justify-content: space-between; gap: 24px; padding: 17px 20px; border-bottom: 1px solid #ddd; font-weight: 800; }
.math-line:last-child { border-bottom: 0; }
.math-line.total { font-family: var(--display); font-size: 25px; background: var(--yellow); }
.value-copy h2 { margin: 8px 0 14px; font-family: var(--display); font-size: clamp(50px, 6.5vw, 90px); letter-spacing: -.065em; line-height: .88; }
.value-copy p { font-size: 19px; font-weight: 700; line-height: 1.45; }

/* eSchool */
.eschool-page { color: #fff; background: var(--ink); }
.eschool-page .qty-control { color: var(--ink); }
.eschool-hero { min-height: 700px; display: grid; align-items: center; padding: 72px 0; overflow: hidden; border-bottom: 2px solid #fff; }
.eschool-hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 42px; align-items: center; }
.eschool-hero h1 { margin: 10px 0 20px; font-family: var(--display); font-size: clamp(72px, 9vw, 138px); letter-spacing: -.075em; line-height: .82; }
.eschool-hero h1 span { color: var(--yellow); }
.eschool-hero p { max-width: 600px; margin: 0 0 24px; font-size: 22px; font-weight: 700; line-height: 1.4; }
.eschool-visual { position: relative; min-height: 570px; padding: 24px; border: 2px solid #fff; border-radius: 34px; background: #1b1b1b; }
.eschool-live-card { position: absolute; padding: 22px; border-radius: 20px; color: var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }
.eschool-live-card strong { display: block; font-family: var(--display); font-size: 47px; letter-spacing: -.05em; }
.eschool-live-card span { font-size: 14px; font-weight: 850; }
.eschool-live-card:nth-child(1) { width: 58%; left: 7%; top: 7%; transform: rotate(-4deg); }
.eschool-live-card:nth-child(2) { width: 46%; right: 6%; top: 33%; transform: rotate(5deg); }
.eschool-live-card:nth-child(3) { width: 52%; left: 10%; bottom: 7%; transform: rotate(2deg); }
.eschool-live-card:nth-child(4) { width: 36%; right: 7%; bottom: 4%; background: var(--yellow); transform: rotate(-5deg); }
.eschool-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.eschool-feature { min-height: 260px; padding: 26px; border: 2px solid #fff; border-radius: 24px; background: #181818; }
.eschool-feature b { display: block; margin-bottom: 45px; color: var(--yellow); font-family: var(--display); font-size: 58px; letter-spacing: -.05em; }
.eschool-feature h3 { margin: 0 0 8px; font-family: var(--display); font-size: 26px; letter-spacing: -.04em; }
.eschool-feature p { margin: 0; color: #d7d7d7; font-size: 15px; font-weight: 650; line-height: 1.4; }
.eschool-parent { color: var(--ink); background: var(--yellow); }
.eschool-parent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.eschool-parent h2 { margin: 8px 0 17px; font-family: var(--display); font-size: clamp(54px, 7vw, 98px); letter-spacing: -.065em; line-height: .85; }
.eschool-parent p { font-size: 19px; font-weight: 700; line-height: 1.45; }
.parent-facts { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: var(--line); border-radius: 24px; background: var(--paper); }
.parent-fact { min-height: 160px; padding: 22px; border-right: var(--line); border-bottom: var(--line); }
.parent-fact:nth-child(2n) { border-right: 0; }
.parent-fact:nth-child(3), .parent-fact:nth-child(4) { border-bottom: 0; }
.parent-fact strong { display: block; font-family: var(--display); font-size: 34px; }
.parent-fact span { font-size: 14px; font-weight: 750; }

/* Cart, checkout */
.utility-hero { padding: 70px 0 45px; }
.utility-hero h1 { margin: 9px 0 0; font-family: var(--display); font-size: clamp(70px, 10vw, 150px); letter-spacing: -.075em; line-height: .82; }
.cart-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 35px; align-items: start; padding-bottom: 110px; }
.cart-list { display: grid; gap: 15px; }
.cart-line { display: grid; grid-template-columns: 120px 1fr auto auto; gap: 18px; align-items: center; padding: 14px; border-bottom: var(--line); }
.cart-line-image { height: 110px; overflow: hidden; border-radius: 18px; }
.cart-line-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-copy { display: flex; flex-direction: column; gap: 5px; }
.cart-line-copy a { font-family: var(--display); font-size: 25px; letter-spacing: -.04em; }
.cart-line-copy > span { font-weight: 800; }
.order-card { position: sticky; top: 115px; display: grid; gap: 0; padding: 25px; border: var(--line); border-radius: 25px; background: var(--paper); box-shadow: var(--shadow); }
.order-card > div:not(.checkout-summary) { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid #ddd; font-weight: 800; }
.order-card .order-total { border-bottom: 0; font-family: var(--display); font-size: 27px; }
.order-card small { margin-top: 15px; font-weight: 650; line-height: 1.4; }
.tiny { margin: 4px 0 16px; color: var(--muted); font-size: 12px; font-weight: 650; line-height: 1.4; }
.positive { color: #176c2b; }
.cart-upgrade { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 25px; border-radius: 24px; background: var(--yellow); }
.cart-upgrade h2 { margin: 4px 0 7px; font-family: var(--display); font-size: 31px; letter-spacing: -.04em; }
.cart-upgrade p { margin: 0; font-weight: 700; }
.empty-page { min-height: 500px; display: flex; flex-direction: column; align-items: start; justify-content: center; padding-bottom: 100px; }
.empty-page h1 { max-width: 760px; margin: 10px 0; font-family: var(--display); font-size: clamp(55px, 8vw, 105px); letter-spacing: -.06em; line-height: .9; }
.empty-page p { font-size: 19px; font-weight: 700; }
.giant-emoji { font-size: 72px; }
.checkout-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; padding-bottom: 110px; }
.checkout-form, .checkout-summary, .order-card { min-width: 0; }
.checkout-form { width: 100%; display: grid; gap: 15px; }
.checkout-form fieldset { min-width: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 25px; border: var(--line); border-radius: 24px; background: var(--paper); }
.checkout-form legend { padding: 0 8px; font-family: var(--display); font-size: 23px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 850; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; }
.prototype-note { padding: 18px; border-radius: 14px; background: #fff1b9; font-size: 14px; font-weight: 750; line-height: 1.4; }
.checkout-summary { display: grid; gap: 0; }
.checkout-line, .checkout-total { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid #ddd; font-weight: 800; }
.checkout-total { border-bottom: 0; font-family: var(--display); font-size: 26px; }
.checkout-success { padding: 28px; border: var(--line); border-radius: 24px; background: var(--green); }
.checkout-success h2 { margin: 0 0 8px; font-family: var(--display); font-size: 40px; }

/* Drawer and offer */
.drawer-backdrop, .modal-backdrop { position: fixed; z-index: 100; inset: 0; opacity: 0; background: rgba(0, 0, 0, .55); transition: opacity .2s ease; }
.drawer-backdrop.is-open, .modal-backdrop.is-open { opacity: 1; }
.cart-drawer { position: fixed; z-index: 110; top: 0; right: 0; width: min(470px, 100%); height: 100dvh; display: flex; flex-direction: column; padding: 24px; visibility: hidden; opacity: 0; pointer-events: none; background: var(--cream); transition: opacity .18s ease, visibility 0s linear .18s; }
.cart-drawer.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.drawer-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: var(--line); }
.drawer-head h2 { margin: 4px 0 0; font-family: var(--display); font-size: 40px; letter-spacing: -.05em; }
.drawer-items { flex: 1; overflow-y: auto; }
.drawer-item { display: grid; grid-template-columns: 86px 1fr auto; gap: 13px; align-items: center; padding: 15px 0; border-bottom: 1px solid #bbb4a8; }
.drawer-thumb { height: 82px; overflow: hidden; border-radius: 14px; }
.drawer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.drawer-item > div { display: flex; flex-direction: column; gap: 5px; }
.drawer-item-name { font-weight: 900; }
.drawer-item span { font-size: 13px; font-weight: 800; }
.remove-item { align-self: end; padding: 4px; border: 0; border-bottom: 1px solid; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; }
.mini-qty { width: max-content; display: grid; grid-template-columns: 32px 32px 32px; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 8px; }
.mini-qty button, .mini-qty b { min-height: 30px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; font-weight: 900; }
.mini-qty b { border-right: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); }
.drawer-totals { padding-top: 16px; border-top: var(--line); }
.drawer-total, .offer-applied { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; font-weight: 850; }
.offer-applied { color: #176c2b; }
.drawer-totals p { margin: 4px 0 14px; color: var(--muted); font-size: 12px; font-weight: 700; }
.drawer-empty { margin: auto 0; text-align: center; }
.drawer-empty strong { display: block; font-family: var(--display); font-size: 36px; }
.drawer-empty p { font-weight: 700; line-height: 1.4; }
.offer-tab { position: fixed; z-index: 70; right: 0; bottom: 28%; display: flex; flex-direction: column; align-items: start; padding: 12px 15px; border: var(--line); border-right: 0; border-radius: 14px 0 0 14px; color: var(--ink); background: var(--yellow); box-shadow: -4px 4px 0 var(--ink); }
.offer-tab span { font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.offer-tab strong { font-family: var(--display); font-size: 16px; }
.offer-modal { position: fixed; z-index: 120; top: 50%; left: 50%; width: min(520px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow-y: auto; padding: 32px; border: var(--line); border-radius: 28px; opacity: 0; transform: translate(-50%, -46%) scale(.96); background: var(--yellow); box-shadow: 12px 12px 0 var(--ink); transition: opacity .2s ease, transform .2s ease; }
.offer-modal.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal-close { position: absolute; top: 15px; right: 15px; }
.offer-modal h2 { max-width: 420px; margin: 8px 0 12px; font-family: var(--display); font-size: 44px; letter-spacing: -.055em; line-height: .92; }
.offer-modal > p { max-width: 420px; margin: 0 0 20px; font-weight: 750; line-height: 1.4; }
.scratch-wrap { position: relative; width: 100%; overflow: hidden; border: var(--line); border-radius: 20px; background: var(--paper); }
.scratch-reward { min-height: 200px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.scratch-reward span, .scratch-reward b { font-size: 17px; font-weight: 900; }
.scratch-reward strong { font-family: var(--display); font-size: 82px; }
.scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; transition: opacity .35s ease; }
.scratch-canvas.is-cleared { opacity: 0; pointer-events: none; }
.offer-modal .text-button { margin-top: 13px; }
.offer-result { display: grid; gap: 8px; margin-top: 18px; }
.offer-result > strong { font-family: var(--display); font-size: 23px; }
.offer-result > span { font-size: 13px; font-weight: 800; }

/* Footer */
.site-footer { padding: 64px 0 25px; border-top: 2px solid #fff; color: #fff; background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 42px; }
.footer-brand p { max-width: 330px; margin: 18px 0 0; color: #d3d3d3; font-weight: 650; line-height: 1.5; }
.footer-grid h2 { margin: 0 0 15px; color: var(--yellow); font-family: var(--display); font-size: 20px; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { color: #eee; font-size: 14px; font-weight: 750; }
.footer-grid a:hover { color: var(--yellow); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 50px; padding-top: 20px; border-top: 1px solid #444; color: #aaa; font-size: 12px; font-weight: 700; }

@media (max-width: 1100px) {
  .header-inner { grid-template-columns: 220px 1fr auto; }
  .main-nav a { min-width: 120px; }
  .home-hero-grid, .product-hero-grid, .bundle-hero-grid, .eschool-hero-grid { grid-template-columns: 1fr; }
  .home-hero-copy { max-width: 850px; }
  .hero-shelf { min-height: 520px; }
  .mood-grid { grid-template-columns: repeat(2, 1fr); }
  .bundle-showcase { grid-template-columns: repeat(2, 1fr); }
  .bundle-tile:nth-child(n) { grid-column: auto; }
  .product-summary { position: static; }
  .gallery-main { height: 620px; }
  .bundle-hero-photo { min-height: 550px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .shell { width: calc(100% - 26px); max-width: var(--shell); }
  .section { padding: 72px 0; }
  .section-head { align-items: start; flex-direction: column; margin-bottom: 34px; }
  .section-head > div, .section-head h2 { width: 100%; min-width: 0; }
  .section-head h2 { overflow-wrap: anywhere; }
  .header-inner { min-height: 72px; grid-template-columns: 1fr auto auto; gap: 11px; }
  .site-logo, .logo-crop { width: 177px; height: 42px; }
  .logo-crop img { width: 193px; left: -6px; top: -75px; }
  .menu-toggle { width: 44px; height: 44px; display: grid; align-content: center; gap: 4px; padding: 9px; border: var(--line); border-radius: 10px; background: var(--paper); }
  .menu-toggle span:not(.sr-only) { height: 2px; background: var(--ink); }
  .main-nav { position: absolute; top: 72px; left: 0; right: 0; display: none; padding: 13px; border-bottom: var(--line); background: var(--yellow); }
  .main-nav.is-open { display: grid; }
  .main-nav a { min-width: 0; flex-direction: row; align-items: baseline; justify-content: space-between; padding: 12px 16px; background: rgba(255, 255, 255, .6); }
  .cart-trigger { min-width: 54px; width: 54px; }
  .cart-trigger span { display: none; }
  .home-hero { min-height: auto; }
  .home-hero-grid { padding: 45px 0 55px; }
  .home-hero h1 { font-size: clamp(65px, 18vw, 95px); line-height: .84; }
  .home-hero h1 .hero-hit { -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink); }
  .home-hero-copy > p { max-width: 520px; font-size: 19px; }
  .hero-shelf { min-height: 440px; }
  .game-grid { grid-template-columns: 1fr; gap: 56px; }
  .game-image { height: min(540px, 112vw); }
  .game-title-row { display: block; }
  .game-title-row .price-lockup { margin-top: 10px; }
  .mood-card { min-height: 230px; }
  .bundle-showcase { grid-template-columns: 1fr; }
  .bundle-photo { height: 360px; }
  .proof-strip { grid-template-columns: 1fr; }
  .proof-stat { border-right: 0; border-bottom: var(--line); }
  .proof-stat:last-child { border-bottom: 0; }
  .eschool-home, .demo-grid, .feature-row, .related-offer, .value-maths, .eschool-parent-grid { grid-template-columns: 1fr; }
  .feature-row:nth-child(even) .feature-photo { order: 0; }
  .gallery-main { height: min(620px, 112vw); }
  .gallery-thumbs { grid-template-columns: repeat(5, 84px); overflow-x: auto; padding-bottom: 4px; }
  .product-summary h1 { font-size: clamp(55px, 15vw, 84px); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2) { border-right: 0; }
  .step:nth-child(1), .step:nth-child(2) { border-bottom: var(--line); }
  .parent-band-inner { align-items: start; flex-direction: column; }
  .related-offer-image { min-height: 360px; }
  .bundle-hero-photo { min-height: 0; }
  .bundle-inside-grid { grid-template-columns: 1fr; }
  .eschool-feature-grid { grid-template-columns: 1fr; }
  .eschool-visual { min-height: 500px; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .order-card { position: static; }
  .cart-line { grid-template-columns: 92px 1fr auto; }
  .cart-line > strong { grid-column: 3; grid-row: 1; }
  .cart-line-qty { grid-column: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .mobile-buy-bar { position: fixed; z-index: 75; right: max(9px, env(safe-area-inset-right)); bottom: max(9px, env(safe-area-inset-bottom)); left: max(9px, env(safe-area-inset-left)); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 9px 9px 9px 14px; border: var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 8px 28px rgba(0, 0, 0, .25); }
  .mobile-buy-bar .mobile-price { display: flex; flex-direction: column; line-height: 1; }
  .mobile-buy-bar .mobile-price del { color: var(--muted); font-size: 11px; font-weight: 800; }
  .mobile-buy-bar .mobile-price strong { margin-top: 3px; font-size: 25px; }
  .mobile-buy-bar .button { min-width: 150px; min-height: 48px; padding: 11px 15px; font-size: 13px; }
  .offer-tab { bottom: 112px; padding: 9px 11px; }
  .offer-tab strong { font-size: 13px; }
  .site-footer { padding-bottom: 95px; }
}

@media (max-width: 520px) {
  .utility-hero h1 { font-size: 58px; overflow-wrap: anywhere; }
  .section-head h2 { font-size: 51px; }
  .home-hero h1 { font-size: 61px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; }
  .hero-shelf { min-height: 350px; margin-inline: -8px; }
  .hero-card { border-radius: 21px; box-shadow: 6px 6px 0 var(--ink); }
  .hero-card span { display: none; }
  .game-image { border-radius: 34% 34% 18px 18px; }
  .game-title-row h3 { font-size: 43px; }
  .game-cta-row { align-items: stretch; flex-direction: column; }
  .game-cta-row .button, .quick-cart { width: 100%; }
  .mood-grid { grid-template-columns: 1fr; }
  .mood-card { min-height: 205px; }
  .bundle-photo { height: 275px; }
  .bundle-bottom { align-items: stretch; flex-direction: column; }
  .bundle-bottom .button { width: 100%; }
  .eschool-board { grid-template-columns: 1fr; }
  .gallery-main { height: 430px; border-radius: 32% 32% 20px 20px; }
  .gallery-thumbs { grid-template-columns: repeat(5, 72px); }
  .product-hero { padding-top: 24px; }
  .product-summary h1 { font-size: 52px; line-height: .86; }
  .product-pitch { font-size: 18px; }
  .product-price strong { font-size: 40px; }
  .purchase-row { grid-template-columns: 108px minmax(0, 1fr); gap: 9px; }
  .purchase-row .button { min-width: 0; padding-inline: 9px; font-size: 12px; }
  .qty-control { grid-template-columns: 34px 36px 34px; }
  .demo-copy h2, .value-copy h2 { font-size: 50px; }
  .demo-stage { padding: 17px; }
  .idea-combo { grid-template-columns: 1fr; }
  .idea-card { min-height: 115px; }
  .feature-photo { height: 330px; }
  .feature-copy { padding: 0; }
  .steps-grid { grid-template-columns: 1fr; }
  .step { min-height: auto; border-right: 0; border-bottom: var(--line); }
  .step:last-child { border-bottom: 0; }
  .inside-card { grid-template-columns: 120px 1fr; }
  .inside-card h3 { font-size: 24px; }
  .bundle-summary h1 { font-size: 57px; }
  .bundle-summary > p { font-size: 19px; }
  .eschool-hero h1 { font-size: 62px; }
  .eschool-visual { min-height: 430px; padding: 14px; }
  .eschool-live-card { padding: 16px; }
  .eschool-live-card strong { font-size: 34px; }
  .parent-facts { grid-template-columns: 1fr; }
  .parent-fact { border-right: 0; border-bottom: var(--line) !important; }
  .parent-fact:last-child { border-bottom: 0 !important; }
  .cart-line { grid-template-columns: 82px 1fr; }
  .cart-line > strong { grid-column: 2; grid-row: auto; }
  .cart-line-qty { grid-column: 2; }
  .cart-upgrade { align-items: stretch; flex-direction: column; }
  .checkout-form fieldset { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
  .offer-modal { padding: 25px 18px; }
  .offer-modal h2 { font-size: 37px; }
  .offer-tab { display: none; }
  .mobile-buy-bar .button { min-width: 143px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* V05: calmer typography, broader ThinkStartup colour and light game motion */
:root {
  --yellow: #ffbf31;
  --cream: #f7f3ea;
  --paper: #fffdf8;
  --ink: #15151b;
  --muted: #625f68;
  --red: #f56a5c;
  --blue: #5577df;
  --green: #67b978;
  --lilac: #9b83df;
  --cyan: #57c9cf;
  --peach: #ffd6b8;
  --mint: #cdebd7;
  --sky: #dff3f4;
  --violet-soft: #e8e0f7;
  --navy: #20233d;
  --plum: #392a52;
  --display: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --body: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --shadow: 6px 6px 0 var(--ink);
}

body { font-weight: 450; line-height: 1.55; }
p, li { text-wrap: pretty; }
h1, h2, h3 { overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; }
.micro { font-size: 11px; font-weight: 750; letter-spacing: .13em; }
.display { font-weight: 800; letter-spacing: -.045em; }
.section { padding: 92px 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 390px); align-items: end; gap: 56px; margin-bottom: 44px; }
.section-head h2 { max-width: 790px; font-size: clamp(44px, 5.4vw, 78px); font-weight: 800; letter-spacing: -.045em; line-height: .98; }
.section-head p { max-width: 38ch; font-size: 17px; font-weight: 500; line-height: 1.58; }
.button { position: relative; font-weight: 750; box-shadow: 3px 3px 0 var(--ink); isolation: isolate; overflow: hidden; }
.button::after { position: absolute; z-index: -1; inset: 0; content: ""; background: rgba(255,255,255,.25); transform: translateX(-105%) skewX(-18deg); transition: transform .34s ease; }
.button:hover::after { transform: translateX(105%) skewX(-18deg); }
.button:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.text-button, .cart-trigger, .quick-cart { font-weight: 750; }

.site-header { background: color-mix(in srgb, var(--yellow) 92%, white); }
.main-nav strong { font-weight: 800; }
.main-nav small { color: #66521a; font-weight: 650; }
.main-nav a:nth-child(1):hover { background: var(--peach); }
.main-nav a:nth-child(2):hover { background: var(--violet-soft); }
.main-nav a:nth-child(3):hover { background: var(--sky); }

.home-hero { min-height: 680px; background: radial-gradient(circle at 78% 20%, var(--peach) 0 17%, transparent 42%), linear-gradient(120deg, var(--yellow), #ffd56a); }
.home-hero-grid { grid-template-columns: minmax(0, .95fr) minmax(500px, 1.05fr); gap: 54px; padding: 62px 0 68px; }
.home-hero-copy { min-width: 0; }
.home-hero h1 { max-width: 620px; margin: 12px 0 24px; font-size: clamp(64px, 6.4vw, 100px); font-weight: 800; letter-spacing: -.055em; line-height: .92; }
.home-hero h1 .hero-hit { color: var(--paper); -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink); }
.home-hero-copy > p { max-width: 49ch; font-size: clamp(18px, 1.55vw, 23px); font-weight: 500; line-height: 1.5; }
.hero-shelf { min-height: 520px; }
.hero-card { border-width: 1.5px; box-shadow: 7px 7px 0 var(--ink); transition: transform .24s ease, filter .24s ease; }
.hero-card:hover { filter: saturate(1.08); }
.hero-card img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hero-card:hover img { transform: scale(1.035); }
.hero-card span { font-weight: 750; }
.marquee span { font-weight: 800; }

.games-section { background: var(--paper); }
.game-grid { gap: 64px 34px; }
.game-tile { --tile-accent: var(--yellow); --tile-soft: #fff1bf; }
.game-tile:nth-child(2) { --tile-accent: var(--blue); --tile-soft: #e3e9ff; }
.game-tile:nth-child(3) { --tile-accent: var(--green); --tile-soft: #def1e3; }
.game-tile:nth-child(4) { --tile-accent: var(--red); --tile-soft: #ffe2dd; }
.game-image { height: 475px; border-radius: 30px; background: var(--tile-soft); }
.game-number { border-color: var(--tile-accent); background: var(--paper); font-weight: 800; }
.game-copy { margin-top: 12px; padding: 22px 22px 24px; border-radius: 24px; background: linear-gradient(135deg, var(--tile-soft), var(--paper) 72%); }
.game-title-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.game-title-row h3 { max-width: 100%; color: color-mix(in srgb, var(--tile-accent) 62%, var(--ink)); font-size: clamp(38px, 4.1vw, 58px); font-weight: 800; letter-spacing: -.045em; line-height: .98; }
.game-copy > p { max-width: 50ch; font-size: 17px; font-weight: 500; line-height: 1.55; }
.price-lockup strong { font-weight: 800; }
.spec-chip { border-color: color-mix(in srgb, var(--tile-accent) 55%, var(--ink)); background: rgba(255,255,255,.74); font-weight: 650; }
.quick-cart:hover { background: var(--tile-accent); }

.chooser-section { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--violet-soft), var(--sky) 54%, var(--peach)); }
.chooser-section::before, .chooser-section::after { position: absolute; width: 260px; height: 260px; border-radius: 50%; content: ""; filter: blur(2px); opacity: .5; pointer-events: none; }
.chooser-section::before { left: -100px; top: 24%; background: var(--cyan); }
.chooser-section::after { right: -100px; bottom: -90px; background: var(--peach); }
.chooser-layout { position: relative; display: grid; grid-template-columns: minmax(360px, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: center; }
.wheel-stage { position: relative; width: min(460px, 100%); aspect-ratio: 1; margin-inline: auto; }
.wheel-pointer { position: absolute; z-index: 4; top: -15px; left: 50%; width: 0; height: 0; border-right: 19px solid transparent; border-left: 19px solid transparent; border-top: 38px solid var(--ink); transform: translateX(-50%); filter: drop-shadow(0 3px 0 rgba(255,255,255,.7)); }
.game-wheel { width: 100%; height: 100%; position: relative; display: grid; place-items: center; border: 4px solid var(--ink); border-radius: 50%; background: conic-gradient(var(--yellow) 0 60%, var(--blue) 60% 70%, var(--green) 70% 75%, var(--red) 75% 100%); box-shadow: 10px 10px 0 rgba(21,21,27,.9); transition: transform 3.4s cubic-bezier(.12,.75,.16,1); will-change: transform; }
.game-wheel::after { width: 86px; height: 86px; border: 3px solid var(--ink); border-radius: 50%; content: "SPIN"; display: grid; place-items: center; background: var(--paper); font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.wheel-label { position: absolute; width: 108px; padding: 6px 8px; text-align: center; font-size: 12px; font-weight: 800; line-height: 1.08; text-transform: uppercase; }
.wheel-label-ideas { left: 8%; top: 45%; transform: rotate(-79deg); }
.wheel-label-party { right: 17%; top: 7%; transform: rotate(39deg); }
.wheel-label-rivalry { right: 3%; top: 28%; transform: rotate(72deg); }
.wheel-label-strategy { right: 10%; bottom: 18%; transform: rotate(-38deg); color: var(--ink); }
.chooser-copy { position: relative; z-index: 2; }
.chooser-copy h2 { max-width: 720px; margin: 9px 0 18px; font-size: clamp(48px, 6vw, 86px); font-weight: 800; letter-spacing: -.05em; line-height: .96; }
.chooser-copy > p { max-width: 47ch; margin: 0 0 24px; font-size: 18px; font-weight: 500; line-height: 1.58; }
.chooser-result { min-height: 128px; display: grid; align-content: center; gap: 5px; margin-top: 22px; padding: 20px; border: 2px solid var(--ink); border-radius: 20px; background: rgba(255,253,248,.8); }
.chooser-result[hidden] { display: none; }
.chooser-result strong { font-size: 29px; font-weight: 800; letter-spacing: -.03em; }
.chooser-result span { max-width: 44ch; font-size: 15px; line-height: 1.45; }
.chooser-result a { width: max-content; margin-top: 8px; }

.bundles-section { color: #fff; background: linear-gradient(145deg, var(--navy), var(--plum)); }
.bundle-showcase { gap: 24px; }
.bundle-tile { border: 1px solid rgba(255,255,255,.3); background: var(--paper); transition: transform .25s ease, box-shadow .25s ease; }
.bundle-tile:hover { transform: translateY(-5px); box-shadow: 0 18px 45px rgba(0,0,0,.22); }
.bundle-copy h3 { font-size: clamp(35px, 4vw, 56px); font-weight: 800; letter-spacing: -.045em; line-height: .98; }
.bundle-copy p { font-weight: 500; line-height: 1.55; }
.swipe-hint { display: none; margin: -20px 0 18px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bundles-section .swipe-hint { color: rgba(255,255,255,.72); }

.eschool-home-section { background: linear-gradient(135deg, #22243d, #253b5d); }
.eschool-home h2 { font-size: clamp(56px, 6.6vw, 92px); font-weight: 800; letter-spacing: -.05em; line-height: .95; }
.eschool-home p { font-weight: 500; line-height: 1.58; }
.eschool-board { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.eschool-chip:nth-child(1) { background: var(--sky); }
.eschool-chip:nth-child(2) { background: var(--violet-soft); }
.eschool-chip:nth-child(3) { background: var(--mint); }
.eschool-chip:nth-child(4) { background: var(--peach); }
.eschool-chip span { font-weight: 650; }
.proof-section { background: linear-gradient(120deg, var(--mint), var(--paper) 55%, var(--peach)); }
.proof-stat strong { font-weight: 800; }
.proof-stat span { font-weight: 600; }

.product-page { --page-soft: #fff1be; --page-deep: #4c3704; }
.product-page.theme-ee { --page-accent: var(--blue); --page-soft: #e4eaff; --page-deep: #26366d; }
.product-page.theme-sfs { --page-accent: var(--green); --page-soft: #dff1e4; --page-deep: #214c2e; }
.product-page.theme-sh { --page-accent: var(--red); --page-soft: #ffe2dc; --page-deep: #633029; }
.product-hero { background: linear-gradient(140deg, var(--page-accent), var(--page-soft)); }
.product-summary h1 { max-width: 720px; font-size: clamp(56px, 5.8vw, 88px); font-weight: 800; letter-spacing: -.05em; line-height: .96; }
.product-pitch { max-width: 48ch; font-size: clamp(19px, 1.55vw, 23px); font-weight: 500; line-height: 1.52; }
.product-price strong { font-weight: 800; }
.product-page .demo-section { background: var(--page-soft); }
.demo-copy h2 { font-size: clamp(48px, 5.3vw, 76px); font-weight: 800; letter-spacing: -.045em; line-height: .98; }
.demo-copy p, .feature-copy p { font-weight: 500; line-height: 1.58; }
.feature-flow { background: var(--paper); }
.feature-row { padding: 20px; border-radius: 30px; background: color-mix(in srgb, var(--page-accent) 10%, var(--paper)); }
.feature-copy h2 { font-size: clamp(40px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.product-page .section-yellow { background: var(--page-soft); }
.step { background: rgba(255,255,255,.58); }
.step b, .step h3 { font-weight: 800; }
.step p { font-weight: 500; line-height: 1.5; }
.product-page .parent-band { background: var(--page-deep); }
.product-page .parent-band .button { color: var(--ink); background: var(--page-accent); }
.parent-share { border: 1.5px solid currentColor; border-radius: 12px; font-weight: 700; transition: transform .18s ease, background .18s ease; }
.parent-share:hover { transform: translateY(-2px); background: rgba(255,255,255,.34); }
.parent-band { background: var(--plum); }
.parent-band h2 { max-width: 780px; font-size: clamp(32px, 3.6vw, 50px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }

.bundle-page { --bundle-soft: #fff1be; --bundle-deep: #4c3704; }
.bundle-page.theme-ideator { --bundle-accent: var(--blue); --bundle-soft: #e4eaff; --bundle-deep: #26366d; }
.bundle-page.theme-founder { --bundle-accent: var(--green); --bundle-soft: #dff1e4; --bundle-deep: #214c2e; }
.bundle-page.theme-full { --bundle-accent: var(--red); --bundle-soft: #ffe2dc; --bundle-deep: #633029; }
.bundle-hero { background: linear-gradient(140deg, var(--bundle-accent), var(--bundle-soft)); }
.bundle-summary h1 { max-width: 740px; font-size: clamp(58px, 6.2vw, 94px); font-weight: 800; letter-spacing: -.05em; line-height: .96; }
.bundle-summary > p { max-width: 48ch; font-size: 21px; font-weight: 500; line-height: 1.52; }
.bundle-page .section-dark { background: var(--bundle-deep); }
.bundle-page .section-yellow { background: var(--bundle-soft); }
.bundle-page .parent-band { background: var(--bundle-deep); }
.bundle-page .parent-band .button { color: var(--ink); background: var(--bundle-accent); }
.inside-card p, .value-copy p { font-weight: 500; line-height: 1.55; }

.eschool-page { color: #fff; background: #22243d; }
.eschool-hero { background: radial-gradient(circle at 75% 20%, rgba(87,201,207,.27), transparent 35%), linear-gradient(145deg, #20233d, #352755); }
.eschool-hero h1 { max-width: 760px; font-size: clamp(64px, 7vw, 105px); font-weight: 800; letter-spacing: -.05em; line-height: .95; }
.eschool-hero h1 span { color: var(--cyan); }
.eschool-hero p { font-weight: 500; line-height: 1.58; }
.eschool-live-card:nth-child(1) { background: var(--sky); }
.eschool-live-card:nth-child(2) { background: var(--violet-soft); }
.eschool-live-card:nth-child(3) { background: var(--mint); }
.eschool-live-card:nth-child(4) { background: var(--peach); }
.eschool-feature b { color: var(--cyan); }
.eschool-parent { background: linear-gradient(130deg, var(--mint), var(--sky)); }
.eschool-parent h2 { font-size: clamp(50px, 5.7vw, 78px); font-weight: 800; letter-spacing: -.045em; line-height: .98; }
.eschool-parent p { font-weight: 500; line-height: 1.58; }
.parent-fact span { font-weight: 600; }
.mood-card b, .mood-card h3, .mood-card span { font-weight: 800; }
.decision-options button, .ee-card-demo > div, .eschool-live-card span { font-weight: 650; }

:is(.utility-hero h1, .empty-page h1, .drawer-head h2, .offer-modal h2, .value-copy h2, .related-offer-copy h2, .inside-card h3, .cart-line-copy a, .eschool-feature h3, .checkout-success h2) { font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.utility-hero h1 { font-size: clamp(64px, 8vw, 112px); }
:is(.inside-card p, .related-offer-copy p, .eschool-feature p, .cart-upgrade p, .drawer-empty p, .prototype-note, .buy-reassurance) { font-weight: 500; line-height: 1.55; }

.reveal-item { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.75,.2,1); transition-delay: var(--reveal-delay, 0ms); }
.reveal-item.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .section-head { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .section-head p { max-width: 56ch; }
  .home-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .chooser-layout { gap: 42px; }
}

@media (max-width: 820px) {
  .section { padding: 68px 0; }
  .section-head { display: grid; gap: 16px; }
  .section-head h2 { font-size: clamp(42px, 12vw, 62px); line-height: 1; }
  .section-head p { font-size: 16px; }
  .home-hero h1 { font-size: clamp(58px, 16.5vw, 86px); line-height: .94; }
  .home-hero-copy > p { font-size: 18px; line-height: 1.55; }
  .chooser-layout { grid-template-columns: 1fr; gap: 38px; }
  .wheel-stage { width: min(390px, calc(100vw - 42px)); }
  .chooser-copy { text-align: center; }
  .chooser-copy h2, .chooser-copy > p { margin-inline: auto; }
  .chooser-copy .button { width: 100%; }
  .chooser-result { text-align: left; }
  .chooser-result a { width: 100%; }
  .swipe-hint { display: block; }
  .bundle-showcase { width: calc(100vw - 13px); display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(295px, 82vw); gap: 14px; margin-right: calc(50% - 50vw); padding: 2px 22px 24px 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .bundle-showcase::-webkit-scrollbar, .steps-grid::-webkit-scrollbar, .bundle-inside-grid::-webkit-scrollbar, .bundle-page .mood-grid::-webkit-scrollbar { display: none; }
  .bundle-tile:nth-child(n) { grid-column: auto; scroll-snap-align: start; }
  .bundle-photo { height: 290px; }
  .steps-grid { width: calc(100vw - 13px); display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(270px, 82vw); gap: 14px; margin-right: calc(50% - 50vw); padding: 2px 22px 22px 0; overflow-x: auto; border: 0; border-radius: 0; background: transparent; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .step, .step:nth-child(n) { min-height: 245px; border: var(--line); border-radius: 22px; scroll-snap-align: start; }
  .bundle-inside-grid { width: calc(100vw - 13px); display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(300px, 86vw); gap: 14px; margin-right: calc(50% - 50vw); padding: 2px 22px 22px 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .inside-card { scroll-snap-align: start; }
  .bundle-page .mood-grid { width: calc(100vw - 13px); display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(270px, 78vw); gap: 14px; margin-right: calc(50% - 50vw); padding: 2px 22px 22px 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .bundle-page .mood-card { scroll-snap-align: start; }
  .product-summary h1, .bundle-summary h1 { line-height: .98; }
  .feature-row { padding: 14px; }
}

@media (max-width: 520px) {
  .section-head h2 { font-size: 44px; }
  .home-hero h1 { font-size: 58px; }
  .home-hero h1 .hero-hit { -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
  .game-copy { padding: 20px 17px; }
  .game-title-row h3 { font-size: 39px; }
  .game-copy > p { font-size: 16px; }
  .wheel-label { width: 88px; font-size: 10px; }
  .game-wheel::after { width: 72px; height: 72px; font-size: 12px; }
  .chooser-copy h2 { font-size: 48px; }
  .bundle-copy h3 { font-size: 38px; }
  .product-summary h1 { font-size: 49px; }
  .bundle-summary h1 { font-size: 52px; }
  .feature-copy h2, .demo-copy h2 { font-size: 45px; }
  .parent-band h2 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-item { opacity: 1; transform: none; }
  .game-wheel { transition: none; }
}

/* ============================================================
   ROUND 2 — PRODUCTION PHOTOGRAPHY
   Every photographic frame now matches the aspect ratio of the
   master it holds, so nothing overlaps and nothing is cropped
   through the product. Appended last so it wins the cascade.
   ============================================================ */

/* Homepage hero: four 4:5 hero cards on a clean grid, no stacking. */
.hero-shelf {
  position: relative;
  min-height: 0;
  max-width: 600px;
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.hero-card {
  position: static;
  width: auto;
  height: auto;
  aspect-ratio: 4 / 5;
  transform: none;
  border-radius: 26px;
}
.hero-card-one, .hero-card-three { transform: rotate(-1.4deg); }
.hero-card-two, .hero-card-four { transform: rotate(1.4deg); }
.hero-card:hover { z-index: 2; transform: rotate(0deg) translateY(-6px); }
.hero-card span { right: 12px; bottom: 12px; }

/* Homepage game tiles: square frames for square packshots.
   `.game-image` is an anchor and was still `display: inline`, so its
   height, radius and overflow were being dropped by the browser. */
.game-image {
  display: block;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 26px;
}

/* Product gallery: a calm rounded frame instead of a dome that
   would slice the top off a box shot. */
.gallery-main {
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  border: var(--line);
}
.gallery-main img { object-fit: cover; }
/* Take any number of thumbnails, not exactly five. */
.gallery-thumbs {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.gallery-thumb { border-radius: 12px; }

/* Bundle "what's inside" cards sit on a paper background inside a dark
   section, so they were inheriting white text and rendering invisible. */
.inside-card { color: var(--ink); }

@media (max-width: 1100px) {
  .hero-shelf { min-height: 0; }
}

@media (max-width: 820px) {
  .hero-shelf { gap: 14px; }
  .game-image { height: auto; }
  .gallery-main { height: auto; }
  .gallery-thumbs {
    grid-auto-columns: 84px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .gallery-thumbs::-webkit-scrollbar { display: none; }
  .gallery-thumb { scroll-snap-align: start; }
}

@media (max-width: 520px) {
  .hero-shelf { min-height: 0; margin-inline: 0; gap: 12px; }
  .hero-card { border-radius: 18px; }
  .game-image { border-radius: 20px; }
  .gallery-main { height: auto; border-radius: 20px; }
  .gallery-thumbs { grid-auto-columns: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card, .hero-card:hover { transform: none; }
}

/* ============================================================
   ROUND 3 — MOBILE REVIEW (Redline, 390 x 844)
   Numbered comments refer to the review export.
   ============================================================ */

/* ---- Weight. Six separate notes said the same thing: 900 on small
   uppercase type is a smudge on a phone. (#3 #4 #10 #19 #21 #18) ---- */
.micro {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  opacity: .78;
}
.button { font-weight: 700; }
.footer-grid a { font-weight: 500; }
.footer-grid h2 { font-weight: 700; }
.spec-chip { font-weight: 600; }
.hero-card span, .game-number { font-weight: 700; }
.section-head p { font-weight: 500; }
.eschool-chip span { font-weight: 600; }
.eschool-chip b { font-size: 54px; }          /* #20 numbers too small for the tile */

/* ---- Header goes white, and the hamburger drops its explainer text.
   (#1 #2) ---- */
.site-header { background: rgba(255, 253, 248, .97); }
.main-nav a:hover { background: var(--cream); }
@media (max-width: 820px) {
  .main-nav { background: var(--paper); }
  .main-nav a { background: var(--cream); }
}

/* ---- Hero. One photo, not four tappable cards, and a stronger field
   behind it. (#7 #8 #12) ---- */
.home-hero {
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 255, 255, .5) 0 12%, transparent 46%),
    linear-gradient(155deg, #ffc300 0%, #ffb703 58%, #ffa600 100%);
}
.hero-shot {
  overflow: hidden;
  border: var(--line);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: 9px 9px 0 var(--ink);
}
.hero-shot img { width: 100%; height: auto; }

/* ---- Section head now carries the random-game button. ---- */
.section-head-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.section-head-side p { max-width: 430px; margin: 0; font-size: 19px; font-weight: 500; line-height: 1.45; }

/* ---- Per-game dropdown. (#11 #14) ---- */
.game-more { margin-top: 14px; border-top: 2px solid rgba(16, 16, 16, .12); }
.game-more summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 2px 0;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.game-more summary::-webkit-details-marker { display: none; }
.game-more summary::after {
  font-size: 12px;
  content: "▼";
  transition: transform .2s ease;
}
.game-more[open] summary::after { transform: rotate(180deg); }
.game-more-body { padding: 10px 2px 2px; }
.game-more-body p { margin: 0 0 8px; font-size: 15px; font-weight: 500; line-height: 1.5; }
.game-more-body p:last-child { margin-bottom: 0; }
.game-more-body b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .62; }

/* ---- Chooser is a modal now, and the wheel shows even quarters so it
   never advertises the weighting. (#13 #16 #17) ---- */
.chooser-modal {
  position: fixed;
  z-index: 120;
  top: 50%;
  left: 50%;
  width: min(430px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  display: grid;
  justify-items: center;
  gap: 18px;
  overflow-y: auto;
  padding: 30px 24px 26px;
  border: var(--line);
  border-radius: 28px;
  opacity: 0;
  transform: translate(-50%, -46%) scale(.96);
  background: var(--paper);
  box-shadow: 12px 12px 0 var(--ink);
  transition: opacity .2s ease, transform .2s ease;
}
.chooser-modal.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.chooser-modal h2 { margin: 0; padding: 0 46px; font-family: var(--display); font-size: 32px; font-weight: 800; letter-spacing: -.045em; line-height: 1.05; text-align: center; }
.chooser-modal .wheel-stage { width: min(280px, 68vw); }
.chooser-modal .button { width: 100%; }
.chooser-modal .game-wheel {
  background: conic-gradient(
    var(--yellow) 0 25%, var(--blue) 25% 50%,
    var(--green) 50% 75%, var(--red) 75% 100%);
  box-shadow: 6px 6px 0 rgba(21, 21, 27, .9);
}
.chooser-modal .wheel-label {
  position: absolute;
  inset: 0;
  width: auto;
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: 9%;
  transform: none;
}
.chooser-modal .wheel-label b {
  max-width: 92px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}
.chooser-modal .wheel-label-1 { transform: rotate(45deg); }
.chooser-modal .wheel-label-2 { transform: rotate(135deg); }
.chooser-modal .wheel-label-3 { transform: rotate(225deg); }
.chooser-modal .wheel-label-4 { transform: rotate(315deg); }
.chooser-modal .chooser-result { width: 100%; min-height: 0; margin: 0; padding: 16px; text-align: left; }
.chooser-modal .chooser-result strong { font-size: 22px; }
.chooser-modal .chooser-result a { width: 100%; }

@media (max-width: 1100px) {
  .section-head-side { align-items: stretch; }
}

@media (max-width: 820px) {
  .section-head-side p { font-size: 16px; }
  .section-head-side .button { width: 100%; }
  .eschool-chip b { font-size: 46px; }
  .chooser-modal { padding: 26px 18px 22px; }
  .chooser-modal h2 { font-size: 29px; }
}

/* The new headline has a longer final word than the old one, so the phone
   size has to come from the viewport or "ARGUMENTS." runs off the edge. */
.home-hero h1 { font-size: clamp(38px, 12.6vw, 86px); }
@media (max-width: 520px) {
  .home-hero h1 { font-size: 12.6vw; }
}

/* .chooser-modal sets display:grid, which would beat the browser's
   [hidden] { display: none } and leave the dialog in the layout. */
.chooser-modal[hidden] { display: none; }

/* ============================================================
   ROUND 4 — DESKTOP REVIEW (Redline, 1440 x 797)
   ============================================================ */

/* ---- #25 The logo PNGs ship with baked backgrounds: black behind the dark
   mark, white behind the light one. Blending them away beats re-cutting the
   art, and works on any surface. ---- */
.logo-crop-dark img { mix-blend-mode: screen; }
.logo-crop-light img { mix-blend-mode: multiply; }

/* ---- #1 Hero photo merges into the field: no card, no border, no shadow
   box. The image itself is now a cutout, so the drop shadow follows the
   product silhouette instead of a rectangle. ---- */
.home-hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
.hero-shot {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.hero-shot img {
  width: 100%;
  height: auto;
  filter: drop-shadow(14px 16px 0 rgba(16, 16, 16, .16));
}
/* The new headline is three long lines, so it sizes off the column. */
.home-hero h1 { font-size: clamp(30px, 3.5vw, 52px); }
.home-hero h1 span { display: block; }
.home-hero-copy > p { font-size: clamp(19px, 1.7vw, 25px); font-weight: 600; }

/* ---- #12 The "+ INCLUDED eSchool" badge is already printed into these
   photos; the tile crop was simply cutting it off. Anchor the crop to the
   top so it always survives. ---- */
.bundle-photo { position: relative; display: block; }
.bundle-photo img { object-position: top; }

/* ---- #18 #19 The proof strip columns were content-sized, so "1,00,000+"
   at 96px shoved the row out of balance. Equal columns, type that fits. ---- */
.proof-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proof-stat { display: grid; align-content: start; gap: 6px; padding: 30px 26px; }
.proof-stat strong { font-size: clamp(34px, 3.9vw, 58px); line-height: .95; }
.proof-stat span { max-width: 30ch; font-size: 14px; }

/* ---- #28 The section-head side column sat on the baseline, dropping the
   sub-copy far below its heading on laptop widths. ---- */
.section-head { align-items: start; }
.section-head > div:first-child { align-self: end; }
.section-head p, .section-head-side { padding-top: 6px; }

@media (max-width: 1100px) {
  .home-hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .section-head p, .section-head-side { padding-top: 0; }
  .proof-stat { padding: 24px 20px; }
  .hero-shot img { filter: drop-shadow(8px 10px 0 rgba(16, 16, 16, .16)); }
}

/* ============================================================
   ROUND 4b — PRODUCT PAGE (Redline, Idea Factory, 1440 x 797)
   ============================================================ */

/* ---- #0y9pk Breadcrumbs are navigation, not a headline. ---- */
.breadcrumb { font-size: 13px; font-weight: 500; }
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--ink); }

/* ---- #10pyd The +/- buttons already control quantity, so the native
   number spinners are a second, uglier control for the same thing. ---- */
.qty-control input {
  appearance: textfield;
  -moz-appearance: textfield;
  font-weight: 700;
}
.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.qty-control button { font-weight: 700; }

/* ---- #1070 The challenge button read as a footnote. Make it a real,
   loud invitation that opens the target picker. ---- */
.parent-share {
  width: 100%;
  min-height: 54px;
  margin-top: 12px;
  padding: 13px 18px;
  border: var(--line);
  border-radius: 12px;
  background: var(--page-soft, var(--cream));
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 15px;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.parent-share::after { content: "→"; }
.parent-share:hover {
  transform: translate(3px, 3px);
  background: var(--page-accent, var(--yellow));
  box-shadow: 1px 1px 0 var(--ink);
}

.buy-reassurance { font-size: 13px; font-weight: 500; line-height: 1.5; opacity: .78; }

/* ---- #11o83 The demo now shows card-shaped cards with the real WHO /
   WHAT / HOW deck labels. Real printed card art still has to be shot. ---- */
.demo-brief { margin: 0 0 16px; font-size: 16px; font-weight: 500; line-height: 1.5; }
.demo-brief b { font-weight: 800; }
.idea-card {
  min-height: 0;
  aspect-ratio: 5 / 7;
  display: grid;
  align-content: space-between;
  padding: 14px;
  border-radius: 14px;
  box-shadow: 4px 4px 0 rgba(16, 16, 16, .28);
}
.idea-card span {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  opacity: .72;
}
.idea-card b {
  font-family: var(--display);
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .98;
}
.idea-card-who { background: var(--green); }
.idea-card-what { background: var(--red); }
.idea-card-how { background: var(--blue); }

/* ---- Challenge target picker ---- */
.challenge-modal {
  position: fixed;
  z-index: 120;
  top: 50%;
  left: 50%;
  width: min(430px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  padding: 30px 26px 26px;
  border: var(--line);
  border-radius: 28px;
  opacity: 0;
  transform: translate(-50%, -46%) scale(.96);
  background: var(--paper);
  box-shadow: 12px 12px 0 var(--ink);
  transition: opacity .2s ease, transform .2s ease;
}
.challenge-modal[hidden] { display: none; }
.challenge-modal.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.challenge-modal h2 {
  margin: 8px 0 20px;
  padding-right: 40px;
  font-family: var(--display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.02;
}
.challenge-options { display: grid; gap: 12px; }
.challenge-options button {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: var(--line);
  border-radius: 16px;
  background: var(--cream);
  box-shadow: 4px 4px 0 var(--ink);
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.challenge-options button:hover {
  transform: translate(3px, 3px);
  background: var(--yellow);
  box-shadow: 1px 1px 0 var(--ink);
}
.challenge-options b { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.challenge-options span { font-size: 14px; font-weight: 500; line-height: 1.4; }

@media (max-width: 820px) {
  .challenge-modal { padding: 26px 18px 22px; }
  .challenge-modal h2 { font-size: 28px; }
  .idea-card { aspect-ratio: auto; min-height: 108px; }
}

/* ============================================================
   ROUND 5 — TRUST STRIP + FAQ
   Both from 07-website-copy-v05.md. The strip sits straight after
   the game grid, where prices have just been seen; the FAQ answers
   product doubts near the end, once the shopping is done.
   ============================================================ */

.faq-section { background: var(--paper); }
.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.faq-item {
  padding: 26px 24px;
  border: var(--line);
  border-radius: 22px;
  background: var(--cream);
  box-shadow: var(--shadow);
}
.faq-item h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: balance;
}
.faq-item p { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.55; }

@media (max-width: 1100px) {
  .faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .faq-item { padding: 22px 18px; }
  .faq-item h3 { font-size: 19px; }
}

/* ============================================================
   ROUND 6 — HERO REBUILD
   The old hero was a text block and a picture block sitting in two
   grid cells. The products now bleed off the right and bottom edges
   and tuck under the headline, so it reads as one composition.
   ============================================================ */

.home-hero {
  position: relative;
  overflow: hidden;
  min-height: 0;
  /* The original rule made this a flex row. That was harmless while the
     photo was absolutely positioned, but the moment it rejoins the flow
     on mobile the copy and the photo become side-by-side flex items. */
  display: block;
}
.home-hero-inner { position: relative; z-index: 2; padding: 74px 0 78px; }
.home-hero-copy { max-width: 780px; }

.home-hero h1 {
  max-width: none;
  margin: 14px 0 22px;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: .96;
}
.home-hero h1 span { display: block; }
/* The highlighted line is the longest one, so it is also the line most
   likely to run over a box. The stroke keeps it readable either way. */
.home-hero h1 .hero-hit { position: relative; z-index: 2; }
.home-hero-copy > p { max-width: 34ch; font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; }

.hero-shot {
  position: absolute;
  z-index: 1;
  right: -5%;
  bottom: -7%;
  width: min(830px, 56%);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
.hero-shot img {
  width: 100%;
  height: auto;
  filter: drop-shadow(16px 18px 0 rgba(16, 16, 16, .14));
}

@media (max-width: 1100px) {
  .home-hero-inner { padding: 60px 0 62px; }
  .home-hero-copy { max-width: 100%; }
  .hero-shot { right: -8%; bottom: -6%; width: 62%; opacity: .96; }
}

/* Below this the copy and the products stop competing for the same
   space: products drop underneath, still bleeding off both edges. */
@media (max-width: 820px) {
  .home-hero-inner { padding: 48px 0 0; }
  .hero-shot {
    position: relative;
    right: auto;
    bottom: auto;
    width: 118%;
    margin: 18px -9% -6%;
    opacity: 1;
  }
  .hero-shot img { filter: drop-shadow(9px 11px 0 rgba(16, 16, 16, .14)); }
  .home-hero h1 { font-size: clamp(32px, 10.5vw, 58px); }
  .home-hero-copy > p { max-width: 40ch; }
}

/* ---- FAQ as dropdowns ---- */
.faq-list { display: grid; gap: 12px; max-width: 860px; }
.faq-item {
  overflow: hidden;
  border: var(--line);
  border-radius: 18px;
  background: var(--cream);
  box-shadow: 5px 5px 0 var(--ink);
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  flex: none;
  font-size: 13px;
  content: "▼";
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-answer { padding: 0 22px 20px; }
.faq-answer p { max-width: 62ch; margin: 0; font-size: 16px; font-weight: 500; line-height: 1.55; }

@media (max-width: 640px) {
  .faq-item summary { padding: 15px 17px; font-size: 16px; }
  .faq-answer { padding: 0 17px 17px; }
}

/* ---- "Quick look" was a bare bar with a browser focus ring hanging off it.
   Give it the same card treatment as everything else on the tile. ---- */
.game-more {
  margin-top: 16px;
  overflow: hidden;
  border: 1.5px solid rgba(16, 16, 16, .16);
  border-top: 1.5px solid rgba(16, 16, 16, .16);
  border-radius: 14px;
  background: var(--paper);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.game-more[open] { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.game-more summary {
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.game-more summary::after {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--tile-accent);
  font-size: 9px;
  content: "▼";
}
.game-more-body {
  padding: 2px 14px 15px;
  border-top: 1.5px dashed rgba(16, 16, 16, .16);
}
.game-more-body p { margin: 12px 0 0; font-size: 14px; line-height: 1.5; }
.game-more-body b {
  margin-bottom: 3px;
  color: color-mix(in srgb, var(--tile-accent) 55%, var(--ink));
  font-size: 11px;
  letter-spacing: .1em;
  opacity: 1;
}

/* Keep the focus ring accessible but stop it hanging outside the card. */
.game-more summary:focus-visible,
.faq-item summary:focus-visible {
  outline-width: 3px;
  outline-offset: -3px;
  border-radius: 13px;
}

/* ---- The Round 4 proof-strip rule set 3 columns at every width, which
   overrode the original mobile stack and squeezed "1,00,000+" into a
   column narrower than the number itself. ---- */
@media (max-width: 900px) {
  .proof-strip { grid-template-columns: 1fr; }
  .proof-stat { border-right: 0; border-bottom: var(--line); }
  .proof-stat:last-child { border-bottom: 0; }
  .proof-stat strong { font-size: clamp(38px, 11vw, 54px); }
  .proof-stat span { max-width: 46ch; }
}

/* ---- FAQ questions were set at display weight, which reads as shouting
   for a question. Drop them to a readable interface weight. ---- */
.faq-item summary { font-size: 17px; font-weight: 650; letter-spacing: 0; }
.faq-item summary::after { opacity: .55; }

/* ---- The arch on the product gallery is back, but gentle: enough curve
   to feel like the old v4 frame, not enough to clip the top of a box. ---- */
.gallery-main { border-radius: 120px 120px 26px 26px; }

/* ---- Hero: single heading, small sub, no eyebrow. ---- */
.home-hero h1 { margin: 0 0 18px; font-size: clamp(38px, 5vw, 74px); }
.home-hero-copy > p {
  max-width: 40ch;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 600;
  opacity: .82;
}

@media (max-width: 820px) {
  .gallery-main { border-radius: 84px 84px 22px 22px; }
  .home-hero h1 { font-size: clamp(34px, 11vw, 58px); }
  .faq-item summary { font-size: 16px; }
}

/* ============================================================
   ROUND 7 — DESKTOP HERO FIX + BUNDLE PAGE
   ============================================================ */

/* ---- The hero copy and the boxes were sized so they collided, and the
   boxes ran off the right edge so a game got cut. Neither now. ---- */
.home-hero-copy { max-width: 640px; }
.home-hero h1 { font-size: clamp(34px, 4.3vw, 62px); }
.hero-shot {
  right: 2%;
  bottom: -3%;
  width: min(700px, 47%);
}

/* ---- The offer tab sat half outside the viewport and covered content. ---- */
.offer-tab {
  right: 0;
  bottom: 15%;
  padding: 9px 13px;
  border-radius: 12px 0 0 12px;
  box-shadow: -3px 3px 0 var(--ink);
}
.offer-tab strong { font-size: 14px; }

/* ---- Nav links: text was left aligned inside a much wider hover box. ---- */
.main-nav a { min-width: 0; align-items: center; text-align: center; padding: 9px 18px; }

/* ---- Quick look chevron: no fill, it was reading as a button. ---- */
.game-more summary::after { border: 0; background: none; font-size: 11px; opacity: .5; }

/* ---- Bundle page ---- */
/* The save line now sits under the price. */
.bundle-summary .save-line { display: inline-block; margin: 10px 0 0; }
/* Breathing room before and after the challenge button. */
.bundle-summary .parent-share, .product-summary .parent-share { margin: 18px 0 14px; }
/* "Bought separately" is the number you are NOT paying, so it reads struck
   through and muted, below the total rather than above it. */
.math-line.struck { color: var(--red); }
.math-line.struck strong { text-decoration: line-through; }
/* Bundle hero photo: fill the frame instead of floating in white bars. */
.bundle-hero-photo img { object-fit: cover; object-position: center top; }

@media (max-width: 820px) {
  /* Inside-the-bundle cards were cropping the product and the eSchool tile
     off the edge of the swipe shelf. */
  .bundle-inside-grid { grid-auto-columns: minmax(280px, 90vw); }
  .inside-card { grid-template-columns: 104px 1fr; }
  .inside-card img { object-fit: contain; padding: 12px; background: var(--cream); }
  .inside-card div { padding: 16px 16px 16px 12px; }
  .inside-card h3 { font-size: 21px; }
  .eschool-mini-art { min-height: 0; padding: 14px; }
}

/* ---- No drop shadow on the hero photo. ---- */
.hero-shot img { filter: none; }
@media (max-width: 820px) { .hero-shot img { filter: none; } }

/* ---- The hero was shorter than the photo, so the boxes were being clipped
   top and bottom by the section's overflow. Give it room. ---- */
@media (min-width: 821px) {
  .home-hero { min-height: 530px; }
  .hero-shot { bottom: 0; }
}

/* ---- Round 7's unscoped .hero-shot width won at every breakpoint, shrinking
   the photo to 47% of a phone. Mobile rules have to come after it. ---- */
@media (max-width: 820px) {
  .hero-shot {
    position: relative;
    right: auto;
    bottom: auto;
    width: 116%;
    margin: 16px -8% -4%;
  }
  .home-hero { min-height: 0; }
}

/* ---- Bundle hero photo: the bundle shots are a mix of 1:1 and 3:2, so
   cropping to fill cuts the product. Contain it inside a deliberate cream
   frame instead of leaving it floating in white bars. ---- */
.bundle-hero-photo {
  padding: 26px;
  border: var(--line);
  background: var(--cream);
}
.bundle-hero-photo img { object-fit: contain; object-position: center; }

@media (max-width: 820px) {
  .bundle-hero-photo { padding: 16px; border-radius: 28px; }
}

/* ---- Bundle art is cut out now, so it sits on the page rather than inside a
   frame that repeated the studio background. ---- */
.bundle-hero-photo {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  aspect-ratio: auto;
}
.bundle-hero-photo img { width: 100%; height: auto; object-fit: contain; }
.bundle-photo {
  height: auto;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 16px 16px 0;
  background: none;
}
.bundle-photo img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.bundle-tile:hover .bundle-photo img { transform: scale(1.03); }

/* ---- Hero photo must not be cropped on a phone. ---- */
@media (max-width: 820px) {
  .hero-shot { width: 100%; margin: 14px 0 0; }
  .bundle-hero-photo { padding: 0; border: 0; }
  .bundle-photo { aspect-ratio: 3 / 2; padding: 12px 12px 0; }
}

/* ============================================================
   ROUND 8 — COLOUR
   The product heroes ran a saturated accent straight into a pale tint,
   which came out as a harsh wash (coral on Startup High especially).
   Every hero now sits on a soft tint of its own colour with the accent
   used as a keyline, not as a full-bleed field.
   ============================================================ */

.product-page { --page-soft: #fff6d6; --page-deep: #4c3704; }
.product-page.theme-idea { --page-accent: var(--yellow); --page-soft: #fff6d6; }
.product-page.theme-ee   { --page-accent: var(--blue);  --page-soft: #eef2ff; --page-deep: #26366d; }
.product-page.theme-sfs  { --page-accent: var(--green); --page-soft: #ecf8ef; --page-deep: #214c2e; }
.product-page.theme-sh   { --page-accent: var(--red);   --page-soft: #fdeeeb; --page-deep: #633029; }

.product-hero {
  background:
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--page-accent) 22%, transparent) 0 22%, transparent 58%),
    var(--page-soft);
  border-bottom: 3px solid var(--page-accent);
}

/* ---- Bundles all share one colour. They are the same kind of offer, so
   giving each one its own world made the shelf look like 4 businesses. ---- */
.bundle-page,
.bundle-page.theme-ideator,
.bundle-page.theme-founder,
.bundle-page.theme-full,
.bundle-page.theme-starter {
  --bundle-accent: var(--yellow);
  --bundle-soft: #fff6d6;
  --bundle-deep: #4c3704;
}
.bundle-hero {
  background:
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--bundle-accent) 30%, transparent) 0 22%, transparent 58%),
    var(--bundle-soft);
  border-bottom: 3px solid var(--bundle-accent);
}

/* ============================================================
   ROUND 9 — UI CHECK FIXES
   ============================================================ */

/* ---- The header was 97% opaque over a blur, so on dark pages the strip
   picked up the page behind it while the logo's opaque white did not. That
   mismatch is the white box around the mark. Make the strip fully opaque. ---- */
.site-header { background: var(--paper); }

/* ---- The eSchool page sets white text on the body, which the sticky buy
   bar inherited onto its own paper background: the price was invisible. ---- */
.mobile-buy-bar { color: var(--ink); }
.mobile-buy-bar .mobile-price strong { color: var(--ink); }

/* ---- The challenge button has a light background, so on the dark eSchool
   page it inherited white text onto cream and vanished. ---- */
.parent-share { color: var(--ink); }

/* ---- Related-offer art is a cutout now; cropping it to fill chopped the
   eSchool badge off one side and a box off the other. ---- */
.related-offer-image {
  min-height: 0;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 26px;
  background: var(--cream);
}
.related-offer-image img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 820px) {
  .related-offer-image { min-height: 0; aspect-ratio: 3 / 2; padding: 16px; }
}

/* ---- Inside-the-bundle cards: the photo panel and the card body were both
   near-cream, so the product had no edge. Give the panel its own tone and a
   keyline. ---- */
.inside-card img {
  background: #ece5d6;
  border-right: 1.5px solid rgba(16, 16, 16, .16);
}

@media (max-width: 820px) {
  .inside-card img { border-right: 1.5px solid rgba(16, 16, 16, .16); }
}

/* ============================================================
   ROUND 10 — TILE COLOUR BOUND TO THE GAME, NOT THE POSITION
   The homepage tiles took their colour from :nth-child, so once the
   grid order changed Startup High inherited S for Startups' green and
   vice versa, and neither matched its own product page. Colour now
   comes from the same theme name the product page uses.
   ============================================================ */
.game-tile:nth-child(2),
.game-tile:nth-child(3),
.game-tile:nth-child(4) { --tile-accent: var(--yellow); --tile-soft: #fff1bf; }

.game-tile.theme-idea { --tile-accent: var(--yellow); --tile-soft: #fff1bf; }
.game-tile.theme-ee   { --tile-accent: var(--blue);   --tile-soft: #e3e9ff; }
.game-tile.theme-sfs  { --tile-accent: var(--green);  --tile-soft: #def1e3; }
.game-tile.theme-sh   { --tile-accent: var(--red);    --tile-soft: #ffe2dd; }

/* ============================================================
   ROUND 11 — FINAL BATCH
   ============================================================ */

/* ---- 1 · The inside-card photo panel now takes the game's own tint, so the
   packshot sits on its colour instead of a neutral that fought it. ---- */
.inside-card.theme-idea   img { background: #fff1bf; }
.inside-card.theme-ee     img { background: #e3e9ff; }
.inside-card.theme-sfs    img { background: #def1e3; }
.inside-card.theme-sh     img { background: #ffe2dd; }
.inside-card.theme-school img { background: var(--ink); }

/* ---- 4 · Video thumbnail with a play affordance ---- */
.feature-video { position: relative; display: block; cursor: pointer; }
.feature-video .play-badge {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  border: var(--line);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
  transform: translate(-50%, -50%);
  transition: transform .18s ease, background .18s ease;
}
.feature-video .play-badge::after {
  position: absolute;
  top: 50%;
  left: 54%;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 21px solid var(--ink);
  content: "";
  transform: translate(-50%, -50%);
}
.feature-video:hover .play-badge { transform: translate(-50%, -50%) scale(1.08); background: var(--yellow); }
.feature-video .video-note {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  padding: 7px 12px;
  border: var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 12px;
  font-weight: 700;
}

/* ---- 7 · eSchool hero carries the real programme photo, dropped back so the
   cards and copy stay the subject. ---- */


@media (max-width: 820px) {
  .eschool-hero::before {
    background-position: right -70px bottom;
    background-size: auto 62%;
    opacity: .3;
    -webkit-mask-image: linear-gradient(170deg, transparent 0 40%, #000 78%);
    mask-image: linear-gradient(170deg, transparent 0 40%, #000 78%);
  }
  .feature-video .play-badge { width: 58px; height: 58px; box-shadow: 4px 4px 0 var(--ink); }
  .feature-video .play-badge::after { border-top-width: 10px; border-bottom-width: 10px; border-left-width: 16px; }
}

/* ---- 9 · The founder bottle has no photograph yet, so it gets a designed
   tile in the same family as the eSchool one rather than a broken image. ---- */
.bottle-mini-art {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 20px;
  background: linear-gradient(150deg, var(--yellow), #ffb703);
  text-align: center;
}
.bottle-mini-art strong { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.bottle-mini-art small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }

/* ============================================================
   ROUND 12 — eSCHOOL VISUAL REBUILT
   The 4 stat cards were absolutely positioned and rotated, so they
   overlapped each other at every width and buried "12 PITCH DAYS".
   They are now an aligned grid, matching the homepage board, sitting
   on the programme photo at reduced opacity.
   ============================================================ */

.eschool-visual {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  overflow: hidden;
  padding: 20px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 30px;
  background: #14142a;
}
/* The photo gets its own aligned frame at the top of the panel instead of
   washing behind the cards, where the gaps between them were slicing the
   students' faces into fragments. */
.eschool-visual::before {
  position: static;
  grid-column: 1 / -1;
  aspect-ratio: 16 / 7;
  border-radius: 18px;
  background: url("../eschool/eschool-students.jpg") center 22% / cover no-repeat;
  opacity: .82;
  content: "";
}

.eschool-live-card {
  position: static;
  width: auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 18px;
  border-radius: 18px;
  transform: none;
  box-shadow: 5px 5px 0 rgba(16, 16, 16, .35);
}
.eschool-live-card:nth-child(n) { position: static; width: auto; transform: none; }
.eschool-live-card strong { font-size: clamp(30px, 3vw, 44px); line-height: 1; }
.eschool-live-card span { font-size: 13px; font-weight: 650; line-height: 1.35; }

@media (max-width: 820px) {
  .eschool-visual { min-height: 0; padding: 14px; gap: 10px; }
  .eschool-live-card { padding: 15px; }
  .eschool-live-card strong { font-size: 30px; }
  .eschool-live-card span { font-size: 12px; }
}

@media (max-width: 430px) {
  .eschool-visual { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .eschool-visual::before { aspect-ratio: 16 / 9; }
}

/* ---- Homepage eSchool band: same programme photo, dropped right back so the
   headline and chips stay the subject. Swap the URL when real ThinkStartup
   photography is available. ---- */
.eschool-home-section { position: relative; overflow: hidden; }
.eschool-home-section::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("../eschool/eschool-students.jpg") right 22% center / auto 130% no-repeat;
  opacity: .17;
  content: "";
  pointer-events: none;
  -webkit-mask-image: linear-gradient(95deg, transparent 0 30%, #000 68%);
  mask-image: linear-gradient(95deg, transparent 0 30%, #000 68%);
}
.eschool-home-section > * { position: relative; z-index: 1; }

@media (max-width: 820px) {
  .eschool-home-section::before {
    background-position: right -60px bottom;
    background-size: auto 58%;
    opacity: .13;
    -webkit-mask-image: linear-gradient(175deg, transparent 0 46%, #000 80%);
    mask-image: linear-gradient(175deg, transparent 0 46%, #000 80%);
  }
}

/* ============================================================
   ROUND 13 — LIGHT SURFACES SET THEIR OWN COLOUR
   This bug has now appeared 5 times: a component paints itself a
   light background but inherits its text colour, so the moment it
   opens on a page whose body is white-on-dark (eSchool), the text
   disappears. Fixing the whole family at once instead of one at a
   time. Every surface below owns its foreground.
   ============================================================ */
.cart-drawer,
.drawer-head,
.drawer-empty,
.drawer-items,
.drawer-totals,
.cart-upgrade,
.offer-modal,
.chooser-modal,
.challenge-modal,
.icon-button,
.faq-item,
.game-more,
.inside-card,
.mobile-buy-bar,
.parent-share,
.parent-facts,
.parent-fact,
.proof-stat,
.eschool-live-card,
.eschool-chip,
.spec-chip,
.qty-control,
.gallery-main,
.bundle-copy,
.game-copy { color: var(--ink); }

/* ---- 2 · Three facts in a 2-column grid left a hole. Three columns. ---- */
.parent-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.parent-fact { border-bottom: 0; }
.parent-fact:last-child { border-right: 0; }

@media (max-width: 820px) {
  .parent-facts { grid-template-columns: 1fr; }
  .parent-fact { border-right: 0; border-bottom: var(--line) !important; }
  .parent-fact:last-child { border-bottom: 0 !important; }
}

/* ---------- WordPress integration (plugin-only rules) ---------- */

/* Logged-in admin bar: shift sticky/fixed chrome down so nothing hides. */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .cart-drawer { top: 32px; height: calc(100dvh - 32px); }
body.admin-bar .product-summary { top: 150px; }
body.admin-bar .order-card { top: 147px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
  body.admin-bar .cart-drawer { top: 46px; height: calc(100dvh - 46px); }
}

/* Campaign banner hero: the button overlays the uploaded image. */
.home-hero-banner { position: relative; padding: 0; min-height: 0; }
.home-hero-banner .hero-banner-img { display: block; width: 100%; height: auto; }
.home-hero-banner .hero-banner-actions { position: absolute; left: 0; right: 0; bottom: 6%; display: flex; justify-content: center; }