/* ================= AR Helmet (CAFE Racer) case page — on top of site.css + cloudbuds.css ================= */
.ah{--cb-accent:#e2561c;--ah-text:#c2410c;--ah-glow:255,90,31;--ah-amber:255,176,32}
[data-theme="dark"] .ah{--cb-accent:#ff7a45;--ah-text:#ff8a5c}
.ah .eyebrow b{color:var(--ah-text);font-weight:600}

/* ---- hero: the helmet is a cut-out, so it sits on the page in both themes ---- */
.ah .cb-hero{min-height:auto;padding:120px 0 24px}
.ah .cb-hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,4vw,56px)}
.ah .cb-hero .meta{flex-wrap:wrap;gap:14px 28px}
.ah-hero-img{justify-self:center;width:100%;max-width:520px}
.ah-hero-img img{width:100%;height:auto;max-height:min(70svh,620px);object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.12))}
[data-theme="dark"] .ah-hero-img img{filter:none}

/* the vent / rain demo sits right under the intro */
.ah-try{padding:8px 0 0!important}
.ah-try .eyebrow{margin-bottom:12px}

/* full line-up, shown whole */
.ah-views{padding:clamp(40px,5vw,64px) 0 0!important}
.ah-views .wrap{max-width:1240px}
.ah-views img{width:100%;height:auto;border-radius:24px;background:#eaedee}
.ah-views figcaption{font-size:13px;color:var(--ink-2);margin-top:10px;text-align:center}

/* ---- context numbers ---- */
.ah-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ah-stats>div{background:var(--tile);border-radius:20px;padding:22px 22px 24px;min-width:0}
.ah-stats b{display:block;font:600 clamp(32px,3.6vw,48px)/1 var(--display);letter-spacing:-.03em;color:var(--ink);margin-bottom:12px;white-space:nowrap}
.ah-stats span{display:block;font-size:14px;line-height:1.45;color:var(--ink-2)}
.ah-src{font-size:12px;color:var(--ink-2);margin:14px 0 0}

/* ---- what riders told us: pick a rider, the quote and the design answer follow ---- */
.ah-ask{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:center}
.ah-ask .txt h2{margin-bottom:16px}
.ah-ask .txt p{font-size:17px;max-width:46ch;margin:0 0 22px}
.ah-who{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ah-who button{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--line);border-radius:14px;padding:11px 14px;transition:background .25s,border-color .25s,color .25s;min-height:44px}
.ah-who button b{display:block;font:600 14px/1.25 var(--display);color:var(--ink)}
.ah-who button span{display:block;font-size:12px;line-height:1.35;color:var(--ink-2);margin-top:2px}
.ah-who button:hover{border-color:var(--ink)}
.ah-who button.on{background:var(--ink);border-color:var(--ink)}
.ah-who button.on b{color:var(--bg)}.ah-who button.on span{color:var(--bg);opacity:.72}
.ah-who button:focus-visible{outline:2px solid var(--cb-accent);outline-offset:2px}
.ah-card{background:var(--tile);border-radius:20px;padding:30px 32px 34px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.ah-card .n{font:600 12px/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ah-card q{display:block;font:italic 500 clamp(20px,2.1vw,27px)/1.32 var(--display);letter-spacing:-.02em;color:var(--ink);quotes:"“" "”";margin:16px 0 22px;transition:opacity .35s,transform .35s}
.ah-card .a{border-top:1px solid var(--line);padding-top:16px;transition:opacity .35s .05s,transform .35s .05s}
.ah-card .a small{display:block;font:600 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ah-text);margin-bottom:8px}
.ah-card .a b{display:block;font:600 18px/1.25 var(--display);letter-spacing:-.015em;color:var(--ink);margin-bottom:4px}
.ah-card .a p{font-size:14px;margin:0;line-height:1.45}
.ah-card.sw q,.ah-card.sw .a{opacity:0;transform:translateY(8px)}
.ah-card .bar{position:absolute;left:32px;right:32px;bottom:16px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.ah-card .bar i{display:block;height:100%;width:0;background:var(--ink)}
.ah-ask.auto .ah-card .bar i{animation:ahfill 4200ms linear}
@keyframes ahfill{from{width:0}to{width:100%}}

.ah-survey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.5fr);gap:14px;margin-top:clamp(36px,5vw,56px);align-items:stretch}
.ah-survey>div{border-top:2px solid var(--ink);padding-top:14px}
.ah-survey b{display:block;font:600 clamp(30px,3vw,40px)/1 var(--display);letter-spacing:-.03em;margin-bottom:8px}
.ah-survey b small{font-size:.45em;letter-spacing:0;margin-left:3px;color:var(--ink-2)}
.ah-survey span{display:block;font-size:13px;line-height:1.4;color:var(--ink-2)}
.ah-survey .note{border-top-color:var(--line)}
.ah-survey .note p{font-size:14px;line-height:1.5;margin:0}
.ah-survey .note p+p{margin-top:8px}
.ah-survey .note b{display:inline;font:inherit;font-weight:600;color:var(--ink);letter-spacing:0;margin:0}

/* ---- the three problem → solution chapters ---- */
.ah-chead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:start;margin-bottom:clamp(36px,5vw,56px)}
.ah-chead h2{margin-bottom:16px}
.ah-chead p{font-size:17px;max-width:48ch;margin:0 0 12px;line-height:1.55}
.ah-prob{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ah-prob figure{margin:0;min-width:0}
.ah-prob .ah-ph{position:relative;border-radius:16px;overflow:hidden;background:var(--tile);aspect-ratio:900/562}
.ah-prob img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
.ah-prob .tagp{position:absolute;left:10px;bottom:10px;font:600 12px/1 var(--display);color:#fff;background:rgba(29,29,31,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:7px 10px;border-radius:999px}
.ah-prob figcaption{font-size:13px;line-height:1.4;color:var(--ink-2);padding:8px 2px 0}
.ah-prob .lbl{grid-column:1/-1;font:600 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}

/* 01 — one press, two modes */
.ah-modes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr) minmax(0,1fr);gap:clamp(12px,2.5vw,32px);align-items:center;background:var(--tile);border-radius:24px;padding:clamp(20px,3vw,36px)}
.ah-modes figure{margin:0;text-align:center;min-width:0;transition:opacity .45s,transform .45s,filter .45s}
.ah-modes figure img{width:100%;height:auto;max-height:420px;object-fit:contain;margin:0 auto}
.ah-modes figcaption{font-size:13px;line-height:1.4;color:var(--ink-2);margin-top:10px}
.ah-modes figcaption b{display:block;font:600 16px var(--display);color:var(--ink);margin-bottom:2px}
.ah-modes[data-mode="rain"] .m-vent,.ah-modes[data-mode="vent"] .m-rain{opacity:.32;transform:scale(.94);filter:grayscale(.6)}
.ah-ctl{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ah-ctl svg.sch{width:100%;max-width:300px;height:auto;overflow:visible}
.ah-ctl .fs{fill:var(--bg);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.ah-ctl .slot{fill:var(--ink);opacity:.85}
[data-theme="dark"] .ah-ctl .fs{fill:#2c2c2e}
[data-theme="dark"] .ah-ctl .slot{fill:#000;opacity:1}
[data-theme="dark"] .ah-ctl .hs{fill:#48484c}
.ah-ctl .hs{fill:color-mix(in srgb,var(--ink) 18%,var(--bg));stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.ah-ctl .stripe{fill:none;stroke:var(--ink-2);stroke-width:3;stroke-linecap:round}
.ah-ctl .rh{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ah-modes[data-mode="vent"] .rh{transform:translate(14px,1px)}
.ah-ctl .lamp{fill:none;stroke:var(--cb-accent);stroke-width:3.5;stroke-linecap:round}
.ah-ctl .hinge{fill:var(--bg);stroke:var(--ink);stroke-width:1.6}
.ah-ctl .hinge-l{stroke:var(--ink);stroke-width:1.4;stroke-linecap:round}
.ah-ctl .visor{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:3 3}
.ah-ctl .strap{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round}
.ah-ctl .air{fill:none;stroke:#2aa3d8;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:6 6;opacity:0;transition:opacity .4s}
.ah-modes[data-mode="vent"] .air{opacity:1;animation:ahflow 1s linear infinite}
@keyframes ahflow{to{stroke-dashoffset:-24}}
.ah-ctl .push{fill:none;stroke:var(--cb-accent);stroke-width:2.6;stroke-linecap:round;opacity:0;transition:opacity .4s}
.ah-modes[data-mode="rain"] .push{opacity:1}
.ah-ctl .lbl{font:600 10px var(--display);fill:var(--ink-2);opacity:0;transition:opacity .4s}
.ah-modes[data-mode="vent"] .l-side,.ah-modes[data-mode="vent"] .l-out,.ah-modes[data-mode="rain"] .l-push,.ah-modes[data-mode="rain"] .l-seal{opacity:1}
.ah-ctl .rain line{stroke:#7b8a99;stroke-width:1.6;stroke-linecap:round;opacity:0;transition:opacity .4s}
.ah-modes[data-mode="rain"] .rain line{opacity:.9;animation:ahrain .9s linear infinite}
.ah-ctl .rain line:nth-child(2n){animation-delay:-.3s!important}.ah-ctl .rain line:nth-child(3n){animation-delay:-.6s!important}
@keyframes ahrain{from{transform:translateY(-10px);opacity:0}30%{opacity:.9}to{transform:translateY(14px);opacity:0}}
.ah-press{all:unset;box-sizing:border-box;cursor:pointer;width:84px;height:84px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1;font:600 13px/1.1 var(--display);box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 0 0 4px rgba(255,255,255,.08);transition:transform .15s,box-shadow .2s}
.ah-press:hover{transform:scale(1.04)}
.ah-press:active{transform:scale(.94)}
.ah-press:focus-visible{outline:2px solid var(--cb-accent);outline-offset:4px}
.ah-press b{font:inherit;font-size:15px}
.ah-press span{display:block;font-weight:500;font-size:11px;opacity:.7;margin-top:3px}
/* the hint that this is clickable: pulsing rings until the first click, a hand that taps it when the demo comes into view */
.ah-pressw{position:relative;width:84px;height:84px}
.ah-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--cb-accent);opacity:0;pointer-events:none}
.ah-modes.hinting .ah-ring{animation:ahring 2.4s cubic-bezier(.2,.7,.3,1) infinite}
.ah-modes.hinting .ah-ring.r2{animation-delay:1.2s}
@keyframes ahring{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.75);opacity:0}}
.ah-press.pressed{transform:scale(.9)}
.ah-hand{position:absolute;left:66%;top:62%;width:34px;height:34px;z-index:2;pointer-events:none;fill:#fff;stroke:#1d1d1f;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));opacity:0;transform:translate(14px,14px);transition:opacity .4s,transform .4s}
.ah-modes.demo .ah-hand{opacity:1;transform:none}
.ah-hand.tap{animation:ahtap .55s ease-in-out}
@keyframes ahtap{0%,100%{transform:none}40%{transform:translate(-5px,-6px) scale(.88)}}
.ah-tip{margin:-4px 0 0;font:500 12px/1.3 var(--display);color:var(--cb-accent);transition:opacity .4s}
.ah-modes:not(.hinting) .ah-tip{opacity:0}
.ah-seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--bg)}
.ah-seg button{all:unset;cursor:pointer;font:500 13px/1 var(--display);color:var(--ink-2);padding:9px 14px;border-radius:999px;transition:background .25s,color .25s}
.ah-seg button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.ah-seg button:focus-visible{outline:2px solid var(--cb-accent);outline-offset:2px}
.ah-ctl .say{font-size:13px;line-height:1.45;color:var(--ink-2);max-width:26ch;min-height:3.9em;margin:0}

/* 02 — AR display: projector sequence + HUD modes */
.ah-proj{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(40px,6vw,72px)}
.ah-proj h3,.ah-hud h3,.ah-lights h3{font:600 clamp(20px,2vw,26px)/1.2 var(--display);letter-spacing:-.02em;margin:0 0 10px}
.ah-proj p,.ah-hud p,.ah-lights p{font-size:16px;line-height:1.55;margin:0 0 12px;max-width:44ch}
.ah-stack{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#f4f5f4}
.ah-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .7s ease}
.ah-stack img.on{opacity:1}
.ah-steps3{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.ah-steps3 button{all:unset;cursor:pointer;font:500 13px/1 var(--display);color:var(--ink-2);border:1px solid var(--line);padding:9px 13px;border-radius:999px;transition:background .25s,color .25s,border-color .25s}
.ah-steps3 button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ah-steps3 button:focus-visible{outline:2px solid var(--cb-accent);outline-offset:2px}
.ah-hud{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:clamp(24px,4vw,56px);align-items:center}
.ah-tabs{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.ah-tabs li{border-bottom:1px solid var(--line)}
.ah-tabs button{all:unset;box-sizing:border-box;display:block;width:100%;padding:14px 0;cursor:pointer}
.ah-tabs b{display:flex;align-items:center;gap:10px;font:600 17px/1.2 var(--display);color:var(--ink-2);transition:color .25s}
.ah-tabs b i{font:600 11px var(--display);font-style:normal;letter-spacing:.1em;color:var(--ink-2);min-width:20px}
.ah-tabs p{font-size:14px;line-height:1.5;margin:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .35s,margin .35s}
.ah-tabs li.on b{color:var(--ink)}.ah-tabs li.on b i{color:var(--ah-text)}
.ah-tabs li.on p{max-height:120px;opacity:1;margin-top:8px}
.ah-tabs button:hover b{color:var(--ink)}
.ah-tabs button:focus-visible{outline:2px solid var(--cb-accent);outline-offset:2px}
.ah-hudfig{position:relative;aspect-ratio:1150/819;border-radius:20px;overflow:hidden;background:#1b1b1b}
.ah-hudfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s}
.ah-hudfig img.on{opacity:1}

/* 03 — head-tracked signals and the light modes */
.ah-lights{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:center}
.ah-rear{position:relative;border-radius:20px;overflow:hidden;background:#f5f5f5;aspect-ratio:960/1068;max-height:78svh;justify-self:center;width:100%;max-width:560px}
.ah-rear img{width:100%;height:100%;object-fit:contain;display:block}
/* lightbar states: an unlit base render + pre-rendered lit layers (no CSS mask, so it also works opened from disk) */
.ah-rear .lt{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .3s;pointer-events:none}
.ah-rear[data-light="brake"] .l-red{opacity:1;animation:ahpulse 1.2s ease-in-out infinite}
.ah-rear[data-light="night"] .l-night{opacity:1}
.ah-rear[data-light="day"] .l-white{opacity:.92}
.ah-rear[data-light="turn-l"] .l-aml,.ah-rear[data-light="turn-r"] .l-amr{opacity:1;animation:ahblink .7s steps(2,jump-none) infinite}
.ah-rear[data-light="bt"] .l-white{animation:ahbt 2.4s linear infinite}
.ah-rear[data-light="charge"] .l-white{opacity:1;animation:ahcharge 2.6s ease-in-out infinite}
.ah-rear[data-light="power"] .l-red{animation:ahfade 2.4s ease-in-out infinite}
@keyframes ahpulse{0%,100%{opacity:.5}45%{opacity:1}}
@keyframes ahblink{0%{opacity:1}100%{opacity:0}}
@keyframes ahfade{0%,100%{opacity:0}50%{opacity:1}}
@keyframes ahbt{0%,10%,20%,30%{opacity:0}5%,15%,25%{opacity:.95}100%{opacity:0}}
@keyframes ahcharge{0%{clip-path:inset(0 100% 0 0)}80%,100%{clip-path:inset(0 0 0 0)}}
.ah-rear .cap{position:absolute;left:14px;bottom:12px;font:600 12px/1 var(--display);color:#1d1d1f;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px 12px;border-radius:999px}
.ah-modelist{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ah-modelist button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--line);transition:background .25s,border-color .25s;min-height:44px}
.ah-modelist button:hover{border-color:var(--ink)}
.ah-modelist li.on button{background:var(--tile);border-color:var(--ink)}
.ah-modelist button:focus-visible{outline:2px solid var(--cb-accent);outline-offset:2px}
.ah-modelist b{font:600 14px/1.2 var(--display);color:var(--ink)}
.ah-desc{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2);min-height:4.5em;max-width:44ch}
.ah-desc b{color:var(--ink);font-weight:600}
/* the small light icons, drawn like the board's legend */
.li{flex:0 0 44px;height:14px;display:flex;align-items:center;justify-content:center;gap:4px}
.li i{display:block;height:10px;border-radius:6px;background:#d9d9de;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.li.pill i{width:40px}
.li.brake i,.li.night i{background:#ff6a2b;box-shadow:0 0 8px rgba(255,90,31,.7)}
.li.brake i{animation:ahpulse 1.2s ease-in-out infinite}
.li.turn i{width:18px}.li.turn i:first-child{background:#ff6a2b;box-shadow:0 0 8px rgba(255,90,31,.7);animation:ahblink .7s steps(2,jump-none) infinite}
.li.dots i{width:10px}.li.dots i:nth-child(1){animation:ahfade 1.5s infinite}.li.dots i:nth-child(2){animation:ahfade 1.5s .25s infinite}.li.dots i:nth-child(3){animation:ahfade 1.5s .5s infinite}
.li.dots i{background:#cfd3da}
.li.chg i:first-child{width:10px}.li.chg i:last-child{width:26px;background:linear-gradient(90deg,#f2f2f2 60%,#d9d9de 60%)}
[data-theme="dark"] .li i{background:#5a5a60;box-shadow:none}
[data-theme="dark"] .li.day i,[data-theme="dark"] .li.power i,[data-theme="dark"] .li.chg i:last-child{background:#e9e9ee}
[data-theme="dark"] .li.brake i,[data-theme="dark"] .li.night i{background:#ff6a2b}
[data-theme="dark"] .li.turn i:first-child{background:#ff6a2b}
[data-theme="dark"] .li.dots i{background:#e9e9ee}

/* ---- key features: renders shown whole ---- */
.ah-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
.ah-feats figure{margin:0;min-width:0}
.ah-feats .ah-ph{aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#f4f5f4}
.ah-feats img{width:100%;height:100%;object-fit:contain;display:block}
.ah-feats figcaption{padding:14px 4px 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.ah-feats figcaption b{display:block;font:600 18px/1.2 var(--display);letter-spacing:-.015em;color:var(--ink);margin-bottom:6px}

/* ---- on the road ---- */
.ah-use{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(20px,3vw,40px);align-items:center}
.ah-use .sc{border-radius:20px;overflow:hidden;background:var(--tile);max-height:76svh}
.ah-use .sc img{width:100%;height:auto;max-height:76svh;object-fit:contain;display:block;margin:0 auto}
.ah-use .pov{border-radius:20px;overflow:hidden;background:#1b1b1b;margin-top:22px}
.ah-use .pov img{width:100%;height:auto;display:block}
.ah-use h2{margin-bottom:16px}
.ah-use p{font-size:17px;max-width:52ch;margin:0 0 10px;line-height:1.55}
.ah-use figcaption{font-size:13px;color:var(--ink-2);margin-top:8px}

/* ---- CMF ---- */
.ah-cmf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ah-cmf>div{background:var(--tile);border-radius:20px;overflow:hidden;min-width:0}
.ah-cmf img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;background:#fff}
.ah-cmf .t{padding:16px 18px 20px}
.ah-cmf b{display:block;font:600 16px/1.25 var(--display);letter-spacing:-.01em;color:var(--ink);margin-bottom:10px}
.ah-cmf dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:13px;line-height:1.4}
.ah-cmf dt{color:var(--ink);font-weight:600}
.ah-cmf dd{margin:0;color:var(--ink-2)}
.ah-pledge{display:flex;align-items:center;justify-content:center;gap:12px;margin:28px 0 0;font:500 italic clamp(15px,1.4vw,18px)/1.4 var(--display);color:var(--ink-2);text-align:center}
.ah-pledge svg{width:26px;height:26px;flex:none;color:var(--ink-2)}

/* ---- process boards: stepper from cloudbuds.css, boards shown whole on white ---- */
.ah .steps .stage .fig{aspect-ratio:16/9;background:#fff}
.ah .steps .sl img{object-fit:contain}
.ah .steps .thumbs button{aspect-ratio:16/9;background:#fff}
.ah .steps.titled{grid-template-columns:1.45fr 1fr}
.ah .steps.titled .stage{position:relative}            /* keeps the arrows on the board when cloudbuds.css drops the sticky stage on phones */
@media(min-width:861px){.ah .steps.titled .stage{position:sticky;top:96px}}

/* ---- brand ---- */
.ah-brand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ah-brand figure{margin:0;border-radius:20px;overflow:hidden;background:#eceeef;aspect-ratio:16/9}
.ah-brand figure.wide{grid-column:1/-1}
.ah-brand img{width:100%;height:100%;object-fit:contain;display:block}

/* ---- recognition ---- */
.ah-awards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ah-awards>div{background:var(--tile);border-radius:20px;padding:22px;display:flex;flex-direction:column;justify-content:flex-start;gap:18px;min-height:0}
.ah-awards .lg{display:flex;align-items:center;height:76px}
.ah-awards .lg img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.ah-awards b{display:block;font:600 16px/1.25 var(--display);letter-spacing:-.01em;color:var(--ink);margin-bottom:-12px}
.ah-awards span{font-size:13px;line-height:1.4;color:var(--ink-2)}

@media(max-width:1000px){
  .ah-survey{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ah-survey .note{grid-column:1/-1}
}
@media(max-width:900px){
  .ah .cb-hero .wrap{grid-template-columns:1fr}
  .ah .cb-hero{padding-top:96px}
  .ah-hero-img{max-width:min(100%,46svh)}
  .ah-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ah-ask,.ah-chead,.ah-proj,.ah-hud,.ah-lights,.ah-use{grid-template-columns:1fr}
  .ah-card{min-height:0;padding:24px 22px 34px}
  .ah-card .bar{left:22px;right:22px;bottom:14px}
  .ah-modes{grid-template-columns:1fr 1fr;padding:18px}
  .ah-ctl{grid-column:1/-1;order:-1}
  .ah-modes figure img{max-height:300px}
  .ah-cmf,.ah-awards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ah-use .sc{max-width:min(100%,420px);justify-self:center}
  .ah .steps.titled{grid-template-columns:1fr}
}
@media(max-width:600px){
  .ah-stats>div{padding:18px 16px 20px}
  .ah-stats span{font-size:13px}
  .ah-survey{grid-template-columns:1fr 1fr;gap:18px 14px}
  .ah-who{grid-template-columns:1fr 1fr}
  .ah-prob{gap:10px}
  .ah-prob figcaption{font-size:12px}
  .ah-feats,.ah-brand{grid-template-columns:1fr}
  .ah-modelist{grid-template-columns:1fr 1fr}
  .ah-cmf{gap:10px}
  .ah-cmf .t{padding:12px 12px 14px}
  .ah-cmf dl{grid-template-columns:1fr;gap:0 0}
  .ah-cmf dd{margin-bottom:6px}
  .ah-awards{gap:10px}
  .ah-awards>div{padding:16px;min-height:0}.ah-awards .lg{height:60px}
  .ah-pledge{flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .ah-ctl .air,.ah-ctl .rain line,.ah-ctl .rh,.li i,.ah-rear .lt{animation:none!important}
  .ah-modes.hinting .ah-ring{animation:none;opacity:.5;transform:scale(1.18)}.ah-ring.r2{display:none}
  .ah-rear[data-light="brake"] .l-red,.ah-rear[data-light="power"] .l-red,.ah-rear[data-light="bt"] .l-white,.ah-rear[data-light="turn-l"] .l-aml,.ah-rear[data-light="turn-r"] .l-amr{opacity:1}
}

/* 10/16 Leo: every award as its logo, side by side like XIONGDA's row — no tiles, no typed names (kept for screen readers) */
.ah-awards{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px 56px;grid-template-columns:none}
.ah-awards>div{background:none;border-radius:0;padding:0;display:block;min-height:0}
.ah-awards .lg{display:block;height:auto;line-height:0}
.ah-awards .lg img{height:var(--h,76px);width:auto;max-width:none}
.ah-awards>div:nth-child(1) .lg img{--h:78px}
.ah-awards>div:nth-child(2) .lg img{--h:52px}   /* IDEA: the SOP art carries the name, wider */
.ah-awards>div:nth-child(3) .lg img{--h:92px}
.ah-awards>div:nth-child(4) .lg img{--h:80px}
.ah-awards b,.ah-awards>div>span:not(.lg){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:640px){.ah-awards{gap:18px 20px}.ah-awards .lg img{height:calc(var(--h,76px) * .72)}}

/* 10/21 (Leo "奖项往前放 和其他的一致"): the award logos sit under the hero meta, like XIONGDA's Recognition row (xiongda.css
   .xd-awards); the later Recognition section and the front / side / rear board ("ar这个去掉这个图") are gone */
.ah-rec{margin-top:34px}
.ah-rec>b{display:block;color:var(--ink);font-family:var(--display);font-size:14px;margin-bottom:14px}
.ah-rec .logos{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.ah-rec img{display:block;width:auto;height:var(--h)}
.ah-rec .rd{--h:48px}.ah-rec .idea{--h:34px}.ah-rec .muse{--h:72px}.ah-rec .ida{--h:64px}
@media(max-width:560px){.ah-rec .logos{gap:14px}.ah-rec img{height:calc(var(--h) * .8)}}