/* MediaShoot shared design system. Tokens first, then components. Pages should only add page-specific layout. */
:root[data-theme=light]{color-scheme:light;
--bg:#e6edf8;--fg:#0f1b33;--muted:#44536f;--line:#c3d2ea;--card:#f3f6fc;--pill:#f3f6fc;--tint:#d9e5f8;
--accent:#2563eb;--accent2:#1d4ed8;--ok:#0f9d6a;--onaccent:#fff;
--grad:linear-gradient(135deg,#4f46e5 0%,#0284c7 100%);--grad-hover:linear-gradient(135deg,#4338ca 0%,#0369a1 100%);
--glow:rgba(37,99,235,.26);--shadow:0 6px 24px rgba(37,99,235,.10);
--hero1:#d3dffa;--hero2:#c9e4f4;--herotxt:#1e3a8a;--herop:#3b4a6b;
--page-bg:radial-gradient(60rem 32rem at 12% -8%,rgba(96,165,250,.28),transparent 60%),radial-gradient(50rem 30rem at 95% 0%,rgba(56,189,248,.18),transparent 60%),radial-gradient(45rem 28rem at 50% 105%,rgba(129,140,248,.18),transparent 60%)}
:root[data-theme=dark]{color-scheme:dark;
--bg:#0a1020;--fg:#eef4ff;--muted:#a9b6d3;--line:#223056;--card:#131c36;--pill:#131c36;--tint:#1a2650;
--accent:#8ab4ff;--accent2:#b5d0ff;--ok:#4ade9d;--onaccent:#fff;
--grad:linear-gradient(135deg,#4f46e5 0%,#0284c7 100%);--grad-hover:linear-gradient(135deg,#6366f1 0%,#0ea5e9 100%);
--glow:rgba(59,130,246,.40);--shadow:0 6px 24px rgba(0,0,0,.35);
--hero1:#1b2670;--hero2:#0c3a5e;--herotxt:#eef4ff;--herop:#c3d0ea;
--page-bg:radial-gradient(60rem 32rem at 12% -8%,rgba(59,130,246,.35),transparent 60%),radial-gradient(50rem 30rem at 95% 0%,rgba(14,165,233,.22),transparent 60%),radial-gradient(45rem 28rem at 50% 105%,rgba(99,102,241,.16),transparent 60%)}

body{background-color:var(--bg);background-image:var(--page-bg);background-repeat:no-repeat;background-attachment:fixed;color:var(--fg);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
h1,h2{letter-spacing:-.02em}
nav{border-bottom-color:var(--line)}
nav a:hover{color:var(--accent2)}
.brand{color:var(--fg)}
.beta{color:var(--accent);border-color:var(--accent);background:var(--tint)}
footer{border-top-color:var(--line)}

/* hero */
.hero{background:linear-gradient(135deg,var(--hero1) 0%,var(--hero2) 100%);border:1px solid var(--line);box-shadow:0 20px 60px var(--glow)}
.hero h1{padding-bottom:.15em;margin-bottom:.4rem;line-height:1.15;background:linear-gradient(90deg,var(--herotxt),#0284c7);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme=dark] .hero h1{background:linear-gradient(90deg,#fff,#7dd3fc);-webkit-background-clip:text;background-clip:text}

/* buttons */
.cta{background:var(--pill);color:var(--accent);border:1.5px solid var(--accent);transition:transform .15s,box-shadow .15s,background .15s}
.cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px var(--glow)}
.cta.primary{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 18px var(--glow)}
.cta.primary:hover{background:var(--grad-hover);border-color:transparent}
.cta.big{box-shadow:0 10px 30px var(--glow)}
:root[data-theme=dark] .cta.big{box-shadow:0 10px 30px var(--glow)}

/* cards and boxes */
.card,.toc,.sym,.status,.callout,.trust,.need{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.card{transition:transform .15s,border-color .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 30px var(--glow)}
:root[data-theme=dark] .card{box-shadow:var(--shadow)}
.card h3{color:var(--accent)}
.betabox .meta li{background:var(--pill);border-color:var(--line)}
.pill{background:var(--tint);color:var(--accent);border-color:var(--line)}
.tip{border-left-color:var(--accent)}

.theme{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:2px 12px;font:inherit;font-weight:600;cursor:pointer}
.theme:hover{border-color:var(--accent)}

/* compact hero */
.hero{padding:22px 24px 18px;margin-top:10px}
.hero h1{font-size:2.5rem}
.hero>p{font-size:1.05rem;margin:0 auto .5rem;max-width:620px}
.hero .flow{max-width:420px;margin:.4rem auto}
.hero .chips{margin:.6rem 0 0}.hero .chips li{font-size:.95rem;padding:.35rem .9rem}
.hero+h2{margin-top:1.4rem;margin-bottom:.3rem}.hero+h2+p{margin:.2rem 0 .8rem;font-size:1rem}
/* get-the-apps panel: phones row on top, computers row below, identical tiles */
.getpanel{display:grid;gap:14px;margin:.5rem 0;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 18px 50px var(--glow)}
.getcol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.getcol h3{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:0;font-size:1.05rem}
.getcol h3 i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;font-style:normal;font-size:.85rem;font-weight:800}
.get{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"i t q" "i c q" "b b b";gap:2px 14px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:14px 16px;text-decoration:none;color:var(--fg);transition:transform .15s,border-color .15s,box-shadow .15s}
.get:not(.hasqr){grid-template-areas:"i t t" "i c c" "b b b"}
.get:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 30px var(--glow)}
.gi{grid-area:i;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--grad);color:#fff;box-shadow:0 6px 16px var(--glow)}
.gi svg{width:30px;height:30px}
.gt{grid-area:t;display:flex;flex-direction:column;min-width:0;align-self:end}.gt b{font-size:1.2rem}.gt span{color:var(--muted);font-size:.9rem}
.get .chip{grid-area:c;justify-self:start;align-self:start;margin-top:2px}
.gb{grid-area:b;margin-top:10px;text-align:center;background:var(--grad);color:#fff;font-weight:700;border-radius:10px;padding:.55rem 1rem;box-shadow:0 4px 12px var(--glow)}
.get:hover .gb{background:var(--grad-hover)}
.qr{grid-area:q;grid-row:1/3;display:flex;flex-direction:column;align-items:center;gap:3px}
.qr img{display:block;width:76px;height:76px;border-radius:10px;background:#fff;padding:3px;box-shadow:0 4px 14px var(--glow)}
.qr small{color:var(--muted);font-size:.64rem;text-align:center;max-width:80px;line-height:1.15}
@media (max-width:640px){.getcol{grid-template-columns:1fr}.qr{display:none}.get.hasqr{grid-template-areas:"i t t" "i c c" "b b b"}.hero h1{font-size:2rem}}
.chip{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.chip.ok{color:var(--ok)}
.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:1.25rem 0 0;padding:0}
.chips li{background:var(--pill);border:1.5px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;font-size:1.05rem;font-weight:700;color:var(--fg)}
.chips li:first-child:before{content:"\2713\a0";color:var(--ok);font-weight:800}