/* ============================================================
   AURALIS Design System — "Lucent Taxonomy"
   Shared stylesheet for all Auralis web properties
   Fonts: Italiana (display) / Jura (technical) / Crimson Pro (serif accent) / Inter (body)
   ============================================================ */

:root{
  --ivory:#FBF6EF; --ivory-2:#F5EDE3; --white:#FFFFFF;
  --cocoa:#332028; --muted:#6E5F63; --muted-2:#8A7378;
  --rose:#EDBAC7; --rose-deep:#96435F;
  --lilac:#D3C4E8; --lilac-deep:#5C4880;
  --champagne:#E3CB9C; --gold-deep:#7A5D22;
  --line:rgba(51,32,40,.12); --line-2:rgba(51,32,40,.06);
  --aura:linear-gradient(90deg,#EDBAC7 0%,#D3C4E8 42%,#F5EDE3 68%,#E3CB9C 100%);
  --aura-soft:linear-gradient(90deg,rgba(237,186,199,.9),rgba(211,196,232,.9),rgba(227,203,156,.9));
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--cocoa);font-family:"Inter",system-ui,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(237,186,199,.45);color:var(--cocoa)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%}
section{padding:120px 0;position:relative}

/* ---------- type primitives ---------- */
.eyebrow{font-family:"Jura",sans-serif;font-weight:500;font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:22px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--aura-soft)}
.eyebrow.gold{color:var(--gold-deep)}
.eyebrow.lilac{color:var(--lilac-deep)}
h1,h2,h3{font-family:"Italiana",serif;font-weight:400;letter-spacing:-.005em}
h2{font-size:clamp(30px,4.6vw,46px);line-height:1.16;margin-bottom:16px}
h2 b{font-weight:400;color:var(--rose-deep)}
.lead{color:var(--muted);font-size:clamp(15px,2.2vw,17.5px);max-width:640px;font-weight:400;margin-bottom:48px;font-family:"Inter"}
.mono-label{font-family:"Jura";font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Jura",sans-serif;font-weight:500;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;padding:15px 28px;border-radius:999px;cursor:pointer;transition:transform .25s ease,opacity .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--aura);color:var(--cocoa);font-weight:600;border:none;box-shadow:0 10px 24px rgba(150,67,95,.18)}
.btn.ghost{border:1px solid var(--line);color:var(--cocoa)}
.btn.small{padding:10px 20px;font-size:11.5px}

/* ---------- header / nav ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(251,246,239,0);border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease}
header.site.solid{background:rgba(251,246,239,.92);backdrop-filter:blur(10px);border-color:var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;gap:20px}
.brandmark{display:flex;align-items:center;gap:12px;font-family:"Jura";font-weight:600;letter-spacing:.04em;font-size:17px;color:var(--cocoa);flex:none}
.brandmark svg{flex:none}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks>a,.navdrop>.navdrop-btn{font-family:"Jura";font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:none;border:none;cursor:pointer;padding:8px 0;display:flex;align-items:center;gap:6px}
.navlinks>a:hover,.navdrop:hover>.navdrop-btn{color:var(--cocoa)}
.navdrop{position:relative}
.navdrop-btn .caret{font-size:9px;transition:transform .25s}
.navdrop:hover .caret{transform:rotate(180deg)}
.navdrop-menu{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);min-width:230px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(51,32,40,.12);padding:10px;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:120}
.navdrop:hover .navdrop-menu,.navdrop:focus-within .navdrop-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.navdrop-menu a{display:flex;flex-direction:column;gap:1px;padding:9px 14px;border-radius:9px;font-family:"Jura";font-size:13px;color:var(--cocoa)}
.navdrop-menu a small{font-family:"Inter";font-size:11px;color:var(--muted-2);letter-spacing:0;text-transform:none}
.navdrop-menu a:hover{background:var(--ivory-2)}
.navdrop-menu .menu-divider{height:1px;background:var(--line);margin:6px 10px}
.nav-cta{display:flex;align-items:center;gap:16px;flex:none}
.nav-cta .btn{padding:11px 22px;font-size:11.5px}

/* language switcher */
.langswitch{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--white)}
.langswitch button{font-family:"Jura";font-size:11px;letter-spacing:.06em;padding:7px 11px;border:none;background:none;color:var(--muted-2);cursor:pointer;transition:background .2s,color .2s}
.langswitch button.active{background:var(--cocoa);color:var(--ivory)}
.langswitch button:not(.active):hover{color:var(--cocoa)}

/* mobile nav */
.navburger{display:none;background:none;border:1px solid var(--line);border-radius:9px;width:40px;height:40px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.navburger span{width:16px;height:1.5px;background:var(--cocoa)}
@media(max-width:1020px){
  .navlinks{display:none}
  .navburger{display:flex}
  .navlinks.mobile-open{display:flex;position:fixed;inset:64px 0 auto 0;flex-direction:column;background:var(--ivory);border-bottom:1px solid var(--line);padding:18px 28px 26px;gap:6px;z-index:99;box-shadow:0 24px 40px rgba(51,32,40,.10)}
  .navlinks.mobile-open>a,.navlinks.mobile-open .navdrop>.navdrop-btn{font-size:14px;padding:10px 0}
  .navdrop-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;background:transparent;padding:0 0 0 16px;display:none}
  .navdrop.open .navdrop-menu{display:block}
  .navdrop.open .caret{transform:rotate(180deg)}
}

/* ---------- hero (home) ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:140px;isolation:isolate}
.hero-glow{position:absolute;z-index:-1;top:28%;left:50%;transform:translate(-50%,-50%);width:min(1000px,130vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(237,186,199,.38),rgba(211,196,232,.22) 38%,rgba(227,203,156,.12) 60%,transparent 72%);filter:blur(20px);opacity:0;animation:glow 2.2s ease .2s forwards}
@keyframes glow{to{opacity:1}}
.kicker{font-family:"Jura";font-weight:500;letter-spacing:.4em;text-transform:uppercase;font-size:11px;color:var(--muted);margin-bottom:30px;display:flex;align-items:center;gap:14px}
.wordmark-hero{font-family:"Italiana",serif;font-weight:400;font-size:clamp(48px,13vw,140px);line-height:1;letter-spacing:.01em;color:var(--cocoa)}
.wordmark-hero span{background:linear-gradient(90deg,#96435F,#5C4880,#7A5D22);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-tagline{font-family:"Jura";font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(14px,2.4vw,20px);margin:26px 0 20px;display:flex;align-items:center;gap:20px;color:var(--cocoa)}
.hero-tagline .bar{width:56px;height:2px;background:var(--aura)}
.hero-sub{font-size:clamp(15px,2.4vw,18px);color:var(--muted);max-width:600px;font-weight:400;margin-bottom:44px;font-family:"Inter"}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:70px}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);padding-top:28px;gap:20px}
.stat-strip .st b{font-family:"Jura";font-weight:600;font-size:15px;display:block;color:var(--cocoa)}
.stat-strip .st span{font-size:12px;color:var(--muted-2)}
@media(max-width:760px){.stat-strip{grid-template-columns:repeat(2,1fr)}}

/* ---------- subpage hero (taxonomy plate style) ---------- */
.pagehero{padding:170px 0 90px;border-bottom:1px solid var(--line);position:relative;isolation:isolate;overflow:hidden}
.pagehero .hero-glow{top:0}
.breadcrumb{font-family:"Jura";font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:34px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--cocoa)}
.breadcrumb .sep{opacity:.5}
.pagehero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.fig-no{font-family:"Jura";font-size:12px;letter-spacing:.34em;color:var(--muted-2);text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:26px}
.fig-no::after{content:"";flex:0 0 44px;height:1px;background:var(--aura-soft)}
.pagehero h1{font-size:clamp(38px,6.4vw,64px);line-height:1.08;margin-bottom:14px}
.pagehero h1 .latin{display:block;font-family:"Crimson Pro";font-style:italic;font-size:clamp(16px,2.4vw,21px);color:var(--muted-2);letter-spacing:.02em;margin-top:12px}
.pagehero .hero-sub{margin-bottom:36px}
@media(max-width:900px){.pagehero-grid{grid-template-columns:1fr;gap:44px}}

/* specimen plate frame (visual container) */
.plate{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:44px 38px;position:relative;box-shadow:0 24px 60px rgba(51,32,40,.08)}
.plate::before,.plate::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none}
.plate::before{top:8px;left:8px;border-top:1px solid var(--muted-2);border-left:1px solid var(--muted-2)}
.plate::after{bottom:8px;right:8px;border-bottom:1px solid var(--muted-2);border-right:1px solid var(--muted-2)}
.plate .plate-cap{text-align:center;font-family:"Jura";font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2);margin-top:22px}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pillar{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:34px 28px;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(51,32,40,.05)}
.pillar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--aura)}
.pillar .idx{font-family:"Jura";font-weight:300;font-size:13px;color:var(--muted-2);letter-spacing:.2em}
.pillar h3{font-weight:400;font-size:24px;margin:20px 0 10px;display:flex;align-items:baseline;gap:10px;font-family:"Italiana"}
.pillar h3 em{font-style:normal;font-family:"Jura";font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep)}
.pillar p{font-size:14.5px;color:var(--muted);font-weight:400;font-family:"Inter"}
@media(max-width:860px){.pillars{grid-template-columns:1fr}}

/* ---------- featured product ---------- */
.feature-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}
.feature-copy .tier{font-family:"Jura";font-weight:600;font-size:13px;letter-spacing:.12em;color:var(--rose-deep);text-transform:uppercase;margin-bottom:10px}
.feature-copy h2{margin-bottom:18px}
.feature-specs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:30px 0 36px}
.feature-specs .fs{border-left:2px solid var(--rose);padding-left:14px}
.feature-specs .fs b{font-family:"Jura";font-size:17px;color:var(--cocoa);display:block}
.feature-specs .fs span{font-size:12px;color:var(--muted-2)}
.feature-visual{display:flex;align-items:center;justify-content:center;background:var(--white);border-radius:26px;border:1px solid var(--line);padding:40px;box-shadow:0 24px 60px rgba(51,32,40,.09)}
.feature-visual img{max-height:520px;width:auto;filter:drop-shadow(0 18px 24px rgba(51,32,40,.12))}
@media(max-width:900px){.feature-grid{grid-template-columns:1fr}.feature-specs{grid-template-columns:1fr 1fr}}

/* ---------- products tabs / rows ---------- */
.tabbar{display:flex;gap:10px;margin-bottom:40px;flex-wrap:wrap}
.tabbtn{font-family:"Jura";font-weight:500;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding:12px 24px;border-radius:999px;border:1px solid var(--line);color:var(--muted);cursor:pointer;background:var(--white)}
.tabbtn.active{background:var(--aura);color:var(--cocoa);border:none;font-weight:600}
.rows{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.row{display:grid;grid-template-columns:1.15fr 1fr 1.35fr;gap:18px;background:var(--white);padding:22px 26px;align-items:center;transition:background .2s}
a.row:hover{background:var(--ivory-2)}
.row .name{font-family:"Jura";font-weight:600;font-size:16.5px;color:var(--cocoa)}
.row .name b{color:var(--rose-deep);font-weight:600}
.row.eq .name b{color:var(--gold-deep)}
.row .desc{color:var(--muted);font-size:13.5px}
.row .tiers{display:flex;flex-wrap:wrap;gap:7px}
.row .go{font-family:"Jura";font-size:12px;color:var(--rose-deep);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.tag{font-family:"Jura";font-size:11.5px;letter-spacing:.03em;padding:5px 12px;border-radius:6px;border:1px solid var(--line);color:var(--cocoa);white-space:nowrap;background:var(--ivory)}
.tag.hl{border-color:var(--rose-deep);color:var(--rose-deep)}
.tag.gold{border-color:var(--gold-deep);color:var(--gold-deep)}
.tabpanel{display:none}
.tabpanel.active{display:block}
@media(max-width:760px){.row{grid-template-columns:1fr;gap:8px}}

/* ---------- flow ---------- */
.flowline{display:flex;align-items:center;gap:0;margin-top:60px;flex-wrap:wrap}
.fstep{flex:1;min-width:130px;text-align:center;padding:0 8px}
.fstep .fcircle{width:64px;height:64px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-family:"Jura";font-weight:500;font-size:12px;letter-spacing:.05em;background:var(--white);color:var(--cocoa)}
.fstep b{font-family:"Jura";font-weight:600;font-size:14.5px;display:block;margin-bottom:4px;color:var(--cocoa)}
.fstep span{font-size:12px;color:var(--muted-2)}
.farrow{color:var(--muted-2);font-size:20px}
@media(max-width:760px){.flowline{flex-direction:column;gap:24px}.farrow{transform:rotate(90deg)}}

/* ---------- why ---------- */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.why-list li{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.why-list li:first-child{border-top:1px solid var(--line)}
.why-list .wn{font-family:"Italiana";font-size:26px;color:var(--rose-deep);flex:none;width:36px}
.why-list h4{font-family:"Jura";font-weight:600;font-size:15.5px;margin-bottom:4px;color:var(--cocoa)}
.why-list p{font-size:13.5px;color:var(--muted);font-weight:400}
.why-visual{border:1px solid var(--line);border-radius:20px;padding:50px;background:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(51,32,40,.05)}
@media(max-width:900px){.why-grid{grid-template-columns:1fr}}

/* ---------- about/story ---------- */
.story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.decomp{font-family:"Italiana";font-weight:400;font-size:clamp(30px,5.6vw,50px);line-height:1;margin-bottom:22px}
.decomp .p1{color:var(--rose-deep)} .decomp .p2{color:var(--gold-deep)}
.story-grid p.body{color:var(--muted);font-size:15px;font-weight:400;max-width:520px;font-family:"Crimson Pro";font-style:italic;line-height:1.75}
.fact-list{display:flex;flex-direction:column;gap:2px}
.fact{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.fact:first-child{border-top:1px solid var(--line)}
.fact .k{font-family:"Jura";font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);min-width:90px;padding-top:2px}
.fact .v{font-size:14px;color:var(--cocoa)}
@media(max-width:900px){.story-grid{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.contact-info h3{font-weight:400;font-size:26px;margin-bottom:14px}
.contact-info p{color:var(--muted);font-size:14.5px;font-weight:400;margin-bottom:26px;max-width:420px;font-family:"Inter"}
.contact-info .ci{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:13.5px}
.contact-info .ci:last-child{border-bottom:1px solid var(--line)}
.contact-info .ci .k{color:var(--muted-2);min-width:80px;font-family:"Jura";font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
form{display:flex;flex-direction:column;gap:16px}
form input,form select,form textarea{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:14px 16px;color:var(--cocoa);font-family:"Inter";font-size:14px;width:100%}
form textarea{min-height:110px;resize:vertical}
form label{font-family:"Jura";font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;display:block}
form .btn{align-self:flex-start;margin-top:6px;border:none}
.form-note{font-size:12px;line-height:1.6;color:var(--muted-2);margin:0}
.form-note a{color:var(--cocoa)}
.contact-info .ci a{color:var(--cocoa)}
.contact-info .ci .ci-sub{font-size:12px;color:var(--muted-2)}
@media(max-width:900px){.contact-wrap{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{padding:60px 0;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
footer .fbrand{display:flex;align-items:center;gap:10px;font-family:"Jura";font-weight:600;font-size:15px;color:var(--cocoa)}
footer .flinks{display:flex;gap:26px;flex-wrap:wrap}
footer .flinks a{font-size:12.5px;color:var(--muted);font-family:"Jura";letter-spacing:.05em;text-transform:uppercase}
footer .flinks a:hover{color:var(--cocoa)}
footer .fnote{font-size:12px;color:var(--muted-2);width:100%;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-family:"Inter"}

/* CJK fallbacks — activated when html[lang="zh-CN"] */
html[lang="zh-CN"] body{font-family:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif}
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2,html[lang="zh-CN"] h3,html[lang="zh-CN"] .wordmark-hero,html[lang="zh-CN"] .decomp{font-family:"Italiana","Songti SC","STSong",serif}
html[lang="zh-CN"] .eyebrow,html[lang="zh-CN"] .kicker,html[lang="zh-CN"] .hero-tagline,html[lang="zh-CN"] .btn,html[lang="zh-CN"] .tag,html[lang="zh-CN"] .tabbtn,html[lang="zh-CN"] .fig-no,html[lang="zh-CN"] .breadcrumb{font-family:"Jura","PingFang SC",sans-serif;letter-spacing:.18em}
html[lang="zh-CN"] .brandmark,html[lang="zh-CN"] .navlinks>a,html[lang="zh-CN"] .navdrop>.navdrop-btn,html[lang="zh-CN"] .navdrop-menu a,html[lang="zh-CN"] .row .name,html[lang="zh-CN"] .fstep b,html[lang="zh-CN"] .why-list h4{font-family:"Jura","PingFang SC",sans-serif}

/* ============================================================
   PRODUCT PAGE COMPONENTS
   ============================================================ */

/* tier cards (Lumen / Multi / Forte ...) */
.tiercards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tiercard{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:32px 26px;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(51,32,40,.05);display:flex;flex-direction:column}
.tiercard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--aura)}
.tiercard .t-no{font-family:"Jura";font-size:11px;letter-spacing:.3em;color:var(--muted-2);text-transform:uppercase}
.tiercard h3{font-family:"Italiana";font-size:30px;margin:14px 0 2px}
.tiercard .t-sub{font-family:"Jura";font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:18px}
.tiercard p{font-size:14px;color:var(--muted);margin-bottom:20px}
.tiercard .t-specs{margin-top:auto;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.tiercard .t-specs .sp{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
.tiercard .t-specs .sp .k{color:var(--muted-2);font-family:"Jura";font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.tiercard .t-specs .sp .v{font-family:"Jura";font-weight:600;color:var(--cocoa);text-align:right}
.tiercard.featured{outline:1px solid var(--rose);outline-offset:-1px}
.tiercard .t-badge{position:absolute;top:14px;right:14px;font-family:"Jura";font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);border:1px solid var(--rose);border-radius:999px;padding:4px 10px}
@media(max-width:900px){.tiercards{grid-template-columns:1fr}}

/* spec table */
.spectable{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:14px}
.spectable th,.spectable td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.spectable thead th{font-family:"Jura";font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);background:var(--ivory-2);font-weight:500}
.spectable tbody tr:last-child td{border-bottom:none}
.spectable td.k{font-family:"Jura";font-size:12px;letter-spacing:.06em;color:var(--muted);width:34%}
.spectable td.v{font-family:"Jura";font-weight:600;color:var(--cocoa)}
.spectable-wrap{overflow-x:auto;border-radius:16px}

/* shade scale */
.shadescale{display:flex;gap:6px;flex-wrap:wrap}
.shadescale .sw{flex:1;min-width:44px;height:52px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;font-family:"Jura";font-size:10.5px;color:var(--cocoa);letter-spacing:.02em}

/* gradient translucency bar */
.gradbar{height:38px;border-radius:999px;border:1px solid var(--line);position:relative;margin:34px 0 10px}
.gradbar .gfill{position:absolute;inset:0;border-radius:999px}
.gradbar .gmark{position:absolute;top:-26px;transform:translateX(-50%);font-family:"Jura";font-size:11px;color:var(--muted-2);white-space:nowrap}
.gradbar .gmark::after{content:"";display:block;width:1px;height:12px;background:var(--muted-2);margin:2px auto 0}
.gradbar-cap{display:flex;justify-content:space-between;font-family:"Jura";font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}

/* disc illustration container */
.discviz{display:flex;align-items:center;justify-content:center;padding:20px 0 6px}

/* indication chips */
.indichips{display:flex;flex-wrap:wrap;gap:9px}
.indichips .tag{font-size:12px;padding:7px 15px}

/* two-col generic */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}

/* section tint variants */
section.tint{background:var(--ivory-2)}

/* related products */
.relgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.relcard{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;gap:6px;transition:transform .2s,box-shadow .2s}
.relcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(51,32,40,.09)}
.relcard .r-icon{height:34px;margin-bottom:8px;color:var(--cocoa)}
.relcard b{font-family:"Jura";font-size:14.5px}
.relcard span{font-size:12px;color:var(--muted-2)}
@media(max-width:900px){.relgrid{grid-template-columns:repeat(2,1fr)}}

/* specimen gallery (placeholder-friendly) */
.specgallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.specfig{background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 10px 30px rgba(51,32,40,.05)}
.specfig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.specfig figcaption{padding:14px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.specfig figcaption .fc-t{font-family:"Jura";font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cocoa)}
.specfig figcaption .fc-n{font-family:"Jura";font-size:10.5px;letter-spacing:.16em;color:var(--muted-2);text-transform:uppercase;white-space:nowrap}
@media(max-width:860px){.specgallery{grid-template-columns:1fr}}

/* CTA band */
.ctaband{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:56px 48px;display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;box-shadow:0 18px 44px rgba(51,32,40,.07);position:relative;overflow:hidden}
.ctaband::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--aura)}
.ctaband h3{font-size:clamp(24px,3.4vw,32px);margin-bottom:8px}
.ctaband p{color:var(--muted);font-size:14.5px;max-width:520px}