:root { --ms-navy:#0b1220; --ms-panel:#121c33; --ms-cream:#f1f5f9; --ms-blue:#94a3b8; --ms-line:#26365a; --ms-amber:#38bdf8; --ms-amber-soft:#7dd3fc; }
.ms-site { background:var(--ms-navy); color:var(--ms-cream); overflow:hidden; }
.ms-site main { overflow-x:hidden; background:radial-gradient(circle at 76% 12%,rgba(34,69,103,.32),transparent 28%),var(--ms-navy); }
.ms-grid { position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.23; background-image:linear-gradient(rgba(157,172,191,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(157,172,191,.07) 1px,transparent 1px); background-size:56px 56px; }
.ms-header { background:rgba(11,18,32,.88); border-color:rgba(157,172,191,.14); box-shadow:none; }
.ms-header .brand-mark,.ms-footer .footer-mark { background:url("/games/modulo-squares/assets/app-icon-512.png") center/cover no-repeat; color:transparent; font-size:0; }
.ms-header .brand-text { font-size:.82rem; letter-spacing:.22em; }.ms-header .brand-text b { color:var(--ms-amber); }
.ms-header .main-nav a { color:var(--ms-blue); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.ms-site .section { width:min(calc(100% - 2rem),1180px); }
.ms-hero { min-height:calc(100vh - var(--header-height)); display:grid; grid-template-columns:1fr .82fr; align-items:center; gap:4rem; padding-block:3rem; }
.signal-label { display:flex; align-items:center; gap:.7rem; margin:0 0 1.2rem; color:var(--ms-amber); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.signal-label span { width:2.5rem; height:1px; background:var(--ms-amber); box-shadow:0 0 8px var(--ms-amber); }
.ms-wordmark { width:min(620px,100%); margin:0 0 1.4rem; }
.ms-hero h1,.ms-site h2 { font-family:"Space Grotesk",sans-serif; color:var(--ms-cream); letter-spacing:-.045em; }
.ms-hero h1 { max-width:none; margin-bottom:1rem; font-size:clamp(2.6rem,5vw,5.3rem); font-weight:600; }
.ms-lede { max-width:590px; color:var(--ms-blue); font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.7; }
.ms-button { display:inline-flex; align-items:center; justify-content:space-between; gap:1.4rem; min-height:3.5rem; padding:.85rem 1.1rem; border:1px solid var(--ms-amber); border-radius:4px; background:var(--ms-amber); color:#0b1220; font-weight:700; text-decoration:none; box-shadow:0 0 28px rgba(56,189,248,.18); }
.ms-button:hover { background:var(--ms-amber-soft); }.ms-text-link { align-self:center; color:var(--ms-cream); font-weight:600; text-underline-offset:5px; }
.availability { margin-top:1.2rem; color:#71839a; font-size:.78rem; letter-spacing:.04em; }
.ms-device-stage { min-height:650px; position:relative; display:grid; place-items:center; }.radar { position:absolute; inset:5% -15%; display:grid; place-items:center; }
.radar i { position:absolute; width:28%; aspect-ratio:1; border:1px solid rgba(69,103,139,.32); border-radius:50%; }.radar i:nth-child(2){width:48%}.radar i:nth-child(3){width:68%}.radar i:nth-child(4){width:88%}
.phone { margin:0; overflow:hidden; border:1px solid #435873; border-radius:32px; background:#0a1020; box-shadow:0 30px 80px rgba(0,0,0,.45); }.phone img { width:100%; height:auto; }
.phone-main { width:min(320px,75vw); position:relative; z-index:2; transform:rotate(2deg); }
.transmission-chip { position:absolute; z-index:3; padding:.75rem .9rem; border:1px solid #344a66; border-radius:3px; background:rgba(9,25,42,.92); box-shadow:0 12px 30px rgba(0,0,0,.32); }
.transmission-chip small { display:block; color:#71839a; font-size:.58rem; letter-spacing:.16em; }.transmission-chip strong { color:var(--ms-cream); font-size:.82rem; letter-spacing:.08em; }
.chip-one { left:0; top:25%; }.chip-two { right:0; bottom:22%; }.chip-two strong { color:var(--ms-amber); }
.mission-strip { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--ms-line); background:rgba(18,28,51,.78); padding-inline:max(1rem,calc((100% - 1180px)/2)); }
.mission-strip>div { display:flex; gap:1rem; padding:1.6rem; border-right:1px solid var(--ms-line); }.mission-strip>div:first-child{border-left:1px solid var(--ms-line)}
.mission-strip span { color:var(--ms-amber); font-size:.72rem; font-weight:700; }.mission-strip p { margin:0; color:var(--ms-blue); font-size:.88rem; }.mission-strip b { display:block; margin-bottom:.25rem; color:var(--ms-cream); }
.ms-story { display:grid; grid-template-columns:.85fr 1.15fr; gap:5rem; align-items:start; }.ms-site h2 { max-width:none; font-size:clamp(2.35rem,4.5vw,4.6rem); font-weight:600; }
.story-copy>p:not(.signal-label),.campaign-copy>p:not(.signal-label),.ms-cta>p:not(.signal-label) { color:var(--ms-blue); line-height:1.75; }.operation-list { border-top:1px solid var(--ms-line); }
.operation-list article { display:grid; grid-template-columns:2.5rem 1fr auto; gap:1.2rem; align-items:center; padding:1.5rem 0; border-bottom:1px solid var(--ms-line); }
.operation-list article>b { color:var(--ms-amber); font-size:.72rem; }.operation-list h3 { margin:0 0 .3rem; color:var(--ms-cream); }.operation-list p { margin:0; color:var(--ms-blue); font-size:.92rem; }
.operation-symbol { color:var(--ms-amber); font-size:2rem; font-weight:700; }.bit-row { color:var(--ms-amber); font:600 .72rem ui-monospace,SFMono-Regular,monospace; letter-spacing:.16em; }
.campaign-section { display:grid; grid-template-columns:1.15fr .85fr; gap:6rem; align-items:center; border-top:1px solid var(--ms-line); }.campaign-visual { min-height:600px; position:relative; }
.phone-secondary,.phone-tertiary { position:absolute; width:min(285px,55vw); }.phone-secondary{right:10%;top:0;z-index:2}.phone-tertiary{left:8%;top:14%;transform:rotate(-5deg);opacity:.56}
.campaign-copy ul { list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--ms-line); }
.campaign-copy li { padding:1rem .5rem; color:var(--ms-blue); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }.campaign-copy li+li{border-left:1px solid var(--ms-line)}.campaign-copy li span{display:block;color:var(--ms-amber);font-size:1.9rem;font-weight:700}
.ms-cta { position:relative; display:grid; justify-items:center; text-align:center; padding-block:7rem; border-top:1px solid var(--ms-line); overflow:hidden; }.ms-cta>img{position:absolute;width:380px;opacity:.08;top:50%;transform:translateY(-50%)}.ms-cta>*:not(img){position:relative}.ms-cta h2{margin-bottom:.5rem}.ms-cta .signal-label{justify-content:center}.ms-cta .ms-button{margin-top:1.5rem}
.ms-footer { background:#060a14; border-top:1px solid var(--ms-line); }.ms-footer a,.ms-footer p{color:var(--ms-blue)}
.field-hero { padding-top:5rem; padding-bottom:2rem; }.field-hero h1{max-width:14ch}.field-hero .ms-lede{max-width:760px}.field-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding-top:1rem}.field-card{padding:1.4rem;border:1px solid var(--ms-line);background:var(--ms-panel)}.field-card>b{color:var(--ms-amber);font-size:.72rem}.field-card h2{font-size:1.7rem;margin:.7rem 0}.field-card p{color:var(--ms-blue)}.register-demo{display:grid;grid-template-columns:repeat(8,1fr);gap:.35rem;margin:1.2rem 0}.register-demo span{display:grid;place-items:center;aspect-ratio:1;border:1px solid #536b88;border-radius:5px;color:var(--ms-cream);font-family:monospace}.register-demo .on{background:var(--ms-amber);border-color:var(--ms-amber);color:var(--ms-navy)}.guide-note{margin-top:1rem;padding:1rem;border-left:3px solid var(--ms-amber);background:rgba(56,189,248,.07);color:var(--ms-blue)}
.subpage-hero { min-height:620px; display:grid; grid-template-columns:1fr .65fr; gap:5rem; align-items:center; }.subpage-hero h1{max-width:12ch}.subpage-phone{width:min(300px,75vw);justify-self:center}.operation-deep-dive{display:grid;gap:1rem;padding-top:1rem}.operation-deep-dive article{display:grid;grid-template-columns:.8fr 1.15fr .85fr;gap:2rem;align-items:center;padding:1.6rem;border-block:1px solid var(--ms-line);background:linear-gradient(90deg,rgba(18,28,51,.8),rgba(18,28,51,.25))}.operation-deep-dive header>b{color:var(--ms-amber);font-size:.72rem;letter-spacing:.12em}.operation-deep-dive h2{margin:.5rem 0 0;font-size:2rem}.operation-deep-dive p{margin:0;color:var(--ms-blue)}.operation-glyph{padding:1.25rem;border:1px solid var(--ms-line);color:var(--ms-cream);font:600 clamp(.78rem,1.6vw,1.05rem) ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em;text-align:center}.operation-glyph span{color:var(--ms-amber);padding-inline:.5rem}
.legal-shell .legal-page{padding-top:4.5rem;padding-bottom:5rem}.legal-shell .legal-page .eyebrow{display:flex;align-items:center;gap:.7rem;color:var(--ms-amber);letter-spacing:.18em}.legal-shell .legal-page .eyebrow::before{content:"";width:2.5rem;height:1px;background:var(--ms-amber);box-shadow:0 0 8px var(--ms-amber)}.legal-shell .legal-page h1{color:var(--ms-cream);font-family:"Space Grotesk",sans-serif;font-size:clamp(2.7rem,5vw,4.8rem);letter-spacing:-.045em}.legal-shell .legal-page h2{margin-top:2.5rem;color:var(--ms-cream);font-size:1.5rem;letter-spacing:-.02em}.legal-shell .legal-page h3{margin-top:1.5rem;color:var(--ms-cream);font-size:1.05rem}.legal-shell .legal-page p,.legal-shell .legal-page li{color:var(--ms-blue)}.legal-shell .legal-page a{color:var(--ms-amber)}.legal-shell .legal-page>p:first-of-type{color:var(--ms-amber)}.legal-shell .btn-ghost{border-color:var(--ms-amber);background:transparent;color:var(--ms-amber)}.ms-footer [aria-current="page"]{color:var(--ms-amber)}.future-social{min-width:1px}
@media(max-width:850px){.ms-hero,.ms-story,.campaign-section,.subpage-hero{grid-template-columns:1fr}.ms-hero{gap:1rem}.ms-device-stage{min-height:560px}.mission-strip{grid-template-columns:1fr}.mission-strip>div{border-left:1px solid var(--ms-line)}.campaign-section{gap:2rem}.campaign-visual{order:2}.field-guide{grid-template-columns:1fr}.operation-deep-dive article{grid-template-columns:1fr}.main-nav{display:none}.menu-toggle{display:block}}
@media(max-width:520px){:root{--footer-height:148px}.ms-site .section{width:min(calc(100% - 1.25rem),1180px)}.ms-hero{padding-top:1.4rem}.ms-device-stage{min-height:500px}.phone-main{width:260px}.operation-list article{grid-template-columns:2rem 1fr}.operation-list article>span{grid-column:2}.campaign-copy ul{grid-template-columns:1fr}.campaign-copy li+li{border-left:0;border-top:1px solid var(--ms-line)}.campaign-visual{min-height:520px}.phone-secondary,.phone-tertiary{width:230px}.ms-footer .footer-utility{display:flex;gap:.35rem 1rem}.ms-footer .footer-top{gap:.4rem}.ms-footer .footer-bottom{margin-top:.4rem;padding-top:.4rem}}

/* Modulo Squares consent console */
.ms-site .cookie-consent{width:min(640px,calc(100% - 2rem));padding:1rem 1.1rem 1rem 1.25rem;background:linear-gradient(135deg,rgba(18,28,51,.98),rgba(6,10,20,.99));border:1px solid rgba(157,172,191,.34);border-left:3px solid var(--ms-amber);border-radius:4px;box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 28px rgba(56,189,248,.09);backdrop-filter:blur(16px)}.ms-site .cookie-consent p{color:var(--ms-blue);font-family:"Space Grotesk",sans-serif;line-height:1.55}.ms-site .cookie-consent p::before{content:"SIGNAL // ";color:var(--ms-amber);font:700 .68rem ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em}.ms-site .cookie-consent a{color:var(--ms-amber);font-weight:700;text-underline-offset:4px}.ms-site .cookie-consent-actions{gap:.55rem}.ms-site .cookie-consent-actions .btn{border-radius:3px;font-family:"Space Grotesk",sans-serif;font-size:.82rem;letter-spacing:.05em}.ms-site #cookie-decline{background:transparent;border:1px solid var(--ms-line);color:var(--ms-cream);box-shadow:none}.ms-site #cookie-decline:hover{background:var(--ms-panel);border-color:var(--ms-blue)}.ms-site #cookie-accept{background:var(--ms-amber);border:1px solid var(--ms-amber);color:var(--ms-navy);box-shadow:0 0 22px rgba(56,189,248,.16)}.ms-site #cookie-accept:hover{background:var(--ms-amber-soft);border-color:var(--ms-amber-soft)}
@media(max-width:640px){.ms-site .cookie-consent{gap:.85rem;padding:1rem}.ms-site .cookie-consent-actions{display:grid;grid-template-columns:1fr 1fr}.ms-site .cookie-consent-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

/* Modulo Squares additions */
.ms-site .accent-indigo{color:#818cf8}
.drop-demo{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin:1.2rem 0;text-align:center}.drop-demo span{padding:.7rem 0;border:1px solid #536b88;border-radius:6px;color:var(--ms-cream);font-weight:700}.drop-demo .hit{background:#10b981;border-color:#10b981;color:#06251b}.drop-demo .dead{background:#3b1219;border-color:#7f1d1d;color:#fca5a5}.drop-demo .fall{grid-column:1/-1;background:#4f46e5;border-color:#6366f1;font-size:1.5rem}
.prose-page{width:min(calc(100% - 2rem),760px);margin-inline:auto;padding-block:4rem 5rem}.prose-page h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(2.2rem,4.6vw,3.6rem);letter-spacing:-.04em;color:var(--ms-cream);margin:.4rem 0 1.2rem}.prose-page h2{font-size:1.6rem;margin:2.6rem 0 .8rem;max-width:none}.prose-page p,.prose-page li{color:var(--ms-blue);line-height:1.75}.prose-page .lede{font-size:1.2rem;color:var(--ms-cream)}.prose-page code{padding:.1rem .4rem;border-radius:4px;background:var(--ms-panel);color:var(--ms-amber-soft)}
.prose-page pre{padding:1.1rem 1.2rem;border:1px solid var(--ms-line);border-radius:6px;background:var(--ms-panel);color:var(--ms-cream);overflow-x:auto}
.prose-page .tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.2rem 0}.prose-page .tile-grid article{padding:1.1rem;border:1px solid var(--ms-line);background:var(--ms-panel)}.prose-page .tile-grid h3{margin:0 0 .4rem;color:var(--ms-cream);font-size:1.05rem}.prose-page .tile-grid p{margin:.2rem 0;font-size:.92rem}
.prose-page .callout{margin:1.4rem 0;padding:1rem 1.2rem;border-left:3px solid var(--ms-amber);background:rgba(56,189,248,.07)}.prose-page .callout h3{margin:0 0 .3rem;color:var(--ms-cream)}.prose-page .callout p{margin:.2rem 0}
.prose-page .lessons{border-left:3px solid #6366f1;padding-left:1.2rem;margin:1.4rem 0}.prose-page .lessons h3{margin:0 0 .3rem;color:var(--ms-cream)}
@media(max-width:600px){.prose-page .tile-grid{grid-template-columns:1fr}}
.ms-site .field-hero h1{font-family:"Space Grotesk",sans-serif;letter-spacing:-.045em;color:var(--ms-cream);font-weight:600}