/* ---------------- tokens ---------------- */
:root{
  --ink:#0B1622;
  --ink-2:#41525F;
  --ink-3:#78889A;
  --ink-4:#A7B4C2;

  --line:#E6ECF2;
  --line-2:#EFF4F8;
  --line-3:#D5DFE8;

  --bg:#FFFFFF;
  --bg-2:#F8FAFC;
  --bg-3:#F1F5F9;

  --accent:#1B4A73;
  --accent-hi:#245F93;
  --accent-lo:#12395C;
  --accent-soft:#EDF3F8;
  --accent-ring:rgba(27,74,115,.35);

  --warm:#B4552D;
  --warm-soft:#FCF2ED;

  --ok:#1F6B3F;
  --ok-soft:#E9F4EE;

  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --shadow-1:0 1px 2px rgba(11,22,34,.06);
  --shadow-2:0 1px 2px rgba(11,22,34,.05), 0 6px 16px -8px rgba(11,22,34,.16);
  --shadow-3:0 2px 4px rgba(11,22,34,.05), 0 18px 40px -16px rgba(11,22,34,.24);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
         Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --max:1160px;
  --gut:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --header-h:66px;
}

/* ---------------- reset ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font:16px/1.62 var(--sans);
  font-feature-settings:"kern" 1,"liga" 1,"cv11" 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  color:var(--ink); margin:0; font-weight:600;
  letter-spacing:-.022em; line-height:1.15;
  text-wrap:balance;
}
h1{font-size:clamp(33px,4.6vw,56px); letter-spacing:-.032em}
h2{font-size:clamp(25px,2.7vw,34px); letter-spacing:-.026em}
h3{font-size:19px; letter-spacing:-.018em}
h4{font-size:15px}
p{margin:0; text-wrap:pretty}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
img{height:auto}
hr{border:0; border-top:1px solid var(--line); margin:0}
button{font:inherit; color:inherit}
ul,ol{margin:0}
::selection{background:var(--accent); color:#fff}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:0 0 var(--r-sm) 0; z-index:200;
}
.skip:focus{left:0}

/* ---------------- type helpers ---------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3);
}
.eyebrow::before{
  content:""; width:16px; height:1.5px; background:var(--accent);
  border-radius:2px; opacity:.7;
}
.eyebrow.plain::before{display:none}
.lead{font-size:17.5px; line-height:1.6; color:var(--ink-2)}
.muted{color:var(--ink-3)}
.small{font-size:14px}
.tiny{font-size:12.5px; line-height:1.5}

/* ---------------- buttons ---------------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 21px; border-radius:var(--r-sm); border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:14.5px; font-weight:500; letter-spacing:-.005em;
  cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease), transform .12s var(--ease),
             box-shadow .18s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:15px; height:15px; flex:none}

.btn-primary{
  --btn-bg:var(--accent); --btn-fg:#fff; --btn-bd:var(--accent);
  box-shadow:0 1px 2px rgba(11,22,34,.14), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary:hover{--btn-bg:var(--accent-hi); --btn-bd:var(--accent-hi);
  box-shadow:0 4px 14px -4px var(--accent-ring), inset 0 1px 0 rgba(255,255,255,.16)}

.btn-ghost{--btn-bg:#fff; --btn-bd:var(--line-3); box-shadow:var(--shadow-1)}
.btn-ghost:hover{--btn-bd:var(--ink-4); box-shadow:var(--shadow-2)}

.btn-quiet{--btn-bg:transparent; --btn-fg:var(--accent); --btn-bd:transparent; padding:12px 6px}
.btn-quiet:hover{--btn-fg:var(--accent-hi); transform:none}
.btn-quiet svg{transition:transform .18s var(--ease)}
.btn-quiet:hover svg{transform:translateX(3px)}

.btn-sm{padding:8px 14px; font-size:13.5px}
.btn-lg{padding:14px 26px; font-size:15.5px}

/* ---------------- header ---------------- */
header.site{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), background .2s var(--ease),
             box-shadow .2s var(--ease);
}
header.site.scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 1px 20px -12px rgba(11,22,34,.3);
}
header.site .bar{
  display:flex; align-items:center; gap:30px; min-height:var(--header-h);
}
.brand{
  display:inline-flex; align-items:center; gap:9px; font-weight:600;
  color:var(--ink); font-size:16.5px; letter-spacing:-.02em; flex:none;
}
.brand svg{width:23px; height:23px; transition:transform .3s var(--ease-out)}
.brand:hover svg{transform:translateY(-1px) rotate(-2deg)}
nav.main{display:flex; gap:4px; margin-left:auto}
nav.main a{
  position:relative; font-size:14.5px; color:var(--ink-2);
  padding:8px 12px; border-radius:var(--r-sm);
  transition:color .16s var(--ease), background .16s var(--ease);
}
nav.main a:hover{color:var(--ink); background:var(--bg-3)}
nav.main a.active{color:var(--ink); font-weight:500}
nav.main a.active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px;
  height:1.5px; background:var(--accent); border-radius:2px;
}
.header-cta{flex:none}
.burger{
  display:none; margin-left:auto; width:40px; height:40px; border-radius:var(--r-sm);
  border:1px solid var(--line-3); background:#fff; align-items:center;
  justify-content:center; cursor:pointer;
}
.burger span{display:block; width:16px; height:1.5px; background:var(--ink); border-radius:2px;
  box-shadow:0 5px 0 var(--ink), 0 -5px 0 var(--ink)}

@media (max-width:900px){
  nav.main,.header-cta{display:none}
  .burger{display:inline-flex}
}
/* mobile drawer */
#drawer{
  position:fixed; inset:var(--header-h) 0 auto 0; z-index:55;
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-3);
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), transform .24s var(--ease-out);
}
#drawer.open{transform:translateY(0); opacity:1; pointer-events:auto}
#drawer .inner{padding:14px var(--gut) 22px; display:flex; flex-direction:column; gap:2px}
#drawer a{padding:12px 4px; font-size:16px; color:var(--ink); border-bottom:1px solid var(--line-2)}
#drawer .btn{margin-top:14px; border-bottom:0}

/* ---------------- hero ---------------- */
.hero{position:relative; overflow:hidden; padding:70px 0 66px; border-bottom:1px solid var(--line)}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 460px at 78% 8%, rgba(27,74,115,.10), transparent 62%),
    radial-gradient(620px 380px at 6% 96%, rgba(180,85,45,.06), transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%, var(--bg-2) 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(680px 420px at 78% 22%, #000, transparent 72%);
  -webkit-mask-image:radial-gradient(680px 420px at 78% 22%, #000, transparent 72%);
}
.hero .grid{display:grid; grid-template-columns:1.03fr .97fr; gap:56px; align-items:center}
@media (max-width:960px){ .hero .grid{grid-template-columns:1fr; gap:40px} }
.hero h1{margin-top:16px}
.hero .lead{margin-top:20px; max-width:33em}
.hero .cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; align-items:center}
.hero .facts{display:flex; gap:34px; margin-top:40px; flex-wrap:wrap}
.facts .n{
  display:block; font-size:23px; font-weight:600; color:var(--ink);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.facts .l{display:block; font-size:11.5px; color:var(--ink-3);
  letter-spacing:.09em; text-transform:uppercase; margin-top:3px}

.map-card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); padding:18px; box-shadow:var(--shadow-3);
}
.map-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:var(--shadow-inset);
}
.map-card img{width:100%; border-radius:var(--r); background:var(--bg-2)}
.map-card .tag{
  position:absolute; left:30px; top:30px; background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px); border:1px solid var(--line);
  padding:6px 12px; border-radius:999px; font-size:11.5px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
}

/* ---------------- sections ---------------- */
section{padding:74px 0}
section.tight{padding:46px 0}
section.alt{
  background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.sec-head{max-width:660px; margin-bottom:40px}
.sec-head h2{margin-top:12px}
.sec-head p{margin-top:14px}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.sec-head.center .eyebrow{justify-content:center}

/* ---------------- reveal ---------------- */
.reveal{opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.reveal.in{opacity:1; transform:none}

/* ---------------- cards ---------------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
@media (max-width:960px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid-3,.grid-4,.grid-2{grid-template-columns:1fr} }

.card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .24s var(--ease-out), box-shadow .24s var(--ease-out),
             border-color .24s var(--ease);
}
.card:hover{transform:translateY(-3px); border-color:var(--line-3); box-shadow:var(--shadow-3)}
.card:focus-visible{transform:translateY(-3px); box-shadow:var(--shadow-3)}
.card .thumb{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--bg-2); border-bottom:1px solid var(--line-2);
}
.card .thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease-out);
}
.card:hover .thumb img{transform:scale(1.035)}
.card .body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1}
.card h3{font-size:16.5px; line-height:1.28}
.card .desc{font-size:14px; color:var(--ink-2); flex:1}
.card .foot{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-3); margin-top:2px;
}
.card .foot .dot{width:3px; height:3px; border-radius:50%; background:var(--ink-4); flex:none}
.card .go{
  position:absolute; right:14px; bottom:14px; width:28px; height:28px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateX(-6px);
  transition:opacity .22s var(--ease), transform .24s var(--ease-out);
}
.card:hover .go{opacity:1; transform:none}
.card .go svg{width:13px; height:13px}

.plain{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px; transition:border-color .2s var(--ease), box-shadow .24s var(--ease-out);
}
.plain:hover{border-color:var(--line-3); box-shadow:var(--shadow-2)}
.plain h3{margin-bottom:9px}
.plain p{font-size:14.5px}
.plain .ico{
  width:36px; height:36px; border-radius:10px; background:var(--accent-soft);
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.plain .ico svg{width:18px; height:18px}

.num{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px; background:var(--accent-soft);
  color:var(--accent); font-size:13.5px; font-weight:600; margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}

/* ---------------- search ---------------- */
.search{position:relative; flex:none; width:216px; transition:width .26s var(--ease-out)}
.search:focus-within{width:288px}
.search .sico{
  position:absolute; left:12px; top:50%; width:15px; height:15px;
  transform:translateY(-50%); color:var(--ink-3); pointer-events:none;
  transition:color .16s var(--ease);
}
.search:focus-within .sico{color:var(--accent)}
.search input[type=search]{
  width:100%; font:inherit; font-size:14px; color:var(--ink);
  padding:9px 12px 9px 34px; border-radius:999px; border:1px solid var(--line-3);
  background:var(--bg-2); transition:background .18s var(--ease),
    border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.search input[type=search]::placeholder{color:var(--ink-4)}
.search input[type=search]:hover{background:#fff; border-color:var(--ink-4)}
.search input[type=search]:focus{
  outline:none; background:#fff; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ring);
}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}

.results{
  position:absolute; top:calc(100% + 9px); left:0; width:340px; z-index:70;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-3); overflow:hidden; padding:6px;
}
.results[hidden]{display:none}
.results a{
  display:flex; align-items:baseline; gap:10px; padding:9px 11px;
  border-radius:var(--r-sm); transition:background .14s var(--ease);
}
.results a:hover,.results a.sel{background:var(--accent-soft)}
.results .rt{font-size:14px; color:var(--ink); font-weight:500; flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.results .rc{font-size:11.5px; color:var(--ink-3); flex:none}
.results .rhead{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  padding:9px 11px 5px; font-weight:600;
}
.results .rempty{padding:14px 11px; font-size:13.5px; color:var(--ink-3)}

.searchbar{
  position:relative; display:flex; align-items:center; margin-bottom:24px;
}
.searchbar .sico{
  position:absolute; left:17px; width:17px; height:17px; color:var(--ink-3);
  pointer-events:none; transition:color .16s var(--ease);
}
.searchbar:focus-within .sico{color:var(--accent)}
.searchbar input[type=search]{
  width:100%; font:inherit; font-size:15.5px; color:var(--ink);
  padding:15px 46px 15px 46px; border-radius:var(--r); border:1px solid var(--line-3);
  background:#fff; box-shadow:var(--shadow-1);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.searchbar input[type=search]::placeholder{color:var(--ink-4)}
.searchbar input[type=search]:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring);
}
.searchbar input::-webkit-search-cancel-button{-webkit-appearance:none}
.clearbtn{
  position:absolute; right:12px; width:28px; height:28px; border-radius:50%;
  border:0; background:var(--bg-3); color:var(--ink-2); cursor:pointer;
  font-size:17px; line-height:1; display:flex; align-items:center;
  justify-content:center; transition:background .15s var(--ease);
}
.clearbtn:hover{background:var(--line-3)}
.clearbtn[hidden]{display:none}

@media (max-width:1080px){ .search{display:none} }

/* ---------------- chips / filters ---------------- */
.filters{
  display:flex; gap:9px; flex-wrap:wrap; margin-bottom:8px;
  padding-bottom:22px; border-bottom:1px solid var(--line);
}
.chip{
  padding:8px 15px; border-radius:999px; border:1px solid var(--line-3);
  background:#fff; font-size:13.5px; color:var(--ink-2); cursor:pointer;
  transition:background .16s var(--ease), border-color .16s var(--ease),
             color .16s var(--ease), transform .12s var(--ease);
  display:inline-flex; align-items:center; gap:7px;
}
.chip:hover{border-color:var(--ink-4); transform:translateY(-1px)}
.chip .count{font-size:11.5px; color:var(--ink-4); font-variant-numeric:tabular-nums}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.chip.on .count{color:rgba(255,255,255,.6)}

.select-wrap{position:relative; display:inline-block}
.select-wrap select{
  appearance:none; -webkit-appearance:none; font:inherit; font-size:13.5px;
  padding:8px 38px 8px 15px; border-radius:999px; border:1px solid var(--line-3);
  background:#fff; color:var(--ink-2); cursor:pointer; max-width:220px;
  transition:border-color .16s var(--ease);
}
.select-wrap select:hover{border-color:var(--ink-4)}
.select-wrap::after{
  content:""; position:absolute; right:15px; top:50%; width:7px; height:7px;
  border-right:1.6px solid var(--ink-3); border-bottom:1.6px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}

/* ---------------- swatches ---------------- */
.swatches{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:800px){ .swatches{grid-template-columns:1fr} }
.swatch{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:#fff; transition:transform .24s var(--ease-out), box-shadow .24s var(--ease-out);
}
.swatch:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}
.swatch .bar{display:flex; height:72px}
.swatch .bar i{flex:1; transition:flex .3s var(--ease-out)}
.swatch:hover .bar i{flex:1.06}
.swatch .txt{padding:18px 20px 20px}
.swatch h3{font-size:15.5px; margin-bottom:5px}
.swatch p{font-size:13.5px}

/* ---------------- product detail ---------------- */
.crumbs{font-size:13px; color:var(--ink-3); padding-top:24px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.crumbs a{transition:color .16s var(--ease)}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{color:var(--ink-4)}

.pd{display:grid; grid-template-columns:1.36fr 1fr; gap:48px; align-items:start; padding:24px 0 60px}
@media (max-width:960px){ .pd{grid-template-columns:1fr; gap:34px} }
.preview{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:16px; box-shadow:var(--shadow-2);
}
.preview img{width:100%; border-radius:var(--r); background:#fff}
.theme-pick{
  display:flex; gap:8px; margin-top:16px; background:#fff; padding:5px;
  border-radius:10px; border:1px solid var(--line);
}
.theme-pick button{
  flex:1; padding:9px 8px; border-radius:7px; border:0; background:transparent;
  cursor:pointer; font-size:13px; color:var(--ink-2); font-weight:500;
  transition:background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.theme-pick button:hover{color:var(--ink); background:var(--bg-3)}
.theme-pick button.on{background:var(--ink); color:#fff; box-shadow:var(--shadow-1)}

.badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border-radius:999px; background:var(--accent-soft); color:var(--accent);
  font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
.badge.free{background:var(--ok-soft); color:var(--ok)}
.badge.price{background:var(--ink); color:#fff}

/* buy form — a real form so the button works with JavaScript disabled */
.buy{display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; align-items:center}
.buy button.btn{font-family:inherit; font-size:15px; padding:14px 26px}
.badge.warm{background:var(--warm-soft); color:var(--warm)}

.spec{width:100%; border-collapse:collapse; font-size:14.5px; margin-top:30px}
.spec th,.spec td{text-align:left; padding:13px 0; border-bottom:1px solid var(--line-2); vertical-align:top}
.spec th{color:var(--ink-3); font-weight:400; width:40%}
.spec td{color:var(--ink)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}

/* ---------------- prose ---------------- */
.prose{max-width:740px}
.prose h2{margin-top:48px; font-size:clamp(22px,2.2vw,28px)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:32px}
.prose p{margin-top:15px}
.prose ul,.prose ol{margin-top:15px; padding-left:0; list-style:none}
.prose ol{counter-reset:step}
.prose li{position:relative; padding-left:26px; margin-top:10px}
.prose ul li::before{
  content:""; position:absolute; left:6px; top:.68em; width:5px; height:5px;
  border-radius:50%; background:var(--accent); opacity:.55;
}
.prose ol li{counter-increment:step}
.prose ol li::before{
  content:counter(step); position:absolute; left:0; top:.05em;
  font-size:12px; font-weight:600; color:var(--accent);
}
.prose code{
  background:var(--bg-3); padding:2px 7px; border-radius:6px;
  font:13px/1.5 var(--mono); color:var(--ink);
  border:1px solid var(--line-2);
}
.note{
  border-left:2.5px solid var(--accent); background:var(--bg-2);
  padding:16px 22px; border-radius:0 var(--r) var(--r) 0; margin-top:24px;
  font-size:14.5px; color:var(--ink-2);
}

/* ---------------- faq ---------------- */
.faq{border-bottom:1px solid var(--line); padding:0}
.faq summary{
  cursor:pointer; list-style:none; padding:19px 0; display:flex;
  justify-content:space-between; align-items:center; gap:20px;
  font-weight:500; color:var(--ink); font-size:16.5px; letter-spacing:-.012em;
  transition:color .16s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:""; flex:none; width:11px; height:11px; margin-right:5px;
  border-right:1.7px solid var(--ink-3); border-bottom:1.7px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .24s var(--ease-out), border-color .16s var(--ease);
}
.faq[open] summary::after{transform:rotate(-135deg) translateY(-2px);
  border-color:var(--accent)}
.faq .a{padding:0 0 20px; font-size:15px; max-width:72ch; color:var(--ink-2)}
.faq[open] .a{animation:faqIn .28s var(--ease-out)}
@keyframes faqIn{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}

/* ---------------- cta band ---------------- */
.band{
  background:
    radial-gradient(700px 320px at 82% 0%, rgba(27,74,115,.30), transparent 60%),
    var(--ink);
  color:#fff; border-radius:var(--r-xl); padding:52px 48px;
  display:flex; align-items:center; gap:40px; flex-wrap:wrap;
}
.band h2,.band h3{color:#fff}
.band p{color:rgba(255,255,255,.72); margin-top:12px; max-width:52ch}
.band .btn{--btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff}
.band .btn:hover{--btn-bg:#EDF3F8; --btn-bd:#EDF3F8}
.band .actions{margin-left:auto; display:flex; gap:12px; flex-wrap:wrap}
@media (max-width:760px){ .band{padding:36px 26px} .band .actions{margin-left:0} }

/* ---------------- footer ---------------- */
footer.site{
  border-top:1px solid var(--line); background:var(--bg-2);
  padding:56px 0 36px; margin-top:0;
}
footer.site .cols{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:36px}
@media (max-width:820px){ footer.site .cols{grid-template-columns:1fr 1fr; gap:28px} }
footer.site h4{
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-bottom:14px;
}
footer.site ul{list-style:none; padding:0; margin:0}
footer.site li{margin:9px 0; font-size:14px}
footer.site a{transition:color .16s var(--ease)}
footer.site a:hover{color:var(--ink)}
footer.site .base{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-3);
}

/* ---------------- misc ---------------- */
.notice{
  background:var(--warm-soft); border:1px solid #F0DACD; color:#7A3A1C;
  border-radius:var(--r); padding:15px 20px; font-size:14px;
}
.tag-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.stat-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.stat-row > div{background:#fff; padding:20px 22px}
.stat-row .n{display:block; font-size:24px; font-weight:600; color:var(--ink);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stat-row .l{display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px}
@media (max-width:760px){ .stat-row{grid-template-columns:repeat(2,1fr)} }

/* ---------------- documentation layout ----------------
   A page of prose needs a readable measure (~75 characters), but a 740px
   column floating inside a 1160px container reads as a mistake. Pairing it
   with a sidebar keeps the measure comfortable and the page filling the
   container, so content lines up with the header. */
.doc{display:grid; grid-template-columns:minmax(0,1fr) 268px; gap:68px; align-items:start}
@media (max-width:1040px){ .doc{grid-template-columns:1fr; gap:38px} }
.doc .prose{max-width:760px}
.doc-side{
  position:sticky; top:calc(var(--header-h) + 26px);
  display:flex; flex-direction:column; gap:24px;
}
@media (max-width:1040px){ .doc-side{position:static} }
.toc h4{
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-bottom:10px;
}
.toc a{
  display:block; font-size:13.5px; color:var(--ink-2);
  padding:5px 0 5px 14px; border-left:2px solid transparent;
  transition:color .16s var(--ease), border-color .16s var(--ease);
}
.toc a:hover{color:var(--ink); border-left-color:var(--line-3)}
.toc a.on{color:var(--accent); border-left-color:var(--accent); font-weight:500}
.promo{
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r); padding:18px 18px 20px;
}
.promo h4{font-size:14.5px; margin-bottom:7px}
.promo p{font-size:13px; color:var(--ink-2); margin-bottom:14px}

/* ---------------- product detail rebalance ----------------
   The preview and the summary sit as equal-weight columns; the long-form
   description and the specification table move below, full width, so neither
   column is left with a block of dead space. */
.quickfacts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-top:26px;
}
.quickfacts div{background:#fff; padding:13px 16px}
.quickfacts .n{
  display:block; font-size:15px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.quickfacts .l{
  display:block; font-size:11px; color:var(--ink-3); margin-top:3px;
  letter-spacing:.07em; text-transform:uppercase;
}
.pd-detail{padding-top:44px; border-top:1px solid var(--line); margin-top:52px}
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}
@media (max-width:940px){ .detail-grid{grid-template-columns:1fr; gap:38px} }
.detail-grid h3{margin-bottom:6px}
.detail-grid .kicker{
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; display:block; margin-bottom:14px;
}

/* ---------------- placeholder highlight ----------------
   Unfilled fields in the legal documents are rendered as visible marks so
   they cannot be published by accident. */
mark.ph{
  background:#FDF1C9; color:#8A5300; border-radius:4px; padding:1px 6px;
  font-weight:500; box-shadow:inset 0 0 0 1px #EFDCA0;
}

/* ---------------- price + purchase terms ----------------
   Waffo's review requires the price to be visible before checkout and the
   refund policy to be stated on product pages as well as at checkout. */
.price-tag{
  position:absolute; right:12px; top:12px; z-index:2;
  background:var(--ink); color:#fff; font-size:12.5px; font-weight:600;
  padding:5px 11px; border-radius:999px; letter-spacing:.01em;
  box-shadow:0 2px 8px -2px rgba(11,22,34,.45);
}
.buyinfo{
  margin-top:26px; padding:18px 20px 20px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r);
}
.buyinfo h4{
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-bottom:10px;
}
.buyinfo ul{list-style:none; padding:0; margin:0}
.buyinfo li{
  position:relative; padding-left:22px; font-size:13.5px;
  margin-top:8px; color:var(--ink-2);
}
.buyinfo li::before{
  content:""; position:absolute; left:1px; top:.52em; width:9px; height:5px;
  border-left:1.7px solid var(--accent); border-bottom:1.7px solid var(--accent);
  transform:rotate(-45deg);
}
.buyinfo strong{color:var(--ink)}

/* ---------------- motion preferences ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{opacity:1; transform:none}
  .card:hover,.swatch:hover,.btn:hover{transform:none}
}