/* The landing pages (docs/REDESIGN-PLAN.md PR 3 to 5: Fake News or Fact?, the studio home, Marble Codex, Brickography), on top of
   styles.css; a page loads it by saying "styles: landing.css". The same rules as styles.css (CLAUDE.md rule 8), 30 KB budget. */

.app-fakeorfact {
  --band: #1f2227; --band-2: #2a2e34; --on-band: #ece9e2; --on-band-2: #c2bfb8; --band-accent: #ffb77a;
  --glow-a: #ffb77a; --glow-b: #f2c14e; --glow-c: #ff9e80; --frame: #15171a;
  --cat-science: #00796b; --cat-nature: #558b2f; --cat-history: #8d5524; --cat-legend: #6a1b9a; --cat-money: #4e5ba6;
}
@media (prefers-color-scheme: dark) {
  .app-fakeorfact {
    --band: #0e1013; --band-2: #1a1d21; --glow-a: #9a4a00; --glow-b: #855a00; --glow-c: #6e3a12; --frame: #050607;
    --cat-science: #64d8c8; --cat-nature: #aed581; --cat-history: #e3b27e; --cat-legend: #ce93d8; --cat-money: #a9b4f5;
  }
}
.app-marblecodex { --glow-a: #d9b26a; --glow-b: #a97c3c; --glow-c: #f0d9a0; --frame: #2b1e12; --brass: #b08d57; --brass-2: #8d6e3f; }
.app-brickography { --glow-a: #ffd54f; --glow-b: #e53935; --glow-c: #1e88e5; --frame: #1c1510; }
@media (prefers-color-scheme: dark) {
  .app-marblecodex { --glow-a: #85561c; --glow-b: #5a3a12; --glow-c: #a97c3c; --frame: #0f0a06; }
  .app-brickography { --glow-a: #8a6a00; --glow-b: #7a1f1a; --glow-c: #0d47a1; --frame: #0a0805; }
}
body.landing { --step-1: 1.25rem; --step-2: 1.6rem; --step-3: clamp(1.9rem, 1.4rem + 2.2vw, 2.7rem); --step-4: clamp(2.8rem, 1.6rem + 5.6vw, 5.4rem); }
body.landing .wrap { max-width: 1120px; }
body.landing main { padding-top: 0; }
body.landing h2 { font-size: var(--step-3); font-weight: 800; margin: 0; }
body.landing h3 { font-size: var(--step-1); margin: 0; }
.hl { background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 86% / 100% 0.5em; padding-inline: 0.06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.kicker { font: 700 0.78rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0; }
.sec { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.sec-head { display: grid; gap: 0.8rem; max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head p { font-size: var(--step-1); color: var(--ink-2); margin: 0; }
section { scroll-margin-top: 80px; }
html:not(.js) .js-only { display: none; }
html.js .no-js-only { display: none; }

.btn.fake { background: var(--fake); border-color: var(--fake); color: #fff; }
.btn.real { background: var(--real); border-color: var(--real); color: #fff; }
.btn.fake:hover, .btn.real:hover { background: color-mix(in oklab, var(--fake) 85%, var(--ink)); }
.btn.real:hover { background: color-mix(in oklab, var(--real) 85%, var(--ink)); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- Hero ---- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2.5rem; align-items: center; padding-block: clamp(2rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); }
.eyebrow { font: 700 0.8rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0; }
.eyebrow .live { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-2); letter-spacing: 0.06em; }
.eyebrow .live::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--real); box-shadow: 0 0 0 0 color-mix(in oklab, var(--real) 60%, transparent); }
.hero h1 { font-size: var(--step-4); font-weight: 800; margin: 0.9rem 0 1.1rem; letter-spacing: -0.025em; }
.lead { font-size: var(--step-1); color: var(--ink-2); max-width: 34rem; margin: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.6rem 0 0; }
.fine { margin: 1rem 0 0; font-size: 0.9rem; color: var(--ink-3); }
.hero-stage { position: relative; display: grid; place-items: center; min-height: 520px; isolation: isolate; }
.glow { position: absolute; width: min(430px, 92%); aspect-ratio: 1; border-radius: 50%; z-index: -1; background: conic-gradient(from var(--spin, 0deg), var(--glow-a), var(--glow-b), var(--glow-c), var(--glow-a)); filter: blur(52px); opacity: 0.55; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .hero-stage { min-height: 0; padding-block: 0.5rem 1rem; }
}

/* The phone frame, drawn in CSS */
.phone { position: relative; width: clamp(236px, 24vw, 292px); border-radius: 42px; background: var(--frame); padding: 9px; box-shadow: var(--shadow), inset 0 0 0 1.5px rgb(255 255 255 / 0.08); }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; translate: -50% 0; width: 64px; height: 7px; border-radius: 9px; background: rgb(255 255 255 / 0.1); z-index: 3; }
.screen { position: relative; aspect-ratio: 1 / 2; border-radius: 33px; overflow: hidden; background: var(--paper); }
.screen > picture, .screen > img, .screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen > picture > img { width: 100%; height: 100%; object-fit: cover; }

/* The app's deck in the hero (HTML: it follows the theme and the language) */
.app { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 30px 14px 14px; gap: 8px; }
.app-top { display: flex; align-items: center; justify-content: space-between; }
.app-top b { font: 800 1.08rem/1 var(--serif); }
.streak { display: inline-flex; align-items: center; gap: 3px; font: 800 0.85rem/1 var(--sans); color: var(--gold); }
.streak svg { width: 15px; height: 15px; }
.segs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.segs i { height: 5px; border-radius: 3px; background: var(--line); transition: background-color 0.4s; }
.segs i.done { background: var(--accent); }
.app-count { font: 600 0.68rem/1 var(--sans); color: var(--ink-2); }
.deck { position: relative; flex: 1; margin-block: 8px 30px; }
.card-m { position: absolute; inset: 0; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.45); padding: 16px 14px; display: flex; flex-direction: column; justify-content: center; gap: 10px; transform-origin: 50% 90%; will-change: transform; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s, background-color 0.25s; background-color: color-mix(in oklab, var(--card), var(--tint, transparent) var(--tint-amt, 0%)); }
.card-m .chip, .demo-card .chip { align-self: flex-start; font: 600 0.66rem/1 var(--sans); padding: 0.42em 0.7em; border-radius: 7px; border: 1.5px solid var(--cat); color: var(--ink); }
.demo-card .chip { display: inline-block; font-size: 0.78rem; margin-right: 0.4em; }
.card-m .claim { font: 700 1.02rem/1.25 var(--serif); margin: 0; }
.card-m .seen { font: 400 0.66rem/1.2 var(--sans); color: var(--ink-2); margin: 0; }
.card-m .stamp { position: absolute; top: 18px; left: 14px; font-size: 1.2rem; border-width: 3.5px; opacity: 0; scale: 1.9; transition: opacity 0.12s, scale 0.26s cubic-bezier(0.3, 1.7, 0.5, 1); }
.card-m.stamped .stamp { opacity: 0.92; scale: 1; }
.card-m.stamped.is-real { --tint: var(--real); --tint-amt: 10%; }
.card-m.stamped.is-fake { --tint: var(--fake); --tint-amt: 10%; }
.card-m[data-depth="1"] { transform: translateY(12px) scale(0.95); }
.card-m[data-depth="2"] { transform: translateY(24px) scale(0.9); }
.card-m[data-depth="0"] { z-index: 3; } .card-m[data-depth="1"] { z-index: 2; } .card-m[data-depth="2"] { z-index: 1; }
.app-hint { text-align: center; font-size: 0.6rem; color: var(--ink-2); margin: 0; }
.app-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-btns span { border-radius: 999px; text-align: center; font: 700 0.78rem/1 var(--sans); padding: 0.75em 0; color: #fff; }
.app-btns .f { background: var(--fake); } .app-btns .r { background: var(--real); }
@media (prefers-color-scheme: dark) { .app-btns span, .btn.fake, .btn.real { color: #14171a; } }
.cat-science, [data-cat="science"] { --cat: var(--cat-science); } .cat-nature, [data-cat="nature"] { --cat: var(--cat-nature); } .cat-history, [data-cat="history"] { --cat: var(--cat-history); } .cat-legend, [data-cat="legend"] { --cat: var(--cat-legend); } .cat-money, [data-cat="money"] { --cat: var(--cat-money); }

/* ---- How it plays: the pinned phone ---- */
.how-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); }
.how-phone { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); align-self: start; display: grid; justify-items: center; }
.how-phone .screen > picture, .how-phone .screen > video { opacity: 0; }
.how-phone .screen > .on { opacity: 1; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step { min-height: 62vh; display: grid; align-content: center; gap: 0.8rem; padding-block: 1rem; border-top: 1px solid var(--line); margin: 0; }
.step:first-child { border-top: 0; }
.step .n { font: 800 var(--step-3)/1 var(--serif); color: var(--ink-3); transition: color 0.3s; }
.step.active .n { color: var(--accent); }
.step h3 { font-size: var(--step-2); }
.step p { color: var(--ink-2); max-width: 32rem; margin: 0; }
.step-shot { display: none; width: min(240px, 70%); height: auto; border-radius: 26px; border: 7px solid var(--frame); box-shadow: var(--shadow); margin-top: 0.6rem; background: var(--frame); }
.step-shot img, video.step-shot { display: block; width: 100%; height: auto; border-radius: 20px; }
@media (min-width: 861px) {   /* with the script, the step being read is lit and the others rest in grey (never faded: contrast) */
  html.js .step h3, html.js .step p { color: var(--ink-3); transition: color 0.6s; }
  html.js .step.active h3 { color: var(--ink); } html.js .step.active p { color: var(--ink-2); }
}
html:not(.js) .how-phone { display: none; }
html:not(.js) .how-grid { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .step-shot { display: block; }
@media (max-width: 860px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .how-phone { display: none; }
  .step { min-height: 0; padding-block: 1.8rem; }
  .step-shot { display: block; }
}

/* ---- The reveal ---- */
.reveal-fig { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin: 0; }
.reveal-phone { position: relative; }
.reveal-phone .phone { width: clamp(250px, 28vw, 320px); }
.dot { position: absolute; left: calc(100% - 14px); top: var(--y); translate: 0 -50%; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font: 800 0.85rem/1 var(--sans); box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 25%, transparent); z-index: 4; }
.d1 { --y: 17%; } .d2 { --y: 39%; } .d3 { --y: 54%; } .d4 { --y: 67%; }
.callouts { list-style: none; margin: 0; padding: 0; position: relative; align-self: stretch; overflow-x: clip; }
.callouts li { position: absolute; left: 0; right: 0; top: var(--y); translate: 0 -50%; padding-left: 3.2rem; margin: 0; }
.callouts li::before { content: ""; position: absolute; left: 0; top: 50%; width: 2.6rem; border-top: 2px dashed color-mix(in oklab, var(--accent) 60%, transparent); }
.callouts b { display: block; font: 700 var(--step-1)/1.2 var(--serif); }
.callouts span { color: var(--ink-2); }
.verdict-groups { margin: clamp(2.5rem, 5vw, 4rem) 0 0; display: grid; grid-template-columns: 1fr 4fr; gap: 1rem 1.6rem; }   /* the swipe, as the app scores it */
.verdict-groups h3 { margin: 0 0 0.7rem; font: 700 0.85rem/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.verdicts { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.fake-side { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .verdict-groups { grid-template-columns: 1fr; gap: 1.6rem; } .fake-side { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fake-side { grid-template-columns: 1fr; } }
.verdicts li { display: grid; gap: 0.55rem; align-content: start; padding: 1rem 1.1rem 1.1rem; border-radius: 14px; background: var(--paper-2); margin: 0; }
.verdicts .stamp { justify-self: start; }
.verdicts span:last-child { font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 760px) {
  .reveal-fig { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.6rem; }
  .callouts { display: grid; gap: 1rem; justify-self: stretch; }
  .callouts li { position: static; translate: none; padding-left: 2.6rem; }
  .callouts li::before { content: attr(data-n); left: 0; top: 0.1rem; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font: 800 0.8rem/1 var(--sans); }
}

/* ---- Try a card ---- */
.try { background: var(--paper-2); position: relative; overflow: clip; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
.try-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.try-stage { display: grid; gap: 1rem; justify-items: center; }
.try-progress { font: 600 0.85rem/1 var(--sans); color: var(--ink-2); margin: 0; }
.try-deck { position: relative; width: min(340px, 100%); aspect-ratio: 4 / 4.6; margin-bottom: 16px; touch-action: pan-y; outline: none; }
.try-deck:focus-visible { outline: 3px solid var(--accent); outline-offset: 8px; border-radius: 24px; }
.try-deck.revealing { aspect-ratio: auto; margin-bottom: 0; }
.try-deck .card-m { padding: 26px 22px; gap: 14px; border-radius: 24px; cursor: grab; user-select: none; -webkit-user-select: none; }
.try-deck .card-m.dragging { cursor: grabbing; transition: none; }
.try-deck .card-m .claim { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.65rem); }
.try-deck .card-m .chip { font-size: 0.78rem; }
.try-deck .card-m .seen { font-size: 0.82rem; }
.try-deck .card-m .stamp { top: 22px; left: 20px; font-size: 1.35rem; }
.try-deck .done-card { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; border-radius: 24px; border: 2px dashed var(--line); color: var(--ink-2); padding: 1.5rem; }
.try-deck .reveal-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 1.25rem; box-shadow: var(--shadow); }
.try-stage.revealing .try-btns, .try-stage.revealing .try-hint { display: none; }
.try-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; width: min(340px, 100%); }
.try-btns .btn { width: 100%; }
.try-hint { font-size: 0.85rem; color: var(--ink-3); text-align: center; margin: 0; }
.try-panel { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(1.25rem, 3vw, 2rem); min-height: 100%; display: grid; align-content: start; gap: 1rem; box-shadow: var(--shadow); }
.try-panel .empty { color: var(--ink-2); display: grid; gap: 0.6rem; }
.try-panel .empty b { font: 700 var(--step-2)/1.15 var(--serif); color: var(--ink); }
.result { display: grid; gap: 0.9rem; }
.result .got { display: flex; align-items: center; gap: 0.6rem; font: 800 var(--step-2)/1 var(--serif); margin: 0; }
.result .got.yes { color: var(--real); } .result .got.no { color: var(--fake); }
.result .got svg { width: 1.5em; height: 1.5em; flex: none; }
.result .said { color: var(--ink-2); font-size: 0.95rem; margin: 0; }
.result p { margin: 0; }
.verdict-pill { justify-self: start; font: 700 0.95rem/1 var(--sans); padding: 0.55em 1em; border-radius: 999px; border: 2px solid currentColor; }
.verdict-pill.real { color: var(--real); } .verdict-pill.fake { color: var(--fake); }
.result blockquote, .demo-card blockquote { margin: 0; font: italic 400 1rem/1.5 var(--serif); color: var(--ink-2); }
.tipbox { background: var(--paper-2); border-radius: 14px; padding: 0.9rem 1rem; display: grid; gap: 0.25rem; }
.tipbox b { font-weight: 700; }
.sources { font-size: 0.92rem; color: var(--ink-2); margin: 0; }
.result-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.3rem; }
.score { font: 800 clamp(3rem, 2rem + 4vw, 4.5rem)/1 var(--serif); margin: 0; }
.score small { font-size: 0.45em; color: var(--ink-2); font-weight: 600; }
.note-sm { font-size: 0.82rem; color: var(--ink-3); margin: 1.2rem 0 0; }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
@media (max-width: 860px) { .try-grid { grid-template-columns: minmax(0, 1fr); } .try-panel { display: none; } }
/* Without the script: radio buttons, the answer follows the choice */
.demo-cards { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.demo-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 1.25rem; display: grid; gap: 0.9rem; margin: 0; }
.demo-card fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.8rem; }
.demo-card legend { font: 700 clamp(1.2rem, 1rem + 0.8vw, 1.5rem)/1.25 var(--serif); padding: 0; margin-bottom: 0.4rem; }
.demo-card .choices { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.demo-card .choices label { display: inline-flex; align-items: center; gap: 0.5em; min-height: 48px; padding: 0.5em 1.1em; border-radius: 999px; border: 2px solid var(--line); font-weight: 700; cursor: pointer; }
.demo-card .choices label:has(input:checked) { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.demo-card .answer, .demo-card .got-yes, .demo-card .got-no, .demo-card .if-real, .demo-card .if-fake { display: none; }
.demo-card:has(input:checked) .answer { display: grid; }
.demo-card:has(input[value="real"]:checked) .if-real, .demo-card:has(input[value="fake"]:checked) .if-fake { display: inline; }
.demo-card[data-answer="real"]:has(input[value="real"]:checked) .got-yes, .demo-card[data-answer="fake"]:has(input[value="fake"]:checked) .got-yes { display: flex; }
.demo-card[data-answer="real"]:has(input[value="fake"]:checked) .got-no, .demo-card[data-answer="fake"]:has(input[value="real"]:checked) .got-no { display: flex; }

/* ---- Feature tiles ---- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 760px) { .bento { grid-template-columns: minmax(0, 1fr); } }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 1.4rem; display: grid; gap: 0.6rem; align-content: start; overflow: hidden; position: relative; margin: 0; }
.tile p { color: var(--ink-2); font-size: 0.98rem; margin: 0; }
.tile-art { width: 58px; height: 58px; margin-bottom: 0.25rem; }
.tile-art svg { width: 100%; height: 100%; overflow: visible; }
.tile-art .flame { transform-box: fill-box; transform-origin: 50% 90%; }
.tile-art .bar { transform-box: fill-box; transform-origin: 50% 100%; }
.tile-art .spark { transform-box: fill-box; transform-origin: center; }

/* ---- The trust band ---- */
.trust { background: var(--band); color: var(--on-band); margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
.trust .kicker { color: var(--band-accent); }
.trust .sec-head p { color: var(--on-band-2); }
.trust h2 .hl { background-image: linear-gradient(color-mix(in oklab, var(--band-accent) 42%, transparent), color-mix(in oklab, var(--band-accent) 42%, transparent)); }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; }
.trust-grid div { border-top: 2px solid var(--band-2); padding-top: 1.1rem; display: grid; gap: 0.5rem; align-content: start; }
.trust-grid p { color: var(--on-band-2); margin: 0; }
.trust a { color: var(--band-accent); }
.trust .btn-line { color: var(--band-accent); border-color: color-mix(in oklab, var(--band-accent) 55%, transparent); margin-top: 2rem; }

/* ---- The other two apps ---- */
.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.app-card { position: relative; container-type: inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.4rem; border-radius: 22px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.app-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.app-card > img { width: 64px; height: 64px; border-radius: 16px; }
.app-card p { color: var(--ink-2); font-size: 0.98rem; margin: 0.35rem 0 0; }
.app-card .status { color: var(--ink-3); font-size: 0.85rem; }
.app-card .go { margin-top: 0.7rem; display: inline-block; font-weight: 700; color: var(--accent); }
.app-art { grid-column: 1 / -1; margin-top: 0.4rem; }
@container (min-width: 520px) { .app-card { grid-template-columns: auto minmax(0, 1fr) auto; } .app-art { grid-column: 3; grid-row: 1; margin-top: 0; } }
.mc-art { position: relative; width: 156px; height: 196px; justify-self: center; }
.mc-art .mini { position: absolute; right: 0; top: 0; width: 92px; border-radius: 16px; padding: 4px; background: var(--frame, #15171a); rotate: 8deg; box-shadow: var(--shadow); transition: rotate 0.4s; }
.mc-art .mini img { display: block; width: 100%; height: auto; border-radius: 12px; }
.app-card:hover .mc-art .mini { rotate: 2deg; }
.gear { position: absolute; left: 0; bottom: 0; width: 78px; height: 78px; color: #b08d57; }
.gear.small { left: 8px; top: 4px; bottom: auto; width: 44px; height: 44px; color: #8d6e3f; }
/* Brickography: the photo on the left, its bricks on the right */
.ba { position: relative; container-type: inline-size; width: 100%; max-width: 240px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); isolation: isolate; justify-self: center; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba .before { position: absolute; inset: 0; clip-path: inset(0 52% 0 0); }
.ba .edge { position: absolute; top: 0; bottom: 0; left: -2px; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3); translate: 48cqw 0; }
.ba .tag { position: absolute; bottom: 8px; font: 700 0.62rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.45em 0.65em; border-radius: 999px; background: rgb(0 0 0 / 0.55); color: #fff; }
.ba .tag.l { left: 8px; } .ba .tag.r { right: 8px; }
.hero-stage .ba { max-width: 480px; border-radius: 20px; }
.hero-stage .ba .tag { font-size: 0.72rem; bottom: 12px; } .hero-stage .ba .tag.l { left: 12px; } .hero-stage .ba .tag.r { right: 12px; }

/* ---- Marble Codex: the rail and the marble, the gears, the chapters row ---- */
.hero-stage .phone { position: relative; z-index: 2; }
.rail { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 360px; height: 540px; z-index: 1; pointer-events: none; }
.rail svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rail path { fill: none; stroke: #c9a86a; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.rail .inner { stroke: #f0dfb6; stroke-width: 4; }
.marble { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb3a7, #c62828 50%, #5a0f0f); box-shadow: 0 3px 6px rgb(0 0 0 / 0.4); offset-path: path("M 12 18 C 150 18, 348 40, 348 130 L 348 230 C 348 320, 12 290, 12 370 L 12 440 C 12 520, 160 528, 348 528"); offset-distance: 40%; offset-rotate: 0deg; }
.hero-stage .gear { position: absolute; z-index: 3; color: var(--brass); width: 92px; height: 92px; left: 2%; bottom: 6%; }
.hero-stage .gear.small { width: 54px; height: 54px; left: auto; bottom: auto; right: 4%; top: 8%; color: var(--brass-2); }
.row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10rem, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.6rem; scrollbar-width: thin; outline-offset: 8px; border-radius: 8px; }
.row figure { margin: 0; scroll-snap-align: start; display: grid; gap: 0.6rem; align-content: start; }
.row .phone { width: min(100%, 200px); justify-self: center; border-radius: 28px; padding: 6px; }
.row .phone::before { width: 40px; height: 5px; top: 11px; }
.row .screen { border-radius: 23px; }
.row figcaption { font-size: 0.92rem; color: var(--ink-2); text-align: center; }
.row figcaption b { display: block; font: 700 1rem/1.3 var(--serif); color: var(--ink); }
.tile-art .gear { position: static; width: 100%; height: 100%; color: var(--brass, var(--accent)); }
.tile-art .cell, .tile-art .marble-i, .tile-art .book { transform-box: fill-box; transform-origin: center; }

/* ---- The studio home: the studio line and each app's pages ---- */
.studio-about .sec-head { margin-bottom: 1.4rem; }
.app-links { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.55rem; }
.app-links li { margin: 0; }
.app-links b { display: inline-block; min-width: 11.5rem; font-family: var(--serif); }
.studio-about p { margin: 0 0 0.8rem; max-width: 44rem; }
.studio-about .addr { justify-content: start; }
@media (max-width: 560px) { .app-links b { display: block; min-width: 0; } }

/* ---- The closing call ---- */
.closing { text-align: center; display: grid; justify-items: center; gap: 1rem; }
.closing h2 { font-size: var(--step-4); }
.closing p { color: var(--ink-2); font-size: var(--step-1); max-width: 36rem; margin: 0; }
.addr { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--ink-2); }
.addr code { font: 600 0.95rem/1.3 var(--sans); color: var(--ink); background: var(--paper-2); padding: 0.35em 0.6em; border-radius: 8px; user-select: all; overflow-wrap: anywhere; }
.copy { font: 600 0.85rem/1 var(--sans); min-height: 36px; padding: 0.5em 0.9em; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }

/* ---- Motion, only when allowed ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero .hl { animation: sweep 1s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .glow { animation: spin 12s linear 3; }
  .eyebrow .live::before { animation: ping 1.8s ease-out 4; }
  .reveal-phone .dot { animation: pulse 2.4s ease-in-out 3; }
  .tile { transition: opacity 0.6s, translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .tile.pre { opacity: 0; translate: 0 14px; }
  .tile.in .flame { animation: flicker 1.1s ease-in-out 3; }
  .tile.in .bar { animation: grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .tile.in .bar:nth-of-type(2) { animation-delay: 0.14s; } .tile.in .bar:nth-of-type(3) { animation-delay: 0.28s; }
  .tile.in .spark { animation: twinkle 1.6s ease-in-out 3; } .tile.in .spark:nth-of-type(3) { animation-delay: 0.6s; }
  .app-card:hover .gear, .app-card:focus-visible .gear, .app-card.in .gear { animation: turn 5s linear 2; }
  .app-card:hover .gear.small, .app-card:focus-visible .gear.small, .app-card.in .gear.small { animation-direction: reverse; animation-duration: 3.4s; }
  .hero-stage .gear { animation: turn 12s linear 3; }
  .hero-stage .gear.small { animation-direction: reverse; animation-duration: 8s; }
  .tile.in .tile-art .gear { animation: turn 4s linear 1; }
  .tile.in .marble-i { animation: drop 1.1s cubic-bezier(0.3, 0.9, 0.4, 1.4) both; }
  .tile.in .book { animation: open 0.8s ease-out both; }
  .tile.in .cell { animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: calc(sibling-index() * 0.05s); }
  .app-card .ba .before, .app-card .ba .edge { transition: clip-path 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .app-card:hover .ba .before, .app-card:focus-visible .ba .before { clip-path: inset(0 100% 0 0); }
  .app-card:hover .ba .edge, .app-card:focus-visible .ba .edge { translate: 100cqw 0; }
  @starting-style { .result { opacity: 0; translate: 0 14px; } }
  .result { transition: opacity 0.4s, translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
  @supports (animation-timeline: scroll()) {
    .marble { animation: roll linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .hero-stage .ba .before { animation: wipe linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
    .hero-stage .ba .edge { animation: wipe-edge linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
  }
  @supports (animation-timeline: view()) {
    .sec .hl { animation: sweep linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
    .callouts li { animation: callout linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    .verdicts li { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}
@keyframes sweep { from { background-size: 0% 0.5em; } to { background-size: 100% 0.5em; } }
@keyframes spin { to { --spin: 360deg; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--real) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent) 10%, transparent); } }
@keyframes callout { from { translate: 24px -50%; } to { translate: 0 -50%; } }
@keyframes rise { from { translate: 0 18px; } to { translate: 0 0; } }
@keyframes turn { to { rotate: 360deg; } }
@keyframes flicker { 0%, 100% { scale: 1 1; rotate: 0deg; } 30% { scale: 0.96 1.06; rotate: -2deg; } 60% { scale: 1.04 0.97; rotate: 2deg; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes twinkle { 0%, 100% { opacity: 0.35; scale: 0.7; } 50% { opacity: 1; scale: 1.1; } }
@keyframes roll { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes drop { from { translate: 0 -18px; } to { translate: 0 0; } }
@keyframes open { from { scale: 0.7 1; } to { scale: 1 1; } }
@keyframes pop { from { scale: 0; } to { scale: 1; } }
@keyframes wipe { from { clip-path: inset(0 25% 0 0); } to { clip-path: inset(0 100% 0 0); } }
@keyframes wipe-edge { from { translate: 75cqw 0; } to { translate: 0 0; } }
@media (max-width: 760px) { @keyframes callout { from { translate: 0 14px; } to { translate: 0 0; } } }