:root{
  /* Pure white, not the warm ivory this repo was scaffolded with. The ground
     is functional here: the product sells two very pale tints, and a warm
     ground eats a pale tint in a photograph. Every text pair also gains
     contrast against white — --gold crosses WCAG AA for large text at 3.09,
     where it failed at 2.74 on ivory. */
  --paper:#FFFFFF;
  --ink:#141414;
  --soft:#5E5E5E;
  --faint:#9A9A9A;
  --gold:#B08D57;       /* antique gold, details only */
  --line:#E5E5E5;
  --wash:#F5F5F5;
  --noir:#0A0A0A;
}
*{margin:0;padding:0;box-sizing:border-box}
/* The browser's own [hidden]{display:none} is a UA rule, so ANY author
   declaration outranks it — `.subrow{display:flex}` kept the footer's
   subscribe form on screen while its `hidden` attribute said otherwise, which
   meant a visitor with JavaScript off was offered a box that could not post
   anywhere. Every reset carries this line for exactly that reason. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;font-weight:300;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
.wrap{max-width:1280px;margin:0 auto;padding:0 56px}
img{display:block}
::selection{background:var(--gold);color:var(--paper)}

/* nav */
nav{position:fixed;inset:0 0 auto 0;z-index:60;padding:32px 0;
  border-bottom:1px solid transparent;transition:background .6s,border-color .6s,color .6s;color:#FFFFFF}
nav .wrap{display:flex;justify-content:center;align-items:center;position:relative}
.logo{font-family:'Fraunces',serif;font-size:19px;letter-spacing:.62em;font-weight:400;text-transform:uppercase;padding-left:.62em;text-indent:.62em}
.navcta{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:currentColor;
  text-decoration:none;opacity:.8;transition:opacity .4s;padding-bottom:4px;position:relative}
.navcta::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform .5s}
.navcta:hover{opacity:1}
.navcta:hover::after{transform:scaleX(0);transform-origin:right}
nav.stuck{background:rgba(244,241,234,.86);backdrop-filter:blur(18px);border-bottom-color:var(--line);color:var(--ink)}

/* hero */
.hero{position:relative;height:100svh;min-height:600px;background:var(--noir);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,11,9,.5),rgba(12,11,9,.12) 45%,rgba(12,11,9,.6))}
.hero-cap{position:relative;z-index:2;text-align:center;color:var(--paper);padding:0 24px;box-sizing:border-box;max-width:100%}
.hero-cap .k{font-size:10.5px;letter-spacing:.4em;text-transform:uppercase;color:rgba(244,241,234,.62);margin-bottom:32px}
.hero-cap h1{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(1.6rem,6.4vw,5rem);letter-spacing:-.025em;line-height:1.04;white-space:nowrap}
.hero-cap .dot{color:var(--gold)}
.scrollcue{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,241,234,.55)}

/* section */
section{padding:150px 0;border-top:1px solid var(--line)}
.eyebrow{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--faint);margin-bottom:30px}
h2{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.04;letter-spacing:-.025em}

/* PRODUCT */
.product{border-top:1px solid var(--line);position:relative}
.product-head{position:relative;margin-bottom:52px}
.ghost{position:absolute;top:-.46em;left:-.04em;font-family:'Fraunces',serif;font-weight:200;
  font-size:clamp(6rem,13vw,12rem);line-height:1;color:var(--wash);z-index:0;letter-spacing:-.04em;pointer-events:none;user-select:none}
.product-head .name{position:relative;z-index:1;display:flex;align-items:baseline;gap:22px;padding-top:34px}
.product-head .num{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:1.3rem;color:var(--gold);letter-spacing:.1em}
.product h2{font-size:clamp(2.6rem,5vw,4.4rem);position:relative;z-index:1}
.product .form{font-family:'Fraunces',serif;font-style:italic;color:var(--soft);font-size:1.25rem;margin-top:14px;margin-bottom:36px;position:relative;z-index:1}
.product .form + .form2{margin-top:-24px}
.product .form2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:12px;margin-bottom:36px;position:relative;z-index:1}
.shots{display:grid;gap:20px;margin-bottom:52px}
.shots.n1{grid-template-columns:minmax(0,600px)}
.shots.n2{grid-template-columns:1fr 1fr}
.shots figure{overflow:hidden;background:var(--wash);aspect-ratio:4/5;position:relative}
.shots img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.19,1,.22,1);filter:saturate(1.02)}
.shots figure:hover img{transform:scale(1.045)}
/* purchase */
.purchase{display:flex;align-items:center;gap:38px;flex-wrap:wrap;padding-top:34px;border-top:1px solid var(--line)}
.purchase .price{font-family:'Fraunces',serif;font-weight:300;font-size:2.4rem;letter-spacing:-.02em}
.btn{display:inline-block;position:relative;background:transparent;color:var(--ink);
  padding:16px 48px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--ink);overflow:hidden;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:scaleX(1)}
.purchase .ship{font-size:11.5px;letter-spacing:.06em;color:var(--soft)}
.purchase .ship b{color:var(--ink);font-weight:500}

/* product spec line (gold, small caps) */
.specline{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:24px;
  display:flex;flex-wrap:wrap;gap:4px 0;max-width:none!important}
.specline span{white-space:nowrap}
.specline span:not(:last-child)::after{content:"·";margin:0 12px;opacity:.55}

/* editorial alternating cards (Ring story) */
.ed{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:92px}
.ed.flip .ed-text{order:-1}
.ed figure{aspect-ratio:4/5;overflow:hidden;background:var(--wash)}
.ed.sq figure{aspect-ratio:1}
.ed img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.19,1,.22,1)}
.ed:hover img{transform:scale(1.04)}
.ed-text .k{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.ed-text h3{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.08;letter-spacing:-.02em}
.ed-text p{margin-top:20px;color:var(--soft);font-size:1.05rem;line-height:1.65;max-width:36ch}
.ed-text .big{font-family:'Fraunces',serif;font-style:italic;font-weight:200;
  font-size:clamp(2.4rem,5vw,4rem);line-height:1;letter-spacing:-.02em;color:var(--ink)}
/* full-bleed statement image */
.hero-shot{position:relative;height:96svh;min-height:560px;overflow:hidden;background:var(--noir)}
.hero-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.hero-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,9,.25),transparent 35%,rgba(12,11,9,.55))}
.hero-shot .cap{position:absolute;left:0;right:0;bottom:64px;z-index:2;text-align:center;color:var(--paper)}
.hero-shot .cap .big{font-family:'Fraunces',serif;font-style:italic;font-weight:200;font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.02em}

/* hardware */
.spec{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px;border-top:1px solid var(--ink)}
.spec div{padding:40px 30px 40px 0;border-bottom:1px solid var(--line)}
.spec h4{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:400;margin-bottom:12px}
.spec p{font-size:12px;letter-spacing:.02em;color:var(--soft);line-height:1.5}

/* hardware — four independent full bands, each repeats the header */
.hwband{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);align-items:stretch}
.hwband:last-of-type{border-bottom:1px solid var(--line)}
.hwband figure{overflow:hidden;background:var(--wash);aspect-ratio:1/1}
.hwband img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.19,1,.22,1)}
.hwband:hover img{transform:scale(1.045)}
.hwband .htext{display:flex;flex-direction:column;justify-content:center;padding:64px clamp(30px,5vw,72px)}
.hwband.flip figure{order:2}
.hwband .k{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.hwband .lede{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.02em;line-height:1.1;color:var(--soft);margin-bottom:40px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.hwband .fname{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(2.4rem,4vw,3.4rem);letter-spacing:-.02em;line-height:1}
.hwband .fsub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:16px}
.hwband.notext{grid-template-columns:1fr}
.hwband.notext .htext{text-align:center;align-items:center;padding:80px clamp(30px,5vw,72px)}
.hwband.notext .lede{border-bottom:none;padding-bottom:0;margin-bottom:28px}

/* hardware feature cards with image */
.hwgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:64px}
.hwcard figure{aspect-ratio:4/5;overflow:hidden;background:var(--wash);margin-bottom:22px}
.hwcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.19,1,.22,1)}
.hwcard:hover img{transform:scale(1.05)}
.hwcard h4{font-family:'Fraunces',serif;font-size:1.35rem;font-weight:400;letter-spacing:-.01em;margin-bottom:8px}
.hwcard p{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* app card with image */
.appwrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;margin-top:64px}
.appwrap figure{aspect-ratio:4/5;overflow:hidden;background:var(--wash)}
.appwrap img{width:100%;height:100%;object-fit:cover}
.appcol h3{font-family:'Fraunces',serif;font-weight:200;font-size:2rem;line-height:1.15;letter-spacing:-.015em}
.appcol .sub{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:16px}
.btn-app{display:inline-block;margin-top:28px;background:var(--ink);color:var(--paper);
  padding:18px 54px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  position:relative;overflow:hidden;z-index:1;border:1px solid var(--ink)}
.btn-app::before{content:"";position:absolute;inset:0;background:var(--gold);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.btn-app:hover{border-color:var(--gold)}
.btn-app:hover::before{transform:scaleX(1)}
.applangs{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}

/* imageless app block */
.appblock{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.appblock .col-lang{padding-top:0}
.appblock .col-lang .applangs{margin-top:0;padding-top:0;border-top:none}

/* new voice-app card: tools + speed */
.voicecard{margin-top:1px;border-top:1px solid var(--line);padding-top:80px}
.tools-lede{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.025em;line-height:1.04;max-width:20ch}
.tools{margin-top:52px;display:flex;flex-wrap:wrap;gap:14px 0;align-items:center}
.tools span{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--ink);white-space:nowrap}
.tools .sep{color:var(--faint);margin:0 18px;font-size:.9rem}
/* three tool zones */
.toolzones{margin-top:52px;display:flex;flex-direction:column;gap:0}
.tzrow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;padding:34px 0;text-align:center}
.tzrow span{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1rem,1.4vw,1.25rem);color:var(--ink);white-space:nowrap}
.tzrow .sep{color:var(--faint);margin:0 16px;font-size:.85rem}
.tzcenter{position:relative;padding:52px clamp(24px,5vw,64px);margin:8px 0;
  background:radial-gradient(120% 100% at 50% 50%, rgba(176,141,87,.10), transparent 72%);
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.tzcenter .tzk{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.tzcenter .tzitems{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 0}
.tzcenter .tzitems span{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.tzcenter .tzitems .sep{color:var(--gold);margin:0 18px;font-size:1rem;opacity:.6}
.speed{margin-top:96px;padding-top:56px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:baseline}
.speed h3{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(2.4rem,4.5vw,3.8rem);letter-spacing:-.03em;line-height:1.02}
.speed h3 em{font-style:italic;color:var(--gold)}
.speed .body{color:var(--soft);font-size:1.02rem;line-height:1.7;max-width:40ch}
.speed .body b{color:var(--ink);font-weight:500}

/* language comparison table */
.langvs{margin-top:8px}
.langvs .vshead{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.02em;line-height:1.15;margin-bottom:8px}
.langvs .vssub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:36px}
.vstable{width:100%;border-collapse:collapse;font-size:14px}
.vstable th,.vstable td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.vstable th{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:400;vertical-align:bottom;line-height:1.5}
.vstable th.c,.vstable td.c{text-align:center;white-space:nowrap}
.vstable .lang{font-family:'Fraunces',serif;font-size:1.05rem;color:var(--ink)}
.vstable .tier td{padding-top:30px;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.vstable .tier span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.vstable .brand{color:var(--ink);font-weight:500}
.vstable .strong{color:var(--gold);font-weight:600}
.vstable .miss{color:var(--faint)}
.vstable .lim{color:var(--soft)}
.vslegend{margin-top:28px;font-size:11.5px;color:var(--soft);line-height:1.7;letter-spacing:.02em}
.vsdisclosure{margin-top:18px;font-size:11px;color:var(--faint);line-height:1.6;max-width:74ch;font-style:italic}

/* choose by the room — two forms compared */
.vsforms{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px;border-top:1px solid var(--ink)}
.vsforms.three{grid-template-columns:repeat(3,1fr)}
.vsforms.three .vf{padding:40px 28px 40px 0}
.vsforms.three .vf:not(:first-child){padding-left:28px;border-left:1px solid var(--gold)}
.vsforms .vf{padding:40px 44px 40px 0}
.vsforms .vf:last-child{padding-left:44px;border-left:1px solid var(--gold)}
.vsforms .vf h4{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.02em;margin-bottom:26px}
.vsforms .vf p{font-size:1.02rem;color:var(--soft);line-height:1.6;padding:12px 0;border-bottom:1px solid var(--line)}
.vsforms .vf p:last-child{border-bottom:none}
.vfnote{margin-top:40px;text-align:center;font-family:'Fraunces',serif;font-style:italic;font-weight:200;
  font-size:clamp(1.4rem,2.8vw,2rem);letter-spacing:-.015em;color:var(--ink)}

/* product pick rows (colour / lens / follow-up) */
.pickrow{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);max-width:46ch}
.pickrow p{font-size:.95rem;color:var(--soft);line-height:1.6;padding:11px 0;
  display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:18px;align-items:baseline}
.pickrow span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* what it is not */
.nots{border-top:1px solid var(--ink)}
.nots p{padding:26px 0;border-bottom:1px solid var(--line);font-size:1.02rem;color:var(--soft);line-height:1.6;
  display:grid;grid-template-columns:minmax(150px,1fr) 3fr;gap:28px;align-items:baseline}
.nots span{font-family:'Fraunces',serif;font-style:normal;font-weight:300;font-size:clamp(1.2rem,2.2vw,1.6rem);
  letter-spacing:-.02em;color:var(--ink)}

/* distance ladder */
.ladder{border-top:1px solid var(--ink)}
.rung{display:grid;grid-template-columns:minmax(120px,1fr) 3fr;gap:24px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--line)}
.rung .d{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.02em;color:var(--faint)}
.rung .w{font-size:1.02rem;color:var(--faint);letter-spacing:.02em}
.rung.ours .d{color:var(--ink)}
.rung.ours .w{color:var(--gold);font-weight:500}

/* zone title cards (The Hardware / The Software) */
.zone{text-align:center;padding:120px 0 40px}
.zone .eng{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.zone h2{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.025em;line-height:1.05}
.zone .zsub{font-size:13px;letter-spacing:.06em;color:var(--soft);margin-top:22px}

/* banner zone card — text over poster image */
.zonebanner.tall{aspect-ratio:auto;padding:84px 0}
.zonebanner .phrases{font-size:clamp(1.5rem,3.4vw,2.8rem);line-height:1.4}
.zonebanner{position:relative;width:100%;aspect-ratio:24/9;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.zonebanner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.zonebanner::after{content:"";position:absolute;inset:0;background:rgba(20,14,8,.32);z-index:1}
.zonebanner .zb-sub{font-family:'Fraunces',serif;font-style:italic;font-weight:200;font-size:clamp(.95rem,1.6vw,1.3rem);color:rgba(244,241,234,.72);margin-top:18px}
.zonebanner .zb-in{position:relative;z-index:2;color:var(--paper)}
.zonebanner .eng{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(244,241,234,.82);margin-bottom:18px}
.zonebanner h2{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(2.2rem,5.5vw,4.4rem);letter-spacing:-.025em;line-height:1.02;color:var(--paper)}
.zonebanner.noimg{aspect-ratio:auto;padding:120px 0;background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zonebanner.noimg::after{display:none}
.zonebanner.noimg .zb-in{color:var(--ink)}
.zonebanner.noimg .eng{color:var(--gold)}
.zonebanner.noimg h2{color:var(--ink)}

/* generic feature card (touch strip / nfc) */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:70px 0;border-top:1px solid var(--line)}
.feat.flip .feat-media{order:2}
.feat-media{aspect-ratio:4/5;overflow:hidden;background:var(--wash);border:1px solid var(--line)}
.feat-media.portrait{aspect-ratio:4/5}
.feat-media.logomark{aspect-ratio:4/5}
.feat-media.logomark img{object-fit:contain}
.feat-media img{width:100%;height:100%;object-fit:cover}
.feat .k{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.feat h3{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(1.9rem,3.4vw,2.8rem);letter-spacing:-.02em;line-height:1.1;margin-bottom:22px}
.feat p{color:var(--soft);font-size:1.02rem;line-height:1.7;max-width:44ch}
.feat .partner{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.03em;color:var(--soft)}
.feat .partner b{color:var(--ink);font-weight:500}
.feat-text a.ig{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(176,141,87,.4);transition:border-color .2s,color .2s}
.feat-text a.ig:hover{color:var(--ink);border-bottom-color:var(--ink)}
.feat .tpdo{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 0;align-items:center}
.feat .tpdo span{font-family:'Fraunces',serif;font-size:1rem;color:var(--ink);white-space:nowrap}
.feat .tpdo span:not(:last-child)::after{content:"·";color:var(--faint);margin:0 12px;font-size:.8rem}
.feat .tp-title{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(2.2rem,4vw,3.2rem);letter-spacing:-.025em;line-height:1.05;margin-bottom:22px}
.feat .tpapps{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 0;align-items:center}
.feat .tpapps span{font-family:'Fraunces',serif;font-size:1rem;color:var(--ink);white-space:nowrap}
.feat .tpapps .sep{color:var(--faint);margin:0 12px;font-size:.8rem}

/* Oasis-style glass compatibility card */
.compat{margin-top:1px;padding:100px clamp(24px,5vw,80px) 110px;text-align:center;
  background:radial-gradient(120% 90% at 50% 40%, rgba(176,141,87,.10), transparent 70%)}
.compat > .ct{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.02em;margin-bottom:56px}
.glasscard{max-width:560px;margin:0 auto;background:rgba(255,255,255,.55);backdrop-filter:blur(18px);
  border:1px solid rgba(176,141,87,.28);border-radius:22px;padding:38px 40px;box-shadow:0 30px 80px -40px rgba(60,40,20,.4)}
.glasscard .gk{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.glasscard .gfeat{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.01em;color:var(--ink)}
.compat .layer{margin-top:48px}
.compat .layer .lk{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin-bottom:22px}
.compat .row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px}
.compat .row .it{font-family:'Fraunces',serif;font-size:1.15rem;color:var(--ink);white-space:nowrap}

/* software hardware-compat note */
.swcompat{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.swcompat .ck{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.swcompat .clist{display:flex;flex-wrap:wrap;gap:12px 0;align-items:center}
.swcompat .clist span{font-family:'Fraunces',serif;font-size:1.1rem;color:var(--ink);white-space:nowrap}
.swcompat .clist .sep{color:var(--faint);margin:0 16px;font-size:.85rem}
.swcompat .note{margin-top:22px;color:var(--soft);font-size:.98rem;line-height:1.7;max-width:64ch}
.swcompat .note b{color:var(--ink);font-weight:500}
.swcompat .bighook{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(2.4rem,6vw,5rem);letter-spacing:-.03em;line-height:1.02;color:var(--ink);margin-bottom:32px}

/* Razzhood Agent card */
.agent{margin-top:96px;padding-top:80px;border-top:1px solid var(--line)}
.agent .ak{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.agent h3{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(2.2rem,4.5vw,3.6rem);letter-spacing:-.025em;line-height:1.05;margin-bottom:14px}
.agent .asub{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(1.2rem,2vw,1.5rem);color:var(--soft);margin-bottom:40px}
.agent .lead{color:var(--soft);font-size:1.05rem;line-height:1.75;max-width:60ch;margin-bottom:48px}
.agent .agentflow{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1.1rem,2vw,1.5rem);color:var(--gold);letter-spacing:.01em;margin:20px 0 44px}
.agent .three{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:8px}.agent .three .t{border-top:1px solid var(--ink);padding-top:20px}
.agent .refinehl{margin-top:56px;padding:48px clamp(24px,5vw,64px);text-align:center;
  background:radial-gradient(120% 100% at 50% 50%, rgba(176,141,87,.09), transparent 72%);
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.agent .refinehl .rh-k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.agent .refinehl .rh-items{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 0}
.agent .refinehl .rh-items span{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(1.4rem,2.6vw,2.1rem);letter-spacing:-.015em;color:var(--ink);white-space:nowrap;margin:0 20px}
.agent .three .t h4{font-family:'Fraunces',serif;font-weight:400;font-size:1.3rem;letter-spacing:-.01em;margin-bottom:10px}
.agent .three .t p{font-size:.95rem;color:var(--soft);line-height:1.6}
.agent .brain{margin-top:44px;font-family:'Fraunces',serif;font-weight:200;font-size:clamp(1.3rem,2.4vw,1.8rem);letter-spacing:-.015em;color:var(--ink);line-height:1.3}

/* Top Drwr partner card */
.tdrwr{margin-top:0}
.tdrwr .k{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.tdrwr h3{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.03em;line-height:1;margin-bottom:36px}
.tdrwr .body{max-width:64ch}
.tdrwr .body p{color:var(--soft);font-size:1.02rem;line-height:1.8;margin-bottom:20px}
.tdrwr .body p b{color:var(--ink);font-weight:500}
.tdgallery{margin-top:56px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.tdgallery figure{margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--wash);border:1px solid var(--line)}
.tdgallery img{width:100%;height:100%;object-fit:cover;display:block}

/* software */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:64px}
.cards h3{font-family:'Fraunces',serif;font-weight:200;font-size:2rem;line-height:1.15;letter-spacing:-.015em}
.cards .sub{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:18px}
.applink{display:inline-block;margin-top:32px;position:relative;color:var(--ink);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;padding-bottom:6px;border-bottom:1px solid var(--ink)}
.applink:hover{color:var(--gold);border-color:var(--gold)}
.langlist{margin-top:36px;display:flex;flex-wrap:wrap;gap:0 26px;row-gap:18px;align-items:baseline}
.langlist span{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1.3rem,2vw,1.7rem);color:var(--ink)}
.langlist .more{color:var(--faint);font-style:italic;font-size:1rem}

/* purchase cards (page close) */
.buycard{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:80px 0;border-top:1px solid var(--line)}
.buycard:last-of-type{border-bottom:1px solid var(--line)}
.buycard figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--wash)}
.buycard img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform 1.6s cubic-bezier(.19,1,.22,1)}
.buycard:hover img{transform:scale(1.04)}
.buycard .k{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.buycard h3{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(2rem,3.8vw,3rem);letter-spacing:-.025em;line-height:1.05;margin-bottom:14px}
.buycard .bc-form{font-family:'Fraunces',serif;font-style:italic;color:var(--soft);font-size:1.1rem;margin-bottom:32px}
.buycard .bc-note{color:var(--soft);font-size:.98rem;line-height:1.65;max-width:42ch;margin-bottom:30px}
.buycard .bc-price{font-family:'Fraunces',serif;font-weight:300;font-size:2.6rem;letter-spacing:-.02em;margin-bottom:28px}
.buycard .bc-opts{padding-top:22px;border-top:1px solid var(--line);margin-bottom:34px}
.buycard .bc-opts p{font-size:.95rem;color:var(--soft);padding:9px 0;line-height:1.5}
.buycard .bc-opts span{display:inline-block;min-width:112px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.buycard .bc-subrow{display:flex;border-bottom:1px solid var(--ink);max-width:380px;margin-bottom:20px}
.buycard .bc-subrow input{flex:1;border:0;background:transparent;padding:12px 0;font-family:inherit;font-size:14px;color:var(--ink);outline:none}
.buycard .bc-subrow input::placeholder{color:var(--faint)}
.buycard .bc-subrow button{border:0;background:transparent;cursor:pointer;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding:0 0 0 16px;white-space:nowrap}
.buycard .bc-ship{margin-top:20px;font-size:11.5px;letter-spacing:.05em;color:var(--faint)}

/* FAQ — details/summary, editorial */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:26px 0;font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.015em;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:24px;transition:color .4s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Inter',sans-serif;font-weight:200;font-size:1.4rem;
  color:var(--gold);flex-shrink:0;transition:transform .4s cubic-bezier(.19,1,.22,1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--gold)}
.faq details p{padding:0 0 28px;max-width:62ch;color:var(--soft);font-size:1rem;line-height:1.7}


/* language switch — a link to the counterpart page, not a toggle. The language
   is the URL, so switching is navigation and survives every reload. */
#lang{position:absolute;right:clamp(20px,4vw,56px);top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:currentColor;opacity:.72;
  text-decoration:none;
  display:flex;align-items:center;gap:7px;padding:6px 2px;
  font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.14em;
  transition:color .4s}
#lang:hover{opacity:1;color:var(--gold)}
#lang svg{width:14px;height:14px;flex-shrink:0}
@media(max-width:720px){
  #lang{right:16px;gap:5px;font-size:10px;letter-spacing:.08em}
  #lang svg{width:12px;height:12px}
}

/* the same switch on the pages that carry no nav — success, track, 404. They
   used to be dead ends in whichever language they were written in. */
.lang-bare{position:fixed;top:22px;right:clamp(18px,4vw,40px);z-index:20;
  color:var(--soft);text-decoration:none;opacity:.72;
  font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.14em;
  transition:color .4s,opacity .4s}
.lang-bare:hover{opacity:1;color:var(--gold)}

/* first-visit hint. It offers the other language and never redirects: an
   automatic redirect fights an explicit link and confuses crawlers. */
.lang-suggest{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:30;display:flex;align-items:center;gap:18px;max-width:calc(100vw - 32px);
  padding:12px 18px;background:var(--paper,#F4F1EA);border:1px solid var(--line);
  font-family:'Inter',sans-serif;font-size:12.5px;color:var(--soft);
  box-shadow:0 6px 28px rgba(0,0,0,.06)}
.lang-suggest a{color:var(--ink);white-space:nowrap}
.lang-suggest button{background:none;border:0;cursor:pointer;color:var(--faint);
  font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:2px}
.lang-suggest button:hover{color:var(--ink)}
@media(max-width:520px){
  .lang-suggest{left:16px;right:16px;transform:none;gap:12px;font-size:12px}
}


/* Closing statements on the creators and vision pages. These rules were
   deleted with the landing page's name section and had to come back: two
   other pages still use the markup. */
.namecard h2{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(3rem,8vw,6rem);letter-spacing:-.03em;line-height:1;margin-bottom:10px}
.namecard .cn{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(1.4rem,3vw,2.2rem);color:var(--gold);letter-spacing:.14em;margin-bottom:56px}
.namecard .line1{font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--soft);line-height:1.7;max-width:44ch;margin:0 auto 26px}
.namecard .line2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.02em;color:var(--ink);margin-bottom:26px}
.namecard .line3{font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--soft);line-height:1.7;max-width:44ch;margin:0 auto 52px}
.namecard .sig{font-family:'Fraunces',serif;font-style:italic;font-weight:200;font-size:clamp(.95rem,1.5vw,1.15rem);color:var(--faint)}

footer{border-top:1px solid var(--line);padding:70px 0 84px}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:32px}
.sublabel{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.subrow{display:flex;border-bottom:1px solid var(--ink);max-width:340px}
.subrow input{flex:1;border:0;background:transparent;padding:10px 0;font-family:inherit;font-size:14px;color:var(--ink);outline:none}
.subrow input::placeholder{color:var(--faint)}
.subrow button{border:0;background:transparent;cursor:pointer;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.copy{font-family:'Fraunces',serif;font-size:16px;letter-spacing:.5em;text-transform:uppercase;color:var(--soft)}

.rv{opacity:0;transform:translateY(28px);transition:opacity 1.3s cubic-bezier(.19,1,.22,1),transform 1.3s cubic-bezier(.19,1,.22,1)}
.rv.in{opacity:1;transform:none}

/* ===== TABLET ===== */
@media (max-width:900px){
  .wrap{padding:0 26px}
  .shots.n1{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr;gap:56px}
  .hwgrid{grid-template-columns:1fr 1fr;gap:16px}
  .hwband{grid-template-columns:1fr}
  .hwband.flip figure{order:0}
  .hwband figure{aspect-ratio:4/5}
  .hwband .htext{padding:44px 26px}
  .appwrap{grid-template-columns:1fr;gap:36px}
  .appblock{grid-template-columns:1fr;gap:48px}
  .speed{grid-template-columns:1fr;gap:28px}
  .tools span{font-size:1.05rem}
  .vstable th,.vstable td{padding:10px 8px;font-size:12.5px}
  .vstable .lang{font-size:.95rem}
  .feat{grid-template-columns:1fr;gap:32px}
  .feat.flip .feat-media{order:0}
  .feat-media{aspect-ratio:16/9}
  .feat-media.portrait{aspect-ratio:4/5}
  .feat-media.logomark{aspect-ratio:16/9}
  .agent .three{grid-template-columns:1fr;gap:24px}
  .agent .three .t{border-top:none;border-left:1px solid var(--ink);padding:4px 0 4px 20px}
  .compat .row{gap:12px 24px}
  .spec{grid-template-columns:1fr 1fr}
  .ed{grid-template-columns:1fr;gap:28px;margin-top:64px}
  .ed.flip .ed-text{order:0}
  section{padding:96px 0}
  .product h2{font-size:2.6rem}
  .ghost{font-size:11rem}
  .zonebanner{aspect-ratio:16/9}
  .tdgallery{grid-template-columns:repeat(3,1fr)}

  /* refine highlight: four phrases were designed for desktop width */
  .agent .refinehl{padding:40px 24px}
  .agent .refinehl .rh-items span{margin:0 12px;font-size:clamp(1.2rem,3.2vw,1.7rem)}

  /* tool zones: tighten separators so rows don't overflow */
  .tzcenter{padding:44px 24px}
  .tzcenter .tzitems .sep{margin:0 12px}
  .tzrow .sep{margin:0 12px}

  /* founder letter text column */
  .feat-text p{max-width:none}

  /* glasses: form comparison + buy cards stack */
  .vsforms,.vsforms.three{grid-template-columns:1fr}
  .vsforms.three .vf{padding:32px 0}
  .vsforms.three .vf:not(:first-child){padding-left:0;border-left:none;border-top:1px solid var(--gold)}
  .rung{grid-template-columns:minmax(96px,1fr) 2fr;gap:16px}
  .nots p{grid-template-columns:minmax(130px,1fr) 2fr;gap:18px}
  .vsforms .vf{padding:32px 0}
  .vsforms .vf:last-child{padding-left:0;border-left:none;border-top:1px solid var(--gold)}
  .buycard{grid-template-columns:1fr;gap:36px;padding:64px 0}
}

/* ===== PHONE ===== */
@media (max-width:600px){
  .wrap{padding:0 20px}
  section{padding:72px 0}

  /* hero: min-height 600 + fixed nav crowds short phones (SE = 667) */
  .hero{min-height:520px}
  nav{padding:22px 0}

  /* hero + big headings: allow wrap on phone (nowrap would shrink text illegibly) */
  .hero-cap h1{font-size:clamp(1.6rem,7.6vw,2.6rem);line-height:1.06}
  .product h2{font-size:2rem}
  .ghost{font-size:6.5rem}

  /* editorial big serif headings scale down */
  .ed-text h3{font-size:clamp(2rem,9vw,2.6rem)!important}
  .vshead{font-size:clamp(2rem,8.5vw,2.6rem)!important}
  .zonebanner h2{font-size:clamp(1.7rem,8vw,2.4rem)}
  .zonebanner .eng{font-size:9px;letter-spacing:.24em}

  /* comparison table: compact but readable */
  .langvs{margin-top:56px!important;padding-top:56px!important}
  .vstable th,.vstable td{padding:9px 4px;font-size:11.5px}
  .vstable .lang{font-size:.9rem}
  .vstable .tier span{font-size:8.5px;letter-spacing:.12em}
  .vslegend{font-size:10px}

  /* tool zones: let items wrap, shrink center zone */
  .tools-lede{white-space:normal!important;font-size:clamp(1.6rem,8vw,2.4rem)!important}
  .tzrow{padding:22px 0}
  .tzrow span{font-size:.95rem;white-space:normal}
  .tzrow .sep{margin:0 10px}
  .tzcenter{padding:36px 18px}
  .tzcenter .tzitems span{font-size:clamp(1.1rem,5vw,1.5rem);white-space:normal}
  .tzcenter .tzitems .sep{margin:0 10px}

  /* refine highlight: stack the four phrases */
  .agent .refinehl{padding:36px 20px}
  .agent .refinehl .rh-items{flex-direction:column;gap:10px}
  .agent .refinehl .rh-items span{margin:0;font-size:clamp(1.3rem,6.5vw,1.8rem)}
  .tdgallery{grid-template-columns:repeat(2,1fr);gap:10px}
  .tdrwr h3{font-size:clamp(2.2rem,9vw,3rem)}

  /* NFC / feature card media frame shorter on phone */
  .feat-media{aspect-ratio:3/2}
  .feat-media.portrait{aspect-ratio:4/5}
  .feat-media.logomark{aspect-ratio:3/2}

  /* product spec lines: segments wrap whole, never split */
  .specline{font-size:10px;letter-spacing:.14em}
  .specline span:not(:last-child)::after{margin:0 8px}

  /* founder letter: signature and name sizing */
  .feat h3{font-size:clamp(1.9rem,8.5vw,2.4rem)}
  .feat-text p{max-width:none;font-size:.98rem}

  /* spec grid: 2-up is too cramped under 600 */
  .spec{grid-template-columns:1fr}
  .spec div{padding:30px 0}

  /* hardware feature cards: 2-up gets tight, keep but shrink type */
  .hwcard h4{font-size:1.15rem}
  .hwcard p{font-size:10px;letter-spacing:.1em}

  /* nav: keep logo + CTA on one line */
  .logo{font-size:15px;letter-spacing:.28em}
  .navcta{font-size:9.5px;letter-spacing:.18em;padding:9px 18px}

  /* purchase row wraps cleanly */
  .purchase{flex-wrap:wrap;gap:14px}

  /* compat / swcompat text sizing */
  .swcompat .bighook{font-size:clamp(1.6rem,7.5vw,2.2rem)!important}
  .compat > .ct{font-size:clamp(1.6rem,7vw,2.2rem)}
  .glasscard{padding:30px 26px}

  /* product pick rows (colour / lens / follow-up) */
.pickrow{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);max-width:46ch}
.pickrow p{font-size:.95rem;color:var(--soft);line-height:1.6;padding:11px 0;
  display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:18px;align-items:baseline}
.pickrow span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* what it is not */
.nots{border-top:1px solid var(--ink)}
.nots p{padding:26px 0;border-bottom:1px solid var(--line);font-size:1.02rem;color:var(--soft);line-height:1.6;
  display:grid;grid-template-columns:minmax(150px,1fr) 3fr;gap:28px;align-items:baseline}
.nots span{font-family:'Fraunces',serif;font-style:normal;font-weight:300;font-size:clamp(1.2rem,2.2vw,1.6rem);
  letter-spacing:-.02em;color:var(--ink)}

/* distance ladder */
  .rung{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .rung .d{font-size:1.4rem}
  .rung .w{font-size:.95rem}

  /* glasses + buy cards */
  .vsforms .vf h4{font-size:1.5rem}
  .vsforms .vf p{font-size:.95rem}
  .vfnote{font-size:clamp(1.2rem,6vw,1.6rem);margin-top:32px}
  .buycard{padding:52px 0}
  .buycard .bc-note{color:var(--soft);font-size:.98rem;line-height:1.65;max-width:42ch;margin-bottom:30px}
.buycard .bc-price{font-size:2.1rem}
  .buycard .bc-opts span{min-width:0;display:block;margin-bottom:3px}
  .buycard .bc-subrow{max-width:none}

  /* footer */
  .subrow{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .hero video{display:none}
}

/* ══════════════════════════════════════════════════════
   GLASSES SITE — additions
   ══════════════════════════════════════════════════════ */

/* nav links */
nav .navlinks{position:absolute;left:clamp(20px,4vw,56px);top:50%;transform:translateY(-50%);
  display:flex;gap:clamp(14px,2.4vw,30px);align-items:center}
nav .navlinks a{color:currentColor;text-decoration:none;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;opacity:.66;transition:opacity .3s,color .3s}
nav .navlinks a:hover,nav .navlinks a[aria-current]{opacity:1;color:var(--gold)}
@media(max-width:760px){
  nav .navlinks{gap:12px;left:16px}
  nav .navlinks a{font-size:9px;letter-spacing:.1em}
  .logo{font-size:15px;letter-spacing:.4em}
}
/* English labels run about half again as wide as their Chinese equivalents, so
   the bar reaches the centred logo roughly 350px of viewport earlier and the
   760px breakpoint arrives far too late — every English page overlapped below
   about 1110px. Shrink sooner on English pages only; the Chinese layout, which
   has always fitted, is left exactly as it was. It is the same treatment the
   bar already gets below 760px, triggered earlier for the language that needs
   it earlier. */
@media(max-width:1120px){
  html[lang="en"] nav .navlinks{gap:12px;left:16px}
  html[lang="en"] nav .navlinks a{font-size:9px;letter-spacing:.1em}
  html[lang="en"] nav .logo{font-size:15px;letter-spacing:.4em}
}

/* Shrinking runs out. Below it, links drop one at a time in the order
   build.mjs stamps into data-drop, least important first; `creators` carries no
   rank and never leaves. Only `notes` used to drop, and only below 460px, which
   still left the Chinese bar 40px inside the wordmark on a 400px phone —
   measured, in both languages, because a five-item bar and a centred wordmark
   cannot both have the middle of a phone.

   English drops earlier at every step, for the same reason it shrinks earlier. */
@media(max-width:620px){ nav .navlinks a[data-drop="1"]{display:none} }
@media(max-width:540px){ nav .navlinks a[data-drop="2"]{display:none} }
@media(max-width:470px){ nav .navlinks a[data-drop="3"]{display:none} }
@media(max-width:410px){ nav .navlinks a[data-drop="4"]{display:none} }
@media(max-width:780px){ html[lang="en"] nav .navlinks a[data-drop="1"]{display:none} }
@media(max-width:680px){ html[lang="en"] nav .navlinks a[data-drop="2"]{display:none} }
@media(max-width:580px){ html[lang="en"] nav .navlinks a[data-drop="3"]{display:none} }
@media(max-width:500px){ html[lang="en"] nav .navlinks a[data-drop="4"]{display:none} }

/* light hero (product on paper) */
.lhero{padding:186px 0 0;border-top:none;background:var(--paper)}
.lhero .lh-k{font-size:10.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.lhero h1{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(2.4rem,7vw,5.6rem);
  letter-spacing:-.035em;line-height:.98;max-width:16ch}
.lhero .lh-sub{margin-top:30px;font-size:clamp(1.02rem,1.7vw,1.3rem);color:var(--soft);
  line-height:1.6;max-width:44ch}
.lhero .lh-price{margin-top:38px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.lhero .lh-price .p{font-family:'Fraunces',serif;font-weight:300;font-size:2.6rem;letter-spacing:-.02em}
.lhero .lh-price .t{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.lhero figure{margin:52px 0 0;background:transparent}
.lhero figure img{width:100%;max-width:1000px;margin:0 auto;height:auto;
  mix-blend-mode:darken}

/* ── SIGNATURE: the picker ───────────────────────────── */
.picker{border-top:1px solid var(--ink);margin-top:44px}
.pk-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:start;padding-top:44px}
.pk-stage{position:relative;background:var(--paper);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pk-stage img{position:absolute;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .55s cubic-bezier(.19,1,.22,1);mix-blend-mode:darken}
.pk-stage img.on{opacity:1}
.pk-lensdot{position:absolute;right:6%;bottom:8%;width:74px;height:74px;border-radius:50%;
  border:1px solid var(--line);transition:background .5s;box-shadow:0 10px 30px -14px rgba(60,40,20,.5)}
.pk-lensdot::after{content:attr(data-label);position:absolute;left:50%;top:calc(100% + 12px);
  transform:translateX(-50%);white-space:nowrap;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}
.pk-step{margin-bottom:34px}
.pk-step .n{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pk-step .n em{font-style:normal;color:var(--faint);letter-spacing:.08em}
.pk-sw{display:flex;flex-wrap:wrap;gap:12px}
.pk-sw button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  padding:0;position:relative;transition:transform .3s cubic-bezier(.19,1,.22,1),box-shadow .3s}
.pk-sw button:hover{transform:scale(1.09)}
.pk-sw button[aria-pressed="true"]{box-shadow:0 0 0 1px var(--paper),0 0 0 2px var(--ink)}
.pk-sw button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* Size is two words, not two colours, and it changes no price — so it gets a
   plain pair of pills rather than the swatch row or the priced list. */
.pk-size{display:flex;gap:10px}
.pk-size button{flex:1;background:none;border:1px solid var(--line);padding:13px 10px;cursor:pointer;
  font-family:inherit;font-size:.95rem;letter-spacing:.02em;color:var(--soft);
  transition:color .3s,border-color .3s}
.pk-size button:hover{color:var(--ink)}
.pk-size button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink);font-weight:500}
.pk-size button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pk-list{border-top:1px solid var(--line)}
.pk-list button{display:flex;width:100%;align-items:center;gap:16px;background:none;border:0;
  border-bottom:1px solid var(--line);padding:15px 0;cursor:pointer;text-align:left;
  font-family:inherit;color:var(--soft);transition:color .3s}
.pk-list button:hover{color:var(--ink)}
.pk-list button .chip{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);flex-shrink:0}
.pk-list button .nm{flex:1;font-size:.98rem;letter-spacing:.01em}
.pk-list button .pr{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.pk-list button[aria-pressed="true"]{color:var(--ink)}
.pk-list button[aria-pressed="true"] .nm{font-weight:500}
.pk-list button[aria-pressed="true"] .pr{color:var(--gold)}
.pk-list button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.pk-toggle{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);
  cursor:pointer;color:var(--soft);font-size:.98rem;transition:color .3s}
.pk-toggle:hover{color:var(--ink)}
.pk-toggle input{appearance:none;width:16px;height:16px;border:1px solid var(--ink);cursor:pointer;
  flex-shrink:0;transition:background .25s}
.pk-toggle input:checked{background:var(--ink)}
.pk-toggle input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pk-toggle .pr{margin-left:auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.pk-out{margin-top:34px;padding-top:26px;border-top:1px solid var(--ink)}
.pk-out .sum{font-size:11.5px;letter-spacing:.03em;color:var(--soft);line-height:1.7;margin-bottom:20px;min-height:2.4em}
.pk-out .sum b{color:var(--ink);font-weight:500}
.pk-total{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px}
.pk-total .lab{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
.pk-total .val{font-family:'Fraunces',serif;font-weight:300;font-size:2.9rem;letter-spacing:-.02em}
.pk-note{margin-top:18px;font-size:11px;color:var(--faint);line-height:1.7}
.pk-count{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);
  font-family:'Fraunces',serif;font-style:italic;font-weight:200;
  font-size:clamp(1.15rem,2.2vw,1.6rem);color:var(--soft);letter-spacing:-.01em}
.pk-count b{font-style:normal;font-weight:300;color:var(--ink)}
@media(max-width:900px){
  .pk-grid{grid-template-columns:1fr;gap:34px}
  .pk-stage{aspect-ratio:3/2}
  .pk-lensdot{width:58px;height:58px}
}

/* mic diagram */
.micmap{margin-top:56px;border-top:1px solid var(--ink);padding-top:44px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.micmap svg{width:100%;height:auto}
.micmap .mm-txt p{color:var(--soft);font-size:1.02rem;line-height:1.7;max-width:42ch;margin-bottom:18px}
.micmap .mm-txt p b{color:var(--ink);font-weight:500}
@media(max-width:900px){.micmap{grid-template-columns:1fr}}

/* number strip */
.nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);margin-top:56px}
.nums div{padding:34px 24px 34px 0;border-bottom:1px solid var(--line)}
.nums .v{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.02em}
.nums .l{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:12px}
@media(max-width:760px){.nums{grid-template-columns:1fr 1fr}}

/* prose / article */
.prose{max-width:68ch}
.prose p{color:var(--soft);font-size:1.06rem;line-height:1.85;margin-bottom:22px}
.prose p b,.prose strong{color:var(--ink);font-weight:500}
.prose h3{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1.4rem,2.6vw,1.9rem);
  letter-spacing:-.02em;color:var(--ink);margin:52px 0 20px}
.prose ul{margin:0 0 24px 0;list-style:none}
.prose li{color:var(--soft);font-size:1.04rem;line-height:1.75;padding:9px 0 9px 24px;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:1.05em;width:9px;height:1px;background:var(--gold)}
.prose blockquote{margin:42px 0;padding-left:26px;border-left:1px solid var(--gold);
  font-family:'Fraunces',serif;font-style:italic;font-weight:200;
  font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:34px 0;font-size:14px}
.prose th,.prose td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.prose th{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:400}
.prose td.num,.prose th.num{text-align:right;font-variant-numeric:tabular-nums}
.prose a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(176,141,87,.4)}
.prose a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* article header */
.arthead{padding:172px 0 0;border-top:none}
.arthead .kicker{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.arthead h1{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(2.1rem,5.4vw,4rem);
  letter-spacing:-.03em;line-height:1.02;max-width:20ch}
.arthead .dek{margin-top:26px;font-family:'Fraunces',serif;font-style:italic;font-weight:200;
  font-size:clamp(1.15rem,2.2vw,1.6rem);color:var(--soft);line-height:1.4;max-width:40ch}
.arthead .meta{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* notes index */
.noteslist{border-top:1px solid var(--ink);margin-top:44px}
.noteslist a{display:grid;grid-template-columns:minmax(120px,.9fr) 2.4fr;gap:clamp(20px,4vw,52px);
  padding:32px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  align-items:baseline;transition:opacity .3s}
.noteslist a:hover{opacity:.62}
.noteslist .tag{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.noteslist h3{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1.3rem,2.6vw,1.9rem);
  letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.noteslist p{margin-top:12px;color:var(--soft);font-size:.98rem;line-height:1.65;max-width:52ch}
@media(max-width:700px){.noteslist a{grid-template-columns:1fr;gap:12px}}

/* Q&A page */
.qagroup{margin-top:76px}
.qagroup > .gk{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.qagroup > h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:8px}
.qagroup > .gsub{color:var(--soft);font-size:1rem;line-height:1.65;max-width:56ch;margin-bottom:30px}
.faq details p + p{padding-top:0;margin-top:-12px}
.faq details p{white-space:normal}
.toc{margin-top:44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;
  display:flex;flex-wrap:wrap;gap:10px 0}
.toc a{font-family:'Fraunces',serif;font-size:1.02rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.toc a:hover{color:var(--gold)}
.toc .sep{color:var(--faint);margin:0 14px;font-size:.8rem}

/* next / prev + cross links */
.crosslink{margin-top:64px;padding-top:34px;border-top:1px solid var(--ink);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.crosslink a{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:5px}
.crosslink a:hover{color:var(--gold);border-color:var(--gold)}

/* lens swatch gallery */
.lensgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,34px);margin-top:48px}
.lensgrid .lc{text-align:center}
.lensgrid .sw{width:100%;aspect-ratio:5/4;border-radius:44% 44% 40% 40%/48% 48% 36% 36%;
  border:1px solid var(--line);box-shadow:0 24px 50px -34px rgba(60,40,20,.55)}
.lensgrid .nm{margin-top:18px;font-family:'Fraunces',serif;font-size:1.05rem;color:var(--ink)}
.lensgrid .dsc{margin-top:6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
@media(max-width:700px){.lensgrid{grid-template-columns:1fr 1fr}}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ── mobile refinements for the glasses pages ── */
@media (max-width:760px){
  .lhero{padding-top:132px}
  .arthead{padding-top:124px}
  .lhero .lh-price{margin-top:28px}
  .nums div{padding:26px 18px 26px 0}
  .prose table{font-size:12.5px}
  .prose th,.prose td{padding:9px 8px}
  .qagroup{margin-top:52px}
  .toc{gap:8px 0}
  .toc .sep{margin:0 10px}
  .micmap{margin-top:36px;padding-top:32px}
  .pk-out .btn{display:block;text-align:center;padding:16px 24px}
}
@media (max-width:600px){
  .lensgrid{gap:14px}
  .crosslink{flex-direction:column;gap:14px}
  .crosslink a{align-self:flex-start}
}

/* keyboard focus, everywhere */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px}

/* ── order / preorder card ── */
.ordercard{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);
  align-items:center;padding:clamp(34px,4vw,56px) 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.ordercard figure{margin:0;background:transparent}
.ordercard figure img{width:100%;height:auto;mix-blend-mode:darken}
.ordercard .ok{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.ordercard h3{font-family:'Fraunces',serif;font-weight:200;font-size:clamp(1.9rem,3.6vw,2.8rem);
  letter-spacing:-.03em;line-height:1.02}
.ordercard .oform{font-family:'Fraunces',serif;font-style:italic;color:var(--soft);
  font-size:1.08rem;margin-top:12px}
.ordercard .oprice{margin-top:28px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.ordercard .oprice .usd{font-family:'Fraunces',serif;font-weight:300;font-size:2.8rem;letter-spacing:-.02em}
.ordercard .oprice .rmb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.ordercard .orows{margin-top:30px;border-top:1px solid var(--line)}
.ordercard .orows p{display:grid;grid-template-columns:minmax(96px,.5fr) 2fr;gap:20px;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-size:.95rem;color:var(--soft);line-height:1.55;align-items:baseline}
.ordercard .orows span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.ordercard .btn{margin-top:32px}
.ordercard .onote{margin-top:22px;font-size:11px;color:var(--faint);line-height:1.7;max-width:46ch}
@media(max-width:900px){
  .ordercard{grid-template-columns:1fr;gap:32px}
  .ordercard figure{order:-1}
  .ordercard .orows p{grid-template-columns:1fr;gap:5px}
  .ordercard .btn{display:block;text-align:center;padding:16px 24px}
}

/* ── bundle quantity + pair tabs ── */
.pk-save{margin-top:6px;font-size:11.5px;letter-spacing:.02em;color:var(--soft)}
.pk-save b{color:var(--ink);font-weight:500}
.pk-more{display:inline-block;margin-top:16px;font-size:10.5px;letter-spacing:.2em;
  color:var(--soft);text-decoration:none;border-bottom:1px solid var(--line)}
.pk-more:hover{color:var(--gold);border-color:var(--gold)}

/* ── price table inside the order card ──
   Two columns, label and amount. It was five while every row carried a dollar
   figure and a yuan approximation beside it; the price is in yuan now, so
   there is one number per row and no column to hide on a phone. */
.bundles{margin-top:28px;border-top:1px solid var(--ink)}
.bundles p{display:grid;grid-template-columns:1fr auto;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline;
  font-size:.98rem;color:var(--soft);font-variant-numeric:tabular-nums}
.bundles p .n{text-align:right}
.bundles p b{color:var(--ink);font-weight:500;font-size:1.06rem}
.bundles .bh{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);padding:10px 0;border-bottom:1px solid var(--line)}
.bnote{margin-top:16px;font-size:11.5px;color:var(--faint);line-height:1.7;max-width:52ch}
@media(max-width:600px){
  .bundles p{font-size:.92rem}
}

/* ── the invite code, under the price table ──
   Rendered hidden and revealed by ref.js, so a visitor without JavaScript is
   not offered a box that cannot resolve anything. */
.refrow{margin-top:22px}
.refrow label{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-bottom:10px}
.refin{display:flex;gap:12px;border-bottom:1px solid var(--ink);max-width:340px}
.refin input{flex:1;border:0;background:transparent;padding:9px 0;font-family:inherit;
  font-size:14px;letter-spacing:.06em;color:var(--ink);outline:none}
.refin input::placeholder{color:var(--faint);letter-spacing:.14em}
/* `outline:none` on a bare underline input leaves keyboard users with no
   indication of where they are. The site's focus idiom is a gold ring; the
   underline itself carries it, since the input has no box of its own. */
.refin:focus-within,.subrow:focus-within{border-bottom-color:var(--gold)}
.refin input:focus-visible,.subrow input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.refin button{border:0;background:transparent;cursor:pointer;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.refin button:hover{color:var(--gold)}
.refin button[aria-busy="true"]{color:var(--faint);cursor:default}
.refnote:not(:empty){margin-top:14px;font-size:11.5px;color:var(--soft);
  line-height:1.7;max-width:46ch}
.subnote:not(:empty){margin-top:14px;font-size:11.5px;color:var(--soft);line-height:1.7}

/* ── range grid inside the bundle section ── */
.rangeshot{margin:56px 0 0;background:transparent}
.rangeshot img{width:100%;height:auto;mix-blend-mode:darken}
.rangeshot figcaption{margin-top:22px;text-align:center;font-size:11px;letter-spacing:.2em;color:var(--faint)}

/* ── product head, Chinese numerals ── */
.product .form{max-width:44ch}
.purchase .price em{font-family:'Inter',sans-serif;font-style:normal;font-size:12px;
  letter-spacing:.2em;color:var(--faint);margin-left:8px}

/* ── editorial cards: Chinese headings need tighter leading ── */
.ed-text h3{line-height:1.18}
.ed-text .big{line-height:1.18}
.ed-text p{max-width:32ch}

/* ── 产品实拍卡片：整副眼镜要看得完整，所以更宽、不裁切 ── */
.ed.shot{grid-template-columns:1.55fr 1fr;gap:clamp(28px,4vw,56px)}
.ed.shot.flip{grid-template-columns:1fr 1.55fr}
.ed.shot figure{aspect-ratio:3/2;background:transparent;overflow:visible}
.ed.shot img{object-fit:contain;mix-blend-mode:darken}
.ed.shot:hover img{transform:none}
@media(max-width:900px){
  .ed.shot,.ed.shot.flip{grid-template-columns:1fr}
  .ed.shot figure{aspect-ratio:3/2}
}

/* ── 配度数三卡 ── */
.rxgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:52px;
  background:var(--line);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.rxcard{background:var(--paper);padding:clamp(28px,3vw,40px) clamp(22px,2.4vw,34px);
  display:flex;flex-direction:column}
.rxcard .rk{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.rxcard h3{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1.5rem,2.4vw,1.95rem);
  letter-spacing:-.02em;line-height:1.1}
.rxcard .rd{margin-top:12px;color:var(--soft);font-size:.98rem;line-height:1.6}
.rxeyes{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rxeyes .el{font-size:9.5px;letter-spacing:.22em;color:var(--faint);margin-bottom:10px}
.rxeyes .opts{display:flex;flex-wrap:wrap;gap:6px}
.rxeyes .opts button{border:1px solid var(--line);background:transparent;cursor:pointer;
  padding:7px 9px;font-family:'Inter',sans-serif;font-size:11.5px;color:var(--soft);
  transition:all .25s;font-variant-numeric:tabular-nums}
.rxeyes .opts button:hover{color:var(--ink);border-color:var(--soft)}
.rxeyes .opts button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rxeyes .opts button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rxsum{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-family:'Fraunces',serif;font-size:1.1rem;color:var(--ink);letter-spacing:-.01em}
.rxlist{margin-top:26px;border-top:1px solid var(--line)}
.rxlist p{padding:11px 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--soft);line-height:1.5}
.rxcard .rn{margin-top:auto;padding-top:24px;font-size:11px;color:var(--faint);line-height:1.7}
@media(max-width:980px){
  .rxgrid{grid-template-columns:1fr}
  .rxcard .rn{padding-top:20px}
}

/* The full-bleed product shot under the product card. `margin:0 auto` is in
   the export but cannot centre an inline element, and .wrap gives the figure
   1168px against the image's 1080px cap — so the export leaves 88px of it
   stacked on one side. display:block is what the declaration was already
   asking for. */
.heroshot{margin:64px 0 0;background:transparent}
.heroshot img{display:block;width:100%;max-width:1080px;margin:0 auto;height:auto}
@media(max-width:760px){.heroshot{margin-top:44px}}

/* The camera line writes .zonebanner in a second shape — a photograph beside
   prose, inside a .wrap — where V1 only ever used the full-bleed form. Both
   carry the same class, so without this the split one inherits the banner
   treatment: the figure's image is absolutely positioned over the whole
   section, a dark scrim sits above it, and the heading is white. The export
   ships the markup without the rules, and its own single-file build has the
   same gap.

   Selected on the wrapper rather than a new class because these pages are
   regenerated upstream, and a class we added by hand would not survive that. */
.zonebanner:has(> .wrap){aspect-ratio:auto;display:block;text-align:left;overflow:visible;padding:0}
.zonebanner:has(> .wrap)::after{display:none}
.zonebanner:has(> .wrap) > .wrap{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,84px);align-items:center;
  padding-top:clamp(80px,9vw,130px);padding-bottom:clamp(80px,9vw,130px)}
.zonebanner:has(> .wrap) figure{margin:0}
.zonebanner:has(> .wrap) img{position:static;display:block;width:100%;height:auto;object-fit:contain}
.zonebanner:has(> .wrap) h2{font-family:'Fraunces',serif;font-weight:200;
  font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:22px}
/* :not(.eyebrow) because the eyebrow is a <p> too, and this rule outranks
   .eyebrow's own — which printed the section label at body size in --soft,
   61% larger than every other eyebrow on the page. */
.zonebanner:has(> .wrap) p:not(.eyebrow){color:var(--soft);font-size:1.06rem;line-height:1.75}
.zonebanner:has(> .wrap) p:not(.eyebrow) + p:not(.eyebrow){margin-top:16px}
@media(max-width:860px){
  .zonebanner:has(> .wrap) > .wrap{grid-template-columns:1fr;gap:34px;
    padding-top:76px;padding-bottom:76px}
}