/* Home extras shared by all five looks: Watch (video of the week), Our story, News, Say hello.
   Each look wraps them in its own section style and passes --mx-* variables (same ones as the mystery box). */

.xs h2{font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:1;margin:0 0 12px}
.xs .xs-lead{max-width:58ch;font-weight:600;font-size:1.08rem;margin:0 0 4px}
.xs h3{margin:0;font:800 1.2rem/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-transform:none;letter-spacing:0;text-shadow:none;-webkit-text-stroke:0;color:#16161d}
.xs-card{background:#fff;color:#16161d;padding:22px;box-shadow:0 14px 22px -10px rgba(22,22,29,.42);border-radius:var(--mx-radius,0)}
.xs-card p{margin:0 0 12px;font-weight:500;line-height:1.55}
.xs-card p:last-child{margin-bottom:0}
.xs-pill{display:inline-block;padding:10px 15px;background:#16161d;color:#fff;font:800 .9rem/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-decoration:none;border-radius:var(--mx-radius,0);transition:translate .12s}
.xs-pill:hover{translate:0 -2px}
.xs-pill.alt{background:#fff;color:#16161d;box-shadow:inset 0 0 0 2px #16161d}
.xs-pill:focus-visible,.xs-vid:focus-visible,.xs-play:focus-visible,.xs-form button:focus-visible{outline:3px solid #2747ff;outline-offset:3px}
.xs-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* Watch */
.xs-video{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:26px;margin-top:30px;align-items:start}
.xs-player{background:#fff;color:#16161d;padding:10px;box-shadow:0 18px 30px -14px rgba(22,22,29,.5);border-radius:var(--mx-radius,0)}
.xs-screen{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden;border-radius:calc(var(--mx-radius,0px) * .6)}
.xs-screen img{display:block;width:100%;height:100%;object-fit:cover}
.xs-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.xs-play{position:absolute;inset:0;margin:auto;width:92px;height:92px;border-radius:50%;border:0;background:var(--mx-accent,#ffe14a);box-shadow:0 0 0 6px #fff,0 14px 26px rgba(0,0,0,.45);cursor:pointer;display:grid;place-items:center;transition:transform .2s}
.xs-play::before{content:"";border-left:28px solid #16161d;border-top:17px solid transparent;border-bottom:17px solid transparent;margin-left:7px}
.xs-play:hover{transform:scale(1.08)}
.xs-cap{padding:16px 8px 8px}
.xs-badge{display:inline-block;background:var(--mx-accent,#ffe14a);color:#16161d;font:800 .8rem/1 system-ui,sans-serif;padding:6px 10px;margin-bottom:10px;border-radius:var(--mx-radius,0)}
.xs-cap p{margin:6px 0 0;font:500 .98rem/1.5 system-ui,sans-serif}
.xs-list{display:grid;gap:12px}
.xs-vid{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:center;width:100%;background:#fff;color:#16161d;padding:8px;border:0;text-align:left;cursor:pointer;font:inherit;box-shadow:0 10px 16px -10px rgba(22,22,29,.45);border-radius:var(--mx-radius,0);transition:translate .12s}
.xs-vid:hover{translate:-3px 0}
.xs-vid img{display:block;width:118px;aspect-ratio:16/9;object-fit:cover}
.xs-vid b{display:block;font:800 .98rem/1.2 system-ui,sans-serif}
.xs-vid small{display:block;font:600 .82rem/1.3 system-ui,sans-serif;color:#4a4a55;margin-top:3px}
.xs-vid[aria-pressed=true]{box-shadow:0 0 0 3px #16161d,0 10px 16px -10px rgba(22,22,29,.45)}

/* Our story */
.xs-about{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:26px;margin-top:28px;align-items:start}
.xs-collab{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.xs-story{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.xs-story li{background:#fff;color:#16161d;padding:18px;box-shadow:0 12px 20px -12px rgba(22,22,29,.45);border-radius:var(--mx-radius,0);font-weight:500;line-height:1.5}
.xs-story li b{display:block;font:var(--mx-weight,400) 2.3rem/1 var(--mx-display,Anton,Impact,sans-serif);margin-bottom:8px;box-shadow:inset 0 -.32em 0 var(--mx-accent,#ffe14a);width:max-content}

/* News */
.xs-news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.xs-news article{display:flex;flex-direction:column;gap:8px}
.xs-news small{font:700 .85rem system-ui,sans-serif;color:#4a4a55}
.xs-tag{align-self:flex-start;margin-top:auto;font:800 .78rem/1 system-ui,sans-serif;padding:6px 10px;background:var(--mx-accent,#ffe14a);border-radius:var(--mx-radius,0)}
.xs-pixie{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;background:#16161d;color:#fff}
.xs-pixie h3{color:#fff;font-size:1.5rem}
.xs-pixie p{color:#f2f2f6}
.xs-pixie .xs-pill{background:var(--mx-accent,#ffe14a);color:#16161d}

/* Say hello */
.xs-hello{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:26px;margin-top:28px;align-items:start}
.xs-form{display:grid;gap:14px}
.xs-form label{display:block;font:800 .92rem system-ui,sans-serif;margin-bottom:6px}
.xs-form input[type=text],.xs-form input[type=email],.xs-form select,.xs-form textarea{width:100%;padding:11px;border:2px solid #16161d;border-radius:calc(var(--mx-radius,0px) * .5);font:500 1rem system-ui,sans-serif;color:#16161d;background:#fff}
.xs-form textarea{min-height:120px}
.xs-form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.xs-check{display:flex;gap:10px;align-items:flex-start;font:600 .9rem/1.4 system-ui,sans-serif}
.xs-check input{margin-top:3px;width:18px;height:18px;flex:none}
.xs-fine{font:500 .82rem/1.45 system-ui,sans-serif;color:#4a4a55;margin:0}
.xs-form button{justify-self:start;padding:12px 20px;border:0;background:#16161d;color:#fff;font:800 1rem system-ui,sans-serif;cursor:pointer;border-radius:var(--mx-radius,0)}
.xs-form button[disabled]{opacity:.6;cursor:progress}
.xs-msg{font:800 .95rem system-ui,sans-serif;margin:0}
.xs-msg.ok{color:#11603f}.xs-msg.err{color:#a3122a}
.xs-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.xs-socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

@media (max-width:900px){
  .xs-video,.xs-about,.xs-hello{grid-template-columns:1fr}
  .xs-news{grid-template-columns:1fr}
  .xs-pixie{grid-template-columns:1fr}
  .xs-form .two{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.xs *{transition:none!important;animation:none!important}}