/* UX polish pass, 2026-09-23. Loaded last; overrides only. */

/* Hero: floating balloons never cross the headline or CTA */
.hero-copy{position:relative;z-index:4}
.hero .scene{position:relative;z-index:4}

/* Planner kits: icon-left on desktop, icon-above and centred on a phone.
   The illustrated glyph is 64px (home-fx.css), so its column is sized to the
   glyph: a 40px track let it spill into the copy. */
.kits{gap:clamp(14px,1.8vw,22px)}
.kit{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;row-gap:6px;align-items:start;padding:clamp(20px,2vw,26px) clamp(16px,1.6vw,22px)}
.kit .ktop{grid-column:1;grid-row:1 / span 2;flex-direction:column;align-items:center;gap:6px;margin:0}
.kit .ktop .kn{order:2;font-size:11px;line-height:1;opacity:.7}
.kit .ic,.kit .ic svg.kv{width:48px;height:48px}
.kit h3{grid-column:2;margin:4px 0 0}
.kit p{grid-column:2;margin:0}
@media(min-width:1001px){.kit:first-child{grid-column:span 4}}
/* 2026-09-27 (#259), every card fitted at every width. The copy row takes the
   extra height, so a tall icon column no longer pushes one card's line lower
   than its row-mates'. On desktop the icon track gives 4px back so "Photo
   memories" holds one line at 1024 and 1440. From 561 to 1000 the one
   full-width card centres its icon-and-text group instead of packing it
   left. At 320 every card name holds one line. */
@media(min-width:1001px){
  .kit{grid-template-columns:44px minmax(0,1fr);padding-inline:clamp(14px,1.4vw,22px);column-gap:clamp(10px,.9vw,12px)}
  .kit .ic,.kit .ic svg.kv{width:44px;height:44px}
}
@media(min-width:561px) and (max-width:1000px){.kit:first-child{grid-template-columns:48px minmax(0,max-content);justify-content:center}}
@media(max-width:560px){
  .kits{gap:12px}
  .kit{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:20px 14px 22px}
  .kit .ktop{margin:0 0 2px}
  .kit .ic,.kit .ic svg.kv{width:52px;height:52px}
  .kit h3{margin:0;text-wrap:balance}
  .kit p{text-wrap:balance}
}
@media(max-width:380px){.kit{padding-inline:10px}.kit h3{font-size:clamp(14px,4.4vw,15px)}}

/* How it works: tighter connectors between steps */
.flow .wayline{height:64px}

/* Moment: facts stack as rows where three columns get cramped */
@media(max-width:1100px){
  .mlist{grid-template-columns:minmax(0,1fr) !important;gap:14px}
  .mlist li{grid-template-columns:40px minmax(0,1fr)}
  .mlist .mi{width:40px;height:40px}
}

/* FAQ: questions first; the illustration only where it can sit aside */
@media(max-width:1000px){#faq > .wrap > .secart{display:none}}
#faq .faq{margin-top:clamp(20px,2.4vw,28px)}
.faq summary{transition:background .15s}
.faq summary:hover{background:color-mix(in srgb,var(--sun) 12%,transparent)}
/* #327: this outline drew a sky-blue ring on these three. Law 18: no ring at
   all; index.html gives each a fill or colour shift on :focus-visible. */
.faq summary:focus-visible,.btn:focus-visible,.nav a:focus-visible{outline:none}

/* Footer: denser link lists on desktop, still a 44px hit box per row.
   (hover:hover) is not "no touch": a touch laptop reports it too, and the
   rows here measured 31.5px tall at 1440 (audit-r14, #242). The density
   comes from the list gap going to 0 and the row from 48 to 44, so the
   pitch is 44px against 50 on touch, and no two hit boxes overlap. */
@media(min-width:761px) and (hover:hover){
  footer li a{min-height:44px}
  footer ul{gap:0}
}

/* 2026-09-23 port: the two-line hero button is nowrap throughout, and at 320
   and 360 its min-content (352px) widened the whole hero column, cutting the
   headline, the lead and the arrow at the screen edge. Under 400px the button
   gives back padding and gap, the disc steps down, and the TV chip may wrap. */
.hero-copy{min-width:0}
@media (max-width:400px){
  .hero-cta .btn{padding-inline:16px 10px !important; gap:10px !important}
  .hero-cta .btn > span:last-child{width:38px !important; height:38px !important}
  .hero-cta .btn > span:first-child > span:last-child{white-space:normal !important; text-align:center; justify-content:center; font-size:10.5px !important}
}

/* 2026-10-05, Siavash: "make hero banner not full width same like other areas
   and remove the gap between button and paragraph". The hero sits on the one
   1180 wrap every section uses, both edges, and the room fits its column
   instead of bleeding to the viewport. The lead closes up to the CTA. */
@media(min-width:901px){
  .hero .wrap{max-width:1180px !important;margin-inline:auto !important;
    padding-inline:var(--pad) !important}
  .hero .room,.hero .tvtags{max-width:100% !important;margin-inline:0 !important}
}
.hero .lead{margin-bottom:12px !important}

/* 2026-10-05, Siavash: "make hero elements a bit bigger in a way when it
   lands you don't see the next section". The band is the first screen again
   (#318), and the content now FILLS it instead of leaving slack: on the 1180
   wrap the set and copy top out near 650px, so on a screen taller than a
   laptop the hero's wrap grows with the height (165svh, so 1440x900 runs
   to the gutter, capped at 2000; his choice over keeping the nav's edge) and
   the copy column, which every hero rank rides, grows with it. The set is a
   fixed aspect, so a 16:9 screen runs out of width first: measured slack
   above/below 67/65 at 1440x900, 151/111 at 1920x1080, and he accepted the
   16:9 gap over reworking the scene. The callout sits one --hero-air step
   under the nav. */
@media(min-width:901px){
  .hero{padding-top:calc(var(--head-h) + var(--hero-air)) !important}
}
@media(min-width:1241px){
  .hero .wrap{max-width:clamp(1180px,165svh,2000px) !important}
  .hero{--copy-col:clamp(440px,min(34vw,54svh),620px)}
}
/* #326's ultra-wide extra cleared a room that grew with the width; on the
   1180 wrap the hero's lowest pixel sits 30px inside its box at every width,
   so the extra was 168px of dead air at 2560x1000. Back to the ladder alone. */
@media(min-width:1500px) and (min-aspect-ratio:21/10){
  main > .hero + *{margin-block-start:calc(var(--gap) - var(--hero-air))}
}

/* The Build-the-game cover (Siavash, 2026-10-05). A click on any start.html
   link lays #pre's ground and hopping cake back over the page and walks three
   steps before start.html opens: a quiet ring waits, a spinning arc works, a
   mint check lands. Glyphs paint on the ground, no plate (law 16). The bar
   fills over the whole walk. index.page.js owns the timing. */
.gopre{position:fixed;inset:0;z-index:5000;display:grid;place-content:center;justify-items:center;
  gap:clamp(4px,1vh,10px);padding:var(--pad);overflow:hidden;
  background-color:var(--bg);
  background-image:radial-gradient(closest-side circle at 50% 40%,
    color-mix(in srgb,var(--sun) 30%,transparent),transparent);
  background-size:min(620px,130vw) min(620px,130vw);background-position:50% 40%;background-repeat:no-repeat;
  opacity:0;transition:opacity .22s cubic-bezier(.2,.8,.2,1)}
.gopre.on{opacity:1}
.gopre .pre-stage{width:clamp(112px,30vw,150px);animation-delay:0s}
.gopre .pre-cake,.gopre .pool{animation-delay:0s}
.gp-title{margin:clamp(14px,2.4vh,22px) 0 0;font-family:var(--disp);font-weight:700;
  font-size:clamp(26px,6.4vw,36px);line-height:1;letter-spacing:-.02em;color:var(--ink);text-align:center}
.gp-steps{list-style:none;margin:clamp(14px,2.6vh,24px) 0 0;padding:0;display:grid;gap:14px;
  font-family:var(--disp);font-weight:600;font-size:clamp(16px,4.2vw,19px);line-height:1.3;color:var(--mut)}
.gp-step{display:grid;grid-template-columns:26px auto;align-items:center;gap:12px;
  opacity:.42;transition:opacity .3s cubic-bezier(.2,.8,.2,1),color .3s}
.gp-step.now,.gp-step.done{opacity:1;color:var(--ink)}
.gp-ic{width:26px;height:26px;display:block;overflow:visible}
.gp-ring{stroke:color-mix(in srgb,var(--ink) 20%,transparent);transition:stroke .3s}
.gp-arc{stroke:var(--tang);opacity:0;transform-origin:12px 12px}
.gp-tick{stroke:var(--mint);stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .34s cubic-bezier(.3,.7,.2,1) .06s}
.gp-step.now .gp-arc{opacity:1;animation:gpspin .7s linear infinite}
.gp-step.done .gp-ring{stroke:var(--mint)}
.gp-step.done .gp-tick{stroke-dashoffset:0}
@keyframes gpspin{to{transform:rotate(360deg)}}
.gp-bar{display:block;width:min(300px,72vw);height:6px;margin-top:clamp(18px,3vh,28px);border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--ink) 10%,transparent)}
.gp-bar i{display:block;height:100%;border-radius:inherit;background:var(--cta);
  transform:scaleX(0);transform-origin:0 50%}
.gopre.on .gp-bar i{transform:scaleX(1);transition:transform var(--gp-dur,2.4s) cubic-bezier(.4,.1,.3,1)}
@media(prefers-reduced-motion:reduce){
  .gopre .pre-cake,.gopre .pool,.gopre .pre-cake *,.gp-step.now .gp-arc{animation:none !important}
  .gopre.on .gp-bar i{transition-timing-function:linear}
}