/* Mobile layout: keep content in flow; do not hide page overflow to mask sizing errors. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
main,section,article,.hero-copy,.exp,.signup>*,.article-layout>*,.flap-intro{min-width:0}
input,textarea,select{font-size:16px}
button,a,summary{touch-action:manipulation}
.mobile-nav{display:none}
@media(max-width:1000px){
  .nav,.blog-nav{position:relative;z-index:5;display:flex;flex-wrap:nowrap;gap:16px;min-height:82px;padding-block:18px}
  .nav .links,.blog-nav>nav,.mobile-blog{display:none}
  .nav>.button,.blog-nav>.button{margin-left:auto}
  .mobile-nav{display:block;position:static;margin:0 0 0 auto;padding:0;border:0;order:4;color:#F8F9FF}
  .mobile-nav>summary{display:flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:11px 16px;border:1px solid #655775;border-radius:10px;background:#22222B;font:600 14px/1.4 BG,Arial,sans-serif;list-style:none;cursor:pointer}
  .mobile-nav>summary::-webkit-details-marker{display:none}
  .mobile-nav>summary:after{position:static;content:'+';font-size:20px;line-height:1;color:#F0F12F}
  .mobile-nav[open]>summary:after{content:'−'}
  .mobile-nav>nav{display:grid;position:absolute;top:calc(100% + 8px);left:0;right:0;margin:0;padding:12px;background:#22222B;border:1px solid #655775;border-radius:14px;box-shadow:0 18px 42px #0008;max-height:calc(100vh - 140px);max-height:calc(100svh - 140px);overflow-y:auto}
  .mobile-nav>nav>a{display:flex;align-items:center;min-height:48px;padding:12px 16px;border-radius:8px;color:#F8F9FF;font:500 16px/1.5 BG,Arial,sans-serif}
  .mobile-nav>nav>a:hover,.mobile-nav>nav>a:focus-visible{background:#34303f;color:#F0F12F}
  .mobile-nav>nav>a:last-child{background:#F0F12F;color:#16161C;font-weight:650;margin-top:6px}
  .hero.hero-v2{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:44px}
  .hero-v2 .hero-copy{max-width:700px}
  .hero-v2 h1{font-size:clamp(2.5rem,8.2vw,4.6rem);letter-spacing:-.05em;line-height:1.04}
  .hero-v2 h1 .headline-accent{white-space:normal}
  .reveal-art{width:100%;max-width:470px;height:440px;margin-inline:auto}
  .hero-kicker{flex-wrap:wrap;gap:10px 16px;font-size:12px;letter-spacing:.65px}
  .coming-pill{font-size:11px}
  .hero-note{font-size:13px;color:#bfbcca}
  .hero-signoff{font-size:15px}
  .exp-grid{grid-template-columns:minmax(0,1fr)}
  .exp h3{font-size:28px}
  .exp p{max-width:720px}
  .exp .learn-more{min-height:44px;align-items:center}
  .signup{grid-template-columns:minmax(0,1fr);gap:25px;padding:32px}
  .signup h2{font-size:clamp(2rem,5.8vw,2.9rem)}
  .options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .option{min-width:0;min-height:56px;font-size:15px;line-height:1.45;gap:10px;padding:14px}
  .circle{flex-shrink:0}
  .flap-section{grid-template-columns:minmax(0,1fr);gap:20px}
  .flap-game{grid-column:1;min-width:0}
  .flap-after{grid-column:1}
  .seo-blog-grid{grid-template-columns:minmax(0,1fr)}
  .seo-blog-card h3{max-width:none}
  .seo-blog-heading{flex-wrap:wrap}
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .article-card h3{max-width:none}
  .blog-hero{grid-template-columns:minmax(0,1fr);gap:30px}
  .article-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  .toc{position:static;padding:22px;background:#22222B;border:1px solid #44414E;border-radius:12px}
  .toc li{margin-bottom:0}
  .toc a{display:block;padding-block:11px}
  .toc h2{margin-bottom:6px}
  .breadcrumbs a,.footer-links a,.footer-top nav a{display:inline-flex;align-items:center;min-height:44px}
  .footer-links,.footer-top nav{flex-wrap:wrap;gap:8px 24px}
  .byline{font-size:13px}
}
@media(max-width:600px){
  .wrap{width:calc(100% - 40px)}
  .nav,.blog-nav{min-height:78px;gap:12px;padding-block:16px}
  .nav>.button,.blog-nav>.button{display:none}
  .brand-wording{font-size:30px;letter-spacing:-1.5px}
  .preview-bar{font-size:12px;line-height:1.5;padding:8px 16px}
  .hero.hero-v2{padding:34px 0 40px;gap:24px}
  .hero-v2 h1{font-size:clamp(2.5rem,12.2vw,4.125rem);margin:24px 0;line-height:1.03}
  .hero-v2 .hero-intro{font-size:18px;line-height:1.6}
  .hero-v2 .actions{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:26px}
  .hero-v2 .actions>.button{min-height:52px;padding:15px 18px;font-size:16px;white-space:normal;gap:18px}
  .hero-signoff{font-size:14px;line-height:1.5}
  .reveal-art{height:410px;max-width:410px}
  .eyebrow{font-size:12px;line-height:1.6;letter-spacing:.8px}
  .section{padding-block:48px}
  .marquee{font-size:12px;padding:18px 20px;line-height:1.9;word-spacing:3px}
  .exp{padding:22px}
  .exp-top>span:last-child{font-size:12px}
  .exp h3{font-size:27px}
  .micro,.selection{font-size:14px;line-height:1.6}
  .story-copy{font-size:18px;line-height:1.65;column-count:1}
  .lead,.flap-intro .lead{font-size:18px;line-height:1.6}
  .flap-edition{display:block;margin:5px 0 0;font-size:12px;letter-spacing:.5px}
  .flap-instructions{font-size:14px}
  .flap-after{flex-direction:column;align-items:stretch;font-size:15px;text-align:center}
  .flap-after>.button{width:100%;min-height:52px;font-size:16px}
  .flap-game{border-radius:14px}
  .option{font-size:14px}
  .community{padding-block:42px}
  .community>div>button{min-height:52px;font-size:16px}
  .faq summary{min-height:44px;font-size:18px;line-height:1.5;padding-right:32px}
  .faq details{padding-block:20px}
  .faq details p{font-size:17px;line-height:1.65}
  .signup{padding:24px;gap:22px;border-radius:18px}
  .signup input[type=email],textarea{font-size:16px;min-height:54px}
  .consent{font-size:14px;line-height:1.5;gap:12px;align-items:flex-start}
  .consent input{width:20px;height:20px;flex-shrink:0}
  form button{font-size:16px;min-height:52px}
  label{font-size:14px}
  dialog{width:calc(100% - 32px);max-width:520px;max-height:calc(100vh - 32px);max-height:calc(100svh - 32px);overflow-y:auto;padding:24px;border-radius:18px}
  dialog .close{width:46px;height:46px;min-height:46px}
  dialog h2{font-size:30px;line-height:1.15}
  dialog p{font-size:16px}
  .seo-blog-heading>.button{min-height:48px;font-size:16px}
  .seo-blog-card{padding:24px}
  .seo-blog-card .eyebrow{font-size:12px}
  .seo-blog-card p,.article-card p{font-size:16px}
  .seo-blog-card .read-link,.article-card .read-link{font-size:15px;min-height:44px}
  .footer-bottom{font-size:13px;line-height:1.6;flex-direction:column;gap:12px}
  .footer-links{font-size:15px}
  .blog-hero{padding:38px 0 42px}
  .blog-hero h1{font-size:clamp(3.1rem,15vw,4rem);letter-spacing:-.05em}
  .blog-intro,.article-deck{font-size:18px}
  .hero-note{font-size:14px;line-height:1.6}
  .feature{padding:24px;min-height:350px}
  .feature h2{font-size:clamp(2.4rem,11vw,3rem)}
  .feature .tag,.status,.card-meta .tag{font-size:12px;letter-spacing:.6px}
  .feature p{font-size:17px}
  .card-meta{font-size:13px;flex-wrap:wrap}
  .section-heading{align-items:flex-start;flex-wrap:wrap;gap:12px}
  .section-heading>span{font-size:13px}
  .article-header{padding-top:30px}
  .article-header h1{font-size:clamp(2.125rem,10vw,2.65rem);letter-spacing:-.04em;overflow-wrap:break-word}
  .prose{font-size:18px}
  .prose h2{font-size:28px}
  .prose li{padding-left:0}
  .toc li{font-size:15px}
  .breadcrumbs{font-size:13px;line-height:1.5}
  .byline{line-height:1.6;gap:9px 18px}
  .blog-footer{font-size:15px}
}
@media(max-width:360px){
  .wrap{width:calc(100% - 32px)}
  .hero-v2 h1{font-size:2.5rem}
  .options{grid-template-columns:minmax(0,1fr)}
  .reveal-art{height:370px}
  .card-stage{transform:scale(.90);transform-origin:50% 45%;inset:20px -8px 18px}
  .art-topline,.art-baseline{letter-spacing:.45px}
  .signup{padding:20px}
  .feature{padding:22px}
  .feature-top{flex-wrap:wrap}
  .hero-kicker>span:last-child{font-size:11px}
  .footer-top strong{line-height:1.5}
}
@media(hover:none){.button:hover,.seo-blog-card:hover,.article-card:hover{transform:none}}