/* ============================================================
   PAGE LAYOUTS — homepage (6), metal landing (7), PLP (8), PDP (9)
   ============================================================ */

/* ── 6.1 Cinematic hero — "The Light Reveal" ────────────── */
.hero{
  position:relative;height:100svh;min-height:560px;background:var(--ivory);
  overflow:hidden;display:grid;
}
.hero-media{position:absolute;inset:0}
.hero-media picture{position:absolute;inset:0;display:block}
.hero-media img,.hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero-media video{opacity:0;transition:opacity var(--dur-slow) var(--ease)}
.hero-media video.is-ready{opacity:1}
.hero-media .asset-ph{position:absolute;inset:0;aspect-ratio:auto;border:0}

.hero-inner{
  position:relative;z-index:2;align-self:center;width:100%;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  text-align:center;
}
.hero h1{margin:0}
.hero .h-line{overflow:hidden;display:block}
.hero .h-word{display:inline-block}
/* letters revealed by mask-wipe from the inline-start edge */
.hero .ch{
  display:inline-block;transform:translateY(105%);
  transition:transform 700ms var(--ease);
}
.hero .h-name{
  font-family:var(--f-display);font-weight:500;color:var(--onyx);
  text-transform:uppercase;letter-spacing:.22em;line-height:1.05;
  font-size:clamp(30px,7.2vw,88px);
}
.hero .h-sub{
  font-family:var(--f-body);font-weight:300;color:var(--mist);
  text-transform:uppercase;letter-spacing:.46em;font-size:clamp(8px,1.1vw,12px);
  margin-top:14px;
}
.hero .h-ar{
  font-family:var(--f-ar);font-weight:700;letter-spacing:0;color:var(--onyx);
  font-size:clamp(16px,2.4vw,26px);margin-top:12px;
}
.hero .h-tag{
  font-family:var(--f-head);font-size:clamp(15px,2vw,22px);color:var(--slate);
  margin-top:18px;
}
[dir=rtl] .hero .h-name,[dir=rtl] .hero .h-sub{
  font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-weight:700;
}
[dir=rtl] .hero .h-tag{font-family:var(--f-ar);font-weight:400}
.hero .h-cta{margin-top:var(--s-32)}

/* fade-in groups driven by the JS timeline */
.hero [data-fade]{opacity:0;transform:translateY(10px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.hero [data-fade].is-in{opacity:1;transform:none}
.hero .ch.is-in{transform:none}

/* four swatch cards rising from the bottom */
.hero-swatches{
  position:absolute;inset-inline:0;bottom:var(--s-48);z-index:2;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-12);align-items:end;
}
.swatch{
  background:var(--paper);border:1px solid var(--rule);padding:14px 12px;text-align:center;
  opacity:0;transform:translateY(24px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
}
.swatch.is-in{opacity:1;transform:none}
.swatch b{
  display:block;font-family:var(--f-display);font-weight:500;font-size:var(--t-11);
  letter-spacing:.16em;text-transform:uppercase;color:var(--onyx);
}
.swatch i{display:block;font-style:normal;font-size:9.5px;color:var(--mist);margin-top:4px}
/* Platinum enters first and renders at 1.15x scale */
.swatch--pt{transform:translateY(24px) scale(1.15);transform-origin:bottom center;
  border-color:var(--champagne)}
.swatch--pt.is-in{transform:scale(1.15)}
[dir=rtl] .swatch b{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-weight:700}
@media (max-width:720px){
  .hero-swatches{bottom:var(--s-24);gap:6px}
  .swatch{padding:9px 4px}
  .swatch--pt{transform:translateY(24px) scale(1.08)}
  .swatch--pt.is-in{transform:scale(1.08)}
  .swatch i{display:none}
}

.scroll-cue{
  position:absolute;bottom:var(--s-16);inset-inline-start:50%;translate:-50% 0;z-index:3;
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--mist);
  opacity:0;transition:opacity var(--dur-slow) var(--ease);
}
.scroll-cue.is-in{opacity:1}
@media (max-width:720px){ .scroll-cue{display:none} }

/* ── 6.2 The Four Metals ────────────────────────────────── */
.metals{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:var(--s-24)}
.metal-tile .frame{overflow:hidden}
.metal-tile .frame > *{transition:transform var(--dur-slow) var(--ease)}
.metal-tile:hover .frame > *{transform:scale(1.04)}
.metal-tile h3{
  font-family:var(--f-display);font-weight:500;font-size:var(--t-16);
  letter-spacing:.16em;text-transform:uppercase;color:var(--onyx);
  margin-top:var(--s-16);position:relative;padding-bottom:10px;display:inline-block;
}
[dir=rtl] .metal-tile h3{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-weight:700}
.metal-tile h3::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;height:1px;width:100%;
  background:var(--champagne);transform:scaleX(0);transform-origin:inline-start;
  transition:transform var(--dur-slow) var(--ease);
}
.metal-tile:hover h3::after{transform:scaleX(1)}
.metal-tile .count{display:block;font-size:var(--t-11);color:var(--mist);letter-spacing:.14em;
  text-transform:uppercase}
[dir=rtl] .metal-tile .count{letter-spacing:0;text-transform:none;font-size:var(--t-13,13px)}
.metal-tile p{font-size:var(--t-14);color:var(--slate);margin-top:8px;max-width:34ch}
@media (max-width:900px){
  .metals{grid-template-columns:repeat(2,1fr);gap:var(--s-16)}
  .metals > :first-child{grid-column:1/-1}
}

/* ── 6.3 carousel ───────────────────────────────────────── */
.rail-head{display:flex;gap:var(--s-8)}
.rail-btn{width:38px;height:38px;border:1px solid var(--rule);display:grid;place-items:center;
  border-radius:var(--r-1);transition:border-color var(--dur) var(--ease)}
.rail-btn:hover{border-color:var(--onyx)}
.rail-btn svg{width:14px;height:14px;stroke:var(--onyx);fill:none;stroke-width:1.3}
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);
  gap:var(--s-24);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px;
}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
@media (min-width:900px){ .rail{grid-auto-columns:minmax(0,calc(25% - 18px))} }
@media (max-width:600px){ .rail{grid-auto-columns:74%} .rail-head{display:none} }

/* ── 6.4 Bridal spotlight ───────────────────────────────── */
.bridal{position:relative;background:var(--paper);border-block:1px solid var(--rule)}
.bridal-media{position:relative;aspect-ratio:21/9}
.bridal-media > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
/* soft ivory scrim on the text side so onyx text stays readable */
.bridal-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to left,transparent,rgba(248,247,244,.92) 62%);
  transform:scaleX(-1);
}
[dir=rtl] .bridal-media::after{transform:none}
.bridal-copy{
  position:absolute;inset-block:0;inset-inline-end:0;width:38%;z-index:2;
  display:flex;flex-direction:column;justify-content:center;gap:var(--s-16);
  padding-inline:var(--s-48);
}
.bridal-copy h2{font-family:var(--f-head);font-size:clamp(24px,3vw,44px);color:var(--onyx);line-height:1.15}
[dir=rtl] .bridal-copy h2{font-family:var(--f-ar);font-weight:700;line-height:1.5}
@media (max-width:900px){
  .bridal-media{aspect-ratio:9/16;max-height:70svh}
  .bridal-media::after{background:none}
  .bridal-copy{position:static;width:auto;padding:var(--s-32) var(--gutter);background:var(--paper)}
}

/* ── 6.5 Why platinum ───────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-64);align-items:center}
@media (max-width:900px){ .split{grid-template-columns:1fr;gap:var(--s-32)} }
.stat{border-top:1px solid var(--rule);padding-top:var(--s-16);
  opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.stat.is-in{opacity:1;transform:none}
.stat b{
  display:block;font-family:var(--f-display);font-weight:500;font-size:var(--t-48);
  color:var(--onyx);line-height:1;letter-spacing:.02em;
}
.stat span{display:block;font-size:13px;color:var(--slate);margin-top:8px}

/* ── grids ──────────────────────────────────────────────── */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-24)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-24)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-24)}
@media (max-width:1000px){ .grid-4{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr);gap:var(--s-16)}
  .grid-2{grid-template-columns:1fr}
  .grid-3.cards-3{grid-template-columns:1fr}
}

/* ── 6.10 testimonials ──────────────────────────────────── */
.testi{position:relative;background:var(--paper);border-block:1px solid var(--rule);
  overflow:hidden}
.testi-bg{position:absolute;inset:0}
.testi-bg > *{width:100%;height:100%;object-fit:cover;border:0}
.testi .wrap{position:relative;z-index:2}
.testi-track{position:relative;min-height:210px}
.testi-slide{
  position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-32);
  opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease);
}
.testi-slide[data-active=true]{opacity:1;pointer-events:auto}
.testi-card blockquote{font-family:var(--f-head);font-size:var(--t-20,20px);color:var(--onyx);
  line-height:1.45}
[dir=rtl] .testi-card blockquote{font-family:var(--f-ar);font-weight:400;line-height:1.8;font-size:var(--t-16)}
.testi-who{display:flex;align-items:center;gap:12px;margin-top:var(--s-16)}
/* A typographic initial, not a stock portrait — inventing customer
   photographs would present fabricated people as real reviewers. */
.testi-avatar{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--champagne);border-radius:var(--r-1);
  font-family:var(--f-display);font-size:var(--t-14);color:var(--gold-ink);
  letter-spacing:.04em;
}
.testi-who b{display:block;font-size:var(--t-12);color:var(--onyx);font-weight:400}
.testi-who span{font-size:var(--t-11);color:var(--mist)}
.dots{display:flex;gap:2px;justify-content:center;margin-top:var(--s-32)}
/* 30x30 hit area, 7px dot drawn by the pseudo-element — visual size unchanged. */
.dots button{
  width:30px;height:30px;border:0;background:none;display:grid;place-items:center;
}
.dots button::after{
  content:"";width:7px;height:7px;border:1px solid var(--mist);border-radius:50%;
}
.dots button[aria-current=true]::after{background:var(--onyx);border-color:var(--onyx)}
@media (max-width:900px){
  .testi-slide{grid-template-columns:1fr}
  .testi-track{min-height:260px}
  .testi-card:not(:first-child){display:none}
}

/* ── 6.13 newsletter band ───────────────────────────────── */
.nl-band{position:relative;overflow:hidden;background:var(--ivory)}
.nl-band-bg{position:absolute;inset:0}
.nl-band-bg > *{width:100%;height:100%;object-fit:cover;border:0}
.nl-band .wrap{position:relative;z-index:2;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s-16)}
.nl-band .nl-form{margin-inline:auto;width:min(360px,100%)}

/* ── 7 metal landing ────────────────────────────────────── */
.metal-hero{
  position:relative;height:60vh;min-height:380px;overflow:hidden;
  display:grid;place-items:center;text-align:center;background:var(--ivory);
}
.metal-hero .bg{position:absolute;inset:0}
.metal-hero .bg > *{width:100%;height:100%;object-fit:cover;border:0}
/* A white scrim guarantees the display type stays readable whatever the
   texture behind it does. Onyx on this never drops below AA. */
.metal-hero .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(255,255,255,.62),rgba(255,255,255,.86));
}
.metal-hero .inner{position:relative;z-index:2;padding-inline:var(--gutter)}
.metal-hero h1{
  font-family:var(--f-display);font-weight:500;color:var(--onyx);text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(40px,7vw,88px);line-height:1.05;
}
[dir=rtl] .metal-hero h1{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-weight:700}
.metal-hero p{font-family:var(--f-head);font-size:clamp(16px,2vw,22px);color:var(--slate);margin-top:14px}

.type-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-16)}
.type-tile{
  background:var(--paper);border:1px solid var(--rule);padding:var(--s-24) var(--s-12);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:border-color var(--dur) var(--ease);
}
.type-tile:hover{border-color:var(--champagne)}
.type-tile svg{width:26px;height:26px;stroke:var(--champagne);fill:none;stroke-width:1}
.type-tile span{font-size:var(--t-11);letter-spacing:.16em;text-transform:uppercase;color:var(--onyx)}
[dir=rtl] .type-tile span{letter-spacing:0;text-transform:none;font-size:var(--t-13,13px)}
@media (max-width:900px){ .type-tiles{grid-template-columns:repeat(3,1fr) !important} }
@media (max-width:480px){ .type-tiles{grid-template-columns:repeat(2,1fr) !important} }

/* ── account page layout ────────────────────────────────────
   Its own grid, NOT .plp/.filters — those turn into a hidden
   bottom-sheet below 1000px, which would make the account nav
   disappear on mobile entirely. */
.acct{display:grid;grid-template-columns:220px 1fr;gap:var(--s-48);align-items:start}
.acct-nav{
  background:var(--linen);border:1px solid var(--rule);padding:var(--s-16);
  position:sticky;top:110px;
}
.acct-nav a{
  display:block;padding-block:var(--s-12);
  font-size:var(--t-12);letter-spacing:.16em;text-transform:uppercase;color:var(--onyx);
}
.acct-nav li + li a{border-top:1px solid var(--rule)}
[dir=rtl] .acct-nav a{letter-spacing:0;text-transform:none;font-size:var(--t-14)}
@media (max-width:900px){
  .acct{grid-template-columns:1fr;gap:var(--s-24)}
  .acct-nav{position:static;display:flex;gap:var(--s-8);overflow-x:auto;padding:var(--s-8)}
  .acct-nav ul{display:flex;gap:var(--s-8)}
  .acct-nav a{white-space:nowrap;padding:8px 12px;border:1px solid var(--rule);background:var(--paper)}
  .acct-nav li + li a{border-top:1px solid var(--rule)}
}

.facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);
  background:var(--paper)}
.facts div{padding:var(--s-24);text-align:center}
.facts div + div{border-inline-start:1px solid var(--rule)}
.facts b{display:block;font-size:var(--t-10);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:400}
[dir=rtl] .facts b{letter-spacing:0;text-transform:none;font-size:var(--t-12)}
.facts span{display:block;font-size:var(--t-14);color:var(--onyx);margin-top:8px}
@media (max-width:760px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts div:nth-child(odd){border-inline-start:0}
  .facts div:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* Platinum tier is visibly more premium: more paper, more air, wider gutters */
.tier-platinum .wrap{max-width:1320px}
.tier-platinum .metal-hero h1{font-size:clamp(48px,8vw,104px)}

/* ── 8 PLP ──────────────────────────────────────────────── */
.plp{display:grid;grid-template-columns:280px 1fr;gap:var(--s-48);align-items:start}
@media (max-width:1000px){ .plp{grid-template-columns:1fr;gap:var(--s-24)} }

.filters{
  background:var(--linen);border:1px solid var(--rule);padding:var(--s-24);
  position:sticky;top:110px;
}
.f-group + .f-group{border-top:1px solid var(--rule);margin-top:var(--s-16);padding-top:var(--s-16)}
.f-group > button{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  font-size:var(--t-10);letter-spacing:.2em;text-transform:uppercase;color:var(--onyx);
  padding-block:4px;
}
[dir=rtl] .f-group > button{letter-spacing:0;text-transform:none;font-size:var(--t-12)}
.f-group .plus{width:10px;height:10px;stroke:var(--mist);stroke-width:1.4;fill:none;
  transition:transform var(--dur) var(--ease)}
.f-group[data-open=false] .plus{transform:rotate(45deg)}
.f-body{padding-top:var(--s-12)}
.f-group[data-open=false] .f-body{display:none}
.f-opt{display:flex;align-items:center;gap:10px;padding-block:6px;font-size:var(--t-14);
  color:var(--slate);cursor:pointer}
.f-opt input{
  appearance:none;width:14px;height:14px;border:1px solid var(--mist);
  border-radius:var(--r-1);flex:none;background:var(--paper);
}
.f-opt input:checked{background:var(--onyx);border-color:var(--onyx)}
.f-opt input:checked::after{content:"";display:block;width:100%;height:100%;
  background:no-repeat center/8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 4.6 9 10 3.2' fill='none' stroke='%23F8F7F4' stroke-width='1.6'/%3E%3C/svg%3E")}
.range{display:flex;align-items:center;gap:10px;margin-top:10px}
.range input{width:100%;accent-color:var(--onyx)}

.plp-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);
  flex-wrap:wrap;padding-bottom:var(--s-16);border-bottom:1px solid var(--rule);
  margin-bottom:var(--s-24);
}
.plp-bar select{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-1);
  padding:9px 12px;font-size:var(--t-12);color:var(--onyx);
}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-16)}
.chip{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule);
  border-radius:var(--r-1);background:var(--paper);padding:6px 10px;
  font-size:var(--t-11);color:var(--slate);
}
.chip button{color:var(--mist);line-height:1;font-size:14px}
.chip button:hover{color:var(--onyx)}

.filter-open{display:none}
@media (max-width:1000px){
  .filters{
    position:fixed;inset-inline:0;bottom:0;top:auto;z-index:var(--z-drawer);
    max-height:82svh;overflow-y:auto;background:var(--paper);border:0;
    border-top:1px solid var(--rule);padding-bottom:96px;
    transform:translateY(100%);visibility:hidden;
    transition:transform var(--dur-slow) var(--ease),visibility 0s linear var(--dur-slow);
  }
  .filters[data-open=true]{
    transform:none;visibility:visible;
    transition:transform var(--dur-slow) var(--ease),visibility 0s;
  }
  .filter-open{display:inline-flex}
  .f-apply{
    position:fixed;inset-inline:0;bottom:0;padding:var(--s-16);background:var(--paper);
    border-top:1px solid var(--rule);
  }
}
@media (min-width:1001px){ .f-apply{display:none} }

/* PLP grid: 4 desktop / 3 tablet / 2 mobile — never 1 */
.plp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-24)}
@media (max-width:1240px){ .plp-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .plp-grid{grid-template-columns:repeat(2,1fr);gap:var(--s-12)} }

/* ── 9 PDP ──────────────────────────────────────────────── */
.pdp{display:grid;grid-template-columns:60% 40%;gap:var(--s-64);align-items:start}
@media (max-width:1000px){ .pdp{grid-template-columns:1fr;gap:var(--s-32)} }
.pdp-gallery{display:grid;grid-template-columns:74px 1fr;gap:var(--s-16)}
@media (max-width:760px){ .pdp-gallery{grid-template-columns:1fr} }
.thumbs{display:flex;flex-direction:column;gap:10px}
.thumbs button{border:1px solid var(--rule);background:var(--paper);padding:0;display:block}
.thumbs button[aria-current=true]{border-color:var(--onyx)}
.thumbs button img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.thumbs .asset-ph span{font-size:7px}
@media (max-width:760px){
  .thumbs{flex-direction:row;order:2;overflow-x:auto}
  .thumbs button{width:64px;flex:none}
}
.stage{position:relative;background:var(--paper);border:1px solid var(--rule);aspect-ratio:4/5}
.stage > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;
  opacity:0;transition:opacity var(--dur) var(--ease)}
.stage > [data-active=true]{opacity:1}

.pdp-info{position:sticky;top:110px}
.crumb{font-size:var(--t-11);color:var(--mist)}
.crumb a:hover{color:var(--onyx)}
.crumb .sep{margin-inline:7px}
.pdp-info h1{font-family:var(--f-head);font-size:var(--t-28);color:var(--onyx);
  margin-top:var(--s-12);line-height:1.2}
[dir=rtl] .pdp-info h1{font-family:var(--f-ar);font-weight:700;line-height:1.5}
.pdp-price{
  font-family:var(--f-display);font-weight:500;font-size:26px;color:var(--onyx);
  font-variant-numeric:tabular-nums;
}
.pdp-rule{border:0;border-top:1px solid var(--rule);margin-block:var(--s-24)}
.stars{display:inline-flex;gap:2px;vertical-align:middle}
.stars svg{width:13px;height:13px;fill:var(--champagne)}

.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch-chip{
  border:1px solid var(--rule);border-radius:var(--r-1);background:var(--paper);
  padding:9px 14px;font-size:var(--t-11);letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
[dir=rtl] .swatch-chip{letter-spacing:0;text-transform:none;font-size:var(--t-13,13px)}
.swatch-chip[aria-pressed=true]{border-color:var(--onyx);color:var(--onyx)}
.reassure li{display:flex;gap:10px;font-size:var(--t-13,13px);color:var(--slate);padding-block:5px}
.reassure svg{width:14px;height:14px;stroke:var(--emerald);fill:none;stroke-width:1.6;flex:none;
  margin-top:5px}

.acc{border-top:1px solid var(--rule)}
.acc > button{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding-block:var(--s-16);font-size:var(--t-12);letter-spacing:.18em;
  text-transform:uppercase;color:var(--onyx);
}
[dir=rtl] .acc > button{letter-spacing:0;text-transform:none;font-size:var(--t-15)}
.acc .plus{width:11px;height:11px;stroke:var(--mist);stroke-width:1.3;fill:none;
  transition:transform var(--dur) var(--ease)}
.acc > button[aria-expanded=true] .plus{transform:rotate(45deg)}
.acc-c{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease)}
.acc-c > div{padding-bottom:var(--s-24)}
.spec-table th,.spec-table td{
  text-align:start;padding:11px 0;border-bottom:1px solid var(--rule);font-size:var(--t-14);
}
.spec-table th{color:var(--mist);font-weight:400;width:44%}
.spec-table td{color:var(--onyx)}

/* ── guides ─────────────────────────────────────────────── */
.prose{max-width:68ch;margin-inline:auto}
.prose h2{font-family:var(--f-head);font-size:var(--t-28);color:var(--onyx);
  margin-top:var(--s-48);margin-bottom:var(--s-16)}
.prose h3{font-family:var(--f-head);font-size:var(--t-22);color:var(--onyx);
  margin-top:var(--s-32);margin-bottom:var(--s-12)}
.prose p{margin-bottom:var(--s-16);font-size:var(--t-16)}
[dir=rtl] .prose h2,[dir=rtl] .prose h3{font-family:var(--f-ar);font-weight:700;line-height:1.5}
.cmp-table{border:1px solid var(--rule);background:var(--paper);margin-block:var(--s-24)}
.cmp-table th,.cmp-table td{padding:13px 16px;border-bottom:1px solid var(--rule);
  text-align:start;font-size:var(--t-14)}
.cmp-table thead th{font-size:var(--t-10);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:400;background:var(--sand)}
[dir=rtl] .cmp-table thead th{letter-spacing:0;text-transform:none;font-size:var(--t-12)}
.cmp-table td{color:var(--onyx)}
.cmp-table tr:last-child th,.cmp-table tr:last-child td{border-bottom:0}

/* ── 404 ────────────────────────────────────────────────── */
.e404{display:grid;place-items:center;text-align:center;min-height:70svh}
.e404 .frame{width:min(300px,70vw);margin-inline:auto;margin-bottom:var(--s-32)}

/* ── reveal-on-scroll ───────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal],.hero [data-fade],.hero .ch,.swatch,.stat{opacity:1 !important;transform:none !important}
}