/* ==========================================================================
   Halden Studio — storefront + funnel design system
   Structure inherited verbatim from the approved homepage reconstruction:
   1312px content column / 64px gutters, 44-32-18-16 type scale at one weight,
   8px buttons / 16px cards / 24px bands, exactly one filled primary per viewport.
   Art direction v2: warm-paper neutrals, deep spruce primary, brass secondary,
   jewel-tone product artwork with a single top-left light source.
   ========================================================================== */

@font-face{
  font-family:"Halden Sans";
  src:url("geist-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:block;
}

:root{
  /* ---- warm ink + paper neutrals (single warm grey family) ---- */
  --ink:#141210;            /* 18.69:1 on white */
  --ink-soft:#2A2521;
  --body:#55504A;           /* 7.98:1 on white */
  --muted:#6F6862;          /* 5.48:1 on white, 4.70:1 on the darkest tinted surface */
  --faint:#948C84;
  --line:#E4DFD7;
  --line-soft:#EFEBE4;
  --band:#F8F6F3;
  --sub:#F1EDE6;
  --paper:#FCFBF9;
  --white:#fff;

  /* ---- brand: deep spruce ---- */
  --brand:#145247;          /* 9.02:1 on white — filled primary */
  --brand-ink:#10493E;      /* 10.27:1 — eyebrows, inline links */
  --brand-deep:#0C3A32;     /* hover / pressed */
  --brand-bright:#1C6B57;
  --brand-tint:#F0F5F2;
  --brand-line:#D6E3DD;

  /* ---- brass secondary (fills + decoration; #8A6218 for text) ---- */
  --brass:#A8762A;
  --brass-ink:#8A6218;      /* 5.47:1 on white */
  --brass-tint:#FAF3E4;
  --brass-line:#EBDCBC;

  /* ---- product identity hues (category coding, used in artwork) ---- */
  --deck:#145247;
  --press:#7A2E2E;
  --marks:#8A6218;

  /* ---- artwork palette: jewel tones, warm-biased ---- */
  --a-spruce:#145247;  --a-spruce-2:#2C6E5E;
  --a-sage:#93A88F;    --a-sage-2:#BFCDB8;
  --a-oxblood:#7A2E2E; --a-terra:#C0603C;
  --a-ochre:#D19A3C;   --a-sand:#E8D5AE;
  --a-cream:#F4EDE0;   --a-bone:#E7DFD2;
  --a-plum:#4A2A46;    --a-mauve:#A98BA0;
  --a-slate:#33465B;   --a-chalk:#AFC2CE;
  --a-ink:#141210;

  --gutter:64px;
  --content:1312px;
  --measure:736px;

  --r-btn:8px;
  --r-card:16px;
  --r-band:24px;

  /* warm-tinted shadows, single top-left light source */
  --shadow-xs:0 1px 2px rgba(38,28,18,.06);
  --shadow-sm:0 1px 3px rgba(38,28,18,.10),0 1px 2px rgba(38,28,18,.06);
  --shadow-md:0 4px 10px -2px rgba(38,28,18,.11),0 2px 4px -2px rgba(38,28,18,.06);
  --shadow-lg:0 14px 22px -6px rgba(38,28,18,.13),0 5px 8px -3px rgba(38,28,18,.05);
  --shadow-xl:0 26px 44px -12px rgba(38,28,18,.20),0 10px 16px -6px rgba(38,28,18,.07);
  --shadow-art:0 18px 34px -10px rgba(38,28,18,.22),0 5px 10px -4px rgba(38,28,18,.10),
               0 0 0 1px rgba(38,28,18,.05);

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--body);
  font-family:"Halden Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:24px; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0; color:var(--ink); font-weight:600}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit}
::selection{background:#C9DED6; color:var(--brand-deep)}

/* ---------- type scale : 44 / 32 / 18 / 16, one weight ---------- */
.h-display{font-size:44px; line-height:55px; letter-spacing:-.02em; text-wrap:balance}
.h-section{font-size:32px; line-height:44.8px; letter-spacing:-.02em; text-wrap:balance}
.h-card{font-size:18px; line-height:27px; letter-spacing:0}
.h-label{font-size:16px; line-height:24px; letter-spacing:0}
.lead{font-size:18px; line-height:28px; color:var(--body); text-wrap:pretty}
.body{font-size:16px; line-height:24px; color:var(--body)}
.small{font-size:14px; line-height:20px; color:var(--muted)}
.eyebrow{font-size:16px; line-height:24px; font-weight:600; color:var(--brand-ink)}
.eyebrow-brass{color:var(--brass-ink)}
.eyebrow-press{color:var(--press)}
.measure{max-width:var(--measure); margin-inline:auto}
.num{font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.container{width:100%; max-width:calc(var(--content) + var(--gutter)*2); margin:0 auto; padding-inline:var(--gutter)}
.section{position:relative}
.band{
  margin:0 24px; background:var(--band); border:1px solid var(--line-soft);
  border-radius:var(--r-band); overflow:hidden; position:relative;
}
/* warm paper grain — breaks the flat-vector sterility */
.band::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("grain.svg"); background-size:180px 180px;
}
.band>*{position:relative}
.band-inner{padding:96px 0}
.band-ink{background:var(--ink); border-color:var(--ink)}
.band-ink::before{opacity:.35; mix-blend-mode:screen}
.band-ink h1,.band-ink h2,.band-ink h3,.band-ink h4{color:#fff}
.band-ink p,.band-ink .body{color:#B8B0A6}
.band-ink .small{color:#9A938A}
.stack-center{text-align:center}
.sec-head{display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center}
.sec-head .eyebrow{margin-bottom:-4px}
.sec-head p{max-width:var(--measure)}
.sec-head-left{align-items:flex-start; text-align:left}
.sec-head-left p{margin-inline:0}

/* ---------- buttons : flat 8px, one filled per viewport ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 14px; border-radius:var(--r-btn);
  font-size:14px; line-height:20px; font-weight:600; white-space:nowrap;
  border:1px solid transparent; background:transparent; color:var(--ink-soft);
  transition:background-color .16s var(--ease-out), border-color .16s var(--ease-out),
             box-shadow .16s var(--ease-out), color .16s var(--ease-out), transform .1s var(--ease-out);
  cursor:pointer;
}
.btn svg{width:16px; height:16px; flex:none}
.btn:active{transform:scale(.985)}
.btn-lg{height:46px; padding:0 18px; font-size:15px}
.btn-xl{height:48px; padding:0 20px; font-size:16px}
.btn-primary{
  background:var(--brand); color:#fff;
  box-shadow:0 1px 2px rgba(12,58,50,.28), inset 0 1px 0 rgba(255,255,255,.13);
}
.btn-primary:hover{background:var(--brand-deep); box-shadow:0 4px 12px -2px rgba(12,58,50,.34), inset 0 1px 0 rgba(255,255,255,.13)}
.btn-secondary{background:#fff; color:#3B3630; border-color:var(--line); box-shadow:var(--shadow-xs)}
.btn-secondary:hover{background:var(--sub); border-color:#D8D2C8}
.btn-ghost{color:#3B3630}
.btn-ghost:hover{background:var(--sub)}
.btn-onink{background:#fff; color:var(--ink)}
.btn-onink:hover{background:#EDE7DC}
.btn-onink-2{background:transparent; color:#EDE7DC; border-color:rgba(255,255,255,.24)}
.btn-onink-2:hover{background:rgba(255,255,255,.08)}
.btn-row{display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap}
.btn-row-left{justify-content:flex-start}
.link-arrow{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--ink-soft)}
.link-arrow svg{width:14px;height:14px;color:var(--muted); transition:transform .16s var(--ease-out)}
.link-arrow:hover svg{transform:translateX(2px)}
.link-brand{color:var(--brand-ink); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--brand-line)}
.link-brand:hover{text-decoration-color:var(--brand)}

/* ---------- header ---------- */
.header{position:absolute; inset:0 0 auto; z-index:40}
.header::before{content:""; position:absolute; inset:0 0 auto; height:130px; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.95) 30%,rgba(255,255,255,0))}
.header-solid{position:relative; background:#fff; border-bottom:1px solid var(--line-soft)}
.header-solid::before{display:none}
.header-inner{position:relative; height:56px; display:flex; align-items:center; gap:32px}
.brandmark{display:flex; align-items:center; gap:10px; flex:none}
.brandmark .mark{width:32px; height:32px; border-radius:9px; flex:none}
.brandmark .word{font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--ink)}
.nav{display:flex; align-items:center; gap:4px; margin-left:8px}
.nav a{display:inline-flex; align-items:center; gap:4px; padding:8px 12px; font-size:15px; font-weight:500; color:var(--ink); border-radius:6px}
.nav a:hover{background:rgba(20,18,16,.05)}
.nav a[aria-current="page"]{background:var(--brand-tint); color:var(--brand-ink)}
.nav svg{width:14px; height:14px; color:var(--muted)}
.header-actions{margin-left:auto; display:flex; align-items:center; gap:8px}
.header-actions .btn{height:39px}
.burger{display:none; width:40px; height:40px; align-items:center; justify-content:center; border:0; background:transparent; border-radius:8px}
.burger svg{width:24px; height:24px; color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative; height:1700px}
.hero-art{position:absolute; inset:0; overflow:hidden; background:
  radial-gradient(120% 90% at 78% 12%, #FBF8F3 0%, #F4F0E9 45%, #EFE9DF 100%)}
.hero-panel{
  position:absolute; top:0; left:0; width:560px; height:900px; background:#fff; z-index:20;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 40px 64px var(--gutter);
}
.hero-panel::after{
  content:""; position:absolute; top:0; right:-72px; width:72px; height:100%;
  background:linear-gradient(90deg,#fff 10%,rgba(255,255,255,0));
}
.pill{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  height:32px; padding:0 12px 0 10px; border:1px solid var(--line); border-radius:999px;
  background:#fff; font-size:14px; font-weight:500; color:#3B3630; box-shadow:var(--shadow-xs);
}
.pill .dot{width:8px; height:8px; border-radius:999px; background:var(--brand)}
.pill svg{width:14px; height:14px; color:var(--muted)}
.hero h1{margin-top:24px}
.hero-sub{margin-top:20px; max-width:452px}
.trust{display:flex; align-items:center; gap:12px; margin-top:32px}
.chipstack{display:flex; align-items:center}
.chipstack .chip{
  width:40px; height:40px; border-radius:999px; background:#fff; border:2px solid #fff;
  box-shadow:var(--shadow-sm); margin-left:-10px; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; letter-spacing:.02em; color:var(--ink);
}
.chipstack .chip:first-child{margin-left:0}
.trust-text{font-size:14px; line-height:20px; color:var(--muted)}
.trust-text b{display:block; color:var(--ink); font-weight:600; font-size:14px}
.hero-cta{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap}
.scroll-cue{display:flex; align-items:center; gap:8px; margin-top:40px; font-size:14px; color:var(--muted)}
.scroll-cue svg{width:16px; height:16px}
.hero-fade{position:absolute; left:0; right:0; bottom:0; height:280px; z-index:10;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 84%)}

/* the angled product collage */
.collage{
  position:absolute; top:-560px; left:-480px; width:2800px;
  display:grid; grid-template-columns:repeat(9,268px); gap:18px;
  transform:rotate(-9deg); transform-origin:top left;
}
.collage .col{display:flex; flex-direction:column; gap:18px}
.collage .col:nth-child(1){margin-top:150px}
.collage .col:nth-child(2){margin-top:330px}
.collage .col:nth-child(3){margin-top:210px}
.collage .col:nth-child(4){margin-top:390px}
.collage .col:nth-child(5){margin-top:270px}
.collage .col:nth-child(6){margin-top:398px}
.collage .col:nth-child(7){margin-top:262px}
.collage .col:nth-child(8){margin-top:352px}
.collage .col:nth-child(9){margin-top:214px}
.collage .art{box-shadow:var(--shadow-art)}

/* ---------- stat row ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:64px 32px; margin-top:64px}
.stat .n{font-size:44px; line-height:55px; letter-spacing:-.02em; font-weight:600; color:var(--brand); font-variant-numeric:tabular-nums}
.stat h3{margin-top:8px}
.stat p{margin-top:8px}

/* ---------- product card grid (3-up) ---------- */
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.pcard{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-xs);
  transition:box-shadow .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.pcard:hover{box-shadow:var(--shadow-lg); border-color:#D8D2C8; transform:translateY(-3px)}
.pcard-media{position:relative; aspect-ratio:421/236; border-bottom:1px solid var(--line-soft); overflow:hidden}
.pcard-body{padding:20px; display:flex; flex-direction:column; gap:8px; flex:1}
.pcard-foot{padding:0 20px 20px; display:flex; align-items:center; gap:8px}
.pcard-foot .glyph{width:20px; height:20px; border-radius:6px; flex:none}
.pcard-price{margin-left:auto; font-size:14px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}

/* ---------- compatibility wall ---------- */
.compat{margin-top:64px; text-align:center}
.compat-title{font-size:14px; color:var(--muted)}
.compat-grid{margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:22px 40px; max-width:720px; margin-inline:auto}
.fmt{display:inline-flex; align-items:center; gap:9px; color:#3B3630}
.fmt .badge{
  width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; letter-spacing:.02em; color:#fff; box-shadow:var(--shadow-xs);
}
.fmt span{font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--ink-soft)}
.fmt em{font-style:normal; font-size:13px; color:var(--muted); font-weight:500}

/* ---------- product block ---------- */
.pblock-head{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center}
.applogo{width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.22)}
.applogo svg{width:30px; height:30px; color:#fff}
.pblock-visual{margin-top:56px; margin-inline:auto; max-width:1080px; position:relative}
.pblock-cta{margin-top:48px}

/* 2x2 feature cards */
.cards-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px}
.fcard{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:24px; overflow:hidden; min-height:296px; display:flex; flex-direction:column; box-shadow:var(--shadow-xs)}
.fcard-art{position:relative; height:124px; margin:-4px -28px 24px -4px; overflow:hidden}
.fcard-glyph{width:44px; height:44px; border-radius:11px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-xs); flex:none}
.fcard-glyph svg{width:22px; height:22px; color:var(--brand-ink)}
.fcard h3{margin-bottom:8px}
.fcard .link-arrow{margin-top:auto; padding-top:20px}

/* spec strip */
.spec-label{margin-top:56px; text-align:center; font-size:14px; color:var(--muted)}
.specs{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:20px}
.spec{background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow-xs)}
.spec .g{width:24px; height:24px; margin-bottom:24px; color:var(--brand-ink)}
.spec h3{font-size:16px; line-height:24px}
.spec p{font-size:14px; line-height:20px; color:var(--muted); margin-top:2px}

/* ---------- pricing ---------- */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px}
.tier{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:28px; display:flex; flex-direction:column; box-shadow:var(--shadow-xs); position:relative}
.tier-feature{border-color:var(--brand-line); box-shadow:var(--shadow-lg)}
.tier-feature::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--brand); border-radius:16px 16px 0 0}
.tier-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.price{font-size:44px; line-height:1; letter-spacing:-.03em; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.price sup{font-size:20px; font-weight:600; vertical-align:top; line-height:1; position:relative; top:6px; margin-right:1px}
.tier-logo{width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.2)}
.tier-logo svg{width:24px;height:24px;color:#fff}
.tier h3{margin-top:22px}
.tier .from{font-size:14px; line-height:20px; color:var(--muted); margin-top:4px}
.tier ul{margin-top:22px; display:flex; flex-direction:column; gap:8px; flex:1}
.tier li{font-size:14px; line-height:20px; color:#3B3630; padding-left:24px; position:relative}
.tier li::before{content:""; position:absolute; left:6px; top:9px; width:5px; height:5px; border-radius:999px; background:#CFC8BC}
.tier li b{color:var(--brand-ink); font-weight:600}
.tier-actions{margin-top:26px; display:flex; flex-direction:column; gap:10px}
.tier-actions .btn{width:100%}
.viewall{display:flex; align-items:center; gap:24px; margin-top:40px; color:var(--muted); font-size:14px}
.viewall::before,.viewall::after{content:""; flex:1; height:1px; background:var(--line)}

/* ---------- maker note (quote band) ---------- */
.note{position:relative; text-align:center; padding:96px 0}
.seal{width:64px; height:64px; margin:0 auto 32px; border-radius:999px; border:1px solid var(--brand-line); background:var(--brand-tint); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-xs)}
.seal svg{width:28px; height:28px; color:var(--brand-ink)}
.note h3{font-size:32px; line-height:44.8px; letter-spacing:-.02em; max-width:880px; margin-inline:auto; text-wrap:balance}
.note-by{margin-top:32px; display:flex; flex-direction:column; align-items:center; gap:12px}
.note-av{width:48px; height:48px; border-radius:999px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:var(--ink)}
.note-nav{position:absolute; top:50%; left:0; right:0; display:flex; justify-content:space-between; padding-inline:64px; pointer-events:none}
.note-nav span{width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--muted)}
.dots{display:flex; gap:8px; justify-content:center; margin-top:48px}
.dots i{width:8px; height:8px; border-radius:999px; background:#DDD6CC; display:block}
.dots i.on{background:var(--brand)}

/* ---------- FAQ ---------- */
.faq{max-width:var(--measure); margin:48px auto 0}
.tagrow{display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap}
.tag{height:28px; padding:0 10px; border:1px solid var(--line); border-radius:6px; background:#fff; font-size:13px; font-weight:600; color:#3B3630; display:inline-flex; align-items:center}
.faq details{border-top:1px solid var(--line)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; font-size:16px; line-height:24px; font-weight:600; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px; height:20px; color:var(--muted); flex:none; transition:transform .2s var(--ease-out)}
.faq details p{padding:0 48px 24px 0; font-size:15px; line-height:24px; color:var(--body)}

/* ---------- library / example grids ---------- */
.toggle{display:inline-flex; padding:4px; gap:4px; border:1px solid var(--line); background:var(--sub); border-radius:10px; box-shadow:inset 0 1px 2px rgba(38,28,18,.05)}
.toggle a{display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:7px; font-size:14px; font-weight:600; color:var(--muted)}
.toggle a.on{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}
.toggle a svg{width:16px;height:16px}
.lib{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:48px}
.lcard{background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-xs); transition:box-shadow .2s var(--ease-out), transform .2s var(--ease-out)}
.lcard:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px)}
.lcard-media{aspect-ratio:310/174; border-bottom:1px solid var(--line-soft); position:relative; overflow:hidden}
.lcard-body{padding:14px 16px 16px}
.lcard-body h3{font-size:16px; line-height:24px}
.lcard-body p{font-size:14px; line-height:20px; color:var(--muted)}
.examples{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px}
.ecard{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; aspect-ratio:421/312; position:relative; box-shadow:var(--shadow-sm)}
.filename{color:var(--brand)}
.caret{display:inline-block; width:2px; height:.82em; background:var(--ink); vertical-align:-1px; margin:0 1px}

/* ---------- changelog wall ---------- */
.wall{columns:3; column-gap:24px; margin-top:48px}
.wcard{break-inside:avoid; margin-bottom:24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:20px; box-shadow:var(--shadow-xs)}
.wcard-top{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.ver{height:22px; padding:0 8px; border-radius:6px; background:var(--brand-tint); border:1px solid var(--brand-line); color:var(--brand-ink); font-size:12px; font-weight:600; display:inline-flex; align-items:center; font-variant-numeric:tabular-nums}
.wdate{font-size:13px; color:var(--muted)}
.wcard h3{font-size:16px; line-height:24px; margin-bottom:6px}
.wcard p{font-size:14px; line-height:21px; color:var(--body)}
.wcard-art{margin:14px -4px -4px; border:1px solid var(--line-soft); border-radius:8px; overflow:hidden; background:var(--sub)}

/* ---------- strip ---------- */
.strip{display:flex; align-items:center; justify-content:space-between; gap:48px; padding:64px 0}
.strip h3{font-size:24px; line-height:32px; letter-spacing:-.02em}
.strip p{margin-top:8px; max-width:560px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line); margin-top:96px}
.fcta{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:64px; align-items:center; padding:64px 0}
.fcta h2{margin-top:20px}
.fcta p{margin-top:12px; max-width:520px}
.fcta-actions{display:flex; flex-direction:column; gap:12px; width:280px}
.fcta-actions .btn{width:100%}
.ask{margin-top:28px; display:flex; align-items:center; gap:12px}
.ask span{font-size:14px; color:var(--muted)}
.ask a{width:40px; height:40px; border:1px solid var(--line); border-radius:9px; display:flex; align-items:center; justify-content:center; background:#fff}
.ask svg{width:18px; height:18px; color:var(--muted)}
.fnav{display:grid; grid-template-columns:repeat(5,1fr); gap:36px; padding:56px 0; border-top:1px solid var(--line)}
.fcol h3{font-size:14px; line-height:20px; color:var(--muted); font-weight:600; margin-bottom:16px}
.fcol ul{display:flex; flex-direction:column; gap:12px}
.fcol a{font-size:15px; line-height:22px; color:#3B3630; font-weight:500; display:inline-flex;
  align-items:center; gap:8px; min-height:24px; padding-block:1px}
.fcol a:hover{color:var(--ink)}
.newtag{font-size:12px; font-weight:700; color:var(--brass-ink); letter-spacing:.02em}
.fbottom{border-top:1px solid var(--line); padding:40px 0 0}
.fbottom-row{display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.social{display:flex; gap:8px; margin-left:auto}
.social a{width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--muted)}
.social svg{width:18px; height:18px}
.legal{display:flex; gap:20px; flex-wrap:wrap; margin-top:24px}
.legal a{font-size:14px; color:var(--muted); display:inline-flex; align-items:center; min-height:24px}
.colophon{margin-top:24px; font-size:13px; line-height:20px; color:var(--muted); max-width:980px}
.colophon a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.bigmark{margin-top:32px; overflow:hidden; height:150px}
.bigmark span{display:block; font-size:210px; line-height:1; font-weight:600; letter-spacing:-.05em;
  color:#F1EDE6; white-space:nowrap; user-select:none}

/* ---------- shared page furniture (inner routes) ---------- */
.pagehead{padding:56px 0 0}
.crumbs{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); flex-wrap:wrap; min-height:24px}
.crumbs a{display:inline-flex; align-items:center; min-height:24px}
.crumbs svg{width:14px;height:14px}
.crumbs a:hover{color:var(--ink)}
.crumbs b{color:var(--ink-soft); font-weight:500}
.kicker{display:inline-flex; align-items:center; gap:8px; height:26px; padding:0 10px; border-radius:6px;
  background:var(--brand-tint); border:1px solid var(--brand-line); color:var(--brand-ink);
  font-size:13px; font-weight:600; white-space:nowrap}
.kicker-brass{background:var(--brass-tint); border-color:var(--brass-line); color:var(--brass-ink)}
.divider{height:1px; background:var(--line); margin:0}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:14px; font-weight:600; color:var(--ink-soft)}
.field .hint{font-size:13px; color:var(--muted)}
.input{
  height:44px; border:1px solid var(--line); border-radius:8px; background:#fff; padding:0 12px;
  font-size:15px; color:var(--ink); display:flex; align-items:center; gap:8px; box-shadow:var(--shadow-xs);
}
.input .ph{color:var(--muted)}
.input svg{width:18px;height:18px;color:var(--muted); flex:none}
.input-focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(20,82,71,.12)}

/* ---------- utilities ---------- */
.only-mobile{display:none}
.mt8{margin-top:8px} .mt12{margin-top:12px} .mt16{margin-top:16px} .mt20{margin-top:20px}
.mt24{margin-top:24px} .mt32{margin-top:32px} .mt40{margin-top:40px} .mt48{margin-top:48px}
.mt56{margin-top:56px} .mt64{margin-top:64px}
.row{display:flex; align-items:center; gap:12px}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.col{display:flex; flex-direction:column}
.gap8{gap:8px} .gap12{gap:12px} .gap16{gap:16px} .gap24{gap:24px}

/* ---------- mobile ---------- */
@media (max-width:1023px){
  :root{--gutter:20px}
  .h-display{font-size:36px; line-height:45px}
  .h-section{font-size:24px; line-height:33.6px}
  .only-mobile{display:block}
  .btn.only-mobile{display:inline-flex}
  .only-desktop{display:none !important}

  .header-inner{height:64px; gap:0}
  .nav,.header-actions{display:none}
  .burger{display:flex; margin-left:auto}
  .header{background:#fff; border-bottom:1px solid var(--line-soft)}

  .hero{height:auto}
  .hero-art{position:relative; inset:auto; height:auto; background:none}
  .hero-panel{position:relative; width:100%; height:auto; padding:96px 20px 40px; z-index:1}
  .hero-panel::after{display:none}
  .hero-sub{max-width:none}
  .hero-cta{flex-direction:column; margin-top:28px}
  .hero-cta .btn{width:100%; height:48px; font-size:16px}
  .scroll-cue{display:none}
  .hero-fade{display:none}
  .collage{display:none}
  .collage-m{
    columns:3; column-gap:6px; margin-top:8px;
    padding:10px 8px 4px; border-top:1px solid var(--line-soft);
    background:radial-gradient(120% 80% at 50% 0%, #FBF8F3 0%, #F2EDE4 100%);
  }
  .collage-m .art{break-inside:avoid; margin-bottom:6px; border-radius:5px; box-shadow:var(--shadow-sm)}
  .collage-m .art-bar{height:12px}

  .band{margin:0; border-radius:0; border-inline:0}
  .band-inner{padding:64px 0}
  .stats{grid-template-columns:1fr; gap:40px; margin-top:48px}
  .cards-3{grid-template-columns:1fr}
  .cards-2{grid-template-columns:1fr}
  .specs{grid-template-columns:repeat(2,1fr)}
  .lib{grid-template-columns:repeat(2,1fr); gap:16px}
  .examples{grid-template-columns:1fr}
  .wall{columns:1}
  .compat-grid{gap:20px 24px}
  .fmt span{font-size:15px}

  .tiers{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:305px;
    gap:16px; overflow-x:auto; margin-inline:-20px; padding:0 20px 4px; scroll-snap-type:x mandatory;
  }
  .tier{scroll-snap-align:start}
  .note{padding:64px 0}
  .note h3{font-size:24px; line-height:33.6px}
  .note-nav{display:none}
  .pblock-visual{margin-top:32px}
  .btn-row{flex-direction:column; align-items:stretch}
  .btn-row .btn{width:100%; height:48px; font-size:16px}
  .strip{flex-direction:column; align-items:flex-start; gap:24px; padding:48px 0}
  .fcta{grid-template-columns:1fr; gap:32px; padding:48px 0}
  .fcta-actions{width:100%}
  .fnav{grid-template-columns:1fr; gap:0; padding:8px 0 24px}
  .fcol h3{display:none}
  .bigmark{height:64px}
  .bigmark span{font-size:92px}
  .footer{margin-top:64px}
  .pagehead{padding:32px 0 0}

  .fcard-art{margin-right:-20px}
  .chipstack .chip{width:34px;height:34px;font-size:9px;margin-left:-8px}
  .m-acc summary{list-style:none; display:flex; align-items:center; justify-content:space-between; padding:18px 0; font-size:16px; font-weight:600; color:var(--ink); cursor:pointer}
  .m-acc summary::-webkit-details-marker{display:none}
  .m-acc summary svg{width:20px; height:20px; color:var(--muted)}
  .m-flat{display:flex; align-items:center; justify-content:space-between; padding:18px 0; font-size:16px; font-weight:600; color:var(--ink)}
  .m-acc ul{padding:0 0 16px; display:flex; flex-direction:column; gap:14px}
  .m-acc ul a{font-size:15px; color:var(--body); font-weight:500; display:inline-flex;
    align-items:center; min-height:24px}
}

:where(a,button,summary,details>summary,[tabindex]):focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-radius:6px;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

/* ==================== catalogue ==================== */
.cat-layout{display:grid; grid-template-columns:260px minmax(0,1fr); gap:48px; margin-top:40px}
.filters{position:sticky; top:24px; align-self:start; display:flex; flex-direction:column; gap:28px}
.fgroup h3{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.fopt{display:flex; align-items:center; gap:10px; padding:6px 0; font-size:15px; color:#3B3630; cursor:pointer}
.fbox{width:18px; height:18px; border-radius:5px; border:1px solid var(--line); background:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-xs)}
.fbox svg{width:12px;height:12px;color:#fff}
.fopt.on .fbox{background:var(--brand); border-color:var(--brand)}
.fopt .ct{margin-left:auto; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.cat-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid var(--line)}
.cat-bar .count{font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums}
.select{height:38px; border:1px solid var(--line); border-radius:8px; background:#fff; padding:0 12px;
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:#3B3630; box-shadow:var(--shadow-xs)}
.select svg{width:15px;height:15px;color:var(--muted)}
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:24px}
.chiprow{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-inline:-20px; padding-inline:20px}
.chip-f{height:36px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:#fff;
  font-size:14px; font-weight:600; color:#3B3630; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; flex:none}
.chip-f.on{background:var(--brand); color:#fff; border-color:var(--brand)}
.chip-f svg{width:14px;height:14px}
.feature-row{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px}
.fsys{border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; transition:box-shadow .2s var(--ease-out), transform .2s var(--ease-out)}
.fsys:hover{box-shadow:var(--shadow-xl); transform:translateY(-3px)}
.fsys-media{position:relative; aspect-ratio:421/280; overflow:hidden; border-bottom:1px solid var(--line-soft)}
.fsys-body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1}
.fsys-foot{padding:0 22px 22px; display:flex; align-items:center; gap:10px}
.badge-tag{height:24px; padding:0 9px; border-radius:6px; font-size:12px; font-weight:700; letter-spacing:.02em;
  color:#fff; display:inline-flex; align-items:center}
/* solid, not gradient: white-on-brass at the gradient's light end is only 3.1:1 */

/* ==================== product detail ==================== */
.pdp{display:grid; grid-template-columns:minmax(0,1fr) 396px; gap:48px; margin-top:32px; align-items:start}
.gallery-main{border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--band); padding:24px;
  box-shadow:var(--shadow-sm)}
.thumbs{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:16px}
.thumb{border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; aspect-ratio:16/10; position:relative}
.thumb.on{border-color:var(--brand); box-shadow:0 0 0 2px rgba(20,82,71,.18)}
.buybox{position:sticky; top:24px; border:1px solid var(--line); border-radius:var(--r-card); background:#fff;
  padding:26px; box-shadow:var(--shadow-lg)}
.licence-opt{display:flex; gap:12px; padding:14px; border:1px solid var(--line); border-radius:10px; cursor:pointer;
  transition:border-color .16s var(--ease-out), background .16s var(--ease-out)}
.licence-opt+.licence-opt{margin-top:10px}
.licence-opt.on{border-color:var(--brand); background:var(--brand-tint)}
.radio{width:18px;height:18px;border-radius:999px;border:1.5px solid var(--line);flex:none;margin-top:2px;background:#fff}
.licence-opt.on .radio{border-color:var(--brand); border-width:5px}
.licence-opt .lp{margin-left:auto; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.manifest{width:100%; border-collapse:collapse; margin-top:24px}
.manifest th{text-align:left; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); padding:0 0 12px; border-bottom:1px solid var(--line)}
.manifest td{padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:15px; color:#3B3630; vertical-align:top}
.manifest td:last-child{text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.manifest .fname{display:flex; align-items:center; gap:10px; font-weight:500; color:var(--ink)}
.manifest .fname span{width:9px;height:9px;border-radius:2px;flex:none}
.spectable{display:grid; grid-template-columns:repeat(2,1fr); gap:0 48px; margin-top:8px}
.specrow{display:flex; justify-content:space-between; gap:24px; padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:15px}
.specrow b{color:var(--ink); font-weight:500}
.specrow span{color:var(--muted); text-align:right}

/* ==================== VSL ==================== */
.vsl-hero{background:var(--ink); position:relative; overflow:hidden}
.vsl-hero::before{content:""; position:absolute; inset:0; background-image:url("grain.svg"); background-size:180px 180px;
  opacity:.4; mix-blend-mode:screen; pointer-events:none}
.vsl-hero .container{position:relative; padding-top:72px; padding-bottom:88px}
.vsl-eyebrow{display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#EDE7DC; font-size:14px; font-weight:600}
.vsl-eyebrow .dot{width:7px;height:7px;border-radius:999px;background:var(--brass)}
.vsl-hero h1{color:#fff; margin-top:24px; max-width:900px}
.vsl-hero .lead{color:#B8B0A6; margin-top:20px; max-width:640px}
.vsl-meta{display:flex; gap:28px; flex-wrap:wrap; margin-top:28px; color:#9A938A; font-size:14px}
.vsl-meta b{color:#EDE7DC; font-weight:600}
.ctabar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:32px}
.ctabar .note{font-size:14px; color:var(--muted)}
.vsl-sec{padding:88px 0}
.vsl-sec-tint{background:var(--band); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.beforeafter{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px}
.ba{border:1px solid var(--line); border-radius:var(--r-card); padding:26px; background:#fff}
.ba.bad{background:var(--band)}
.ba h3{display:flex; align-items:center; gap:10px}
.ba h3 .g{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.ba ul{margin-top:18px; display:flex; flex-direction:column; gap:12px}
.ba li{display:flex; gap:10px; font-size:15px; line-height:23px; color:#3B3630}
.ba li svg{width:17px;height:17px;flex:none;margin-top:3px}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; counter-reset:s}
.step{position:relative; padding-top:22px; border-top:2px solid var(--line)}
.step.on{border-top-color:var(--brand)}
.step .sn{font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--brand-ink); text-transform:uppercase}
.step h3{margin-top:10px}
.step p{margin-top:8px}
.step-art{margin-top:20px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm)}
.contents-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:40px}
.cbox{border:1px solid var(--line); border-radius:var(--r-card); background:#fff; overflow:hidden; box-shadow:var(--shadow-xs)}
.cbox-h{display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line-soft); background:var(--band)}
.cbox-h .g{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.cbox-h .g svg{width:18px;height:18px;color:#fff}
.cbox ul{padding:16px 20px 20px; display:flex; flex-direction:column; gap:10px}
.cbox li{display:flex; gap:10px; font-size:15px; color:#3B3630; line-height:22px}
.cbox li svg{width:16px;height:16px;color:var(--brand);flex:none;margin-top:3px}
.cbox li b{margin-left:auto; color:var(--muted); font-weight:500; font-variant-numeric:tabular-nums}
.proof{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px}
.pbox{border:1px solid var(--line); border-radius:var(--r-card); background:#fff; padding:24px; box-shadow:var(--shadow-xs)}
.pbox .g{width:38px;height:38px;border-radius:10px;background:var(--brand-tint);border:1px solid var(--brand-line);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.pbox .g svg{width:19px;height:19px;color:var(--brand-ink)}
.pbox h3{margin-bottom:8px}
.stack{border:1px solid var(--line); border-radius:var(--r-card); background:#fff; overflow:hidden; box-shadow:var(--shadow-lg); margin-top:40px}
.stack-row{display:grid; grid-template-columns:64px minmax(0,1fr) 120px; gap:20px; align-items:center;
  padding:20px 24px; border-bottom:1px solid var(--line-soft)}
.stack-row .th{width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line-soft);position:relative;background:var(--sub)}
.stack-row .val{text-align:right; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.stack-row .val s{color:var(--muted); font-weight:400}
.stack-total{display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:20px; padding:24px; background:var(--brand-tint)}
.stack-total .val{text-align:right}
.risk{display:grid; grid-template-columns:80px minmax(0,1fr); gap:24px; align-items:start; margin-top:40px;
  border:1px solid var(--brand-line); background:var(--brand-tint); border-radius:var(--r-card); padding:28px}
.risk .seal2{width:80px;height:80px;border-radius:999px;background:#fff;border:1px solid var(--brand-line);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.risk .seal2 svg{width:36px;height:36px;color:var(--brand)}
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px}
.fstep{border:1px solid var(--line); border-radius:12px; background:#fff; padding:18px; position:relative; box-shadow:var(--shadow-xs)}
.fstep .n{width:26px;height:26px;border-radius:999px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-variant-numeric:tabular-nums}
.fstep h3{font-size:16px;line-height:24px}
.fstep p{font-size:14px;line-height:20px;color:var(--muted);margin-top:4px}

/* ==================== checkout ==================== */
.co{display:grid; grid-template-columns:minmax(0,1fr) 480px; gap:56px; margin-top:32px; align-items:start}
.co-panel{border:1px solid var(--line); border-radius:var(--r-card); background:#fff; box-shadow:var(--shadow-lg); overflow:hidden}
.co-frame-top{display:flex; align-items:center; gap:10px; padding:12px 18px; background:var(--band); border-bottom:1px solid var(--line-soft); flex-wrap:wrap}
.co-frame-top .small{white-space:nowrap}
.co-frame-top .lockpill{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:6px;white-space:nowrap;
  background:#fff;border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--brand-ink)}
.co-frame-top .lockpill svg{width:13px;height:13px}
.co-body{padding:26px}
.co-body .field+.field{margin-top:18px}
.pay-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px}
.pay-tab{height:46px; border:1px solid var(--line); border-radius:9px; background:#fff; display:flex; align-items:center;
  justify-content:center; gap:8px; font-size:14px; font-weight:600; color:#3B3630; box-shadow:var(--shadow-xs)}
.pay-tab.on{border-color:var(--brand); background:var(--brand-tint); color:var(--brand-ink)}
.pay-tab svg{width:16px;height:16px}
.summary{border:1px solid var(--line); border-radius:var(--r-card); background:#fff; overflow:hidden; box-shadow:var(--shadow-sm)}
.sum-item{display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:16px; padding:20px; border-bottom:1px solid var(--line-soft); align-items:center}
.sum-item .th{width:76px;height:76px;border-radius:10px;overflow:hidden;border:1px solid var(--line-soft);position:relative;background:var(--sub)}
.sum-line{display:flex; justify-content:space-between; padding:10px 20px; font-size:15px; color:#3B3630}
.sum-line.total{padding:18px 20px; border-top:1px solid var(--line); font-size:18px; font-weight:600; color:var(--ink)}
.sum-line .num{font-variant-numeric:tabular-nums}
.trustrow{display:flex; gap:20px; flex-wrap:wrap; margin-top:20px}
.trustrow div{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted)}
.trustrow svg{width:16px;height:16px;color:var(--brand)}

/* ==================== confirmation ==================== */
.conf-hero{text-align:center; padding:72px 0 0}
.conf-tick{width:76px;height:76px;border-radius:999px;background:var(--brand);display:flex;align-items:center;
  justify-content:center;margin:0 auto 28px;box-shadow:0 12px 28px -8px rgba(20,82,71,.5), inset 0 1px 0 rgba(255,255,255,.2)}
.conf-tick svg{width:36px;height:36px;color:#fff}
.orderbox{border:1px solid var(--line); border-radius:var(--r-card); background:#fff; box-shadow:var(--shadow-sm); margin-top:48px; overflow:hidden}
.orderbox-h{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px;
  background:var(--band); border-bottom:1px solid var(--line-soft); flex-wrap:wrap}
.dl-row{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:18px; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line-soft)}
.dl-row .th{width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line-soft);position:relative;background:var(--sub)}
.keybox{display:flex; align-items:center; gap:12px; margin-top:10px; padding:12px 14px; border:1px dashed var(--line);
  border-radius:9px; background:var(--band); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; color:var(--ink)}
.keybox .cp{margin-left:auto; color:var(--brand-ink); font-weight:600; font-size:13px; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px}
.nextgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px}

/* ==================== library ==================== */
.lib-layout{display:grid; grid-template-columns:236px minmax(0,1fr); gap:48px; margin-top:36px; align-items:start}
.libnav{position:sticky; top:24px; display:flex; flex-direction:column; gap:2px}
.libnav a{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:8px; font-size:15px; font-weight:500; color:#3B3630}
.libnav a svg{width:17px;height:17px;color:var(--muted)}
.libnav a:hover{background:var(--sub)}
.libnav a.on{background:var(--brand-tint); color:var(--brand-ink); font-weight:600}
.libnav a.on svg{color:var(--brand)}
.libnav .cnt{margin-left:auto; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.owned{border:1px solid var(--line); border-radius:var(--r-card); background:#fff; overflow:hidden; box-shadow:var(--shadow-xs)}
.owned+.owned{margin-top:20px}
.owned-h{display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:20px; padding:22px; align-items:center}
.owned-h .th{width:96px;height:96px;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);position:relative;background:var(--sub)}
.owned-files{border-top:1px solid var(--line-soft); background:var(--band)}
.filerow{display:flex; align-items:center; gap:14px; padding:13px 22px; border-bottom:1px solid var(--line-soft); font-size:14px}
.filerow:last-child{border-bottom:0}
.filerow .fi{width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;flex:none}
.filerow .fi svg{width:15px;height:15px;color:var(--muted)}
.filerow .sz{margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums}
.filerow .dl{color:var(--brand-ink); font-weight:600; display:inline-flex; align-items:center; gap:6px}
.filerow .dl svg{width:15px;height:15px}
.statuspill{height:24px; padding:0 9px; border-radius:6px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px}
.statuspill.ok{background:var(--brand-tint); color:var(--brand-ink); border:1px solid var(--brand-line)}
.statuspill.new{background:var(--brass-tint); color:var(--brass-ink); border:1px solid var(--brass-line)}
.datatable{width:100%; border-collapse:collapse; margin-top:20px}
.datatable th{text-align:left; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); padding:0 16px 12px 0; border-bottom:1px solid var(--line)}
.datatable td{padding:16px 16px 16px 0; border-bottom:1px solid var(--line-soft); font-size:15px; color:#3B3630}
.datatable td:last-child,.datatable th:last-child{text-align:right; padding-right:0}
.emptyish{border:1px dashed var(--line); border-radius:var(--r-card); padding:40px; text-align:center; background:var(--band)}

/* ==================== mobile for new surfaces ==================== */
@media (max-width:1023px){
  .cat-layout{grid-template-columns:1fr; gap:24px}
  .filters{display:none}
  .cat-grid{grid-template-columns:1fr}
  .feature-row{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr; gap:32px}
  .buybox{position:relative; top:auto; padding:22px}
  .thumbs{grid-template-columns:repeat(4,1fr); gap:8px}
  .gallery-main{padding:12px}
  .spectable{grid-template-columns:1fr; gap:0}
  .vsl-hero .container{padding-top:40px; padding-bottom:56px}
  .vsl-sec{padding:56px 0}
  .beforeafter{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; gap:32px}
  .contents-grid{grid-template-columns:1fr}
  .proof{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .stack-row{grid-template-columns:52px minmax(0,1fr); grid-template-areas:"th body" "val val"; gap:14px}
  .stack-row .th{width:52px;height:52px;grid-area:th}
  .stack-row .val{grid-area:val; text-align:left}
  .risk{grid-template-columns:1fr; gap:18px}
  .co{grid-template-columns:1fr; gap:28px}
  .co-order-first{order:-1}
  .nextgrid{grid-template-columns:1fr}
  .lib-layout{grid-template-columns:1fr; gap:20px}
  .libnav{position:relative; top:auto; flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:6px;
    margin-inline:-20px; padding-inline:20px}
  .libnav a{white-space:nowrap; border:1px solid var(--line); background:#fff}
  .libnav .cnt{display:none}
  .owned-h{grid-template-columns:64px minmax(0,1fr); gap:14px}
  .owned-h .th{width:64px;height:64px}
  .owned-h .oa{grid-column:1/-1}
  .datatable th:nth-child(3),.datatable td:nth-child(3){display:none}
  .conf-hero{padding:40px 0 0}
  .dl-row{grid-template-columns:48px minmax(0,1fr); gap:14px}
  .dl-row .th{width:48px;height:48px}
  .dl-row .da{grid-column:1/-1}
  .sum-item{grid-template-columns:60px minmax(0,1fr); gap:14px}
  .sum-item .th{width:60px;height:60px}
}

/* overflow guards for scrollable rows inside grid/flex parents */
.cat-layout>*{min-width:0}
.chiprow{min-width:0; flex:1 1 100%; max-width:100%}
.libnav{min-width:0; max-width:100%}
.tiers{min-width:0}

/* keep the mobile/desktop switches winning over later component rules */
.only-mobile{display:none}
@media (max-width:1023px){
  .only-mobile{display:block}
  .chiprow.only-mobile{display:flex}
  .btn.only-mobile{display:inline-flex}
}
@media (max-width:1023px){ .closer-grid{grid-template-columns:1fr !important; gap:32px !important} }
.steps>*,.contents-grid>*,.proof>*,.beforeafter>*,.flow>*,.feature-row>*,.cat-grid>*,
.cards-2>*,.cards-3>*,.lib>*,.examples>*,.stats>*,.specs>*,.pdp>*,.co>*,.lib-layout>*{min-width:0}

/* inline icons inside running text stay on the baseline */
p>svg,.h-label>svg,.h-card>svg,label>svg{display:inline-block; vertical-align:-4px; margin-right:5px}

@media (max-width:1023px){
  .filerow{flex-wrap:wrap; row-gap:8px; padding:14px 16px}
  .filerow>div{flex:1 1 auto; min-width:0; overflow-wrap:anywhere}
  .filerow .sz{margin-left:0; order:3}
  .filerow .dl{order:4; margin-left:auto}
}
.select{white-space:nowrap}
@media (max-width:1023px){ .owned-h{align-items:start} .owned-h .th{margin-top:4px} }