/* ═══════════════════════════════════════════════════════════════════════════
   home.css - the marketing home, restyled the way apple.com ships a product
   page. Loaded LAST (after theme.css) so it settles the cascade over
   styles.css and the v11/v12 skin without !important.

   Scope: everything here targets the marketing shell only - the .mk-* classes
   on the hero and the home sections, plus the global chrome (wordmark,
   footer). The in-app tool screens keep their dark Stacked-style skin
   untouched.

   The home is LOCKED LIGHT on purpose: apple.com does not follow your OS
   theme on marketing pages, and the theme toggle keeps working for the tools.
   Two sections (the problem statement, Sage, the founder note) are near-black
   full-bleed - Apple's alternation - which is also the bridge into the dark
   product screens.

   Tokens:
   - page #ffffff, band #f5f5f7 (Apple's two page greys)
   - ink #1d1d1f, ink2 #6e6e73 on light; #f5f5f7 / #86868b on dark
   - the brand purple carries: #6a3fff on white, #9b72e8 on black
   - type: system SF stack. Headlines semibold, tight, text-wrap:balance.
   - motion: one gesture - sections fade + rise 16px on entry, 600ms,
     one-shot, killed entirely under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --mk-font:-apple-system,"SF Pro Display",BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mk-page:#ffffff;
  --mk-band:#f5f5f7;
  --mk-ink:#1d1d1f;
  --mk-ink2:#6e6e73;
  --mk-hair:rgba(0,0,0,.09);
  --mk-acc:#6a3fff;            /* brand purple, tuned for white */
  --mk-acc-dark:#9b72e8;       /* brand purple, tuned for black */
  --mk-sec-pad:clamp(84px,11vw,150px);
  --mk-ease:cubic-bezier(.16,1,.3,1);
}

/* ── global chrome: the wordmark goes Apple ─────────────────────────────────
   v12.css sets the wordmark to Archivo 800 with positive tracking; the Apple
   read is the body face at semibold with tight tracking - a product name set
   in the system voice, not a logotype. Wins here because home.css loads last. */
html.v12 .tm-wordmark{
  font-family:var(--mk-font);
  font-weight:600;
  font-size:17px;
  letter-spacing:-.015em;
}

/* ═══ THE HERO ═══════════════════════════════════════════════════════════════
   White, centred, typography first: eyebrow, one huge headline, one sub-line,
   the league-description field (the product's real front door - it stays
   functional), two Apple CTAs, then the war-room screenshot large in a soft
   frame. Overrides the .hero rules from styles.css / v11 / v12: same
   element, entirely new composition. */
html.v12 .hero, .hero{
  display:block;
  min-height:0;
  background:var(--mk-page);
  padding:clamp(52px,7vw,96px) 22px 0;
  overflow:visible;
}
/* v11.css re-pins the hero to the theme token under [data-theme="light"] with
   a heavier selector; the marketing home is locked to its own white in both
   themes, so match that specificity. */
html.v11[data-theme="light"] .hero, html.v12[data-theme="light"] .hero{background:var(--mk-page)}
.mk-hero-inner{
  max-width:920px;
  margin:0 auto;
  text-align:center;
  font-family:var(--mk-font);
  color:var(--mk-ink);
  -webkit-font-smoothing:antialiased;
}

.mk-eyebrow{
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--mk-acc);
  margin-bottom:14px;
}

/* The headline is the star: SF at display size, semibold, tight, balanced.
   Re-declared with the skin prefix because v12.css pins .hero h1 sizes. */
html.v12 .hero h1, .hero h1, .mk-h1{
  font-family:var(--mk-font);
  font-size:clamp(40px,6.4vw,74px);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.03em;
  color:var(--mk-ink);
  text-wrap:balance;
  margin:0 0 18px;
}
html.v12 .hero h1 .hl, .hero h1 .hl{color:var(--mk-acc)}

.mk-sub{
  font-size:clamp(18px,2.2vw,22px);
  line-height:1.45;
  letter-spacing:-.014em;
  color:var(--mk-ink2);
  max-width:34em;
  margin:0 auto;
  text-wrap:balance;
}

/* the league-description field: the app's real entry point, styled as one
   clean rounded input instead of a form block. display:block overrides the
   legacy .hero-cta flex row from styles.css (same element, later file). */
.mk-hero-cta{display:block;margin-top:34px}
.mk-field-label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--mk-ink2);
  margin-bottom:10px;
}
#hero-mock-ctx.mk-hero-field{
  width:100%;
  max-width:560px;
  box-sizing:border-box;
  resize:none;
  background:var(--mk-band);
  border:1px solid transparent;
  border-radius:18px;
  padding:14px 18px;
  font-family:var(--mk-font);
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.012em;
  color:var(--mk-ink);
  transition:border-color .2s var(--mk-ease),background .2s var(--mk-ease);
}
#hero-mock-ctx.mk-hero-field::placeholder{color:#a1a1a6}
#hero-mock-ctx.mk-hero-field:focus{
  outline:none;
  background:#fff;
  border-color:var(--mk-acc);
  box-shadow:0 0 0 4px rgba(106,63,255,.12);
}

/* ── the two Apple CTAs: one filled pill, one text link with a chevron ────── */
.mk-cta-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
  margin-top:20px;
}
.mk-btn{
  display:inline-block;
  background:var(--mk-acc);
  color:#fff;
  font-family:var(--mk-font);
  font-size:17px;
  font-weight:500;
  letter-spacing:-.014em;
  padding:13px 28px;
  border-radius:980px;
  border:none;
  cursor:pointer;
  text-decoration:none;
  transition:transform .2s var(--mk-ease),box-shadow .25s var(--mk-ease),filter .2s var(--mk-ease);
}
.mk-btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 8px 24px rgba(106,63,255,.28)}
.mk-btn:active{transform:none;box-shadow:none}
.mk-btnlink{
  font-family:var(--mk-font);
  font-size:17px;
  font-weight:400;
  letter-spacing:-.014em;
  color:var(--mk-acc);
  text-decoration:none;
  cursor:pointer;
}
.mk-btnlink::after{content:" ›";font-weight:400}
.mk-btnlink:hover{text-decoration:underline}

.mk-fine{
  font-size:12.5px;
  color:#86868b;
  margin:18px 0 0;
  line-height:1.6;
}
.mk-fine a{color:var(--mk-ink2);text-decoration:underline;text-underline-offset:2px}

/* ── the product shot: large, rounded, floating on a soft shadow ──────────── */
.mk-hero-shot{
  max-width:1180px;
  margin:clamp(44px,6vw,72px) auto 0;
  padding:0 0 clamp(64px,8vw,110px);
}
.mk-hero-shot img{
  display:block;
  width:100%;
  height:auto;
  border-radius:clamp(12px,1.8vw,22px);
  box-shadow:0 30px 90px -20px rgba(29,29,31,.4),0 8px 28px -12px rgba(29,29,31,.25);
}

/* ═══ SECTIONS ═══════════════════════════════════════════════════════════════
   One message per full-bleed section. .mk-sec is white, .mk-band is the grey
   step, .mk-dark is Apple's near-black. */
.mk-sec{
  font-family:var(--mk-font);
  background:var(--mk-page);
  color:var(--mk-ink);
  padding:var(--mk-sec-pad) 22px;
  -webkit-font-smoothing:antialiased;
}
.mk-band{background:var(--mk-band)}
.mk-dark{background:#000;color:#f5f5f7}

.mk-wrap{max-width:1040px;margin:0 auto}
.mk-wrap-narrow{max-width:640px;margin:0 auto}
.mk-center{text-align:center}

.mk-eyebrow-acc{
  font-size:14px;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--mk-acc);
  margin-bottom:14px;
}
.mk-dark .mk-eyebrow-acc{color:var(--mk-acc-dark)}

/* the skin prefix is needed: v12.css pins h2 to Archivo 700 at html.v12 h2
   specificity, which outranks a bare class */
html.v11 .mk-h2, html.v12 .mk-h2, .mk-h2{
  font-family:var(--mk-font);
  font-size:clamp(34px,4.8vw,60px);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.028em;
  text-wrap:balance;
  margin:0 0 18px;
  color:inherit;
}
.mk-h2-dim{color:#86868b}
.mk-sec .mk-sub{color:var(--mk-ink2)}
.mk-dark .mk-sub{color:#a1a1a6}

/* ── the problem statement (dark): short lines, big air ───────────────────── */
.mk-lines{
  max-width:32em;
  margin:30px auto 0;
  font-size:clamp(17px,2.1vw,21px);
  line-height:1.5;
  letter-spacing:-.014em;
  color:#a1a1a6;
}
.mk-lines p{margin:0 0 14px}
.mk-lines-strong{color:#f5f5f7;font-weight:600}
.mk-lines .hl2{color:var(--mk-acc-dark);font-weight:600}

/* ── how it works: four numbered columns over hairline rules ──────────────── */
.mk-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:44px 40px;
  margin-top:clamp(40px,5vw,64px);
}
.mk-step{border-top:1px solid var(--mk-hair);padding-top:20px}
.mk-step-num{
  font-size:14px;
  font-weight:600;
  color:var(--mk-acc);
  font-variant-numeric:tabular-nums;
}
.mk-step h3{
  font-family:var(--mk-font);
  font-size:19px;
  font-weight:600;
  letter-spacing:-.018em;
  margin:10px 0 6px;
  color:var(--mk-ink);
}
.mk-step p{
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--mk-ink2);
  margin:0;
}

/* ── Sage (dark): face, chat exchange, three reasons ───────────────────────── */
.mk-sage-face{display:flex;justify-content:center;margin-bottom:22px}

.mk-chat{
  max-width:560px;
  margin:36px auto 0;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.mk-chat-q,.mk-chat-a{
  font-size:15.5px;
  line-height:1.55;
  letter-spacing:-.012em;
  padding:13px 17px;
  border-radius:20px;
}
.mk-chat-q{
  align-self:flex-end;
  max-width:78%;
  background:var(--mk-acc-dark);
  color:#fff;
  border-bottom-right-radius:6px;
}
.mk-chat-a{
  align-self:flex-start;
  max-width:88%;
  background:#1d1d1f;
  border:1px solid rgba(255,255,255,.09);
  color:#d5d5da;
  border-bottom-left-radius:6px;
}
.mk-chat-tag{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mk-acc-dark);
  margin-bottom:5px;
}

.mk-trio{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:36px 40px;
  max-width:880px;
  margin:clamp(44px,6vw,64px) auto 0;
  text-align:left;
}
.mk-trio h3{
  font-family:var(--mk-font);
  font-size:19px;
  font-weight:600;
  letter-spacing:-.018em;
  color:#f5f5f7;
  margin:0 0 6px;
}
.mk-trio p{
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.01em;
  color:#86868b;
  margin:0;
}
.mk-dark .mk-btn{background:var(--mk-acc-dark)}
.mk-dark .mk-btn:hover{box-shadow:0 8px 24px rgba(155,114,232,.3)}
.mk-dark .mk-btnlink{color:var(--mk-acc-dark)}
.mk-center-row{margin-top:clamp(40px,5vw,56px)}

/* ── the war room: three feature cards with CSS micro-mocks ────────────────── */
.mk-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  margin-top:clamp(40px,5vw,60px);
}
.mk-card{
  background:#fff;
  border-radius:22px;
  padding:26px 26px 24px;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
  text-align:left;
}
.mk-card h3{
  font-family:var(--mk-font);
  font-size:19px;
  font-weight:600;
  letter-spacing:-.018em;
  color:var(--mk-ink);
  margin:0 0 6px;
}
.mk-card > p{
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--mk-ink2);
  margin:0 0 20px;
}

/* micro-mocks: tiny dark product excerpts inside the light cards - real UI
   vocabulary (position edges, on-the-clock, tier line), no fake data heavy
   enough to mislead */
.mk-mock{
  background:#0c0c0e;
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:150px;
  justify-content:center;
}
.mk-mock-row2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mk-chip{
  background:#1c1c20;
  border-left:3px solid var(--pos,#555);
  border-radius:8px;
  padding:7px 9px;
  min-width:0;
}
.mk-chip b{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:-.01em;
  color:#f5f5f7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mk-chip span{
  display:block;
  font-size:9px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--pos,#9a9aa5);
  margin-top:2px;
}
.mk-chip-you{outline:1px solid rgba(155,114,232,.5);outline-offset:-1px}
.mk-clockcell{
  border:1px dashed rgba(155,114,232,.6);
  border-radius:10px;
  padding:16px 12px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mk-acc-dark);
}
.mk-clockhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  font-weight:600;
  color:#9a9aa5;
  padding:0 2px;
}
.mk-clockhead b{color:#f5f5f7;font-variant-numeric:tabular-nums}
.mk-tierline{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f87171;
  white-space:nowrap;
}
.mk-tierline::before,.mk-tierline::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,#9b72e8,#67e8f9);
  opacity:.55;
}

/* ── league connect: platform badges ───────────────────────────────────────── */
.mk-plats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:clamp(34px,4vw,48px) 0 26px;
}
.mk-plat{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--mk-band);
  border-radius:980px;
  padding:11px 20px;
  font-size:15px;
  font-weight:500;
  letter-spacing:-.012em;
  color:var(--mk-ink);
}
.mk-plat img{display:block;border-radius:6px}
.mk-plat-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:20px;
  min-width:20px;
  border-radius:5px;
  padding:0 5px;
  font-size:9px;
  font-weight:800;
  color:#fff;
}

/* ── founder note (dark, editorial) ────────────────────────────────────────── */
.mk-founder p{
  font-size:17px;
  line-height:1.65;
  letter-spacing:-.012em;
  color:#a1a1a6;
  margin:0 0 20px;
}
.mk-founder .mk-founder-lead{font-size:clamp(20px,2.6vw,25px);line-height:1.5;color:#f5f5f7;letter-spacing:-.02em}
.mk-founder .mk-founder-close{font-size:19px;font-weight:600;color:var(--mk-acc-dark)}
.mk-founder-sign{
  font-size:14px;
  color:#6e6e73;
  margin-top:26px;
}

/* ── footer: quiet, small, hairline - token-based so it holds on the dark
   tool pages too ─────────────────────────────────────────────────────────── */
footer{
  font-family:var(--mk-font);
  padding:44px 22px 40px;
  margin-top:0;
}
footer .tm-wordmark{font-size:15px}
.footer-sub{font-size:12px;letter-spacing:-.005em}
footer .nav-link{font-size:12px}
.footer-legal{font-size:11px;line-height:1.7}

/* ═══ MOTION: fade + 16px rise on section entry ══════════════════════════════
   One-shot, 600ms, the same spring the tools use. The hero shot adds a
   whisper of scale so the product appears to settle into place. */
.mk-reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--mk-ease),transform .6s var(--mk-ease);
}
.mk-hero-shot.mk-reveal{transform:translateY(24px) scale(.985)}
.mk-reveal.mk-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .mk-reveal{opacity:1;transform:none;transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART 2 - THE MENUS. Every dropdown, drawer and control strip goes Apple:
   thin frosted panels, SF type, hairline separators, quiet hover, one small
   accent mark for "selected" instead of filled purple blocks, and a single
   entry gesture (fade + 6px rise, 240ms, the same ease as the home).

   The chrome sits over BOTH worlds - the light marketing home and the dark
   tools - so every panel is declared twice: dark by default, light under
   [data-theme="light"]. Frosted backgrounds keep >=.88 alpha so legibility
   never depends on backdrop-filter support.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --mk-panel:rgba(24,24,27,.92);          /* dark frosted menu surface */
  --mk-panel-hair:rgba(255,255,255,.1);
  --mk-panel-hover:rgba(255,255,255,.06);
  --mk-panel-shadow:0 18px 50px -12px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.3);
}
[data-theme="light"]{
  --mk-panel:rgba(255,255,255,.93);
  --mk-panel-hair:rgba(0,0,0,.08);
  --mk-panel-hover:rgba(0,0,0,.05);
  --mk-panel-shadow:0 18px 50px -12px rgba(0,0,0,.22),0 4px 14px rgba(0,0,0,.08);
}

/* one entry gesture for every panel. The centred nav dropdown keeps its
   translateX in both frames so the animation never uncenters it. */
@keyframes mkMenuIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mkMenuInC{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes mkSheetIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes mkFadeIn{from{opacity:0}to{opacity:1}}

/* ── 1. the nav bar: Apple's thin frosted strip ─────────────────────────────
   v11 already gives it the blur; this quiets the links to SF at body weight
   and swaps the purple hover/active fills for a plain text-emphasis change -
   Apple's nav marks state with opacity, not chips. */
html.v11 .nav, html.v12 .nav{
  background:rgba(10,10,12,.8);
  border-bottom:1px solid rgba(255,255,255,.08);
}
html.v11[data-theme="light"] .nav, html.v12[data-theme="light"] .nav{
  background:rgba(251,251,253,.82);
  border-bottom:1px solid rgba(0,0,0,.08);
}
html.v11 .nav-item-btn, html.v12 .nav-item-btn{
  font-family:var(--mk-font);
  font-size:13px;
  font-weight:400;
  letter-spacing:-.008em;
  color:var(--muted2);
  opacity:.92;
}
html.v11 .nav-item-btn:not(.sage-hot):hover, html.v12 .nav-item-btn:not(.sage-hot):hover{
  background:transparent;
  color:var(--text);
  opacity:1;
}
html.v11 .nav-item-btn.active:not(.sage-hot), html.v12 .nav-item-btn.active:not(.sage-hot),
html.v11 .nav-item-btn.screen-nav.active:not(.sage-hot), html.v12 .nav-item-btn.screen-nav.active:not(.sage-hot){
  background:transparent;
  color:var(--text);
  font-weight:500;
}
/* Ask Sage: from a filled purple chip to a quiet hairline pill - the accent
   lives in the type, not the block */
html.v11 .nav-item-btn.sage-hot, html.v12 .nav-item-btn.sage-hot{
  background:transparent;
  border:1px solid var(--border2);
  color:var(--accent-bright);
  font-weight:500;
}
html.v11 .nav-item-btn.sage-hot:hover, html.v12 .nav-item-btn.sage-hot:hover,
html.v11 .nav-item-btn.sage-hot.active, html.v12 .nav-item-btn.sage-hot.active{
  background:var(--accent-dim);
  border-color:rgba(155,114,232,.5);
  color:var(--accent-bright);
}
/* Connect: the bar's one filled CTA, Apple-small */
html.v11 #nav-signin, html.v12 #nav-signin{
  background:var(--accent-bright);
  border:none;
  color:#fff;
  font-family:var(--mk-font);
  font-weight:500;
  padding:7px 16px;
}
html.v11 #nav-signin:hover, html.v12 #nav-signin:hover{
  background:var(--accent-bright);
  color:#fff;
  filter:brightness(1.08);
  transform:none;
}
/* utility icons: shed the outlined-chip look, hairline only on hover */
html.v11 .theme-toggle.icon, html.v12 .theme-toggle.icon{
  border-color:transparent;
  color:var(--muted2);
}
html.v11 .theme-toggle.icon:hover, html.v12 .theme-toggle.icon:hover{
  border-color:var(--border2);
  color:var(--text);
  transform:none;
  box-shadow:none;
}

/* ── 2+4. dropdown panels: nav, user account, alerts, search, autocomplete ──
   One panel language. #alerts-wrap needs restating because styles.css targets
   it by id, which outranks the class selectors. */
html.v11 .nav-dropdown, html.v12 .nav-dropdown,
html.v11 .user-dropdown, html.v12 .user-dropdown,
html.v11 .ac-dropdown, html.v12 .ac-dropdown,
#alerts-wrap .ac-dropdown{
  background:var(--mk-panel);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
  border:1px solid var(--mk-panel-hair);
  border-radius:14px;
  box-shadow:var(--mk-panel-shadow);
  padding:5px;
}
/* the entry gesture: display flips from none, so the animation replays on
   every open. The nav dropdown is centred by translateX and takes the
   centre-preserving variant. */
.nav-item:hover .nav-dropdown,.nav-item.open .nav-dropdown{animation:mkMenuInC .24s var(--mk-ease)}
.user-pill.open .user-dropdown,
.ac-dropdown.open,
#alerts-wrap.open .ac-dropdown{animation:mkMenuIn .24s var(--mk-ease)}

/* rows: SF, quiet hover, the accent reserved for the active mark */
html.v11 .nav-dd-item, html.v12 .nav-dd-item,
html.v11 .user-dd-item, html.v12 .user-dd-item{
  font-family:var(--mk-font);
  font-size:13px;
  font-weight:400;
  letter-spacing:-.008em;
  padding:9px 12px;
  border-radius:9px;
  color:var(--text);
}
html.v11 .nav-dd-item:hover, html.v12 .nav-dd-item:hover,
html.v11 .user-dd-item:hover, html.v12 .user-dd-item:hover{
  background:var(--mk-panel-hover);
  color:var(--text);
}
html.v11 .nav-dd-item.active, html.v12 .nav-dd-item.active{color:var(--accent-bright)}
html.v11 .user-dd-item.danger, html.v12 .user-dd-item.danger{color:var(--red)}
html.v11 .nav-dd-sep, html.v12 .nav-dd-sep{background:var(--mk-panel-hair);margin:5px 10px}
html.v11 .user-dd-header, html.v12 .user-dd-header{border-bottom:1px solid var(--mk-panel-hair);padding:9px 12px 8px}
html.v11 .user-dd-name, html.v12 .user-dd-name{font-family:var(--mk-font);font-weight:600;letter-spacing:-.01em}
/* the account pill itself: hairline, not a chip */
html.v11 .user-pill, html.v12 .user-pill{
  background:transparent;
  border:1px solid var(--border2);
  font-family:var(--mk-font);
}
html.v11 .user-pill:hover, html.v12 .user-pill:hover{border-color:var(--border2);color:var(--text);background:var(--mk-panel-hover)}

/* ── 3. search results: Spotlight rows ──────────────────────────────────────
   The list loses its purple outline and its row rules; separation comes from
   spacing and the hover wash, like a menu. Position badges keep their data
   colours - that is information, not decoration. */
html.v11 .ac-item, html.v12 .ac-item{
  font-family:var(--mk-font);
  border-bottom:none;
  border-radius:9px;
  padding:9px 11px;
}
html.v11 .ac-item:hover, html.v12 .ac-item:hover{background:var(--mk-panel-hover)}
html.v11 .ac-ktc, html.v12 .ac-ktc{color:var(--muted2)}

/* ── 5. the phone drawer: an Apple sheet ────────────────────────────────────
   Strong frost, big tap targets, hairline dividers between top-level rows,
   400ms slide with the house ease. The chevron rotation on expand already
   exists; the open group marks itself with accent text only. */
#mob-menu{
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
#mob-menu.open{animation:mkFadeIn .24s var(--mk-ease)}
.mob-menu-panel{
  width:min(320px,86vw);
  background:var(--mk-panel);
  -webkit-backdrop-filter:saturate(180%) blur(30px);
  backdrop-filter:saturate(180%) blur(30px);
  border-left:1px solid var(--mk-panel-hair);
  padding:16px 16px 26px;
  gap:0;
}
#mob-menu.open .mob-menu-panel{animation:mkSheetIn .32s var(--mk-ease)}
.mob-menu-head{margin-bottom:10px}
.mob-menu-head span{font-family:var(--mk-font)!important;font-weight:600!important;letter-spacing:-.01em}
.mob-menu-item{
  font-family:var(--mk-font);
  font-size:16px;
  font-weight:500;
  letter-spacing:-.014em;
  padding:14px 10px;
  min-height:48px;
  border-radius:0;
}
.mob-menu-item:active{background:var(--mk-panel-hover)}
.mob-menu-item.mob-sub{
  font-size:15px;
  font-weight:400;
  padding:11px 10px 11px 26px;
  min-height:42px;
  color:var(--muted2);
}
/* hairlines between top-level rows - the Apple settings list */
.mob-menu-panel > button.mob-menu-item:not(:first-of-type),
.mob-menu-panel > .mob-group{border-top:1px solid var(--mk-panel-hair)}
.mob-group.open .mob-menu-item.mob-parent{color:var(--accent-bright)}
.mob-chev{opacity:.4}

/* ── 6. mock section chips: an Apple segmented control ──────────────────────
   Quiet hairline pills; the selected one is a raised neutral chip carrying
   the accent in its label - no purple flood. theme.css sets .md-sec-btn.on
   with a compound selector, so these restate at skin specificity. */
html.v11 .md-sec-btn, html.v12 .md-sec-btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted2);
  font-family:var(--mk-font);
  font-size:13px;
  font-weight:500;
  letter-spacing:-.01em;
  padding:8px 16px;
}
html.v11 .md-sec-btn:hover, html.v12 .md-sec-btn:hover{
  border-color:var(--border2);
  color:var(--text);
  background:transparent;
  transform:none;
}
html.v11 .md-sec-btn.on, html.v12 .md-sec-btn.on{
  background:var(--surface3);
  border-color:transparent;
  color:var(--accent-bright);
  font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
[data-theme="light"] .md-sec-btn.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}

/* stillness is a feature */
@media (prefers-reduced-motion:reduce){
  .nav-item:hover .nav-dropdown,.nav-item.open .nav-dropdown,
  .user-pill.open .user-dropdown,.ac-dropdown.open,#alerts-wrap.open .ac-dropdown,
  #mob-menu.open,#mob-menu.open .mob-menu-panel{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART 3 - THE MOCK SETUP GOES LIGHT.

   The owner picked the white/hairline panel treatment for the mock menu, and
   the same light-into-dark bridge as the home: the SETUP is a light Apple
   sheet (white card, grey wells, clean selects, a real segmented control);
   the moment the draft starts, the same card returns to the dark Stacked
   board, which is not touched.

   Mechanism: setup and board share one .card, and mdShowSection() always
   writes #md-board's inline display. A :has() state selector flips the
   card's DESIGN TOKENS while the board is hidden, so every inline var() in
   the setup markup re-resolves to the light palette with no JS and no
   markup rewiring. Both attribute spellings are matched because the
   authored attribute has no space and the serialized one does.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* segmented control track/thumb - dark defaults for the board-on state */
  --mk-seg-track:rgba(255,255,255,.08);
  --mk-seg-on:#3a3a40;
  --mk-focus:rgba(155,114,232,.28);
}
[data-theme="light"]{
  --mk-seg-track:rgba(0,0,0,.06);
  --mk-seg-on:#ffffff;
  --mk-focus:rgba(106,63,255,.16);
}

/* ── the light region: token flip while the board is hidden ───────────────── */
#screen-mock .card:has(> #md-board[style*="display:none"]),
#screen-mock .card:has(> #md-board[style*="display: none"]){
  background:#ffffff;
  border-color:rgba(0,0,0,.09);
  color:#1d1d1f;
  --text:#1d1d1f;
  --muted:#6e6e73;
  --muted2:#494950;
  --surface:#ffffff;
  --surface2:#f5f5f7;      /* the wells: context box, config grid, fine-tune */
  --surface3:#e8e8ed;
  --border:rgba(0,0,0,.09);
  --border2:rgba(0,0,0,.16);
  --accent:#6a3fff;
  --accent-bright:#6a3fff;
  --accent-dim:rgba(106,63,255,.08);
  --green:#0a8f52;
  --red:#d92d3f;
  /* the inline headings reference --font-head; the setup speaks SF */
  --font-head:var(--mk-font);
  --mk-seg-track:rgba(0,0,0,.06);
  --mk-seg-on:#ffffff;
  --mk-focus:rgba(106,63,255,.16);
  font-family:var(--mk-font);
}

/* ── 1. the section chips: a real segmented control ─────────────────────────
   One recessed track, borderless segments, the selected one raised on a
   soft shadow - unmistakably Apple, in both the light setup and over the
   dark board (the chips row stays visible in both states). !important is
   needed only against the row's own inline display/gap. */
#screen-mock #md-sections{
  display:inline-flex!important;
  flex-wrap:wrap;
  gap:2px!important;
  padding:3px;
  background:var(--mk-seg-track);
  border-radius:11px;
  align-self:flex-start;
}
#screen-mock .md-sec-btn{
  background:transparent;
  border:none;
  border-radius:8px;
  padding:7px 16px;
  font-family:var(--mk-font);
  font-size:13px;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--muted2);
  box-shadow:none;
  transition:color .16s var(--mk-ease),background .16s var(--mk-ease);
}
#screen-mock .md-sec-btn:hover{
  background:transparent;
  border:none;
  color:var(--text);
  transform:none;
}
#screen-mock .md-sec-btn.on{
  background:var(--mk-seg-on);
  border:none;
  color:var(--text);
  font-weight:600;
  box-shadow:0 1px 4px rgba(0,0,0,.16),0 0 0 .5px rgba(0,0,0,.04);
}

/* ── 3. the selects: proper Apple popup buttons ─────────────────────────────
   Scoped to the setup containers only - the board bar keeps its own controls
   untouched. White field, hairline, custom chevron, accent focus ring. */
#md-setup .opp-select, #ld-card .opp-select{
  -webkit-appearance:none;
  appearance:none;
  background-color:var(--surface);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px;
  border:1px solid var(--border2);
  border-radius:10px;
  font-family:var(--mk-font);
  font-size:13.5px;
  letter-spacing:-.01em;
  color:var(--text);
  padding:9px 30px 9px 12px;
  cursor:pointer;
  transition:border-color .18s var(--mk-ease),box-shadow .18s var(--mk-ease);
}
#md-setup .opp-select:focus, #ld-card .opp-select:focus{
  outline:none;
  border-color:var(--accent-bright);
  box-shadow:0 0 0 4px var(--mk-focus);
}

/* ── 2. the setup panel: white sheet, grey wells, restrained accent ─────────
   The wells themselves come from the token flip (--surface2). Inputs sit
   white on the grey wells, iOS-form style, with the accent reserved for the
   small label (inline) and the focus ring. */
#md-setup .tm-input, #mp-card .tm-input{
  background:var(--surface);
  border:1px solid var(--border2);
  color:var(--text);
  font-family:var(--mk-font);
}
#md-setup .tm-input:focus, #mp-card .tm-input:focus{
  border-color:var(--accent-bright);
  box-shadow:0 0 0 4px var(--mk-focus);
}
/* the one filled action: Start / Connect / Join / Copy invite link, in the
   light region's accent. Scoped to #mp-choose/#mp-lobby - never bare #mp-card,
   because #mp-bar lives there too and renders over the dark live board. */
#md-setup .btn-load, #ld-card .btn-load, #mp-choose .btn-load, #mp-lobby .btn-load{
  background:var(--accent-bright);
  font-family:var(--mk-font);
  font-weight:600;
  letter-spacing:-.01em;
  box-shadow:none;
}
#md-setup .btn-load:hover, #ld-card .btn-load:hover,
#mp-choose .btn-load:hover, #mp-lobby .btn-load:hover{box-shadow:0 6px 18px var(--mk-focus)}
/* quiet buttons inside the setup lose the purple tint */
#ld-card .btn-sm, #md-history-wrap .btn-sm, #mp-lobby .btn-sm{
  background:var(--surface);
  border:1px solid var(--border2);
  color:var(--muted2);
}
#ld-card .btn-sm:hover, #md-history-wrap .btn-sm:hover, #mp-lobby .btn-sm:hover{border-color:var(--border2);color:var(--text)}

/* ── 4. Draft with friends: white cards on the sheet ────────────────────────
   Same hairline card language; the create icon keeps the accent, the join
   icon stays neutral. The BETA chips and the live dot keep their accents. */
#mp-card .mpx-card{
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
#mp-card .mpx-card:hover{
  border-color:var(--accent-bright);
  box-shadow:0 8px 22px -10px var(--mk-focus);
}
#mp-card .mpx-card:first-child .mpx-ic svg{stroke:var(--accent-bright)}
#mp-card .mpx-t{font-family:var(--mk-font);font-weight:600;letter-spacing:-.014em}

/* strategy cards: grey wells with the accent as a selection ring only */
#md-setup .md-strat-card{background:var(--surface2);border-color:var(--border)}
#md-setup .md-strat-card:hover{border-color:var(--border2);box-shadow:none;transform:none}
#md-setup .md-strat-card.on{
  background:var(--accent-dim);
  border-color:var(--accent-bright);
  box-shadow:none;
}

/* phone: a segmented control never wraps - keep one track, shrink the
   segments, and let it scroll quietly if a locale ever overflows */
@media (max-width:700px){
  #screen-mock #md-sections{
    flex-wrap:nowrap!important;
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
  }
  #screen-mock #md-sections::-webkit-scrollbar{display:none}
  #screen-mock .md-sec-btn{padding:7px 10px;font-size:12px;white-space:nowrap;flex:none}
}

/* ═══ PHONE ══════════════════════════════════════════════════════════════════
   Stack, scale down, keep taps big. The type clamps already do most of it. */
@media (max-width:700px){
  html.v12 .hero, .hero{padding-top:40px}
  .mk-hero-inner{padding:0 4px}
  /* the desktop line break makes a ragged third line at phone width; drop it
     and let text-wrap:balance split the headline evenly */
  .hero h1 br{display:none}
  /* three placeholder lines on a narrow screen: give the field the height */
  #hero-mock-ctx.mk-hero-field{min-height:96px}
  .mk-sub{font-size:17px}
  .mk-cta-row{gap:18px}
  .mk-btn{font-size:16px;padding:13px 26px}
  .mk-btnlink{font-size:16px}
  .mk-hero-shot{margin-left:-6px;margin-right:-6px}
  .mk-steps{gap:30px}
  .mk-chat{max-width:100%}
  .mk-chat-q{max-width:88%}
  .mk-chat-a{max-width:96%}
  .mk-trio{gap:26px;text-align:center}
  .mk-cards{grid-template-columns:1fr}
  .mk-plat{padding:10px 16px;font-size:14px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART 4 - THE APP CONTROLS JOIN THE SYSTEM.

   The tools screens (Analyze, My League, Research, Community, Learn, Sage)
   still follow data-theme - dark by default, light with the toggle - so every
   rule here speaks in the --mk-seg-* / system tokens, which already resolve
   both ways. This retires the old purple-tint tab bars and pills and replaces
   them with the same Apple segmented control the mock setup got in PART 3.
   Selectors carry the skin prefix so, loading last at equal specificity, they
   win over theme.css / v11.css / v12.css without !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. the five inner tab bars: one recessed track, raised active thumb ──── */
html.v11 .inner-tab-bar, html.v12 .inner-tab-bar{
  display:inline-flex;
  gap:2px;
  padding:3px;
  background:var(--mk-seg-track);
  border:none;
  border-bottom:none;
  border-radius:11px;
  margin-bottom:16px;
}
html.v11 .inner-tab, html.v12 .inner-tab{
  background:transparent;
  border:none;
  border-radius:8px;
  padding:7px 16px;
  font-family:var(--mk-font);
  font-size:13px;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--muted2);
  box-shadow:none;
  transition:color .16s var(--mk-ease),background .16s var(--mk-ease);
}
html.v11 .inner-tab:hover:not(.active), html.v12 .inner-tab:hover:not(.active){
  color:var(--text);
  background:transparent;
}
html.v11 .inner-tab.active, html.v12 .inner-tab.active{
  background:var(--mk-seg-on);
  color:var(--text);
  font-weight:600;
  border:none;
  box-shadow:0 1px 4px rgba(0,0,0,.16),0 0 0 .5px rgba(0,0,0,.04);
}
/* phone: a segmented control never wraps - one track, quiet scroll.
   Community carries six tabs, so this matters. min-height 42px tap targets
   come from styles.css and are left alone. */
@media (max-width:700px){
  html.v11 .inner-tab-bar, html.v12 .inner-tab-bar{
    display:flex;
    flex-wrap:nowrap;
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
  }
  html.v11 .inner-tab-bar::-webkit-scrollbar, html.v12 .inner-tab-bar::-webkit-scrollbar{display:none}
  html.v11 .inner-tab, html.v12 .inner-tab{padding:7px 12px;font-size:12px;white-space:nowrap;flex:none}
}

/* ── 2. the share-context + buy/sell segmented rows (.ctx-seg) ──────────────
   Same control, same answer. Equal-width segments (flex:1 1 0 from styles.css)
   are correct iOS and stay. */
html.v11 .ctx-seg, html.v12 .ctx-seg{
  gap:2px;
  padding:3px;
  background:var(--mk-seg-track);
  border-radius:11px;
}
html.v11 .ctx-seg-btn, html.v12 .ctx-seg-btn{
  background:transparent;
  border:none;
  border-radius:8px;
  color:var(--muted2);
  font-family:var(--mk-font);
  font-weight:500;
  letter-spacing:-.01em;
  transition:color .16s var(--mk-ease),background .16s var(--mk-ease);
}
html.v11 .ctx-seg-btn:hover:not(.active), html.v12 .ctx-seg-btn:hover:not(.active){color:var(--text)}
html.v11 .ctx-seg-btn.active, html.v12 .ctx-seg-btn.active{
  background:var(--mk-seg-on);
  color:var(--text);
  font-weight:600;
  box-shadow:0 1px 4px rgba(0,0,0,.16),0 0 0 .5px rgba(0,0,0,.04);
}

/* ── 3. Players quick-filter chips: quiet hairline, accent on the pick ──────
   Single-select view switchers - same recipe as the mock section chips
   before they went segmented. State is .on, written by togglePdbChip. */
html.v11 .pdb-chip, html.v12 .pdb-chip{
  background:transparent;
  border:1px solid var(--border);
  border-radius:100px;
  color:var(--muted2);
  font-family:var(--mk-font);
  font-weight:500;
  letter-spacing:-.01em;
}
html.v11 .pdb-chip:hover, html.v12 .pdb-chip:hover{
  background:transparent;
  border-color:var(--border2);
  color:var(--text);
  transform:none;
}
html.v11 .pdb-chip.on, html.v12 .pdb-chip.on{
  background:var(--mk-seg-on);
  border-color:transparent;
  color:var(--accent-bright);
  font-weight:600;
  box-shadow:0 1px 4px rgba(0,0,0,.16);
}

/* ── 4. the Dynasty/Redraft mini-toggle (Compare + Players) ─────────────────
   The wrapper span carries the recessed track inline; the buttons take their
   colors here so the .on state (written by styleModeButtons) works per theme. */
html.v11 [data-modebtn], html.v12 [data-modebtn]{
  background:transparent;
  color:var(--muted2);
  font-family:var(--mk-font);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  transition:color .16s var(--mk-ease),background .16s var(--mk-ease);
}
html.v11 [data-modebtn]:hover, html.v12 [data-modebtn]:hover{color:var(--text)}
html.v11 [data-modebtn].on, html.v12 [data-modebtn].on{
  background:var(--mk-seg-on);
  color:var(--text);
  font-weight:700;
  box-shadow:0 1px 4px rgba(0,0,0,.16),0 0 0 .5px rgba(0,0,0,.04);
}

/* ── 5. Community's Refresh: the quiet button, not a purple pill ──────────── */
html.v11 .comm-head .btn-sm, html.v12 .comm-head .btn-sm{
  background:var(--surface);
  border:1px solid var(--border2);
  color:var(--muted2);
}
html.v11 .comm-head .btn-sm:hover, html.v12 .comm-head .btn-sm:hover{
  background:var(--surface);
  border-color:var(--border2);
  color:var(--text);
  transform:none;
}

/* ── 6. Ask Sage suggestion pills: hairline chips, no lift, no glow ───────── */
html.v11 .sage-sugg, html.v12 .sage-sugg{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted2);
  font-family:var(--mk-font);
  font-weight:500;
  letter-spacing:-.01em;
  box-shadow:none;
}
html.v11 .sage-sugg:hover, html.v12 .sage-sugg:hover{
  border-color:var(--border2);
  color:var(--text);
  transform:none;
  box-shadow:none;
}

/* ── PART 5 — SAGE THE OWL COMES ALIVE ─────────────────────────────────────
   The Ask Sage greeting owl idles like a real mascot: a slow float with a
   tiny tilt, and (via JS) an occasional expression peek. The nav owl gets a
   gentle nod on hover. Both sit out entirely under prefers-reduced-motion. */
@keyframes sage-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  30%{transform:translateY(-5px) rotate(-2deg)}
  60%{transform:translateY(-2px) rotate(1.5deg)}
}
html.v11 .sage-greet-owl, html.v12 .sage-greet-owl{
  animation:sage-float 4.5s ease-in-out infinite;
  transform-origin:center bottom;
  will-change:transform;
}
html.v11 .tm-logo-owl, html.v12 .tm-logo-owl{
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
html.v11 .nav-logo:hover .tm-logo-owl, html.v12 .nav-logo:hover .tm-logo-owl{
  transform:rotate(-8deg) scale(1.12);
}
@media (prefers-reduced-motion: reduce){
  html.v11 .sage-greet-owl, html.v12 .sage-greet-owl{animation:none}
  html.v11 .nav-logo:hover .tm-logo-owl, html.v12 .nav-logo:hover .tm-logo-owl{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART 6 — THE PHONE PASS. A systematic audit at 390x844 against the four
   mobile sins: overlap with the fixed tab bar, sub-thumb tap targets, inputs
   that trigger Safari's focus zoom, and rows that can push the page sideways.
   Everything here is phone-scoped; the desktop never sees any of it.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:700px){
  /* The bottom tab bar owns the last ~57px of the viewport (plus the home
     indicator), and three surfaces were parking under it:
     - the sticky draft bar (its inline bottom now reads this variable),
     - the Analyze status pill (inline bottom:28px sat behind the bar),
     - every z-index 200/300 modal, which the z-index 350 bar overdrew -
       leaving the tab bar tappable ON TOP of an open dialog. */
  html.v11 #md-draftbar, html.v12 #md-draftbar{
    --md-bar-b:calc(68px + env(safe-area-inset-bottom,0px));
  }
  html.v11 #anz-toast, html.v12 #anz-toast{
    bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important;
  }
  html.v11 #connect-modal, html.v12 #connect-modal,
  html.v11 .modal-overlay,  html.v12 .modal-overlay,
  html.v11 #md-edit-modal,  html.v12 #md-edit-modal,
  html.v11 #md-hist-modal,  html.v12 #md-hist-modal{
    z-index:450 !important;
  }

  /* Roster counters: eight chips on one un-wrapping inline row is wider than
     a 390px phone - the one place this page could scroll sideways. Wrap them,
     and since the counters are filter shortcuts now, give each a real tap
     height while they are at it. */
  html.v11 #md-needs, html.v12 #md-needs{flex-wrap:wrap}
  html.v11 #md-needs span, html.v12 #md-needs span{
    display:inline-flex;align-items:center;min-height:32px;padding:4px 10px;
  }

  /* Tap targets measured under 44px: the modal X (28px), the queue and draft
     circles on every player row (20/26px - drawn inline, so !important is
     the lever this file family already uses for those rows), the sortable
     table header, and the Rookies/Drafted chips (now matching the position
     chips beside them). */
  html.v11 .cm-x, html.v12 .cm-x{width:40px;height:40px;top:6px;right:8px;font-size:18px}
  html.v11 .md-ch-q,  html.v12 .md-ch-q{width:30px !important;height:30px !important}
  html.v11 .md-ch-sel, html.v12 .md-ch-sel{width:40px !important;height:40px !important}
  html.v11 .md-tbl-head .md-ch-stat, html.v12 .md-tbl-head .md-ch-stat{
    min-height:32px;display:inline-flex;align-items:center;justify-content:flex-end;
  }
  html.v11 .md-flag-chip, html.v12 .md-flag-chip{
    min-height:40px;display:inline-flex;align-items:center;justify-content:center;flex:none;
  }

  /* Safari zooms the whole page onto any focused input under 16px, and every
     input in the product sat at 12-14.5px - tapping the draft search or Ask
     Sage jolted the layout. 16px on phones only; desktop keeps its scale. */
  html.v11 .tm-input, html.v12 .tm-input{font-size:16px !important}
  html.v11 .sage-composer textarea, html.v12 .sage-composer textarea,
  html.v11 .comm-opinion-input textarea, html.v12 .comm-opinion-input textarea,
  html.v11 .hero-mock-start textarea, html.v12 .hero-mock-start textarea{font-size:16px}
}

/* ── The homepage product film ──────────────────────────────────────────────
   Square reel in the hero shot slot: contained width, generous radius, the
   deep shadow that lifts dark media off the light page. Reduced motion gets
   the poster only (the film pauses via the same media query the rest obeys). */
html.v11 .mk-film, html.v12 .mk-film{
  display:block;
  width:min(620px, 92vw);
  height:auto;
  margin:0 auto;
  border-radius:28px;
  box-shadow:0 30px 80px rgba(20,10,50,.28);
  background:#050507;
}
@media (prefers-reduced-motion: reduce){
  html.v11 .mk-film, html.v12 .mk-film{content:url("/promo-poster.jpg")}
}

/* ═══ PART 7 — DRAFT NIGHT: the marketing page goes dark ═══════════════════
   The owner's call: the light Apple clone hid the product's identity. Same
   type discipline, dark canvas. Declared LAST so these tokens win PART 1. */
:root{
  --mk-page:#050507;
  --mk-band:#0b0b0f;
  --mk-ink:#f5f5f7;
  --mk-ink2:#9a9aa3;
  --mk-hair:rgba(255,255,255,.09);
  --mk-acc:#9b72e8;
}
html.v11 .mk-card, html.v12 .mk-card, .mk-card{
  background:#101016;
  border:1px solid rgba(255,255,255,.07);
}
/* rich stills inside the feature cards */
html.v11 .mk-shot, html.v12 .mk-shot{
  display:block;
  width:100%;
  height:auto;
  margin-top:16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
}
/* the film: landscape, wide, lifted off the dark page by a purple-tinted glow */
html.v11 .mk-film, html.v12 .mk-film{
  width:min(1120px,94vw);
  height:auto;
  border-radius:24px;
  box-shadow:0 30px 90px rgba(107,63,255,.22);
}
@media (prefers-reduced-motion: reduce){
  html.v11 .mk-film, html.v12 .mk-film{content:url("/promo-poster.jpg")}
}
/* the burger knows it has secrets: a purple dot that pings three times on
   load, then holds - enough to say "there's more in here" without nagging */
html.v11 .nav-burger-alive, html.v12 .nav-burger-alive{position:relative;overflow:visible}
html.v11 .nav-burger-dot, html.v12 .nav-burger-dot{
  position:absolute; top:5px; right:5px;
  width:7px; height:7px; border-radius:50%;
  background:var(--mk-acc-dark,#9b72e8);
  pointer-events:none;
}
html.v11 .nav-burger-dot::after, html.v12 .nav-burger-dot::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid var(--mk-acc-dark,#9b72e8);
  animation:mk-burger-ping 2s var(--mk-ease) .8s 3;
  opacity:0;
}
@keyframes mk-burger-ping{
  0%{transform:scale(.6);opacity:.9}
  100%{transform:scale(2.6);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  html.v11 .nav-burger-dot::after, html.v12 .nav-burger-dot::after{animation:none}
}

/* ── PART 7b — THE STADIUM BREATHES ────────────────────────────────────────
   Owner: "full black is too black - put a draft board back there." A blurred
   night stadium with the big board glowing (Higgsfield) sits behind the hero;
   the page base lifts from pure black to charcoal so the dark has depth. */
:root{
  --mk-page:#0a0a10;
  --mk-band:#0d0d14;
}
html.v11 .hero, html.v12 .hero{
  background:
    linear-gradient(180deg, rgba(10,10,16,.30) 0%, rgba(10,10,16,.55) 62%, var(--mk-page-solid) 100%),
    url("/bg-stage.jpg") center top / cover no-repeat,
    var(--mk-page-solid);
}
@media (max-width:700px){
  html.v11 .hero, html.v12 .hero{
    background:
      linear-gradient(180deg, rgba(10,10,16,.30) 0%, rgba(10,10,16,.55) 62%, var(--mk-page-solid) 100%),
      url("/bg-stage-m.jpg") center top / cover no-repeat,
      var(--mk-page-solid);
  }
}

/* ── PART 7c — THE ATMOSPHERE FOLLOWS THE SCROLL ───────────────────────────
   Owner: "cuando scrolleas se pierde el background." The page and band
   tokens become layered auroras - every section below the hero keeps a soft
   purple/teal breath instead of collapsing to flat charcoal. */
:root{
  --mk-page-solid:#0a0a10;
  --mk-page:
    radial-gradient(1100px 700px at 12% 8%, rgba(107,63,255,.10), transparent 62%),
    radial-gradient(900px 620px at 88% 42%, rgba(103,232,249,.05), transparent 60%),
    radial-gradient(1000px 700px at 40% 96%, rgba(107,63,255,.07), transparent 62%),
    #0a0a10;
  --mk-band:
    radial-gradient(1000px 640px at 85% 10%, rgba(107,63,255,.09), transparent 60%),
    radial-gradient(820px 560px at 10% 80%, rgba(103,232,249,.05), transparent 58%),
    #0d0d14;
}