/* Metal landings (gold, silver, copper), 2026-11-02. One layout; <body data-metal> picks the metal's mood:
   its tokens here, its vector scene in the page script. Shell, eyebrow, facts and buttons come from index <style> and pages.css.
   No decorative box-shadow; depth comes from glass, hairlines and the scene. */
body[data-metal="gold"]{--m:var(--gold);--m-ink:var(--gold-ink);--m-mist:var(--mist-gold);
  --m-g1:#8C6519;--m-g2:#D9B65E;--m-g3:#6E4E12}
body[data-metal="silver"]{--m:var(--silver);--m-ink:var(--silver-ink);--m-mist:color-mix(in srgb,var(--silver) 24%,transparent);
  --m-g1:#56657A;--m-g2:#A9B6C6;--m-g3:#3E4A5C}
body[data-metal="copper"]{--m:var(--copper);--m-ink:var(--copper-ink);--m-mist:color-mix(in srgb,var(--copper) 24%,transparent);
  --m-g1:#8E4E2C;--m-g2:#D58A5E;--m-g3:#6B3820}
/* dark: the canvas takes a breath of the metal, the sheen gets its bright highlight */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  body[data-metal]{--bg:color-mix(in srgb,var(--m) 5%,#0B1220);--surface:color-mix(in srgb,var(--m) 5%,#131F37)}
  body[data-metal="gold"]{--m-g1:#E4C277;--m-g2:#FFF1C9;--m-g3:#B58B2A}
  body[data-metal="silver"]{--m-g1:#C5CFDB;--m-g2:#FFFFFF;--m-g3:#8190A2}
  body[data-metal="copper"]{--m-g1:#E3A27E;--m-g2:#FFD9C2;--m-g3:#B8714A}}}
:root[data-theme="dark"] body[data-metal]{--bg:color-mix(in srgb,var(--m) 5%,#0B1220);--surface:color-mix(in srgb,var(--m) 5%,#131F37)}
:root[data-theme="dark"] body[data-metal="gold"]{--m-g1:#E4C277;--m-g2:#FFF1C9;--m-g3:#B58B2A}
:root[data-theme="dark"] body[data-metal="silver"]{--m-g1:#C5CFDB;--m-g2:#FFFFFF;--m-g3:#8190A2}
:root[data-theme="dark"] body[data-metal="copper"]{--m-g1:#E3A27E;--m-g2:#FFD9C2;--m-g3:#B8714A}
body[data-metal]{background:var(--bg)}
body[data-metal] ::selection{background:color-mix(in srgb,var(--m) 32%,transparent)}
.m-dot{background:var(--m)}
.m-progress{position:fixed;z-index:80;top:0;inset-inline:0;height:3px;transform:scaleX(0);transform-origin:right;pointer-events:none;
  background:linear-gradient(90deg,var(--m-g3),var(--m-g2),var(--m-g1))}

/* ---------- vector scenes ---------- */
.m-scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.m-scene *{transform-box:view-box;transform-origin:300px 300px}
/* gold: slow sunburst and rising molten motes */
.sc-rays{stroke:var(--m);animation:spin 160s linear infinite}
.sc-halo{fill:none;stroke:var(--m);stroke-width:1;stroke-dasharray:2 7;opacity:.55;animation:spin 60s linear infinite reverse}
.sc-motes circle{fill:var(--m-g2);opacity:0;animation:mote var(--t) ease-in infinite var(--dl)}
@keyframes mote{0%{opacity:0;translate:0 0}18%{opacity:.95}100%{opacity:0;translate:var(--dx) -240px}}
/* silver: moonlit ripples, tilted orbits and twinkling stars */
.sc-ripple{fill:none;stroke:var(--m);stroke-width:1.2;opacity:0;animation:ripple 9s cubic-bezier(.2,.6,.3,1) infinite var(--dl)}
@keyframes ripple{0%{scale:.6;opacity:0}25%{opacity:.7}100%{scale:1.9;opacity:0}}
.sc-orbs{fill:none;stroke:var(--m);stroke-width:1;opacity:.45;animation:spin 90s linear infinite}
.sc-star{fill:var(--m-g2);transform-box:fill-box;transform-origin:center;animation:twinkle var(--t) ease-in-out infinite var(--dl)}
@keyframes twinkle{50%{opacity:.15;scale:.4}}
/* copper: circuit traces with current running to the nodes */
.sc-wires{fill:none;stroke:var(--m);stroke-width:1.2;opacity:.3}
.sc-pulses{fill:none;stroke:var(--m-g2);stroke-width:2.4;stroke-linecap:round}
.sc-pulses path{stroke-dasharray:9 91;animation:current var(--t) linear infinite var(--dl)}
@keyframes current{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.sc-nodes circle{fill:var(--bg);stroke:var(--m);stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:node 2.4s ease-in-out infinite var(--dl)}
@keyframes node{50%{fill:var(--m);scale:1.35}}
.sc-chip{fill:none;stroke:var(--m);stroke-width:1;stroke-dasharray:3 6;opacity:.4}
.sc-chip rect:nth-child(2){animation:spin 120s linear infinite}

/* ---------- hero ---------- */
.m-hero{position:relative;padding-bottom:40px;overflow-x:clip}
.m-hero::before{content:"";position:absolute;inset:-10% -10% 0 -40%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 55% at 22% 45%,var(--m-mist),transparent 70%),radial-gradient(30% 40% at 6% 80%,var(--mist-a),transparent 70%);opacity:.9}
.m-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.m-hero h1,.m-hero .lead{max-width:560px}
.m-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--m-g1) 20%,var(--m-g2) 45%,var(--m-g3) 60%,var(--m-g1) 85%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:textSheen 5s var(--ease) infinite}
@keyframes textSheen{0%{background-position:100% 0}70%,100%{background-position:-60% 0}}
.m-copy>*{animation:flowIn .8s var(--out) both}
.m-copy>:nth-child(2){animation-delay:.06s}.m-copy>:nth-child(3){animation-delay:.12s}.m-copy>:nth-child(4){animation-delay:.18s}
.m-copy>:nth-child(5){animation-delay:.24s}.m-copy>:nth-child(6){animation-delay:.3s}
.m-points{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px;font-size:14px;color:var(--muted)}
.m-points li{display:flex;align-items:center;gap:8px}
.m-points svg{width:18px;height:18px;color:var(--m-ink)}
.m-art{--px:0;--py:0;position:relative;aspect-ratio:1/.92;display:grid;place-items:center;isolation:isolate;perspective:900px}
.m-art .m-scene{inset:-14%;width:128%;height:128%;z-index:-1;translate:calc(var(--px)*-26px) calc(var(--py)*-26px);transition:translate .6s var(--out);
  -webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent);animation:sceneIn 1.4s var(--out) both}
@keyframes sceneIn{from{opacity:0;scale:.85}}
.m-float{width:40%;animation:barIn 1.2s var(--out) .15s both,bob 7s ease-in-out 1.35s infinite}
@keyframes barIn{from{opacity:0;transform:translateY(60px) scale(.88);filter:blur(10px)}}
.m-bar{position:relative;transform:rotateY(calc(var(--px)*22deg)) rotateX(calc(var(--py)*-16deg)) rotate(-9deg);transition:transform .5s var(--out);
  filter:drop-shadow(0 28px 30px color-mix(in srgb,var(--m) 30%,transparent))}
.m-bar img{display:block;width:100%;height:auto}
/* a highlight that sweeps across the bar, clipped to the bar's own shape */
.m-bar::after{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--img) center/100% 100% no-repeat;mask:var(--img) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);background-size:300% 100%;mix-blend-mode:overlay;animation:sweep 4.8s var(--ease) 1.6s infinite}
@keyframes sweep{0%{background-position:120% 0}55%,100%{background-position:-20% 0}}
.m-el{position:absolute;z-index:1;inset-inline-start:6%;top:6%;display:grid;justify-items:start;gap:0;width:96px;padding:10px 12px;line-height:1.2;animation:flowIn .8s var(--out) .5s both}
.m-el .z{font-size:12px;color:var(--muted)}
.m-el b{font-family:ui-serif,Georgia,serif;direction:ltr;font-size:34px;font-weight:600;background:linear-gradient(135deg,var(--m-g1),var(--m-g2),var(--m-g3));-webkit-background-clip:text;background-clip:text;color:transparent}
.m-el small{direction:ltr;font-size:12px;color:var(--muted);letter-spacing:.04em}
.m-live{position:absolute;z-index:1;inset-inline-start:0;bottom:12%;display:grid;gap:2px;padding:14px 16px;min-width:220px;animation:flowIn .8s var(--out) .7s both,bob 6s ease-in-out 1.5s infinite}
.m-live .small{display:flex;align-items:center;gap:8px}
.m-ping{position:relative;width:8px;height:8px;border-radius:50%;background:var(--up)}
.m-ping::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--up);animation:livePing 1.8s var(--out) infinite}
.m-live b{font-size:22px;font-weight:750;line-height:1.5}
.m-live b small{font-size:13px;font-weight:500;color:var(--muted)}
.m-live .chg{justify-self:start}
.m-chip{position:absolute;z-index:1;inset-inline-end:0;bottom:24%;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;font-size:13px;font-weight:600;animation:flowIn .8s var(--out) .85s both,bob 6s ease-in-out 2s infinite}
.m-chip .ico{width:32px;height:32px;border-radius:10px}
.m-chip .ico svg{width:16px;height:16px}

/* ---------- live tape ---------- */
.m-tape{position:relative;overflow:hidden;padding:0;margin-top:8px;border-block:1px solid var(--line);background:var(--surface);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.m-tape-track{display:flex;width:max-content;animation:tape 38s linear infinite}
.m-tape:hover .m-tape-track,.m-tape:focus-within .m-tape-track{animation-play-state:paused}
@keyframes tape{to{translate:50% 0}}
.m-tape-set{display:flex}
.m-tick{display:flex;align-items:center;gap:8px;padding:14px 28px;font-size:14px;white-space:nowrap;border-inline-end:1px solid var(--line);color:var(--muted)}
.m-tick i{width:10px;height:10px;border-radius:3px;rotate:45deg;background:var(--gold)}
.m-tick[data-m="silver"] i{background:var(--silver)}.m-tick[data-m="copper"] i{background:var(--copper)}
.m-tick b{color:var(--text);font-weight:650}
.m-tick .num{color:var(--text);font-weight:600}
.m-tick small{font-size:12px}
.m-tick .chg{font-size:13px}
.m-tick[aria-current="page"] b{color:var(--m-ink)}
.m-tick:hover b{text-decoration:underline;text-underline-offset:4px}

/* ---------- market pulse ---------- */
.m-price{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px}
.m-quote{padding:28px;display:grid;gap:18px;align-content:start}
.m-qhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.m-qrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.m-qrow[hidden]{display:none}
.m-qrow b{font-size:22px;font-weight:750}
.m-qrow b small{font-size:13px;font-weight:500;color:var(--muted)}
.m-calc{display:grid;gap:10px}
.m-calc-t{font-size:14px;font-weight:650}
.m-eq{display:grid;gap:10px;padding:14px 16px;border-radius:var(--r-lg);background:var(--subtle)}
.m-eq ul{list-style:none;display:grid;gap:8px}
.m-eq li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.m-eq li i{width:10px;height:10px;border-radius:3px;rotate:45deg;flex:none;background:var(--gold)}
.m-eq li[data-o="silver"] i{background:var(--silver)}.m-eq li[data-o="copper"] i{background:var(--copper)}
.m-eq b{color:var(--text);font-weight:700;font-size:16px}
.m-chart{padding:28px;display:grid;gap:16px;align-content:start}
.m-chart-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.m-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.m-tiles button{position:relative;display:grid;justify-items:start;gap:2px;padding:10px 12px 0;border-radius:var(--r-md);border:1px solid var(--ring);background:var(--surface);text-align:start;overflow:hidden;
  transition:border-color .2s,background-color .2s,translate .25s var(--out)}
.m-tiles button:hover{translate:0 -2px;border-color:var(--line-strong)}
.m-tiles button[aria-pressed="true"]{border-color:color-mix(in srgb,var(--m) 60%,transparent);background:color-mix(in srgb,var(--m) 8%,var(--surface))}
.m-tiles .chg{font-size:15px}
.m-tiles button>svg{width:calc(100% + 24px);height:28px;margin-inline:-12px;margin-top:4px}
.m-tiles path{fill:none;stroke:var(--up);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.m-tiles .neg path{stroke:var(--down)}
.m-plot{position:relative;height:260px;border-radius:var(--r-lg);overflow:hidden;touch-action:pan-y;cursor:crosshair}
.m-plot .dots{-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent);opacity:.6}
.m-plot svg{position:absolute;inset:0;width:100%;height:100%}
.m-load{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:var(--muted)}
.m-cross{position:absolute;top:0;bottom:0;width:1px;background:var(--line-strong);opacity:0;transition:opacity .15s;pointer-events:none}
.m-cross i{position:absolute;top:var(--y);left:-5px;width:11px;height:11px;margin-top:-5px;border-radius:50%;background:var(--m);border:2px solid var(--surface)}
.m-tip{position:absolute;display:grid;gap:0;padding:6px 10px;font-size:13px;translate:-50% calc(-100% - 14px);opacity:0;pointer-events:none;transition:opacity .15s;white-space:nowrap}
.m-tip small{color:var(--muted);font-size:12px}
.m-plot.hov .m-cross,.m-plot.hov .m-tip{opacity:1}
.m-band{display:grid;gap:8px}
.m-band-top{display:flex;justify-content:space-between;gap:12px}
.m-band-top b{color:var(--text);font-weight:650}
.m-band-bar{position:relative;height:8px;border-radius:99px;background:var(--subtle);border:1px solid var(--ring)}
.m-band-bar i{position:absolute;inset:0;border-radius:inherit;transform-origin:right;transform:scaleX(0);background:linear-gradient(270deg,var(--m-g3),var(--m-g2));transition:transform 1.1s var(--out)}
.m-band-bar span{position:absolute;top:50%;inset-inline-start:0;width:16px;height:16px;margin-inline-start:-8px;translate:0 -50%;border-radius:50%;background:var(--surface);border:3px solid var(--m);transition:inset-inline-start 1.1s var(--out)}
.m-band-note{color:var(--muted)}
.m-hind{display:grid;gap:10px;padding:16px;border-radius:var(--r-lg);border:1px dashed color-mix(in srgb,var(--m) 45%,var(--line))}
.m-hind p{font-size:15px;line-height:2;color:var(--muted)}
.m-hind p b{color:var(--text);font-weight:700}
.m-hind p .chg{margin-inline-start:4px}
.m-amts{display:flex;gap:6px;flex-wrap:wrap}
.m-amts button{min-height:34px;padding:0 14px;border-radius:99px;font-size:13px;font-weight:550;color:var(--muted);border:1px solid var(--ring-strong);transition:background-color .18s,color .18s,border-color .18s}
.m-amts button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy);border-color:transparent}

/* ---------- why: sticky stage and reasons ---------- */
.m-story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.m-stage{position:sticky;top:110px;aspect-ratio:1;display:grid;place-items:center;border-radius:28px;background:var(--surface);border:1px solid var(--ring);overflow:hidden;isolation:isolate}
.m-stage .m-scene{z-index:-1;-webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent)}
.m-ring{position:absolute;width:62%;rotate:-90deg}
.m-ring circle{fill:none;stroke-width:3}
.m-ring .trk{stroke:var(--line)}
.m-ring .val{stroke:var(--m);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:75;transition:stroke-dashoffset .8s var(--out)}
.m-stage-ico{position:relative;width:34%;aspect-ratio:1;display:grid}
.m-stage-ico .ico{grid-area:1/1;width:100%;height:100%;border-radius:50%;background:color-mix(in srgb,var(--m) 12%,var(--surface));color:var(--m-ink);
  opacity:0;scale:.6;filter:blur(8px);transition:opacity .5s var(--out),scale .6s var(--out),filter .5s var(--out)}
.m-stage-ico .ico.on{opacity:1;scale:1;filter:none}
.m-stage-ico .ico svg{width:46%;height:46%}
.m-stage-n{position:absolute;bottom:22px;inset-inline-start:24px;display:flex;align-items:baseline;gap:6px;font-size:14px;color:var(--muted)}
.m-stage-n b{font-size:28px;font-weight:700;color:var(--text)}
.m-reasons{list-style:none;display:grid}
.m-reason{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:start;padding:60px 0;border-bottom:1px solid var(--line);opacity:.4;transition:opacity .5s var(--out)}
.m-reason:first-child{padding-top:8px}
.m-reason.on{opacity:1}
.m-reason .n{grid-row:span 2;font-size:44px;font-weight:600;line-height:1;color:transparent;-webkit-text-stroke:1px var(--m);transition:color .5s}
.m-reason.on .n{color:var(--m)}
.m-reason .ico{display:none}
.m-reason h3{font-size:22px;margin-bottom:8px}
.m-reason p{font-size:16px;line-height:2;color:var(--muted);text-wrap:pretty;max-width:520px}

/* ---------- specs ---------- */
.m-spec{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;padding:16px;border-radius:24px;background:var(--surface);border:1px solid var(--ring)}
.m-spec>div:last-child{display:grid;gap:16px;padding:16px 8px 16px 24px}
.m-spec h2{font-size:24px}
.m-spec-art{--sp:.5;position:relative;min-height:340px;height:100%;border-radius:16px;background:var(--subtle);display:grid;place-items:center;overflow:hidden;isolation:isolate}
.m-spec-art .m-scene{z-index:-1;opacity:.8;-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}
.m-spec-art>img{position:relative;width:58%;height:auto;transform:rotate(calc(-14deg + var(--sp)*28deg)) translateY(calc((.5 - var(--sp))*40px)) scale(calc(.92 + var(--sp)*.12))}
.m-el.big{inset-inline-start:auto;inset-inline-end:16px;top:16px;animation:none}
.m-facts li{grid-template-columns:150px 1fr;align-items:baseline;gap:16px}
.m-facts span{font-size:14px}
.m-facts b{font-size:16px;font-weight:600;line-height:1.8}

/* ---------- steps: a line that fills with the scroll ---------- */
.m-steps-wrap{position:relative}
.m-track{position:absolute;top:27px;inset-inline:12.5%;height:2px;background:var(--line)}
.m-track i{--p:0;position:absolute;inset:0;transform-origin:right;transform:scaleX(var(--p));background:linear-gradient(270deg,var(--m-g3),var(--m-g2),var(--m))}
.m-steps{list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.m-steps li{display:grid;justify-items:center;text-align:center;gap:6px;align-content:start;padding:0 8px}
.m-steps .n{display:grid;place-items:center;width:56px;height:56px;margin-bottom:14px;border-radius:50%;font-size:20px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line-strong);
  transition:background-color .4s,color .4s,border-color .4s,scale .5s var(--out)}
.m-steps li.on .n{background:var(--m);border-color:var(--m);color:#fff;scale:1.06}
.m-steps h3{font-size:17px}
.m-steps p{font-size:14px;line-height:1.9;color:var(--muted);max-width:240px}

/* ---------- services: a metal light follows the pointer ---------- */
.m-svcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.m-svc{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:6px;align-content:start;padding:22px;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--ring);transition:border-color .18s,translate .25s var(--ease)}
.m-svc::before{content:"";position:absolute;z-index:-1;inset:0;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--x,50%) var(--y,0),var(--m-mist),transparent 70%)}
.m-svc:hover{border-color:color-mix(in srgb,var(--m) 45%,var(--line));translate:0 -3px}
.m-svc:hover::before{opacity:1}
.m-svc .ico{margin-bottom:14px;color:var(--m-ink);transition:rotate .4s var(--out),scale .4s var(--out)}
.m-svc:hover .ico{rotate:-8deg;scale:1.08}
.m-svc p{font-size:14px;line-height:1.9;color:var(--muted)}
.m-svc .go{position:absolute;top:22px;inset-inline-end:22px;color:var(--muted);transition:translate .18s var(--ease),color .18s}
.m-svc .go svg{width:18px;height:18px}
.m-svc:hover .go{translate:-3px 0;color:var(--text)}

/* ---------- closing CTA and the two other metals ---------- */
.m-end{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.m-cta{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:24px;align-items:center;padding:36px;border-radius:24px;background:var(--surface);border:1px solid var(--ring)}
.m-cta .m-scene{z-index:-1;inset:-30% -40% -30% auto;width:90%;height:160%;opacity:.7;-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}
[dir="rtl"] .m-cta .m-scene{inset:-30% auto -30% -30%}
.m-cta-copy{display:grid;gap:10px;align-content:start;justify-items:start}
.m-cta h2{font-size:24px}
.m-cta h2 em{font-style:normal;color:var(--m-ink)}
.m-cta .lead{font-size:15px}
.m-cta .ctas{margin-top:8px}
.m-cta-art{height:230px;display:grid;place-items:center}
.m-cta-art .m-bar{width:112px;transform:rotate(8deg);animation:bob 6s ease-in-out infinite}
.m-others{display:grid;gap:12px}
.m-other{--o:var(--gold);position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--ring);transition:border-color .25s}
.m-other[data-m="silver"]{--o:var(--silver)}.m-other[data-m="copper"]{--o:var(--copper)}
.m-other::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(270deg,color-mix(in srgb,var(--o) 16%,transparent),transparent 70%);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--out)}
.m-other:hover{border-color:color-mix(in srgb,var(--o) 50%,var(--line))}
.m-other:hover::before{transform:none}
.m-other img{width:52px;height:auto;rotate:-8deg;flex:none;transition:rotate .5s var(--out),scale .5s var(--out)}
.m-other:hover img{rotate:4deg;scale:1.08}
.m-other span{display:grid;flex:1;min-width:0}
.m-other b{font-size:17px;font-weight:650}
.m-other small{font-size:14px;color:var(--muted)}
.m-other>svg{width:20px;height:20px;color:var(--muted);transition:translate .18s var(--ease)}
.m-other:hover>svg{translate:-3px 0;color:var(--text)}

@media (max-width:1024px){
  .m-svcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-end{grid-template-columns:1fr}
  .m-others{grid-template-columns:1fr 1fr}
  .m-price{grid-template-columns:1fr}
}
@media (max-width:820px){
  .m-hero .wrap,.m-spec,.m-story{grid-template-columns:1fr}
  .m-art{max-width:460px;width:100%;justify-self:center}
  .m-spec{gap:8px}
  .m-spec>div:last-child{padding:12px 8px}
  .m-spec-art{min-height:240px}
  .m-spec-art>img{width:42%}
  /* the stage stays out of the way on small screens; each reason carries its own icon */
  .m-stage{display:none}
  .m-reason{opacity:1;padding:28px 0}
  .m-reason .ico{display:grid;grid-row:span 2;width:48px;height:48px;color:var(--m-ink)}
  .m-reason .n{display:none}
  .m-reason h3{font-size:18px}
  .m-reason p{font-size:15px}
  /* steps run down the start edge */
  .m-track{top:28px;bottom:28px;inset-inline:auto;inset-inline-start:27px;width:2px;height:auto}
  .m-track i{transform-origin:top;transform:scaleY(var(--p));background:linear-gradient(180deg,var(--m),var(--m-g2),var(--m-g3))}
  .m-steps{grid-template-columns:1fr;gap:24px}
  .m-steps li{grid-template-columns:56px 1fr;justify-items:start;text-align:start;column-gap:16px;padding:0}
  .m-steps .n{grid-row:span 2;margin:0}
  .m-steps p{max-width:none}
}
@media (max-width:520px){
  .m-svcs,.m-others{grid-template-columns:1fr}
  .m-quote,.m-chart{padding:20px}
  .m-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-plot{height:220px}
  .m-live{min-width:0;padding:10px 12px;bottom:4%}
  .m-live b{font-size:18px}
  .m-el{width:78px;padding:8px 10px}
  .m-el b{font-size:26px}
  .m-chip{display:none}
  .m-facts li{grid-template-columns:1fr;gap:2px}
  .m-cta{grid-template-columns:1fr;padding:28px 22px}
  .m-cta-art{display:none}
  .m-tick{padding:12px 20px}
}
@media (prefers-reduced-motion:reduce){
  .m-tape-track{flex-wrap:wrap;width:auto}
  .m-tape-set[aria-hidden="true"],.m-tape-set>[aria-hidden="true"]{display:none}
  .m-reason{opacity:1}
}