:root{
  --paper:#F4F1EA;      /* warm ivory */
  --ink:#171512;
  --soft:#6A6459;
  --faint:#A79F90;
  --gold:#B08D57;       /* muted antique gold */
  --line:#DED8CB;
  --wash:#E9E4D9;
  --noir:#0C0B09;
}
*{margin:0;padding:0;box-sizing:border-box}
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:#F4F1EA}
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}
}

/* the name — brand story */
.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}
}
@media(max-width:460px){ nav .navlinks a.opt{display:none} }
/* 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}
}

/* 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}
.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-qty{display:flex;gap:10px;flex-wrap:wrap}
.pk-qty .qb{width:46px;height:46px;border:1px solid var(--line);background:transparent;cursor:pointer;
  font-family:'Fraunces',serif;font-size:1.15rem;color:var(--soft);transition:all .3s}
.pk-qty .qb:hover{color:var(--ink);border-color:var(--soft)}
.pk-qty .qb[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pk-tabs{display:flex;gap:0;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:26px}
.pk-tabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:11px 16px 11px 0;margin-right:14px;cursor:pointer;font-family:inherit;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);transition:color .3s}
.pk-tabs button:hover{color:var(--ink)}
.pk-tabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.pk-tabs button[hidden]{display:none}
.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-total .val small{display:block;font-family:'Inter',sans-serif;font-size:11px;
  letter-spacing:.14em;color:var(--faint);margin-top:6px;text-align:right}
.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)}

/* ── bundle table inside the order card ── */
.bundles{margin-top:28px;border-top:1px solid var(--ink)}
.bundles p{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:8px;
  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{grid-template-columns:1fr 1fr 1fr;font-size:.92rem}
  .bundles p span:nth-child(4),.bundles p span:nth-child(5){display:none}
}

/* ── 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}
}