/* Homepage-only arcade art direction. Shared hub.css remains the site contract.
   Version the filename when changing this asset: /assets/* is cached immutably. */

body.arcade-home { --arcade-step: 8px; }
body.arcade-home .arcade-display { font-family:var(--px); font-weight:400; }
body.arcade-home .site-head .wrap { max-width:1400px; min-height:82px; gap:12px 22px; }
body.arcade-home .site-head .brand .disp { font-size:22px; }
body.arcade-home .site-head .nav { flex-wrap:nowrap; gap:0; }
body.arcade-home .site-head .nav a { padding:9px 8px; font-size:14px; }
body.arcade-home .arcade-mobile-vendors { display:none; }
body.arcade-home .arcade-menu { display:none; }
body.arcade-home .arcade-menu[hidden] { display:none; }
body.arcade-home .arcade-menu-icon { display:inline-block; width:16px; height:3px; background:currentColor; box-shadow:0 -6px currentColor,0 6px currentColor; }
body.arcade-home .arcade-menu:hover { background:var(--yellow); }
body.arcade-home .arcade-menu:focus-visible,
body.arcade-home .arcade-email:focus-visible { outline:3px solid var(--purple); outline-offset:5px; }

body.arcade-home .arcade-hero { position:relative; isolation:isolate; overflow:hidden; border-bottom:4px solid var(--ink); }
body.arcade-home .arcade-hero::after { content:""; display:block; position:absolute; bottom:0; left:0; right:0; height:22px; z-index:1; border-top:4px solid var(--ink); background:repeating-linear-gradient(90deg,transparent 0 28px,var(--ink) 28px 32px),linear-gradient(var(--purple) 0 7px,#352184 7px 11px,var(--purple) 11px 100%); }
body.arcade-home .arcade-hero .wrap { position:relative; display:block; max-width:1440px; min-height:616px; padding:48px 42px 60px; }
body.arcade-home .arcade-hero-copy { position:relative; z-index:2; width:51%; max-width:640px; }
body.arcade-home .arcade-eyebrow { font-family:var(--sans); font-size:14px; line-height:1.3; font-weight:700; letter-spacing:.035em; padding:8px 12px 7px; background:var(--paper); }
body.arcade-home .arcade-hero h1 { font-size:clamp(38px,4.1vw,58px); line-height:1.28; letter-spacing:-.06em; margin:27px 0 22px; text-shadow:0 5px 0 var(--purple),3px 5px 0 var(--purple); }
body.arcade-home .arcade-hero h1 > span { display:block; white-space:nowrap; }
body.arcade-home .arcade-hero h1 .mark { display:inline-block; padding:7px 7px 0; margin-top:4px; line-height:1.2; }
body.arcade-home .arcade-hero .lede { font-size:clamp(19px,1.7vw,24px); line-height:1.35; margin:0 0 10px; max-width:600px; }
body.arcade-home .arcade-mobile-break { display:none; }
body.arcade-home .arcade-hero .arcade-intro { font-size:17px; line-height:1.5; max-width:510px; margin:0; }
body.arcade-home .arcade-actions { display:flex; align-items:flex-start; flex-direction:column; gap:18px; margin:28px 0 0; }
body.arcade-home .arcade-start { position:relative; border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink),inset 0 4px 0 #ff8dc2,inset 0 -5px 0 #c70055; gap:14px; font-size:17px; font-weight:700; min-height:62px; padding:12px 22px; text-align:left; line-height:1.3; max-width:100%; }
body.arcade-home .arcade-start::before,
body.arcade-home .arcade-start::after { content:""; position:absolute; width:4px; top:5px; bottom:5px; background:var(--ink); }
body.arcade-home .arcade-start::before { left:-8px; }
body.arcade-home .arcade-start::after { right:-8px; }
body.arcade-home .arcade-start:hover,
body.arcade-home .arcade-start:focus-visible { color:var(--ink); transform:translate(2px,2px); box-shadow:4px 4px 0 var(--ink),inset 0 4px 0 #ff8dc2,inset 0 -5px 0 #c70055; }
body.arcade-home .arcade-start:active { transform:translate(6px,6px); box-shadow:0 0 0 var(--ink),inset 0 3px 0 #c70055; }
body.arcade-home .arcade-start:focus-visible { outline:3px solid var(--paper); outline-offset:5px; }
body.arcade-home .arcade-play { display:block; flex:0 0 18px; height:22px; background:var(--ink); clip-path:polygon(0 0,25% 0,25% 10%,50% 10%,50% 25%,75% 25%,75% 40%,100% 40%,100% 60%,75% 60%,75% 75%,50% 75%,50% 90%,25% 90%,25% 100%,0 100%); }
body.arcade-home .arcade-email { font-weight:700; font-size:17px; line-height:1.4; text-decoration-thickness:2px; text-underline-offset:5px; }
body.arcade-home .arcade-email span { display:inline-block; margin-left:6px; }
body.arcade-home .arcade-hero .arcade-proof { font-size:15px; line-height:1.4; margin:23px 0 0; }
body.arcade-home .arcade-world { position:absolute; z-index:0; right:-2%; bottom:-28px; width:61%; pointer-events:none; }
body.arcade-home .arcade-world img { display:block; width:100%; height:auto; image-rendering:pixelated; }

body.arcade-home .arcade-missions { padding:38px 0 52px; }
body.arcade-home .arcade-missions .wrap { max-width:1400px; padding:0 36px; }
body.arcade-home .arcade-mission-heading { margin:0 0 28px; text-align:center; }
body.arcade-home .arcade-mission-heading h2 { display:flex; align-items:center; justify-content:center; gap:22px; font-size:clamp(17px,1.75vw,25px); line-height:1.55; letter-spacing:-.04em; text-transform:uppercase; margin:0; }
body.arcade-home .arcade-mission-heading h2::before,
body.arcade-home .arcade-mission-heading h2::after { content:""; width:66px; height:5px; flex:0 1 66px; background:var(--pink); }
body.arcade-home .arcade-mission-heading p { font-size:19px; font-weight:500; margin:7px 0 0; }
body.arcade-home .arcade-mission-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:25px; }
body.arcade-home .arcade-mission { position:relative; display:flex; flex-direction:column; color:var(--ink); background:var(--paper); border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink); text-decoration:none; transition:transform .12s,box-shadow .12s; }
body.arcade-home .arcade-mission::before { content:""; position:absolute; inset:-7px; pointer-events:none; border:3px solid transparent; }
body.arcade-home .arcade-mission::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 3px 0 var(--paper); }
body.arcade-home .arcade-mission:hover,
body.arcade-home .arcade-mission:focus-visible { color:var(--ink); transform:translate(-2px,-3px); box-shadow:8px 9px 0 var(--ink); }
body.arcade-home .arcade-mission:hover::before,
body.arcade-home .arcade-mission:focus-visible::before { border-color:var(--pink); }
body.arcade-home .arcade-mission:focus-visible { outline:3px solid var(--purple); outline-offset:9px; }
body.arcade-home .arcade-mission:active { transform:translate(4px,4px); box-shadow:2px 2px 0 var(--ink); }
body.arcade-home .arcade-mission-art { display:block; width:100%; aspect-ratio:1.1/1; background-color:var(--purple); background-image:url('/assets/arcade/missions-v1.webp'); background-repeat:no-repeat; background-size:400% auto; image-rendering:pixelated; border-bottom:4px solid var(--ink); }
body.arcade-home .arcade-mission-clients { background-position:0% 50%; }
body.arcade-home .arcade-mission-sales { background-position:33.333333% 50%; }
body.arcade-home .arcade-mission-managed { background-position:66.666667% 50%; }
body.arcade-home .arcade-mission-ai { background-position:100% 50%; }
body.arcade-home .arcade-mission-label { display:flex; align-items:center; justify-content:center; flex:1; min-height:83px; padding:14px 17px; font-family:var(--disp); font-size:16px; font-weight:400; line-height:1.25; text-align:center; text-transform:uppercase; }
body.arcade-home .arcade-mission-cursor { position:absolute; left:-14px; bottom:27px; display:none; color:var(--pink); font-size:23px; line-height:1; -webkit-text-stroke:2px var(--ink); text-shadow:2px 2px var(--ink); }
body.arcade-home .arcade-mission:hover .arcade-mission-cursor,
body.arcade-home .arcade-mission:focus-visible .arcade-mission-cursor { display:block; }

@media (min-width:1101px) {
  body.arcade-home .site-head .nav[hidden] { display:flex; }
}
@media (max-width:1250px) and (min-width:1101px) {
  body.arcade-home .site-head .wrap { gap:10px; }
  body.arcade-home .site-head .brand .disp { font-size:19px; }
  body.arcade-home .site-head .nav a { font-size:13px; padding:8px 6px; }
  body.arcade-home .site-head .head-cta { gap:10px; }
  body.arcade-home .site-head .head-cta .vendors { font-size:12px; }
}
@media (max-width:1100px) {
  body.arcade-home .site-head .wrap { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px 18px; padding:14px 24px; min-height:78px; }
  body.arcade-home .site-head .brand { order:1; }
  body.arcade-home .site-head .head-cta { order:2; }
  body.arcade-home .site-head .head-cta .vendors { display:none; }
  body.arcade-home .site-head .arcade-menu { order:3; }
  body.arcade-home.arcade-nav-ready .arcade-menu { display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:9px 12px; border:3px solid var(--ink); background:var(--paper); color:var(--ink); font:700 14px var(--sans); cursor:pointer; }
  body.arcade-home .site-head .nav { order:4; grid-column:1/-1; justify-content:flex-start; flex-wrap:wrap; gap:4px 12px; margin:0; }
  body.arcade-home.arcade-nav-ready .site-head .nav[hidden] { display:none; }
  body.arcade-home .arcade-mobile-vendors { display:block; }
  body.arcade-home .arcade-hero .wrap { min-height:588px; padding:36px 30px 58px; }
  body.arcade-home .arcade-hero-copy { width:54%; }
  body.arcade-home .arcade-hero h1 { font-size:clamp(35px,4vw,44px); }
  body.arcade-home .arcade-hero .arcade-intro { font-size:16px; }
  body.arcade-home .arcade-start { font-size:15px; gap:12px; padding:13px 17px; }
  body.arcade-home .arcade-world { width:63%; right:-1%; }
  body.arcade-home .arcade-mission-grid { gap:22px; }
  body.arcade-home .arcade-mission-label { font-size:14px; padding:13px 10px; }
}
@media (max-width:800px) {
  body.arcade-home .arcade-hero .wrap { min-height:0; padding:32px 26px 0; }
  body.arcade-home .arcade-hero-copy { width:100%; max-width:600px; }
  body.arcade-home .arcade-hero h1 { font-size:clamp(34px,6.5vw,49px); margin:25px 0 21px; }
  body.arcade-home .arcade-hero .lede { font-size:22px; }
  body.arcade-home .arcade-hero .arcade-intro { max-width:510px; }
  body.arcade-home .arcade-world { position:relative; width:min(100%,620px); margin:-28px -34px 0 auto; right:auto; bottom:0; }
  body.arcade-home .arcade-world img { width:100%; max-height:270px; object-fit:contain; object-position:right bottom; }
  body.arcade-home .arcade-hero .arcade-proof { margin-top:20px; max-width:52%; }
  body.arcade-home .arcade-mission-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
  body.arcade-home .arcade-mission-heading h2 { font-size:20px; }
  body.arcade-home .arcade-mission-heading h2::before,
  body.arcade-home .arcade-mission-heading h2::after { display:none; }
  body.arcade-home .arcade-mission-label { font-size:16px; min-height:78px; }
}
@media (max-width:560px) {
  body.arcade-home .site-head .wrap { padding:12px 18px; grid-template-columns:minmax(0,1fr) auto; gap:10px 12px; min-height:72px; }
  body.arcade-home .site-head .brand { gap:7px; }
  body.arcade-home .site-head .brand .disp { font-size:17px; }
  body.arcade-home .site-head .brand svg { width:23px; height:23px; }
  body.arcade-home .site-head .head-cta { display:none; }
  body.arcade-home.arcade-nav-ready .arcade-menu { min-height:42px; padding:8px 9px; gap:8px; font-size:13px; }
  body.arcade-home .arcade-menu-icon { width:12px; height:2px; box-shadow:0 -5px currentColor,0 5px currentColor; }
  body.arcade-home .site-head .nav { column-gap:2px; }
  body.arcade-home .site-head .nav a { font-size:13px; padding:9px 7px; }
  body.arcade-home .arcade-hero .wrap { padding:27px 20px 0; }
  body.arcade-home .arcade-eyebrow { font-size:11px; letter-spacing:.025em; padding:7px 8px 6px; border-width:3px; }
  body.arcade-home .arcade-hero h1 { font-size:clamp(26px,8vw,39px); line-height:1.3; text-shadow:0 4px var(--purple),2px 4px var(--purple); margin:24px 0 21px; }
  body.arcade-home .arcade-hero h1 .mark { padding:5px 4px 0; }
  body.arcade-home .arcade-hero .lede { font-size:20px; margin-bottom:11px; }
  body.arcade-home .arcade-mobile-break { display:block; }
  body.arcade-home .arcade-hero .arcade-intro { font-size:15px; line-height:1.45; }
  body.arcade-home .arcade-actions { gap:17px; margin-top:23px; }
  body.arcade-home .arcade-start { font-size:14px; min-height:59px; width:auto; gap:10px; padding:12px 14px; }
  body.arcade-home .arcade-play { flex-basis:15px; height:19px; }
  body.arcade-home .arcade-email { font-size:15px; min-height:30px; }
  body.arcade-home .arcade-hero .arcade-proof { font-size:13px; margin-top:13px; max-width:none; }
  body.arcade-home .arcade-world { width:calc(100% + 26px); margin:5px -20px 0 -6px; }
  body.arcade-home .arcade-world img { height:auto; max-height:235px; object-position:center bottom; }
  body.arcade-home .arcade-missions { padding:29px 0 38px; }
  body.arcade-home .arcade-missions .wrap { padding:0 20px; }
  body.arcade-home .arcade-mission-heading { margin-bottom:23px; }
  body.arcade-home .arcade-mission-heading h2 { font-size:16px; line-height:1.65; max-width:330px; margin:auto; }
  body.arcade-home .arcade-mission-heading p { font-size:16px; margin-top:9px; }
  body.arcade-home .arcade-mission-grid { gap:20px 17px; }
  body.arcade-home .arcade-mission { border-width:3px; box-shadow:4px 4px var(--ink); }
  body.arcade-home .arcade-mission-art { border-bottom-width:3px; aspect-ratio:1/1; }
  body.arcade-home .arcade-mission-label { font-size:12px; min-height:74px; padding:12px 7px; }
  body.arcade-home .arcade-mission-cursor { left:-10px; bottom:27px; font-size:17px; -webkit-text-stroke:1px var(--ink); }
}
@media (max-width:359px) {
  body.arcade-home .site-head .wrap { padding-left:14px; padding-right:14px; }
  body.arcade-home .site-head .brand .disp { font-size:15px; }
  body.arcade-home .arcade-hero .wrap { padding-left:18px; padding-right:18px; }
  body.arcade-home .arcade-start { font-size:12px; padding:12px; }
  body.arcade-home .arcade-mission-label { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  body.arcade-home .arcade-start,
  body.arcade-home .arcade-mission { transition:none; }
}

/* V3: restore the original design; adjust only the community CTA label. */
body.arcade-home .arcade-start {
  font-size:20px;
  line-height:28px;
  letter-spacing:0;
  min-height:64px;
}
@media (max-width:1100px) {
  body.arcade-home .arcade-start { font-size:18px; line-height:24px; min-height:62px; }
}
@media (max-width:560px) {
  body.arcade-home .arcade-start { font-size:16px; line-height:24px; min-height:60px; }
}
@media (max-width:359px) {
  body.arcade-home .arcade-start { font-size:14px; line-height:20px; min-height:56px; }
}
