/* Kova Design System — web build tokens + base (from Kova Design System v2026-10) */

@font-face{font-family:'Barlow';src:url('../fonts/Barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/Barlow-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/Barlow-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/Barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/Barlow-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/BarlowCondensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/BarlowCondensed-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/BarlowCondensed-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --bone:#EDE8DF; --bone-2:#F0ECE4; --bone-3:#F5F2EC;
  --carbon:#111214; --carbon-2:#1A1C1F; --carbon-3:#24262A;
  --orange:#FF5A1F; --orange-hover:#FF6B36; --orange-press:#E84F18;
  --brand-ink:#A8380E; --sand:#D8C7AE; --sage:#A9BFA0; --iron:#9AA3AE; --steel:#6B7280;
  --ink:#111214; --ink-2:#565B63;
  --hairline:rgba(17,18,20,.14); --hairline-strong:#111214;
  --r-btn:4px; --r-card:8px; --r-tile:16px;
  --shadow-tile-hover:0 10px 24px rgba(17,18,20,.12);
  --shadow-overlay:0 24px 56px rgba(17,18,20,.28);
  --ease:cubic-bezier(.2,.7,.2,1);
  --container:1280px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Barlow',Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--ink);background:var(--bone);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--brand-ink)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 32px}
@media(max-width:720px){.wrap{padding:0 20px}}

/* type */
.display,h1,h2,h3{font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:.005em}
h1{font-size:clamp(56px,9vw,128px)}
h2{font-size:clamp(40px,5.6vw,72px)}
h3{font-size:clamp(24px,3vw,32px);font-weight:700}
.mono{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.lead{font-size:19px;line-height:1.55;color:var(--ink)}
.sub{color:var(--ink-2)}
p+p{margin-top:16px}

/* band — 12° leading cut */
.band{display:inline-block;background:var(--orange);color:var(--carbon);font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:14px;padding:10px 22px 10px 28px;clip-path:polygon(12px 0,100% 0,100% 100%,0 100%)}

/* line badge */
.line-badge{display:inline-flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--ink)}
.line-badge .swatch{width:18px;height:12px;background:var(--orange);clip-path:polygon(3px 0,100% 0,100% 100%,0 100%)}

/* spec line */
.specline{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.specline .sep{width:1.5px;height:16px;background:var(--orange)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Barlow',sans-serif;font-weight:600;font-size:17px;text-decoration:none;border-radius:var(--r-btn);padding:16px 32px;border:1.5px solid transparent;cursor:pointer;transition:background .2s var(--ease),transform .12s var(--ease),color .2s var(--ease)}
.btn-primary{background:var(--orange);color:var(--carbon)}
.btn-primary:hover{background:var(--orange-hover)}
.btn-primary:active{background:var(--orange-press);transform:translateY(1px)}
.btn-outline{background:transparent;color:var(--carbon);border-color:var(--carbon)}
.btn-outline:hover{background:rgba(17,18,20,.06)}
.btn-carbon{background:var(--carbon);color:var(--bone)}
.btn-carbon:hover{background:var(--carbon-3)}
.btn:focus-visible{outline:none;border-color:var(--carbon);box-shadow:0 0 0 3px rgba(255,90,31,.25)}
.btn-block{width:100%}

/* badges */
.pill{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--carbon);border-radius:999px;padding:6px 14px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--carbon);background:transparent}
.pill img{width:16px;height:16px}

/* cards */
.card{background:var(--bone-3);border:1px solid var(--hairline);border-radius:var(--r-card);padding:28px}

/* sections */
section{padding:88px 0}
@media(max-width:720px){section{padding:56px 0}}
.sect-sand{background:var(--sand)}
.sect-carbon{background:var(--carbon);color:var(--bone)}
.sect-carbon .sub{color:#B9BDC4}
.sect-carbon .card{background:var(--carbon-2);border-color:rgba(237,232,223,.14);color:var(--bone)}
.eyebrow{margin-bottom:20px}

/* header */
.announce{background:var(--carbon);color:var(--bone);text-align:center;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px}
header.site{position:sticky;top:0;z-index:50;background:var(--bone);border-bottom:1px solid var(--hairline)}
header.site .bar{display:flex;align-items:center;justify-content:space-between;height:68px}
header.site img.logo{height:22px;width:auto}
header.site nav{display:flex;gap:28px;align-items:center}
header.site nav a{color:var(--carbon);text-decoration:none;font-weight:500;font-size:15px}
header.site nav a:hover{color:var(--brand-ink)}
@media(max-width:720px){header.site nav a.hide-m{display:none}}

/* hero split */
.hero{padding:72px 0 88px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero-art{background:var(--bone-2);border-radius:var(--r-tile);overflow:hidden}
.hero-art img{width:100%;height:auto}

/* buy box */
.buybox{background:var(--bone-3);border:1px solid var(--hairline);border-radius:var(--r-card)}
.opt{display:block;position:relative;border:1.5px solid var(--hairline);border-radius:var(--r-btn);padding:16px 18px;cursor:pointer;background:#fff;transition:border-color .2s var(--ease)}
.opt+.opt{margin-top:10px}
.opt input{position:absolute;opacity:0}
.opt .opt-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.opt .opt-name{font-weight:600;font-size:16px}
.opt .opt-price{font-family:'Barlow Condensed';font-weight:800;font-size:26px;text-transform:uppercase;white-space:nowrap}
.opt .opt-sub{font-size:13.5px;color:var(--ink-2);margin-top:4px}
.opt:has(input:checked){border-color:var(--carbon);box-shadow:0 0 0 1px var(--carbon)}
.opt .flag{position:absolute;top:-11px;left:14px;background:var(--orange);color:var(--carbon);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px 3px 13px;clip-path:polygon(6px 0,100% 0,100% 100%,0 100%)}
.strike{text-decoration:line-through;color:var(--steel);font-weight:400;font-size:16px;margin-right:6px}

/* mechanism / value cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:920px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}
.icon-24{width:24px;height:24px}

/* ingredient rows */
.ing{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:26px 0;border-top:1.5px solid var(--carbon)}
.ing:last-child{border-bottom:1.5px solid var(--carbon)}
.ing .dose{font-family:'Barlow Condensed';font-weight:800;font-size:44px;line-height:.95;text-transform:uppercase}
.ing .dose small{display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:12px;letter-spacing:.08em;margin-top:6px}
@media(max-width:620px){.ing{grid-template-columns:1fr;gap:10px}}

/* FAQ */
details.faq{border-top:1px solid var(--hairline);padding:20px 0}
details.faq:last-of-type{border-bottom:1px solid var(--hairline)}
details.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:17px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:'+';font-family:'Barlow Condensed';font-size:26px;font-weight:700;transition:transform .2s var(--ease)}
details.faq[open] summary:after{transform:rotate(45deg)}
details.faq .a{padding-top:12px;color:var(--ink-2);max-width:720px}

/* guarantee */
.guarantee{border:1.5px solid var(--carbon);border-radius:var(--r-card);padding:36px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:var(--bone-3)}
@media(max-width:620px){.guarantee{grid-template-columns:1fr}}
.g-num{font-family:'Barlow Condensed';font-weight:800;font-size:96px;line-height:.85;text-transform:uppercase}
.g-num small{display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:13px;letter-spacing:.08em}

/* footer */
footer.site{background:var(--carbon);color:var(--bone);padding:64px 0 40px;font-size:14px}
footer.site a{color:var(--bone);text-decoration:none}
footer.site a:hover{color:var(--sand)}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
@media(max-width:720px){footer.site .cols{grid-template-columns:1fr 1fr}}
footer.site .fine{color:#9AA0A8;font-size:12.5px;line-height:1.6;border-top:1px solid rgba(237,232,223,.14);padding-top:24px}

/* sticky mobile cta */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--bone);border-top:1px solid var(--hairline);padding:10px 16px;display:none;align-items:center;gap:12px}
.sticky-cta .p{font-family:'Barlow Condensed';font-weight:800;font-size:22px;text-transform:uppercase}
@media(max-width:720px){.sticky-cta{display:flex}.sticky-cta .btn{flex:1;padding:13px 10px;font-size:15px}}

/* misc */
.tick-row{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.tick{display:flex;gap:9px;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase}
.tick img{width:16px;height:16px}
.photo-tile{border-radius:var(--r-tile);overflow:hidden;background:var(--sand)}
.photo-tile img{width:100%;height:100%;object-fit:cover}
.asterisk-note{font-size:12.5px;color:var(--ink-2)}