/* The homepage (index.html). */
/* Generated by review/make_v12_palette.py from review/v10.css and review/v11b.css. Do not edit. */
@font-face{font-family:Inter;src:url('assets/home/v8/Inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{
 --bg:#16191e;--bg-2:#1b1f25;--panel:#21262e;--panel-2:#282d37;--line:rgba(215,218,224,.14);--line-2:rgba(215,218,224,.24);
 --text:#e9ebee;--soft:#c9cdd3;--muted:#979ea9;--gold:#e8c06a;--gold-2:#f4d78f;--red:#c8323f;--red-hover:#a8242f;--teal:#5fb3a6;
 --serif:Georgia,'Times New Roman',serif;--sans:Inter,'Segoe UI',Arial,sans-serif;--radius:14px;--shell:1240px;
 color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.dialog-open{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.shell{width:min(var(--shell),calc(100% - 64px));margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;top:-80px;left:20px;z-index:300;background:var(--text);color:var(--bg);padding:12px 20px;border-radius:8px}
.skip-link:focus{top:12px}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
use[href="#play"]{fill:currentColor}
.eyebrow{font-size:13px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* buttons and links */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;background:var(--red);color:#ffffff;font-weight:650;font-size:16px;text-decoration:none;border:1px solid transparent;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 10px 30px rgba(200,50,63,.28)}
.button:hover{background:var(--red-hover);transform:translateY(-1px)}
.button svg{transition:transform .2s}
.button:hover svg{transform:translateX(3px)}
.button-large{min-height:60px;padding:16px 30px;font-size:18px}
.button.small{min-height:44px;padding:9px 18px;font-size:15px;box-shadow:none}
.button.small svg{width:14px;height:14px}
.button.small:hover svg{transform:none}
.button.secondary{background:transparent;border-color:var(--line-2);color:var(--text);box-shadow:none}
.button.secondary:hover{background:rgba(255,255,255,.07)}
.text-link{display:inline-flex;align-items:center;gap:6px;color:var(--gold-2);font-weight:600;text-decoration:underline;text-decoration-color:rgba(232,192,106,.4);text-underline-offset:5px;min-height:44px}
.text-link:hover{text-decoration-color:var(--gold-2)}
.text-link svg{width:15px;height:15px}

/* header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.site-header.is-solid{background:rgba(19,22,26,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header-inner{display:flex;align-items:center;gap:34px;height:76px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand img{width:40px;height:40px}
.brand span{font-family:var(--serif);font-size:25px;letter-spacing:-.01em;white-space:nowrap}
#site-nav{display:flex;gap:30px}
#site-nav a{text-decoration:none;font-size:15px;font-weight:550;color:var(--soft);padding:10px 0;transition:color .2s}
#site-nav a:hover{color:var(--text)}
.menu-button{display:none}
.header-buy{min-height:44px;padding:9px 18px;font-size:15px;box-shadow:none;white-space:nowrap}
.buy-short{display:none}

/* hero */
.hero{position:relative;min-height:min(100svh,940px);display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 0;isolation:isolate;overflow:hidden}
.hero-stage{position:absolute;inset:0;z-index:-1;background:#14171b}
.hero-stage img,.hero-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-stage video{opacity:0;transition:opacity .9s ease}
.hero-stage[data-live=true] video{opacity:1}
@media (min-width:701px){.hero-stage img,.hero-stage video{transform:scale(calc(1 + var(--depth,0) * .08));transform-origin:65% 50%}}
.hero-stage::after{content:"";position:absolute;inset:0;background:
 linear-gradient(90deg,rgba(17,20,24,.94) 0%,rgba(17,20,24,.82) 30%,rgba(17,20,24,.35) 58%,rgba(17,20,24,.05) 80%),
 linear-gradient(0deg,var(--bg) 0%,rgba(22,25,30,.6) 16%,rgba(22,25,30,0) 34%),
 linear-gradient(180deg,rgba(17,20,24,.88) 0%,rgba(17,20,24,.45) 12%,rgba(17,20,24,0) 24%)}
.hero-inner{flex:1;display:flex;align-items:center}
.hero-copy{max-width:600px;padding:40px 0 30px}
.hero h1{font-size:clamp(54px,7.4vw,108px);line-height:.98;margin:18px 0 26px;text-shadow:0 4px 40px rgba(0,0,0,.45)}
.hero-lead{font-size:20px;line-height:1.6;color:#dee1e5;max-width:540px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:34px}
.watch-link{display:inline-flex;align-items:center;gap:12px;min-height:48px;font-weight:600;color:var(--text)}
.watch-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.08);backdrop-filter:blur(6px);transition:background .2s,transform .2s}
.watch-icon svg{width:16px;height:16px;margin-left:2px}
.watch-link:hover .watch-icon{background:rgba(255,255,255,.18);transform:scale(1.06)}
.chip{font-size:13px;font-weight:600;padding:3px 9px;border:1px solid var(--line-2);border-radius:999px;color:var(--soft)}
.hero-terms{margin-top:22px;font-size:14px;line-height:1.8;color:var(--soft)}
.hero-terms span{color:var(--muted)}
.hero-bar{display:flex;align-items:center;gap:24px;padding:18px 0 26px;border-top:1px solid var(--line)}
.reel-now{display:none;align-items:center;gap:10px;font-size:14px;font-weight:650}
.reel-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(200,50,63,.6);animation:pulse 2s infinite}
body[data-motion=off] .reel-dot{animation:none;background:var(--muted)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,50,63,.55)}70%{box-shadow:0 0 0 10px rgba(200,50,63,0)}100%{box-shadow:0 0 0 0 rgba(200,50,63,0)}}
.reel-index{display:flex;gap:6px;flex:1;min-width:0}
.reel-index li{flex:1;font-size:12px;color:var(--muted);padding-top:9px;border-top:2px solid rgba(255,255,255,.14);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s,border-color .3s}
.reel-index li.is-on{color:var(--text);border-top-color:var(--gold)}
.reel-index li.is-on::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--red);vertical-align:1px}
body[data-motion=off] .reel-index li.is-on::before{background:var(--muted)}
.motion-controls{display:flex;gap:18px;margin-left:auto}
.motion-controls button{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:14px;color:var(--soft)}
.motion-controls button:hover{color:var(--text)}
.motion-controls svg{width:15px;height:15px}

/* sections */
.section{padding:100px 0}
.section-head{max-width:720px;margin-bottom:44px}
.section-head.center{text-align:center;margin-inline:auto}
.section-head h2,.publish-copy h2{font-size:clamp(40px,5vw,68px);line-height:1.04;margin:14px 0 20px}
.section-head>p:last-child{font-size:19px;color:var(--soft);max-width:620px}
.section-head.center>p:last-child{margin-inline:auto}

/* films: a still first, footage fades in when it plays */
.film{position:relative;overflow:hidden;background:#111317}
.film img,.film video{width:100%;height:100%;object-fit:cover}
.film video{position:absolute;inset:0;opacity:0;transition:opacity .45s}
.film[data-live=true] video{opacity:1}
.film-zoom{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 15px;border-radius:999px;background:rgba(17,20,24,.72);backdrop-filter:blur(8px);font-size:14px;font-weight:600;border:1px solid var(--line-2);transition:background .2s}
.film-zoom:hover{background:rgba(17,20,24,.92)}
.film-zoom svg{width:13px;height:13px}
.film-note{font-size:14px;color:var(--muted);margin-top:14px}

/* play wall */
.play{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
.game-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.game-tile{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.game-tile:hover,.game-tile:focus-within{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.tile-film{aspect-ratio:16/9}
.tile-film img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.game-tile:hover .tile-film img{transform:scale(1.04)}
.tile-body{display:flex;flex-direction:column;flex:1;padding:18px 22px 14px}
.tile-kind{font-size:12px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tile-body h3{font-size:30px;line-height:1.15;margin:6px 0 4px}
.tile-payoff{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold-2)}
.tile-choice{font-size:15px;line-height:1.55;color:var(--soft);margin:10px 0 12px}
.tile-choice span{display:block;font-size:12px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:2px}
.tile-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;margin-top:auto}
.tile-actions .text-link{font-size:15px}
.tile-input{margin-left:auto;font-size:13px;color:var(--muted)}
.wall-foot{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin-top:40px;color:var(--soft)}

/* make */
.make{background:var(--bg-2)}
.build-stage{display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1.75fr);gap:56px;align-items:center}
.build-aside h2{font-size:clamp(38px,3.8vw,56px);line-height:1.05;margin:14px 0 16px}
.build-lead{color:var(--soft);font-size:18px;margin-bottom:22px}
.build-film{aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.build-steps{display:grid;gap:4px;counter-reset:step}
.build-steps li{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:12px;color:var(--muted);font-size:17px;line-height:1.45;transition:background .35s,color .35s}
.build-steps li span{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);font-size:14px;font-weight:700;transition:background .35s,color .35s,border-color .35s}
.build-steps li.is-done{color:var(--soft)}
.build-steps li.is-done span{border-color:var(--teal);color:var(--teal)}
.build-steps li.is-on{background:var(--panel-2);color:var(--text)}
.build-steps li.is-on span{background:var(--gold);border-color:var(--gold);color:#1b1a12}
.tool-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:72px}
.tool-card{display:flex;flex-direction:column;gap:6px;text-align:left;width:100%}
.tool-film{aspect-ratio:4/3;border-radius:var(--radius);border:1px solid var(--line);margin-bottom:14px;transition:border-color .3s,transform .35s cubic-bezier(.2,.7,.2,1)}
.tool-card:hover .tool-film,.tool-card:focus-visible .tool-film{border-color:var(--line-2);transform:translateY(-4px)}
.film-play{position:absolute;left:14px;bottom:14px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(17,20,24,.72);border:1px solid var(--line-2);backdrop-filter:blur(6px)}
.film-play svg{width:14px;height:14px;margin-left:2px}
.tool-card strong{font-family:var(--serif);font-weight:400;font-size:26px}
.tool-card>span:last-child{color:var(--soft);font-size:16px;line-height:1.6}

/* worlds */
.worlds{background:radial-gradient(1200px 600px at 50% 0%,#282e38 0%,var(--bg) 70%)}
.world{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;align-items:center;margin-bottom:84px}
.world-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
.world-flip .world-film{order:2}
.world-film{aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.world-copy h3{font-size:clamp(34px,3.6vw,50px);line-height:1.08;margin:12px 0 10px}
.world-copy .answer{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--gold-2);margin-bottom:16px}
.world-copy>p{color:var(--soft)}
.live-caption{margin:18px 0 6px;padding:12px 16px;border-left:3px solid var(--gold);background:rgba(232,192,106,.08);color:var(--text)!important;font-weight:600;border-radius:0 10px 10px 0}
.side-tag{position:absolute;left:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:650;background:rgba(250,246,232,.92);color:#252a33;transition:opacity .4s,transform .4s}
.side-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f7dc95,#a87d2a);box-shadow:0 0 0 2px rgba(0,0,0,.15)}
.side-right{top:14px}
.side-wrong{bottom:14px;background:rgba(29,33,40,.88);color:#e9ebee}
.river-film[data-side=right] .side-wrong,.river-film[data-side=wrong] .side-right{opacity:.25}
.beats{display:grid;gap:10px;margin:20px 0 14px}
.beats li{padding:12px 16px;border-radius:12px;border:1px solid var(--line);color:var(--muted);transition:background .35s,color .35s,border-color .35s}
.beats li strong{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;transition:color .35s}
.beats li.is-on{background:var(--panel-2);border-color:var(--gold);color:var(--text)}
.beats li.is-on strong{color:var(--gold)}
.worlds-close{text-align:center;font-family:var(--serif);font-size:30px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 18px}
.worlds-close .text-link{font-family:var(--sans);font-size:17px}

/* publish */
.publish{background:var(--bg-2)}
.publish-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:64px;align-items:center}
.publish-copy h2{font-size:clamp(40px,4.3vw,60px)}
.publish-copy .lead{font-size:20px;color:#dee1e5;margin-bottom:24px}
.publish-copy>p:last-child{color:var(--soft);margin-top:22px}
.formats{display:grid;gap:12px}
.formats li{padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);color:var(--soft);font-size:16px}
.formats strong{display:block;color:var(--text);font-weight:650}
.publish-film{aspect-ratio:16/10;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.publish-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:16px;color:var(--muted);font-size:15px}

/* price */
.price{background:radial-gradient(900px 500px at 20% 20%,#2c323c 0%,var(--bg) 70%)}
.price-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.price-card{padding:46px;border-radius:22px;background:linear-gradient(160deg,#272d36 0%,#1f232b 100%);border:1px solid var(--line-2);box-shadow:0 50px 100px -40px rgba(0,0,0,.9)}
.price-card h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 20px;margin:16px 0 12px}
.price-big{font-size:clamp(64px,8vw,112px);line-height:1;letter-spacing:-.03em}
.price-once{font-size:clamp(32px,3.5vw,46px);font-style:italic;color:var(--gold-2)}
.price-card .lead{font-size:19px;color:var(--soft);margin-bottom:26px}
.checks{display:grid;gap:12px;margin-bottom:32px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:17px}
.checks svg{color:var(--teal);margin-top:4px}
.price-note{margin-top:18px;font-size:14px;color:var(--muted)}
.price-links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:6px}
.price-links .text-link{font-size:14px}
.price-side{display:grid;gap:22px}
.free-box{padding:30px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.free-box h3{font-size:28px;margin-bottom:10px}
.free-box p{color:var(--soft);margin-bottom:6px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:300;color:var(--gold);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--soft)}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:34px 0 44px;background:var(--bg)}
.footer-inner{display:flex;align-items:center;flex-wrap:wrap;gap:16px 34px}
.footer-inner .brand span{font-size:21px}
.footer-inner .brand img{width:34px;height:34px}
.footer-inner nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.footer-inner nav a{display:inline-flex;align-items:center;gap:5px;min-height:44px;text-decoration:none;color:var(--soft);font-size:15px}
.footer-inner nav a:hover{color:var(--text)}
.footer-inner nav svg{width:13px;height:13px}
.footer-inner>p{font-size:14px;color:var(--muted)}

/* reveal: only when motion is on (set by the script) */
.reveal-ready [data-reveal]{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal-ready [data-reveal]:not(.is-in){opacity:0;transform:translateY(34px)}
.reveal-ready .game-wall>[data-reveal]:nth-child(3n+2),.reveal-ready .tool-row>[data-reveal]:nth-child(2){transition-delay:.08s}
.reveal-ready .game-wall>[data-reveal]:nth-child(3n),.reveal-ready .tool-row>[data-reveal]:nth-child(3){transition-delay:.16s}

/* media dialog (markup shared with v9) */
#media-dialog{width:calc(100% - 40px);max-width:1200px;max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line-2);border-radius:16px;color:var(--text);background:#1b1f25;box-shadow:0 40px 120px rgba(0,0,0,.7);overflow:auto}
#media-dialog::backdrop{background:rgba(13,15,18,.86);backdrop-filter:blur(8px)}
.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:18px 24px;background:#1b1f25;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}
.dialog-header .eyebrow{font-size:12px}
.dialog-header h2{font-size:30px;line-height:1.2;margin-top:6px}
.dialog-close{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex-shrink:0;border:1px solid var(--line-2);border-radius:50%;font-size:26px;font-weight:300}
.dialog-close:hover{background:rgba(255,255,255,.08)}
#dialog-image-wrap,#dialog-video-wrap,#dialog-game-wrap{background:#0e1014}
#dialog-image{width:100%;height:auto;max-height:76dvh;object-fit:contain}
#dialog-video{display:block;width:100%;max-height:72dvh;min-height:180px;object-fit:contain}
#game-iframe{display:block;width:100%;height:62dvh;max-height:760px;border:0;background:#0e1014}
.game-loading-bar{display:flex;align-items:center;gap:15px;padding:10px 20px;background:var(--panel)}
.game-loading-bar>#game-loading{flex:1;font-size:14px;line-height:1.7;color:var(--soft)}
.game-help{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:14px 22px;background:var(--panel);border-top:1px solid var(--line)}
.game-help>#game-controls{flex:0 0 100%;font-size:14px;color:var(--soft)}
.game-exit-note{flex:0 0 100%;font-size:13px;color:var(--muted);line-height:1.7}
.game-help>a{display:inline-flex;align-items:center;gap:5px;min-height:44px;font-size:14px;color:var(--gold-2);text-underline-offset:4px}
.game-help>a svg{width:14px;height:14px}
.dialog-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"description actions" "transcript transcript";gap:12px 25px;padding:18px 24px 22px}
.dialog-footer>p{grid-area:description;font-size:15px;color:var(--soft);line-height:1.7;max-width:700px}
.dialog-footer>div{grid-area:actions;display:flex;gap:4px 22px;align-items:center;flex-wrap:wrap}
.dialog-footer .text-link,.dialog-footer .project-link{font-size:14px}
.project-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--soft);text-underline-offset:5px}
.project-link svg{width:15px;height:15px}
.dialog-footer .dialog-buy{color:#ff8f98}
.dialog-transcript{grid-area:transcript}
.dialog-transcript summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:14px;color:var(--muted);list-style:none}
.dialog-transcript summary::-webkit-details-marker{display:none}
.dialog-transcript p{font-size:14px;color:var(--soft);max-width:950px}

/* tablet */
@media (max-width:1100px){
 .shell{width:calc(100% - 56px)}
 #site-nav{gap:22px}
 .game-wall{grid-template-columns:repeat(2,1fr)}
 .reel-index li:nth-child(n+5){display:none}
 .build-stage{grid-template-columns:1fr}
 .build-stage{gap:30px}
 .build-steps{grid-template-columns:repeat(5,1fr);gap:8px}
 .build-steps li{flex-direction:column;align-items:flex-start;gap:10px;font-size:15px;padding:12px}
 .world,.world-flip{grid-template-columns:1fr;gap:28px}
 .world-flip .world-film{order:0}
 .publish-grid,.price-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:860px){
 .header-inner{gap:16px}
 #site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:8px 28px 18px;background:rgba(19,22,26,.97);border-bottom:1px solid var(--line)}
 #site-nav.open{display:flex}
 #site-nav a{padding:14px 0;font-size:18px;border-bottom:1px solid var(--line)}
 .menu-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:10px;font-size:19px;order:3}
 .reel-index{display:none}
 .reel-now{display:flex;min-width:0}
}

/* phone */
@media (max-width:700px){
 body{font-size:16px}
 .shell{width:calc(100% - 36px)}
 .header-inner{height:64px}
 .brand span{font-size:22px}
 .brand img{width:34px;height:34px}
 .header-buy{min-height:44px;padding:8px 14px;font-size:14px}
 .header-buy svg{display:none}
 .buy-full{display:none}
 .buy-short{display:inline}
 .hero{min-height:0;padding:64px 0 0}
 .hero-stage{position:relative;inset:auto;aspect-ratio:16/9;z-index:0}
 .hero-stage::after{background:linear-gradient(0deg,var(--bg) 0%,rgba(22,25,30,0) 32%)}
 .hero-inner{display:block}
 .hero-copy{padding:8px 0 22px}
 .hero h1{font-size:clamp(44px,13vw,58px);margin:12px 0 16px}
 .hero-lead{font-size:17px}
 .hero-actions{margin-top:24px;gap:14px}
 .hero-actions .button-large{width:100%;min-height:58px;font-size:17px}
 .hero-terms{font-size:13px}
 .hero-bar{gap:12px;padding:12px 0 16px}
 .reel-now{min-width:0;font-size:13px}
 .motion-controls{gap:12px}
 .motion-controls button{font-size:13px}
 .section{padding:76px 0}
 .section-head{margin-bottom:34px}
 .section-head>p:last-child{font-size:17px}
 .game-wall{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-18px;padding:0 18px 12px;scrollbar-width:thin}
 .game-tile{flex:0 0 84%;scroll-snap-align:center}
 .game-tile:hover,.game-tile:focus-within{transform:none}
 .tile-body h3{font-size:27px}
 .wall-foot{justify-content:flex-start;margin-top:22px}
 .build-stage{display:flex;flex-direction:column;gap:0}
 .build-aside{display:contents}
 .build-main{order:1;margin-top:4px}
 .build-steps{order:2;grid-template-columns:1fr;gap:2px;margin-top:18px}
 .build-steps li{flex-direction:row;align-items:center;padding:10px 12px}
 .tool-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:44px -18px 0;padding:0 18px 12px;scrollbar-width:thin}
 .tool-row>li{flex:0 0 76%;scroll-snap-align:center}
 .tool-film{aspect-ratio:16/10}
 .tool-card strong{font-size:23px}
 .tool-card>span:last-child{font-size:15px}
 .world{margin-bottom:56px}
 .worlds-close{font-size:25px}
 .publish-foot{flex-direction:column;align-items:flex-start}
 .price-card{padding:28px 22px}
 .free-box{padding:24px 20px}
 .film-zoom{right:10px;bottom:10px;padding:6px 12px;font-size:13px}
 #media-dialog{width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:12px}
 .dialog-header{padding:14px 16px}
 .dialog-header h2{font-size:24px}
 #game-iframe{height:56dvh}
 .dialog-footer{grid-template-columns:1fr;grid-template-areas:"description" "actions" "transcript";padding:16px}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
}

/* v11b: one idea carried through — the knight's flame. Embers, an ember line between sections, the tagline at the
   top and the bottom of the page, and the same header and footer on every page. Loaded after homepage-v10.css. */
.hero-tagline{display:flex;align-items:center;gap:14px;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,26px);line-height:1.3;color:var(--gold-2)}
.hero-tagline::before{content:"";width:40px;height:1px;background:linear-gradient(90deg,var(--red),var(--gold))}
.embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero .hero-inner,.hero .hero-bar{position:relative;z-index:1}

/* The ember line: a thin red-to-gold rule with one glowing ember, between sections. */
main>.section{position:relative}
main>.section::before,main>.section::after{content:"";position:absolute;top:0;left:50%;transform:translate(-50%,-50%);pointer-events:none}
main>.section::before{width:min(620px,72%);height:1px;background:linear-gradient(90deg,transparent,rgba(200,50,63,.6) 30%,rgba(232,192,106,.85) 50%,rgba(200,50,63,.6) 70%,transparent)}
main>.section::after{width:7px;height:7px;border-radius:50%;background:#ffd88a;box-shadow:0 0 10px 3px rgba(244,161,74,.75),0 0 26px 8px rgba(200,50,63,.35)}

/* The closing band: the knight, its embers, the tagline again. */
.legend-band{position:relative;overflow:hidden;isolation:isolate;padding:110px 0 96px;text-align:center;
 background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(200,50,63,.22),transparent 70%),radial-gradient(ellipse 40% 50% at 50% 38%,rgba(232,192,106,.10),transparent 70%)}
.legend-band .embers{z-index:-1}
.legend-inner{display:flex;flex-direction:column;align-items:center}
.flame-touch{position:relative;width:clamp(150px,18vw,210px);aspect-ratio:1;border-radius:50%;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.flame-touch img{width:100%;height:100%;filter:drop-shadow(0 18px 40px rgba(200,50,63,.35))}
.flame-touch:hover{transform:translateY(-3px) rotate(-2deg)}
.flame-touch:active{transform:scale(.97)}
.flame-touch:focus-visible{outline-offset:8px}
.flame-hint{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted)}
.legend-band h2{margin:26px 0 18px;font-size:clamp(44px,6.4vw,92px);line-height:1;font-style:italic;color:var(--gold-2);text-shadow:0 0 40px rgba(232,192,106,.18)}
.legend-band p.legend-terms{color:var(--soft);font-size:16px;margin-top:20px}
.legend-band .button{margin-top:6px}

/* "It's Myth!" and its sparks. */
.myth-pop{position:fixed;z-index:400;transform:translate(-50%,-50%);font:italic 700 clamp(26px,3vw,36px)/1 var(--serif);color:var(--gold-2);white-space:nowrap;
 text-shadow:0 0 22px rgba(244,161,74,.65),0 2px 0 rgba(0,0,0,.4);pointer-events:none;animation:myth-pop 2.2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes myth-pop{0%{opacity:0;transform:translate(-50%,-20%) scale(.7)}12%{opacity:1;transform:translate(-50%,-70%) scale(1.06)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-160%) scale(1)}}
.spark{position:fixed;z-index:399;width:7px;height:7px;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,#fff6d6 0,#f6b04e 40%,rgba(200,50,63,0) 72%)}

/* The footer every page shares. */
.myth-footer{padding:56px 0 40px;border-top:1px solid var(--line);background:#121519}
.mf-inner{width:min(1240px,calc(100% - 64px));margin-inline:auto;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px 40px}
.mf-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-family:var(--serif);font-size:22px}
.mf-brand img{width:40px;height:40px}
.mf-tagline{justify-self:end;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,28px);color:var(--gold-2)}
.mf-nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 26px;padding-top:18px;border-top:1px solid var(--line)}
.mf-nav a{color:var(--soft);text-decoration:none;font-size:15px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.mf-nav a:hover{color:var(--text)}
.mf-nav svg{width:14px;height:14px}
.mf-copy{grid-column:1/-1;color:var(--muted);font-size:14px}
@media (max-width:700px){
 .mf-inner{width:calc(100% - 32px);grid-template-columns:1fr}
 .mf-tagline{justify-self:start}
 .legend-band{padding:84px 0 72px}
 main>.section::before{width:80%}
}
@media (prefers-reduced-motion:reduce){.myth-pop{animation-duration:1.6s}.flame-touch,.flame-touch:hover{transition:none;transform:none}}

/* v12: v11b's layout with the owner's changes of 2026-10-29. Loaded after homepage-v10.css and homepage-v11b.css.
   No serif fonts: every heading uses the sans (Inter). No italics. */
:root{--serif:var(--sans)}
h1,h2,h3{font-weight:700;letter-spacing:-.025em}
h3{letter-spacing:-.015em}
.hero h1{font-size:clamp(48px,6.4vw,92px);line-height:1.02}
.section-head h2,.publish-copy h2{font-size:clamp(36px,4.4vw,60px);line-height:1.06}
.legend-band h2,.mf-tagline,.mf-brand{font-style:normal}
.legend-band h2{font-size:clamp(38px,5.2vw,72px);line-height:1.04;color:var(--text);text-shadow:none}
.mf-tagline{font-weight:600;color:var(--gold-2)}
.mf-brand{font-weight:700;letter-spacing:-.01em}
/* The knight is a picture now, not a button. */
.legend-knight{width:clamp(150px,18vw,210px);height:auto;filter:drop-shadow(0 18px 40px rgba(200,50,63,.35))}
.legend-band h2{margin-top:30px}
.price-once{font-style:normal;font-weight:700}
/* The video window's small label line is gone; each clip's label is its title (homepage-v12-base.js). */
#dialog-kicker{display:none}

/* Price: the free demo on the left, the full version on the right, the same size (owner: "Prominently show DEMO
   with it on the LEFT, then show priced one with EQUAL SPACING"). The FAQ follows below. */
.offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto);column-gap:24px;row-gap:0}
/* Both cards share the grid's rows (name, price, lead, list, button, notes), so their buttons line up. */
.offer{display:grid;grid-row:span 6;grid-template-rows:subgrid;padding:40px;border-radius:22px;border:1px solid var(--line-2);
 background:linear-gradient(160deg,var(--panel-2) 0%,var(--panel) 100%);box-shadow:0 50px 100px -40px rgba(0,0,0,.9)}
.offer-demo{border-color:rgba(232,192,106,.55);box-shadow:0 0 0 1px rgba(232,192,106,.25),0 50px 100px -40px rgba(0,0,0,.9)}
.offer-name{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--gold-2)}
.offer-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin:12px 0 10px}
.offer .price-big{font-size:clamp(56px,6.4vw,96px);font-weight:700;line-height:1;letter-spacing:-.035em}
.offer .lead{font-size:18px;color:var(--soft);margin-bottom:22px}
.offer-body{margin-bottom:28px}
.offer-limit{margin-top:14px;font-size:15px;color:var(--muted)}
.offer>.button{width:100%;align-self:start}
.offer-notes .price-note{margin-top:14px}
.price-faq{max-width:860px;margin:56px auto 0}
.price-faq .faq{display:block}
@media (max-width:860px){.offer-grid{grid-template-columns:1fr;row-gap:0}.offer{padding:28px 22px}.offer-full{margin-top:20px}}

/* No text cursor when plain text is clicked, and no highlighting on buttons, menus and labels
   (owner: "clicking text causing a caret to show up, and button texts and stuff should not be highligtable"). */
html{caret-color:transparent;-webkit-tap-highlight-color:transparent}
input,textarea,select,[contenteditable]:not([contenteditable=false]){caret-color:auto}
button,.button,a.text-link,.watch-link,.chip,nav,summary,label,[role=tab],.menu-button,.reel-now,.reel-index,.motion-controls,
.tile-kind,.offer-name,.brand,.mf-brand,.mf-nav,.site-header,img,video,svg,canvas{-webkit-user-select:none;user-select:none}
img{-webkit-user-drag:none}

/* v13: after homepage-v12-base.css and homepage-v12.css. Owner, 2026-10-29: "Bold font for upper left logo thing, make
   sure text is vertically centered too.  In addition, slightly lower the size of font for logo area in upper left
   corner." The same rules go to every other page (site-theme/shell-v13.css). */
.brand{gap:10px}
.brand span{display:block;font-family:var(--sans);font-weight:700;font-size:21px;line-height:1;letter-spacing:-.015em}
@media (max-width:700px){.brand span{font-size:19px}}
/* The demo card's lead line was removed (it was not true); its slot stays empty so both price buttons line up. */
.offer-gap{min-height:0}
/* Must-fix 3: anything marked hidden stays hidden. The video window's "Download project" link has display:inline-flex,
   which overrode its hidden attribute and left a stale link (the Chess download) in other windows. */
[hidden]{display:none!important}

/* v14 (review/build_v14.py): the hero film, each tool beside what it makes, and world art under two sections. */

/* Make: each tool beside what it makes */
.pairs{display:grid;gap:44px;margin-top:84px}
.pair{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.2fr) 28px minmax(0,1.2fr);align-items:center;gap:22px}
.pair-copy{display:flex;flex-direction:column;gap:8px}
.pair-copy strong{font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.pair-copy span{color:var(--soft);font-size:16px;line-height:1.6}
.pane{display:block;aspect-ratio:4/3;border-radius:var(--radius);border:1px solid var(--line)}
.pane img{position:absolute;inset:0}
.pane-button{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;border-radius:var(--radius)}
.pane-button .pane{transition:border-color .3s}
.pane-button:hover .pane,.pane-button:focus-visible .pane{border-color:var(--line-2)}
.pair-arrow{display:grid;place-items:center;color:var(--muted)}
.pair-arrow svg{width:22px;height:22px}
.pane .pane-play{position:absolute;right:14px;bottom:14px;z-index:2;background:rgba(17,20,24,.82);border-color:var(--line-2);color:#fff;backdrop-filter:blur(6px)}
.pane .pane-play:hover{background:rgba(17,20,24,.95)}
.pane .pane-play.at-top{top:14px;bottom:auto}   /* the hint shows under the board */
.pairs+.film-note{margin-top:26px}

/* World art: Tetherwick's own backdrop bands, dimmed into the section colour (review/v14/make_backdrops.py). A bottom
   background layer of the section itself (each section's ::before/::after already draw the gold divider dot). */
.make{padding-bottom:clamp(200px,22vw,330px);background:url(assets/home/v14/world-meadow.webp) center bottom/max(100%,1100px) auto no-repeat,var(--bg-2)}
.price{padding-bottom:clamp(220px,22vw,330px);background:url(assets/home/v14/world-river.webp) center bottom/max(100%,1100px) auto no-repeat,radial-gradient(900px 500px at 20% 20%,#2c323c 0%,var(--bg) 70%)}

@media (max-width:980px){
 .pair{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:14px}
 .pair-copy{grid-column:1/-1}
}
@media (max-width:700px){
 .pairs{gap:36px;margin-top:48px}
 .pair-copy strong{font-size:22px}
 .pair-copy span{font-size:15px}
 .pair{grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);gap:8px 6px}
 .pair-arrow svg{width:14px;height:14px}
 .pane .pane-play{right:8px;bottom:8px;min-height:36px;padding:6px 11px;font-size:13px}
 .pane .pane-play.at-top{top:8px;bottom:auto}
 .make{background-image:url(assets/home/v14/world-meadow-960.webp);background-size:max(100%,640px) auto}
 .price{background-image:url(assets/home/v14/world-river-960.webp),radial-gradient(900px 500px at 20% 20%,#2c323c 0%,var(--bg) 70%);background-size:max(100%,640px) auto,auto}
}

/* v15 (review/v15/build_v15.py): the persuasion report's page changes. */
/* Game tiles: the kind and chapter count as a plain sentence-case line, not an uppercase label. */
.tile-kind{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}
.narrow-only{display:none}
/* Make: the chapter line under the steps. */
.build-more{margin-top:18px;padding:0 16px;color:var(--soft);font-size:16px;line-height:1.6}
/* Made with Myth: Watch larger first, the outside link after it in smaller type. */
.world-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:20px}
.world-actions .text-link{font-size:14px;font-weight:500}
.world-copy>p+p{margin-top:12px}
/* Release it: the exported game is the main picture; a closing line links to the price cards. */
.publish-copy>.publish-share{color:var(--soft);margin-top:22px}
.publish-copy>.publish-close{color:var(--soft);margin-top:12px;font-size:16px}
.publish-close .text-link{display:flex;width:fit-content;margin-top:8px}
.publish-foot .button{white-space:nowrap;flex-shrink:0}
.export-play{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;border-radius:var(--radius)}
.export-play .publish-film{display:block;transition:border-color .3s}
.export-play img{transition:transform .5s,filter .3s;filter:brightness(.82)}
.export-play:hover img,.export-play:focus-visible img{transform:scale(1.03);filter:brightness(.95)}
.export-play:hover .publish-film,.export-play:focus-visible .publish-film{border-color:var(--line-2)}
.export-play-label{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap}
.export-play:hover .export-play-label{background:var(--red-hover)}
/* World art moves above the price section, so the price cards are the last thing before the footer. */
.world-band{height:clamp(200px,22vw,330px);background:linear-gradient(180deg,#1b1f25 0%,rgba(27,31,37,0) 30%,rgba(22,25,30,0) 70%,#16191e 100%),url(assets/home/v14/world-river.webp) center/max(100%,1100px) auto no-repeat,#16191e}
.price{padding-bottom:100px;background:radial-gradient(900px 500px at 20% 80%,#2c323c 0%,var(--bg) 70%)}
/* Price: the questions first, then the cards, then the dated update line. */
.price-faq{margin:0 auto 56px}
#price-cards{scroll-margin-top:96px}
.price-update{max-width:860px;margin:28px auto 0;text-align:center;font-size:15px;color:var(--muted)}
/* Game windows: the build-it bar sits right under the game, so it shows while the game plays. */
#media-dialog[open][data-mode=game]{display:flex;flex-direction:column}
#media-dialog[data-mode=game]>*{flex-shrink:0}
#media-dialog[data-mode=game] #dialog-game-wrap{display:contents}
#media-dialog[data-mode=game] .dialog-header{order:0}
#media-dialog[data-mode=game] .game-loading-bar{order:1}
#media-dialog[data-mode=game] #game-iframe{order:2;flex-shrink:0}
#media-dialog[data-mode=game] .dialog-footer{order:3;border-top:1px solid var(--line)}
#media-dialog[data-mode=game] .game-help{order:4}
.dialog-footer .dialog-price{color:var(--soft);font-weight:500}
@media (max-width:1100px){.price-faq{margin-bottom:44px}}
@media (max-width:700px){
 .wide-only{display:none}
 .narrow-only{display:inline}
 .game-tile[data-game=pitch-shot]{order:-2}
 .game-tile[data-game=chess]{order:-1}
 .build-more{order:3;padding:0 12px;font-size:15px}
 .world-band{height:clamp(150px,40vw,240px);background-image:linear-gradient(180deg,#1b1f25 0%,rgba(27,31,37,0) 30%,rgba(22,25,30,0) 70%,#16191e 100%),url(assets/home/v14/world-river-960.webp);background-size:auto,max(100%,640px) auto}
 .price{padding-bottom:76px;background:radial-gradient(900px 500px at 20% 80%,#2c323c 0%,var(--bg) 70%)}
 .price-faq{margin-bottom:36px}
 .price-update{font-size:14px;text-align:left}
 #media-dialog[data-mode=game] #game-iframe{height:50dvh}
}

/* v16 (review/v16/build_v16.py): the second persuasion report's page changes. */
/* 3. Section rhythm: plain gaps between sections of about 60 px; sections with art keep their room for it. */
.section{padding:32px 0}
.world:last-child{margin-bottom:0}
.make{padding-bottom:clamp(200px,22vw,330px)}
.world-band{background:linear-gradient(180deg,#16191e 0%,rgba(22,25,30,0) 30%,rgba(27,31,37,0) 70%,#1b1f25 100%),url(assets/home/v14/world-river.webp) center/max(100%,1100px) auto no-repeat,#16191e}
.price{padding-bottom:40px}
#price-cards{scroll-margin-top:12px}
/* 10. The header is solid from the start, and a dark wash sits behind the headline column, so game text never shows through. */
.site-header{background:rgba(19,22,26,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
@media (min-width:701px){.hero-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(13,15,19,.86) 0%,rgba(13,15,19,.62) 36%,rgba(13,15,19,0) 60%)}}
.reel-index li{font-size:14px;color:var(--soft)}
/* 24. The hero film (with the poster as its own poster) sits under the poster picture from the start, so the poster and
   the film count as one element for loading speed; the picture fades away once the film plays. */
.hero-stage video{opacity:1;z-index:0}
.hero-stage img{z-index:1;transition:opacity .9s ease}
.hero-stage[data-live=true] img{opacity:0}
.hero-stage::before,.hero-stage::after{z-index:2}
/* 26. No zoom on scroll, no pulsing dot, shorter scroll-in fades, a readable river tag, steadier heading sizes. */
.hero-stage img,.hero-stage video{transform:none}
.reel-dot{animation:none!important}
.reveal-ready [data-reveal]{transition-duration:.3s;transition-delay:0s!important}
.reveal-ready [data-reveal]:not(.is-in){transform:translateY(12px)}
.side-wrong,.river-film[data-side=wrong] .side-right{opacity:1;background:rgba(22,25,30,.86);color:#aeb4bd}
.side-wrong::before,.river-film[data-side=wrong] .side-right::before{background:#5d6470}
.river-film[data-side=wrong] .side-wrong{background:rgba(250,246,232,.92);color:#252a33}
.river-film[data-side=wrong] .side-wrong::before{background:radial-gradient(circle at 35% 35%,#f7dc95,#a87d2a)}
.build-aside h2{font-size:clamp(36px,4.4vw,60px)}
.world-copy h3{font-size:clamp(28px,2.8vw,40px)}
/* 8, 21. Make rows: a link to learn each one, and a caption under the Logic picture. */
.pair-learn{width:fit-content;margin-top:2px;font-size:14px}
.pane-caption{display:block;margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted);text-align:left}
.link-button{padding:0;border:0;background:none;font:inherit;font-weight:600;cursor:pointer}
/* 4, 6. Share it or sell it: the closing line sits under the copy on wide screens and after the proof on phones. */
.publish-grid{grid-template-areas:"copy side" "close side"}
.publish-copy{grid-area:copy}
.publish-side{grid-area:side}
.publish-close{grid-area:close;color:var(--soft);font-size:16px;margin:0}
@media (min-width:1101px){.publish-grid{row-gap:14px;align-items:start}.publish-side{align-self:center}}
@media (max-width:1100px){.publish-grid{grid-template-areas:"copy" "side" "close"}}
/* 14, 18. Price: the full card's ticks read in the main text colour; the risk line sits under the cards. */
.offer .checks li{color:var(--text)}
.offer .checks svg{color:var(--gold)}
.price-risk{max-width:860px;margin:30px auto 0;text-align:center;font-size:17px;color:var(--soft)}
.price-risk+.price-update{margin-top:10px}
/* 2. The game window: the free demo is a filled button; Close game fits on the first screen. */
.dialog-footer .button.dialog-buy{color:#fff;min-height:40px;padding:8px 16px;font-size:14px}
@media (min-width:701px){#media-dialog[data-mode=game] #game-iframe{height:calc(62dvh - 76px)}}
/* 3. The price cards fit a short laptop screen. */
@media (min-width:861px) and (max-height:800px){
 .offer{padding:26px 32px}
 .offer .price-big{font-size:60px}
 .offer-price{margin:6px 0 8px}
 .offer .lead{font-size:16px;margin-bottom:12px}
 .offer-body{margin-bottom:16px}
 .offer .checks{gap:7px;margin-bottom:0}
 .offer .checks li{font-size:15px}
 .offer .button-large{min-height:52px;padding:12px 24px;font-size:17px}
}
@media (max-width:700px){
 .section{padding:28px 0}
 .make{padding-bottom:200px}
 .price{padding-bottom:36px}
 .world-band{background-image:linear-gradient(180deg,#16191e 0%,rgba(22,25,30,0) 30%,rgba(27,31,37,0) 70%,#1b1f25 100%),url(assets/home/v14/world-river-960.webp)}
 /* 3. The full card fits one phone screen, with Buy on one line. */
 .offer .price-big{font-size:50px}
 .offer-price{margin:6px 0 6px}
 .offer .lead{font-size:16px;margin-bottom:12px}
 .offer-body{margin-bottom:16px}
 .offer .checks{gap:7px;margin-bottom:0}
 .offer .checks li{font-size:15px;gap:10px}
 .offer .button-large{min-height:52px;padding:12px 14px;font-size:16px;white-space:nowrap}
 .offer-notes .price-note{margin-top:10px;font-size:13px}
 .price-risk{font-size:15px;text-align:left}
 /* 8. The Logic pair stacks at full width, so its blocks can be read; the picture pairs stay side by side. */
 .pair-logic{grid-template-columns:1fr;gap:10px}
 .pair-logic .pair-copy{grid-column:auto}
 .pair-logic .pair-arrow{transform:rotate(90deg);height:16px}
 .pane .pane-play{min-height:34px;padding:5px 11px;font-size:12px}
 .pane-caption{font-size:13px}
}

/* v17 (review/v17/build_v17.py): the third research round. Group A. */
/* A8. No orphans or split hyphenations at the decision points. */
h1,h2,h3,.offer-name,.faq summary{text-wrap:balance}
p,li,.lead,.tile-choice,.pane-caption{text-wrap:pretty}
.nowrap{white-space:nowrap}
.hero-terms .narrow-only{color:inherit}
.price-update{max-width:35em;margin-inline:auto}
@media (max-width:700px){.build-stage{align-items:stretch}}
/* A14. Price cards: one empty area in the demo card, a calmer price, plain names. */
.offer-demo .offer-gap{display:none}
.offer-demo .offer-body{grid-row:3/span 2;align-self:start}
.offer>.button{grid-row:5}
.offer-notes{grid-row:6}
.offer .checks{gap:10px}
.offer .price-big{font-size:clamp(50px,5vw,72px);letter-spacing:-.022em}
.offer .price-once{font-size:28px;font-weight:600;font-style:normal;color:var(--soft)}
.offer-name{font-size:20px;font-weight:600;line-height:1.2;color:var(--text)}
/* A15. One rhythm (section gaps larger than breaks inside them), fewer type sizes, one button set. */
.section{padding:40px 0}
.price{padding-bottom:40px}
.section-head h2,.publish-copy h2,.build-aside h2{margin-top:0}
.section-head{margin-bottom:40px}
.pairs{margin-top:56px}
.world{margin-bottom:64px}
.world:last-child{margin-bottom:0}
@media (max-width:700px){.section{padding:32px 0}.price{padding-bottom:32px}.pairs{margin-top:40px}.world{margin-bottom:48px}}
h1,h2{letter-spacing:-.022em} h3{letter-spacing:-.018em}
.game-tile h3,.pair-title{font-size:clamp(22px,2vw,28px)}
.pair-title{font-weight:700;line-height:1.2;margin:0}
.hero-lead,.section-head>p:last-child,.build-lead,.offer .lead,.publish-copy .lead{font-size:clamp(17px,1.4vw,20px)}
.hero-lead,.publish-copy .lead{color:var(--text)}
#site-nav a{font-weight:500}
.button{font-weight:600}
.tile-input,.side-tag,.hero-terms,.pane-caption,.price-note{font-size:14px}
@media (max-width:700px){.pane .pane-play{font-size:14px;min-height:36px}}
.button-large{min-height:56px;padding:0 28px;font-size:17px}
.header-buy,.button.small{min-height:44px;padding:0 18px;font-size:15px}
@media (max-width:700px){.header-buy{padding:0 14px;font-size:14px}}   /* the phone header keeps room for the menu button */
@media (max-width:700px),(max-height:760px){.button-large{min-height:52px}}
.button.secondary{background:#21262e;border:1px solid rgba(215,218,224,.24)}
.film .button.secondary,.film-zoom,.pane .pane-play{background:rgba(17,20,24,.80);backdrop-filter:blur(8px)}
.text-link{font-weight:600;text-decoration-thickness:1px;text-underline-offset:4px}
.offer{border-radius:16px} .build-steps li,.formats li{border-radius:8px}
.faq summary{font-size:16px;min-height:56px}
.faq summary::after{color:var(--soft);content:"+" / ""}
.live-caption{border-left-color:var(--line-2)}
.build-steps li.is-done span{border-color:var(--soft);color:var(--soft)}
.hero-bar{border-top:0}
.world-copy p .link-button{display:inline;min-height:0;padding-block:10px;margin-block:-10px}
.pair-logic{align-items:start}
.pair-logic .pair-copy,.pair-logic .pair-arrow{align-self:center}
.build-steps li{padding-inline:0}
.build-steps li.is-on{padding-inline:12px;margin-inline:-12px}
.worlds .section-head.center{text-align:left;margin-inline:0}
.tile-body{padding:20px 24px 24px}
.tile-choice{min-height:calc(2*1.55em)}
@media (max-width:700px){.game-wall{align-items:flex-start}}
.pane-stack{display:flex;flex-direction:column}
.pane-stack .pane-caption{margin:10px 0 0}
/* A16. The meadow art fades into the next section; the export still is shown at full strength. */
.make{background:linear-gradient(180deg,rgba(27,31,37,0) calc(100% - 96px),#1b1f25 100%),url(assets/home/v14/world-meadow.webp) center bottom/max(100%,1100px) auto no-repeat,var(--bg-2)}
@media (max-width:700px){.make{background-image:linear-gradient(180deg,rgba(27,31,37,0) calc(100% - 64px),#1b1f25 100%),url(assets/home/v14/world-meadow-960.webp);background-size:auto,max(100%,640px) auto}}
.worlds{background:radial-gradient(1200px 600px at 50% 160px,#282e38 0%,var(--bg) 70%)}
.export-play img{filter:none}
/* A19. The hidden game names stay inside their tiles (the phone wall scrolls sideways). */
.game-tile{position:relative}
/* A19. Focus on the game while it has the keys. */
#dialog-game-wrap.frame-focus #game-iframe{outline:3px solid var(--gold);outline-offset:-3px}
/* A20. The film index is a caption, not tabs; the nav marks the section in view. */
.reel-index li{border-top:0;padding-top:0}
#site-nav a[aria-current]{color:var(--text);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px}

/* B1 (proposal). The questions sit under the cards. */
.price-faq{margin:40px auto 0}
@media (max-width:700px){.price-faq{margin-top:32px}}
.price-faq+.price-update{margin-top:28px}
.price-risk{margin-top:24px}

/* B2 (proposal). Made with Myth Engine after the price; the art band closes the page. */
.price{padding-bottom:40px}

/* B3 (proposal). The hero's publishing note links to the cards. */
.hero-terms a{color:inherit;text-decoration:underline;text-decoration-color:rgba(201,205,211,.45);text-decoration-thickness:1px;text-underline-offset:3px}

/* B4 (proposal). No ember dividers, button glows or drop shadows. */
main>.section::before,main>.section::after,.myth-footer::before,.myth-footer::after{content:none}
.button,.button-large{box-shadow:none}
.build-film,.world-film,.publish-film,.offer-full{box-shadow:none}
.offer-demo{box-shadow:0 0 0 1px rgba(232,192,106,.25)}

/* B7 (proposal). Less upscaling of the hero film on wide screens. */
@media (min-width:861px){.hero{min-height:min(100svh,56.25vw,940px)}}

/* v18 (review/v18/build_v18.py): the twelve-lens rubric's roadmap. */
/* 2.3. The price block: five shared rows (name, price, plain line, list, button); one small-print row under both cards. */
.offer-grid{grid-template-rows:repeat(5,auto)}
.offer{grid-row:span 5}
.offer-plain{grid-row:3;margin:0 0 14px;font-size:16px;color:var(--soft)}
.offer .offer-body{grid-row:4;margin-bottom:24px}
.offer-demo .offer-body{grid-row:3/span 2;align-self:start}
.offer>.button{grid-row:5}
.offer .lead{margin-bottom:12px}
.offer-limit{margin-top:14px}
.price-small{max-width:1000px;margin:20px auto 0;text-align:center}
.faq details p .text-link{display:inline;min-height:0}
.price-small .price-note{margin:0;font-size:14px;color:var(--muted)}
.price-small .price-links{justify-content:center;gap:0 24px;margin-top:2px}
.price-answers{max-width:760px;margin:12px auto 0;display:grid;gap:6px;text-align:center;color:var(--soft);font-size:16px}
.price-answers p{margin:0}
.price-answers .text-link{min-height:0;font-size:16px}
.price-risk{max-width:760px;margin:18px auto 0;text-align:center;color:var(--text)}
@media (max-width:700px){
 .price-small,.price-answers,.price-risk{text-align:left}
 .price-small .price-links{justify-content:flex-start}
 .price-small .price-note{font-size:14px}
 .offer .offer-body{margin-bottom:18px}
}
@media (min-width:861px) and (max-height:800px){.offer-plain{margin-bottom:8px;font-size:15px}.offer .offer-body{margin-bottom:16px}}
/* 2.5. On phones the six games sit in a two-column grid of compact tiles, not a sideways row. */
.tile-body{flex:1;display:flex;flex-direction:column}
@media (max-width:700px){
 .game-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-inline:0;padding:0;overflow:visible}
 .game-tile{flex:none}
 .tile-body{padding:12px 12px 14px}
 .tile-body h3{font-size:20px;margin:2px 0 0}
 .tile-kind{font-size:14px;line-height:1.4}
 .tile-choice{display:none}
 .tile-actions{flex-direction:column;align-items:stretch;gap:4px;margin-top:10px}
 .tile-actions .button{width:100%;padding:0 10px;font-size:14px}
 .tile-actions .text-link{font-size:14px;min-height:40px}
 .tile-input{display:none}
 .tile-actions .button{white-space:nowrap;gap:6px;padding:0 8px}
 .hero-bar{flex-wrap:wrap;row-gap:0}
 .reel-now,.motion-controls button{white-space:nowrap}
}
/* 3.7. A 14 px floor for small text on phones; more room between the hero and Play on wide screens. */
@media (max-width:700px){
 .hero-terms,.reel-now,.motion-controls button,.film-zoom,.pane-caption,.price-note,.offer-notes .price-note,.pane .pane-play{font-size:14px}
}
@media (min-width:701px){.play.section{padding-top:80px}}
/* 2.2. Make: two compact panes that open their films; each pane's words sit under it. */
.make-panes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:56px;list-style:none;padding:0}
.make-pane{display:flex;flex-direction:column;gap:16px}
.make-pane .pane{aspect-ratio:4/3}
.make-pane .pane-stack .pane-caption{margin:10px 0 0}
.make-pane .pair-copy{gap:6px}
@media (max-width:700px){.make-panes{gap:14px;margin-top:32px}.make-pane{gap:10px}.make-pane .pair-copy span{font-size:15px}.make-pane .pair-title{font-size:20px}.make{padding-bottom:160px}}
/* "Share it or sell it" ends with its formats and the exported game. */
.publish-grid{grid-template-areas:"copy side"}
@media (max-width:1100px){.publish-grid{grid-template-areas:"copy" "side"}}
/* 3.4. At 1024 px and wider the film sits in a 16:9 frame on the right, with no dark wash; its index sits under it. */
@media (min-width:1024px){
 .hero{display:grid;grid-template-columns:minmax(0,1fr) min(52vw,760px);grid-template-rows:auto auto;column-gap:clamp(32px,4vw,64px);align-items:center;align-content:center;
  width:min(var(--shell),calc(100% - 64px));margin-inline:auto;min-height:0;padding:132px 0 8px;overflow:visible;isolation:auto}
 .hero>.shell{width:auto;margin:0}
 .hero .hero-inner{grid-column:1;grid-row:1/span 2;display:block;z-index:auto}
 .hero-copy{max-width:560px;padding:0}
 .hero h1{font-size:clamp(52px,5vw,80px);text-shadow:none}
 .hero-stage{position:relative;inset:auto;grid-column:2;grid-row:1;z-index:0;aspect-ratio:16/9;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:#101317}
 .hero-stage::before,.hero-stage::after{content:none}
 .hero .hero-bar{grid-column:2;grid-row:2;padding:14px 0 0;z-index:auto}
 .reel-index{display:none}
 .reel-now{display:flex}
 .hero-terms a{white-space:nowrap}
}
/* In the frame, the film's editor window (which has a dark border around it) fills the frame until the film zooms into
   the game. Phones play their own close-up cut of the film, so they keep it as it is. */
@media (min-width:1024px){
 .hero-stage video{transform-origin:79.5% 50.4%;transition:transform 1s ease-in-out}
 .hero-stage[data-cut=editor] video{transform:scale(1.51);transition:none}
}
/* 4.5. Red only on the demo and Buy buttons: Play and the export label take the dark secondary style. */
.tile-actions .button,.export-play-label{background:#21262e;border:1px solid rgba(215,218,224,.24);color:var(--text);box-shadow:none}
.tile-actions .button:hover,.export-play:hover .export-play-label{background:#282d37}
.export-play-label{background:rgba(17,20,24,.85)}