/* app-page.css — /app (10-27 pick A, redone 10-28 as "Z + count", mockups/v2/app-options-6). Before: the pre-game
   lobby; during: recording and item help; after: the grade and the clips your settings keep. A dot walks the
   line. Home's type roles and headings are shared (home.css, .hm); everything here is ap- or as-. */
.hm .ap-wrap{max-width:1240px;margin:0 auto}
.hm .ap-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 40px;align-items:end;margin-top:10px}
.hm .ap-head h1{margin:0;font-size:clamp(40px,3.6vw,54px);line-height:1.02}
.hm .ap-head .ap-lede{margin:0;font-size:18px;line-height:1.45;color:var(--fg2);max-width:620px}
.hm .ap-cta{display:grid;justify-items:end;gap:10px}
.hm .ap-cta .row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:flex-end}
.hm .ap-get{height:44px;font-size:17px;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.hm .ap-get:hover{border-color:var(--accent);filter:brightness(1.08)}
.hm .ap-cta .ap-size{font-size:14px;color:var(--mute)}
.hm .ap-head #early{margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-family:var(--font-body);font-weight:600;font-variant-caps:small-caps;letter-spacing:var(--track-caps);font-size:14px;color:var(--dim)}
.hm .ap-head #early[hidden]{display:none}
.hm .ap-head #early::before{content:"EARLY";display:inline-flex;align-items:center;height:20px;padding:0 7px;font-family:var(--wide);font-weight:800;font-size:11px;letter-spacing:.08em;font-variant-caps:normal;color:var(--ink);background:var(--gold);transform:rotate(-3deg)}
.hm .ap-head #early b{color:var(--fg)}
.hm .ap-need{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:14px;color:var(--dim)}
.hm .ap-need span{display:flex;align-items:center;gap:8px}
.hm .ap-need span::before{content:"";width:6px;height:6px;background:var(--accent);transform:rotate(45deg)}

/* one match, start to finish (his pick 10-28, mockups/v2/app-options-6 "Z + count"): three numbered stops on a line,
   a dot walks it and each number lights in the accent as the dot lands (app-steps.js); after 03 the app's grade dial
   runs and the letter climbs F to A with the needle. Beside it, everything the app does, in three groups. */
.hm .as-t{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:16px;text-transform:uppercase;color:var(--fg)}
.hm .as-w{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);transition:color .4s var(--hm-curve)}
.hm .as-s{font-size:15px;color:var(--dim)}
.hm .as-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:start}
.hm .as-steps{position:relative;display:grid;gap:34px}
.hm .as-steps>div{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px 24px;align-items:center}
.hm .as-steps>div.on .as-w{color:var(--fg)}
.hm .as-line{position:absolute;width:1px;background:var(--line2)}
.hm .as-run{position:absolute;z-index:1;width:7px;height:7px;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.8);opacity:0;transition:top 1.1s var(--hm-curve),opacity .4s}
.hm .as-st{position:relative;z-index:2;grid-row:span 3;justify-self:center;padding:6px 0;background:var(--bg);font:900 46px/1 var(--wide);font-stretch:125%;color:var(--line3);transition:color .4s var(--hm-curve),text-shadow .4s}
.hm .on>.as-st{color:var(--accent);text-shadow:0 0 18px rgba(var(--accent-rgb),.35)}
.hm .as-dt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.hm .as-ln{grid-column:2;height:1px;margin-top:4px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.65),transparent 70%);transform-origin:left;transform:scaleX(0);transition:transform .6s var(--hm-curve)}
.hm .on>.as-ln{transform:scaleX(1)}

/* the grade under 03: the app's dial, F to S (sib-contract.js colors); hidden until 03 lights */
.hm .as-rv{grid-column:2;display:flex;align-items:center;gap:14px;min-height:44px;margin-top:6px;opacity:0;transition:opacity .3s}
.hm .on>.as-rv{opacity:1}
.hm .as-g{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 8px;font:900 20px var(--wide);font-stretch:125%;color:var(--ink);background:var(--gc,var(--hm-gA));transition:background .15s}
.hm .as-z{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:end;max-width:420px}
.hm .as-dial{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:2px;height:8px}
.hm .as-dial i{background:var(--zc);opacity:.35}
.hm .as-dial b{position:absolute;top:-6px;bottom:-6px;left:0;width:2px;background:var(--fg);box-shadow:0 0 8px rgba(255,255,255,.5);transition:left 1.4s var(--hm-curve) .2s}
.hm .on>.as-z .as-dial b{left:var(--at)}
.hm .as-zl{display:grid;grid-template-columns:repeat(7,1fr);font:900 11px var(--wide);font-stretch:125%;color:var(--mute);text-align:center}
.hm .as-z .as-g{grid-row:1 / span 2;grid-column:2}

/* everything it does: three groups, two columns inside each, the lead word bold */
.hm .as-all{display:grid;gap:22px;padding-top:2px}
.hm .as-top{color:var(--fg)}
.hm .as-grp{display:grid;gap:4px}
.hm .as-all ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.hm .as-all li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:10px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line1);font-size:15px;line-height:1.35;color:var(--dim)}
.hm .as-all li::before{content:"";width:6px;height:6px;background:var(--accent);transform:rotate(45deg) translateY(-2px)}
.hm .as-all li b{font-weight:700;color:var(--fg)}
.hm .ap-cr{display:inline-block;margin-top:34px;font-size:16px;color:var(--gold)}
.hm .ap-cr:hover{color:var(--fg)}

@media (max-width:1100px){.hm .as-all ul{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.hm .ap-head{grid-template-columns:minmax(0,1fr)}.hm .ap-cta{justify-items:start}.hm .ap-cta .row{justify-content:flex-start}
  .hm .as-split{grid-template-columns:minmax(0,1fr);gap:40px}.hm .as-all ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hm .ap-head h1 span{display:block}.hm .as-steps>div{grid-template-columns:64px minmax(0,1fr)}.hm .as-st{font-size:34px}.hm .as-all ul{grid-template-columns:minmax(0,1fr)}}