/* Metal landings (gold, silver, copper), second pass 2026-11-02. One layout; <body data-metal> picks the metal's tokens.
   Owner feedback on the first pass: hero too busy and its motion dated, the price tape redundant, the market tools tangled,
   the "why" icons too plain, "in Shemsh" too boxed, the steps too thin. So: a calm hero with one 3D bar (metal3d.js),
   tools that each say what they show, 3D objects for the reasons, and hairlines with room instead of cards.
   Shell, eyebrow, buttons and fields come from index <style> and pages.css. The only shadows are the tactile layer at the end. */
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)}
body[data-metal] .sec{padding:120px 0}
.m-dot{background:var(--m)}
.m-progress{position:fixed;z-index:80;top:0;inset-inline:0;height:2px;transform:scaleX(0);transform-origin:right;pointer-events:none;
  background:linear-gradient(90deg,var(--m-g3),var(--m-g2),var(--m-g1))}
/* every WebGL host: the canvas fills it and fades in once the first frame is painted */
.m-3d{position:relative}
.m-3d>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s var(--out)}
.m-3d>canvas.on{opacity:1}
.m-ping{position:relative;width:8px;height:8px;border-radius:50%;background:var(--up);flex:none}
.m-ping::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--up);animation:livePing 1.8s var(--out) infinite}

/* ---------- hero: copy and one 3D bar, nothing floating around it ---------- */
.m-hero{position:relative;padding:24px 0 0;overflow-x:clip}
/* the sub-pages' green mist on the right (pages.css .page-hero .mist.b) */
.m-hero .mist.b{width:360px;height:240px;inset-inline-start:-80px;top:40px;background:radial-gradient(closest-side,var(--mist-b),transparent);opacity:.7}
.m-hero .wrap{position:relative}
.m-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:center;min-height:min(680px,calc(100svh - 96px))}
/* the title is set like the landing's hero title (index .flow h1): same size and weight, each line rising in */
/* (owner, 5 Nov) the breadcrumb "شمش / خرید طلا" reads as a title: larger and bolder */
.m-hero .crumbs{font-size:17px;font-weight:700;color:var(--text)}
.m-hero .crumbs a{color:var(--muted);font-weight:600}
.m-hero .crumbs>span:last-child{font-weight:800}
.m-hero h1{max-width:620px;font-size:clamp(25px,2.05vw,30px);line-height:1.6;font-weight:900;margin:14px 0 4px}
.m-hero h1 .ln{display:block;overflow:hidden;padding-block:.14em;margin-block:-.14em}
.m-hero h1 .ln>span{display:block;transform-origin:100% 0;animation:flowUp 1.1s var(--out) both;animation-delay:calc(var(--i,0)*90ms + 150ms)}
.m-hero h1 em,#whyTitle 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 6s var(--ease) 1s infinite}
@keyframes textSheen{0%{background-position:100% 0}60%,100%{background-position:-60% 0}}
.m-hero .lead{font-size:17px;max-width:31em}
.m-hero .ctas{margin-top:28px}
/* a soft focus-pull for the copy, one line after the other */
.m-copy>*{animation:mIn 1s var(--out) both}
.m-copy>h1{animation:none}
.m-copy>:nth-child(2){animation-delay:.08s}.m-copy>:nth-child(3){animation-delay:.16s}.m-copy>:nth-child(4){animation-delay:.24s}
.m-copy>:nth-child(5){animation-delay:.32s}.m-copy>:nth-child(6){animation-delay:.4s}
@keyframes mIn{from{opacity:0;transform:translateY(20px);filter:blur(10px)}}
.m-today{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);max-width:31em;font-size:14px;color:var(--muted);transition:color .18s}
.m-today b{font-size:16px;font-weight:700;color:var(--text)}
.m-today b small{font-size:13px;font-weight:500;color:var(--muted)}
.m-today:hover{color:var(--text)}
.m-art{height:clamp(400px,42vw,560px);margin-inline-end:-24px}
/* the still bar only shows when WebGL is unavailable (no-3d); waiting for the first frame shows nothing, so it never flashes */
.m-fallback{display:none;position:absolute;inset:0;margin:auto;width:30%;height:max-content;transform:rotate(-9deg);animation:mIn 1.2s var(--out) both}
.m-art.no-3d .m-fallback{display:block}
.m-bar{position:relative}
.m-bar img{display:block;width:100%;height:auto}
.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 5s var(--ease) 1.6s infinite}
@keyframes sweep{0%{background-position:120% 0}55%,100%{background-position:-20% 0}}

/* ---------- market pulse: one column — the chart's title faces the rate, its change and the CTA, the chart under them;
   then three tools that each say what they show ---------- */
#priceTitle{font-size:21px}
.p-market{margin-top:32px}
.p-chart{display:grid;gap:20px;align-content:start}
.p-chart-head{display:flex;align-items:center;gap:20px 32px;flex-wrap:wrap}
.p-chart-head h3{font-size:18px}
.p-rate{display:grid;gap:2px;justify-items:end;margin-inline-start:auto}
.p-now{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap}
.p-now[hidden]{display:none}
.p-label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.p-big{display:flex;align-items:baseline;gap:6px;font-size:clamp(20px,1.8vw,24px);font-weight:750;line-height:1.5;letter-spacing:-.01em}
.p-big small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.p-sell b{font-size:15px;font-weight:650}
.p-sell small{font-size:12px;font-weight:500;color:var(--muted)}
.m-plot{position:relative;height:220px;touch-action:pan-y;cursor:crosshair}
.m-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.m-plot .grid line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:2 6}
.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:-6px;width:13px;height:13px;margin-top:-6px;border-radius:50%;background:var(--m);border:3px solid var(--bg)}
.m-tip{position:absolute;display:grid;gap:0;padding:6px 12px;font-size:13px;translate:-50% calc(-100% - 16px);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}
.p-axis{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.p-axis b{color:var(--text);font-weight:650}
/* calculator and today's place share the first row; the look back takes the second at full width, controls beside result.
   Each tool is a column whose last block sits on its floor, so the two of the first row end on one line, without a gap */
.p-tools{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;margin-top:32px}
.p-tool{display:flex;flex-direction:column;gap:16px;padding:36px 32px}
.p-tool>:last-child{margin-top:auto}
.p-hind{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 56px;align-items:stretch}
.p-hind>:last-child{margin-top:0}
.p-hind-in{display:flex;flex-direction:column;gap:16px}
.p-calc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.p-calc-foot .calc-note{flex:1 1 220px}
.p-tool-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.p-tool h3{font-size:17px;line-height:1.7}
.p-scope{margin-inline-start:auto;padding:2px 10px;border-radius:99px;font-size:12px;color:var(--muted);background:var(--subtle)}
.p-what{font-size:15px;line-height:1.9;color:var(--muted);max-width:34em;text-wrap:pretty}
.p-note{font-size:13px;line-height:1.9;color:var(--muted)}
.p-tool .field input{font-size:18px}
.m-band{display:grid;gap:10px;padding-top:12px}
.m-band-bar{position:relative;height:10px;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:20px;height:20px;margin-inline-start:-10px;translate:0 -50%;border-radius:50%;background:var(--bg);border:4px solid var(--m);transition:inset-inline-start 1.1s var(--out)}
.m-band-ends{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.m-band-ends span{display:grid;gap:2px}
.m-band-ends span:last-child{text-align:end}
.m-band-ends b{font-size:15px;font-weight:700;color:var(--text)}
.m-band-note{font-size:16px;line-height:1.9;font-weight:600;margin-bottom:4px}
/* the look back's controls: a label line over each; the range is one track with a thumb that slides, the amount a slider */
.m-ctl{display:grid;gap:10px;margin-top:8px}
.m-ctl-k{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;color:var(--muted)}
.m-ctl-k b{font-size:15px;font-weight:700;color:var(--text)}
/* (owner, 5 Nov) the same tactile track as the home page's gold/silver/copper tabs: a pressed well, a raised thumb */
.m-seg{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));padding:4px;border-radius:14px;background:var(--neu-track);box-shadow:var(--neu-press)}
.m-seg i{position:absolute;z-index:-1;inset-block:4px;inset-inline-start:4px;width:calc((100% - 8px)/var(--n));border-radius:10px;background:var(--neu-fill);box-shadow:var(--neu-raise-sm);
  translate:calc(var(--at)*-100%) 0;transition:translate .45s var(--out)}
.m-seg button{min-height:38px;padding:0 6px;border-radius:10px;font-size:13px;font-weight:550;color:var(--muted);transition:color .25s}
.m-seg button[aria-checked="true"]{color:var(--text);font-weight:700}
.m-seg button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.m-slide{--p:16.67%;width:100%;height:28px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;direction:rtl}
.m-slide::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(270deg,var(--m-g3),var(--m-g2)) right/var(--p) 100% no-repeat,var(--subtle)}
.m-slide::-moz-range-track{height:6px;border-radius:99px;background:var(--subtle)}
.m-slide::-moz-range-progress{height:6px;border-radius:99px;background:linear-gradient(270deg,var(--m-g3),var(--m-g2))}
.m-slide::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--bg);border:4px solid var(--m);transition:scale .2s var(--spring)}
.m-slide::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bg);border:4px solid var(--m)}
.m-slide:active::-webkit-slider-thumb{scale:1.15}
.m-slide:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:99px}
.m-slide-ends{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:-4px}
/* the result: when and what, today's value large, and the gain or loss in toman and percent */
.m-hind-out{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;gap:6px;padding-inline-start:56px;border-inline-start:1px solid var(--line)}
/* (owner, 5 Nov) a faint green Shemsh pattern under "ارزش امروز دارایی شما", fading out towards its edges */
.m-hind-out::before{content:"";position:absolute;z-index:-1;inset-block:-36px;inset-inline-start:0;inset-inline-end:-32px;pointer-events:none;background:var(--accent-2);opacity:.55;
  -webkit-mask:url(art/pattern-shemsh-lic-light.svg?v=2) center/261.76px auto,radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 78%);-webkit-mask-composite:source-in;
  mask:url(art/pattern-shemsh-lic-light.svg?v=2) center/261.76px auto,radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 78%);mask-composite:intersect}
.p-hind{overflow:hidden}
.m-hind-when{font-size:15px;line-height:1.9;color:var(--muted);text-wrap:pretty;margin-bottom:12px}
.m-hind-k{font-size:13px;color:var(--muted)}
.m-hind-val{display:flex;align-items:baseline;gap:8px;font-size:clamp(28px,2.6vw,36px);font-weight:800;line-height:1.4;letter-spacing:-.01em}
.m-hind-val small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.m-hind-gain{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:15px;color:var(--muted)}
.m-hind-gain b{font-size:16px;font-weight:700;color:var(--text)}
.m-hind-gain.up b{color:var(--up)}.m-hind-gain.down b{color:var(--down)}

/* ---------- why: the reasons scroll by, a 3D object for each one holds still beside them ---------- */
.m-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.m-reasons{list-style:none;display:grid}
.m-reason{display:grid;gap:8px;align-content:center;min-height:min(40vh,340px);padding:32px 0;opacity:.32;transition:opacity .6s var(--out)}
.m-reason+.m-reason{border-top:1px solid var(--line)}
.m-reason.on{opacity:1}
/* (owner, 5 Nov) each reason's number sits in a raised green disc */
.m-reason .n{justify-self:start;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--lime);color:var(--on-lime);font-size:14px;font-weight:800;box-shadow:var(--neu-raise-sm)}
.m-reason h3{font-size:clamp(19px,1.6vw,22px);line-height:1.6;font-weight:700}
.m-reason p{font-size:15px;line-height:1.95;color:var(--muted);text-wrap:pretty;max-width:30em}
.m-stage{position:sticky;top:calc(120px + var(--pbar));height:min(440px,calc(100svh - 180px))}
/* the icons stand in until the 3D stage is up */
.m-stage-ico{position:absolute;inset:0;margin:auto;width:30%;aspect-ratio:1;height:max-content;display:none}
.m-stage.no-3d .m-stage-ico{display:grid}
.m-stage-ico .ico{grid-area:1/1;width:100%;height:100%;border-radius:50%;border:0;background:color-mix(in srgb,var(--m) 12%,var(--surface));color:var(--m-ink);opacity:0;scale:.7;transition:opacity .5s var(--out),scale .6s var(--out)}
.m-stage-ico .ico.on{opacity:1;scale:1}
.m-stage-ico .ico svg{width:44%;height:44%}

/* ---------- in Shemsh: plain rows beside the 3D vitrine, in one plain container (hairline, no shadow) ---------- */
.m-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:80px;align-items:center;padding:56px;border:1px solid var(--line-strong);border-radius:36px;background:var(--surface)}
.m-in-copy{display:grid;gap:16px;justify-items:start}
.m-in-copy .lead{margin-bottom:16px}
.m-specs{width:100%}
.m-specs>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 24px;padding:22px 0;border-top:1px solid var(--line)}
.m-specs>div:last-child{border-bottom:1px solid var(--line)}
.m-specs dt{font-size:14px;color:var(--muted);line-height:1.9}
.m-specs dd{font-size:17px;font-weight:600;line-height:1.9}
.m-in .link{margin-top:8px}
/* the 3D vitrine (metal3d.js vault): the bar settles into frosted glass */
.m-vault{width:100%;max-width:460px;aspect-ratio:1;justify-self:center}

/* ---------- steps: four columns, each with what it needs and what it leaves you with; the active one fills its line ---------- */
.m-how-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:56px}
.m-how-head>div{display:grid;gap:8px;max-width:620px}
.m-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.m-step{position:relative;display:grid;gap:10px;align-content:start;padding:36px 28px 0;border-inline-start:1px solid var(--line);cursor:default}
.m-step:first-child{border-inline-start:0;padding-inline-start:0}
.m-step:last-child{padding-inline-end:0}
.m-step-bar{position:absolute;top:0;inset-inline:0;height:2px;background:var(--line);overflow:hidden}
.m-step:not(:first-child) .m-step-bar{inset-inline-start:28px}
.m-step-bar i{position:absolute;inset:0;transform:scaleX(0);transform-origin:right;background:var(--m)}
.m-step.on .m-step-bar i{transform:none;transition:transform var(--dur,5s) linear}
.m-step.done .m-step-bar i{transform:none}
.m-step-ico{display:grid;place-items:center;width:52px;height:52px;margin-bottom:8px;border-radius:50%;color:var(--muted);border:1px solid var(--line-strong);transition:background-color .4s,color .4s,border-color .4s}
.m-step-ico svg{width:24px;height:24px}
.m-step.on .m-step-ico,.m-step.done .m-step-ico{color:var(--m-ink);border-color:color-mix(in srgb,var(--m) 55%,transparent);background:color-mix(in srgb,var(--m) 10%,transparent)}
.m-step-n{font-size:13px;font-weight:700;color:var(--m-ink)}
.m-step h3{font-size:19px}
.m-step p{font-size:15px;line-height:1.95;color:var(--muted)}
.m-step dl{display:grid;gap:10px;margin-top:10px;padding-top:14px;border-top:1px dashed var(--line)}
.m-step dt{font-size:12px;color:var(--muted)}
.m-step dd{font-size:14px;font-weight:600;line-height:1.8}

/* ---------- services: hairline rows, the metal line lights on hover ---------- */
.m-svc-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:32px}
#svcTitle{font-size:21px}
.m-svc-head>div{display:grid;gap:8px}
/* each service on its own surface, apart from the others; the metal line lights along its top on hover */
.m-svcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.m-svc{position:relative;overflow:hidden;display:grid;gap:6px;align-content:start;padding:24px;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--ring);transition:border-color .25s}
.m-svc::before{content:"";position:absolute;top:0;inset-inline:0;height:2px;background:var(--m);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--out)}
.m-svc:hover{border-color:color-mix(in srgb,var(--m) 45%,var(--line))}
.m-svc:hover::before{transform:none}
.m-svc h3{font-size:16px}
.m-svc .ico{width:auto;height:auto;justify-content:start;margin-bottom:10px;border:0;background:none;color:var(--m-ink);transition:rotate .4s var(--out),scale .4s var(--out)}
.m-svc .ico svg{width:26px;height:26px}
.m-svc:hover .ico{rotate:-8deg;scale:1.08}
.m-svc p{font-size:14px;line-height:1.9;color:var(--muted)}

/* ---------- 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:40px;border-radius:24px;background:var(--surface);border:1px solid var(--ring)}
.m-cta::before{content:"";position:absolute;z-index:-1;inset:-40% -20% -40% auto;width:70%;background:radial-gradient(closest-side,var(--m-mist),transparent);opacity:.8}
[dir="rtl"] .m-cta::before{inset:-40% auto -40% -20%}
.m-cta-copy{display:grid;gap:10px;align-content:start;justify-items:start}
.m-cta h2{font-size:26px}
.m-cta h2 em{font-style:normal;color:var(--m-ink)}
.m-cta .lead{font-size:15px}
.m-cta .ctas{display:flex;gap:12px;margin-top:8px}
.m-cta-art{height:230px;display:grid;place-items:center}
.m-cta-art .m-bar{width:112px;transform:rotate(8deg)}
.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);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){
  body[data-metal] .sec{padding:96px 0}
  .m-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .m-step:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .m-step:nth-child(3) .m-step-bar{inset-inline-start:0}
  .m-step:nth-child(2){padding-inline-end:0}
  .m-svcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-end{grid-template-columns:1fr}
  .m-others{grid-template-columns:1fr 1fr}
  .m-in{gap:48px}
}
@media (max-width:820px){
  body[data-metal] .sec{padding:72px 0}
  /* minmax(0,…): the live-rate key is max-content wide, and a plain 1fr column grew to it and pushed it off the screen */
  .m-hero .wrap{grid-template-columns:minmax(0,1fr);min-height:0;gap:0}
  .m-hero h1{font-size:22px}
  .m-art{order:-1;height:clamp(260px,38svh,340px);margin:0 -16px}
  .p-tools{grid-template-columns:1fr}
  .p-tools{gap:16px;margin-top:20px}
  .p-tool{padding:28px 22px}
  .p-hind{grid-template-columns:1fr;gap:28px}
  .m-hind-out{padding:24px 0 0;border-inline-start:0;border-top:1px solid var(--line)}
  /* on phones the rate and the CTA run under the chart's title, from the start */
  .p-rate{justify-items:start;margin-inline-start:0}
  .m-plot{height:200px}
  /* the stage rides along at the top while the reasons scroll under it */
  .m-story{grid-template-columns:1fr;gap:0}
  .m-stage{order:-1;z-index:2;top:calc(72px + var(--pbar));height:clamp(180px,28svh,230px);margin:0 -16px;background:var(--bg);border-bottom:1px solid var(--line)}
  .m-reason{min-height:0;padding:32px 0;opacity:.4}
  .m-reason h3{font-size:19px}
  .m-reason p{font-size:15px}
  .m-in{grid-template-columns:1fr;gap:32px;padding:32px 20px;border-radius:28px}
  .m-vault{max-width:320px}
}
@media (max-width:620px){
  .m-steps{grid-template-columns:1fr;row-gap:40px}
  .m-step,.m-step:nth-child(n){border-inline-start:0;padding:32px 0 0}
  .m-step:not(:first-child) .m-step-bar{inset-inline-start:0}
  .m-svcs,.m-others{grid-template-columns:1fr}
  .m-specs>div{grid-template-columns:1fr;gap:2px}
  .m-cta{grid-template-columns:1fr;padding:28px 22px}
  .m-cta-art{display:none}
}
@media (prefers-reduced-motion:reduce){
  .m-reason{opacity:1}
  .m-step .m-step-bar i{transition:none}
}

/* ---------- tactile layer (2026-11-04, trimmed the same day on owner feedback): the landing's soft UI (--neu-* from index)
   only on outer containers — the market container, the three tools, the hero rate and the services. Nothing inside them
   (fields, track, chips, numbers) is tactile, and "why", "in Shemsh" and the FAQ have none. Light keeps the containers the
   page colour and separates them by shadow only; dark lifts them to the lit navy. The 3D hosts take their scene background
   from the nearest painted ancestor (metal3d.js pageColor). ---------- */
body[data-metal]{--slab:var(--bg);--neu-raise-lg:-14px -14px 34px var(--neu-hi),16px 16px 38px var(--neu-lo)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body[data-metal]{
  --slab:color-mix(in srgb,var(--m) 6%,#14213B);
  --neu-raise-lg:-8px -8px 26px rgba(120,150,210,.08),16px 18px 40px rgba(0,0,0,.6),inset 1px 1px 0 rgba(255,255,255,.06)}}
:root[data-theme="dark"] body[data-metal]{
  --slab:color-mix(in srgb,var(--m) 6%,#14213B);
  --neu-raise-lg:-8px -8px 26px rgba(120,150,210,.08),16px 18px 40px rgba(0,0,0,.6),inset 1px 1px 0 rgba(255,255,255,.06)}

/* market pulse: one raised container for the rate and the chart (a breath of the metal in its corner), and each of the
   three tools its own raised container. Only these outer containers are tactile; nothing inside them is. */
.p-market{padding:44px;border-radius:36px;background:radial-gradient(70% 60% at 100% 0,color-mix(in srgb,var(--m-mist) 70%,transparent),transparent 70%),var(--slab);box-shadow:var(--neu-raise-lg)}
.p-tool{border-radius:28px;background:var(--slab);box-shadow:var(--neu-raise)}

/* hero: the live rate is a raised key under the CTA */
.m-today{width:max-content;max-width:100%;margin-top:36px;padding:12px 22px;border:0;border-radius:999px;background:var(--slab);box-shadow:var(--neu-raise-sm);transition:color .18s,box-shadow .25s var(--ease),scale .4s var(--spring)}
.m-today:active{box-shadow:var(--neu-press);scale:.97;transition-duration:.08s}

/* services: raised keys on the open page; a key sinks when touched */
.m-svcs{gap:24px}
.m-svc{border:0;border-radius:24px;padding:28px;background:var(--slab);box-shadow:var(--neu-raise);transition:box-shadow .25s var(--ease),scale .4s var(--spring)}
.m-svc:active{box-shadow:var(--neu-press);scale:.98;transition-duration:.08s}

@media (max-width:820px){
  .p-market{padding:28px 20px;border-radius:28px}
  .p-tool{border-radius:24px}
}
@media (max-width:620px){
  .m-today{border-radius:20px}
  .m-svcs{gap:16px}
}