/* WasabiRub 2027 — secondary site option. Shared design system.
   Serif = Times New Roman (deck). Sans = Cooper Hewitt (deck, embedded). */
@font-face{font-family:'Cooper Hewitt';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ch-400.woff2') format('woff2')}
@font-face{font-family:'Cooper Hewitt';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ch-500.woff2') format('woff2')}
@font-face{font-family:'Cooper Hewitt';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ch-700.woff2') format('woff2')}
@font-face{font-family:'Cooper Hewitt';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/ch-700-italic.woff2') format('woff2')}

:root{
  --green:#04342a;--green-2:#063a2e;--green-900:#042019;
  --lime:#dafc92;--lime-2:#c8f06f;
  --paper:#f6f7f1;--white:#fcfcfc;--sky:#d7f5ff;--amber:#ffb83f;
  --ink:#0f241d;--muted:#4f6a60;--line:#e2e6dc;
  --onlime:#0a2a1e;--ongreen:#e8f3ea;
  --serif:"Times New Roman",Times,Georgia,serif;
  --sans:"Cooper Hewitt","Helvetica Neue",Arial,sans-serif;
  --display:var(--sans);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--green);color:var(--ongreen);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.02em;line-height:1.02}
.serif{font-family:var(--display)}
.wrap{width:min(var(--maxw),calc(100% - 40px));margin:0 auto}
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wm{font-family:var(--sans);font-weight:700;font-style:italic;letter-spacing:-.03em;color:var(--lime);line-height:1}
.wm sup{font-size:.42em;font-style:normal;font-weight:700;vertical-align:super;margin-left:.08em}

/* ticker */
.ticker{background:var(--lime);color:var(--onlime);overflow:hidden;white-space:nowrap;border-bottom:2px solid var(--green-900)}
.ticker .run{display:inline-block;padding:9px 0;animation:marq 26s linear infinite;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.ticker .run span{padding:0 22px}.ticker .run b{color:var(--green)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker .run{animation:none}}

/* nav */
nav.bar{position:sticky;top:0;z-index:100;background:rgba(4,52,42,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(218,252,146,.14)}
.bar-in{display:flex;align-items:center;gap:26px;height:68px}
.bar .wm{font-size:24px}
.bar .links{display:flex;gap:24px;margin-left:30px;font-size:12.5px;font-weight:700;letter-spacing:.04em}
.bar .links a{opacity:.82}.bar .links a:hover,.bar .links a.on{opacity:1;color:var(--lime)}
.bar .spacer{margin-left:auto}
.pill-btn{display:inline-flex;align-items:center;gap:9px;background:var(--lime);color:var(--onlime);font-weight:700;font-size:12.5px;letter-spacing:.03em;padding:11px 20px;border-radius:999px;transition:transform .16s,background .16s}
.pill-btn:hover{background:var(--white);transform:translateY(-1px)}
@media(max-width:840px){.bar .links{display:none}}

/* buttons / badges */
.btn-lime{background:var(--lime);color:var(--onlime);font-weight:700;font-size:13px;letter-spacing:.02em;padding:16px 26px;border-radius:999px;display:inline-flex;align-items:center;gap:9px;transition:transform .16s,background .16s}
.btn-lime:hover{background:var(--white);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid rgba(218,252,146,.4);color:var(--ongreen);font-weight:700;font-size:13px;padding:16px 24px;border-radius:999px;display:inline-flex;align-items:center;gap:9px;transition:.16s}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.badges{display:flex;flex-wrap:wrap;gap:9px}
.badge{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(218,252,146,.3);color:#dcebdf;font-size:11px;font-weight:700;letter-spacing:.04em;padding:7px 13px;border-radius:999px}
.badge b{color:var(--lime)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin:0 0 22px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--lime)}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.sec-pad{padding:clamp(66px,9vw,118px) 0}

/* HERO (home) */
.hero{position:relative;padding:72px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.hero h1{font-family:var(--display);font-size:clamp(46px,7.4vw,104px);font-weight:500;letter-spacing:-.035em;line-height:.94}
.hero h1 em{font-style:italic;color:var(--lime)}
.hero-sub{margin:26px 0 0;max-width:42ch;font-size:clamp(16px,1.7vw,19px);line-height:1.6;color:#cfe3d6}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 26px}
/* jar visual — soft plinth, no harsh halo */
.jar-vis{position:relative;display:grid;place-items:center;min-height:440px}
.jar-disc{position:absolute;width:min(380px,86%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 46%,rgba(218,252,146,.28),rgba(218,252,146,0) 62%)}
.jar-shadow{position:absolute;bottom:14%;width:46%;height:26px;border-radius:50%;background:rgba(0,0,0,.33);filter:blur(16px)}
.jar-vis img{position:relative;z-index:2;width:min(330px,72%);filter:drop-shadow(0 22px 26px rgba(0,0,0,.34))}
.geo{position:absolute;z-index:3;font-weight:700;font-size:10.5px;letter-spacing:.1em;color:var(--onlime);background:var(--lime);padding:6px 11px;border-radius:7px}
.geo.g1{top:12px;left:4px;transform:rotate(-4deg)}
.geo.g2{bottom:20px;right:0;transform:rotate(3deg);background:var(--amber)}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:26px}.jar-vis{min-height:340px;order:-1}}

/* photo band */
.band{position:relative;min-height:clamp(360px,60vh,600px);display:grid;place-items:center;overflow:hidden}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(4,52,42,.25),rgba(4,52,42,.74))}
.band-in{position:relative;z-index:2;text-align:center;padding:40px 20px}
.band-tag{display:inline-block;background:var(--lime);color:var(--onlime);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:999px;margin:0 0 18px}
.band h2{font-family:var(--display);font-weight:500;color:#fff;font-size:clamp(34px,6vw,76px);letter-spacing:-.03em;line-height:1}
.band h2 em{font-style:italic;color:var(--lime)}

/* idea */
.idea{background:var(--paper);color:var(--ink)}
.idea .kicker{color:#1f7a4e}
.idea-top{display:grid;grid-template-columns:1.12fr .88fr;gap:46px;align-items:center;margin:0 0 8px}
.idea h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,4.6vw,56px);letter-spacing:-.03em;line-height:1.02;margin:14px 0 0}
.idea h2 em{font-style:italic;color:#1f7a4e}
.idea-photo{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 50px -28px rgba(4,32,25,.5)}
.idea-photo img{width:100%;height:100%;object-fit:cover}
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:48px 0 0}
.rung{position:relative;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px 22px 26px}
.rung .n{font-weight:700;font-size:12px;letter-spacing:.08em;color:#1f7a4e}
.rung h3{font-family:var(--display);font-weight:500;font-size:23px;margin:12px 0 8px;letter-spacing:-.02em;color:var(--ink)}
.rung p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.rung::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:#9fb8a9;font-weight:700}
.rung:last-child::after{display:none}
.idea-foot{margin:44px 0 0;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.02em;color:var(--ink)}
.idea-foot b{color:#1f7a4e;font-style:normal}
@media(max-width:860px){.idea-top{grid-template-columns:1fr;gap:26px}.idea-photo{max-width:360px}}
@media(max-width:820px){.ladder{grid-template-columns:1fr 1fr}.rung:nth-child(2)::after{display:none}}
@media(max-width:520px){.ladder{grid-template-columns:1fr}.rung::after{display:none}}

/* range / product cards */
.range .kicker{color:var(--lime)}
.range h2,.shop-head h2{font-family:var(--display);font-weight:500;font-size:clamp(32px,5vw,62px);letter-spacing:-.03em;margin:14px 0 6px}
.range h2 em{font-style:italic;color:var(--lime)}
.range .lede,.shop-head p{max-width:48ch;color:#cfe3d6;font-size:16px;line-height:1.6;margin:0 0 42px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--paper);color:var(--ink);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.card .shot{position:relative;aspect-ratio:1/.92;display:grid;place-items:center;padding:26px}
.card.og .shot{background:linear-gradient(160deg,#eef3e6,#e4efcf)}
.card.hot .shot{background:linear-gradient(160deg,#fff0dd,#ffe0b4)}
.card.cold .shot{background:linear-gradient(160deg,#e6f6fd,#d2eefc)}
.card .shot img{width:66%;filter:drop-shadow(0 18px 20px rgba(10,30,20,.2))}
.card .tag{position:absolute;top:14px;left:14px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--green);color:var(--lime);padding:5px 10px;border-radius:999px}
.card .body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-family:var(--display);font-weight:500;font-size:24px;letter-spacing:-.02em}
.card .move{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1f7a4e}
.card p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:14px}
.card .price{font-family:var(--display);font-size:22px}
.card .shop-link{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--green);display:inline-flex;gap:6px;align-items:center}
.card .shop-link:hover{color:#1f7a4e}
@media(max-width:820px){.cards{grid-template-columns:1fr}.card{flex-direction:row}.card .shot{aspect-ratio:1;width:42%;flex:none}.card .shot img{width:84%}}

/* voice band */
.voice{background:var(--lime);color:var(--onlime)}
.voice .wrap{text-align:center}
.voice .kicker{color:#2e5d3f}
.voice h2{font-family:var(--sans);font-weight:700;text-transform:uppercase;font-size:clamp(30px,5.3vw,66px);letter-spacing:-.01em;line-height:1;margin:16px auto 0;max-width:19ch}
.voice .sub{margin:26px auto 0;max-width:44ch;font-size:16px;line-height:1.6;font-weight:500;color:#1a3a2a}
.voice .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:34px 0 0}
.voice .chip{background:var(--green);color:var(--lime);font-size:12px;font-weight:700;letter-spacing:.03em;padding:9px 16px;border-radius:999px}

/* credibility */
.cred{background:var(--green-900)}
.cred-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.cred .kicker{color:var(--amber)}
.cred h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,4vw,50px);letter-spacing:-.03em;line-height:1.02;margin:14px 0 0}
.cred p{margin:20px 0 0;color:#bcd3c3;font-size:15.5px;line-height:1.7;max-width:48ch}
.cred-list{display:flex;flex-direction:column;gap:12px}
.cred-item{display:flex;gap:15px;align-items:flex-start;background:rgba(218,252,146,.05);border:1px solid rgba(218,252,146,.14);border-radius:14px;padding:18px 20px}
.cred-item .ic{flex:none;width:42px;height:42px;border-radius:11px;background:var(--lime);color:var(--onlime);display:grid;place-items:center;font-weight:700;font-size:19px}
.cred-item b{display:block;font-size:15px;font-weight:700;color:var(--white)}
.cred-item span{display:block;margin-top:3px;font-size:13px;color:#a9c4b4;line-height:1.5}
@media(max-width:820px){.cred-grid{grid-template-columns:1fr;gap:30px}}

/* belonging */
.belong{background:var(--sky);color:#0c3140;text-align:center;overflow:hidden}
.belong .kicker{color:#1f7a4e}
.belong h2{font-family:var(--display);font-weight:500;font-size:clamp(38px,7vw,92px);letter-spacing:-.035em;line-height:.95;margin:16px auto 0;max-width:14ch}
.belong .sub{margin:22px auto 0;max-width:40ch;font-size:16.5px;line-height:1.6;color:#2a5262}
.belong-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:32px 0 36px}
.btile{aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#cfe3d6}
.btile img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.btile:hover img{transform:scale(1.05)}
.movewords{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0 auto 36px;max-width:820px}
.movewords span{font-size:12.5px;font-weight:700;letter-spacing:.03em;padding:8px 15px;border-radius:999px;background:#fff;color:#0c3140;border:1px solid #bfe4f0}
.movewords span.hot{background:var(--amber);border-color:var(--amber)}
.movewords span.lime{background:var(--lime);border-color:var(--lime)}
.join{display:flex;gap:10px;max-width:440px;margin:0 auto;background:#fff;border:1px solid #bfe4f0;border-radius:999px;padding:7px 7px 7px 20px}
.join input{flex:1;border:0;background:none;font:inherit;font-size:15px;color:#0c3140;outline:none}
.join button{border:0;cursor:pointer;background:var(--green);color:var(--lime);font-weight:700;font-size:13px;padding:0 22px;border-radius:999px}
.join-note{margin:14px 0 0;font-size:12px;color:#49707f}
@media(max-width:860px){.belong-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.belong-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== PDP ===== */
.pdp-hero{padding:56px 0 54px}
.pdp-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.pdp-visual{position:relative;display:grid;place-items:center;min-height:440px;border-radius:24px}
.pdp-visual.og{background:radial-gradient(circle at 50% 44%,rgba(218,252,146,.22),transparent 65%)}
.pdp-visual.hot{background:radial-gradient(circle at 50% 44%,rgba(255,184,63,.22),transparent 65%)}
.pdp-visual.cold{background:radial-gradient(circle at 50% 44%,rgba(215,245,255,.3),transparent 65%)}
.pdp-visual img{position:relative;z-index:2;width:min(340px,74%);filter:drop-shadow(0 24px 28px rgba(0,0,0,.34))}
.pdp-visual .jar-shadow{bottom:12%}
.pdp-copy .pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--onlime);background:var(--lime);padding:7px 13px;border-radius:999px;margin:0 0 18px}
.pdp-copy h1{font-family:var(--display);font-weight:500;font-size:clamp(40px,5.6vw,72px);letter-spacing:-.035em;line-height:.96}
.pdp-copy h1 em{font-style:italic;color:var(--lime)}
.pdp-copy .tagline{margin:16px 0 0;font-size:17px;line-height:1.6;color:#cfe3d6;max-width:46ch}
.pdp-actives{display:flex;gap:10px;margin:26px 0;flex-wrap:wrap}
.pdp-actives .a{flex:1;min-width:120px;background:rgba(218,252,146,.06);border:1px solid rgba(218,252,146,.16);border-radius:12px;padding:14px 16px}
.pdp-actives .a b{display:block;font-size:14px;color:#fff}
.pdp-actives .a span{display:block;margin-top:2px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--lime)}
.pdp-buy{display:flex;align-items:center;gap:18px;margin:22px 0 18px;flex-wrap:wrap}
.pdp-price{font-family:var(--display);font-size:34px}
.pdp-size{font-size:12px;color:#a9c4b4;letter-spacing:.04em}
@media(max-width:860px){.pdp-grid{grid-template-columns:1fr;gap:30px}.pdp-visual{min-height:340px;order:-1}}

.feel{background:var(--paper);color:var(--ink)}
.feel .kicker{color:#1f7a4e}
.feel h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,48px);letter-spacing:-.03em;margin:14px 0 36px}
.feel-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feel-step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px}
.feel-step .pct{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1f7a4e}
.feel-step h3{font-family:var(--display);font-weight:500;font-size:22px;margin:10px 0 8px;color:var(--ink)}
.feel-step p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
@media(max-width:720px){.feel-steps{grid-template-columns:1fr}}

.pdp-reviews{text-align:center}
.pdp-reviews .kicker{color:var(--lime)}
.pdp-reviews h2{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.4vw,40px);margin:12px 0 8px}
.pdp-reviews .rstars{color:var(--lime);letter-spacing:3px;font-size:20px}
.pdp-reviews .rnote{color:#bcd3c3;font-size:14px;margin:8px 0 34px}
.rev-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.rev-card{background:rgba(218,252,146,.05);border:1px solid rgba(218,252,146,.14);border-radius:14px;padding:20px}
.rev-card .s{color:var(--lime);letter-spacing:2px;font-size:14px}
.rev-card .v{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9fe0b4;margin-left:8px}
.rev-card p{margin:10px 0 10px;font-size:14px;line-height:1.55;color:#dcebdf}
.rev-card .by{font-size:12px;color:#a9c4b4;font-weight:700}
@media(max-width:820px){.rev-cards{grid-template-columns:1fr}}

.cross .kicker{color:var(--lime)}
.cross h2{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.4vw,40px);margin:12px 0 30px}

/* footer */
footer{background:var(--green-900);padding:64px 0 34px}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;border-bottom:1px solid rgba(218,252,146,.14);padding-bottom:36px}
.foot-top .wm{font-size:38px}
.foot-tag{font-family:var(--display);font-style:italic;font-size:19px;color:#cfe3d6;margin:14px 0 0}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-col h4{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7fa890;margin:0 0 14px}
.foot-col a{display:block;font-size:13.5px;color:#cfe3d6;margin-bottom:11px}
.foot-col a:hover{color:var(--lime)}
.foot-fine{margin-top:26px;font-size:11.5px;color:#6f947f;line-height:1.7;max-width:72ch}
.concept-flag{display:inline-block;margin-bottom:16px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);background:var(--amber);padding:5px 12px;border-radius:999px}
@media(max-width:560px){.hero{padding-top:48px}.sec-pad{padding:58px 0}}

/* ===== PROTOTYPE VARIANTS (driven by data-* on <html>) ===== */
html[data-typeface="editorial"]{--display:"Fraunces",Georgia,serif;--sans:"Archivo","Helvetica Neue",Arial,sans-serif}
html[data-typeface="classic"]{--display:"Playfair Display",Georgia,serif;--sans:"Jost","Helvetica Neue",Arial,sans-serif}
html[data-accent="amber"]{--lime:#ffb83f;--lime-2:#ffa71f;--onlime:#2c1a00}
html[data-accent="sky"]{--lime:#9fe0f7;--lime-2:#7fd2ef;--onlime:#06303f}
/* section numbers */
body{counter-reset:secn}
html[data-nums="on"] section.sec-pad{position:relative}
html[data-nums="on"] section.sec-pad::before{counter-increment:secn;content:counter(secn,decimal-leading-zero);position:absolute;top:16px;left:20px;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.14em;color:currentColor;opacity:.4;z-index:4}

/* ===== PROTOTYPE PANEL ===== */
.proto{position:fixed;z-index:10000;right:18px;bottom:18px;width:300px;max-width:calc(100vw - 36px);background:#0e1b24;color:#e8eef2;border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.5);font-family:var(--sans);overflow:hidden}
.proto[hidden]{display:none}
.proto-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.proto-head b{font-size:12px;font-weight:700;letter-spacing:.2em}
.proto-min{background:none;border:0;color:#9fb0bd;font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.proto-min:hover{color:#fff}
.proto-body{padding:14px 18px 10px;max-height:min(72vh,640px);overflow:auto}
.proto.collapsed .proto-body{display:none}
.proto-grp{margin-bottom:16px}
.proto-grp>label{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;color:#8aa0ad;text-transform:uppercase;margin:0 0 9px}
.proto-seg{display:flex;flex-wrap:wrap;gap:6px;background:#15252f;border-radius:999px;padding:5px}
.proto-seg.col{border-radius:14px}
.proto-seg button{flex:1;min-width:0;border:0;cursor:pointer;background:none;color:#cdd9e0;font:inherit;font-size:12.5px;font-weight:700;padding:9px 10px;border-radius:999px;white-space:nowrap;transition:background .14s,color .14s}
.proto-seg button:hover{color:#fff}
.proto-seg button.on{background:var(--lime,#dafc92);color:var(--onlime,#0a2a1e)}
.proto-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.proto-thumbs button{padding:0;border:2px solid transparent;border-radius:9px;overflow:hidden;cursor:pointer;background:none;aspect-ratio:1}
.proto-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.proto-thumbs button.on{border-color:var(--lime,#dafc92)}
.proto-note{font-size:11px;color:#7f93a0;line-height:1.5;padding:4px 2px 8px}
.proto-note code{color:#bcd;background:#16252f;padding:1px 5px;border-radius:4px}
.proto-fab{position:fixed;z-index:10000;right:18px;bottom:18px;background:#0e1b24;color:var(--lime,#dafc92);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:11px 18px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;cursor:pointer;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.proto-fab[hidden]{display:none}
@media(max-width:560px){.proto{right:10px;left:10px;bottom:10px;width:auto}}

/* Deck default: bold geometric (Cooper Hewitt) headlines, matching the brand deck */
.hero h1,.band h2,.idea h2,.idea-foot,.range h2,.shop-head h2,.rung h3,.card h3,.card .price,.cred h2,.belong h2,.pdp-copy h1,.feel h2,.feel-step h3,.pdp-reviews h2,.cross h2,.foot-tag,.serif{font-weight:700;letter-spacing:-.03em}
html[data-typeface="editorial"] :is(.hero h1,.band h2,.idea h2,.idea-foot,.range h2,.shop-head h2,.rung h3,.card h3,.card .price,.cred h2,.belong h2,.pdp-copy h1,.feel h2,.feel-step h3,.pdp-reviews h2,.cross h2,.foot-tag,.serif),
html[data-typeface="classic"] :is(.hero h1,.band h2,.idea h2,.idea-foot,.range h2,.shop-head h2,.rung h3,.card h3,.card .price,.cred h2,.belong h2,.pdp-copy h1,.feel h2,.feel-step h3,.pdp-reviews h2,.cross h2,.foot-tag,.serif){font-weight:500;letter-spacing:-.02em}

.wm .wr{color:#fff}

/* ===== HERO VARIANTS (prototype: data-hero on <html>) ===== */
.hero{position:relative;overflow:hidden}
.hero-bg{display:none}
.hero .wrap,.hero-copy,.jar-vis{position:relative;z-index:2}
/* A · product placement (default) — copy left, jar on glow right (base .hero styles already do this) */
/* B · lifestyle — full-bleed photo, copy overlaid */
html[data-hero="lifestyle"] .hero{min-height:clamp(560px,78vh,760px);display:grid;align-items:center;padding:0}
html[data-hero="lifestyle"] .hero-bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
html[data-hero="lifestyle"] .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,32,25,.9),rgba(4,32,25,.6) 52%,rgba(4,32,25,.25))}
html[data-hero="lifestyle"] .hero-grid{grid-template-columns:1fr}
html[data-hero="lifestyle"] .hero-copy{max-width:680px}
html[data-hero="lifestyle"] .jar-vis{display:none}
/* C · split — copy left on green, photo right half */
html[data-hero="split"] .hero-grid{grid-template-columns:minmax(0,560px)}
html[data-hero="split"] .hero-bg{display:block;position:absolute;right:0;top:0;width:48%;height:100%;object-fit:cover;z-index:0}
html[data-hero="split"] .hero::after{content:"";position:absolute;right:48%;top:0;width:160px;height:100%;z-index:1;background:linear-gradient(90deg,var(--green),rgba(4,52,42,0))}
html[data-hero="split"] .jar-vis{display:none}
@media(max-width:860px){html[data-hero="split"] .hero-bg{position:relative;width:100%;height:240px;margin-top:20px}html[data-hero="split"] .hero::after{display:none}}
/* D · product + photo — jar over a darkened lifestyle backdrop */
html[data-hero="onphoto"] .hero-bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
html[data-hero="onphoto"] .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(4,32,25,.6),rgba(4,32,25,.78))}
html[data-hero="onphoto"] .jar-disc{background:radial-gradient(circle at 50% 46%,rgba(218,252,146,.22),transparent 60%)}
html[data-hero="onphoto"] .hero-sub{color:#e8f3ea}