/* mineral.css — GTA mineral page system (copper, iron, manganese, lithium)
   Loads AFTER styles.css. Uses the tokens already defined there, plus its own palette below.

   ============================================================
   PALETTE — the one place any colour on these pages is written
   ============================================================
   These values were originally typed inline throughout this file. They are declared once
   here instead, per the house rule in CLAUDE.md that no colour is hard-coded at a use site.
   Nothing about the design changed — every value below is exactly what was there before.

   They are deliberately their OWN tokens rather than the brand ones, because these pages do
   not use .on-dark. Inside .mp-dark the ground is dark but --ground/--text still resolve to
   their light-mode values, so borrowing them here would invert the section. If the brand
   palette in gta-brand.css moves, these need moving with it by hand — that is the cost of
   the mineral pages carrying a look of their own. */
:root{
  /* NOTE: --maxw is deliberately NOT overridden here. Letting these pages run full width
     was tried and reverted: it stretched the two-column element-plate row so the plate went
     to 868x302 (2.87:1) against the design's ~1.79:1, i.e. flatter, which is the opposite of
     what was wanted. The site's 1280px measure holds the plate at roughly 1.7:1 at every
     desktop width, which is what the comps show. */

  /* Ink on the dark bands. A channel triplet because it is used at sixteen different
     alphas — rgb(var(--mp-ink-rgb) / .6) and so on. */
  --mp-ink-rgb:      240 227 216;
  --mp-shadow-rgb:    42 28 20;   /* plate drop shadow */

  /* Dark band. Runs cream -> espresso -> cream so both edges dissolve into the page
     rather than cutting against it. */
  --mp-band-edge:    #F5EBE2;
  --mp-band-deep:    #2A1C14;
  --mp-band-deep-rgb: 42 28 20;   /* same colour as channels, for fades */
  --mp-band-mid:     #3E2A1D;
  --mp-band-warm:    #5C3D26;

  /* Split panel behind the applications block */
  --mp-split-mid:    #EFE0D3;
  --mp-split-end:    #E8D6C6;

  /* Element plate faces — one pair per mineral, light to slightly deeper */
  --mp-plate-cu-a:   #F9F2EB;  --mp-plate-cu-b:  #EEDDCE;
  --mp-plate-fe-a:   #F5F2EE;  --mp-plate-fe-b:  #E4E1DC;
  --mp-plate-mn-a:   #F5F1F4;  --mp-plate-mn-b:  #E2DDE6;
  --mp-plate-li-a:   #F4F5F7;  --mp-plate-li-b:  #E1E4E8;

  /* Lithium's metallic type ramp, dark-band variant (the other three come from styles.css) */
  --mp-li-1: #8F97A3; --mp-li-2: #DDE2E8; --mp-li-3: #AFB6C0; --mp-li-4: #EAEDF1; --mp-li-5: #98A0AB;

  /* Fill bar */
  --mp-bar-a:        #8A4720;
  --mp-bar-b:        #DCA265;
}

/* ---------- metallic type ---------- */
.mp-metal{-webkit-background-clip:text;background-clip:text;color:transparent;background-image:var(--metal-copper)}
.mp-metal.fe{background-image:var(--metal-iron-on-light)}
.mp-metal.li{background-image:var(--metal-lith-on-light)}
.mp-metal.mn{background-image:var(--metal-mang-on-light)}
.mp-metal.au{background-image:var(--metal-gold)}
:is(.mp-dark,.mp-hero) .mp-metal.fe{background-image:var(--metal-iron-on-dark)}
:is(.mp-dark,.mp-hero) .mp-metal.mn{background-image:var(--metal-mang-on-dark)}
/* The hero is a dark photograph, so it counts as a dark ground: light ramps on dark,
   dark ramps on cream, never the reverse. Without this the mineral's own on-light ramp
   lands dark-on-dark and the accent word all but disappears. */
:is(.mp-dark,.mp-hero) .mp-metal.li{background-image:linear-gradient(100deg,var(--mp-li-1) 0%,var(--mp-li-2) 30%,var(--mp-li-3) 55%,var(--mp-li-4) 78%,var(--mp-li-5) 100%)}

/* ---------- seamless bands ----------
   styles.css draws `section + section { border-top: 1px solid var(--rule) }` — a hairline
   between every adjacent section. That is the site's editorial structure and right everywhere
   else, but these pages are built to dissolve into one another with gradients, and the rule
   put a visible 1px espresso line across every join: measured as a 111-point step between two
   otherwise identical cream rows at the plate/dark boundary. Dropping it here is what makes
   the bands read as one continuous page rather than stacked blocks. */
body.mineral-page section + section{border-top:0}
/* Same again at the foot: .footer carries border-top:1px var(--rule), which in the dark band
   resolves to cream at 20% and drew a light line across the CTA/footer join. The CTA now fades
   into the footer espresso, so the rule has nothing left to separate. */
body.mineral-page .footer{border-top:0}

   Every band in this file dissolves into the page by fading to --mp-band-edge, a flat cream.
   That only disappears if the page behind it IS that flat cream. The site ground is .atmos,
   a copper-to-cream field which is position:fixed — so the tint behind a given band shifts as
   you scroll and no fade can ever land on it. Measured at the hero foot: the fade ended on
   rgb(244 234 225) against a page of rgb(232 214 197), a 55-point step, and the same at three
   more boundaries. Holding a flat ground on these four pages lets every fade land exactly.
   Scoped to .mineral-page because the homepage shares .hero-dark and does want its field. */
body.mineral-page{background:var(--ground)}
body.mineral-page .atmos,
body.mineral-page .orb{display:none}

/* ---------- hero ---------- */
/* The 760px ceiling was the vertical squash. It binds on any window taller than ~884px,
   which is most desktops, so the 86vh the design asks for was never actually reached — on a
   1200px-tall window the hero rendered at 760 instead of 1032, a quarter shorter than
   intended, and the full-bleed image band read as a letterbox strip. Raised so 86vh governs
   on normal screens; the cap only steps in on unusually tall ones. */
.mp-hero{position:relative;height:clamp(560px,86vh,1100px);overflow:hidden}
.mp-hero-slices{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr)}
.mp-hero-slices img{width:100%;height:100%;object-fit:cover}
.mp-hero-veil{position:absolute;inset:0;background:linear-gradient(92deg,rgb(var(--veil,24 14 8)/.93) 24%,rgb(var(--veil,24 14 8)/.60) 54%,rgb(var(--veil,24 14 8)/.28) 100%)}
/* the seam: hero dissolves into the page instead of hard-cutting */
.mp-hero-fade{position:absolute;left:0;right:0;bottom:0;height:280px;background:linear-gradient(180deg,rgb(var(--ground-rgb)/0) 0%,rgb(var(--ground-rgb)/.55) 62%,rgb(var(--ground-rgb)/1) 100%)}
/* Top padding has to clear the fixed navbar, which is 93px tall unscrolled — at the original
   58px the breadcrumb sat underneath it on all four pages. Matches the homepage hero's
   approach of clamping against vh so it stays clear on short viewports too. */
.mp-hero-inner{position:absolute;inset:0;padding:clamp(112px,14vh,150px) var(--gutter) 150px;display:flex;flex-direction:column;justify-content:space-between;color:var(--ground-2)}
.mp-crumb{margin:0;font:400 11px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:rgb(var(--mp-ink-rgb) /.6)}
.mp-crumb span{color:var(--accent-hi)}
/* max-width in em, which resolves against this element's OWN font-size, so the measure stays
   the same number of characters as the type scales 44px -> 88px. That is what holds the
   headline at two lines everywhere. A ch/px cap on the parent cannot do this: it is fixed
   while the type grows, so the line count drifts with viewport width. ~9.5em suits the four
   headlines in use, all of which run 30-34 characters. */
.mp-hero h1{margin:0;font:400 clamp(44px,6.6vw,118px)/0.98 var(--font-display);letter-spacing:-.02em;max-width:9.5em}
/* NOT 52ch. `ch` on this container resolves against its inherited body font-size, so it
   pinned the column to ~477px at every viewport while the h1 inside it scales 44px -> 88px.
   The headline was then forced into three lines on any desktop screen while looking correct
   at ~780px, which is why it read as squashed. The paragraph keeps its own measure below,
   so widening this only affects the display type. */
.mp-hero-copy{display:flex;flex-direction:column;gap:26px;max-width:min(100%,880px)}
.mp-hero-copy p{margin:0;max-width:46ch;font:400 15px/1.75 var(--font-body);color:rgb(var(--mp-ink-rgb) /.78)}
.mp-spec{display:flex;flex-wrap:wrap;gap:44px;padding-top:22px;border-top:1px solid rgb(var(--mp-ink-rgb) /.26)}
.mp-spec div{display:flex;flex-direction:column;gap:6px}
.mp-spec dt{font:400 11px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--mp-ink-rgb) /.55)}
.mp-spec dd{margin:0;font:400 clamp(20px,2vw,39px)/1 var(--font-display)}
.mp-spec dd.hi{color:var(--accent-hi)}

/* ---------- element plate (overlaps the hero fade) ---------- */
/* The negative margin used to sit here, on the section. That pulled BOTH columns up, and
   because the copy column is taller than the plate and the row is centre-aligned, the copy
   was the thing that rose — 86px into the hero at 1389px wide, 119px at 1920 — while the
   plate sat exactly on the hero edge, overlapping nothing. The overlap now lives on the
   plate itself as a transform, which does not affect layout, so the copy stays below the
   hero and only the plate rises into the fade the way the design intends.

   2026-08-03: the lift was cut from 60-115px to 18-40px and the plate now stretches to the
   copy column's height. Pinned to the top AND lifted, it read as floating above the writing
   rather than sitting beside it. The symbol centres in the taller face; the name row stays
   pinned to the foot. */
.mp-plate-sec{position:relative;margin-top:0;padding:clamp(28px,3vw,64px) var(--gutter) clamp(90px,10vw,220px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,120px);align-items:center}
.mp-plate{align-self:stretch;border:1px solid var(--rule);padding:44px 38px 34px;transform:translateY(calc(-1 * clamp(18px,1.8vw,40px)));display:flex;flex-direction:column;background:linear-gradient(160deg,var(--mp-plate-cu-a) 0%,var(--mp-plate-cu-b) 100%);box-shadow:0 30px 70px -50px rgb(var(--mp-shadow-rgb) /.6)}
.mp-plate.fe{background:linear-gradient(160deg,var(--mp-plate-fe-a) 0%,var(--mp-plate-fe-b) 100%)}
.mp-plate.mn{background:linear-gradient(160deg,var(--mp-plate-mn-a) 0%,var(--mp-plate-mn-b) 100%)}
.mp-plate.li{background:linear-gradient(160deg,var(--mp-plate-li-a) 0%,var(--mp-plate-li-b) 100%)}
.mp-plate-top,.mp-plate-btm{display:flex;align-items:baseline;justify-content:space-between}
.mp-plate-top span,.mp-plate-btm span:last-child{font:400 13px/1 var(--font-mono);color:var(--faint)}
.mp-plate-top span:first-child{font-size:15px}
.mp-plate b{flex:1;display:grid;place-items:center;margin:10px 0 0;font:400 clamp(110px,15vw,200px)/0.9 var(--font-display);letter-spacing:-.03em;text-align:center}
.mp-plate-btm{padding-top:14px;border-top:1px solid var(--rule)}
.mp-plate-btm span:first-child{font:400 13px/1 var(--font-body);letter-spacing:.22em;text-transform:uppercase}
.mp-plate-copy{display:flex;flex-direction:column;gap:24px}
.mp-plate-copy h2{margin:0;font:400 clamp(34px,4.4vw,84px)/1.04 var(--font-display);letter-spacing:-.01em;max-width:15ch}
.mp-plate-copy>p{margin:0;max-width:42ch;font:400 15px/1.8 var(--font-body);color:var(--muted);text-wrap:pretty}
.mp-eyebrow{font:400 11px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--accent-deep)}
.mp-dark .mp-eyebrow{color:var(--accent-hi)}
.mp-facts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,1.7vw,36px);padding-top:6px;max-width:440px}
.mp-facts div{display:flex;flex-direction:column;gap:7px;padding-top:15px;border-top:1px solid var(--rule)}
.mp-facts dt{font:400 11px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.mp-facts dd{margin:0;font:400 15px/1 var(--font-mono)}

/* ---------- dark band: fades in AND out, so neither edge shows ---------- */
.mp-dark{position:relative;overflow:hidden;color:var(--ground-2);padding:clamp(120px,13.2vw,285px) var(--gutter) clamp(110px,12.5vw,270px);
  background:linear-gradient(180deg,var(--mp-band-edge) 0%,var(--mp-band-deep) 11%,var(--mp-band-mid) 58%,var(--mp-band-warm) 90%,var(--mp-band-edge) 100%)}
.mp-dark-inner{position:relative;display:flex;flex-direction:column;gap:clamp(34px,5vw,78px)}
.mp-ghost{position:absolute;right:-30px;top:120px;font:400 clamp(110px,15vw,285px)/0.85 var(--font-display);color:rgb(var(--mp-ink-rgb) /.06);pointer-events:none;user-select:none}
.mp-dark h2{margin:0;font:400 clamp(34px,4.4vw,84px)/1.04 var(--font-display)}
.mp-dark-head{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(28px,5vw,90px);flex-wrap:wrap}
.mp-dark-head>div{display:flex;flex-direction:column;gap:20px;max-width:620px}
.mp-dark-head>p{margin:0;max-width:34ch;font:400 13.5px/1.8 var(--font-body);color:rgb(var(--mp-ink-rgb) /.65)}
.mp-photo-wash{position:absolute;inset:0;opacity:.22;-webkit-mask-image:linear-gradient(180deg,transparent 6%,#000 34%,#000 70%,transparent 96%);mask-image:linear-gradient(180deg,transparent 6%,#000 34%,#000 70%,transparent 96%)}
.mp-photo-wash img{width:100%;height:100%;object-fit:cover}

/* grade ladder */
.mp-rung{display:grid;grid-template-columns:56px minmax(160px,200px) 1fr 190px;gap:28px;align-items:center;padding:clamp(20px,1.8vw,40px) 0;border-top:1px solid rgb(var(--mp-ink-rgb) /.2)}
.mp-rung:last-child{border-bottom:1px solid rgb(var(--mp-ink-rgb) /.2)}
.mp-rung .n{font:400 12px/1 var(--font-mono);color:var(--accent-hi)}
.mp-rung h3{margin:0;font:400 clamp(22px,2.6vw,45px)/1.05 var(--font-display)}
.mp-rung .v{justify-self:end;font:400 14px/1 var(--font-mono);color:rgb(var(--mp-ink-rgb) /.8);white-space:nowrap}
.mp-rung-note{margin:0;font:400 13.5px/1.6 var(--font-body);color:rgb(var(--mp-ink-rgb) /.6);max-width:52ch}
/* .price-note is styled in styles.css for cream sections, so on the dark band it inherits
   espresso at 55% and all but disappears. Restate it in the band's own ink. */
.mp-dark .price-note{color:rgb(var(--mp-ink-rgb) /.55)}
.mp-bar{height:5px;background:rgb(var(--mp-ink-rgb) /.12);position:relative}
.mp-bar i{position:absolute;top:0;bottom:0;left:0;background:linear-gradient(90deg,var(--mp-bar-a),var(--mp-bar-b))}

/* two-product cards + step ribbon (iron) */
.mp-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,1.5vw,34px)}
.mp-prod{border:1px solid rgb(var(--mp-ink-rgb) /.22);padding:clamp(26px,2.4vw,52px) clamp(24px,2.2vw,48px);display:flex;flex-direction:column;gap:18px}
.mp-prod-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.mp-prod-top b{font:400 clamp(28px,3.4vw,60px)/1 var(--font-display)}
.mp-prod-top b small{font-size:.5em}
.mp-prod-top span{font:400 11px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-hi);white-space:nowrap}
.mp-prod h3{margin:0;font:400 26px/1.1 var(--font-display)}
.mp-prod p{margin:0;font:400 13px/1.7 var(--font-body);color:rgb(var(--mp-ink-rgb) /.62)}
.mp-prod .line{display:flex;justify-content:space-between;gap:14px;font:400 12px/1 var(--font-mono);color:rgb(var(--mp-ink-rgb) /.7)}
.mp-steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgb(var(--mp-ink-rgb) /.22)}
.mp-steps div{padding:22px;display:flex;flex-direction:column;gap:8px;border-right:1px solid rgb(var(--mp-ink-rgb) /.16)}
.mp-steps div:nth-child(4n){border-right:0;padding-right:0}
.mp-steps div:nth-child(4n+1){padding-left:0}
.mp-steps div:nth-child(n+5){border-top:1px solid rgb(var(--mp-ink-rgb) /.16)}
.mp-steps .n{font:400 11px/1 var(--font-mono);color:var(--accent-hi)}
.mp-steps b{font:400 19px/1.15 var(--font-display)}
.mp-steps span:last-child{font:400 12px/1.6 var(--font-body);color:rgb(var(--mp-ink-rgb) /.58)}

/* stat set piece (manganese / lithium) */
.mp-stat{display:flex;align-items:flex-end;gap:clamp(28px,5vw,90px);flex-wrap:wrap}
.mp-stat b{font:400 clamp(120px,17vw,330px)/0.82 var(--font-display);letter-spacing:-.03em}
.mp-stat div{display:flex;flex-direction:column;gap:18px;max-width:420px;padding-bottom:22px}
.mp-stat h2{font-size:clamp(28px,3.2vw,60px);line-height:1.08}
.mp-stat p{margin:0;font:400 13.5px/1.8 var(--font-body);color:rgb(var(--mp-ink-rgb) /.65)}
.mp-trio{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgb(var(--mp-ink-rgb) /.22)}
.mp-trio div{padding:28px 26px;display:flex;flex-direction:column;gap:10px;border-right:1px solid rgb(var(--mp-ink-rgb) /.16)}
.mp-trio div:first-child{padding-left:0}
.mp-trio div:last-child{border-right:0;padding-right:0}
.mp-trio b{font:400 clamp(24px,3vw,69px)/1 var(--font-display)}
.mp-trio span{font:400 12.5px/1.7 var(--font-body);color:rgb(var(--mp-ink-rgb) /.62)}

/* ---------- applications: one lead tile + supporting tiles ---------- */
.mp-sec{padding:20px var(--gutter) clamp(64px,6.9vw,150px);display:flex;flex-direction:column;gap:clamp(34px,5vw,84px)}
.mp-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(28px,5vw,90px);flex-wrap:wrap}
.mp-sec-head>div{display:flex;flex-direction:column;gap:20px;max-width:640px}
.mp-sec-head h2{margin:0;font:400 clamp(34px,4.4vw,84px)/1.04 var(--font-display);letter-spacing:-.01em}
.mp-sec-head>p{margin:0;max-width:34ch;font:400 13.5px/1.8 var(--font-body);color:var(--muted)}
.mp-apps{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:stretch}
.mp-apps-col{display:flex;flex-direction:column;gap:20px}
.mp-apps-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;flex:1;min-height:clamp(140px,11vw,240px)}
.mp-stepped{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:20px;align-items:end}
.mp-tile{position:relative;overflow:hidden;min-height:clamp(140px,11vw,240px);flex:1}
.mp-tile.lead{min-height:520px}
.mp-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mp-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(var(--veil,24 14 8)/.06) 32%,rgb(var(--veil,24 14 8)/.88) 100%)}
.mp-tile figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px 28px;display:flex;flex-direction:column;gap:8px;color:var(--ground-2)}
.mp-tile.lead figcaption{padding:40px 36px;gap:14px}
.mp-tile .k{font:400 10.5px/1 var(--font-body);letter-spacing:.26em;text-transform:uppercase;color:var(--accent-hi)}
.mp-tile h3{margin:0;font:400 clamp(22px,2.4vw,45px)/1.08 var(--font-display)}
.mp-tile.lead h3{font-size:clamp(30px,3.6vw,69px);line-height:1.05}
.mp-tile p{margin:0;max-width:40ch;font:400 12.5px/1.7 var(--font-body);color:rgb(var(--mp-ink-rgb) /.72)}
.mp-tile.lead p{font-size:13.5px;line-height:1.75;color:rgb(var(--mp-ink-rgb) /.75)}

/* ---------- split band: photo feathered into the panel ---------- */
.mp-split{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:clamp(380px,32vw,700px);background:linear-gradient(180deg,var(--mp-band-edge) 0%,var(--mp-split-mid) 22%,var(--mp-split-end) 100%)}
.mp-split figure{position:relative;overflow:hidden;margin:0}
.mp-split figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mp-feather-r{-webkit-mask-image:linear-gradient(100deg,#000 58%,transparent 98%);mask-image:linear-gradient(100deg,#000 58%,transparent 98%)}
.mp-feather-l{-webkit-mask-image:linear-gradient(260deg,#000 58%,transparent 98%);mask-image:linear-gradient(260deg,#000 58%,transparent 98%)}
.mp-split-copy{padding:clamp(56px,8vw,135px) clamp(24px,4.5vw,90px);display:flex;flex-direction:column;justify-content:center;gap:22px}
.mp-split-copy h2{margin:0;font:400 clamp(30px,3.6vw,69px)/1.06 var(--font-display);max-width:13ch;color:var(--brand-soft)}
.mp-split-copy p{margin:0;max-width:40ch;font:400 14px/1.8 var(--font-body);color:var(--muted)}
.mp-route{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding-top:6px;font:400 11.5px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.mp-route i{font-style:normal;color:var(--accent-deep)}
.mp-bigfig{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:8px;padding-top:10px;border-top:1px solid var(--rule);max-width:400px}
.mp-bigfig b{font:400 clamp(26px,3vw,51px)/1 var(--font-display);color:var(--brand-soft)}
.mp-bigfig span{font:400 11.5px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---------- closing CTA: emerges from the section above ---------- */
.mp-cta{position:relative;height:clamp(380px,32vw,700px);overflow:hidden}
.mp-cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mp-cta-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--veil,24 14 8)/.93) 20%,rgb(var(--veil,24 14 8)/.42) 78%)}
/* The foot of the CTA met the footer with a 171-point step: the band ended on rgb(96 86 79)
   and the footer starts at espresso. This dissolves one into the other, the same way
   .mp-cta-fade already dissolves the head of the band into the section above. */
.mp-cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--mp-band-deep-rgb)/0) 0%,rgb(var(--mp-band-deep-rgb)/.72) 62%,var(--mp-band-deep) 100%)}
.mp-cta-inner{z-index:2}
.mp-cta-fade{position:absolute;left:0;right:0;top:0;height:180px;background:linear-gradient(180deg,var(--from,var(--mp-band-edge)) 0%,rgb(var(--ground-rgb)/0) 100%)}
.mp-cta-inner{position:absolute;inset:0;padding:clamp(60px,5.3vw,115px) var(--gutter) 0;display:flex;flex-direction:column;justify-content:center;gap:20px;color:var(--ground-2)}
.mp-cta h2{margin:0;max-width:16ch;font:400 clamp(30px,4vw,78px)/1.05 var(--font-display)}
.mp-cta p{margin:0;max-width:46ch;font:400 14px/1.75 var(--font-body);color:rgb(var(--mp-ink-rgb) /.72)}
.mp-cta-actions{display:flex;gap:14px;flex-wrap:wrap;padding-top:6px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .mp-hero{height:auto;min-height:620px}
  .mp-hero-inner{padding:100px var(--gutter) 130px;gap:44px;justify-content:flex-start}
  .mp-spec{gap:26px}
  .mp-plate-sec{grid-template-columns:1fr;margin-top:-60px;padding-top:0;padding-bottom:64px}
  /* stacked: the plate sits above the copy, so lifting it would just open a gap */
  .mp-plate{transform:none}
  .mp-dark{padding:130px var(--gutter) 120px}
  .mp-ghost{top:60px;right:-10px}
  .mp-rung{grid-template-columns:36px 1fr;gap:10px 16px}
  .mp-rung .mp-bar,.mp-rung .mp-rung-note{grid-column:1/-1}
  .mp-rung .v{justify-self:start;grid-column:1/-1}
  .mp-two,.mp-apps,.mp-apps-pair,.mp-stepped,.mp-split,.mp-facts{grid-template-columns:1fr}
  .mp-steps,.mp-trio{grid-template-columns:1fr}
  .mp-steps div,.mp-trio div{border-right:0;border-top:1px solid rgb(var(--mp-ink-rgb) /.16);padding:18px 0}
  .mp-tile.lead,.mp-stepped .mp-tile{min-height:300px;height:auto}
  .mp-split figure{min-height:280px}
  .mp-feather-r,.mp-feather-l{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
  .mp-cta{height:auto;min-height:420px}
  .mp-cta-inner{position:relative;padding:120px var(--gutter) 56px}
}