/* ============================================================
   HiveStock marketing site — shared stylesheet
   Design tokens pulled from the HiveStock admin/kiosk UI theme
   (charcoal / hive-yellow / Barlow) so product and site match.
   Static, mobile-first, no build step.
   ============================================================ */

/* ---- Barlow (self-hosted, matches the product UI) ---- */
@font-face { font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/Barlow-500.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/Barlow-600.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/Barlow-700.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/Barlow-800.woff2') format('woff2'); }

:root {
  --bg:        #121417;   /* charcoal base                     */
  --surface:   #1c1f24;   /* raised panels                     */
  --surface-2: #23272e;   /* second raise / chips              */
  --border:    #2a2e35;
  --text:      #f2f4f7;
  --text-dim:  #9aa3ae;
  --accent:    #f2b705;   /* brand yellow (logo pack)          */
  --accent-2:  #f5c537;   /* hover: brand yellow, 20% lighter  */
  --accent-ink:#14161a;   /* text on accent                    */
  --warn:      #ff8a00;
  --danger:    #ff4d4f;
  --success:   #2ecc71;   /* net-gain green                    */
  --success-2: #47e08a;
  --radius:    8px;
  --radius-lg: 14px;
  --font:      'Barlow','Segoe UI',system-ui,-apple-system,sans-serif;
  --maxw:      1140px;
  --shadow:    0 18px 50px -20px rgba(0,0,0,0.7);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg { max-width:100%; display:block; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-2); }

h1,h2,h3,h4 { margin:0 0 .5em; font-weight:800; line-height:1.08; letter-spacing:-0.01em; }
h1 { font-size:clamp(2.1rem,5.2vw,3.6rem); }
h2 { font-size:clamp(1.7rem,3.6vw,2.6rem); }
h3 { font-size:clamp(1.2rem,2.2vw,1.5rem); }
p  { margin:0 0 1rem; }
.lead { font-size:clamp(1.1rem,1.9vw,1.35rem); color:var(--text-dim); }
strong { color:var(--text); font-weight:700; }
.accent { color:var(--accent); }
.green  { color:var(--success); }

/* ---- Layout helpers ---- */
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,32px); }
section { padding:clamp(48px,7vw,88px) 0; }
.section-sm { padding:clamp(32px,4vw,52px) 0; }
.center { text-align:center; }
.eyebrow {
  display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
.muted { color:var(--text-dim); }
.tight { max-width:720px; }
.tight.center { margin-left:auto; margin-right:auto; }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  font-family:inherit; font-weight:800; font-size:1.02rem; line-height:1;
  border-radius:var(--radius); border:1px solid var(--border);
  padding:15px 26px; cursor:pointer; transition:transform .06s, background .12s, border-color .12s;
  color:var(--text); background:var(--surface-2); text-align:center;
}
.btn:hover { border-color:var(--text-dim); color:var(--text); }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-2); color:var(--accent-ink); border-color:var(--accent-2); }
.btn-ghost { background:transparent; }
.btn-lg { padding:18px 34px; font-size:1.12rem; }
.btn-row { display:flex; flex-wrap:wrap; gap:14px; }
.btn-row.center { justify-content:center; }

/* ---- Header / nav ---- */
.site-header {
  position:sticky; top:0; z-index:40; background:rgba(18,20,23,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.nav { display:flex; align-items:center; justify-content:space-between; height:66px; gap:20px; }
/* Logo: the official pack SVGs (assets/img/logo/), used as-is — never re-typed,
   recoloured or rebuilt. The files carry their own clear-space padding. Header
   uses the no-tagline lockup (the tagline is unreadable at header height). */
.brand { display:flex; align-items:center; flex:none; }
.brand .brand-logo { display:block; height:44px; width:auto; }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a {
  color:var(--text); font-weight:600; font-size:.98rem; padding:9px 13px; border-radius:var(--radius);
}
.nav-links a:hover { background:var(--surface-2); color:var(--text); }
.nav-links a.active { color:var(--accent); }
.nav-links a.nav-cta { background:var(--accent); color:var(--accent-ink); margin-left:8px; }
.nav-links a.nav-cta:hover { background:var(--accent-2); color:var(--accent-ink); }
.nav-toggle {
  display:none; background:transparent; border:1px solid var(--border); border-radius:var(--radius);
  width:44px; height:44px; cursor:pointer; color:var(--text); padding:0;
}
.nav-toggle svg { width:22px; height:22px; margin:auto; stroke:var(--text); }

@media (max-width:900px) {
  .nav-toggle { display:flex; }
  .nav-links {
    position:absolute; top:66px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--bg); border-bottom:1px solid var(--border); padding:12px clamp(18px,4vw,32px) 20px;
    display:none;
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:13px; font-size:1.05rem; }
  .nav-links a.nav-cta { margin-left:0; margin-top:6px; text-align:center; }
}

/* ---- Hero ---- */
.hero { position:relative; overflow:hidden; padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,88px); }
.hero::before {
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 480px at 78% -10%, rgba(242,183,5,.14), transparent 60%),
    radial-gradient(700px 460px at 5% 110%, rgba(242,183,5,.06), transparent 55%);
  pointer-events:none;
}
.hero .wrap { position:relative; z-index:1; }
.hero h1 { max-width:16ch; }
.hero .lead { max-width:56ch; }

/* ---- The money callout (worked example) ---- */
.money {
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:var(--radius-lg); padding:22px 24px; margin:26px 0; font-size:1.08rem;
}
.money strong { color:var(--accent); }
.money .net { color:var(--success); font-weight:700; }
.money-title {
  display:block; font-weight:800; font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:10px;
}

/* ---- Grids & cards ---- */
.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:860px){ .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px; display:flex; flex-direction:column; gap:8px;
}
.card h3 { margin-bottom:2px; }
.card p { color:var(--text-dim); margin:0; font-size:1rem; }
.card .ico {
  width:44px; height:44px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.card .ico svg { width:24px; height:24px; stroke:var(--accent); fill:none; }
.card.link-card { transition:border-color .12s, transform .12s; }
.card.link-card:hover { border-color:var(--accent); transform:translateY(-2px); }

/* Split product path (home) */
.split { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:820px){ .split { grid-template-columns:1fr; } }
.path {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px;
  display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden;
}
.path::after {
  content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent);
}
.path.trackit::after { background:#5aa9ff; }
.path h3 { font-size:1.5rem; margin:0; }
.path .kicker { font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.path ul { margin:6px 0 8px; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.path ul li { position:relative; padding-left:26px; color:var(--text-dim); }
.path ul li::before {
  content:""; position:absolute; left:0; top:.55em; width:12px; height:12px;
  background:var(--accent); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.path.trackit ul li::before { background:#5aa9ff; }

/* ---- Stat strip ---- */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:center; }
@media (max-width:620px){ .stats { grid-template-columns:1fr; } }
.stat .num { font-size:clamp(2.2rem,5vw,3.2rem); font-weight:800; color:var(--accent); line-height:1; }
.stat .num.green { color:var(--success); }
.stat .lbl { color:var(--text-dim); margin-top:8px; }

/* ---- Feature list with hex bullets ---- */
.checks { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.checks li { position:relative; padding-left:34px; color:var(--text-dim); }
.checks li strong { color:var(--text); }
.checks li::before {
  content:""; position:absolute; left:0; top:.15em; width:20px; height:20px;
  background:var(--accent); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* ---- Placeholder media blocks (NO real cabinet photos — IP pending) ---- */
.ph {
  border:2px dashed var(--border); border-radius:var(--radius-lg); background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 12px, transparent 12px 24px), var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:var(--text-dim); text-align:center; padding:28px; min-height:240px;
}
.ph .ph-hex { width:40px; height:40px; fill:var(--border); }
.ph .ph-label { font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.82rem; }
.ph .ph-sub { font-size:.85rem; color:var(--text-dim); opacity:.8; }
.ph.tall { min-height:380px; }
.ph.wide { min-height:300px; }

/* ---- Real screenshot frame (admin UI) ---- */
.shot {
  margin:0; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface); overflow:hidden; box-shadow:var(--shadow);
}
.shot img { width:100%; height:auto; display:block; }
.shot figcaption {
  padding:14px 20px; color:var(--text-dim); font-size:.92rem;
  border-top:1px solid var(--border); text-align:center;
}

/* ---- Product shot on a lit plinth ----
   The real cabinet cutouts are transparent PNG/WebP and the cabinet is
   near-black, so it would disappear straight onto the charcoal page. The
   plinth is a raised panel with a soft central spotlight (separates the
   silhouette) and the image carries a drop-shadow (grounds it as an object). */
.product {
  position:relative; margin:0;
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:
    radial-gradient(115% 82% at 50% 28%, rgba(242,183,5,.07) 0%, rgba(255,255,255,.05) 26%, transparent 62%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 62%, #16191d 100%);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(24px,4vw,40px); overflow:hidden; min-height:380px;
}
.product img {
  width:auto; max-width:100%; max-height:520px;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.5));
}
/* single portrait cabinet: keep the plinth centred so it doesn't strand
   the object in a full-width panel */
.product.wide { max-width:600px; margin-inline:auto; min-height:460px; }
.product.wide img { max-height:470px; }

/* ---- Steps (how it works) ---- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step; }
@media (max-width:860px){ .steps { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps { grid-template-columns:1fr; } }
.step {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 24px; position:relative;
}
.step .n {
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:1.2rem;
  border-radius:10px; margin-bottom:14px;
}
.step h3 { font-size:1.2rem; margin-bottom:6px; }
.step p { color:var(--text-dim); margin:0; font-size:1rem; }

/* ---- Pricing ---- */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
@media (max-width:900px){ .price-grid { grid-template-columns:1fr; } }
.price-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:30px 26px; display:flex; flex-direction:column; gap:6px; position:relative;
}
.price-card.hero-price { border-color:var(--accent); box-shadow:var(--shadow); }
.price-card .flag {
  position:absolute; top:-13px; left:26px; background:var(--accent); color:var(--accent-ink);
  font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 12px; border-radius:6px;
}
.price-card .pname { font-weight:800; font-size:1.15rem; }
.price-card .psub { color:var(--text-dim); font-size:.95rem; }
.price-card .amount { font-size:2.6rem; font-weight:800; color:var(--accent); line-height:1; margin:8px 0 2px; }
.price-card .amount small { font-size:1rem; font-weight:700; color:var(--text-dim); }
.price-card .pthereafter { color:var(--text); font-weight:700; font-size:.92rem; margin:2px 0 0; }
.price-card .pthereafter strong { color:var(--accent); }
.price-card ul { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px; }
.price-card ul li { position:relative; padding-left:26px; color:var(--text-dim); font-size:.98rem; }
.price-card ul li::before {
  content:""; position:absolute; left:0; top:.35em; width:14px; height:14px;
  background:var(--accent); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

.price-band {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 28px; margin-top:22px;
}
.terms-note { font-size:.9rem; color:var(--text-dim); }
.terms-note strong { color:var(--text); }

table.tbl { width:100%; border-collapse:collapse; font-size:1rem; }
table.tbl th, table.tbl td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--border); }
table.tbl th { color:var(--text-dim); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; }
table.tbl td.price { color:var(--accent); font-weight:800; white-space:nowrap; }
table.tbl tr:last-child td { border-bottom:none; }
.tbl-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }

/* ---- Calculator ---- */
.calc {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(24px,4vw,40px); box-shadow:var(--shadow);
}
.calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
@media (max-width:760px){ .calc-grid { grid-template-columns:1fr; } }
.calc label { display:block; font-weight:700; margin-bottom:10px; font-size:1.05rem; }
.calc .input-money { position:relative; }
.calc .input-money .sym {
  position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight:800; color:var(--text-dim);
}
.calc input[type=number] {
  width:100%; font-family:inherit; font-weight:800; font-size:1.6rem; color:var(--text);
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 16px 16px 40px; -moz-appearance:textfield;
}
.calc input[type=number]:focus { outline:none; border-color:var(--accent); }
.calc input::-webkit-outer-spin-button, .calc input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.calc .slider { width:100%; margin-top:18px; accent-color:var(--accent); }
.calc .presets { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.calc .presets button {
  font-family:inherit; font-weight:700; font-size:.9rem; color:var(--text); background:var(--surface-2);
  border:1px solid var(--border); border-radius:6px; padding:8px 12px; cursor:pointer;
}
.calc .presets button:hover { border-color:var(--accent); }
.calc .tier-note { margin-top:16px; font-size:.9rem; color:var(--text-dim); }

.calc-out { display:grid; gap:14px; }
.calc-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.calc-row .k { color:var(--text-dim); font-size:1rem; }
.calc-row .v { font-weight:800; font-size:1.35rem; white-space:nowrap; }
.calc-row.saving .v { color:var(--accent); }
.calc-row.cost .v { color:var(--text); }
.net-box {
  background:linear-gradient(180deg, rgba(46,204,113,.12), rgba(46,204,113,.04));
  border:1px solid rgba(46,204,113,.4); border-radius:var(--radius-lg); padding:22px; text-align:center; margin-top:6px;
}
.net-box .k { color:var(--success-2); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.82rem; }
.net-box .net-num { font-size:clamp(2.6rem,7vw,4rem); font-weight:800; color:var(--success); line-height:1.05; }
.net-box .k2 { color:var(--text-dim); font-size:.9rem; }

/* ---- CTA band ---- */
.cta-band { background:linear-gradient(180deg, var(--surface), var(--bg)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cta-band h2 { max-width:20ch; }
.cta-inner { display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; }

/* ---- Hive brand passage ---- */
.brand-passage { max-width:760px; margin:0 auto; text-align:center; }
.brand-passage .hex-lg { display:block; width:56px; height:56px; margin:0 auto 18px; }
.brand-passage .passage { font-size:clamp(1.25rem,2.6vw,1.7rem); font-weight:700; color:var(--text); line-height:1.32; margin:0 0 .6em; }
.brand-passage .passage-close { font-size:clamp(1.05rem,2vw,1.3rem); font-weight:800; color:var(--accent); margin:0; }

/* ---- Pre-footer motto strip (site-wide) ---- */
.prefooter { border-top:1px solid var(--border); background:var(--surface); }
.prefooter .wrap { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding-top:20px; padding-bottom:20px; text-align:center; }
.prefooter .hex-mini { width:22px; height:22px; flex:none; }
.prefooter .motto { color:var(--text-dim); font-weight:600; letter-spacing:.02em; }
.prefooter .motto strong { color:var(--accent); font-weight:800; }

/* ---- Sector line (replaces the former named-customer logo row) ---- */
.sector-line {
  margin:0; color:var(--text-dim); font-weight:700; letter-spacing:.02em;
  font-size:1.05rem; text-align:center;
}

/* ---- Forms ---- */
.form { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(24px,4vw,36px); }
.form .field { margin-bottom:18px; }
.form label { display:block; font-weight:700; margin-bottom:7px; font-size:.98rem; }
.form input, .form select, .form textarea {
  width:100%; font-family:inherit; font-size:1rem; color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius); padding:13px 14px; min-height:48px;
}
.form textarea { min-height:130px; resize:vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:var(--accent); }
.form .field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form .field-row { grid-template-columns:1fr; } }
.form-note { font-size:.85rem; color:var(--text-dim); margin-top:6px; }

/* ---- Footer ---- */
.site-footer { border-top:1px solid var(--border); background:var(--bg); padding:56px 0 40px; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
@media (max-width:780px){ .footer-grid { grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:460px){ .footer-grid { grid-template-columns:1fr; } }
.footer-grid h4 { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:14px; }
.footer-grid a { display:block; color:var(--text); font-weight:600; padding:5px 0; font-size:.96rem; }
.footer-grid a:hover { color:var(--accent); }
.footer-brand .brand { margin-bottom:12px; }
.footer-brand .brand .brand-logo { height:66px; }
.footer-brand p { color:var(--text-dim); font-size:.92rem; max-width:34ch; }
.footer-bottom {
  margin-top:40px; padding-top:22px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center;
  color:var(--text-dim); font-size:.85rem;
}
/* Company registration line + legal links, under the footer bottom row */
.footer-legal { margin-top:18px; color:var(--text-dim); font-size:.8rem; line-height:1.6; }
.footer-legal p { margin:0 0 6px; }
.footer-legal a { color:var(--text-dim); text-decoration:underline; text-underline-offset:2px; }
.footer-legal a:hover { color:var(--accent); }
.strap { letter-spacing:.14em; font-weight:700; color:var(--text-dim); text-transform:uppercase; font-size:.72rem; }

/* ---- Utility ---- */
.divider { height:1px; background:var(--border); margin:0; border:0; }
.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; } .reveal{ opacity:1; transform:none; transition:none; }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.badge-strip { display:inline-flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:8px 16px; font-size:.9rem; color:var(--text-dim); font-weight:600; }
.badge-strip .dot { width:8px; height:8px; border-radius:50%; background:var(--success); }

/* ============================================================
   Honeycomb background texture
   ------------------------------------------------------------
   Very subtle hex lattice behind the page. Driven entirely by
   assets/js/theme-config.js — that script sets `hex-texture` on
   <html> and writes --hex-texture-opacity. With JS off, or the
   toggle off, nothing renders (the rule needs the class).
   Sits at z-index:-1 so ANY element with its own background
   masks it: panels, cards, forms and inputs already carry solid
   --surface / --bg fills, so it never sits behind a form field.
   ============================================================ */
:root { --hex-texture-opacity:0.04; }

html.hex-texture body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:var(--hex-texture-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.57' height='72.00' viewBox='0 0 41.57 72.00'%3E%3Cg fill='none' stroke='%23f2b705' stroke-width='1.25'%3E%3Cpath d='M0.00 -24.00L-20.78 -12.00L-20.78 12.00L-0.00 24.00L20.78 12.00L20.78 -12.00Z'/%3E%3Cpath d='M41.57 -24.00L20.78 -12.00L20.78 12.00L41.57 24.00L62.35 12.00L62.35 -12.00Z'/%3E%3Cpath d='M0.00 48.00L-20.78 60.00L-20.78 84.00L-0.00 96.00L20.78 84.00L20.78 60.00Z'/%3E%3Cpath d='M41.57 48.00L20.78 60.00L20.78 84.00L41.57 96.00L62.35 84.00L62.35 60.00Z'/%3E%3Cpath d='M20.78 12.00L0.00 24.00L0.00 48.00L20.78 60.00L41.57 48.00L41.57 24.00Z'/%3E%3Cpath d='M20.78 -60.00L0.00 -48.00L0.00 -24.00L20.78 -12.00L41.57 -24.00L41.57 -48.00Z'/%3E%3Cpath d='M20.78 84.00L0.00 96.00L0.00 120.00L20.78 132.00L41.57 120.00L41.57 96.00Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat; background-position:center top;
}
/* body needs its own paint so the fixed layer can't bleed through it */
html.hex-texture body { background:var(--bg); }

/* Texture guards — blocks that must read on flat charcoal.
   Panels below already had solid fills; these are the ones that
   previously inherited the page background. */
.no-texture,
.form, .form input, .form select, .form textarea,
.calc input[type=number] { background-color:var(--bg); }
.form { background-color:var(--surface); }
/* Prose that sits straight on the page background rather than in a panel. */
.copy-block { position:relative; background:var(--bg); border-radius:var(--radius-lg); }

@media print { html.hex-texture body::before { display:none; } }

/* ============================================================
   Home hero — copy + product shot
   ============================================================ */
.hero-split { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,48px); align-items:center; }
@media (max-width:900px){ .hero-split { grid-template-columns:1fr; } }
.hero-media {
  margin:0; position:relative; border-radius:var(--radius-lg);
  background:
    radial-gradient(105% 78% at 50% 24%, rgba(242,183,5,.10) 0%, rgba(255,255,255,.05) 28%, transparent 64%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 60%, #15181c 100%);
  border:1px solid var(--border); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  padding:clamp(18px,3vw,32px); display:flex; align-items:center; justify-content:center;
}
.hero-media img {
  width:auto; max-width:100%; max-height:440px;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));
}
@media (max-width:900px){ .hero-media img { max-height:340px; } }

/* ============================================================
   Product lines (HiveStock Vend / HiveStock Loan)
   Names live in assets/js/strings/*.en.js — see products.* keys.
   ============================================================ */
.line-badge {
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
  background:rgba(242,183,5,.12); color:var(--accent); border:1px solid rgba(242,183,5,.34);
}
.path.trackit .line-badge { background:rgba(90,169,255,.12); color:#5aa9ff; border-color:rgba(90,169,255,.34); }
.line-legacy { font-size:.9rem; color:var(--text-dim); margin:-4px 0 0; }
.line-legacy strong { color:var(--text); }

/* ============================================================
   Partners
   ============================================================ */
.partner-paths { display:grid; grid-template-columns:1.35fr .65fr; gap:22px; align-items:start; }
@media (max-width:900px){ .partner-paths { grid-template-columns:1fr; } }
.partner-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(26px,3.4vw,36px); position:relative; overflow:hidden;
}
.partner-card::after { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); }
.partner-card.intl::after { background:#5aa9ff; }
.partner-split { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:26px; }
@media (max-width:700px){ .partner-split { grid-template-columns:1fr; } }
.partner-split h4 {
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:14px;
}

/* ---- Calculator: tier + distributor-offset controls ---- */
.calc-controls { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px; align-items:end; }
@media (max-width:560px){ .calc-controls { grid-template-columns:1fr; } }
.calc-control label { font-size:.95rem; margin-bottom:8px; }
.calc-control label .hint {
  font-weight:600; font-size:.8rem; color:var(--text-dim); letter-spacing:.02em;
  text-transform:none; margin-left:6px; white-space:nowrap;
}
.calc select {
  width:100%; font-family:inherit; font-size:1rem; font-weight:700; color:var(--text);
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:13px 14px; min-height:48px;
}
.calc select:focus { outline:none; border-color:var(--accent); }
.offset-row { display:flex; align-items:center; gap:14px; min-height:48px; }
.offset-row .slider { margin-top:0; flex:1; }
.offset-row output {
  font-weight:800; font-size:1.15rem; color:var(--accent); min-width:3.4ch; text-align:right;
}


/* One-off setup fee — stated once, deliberately quiet */
.setup-note {
  margin:0; text-align:center; color:var(--text-dim); font-size:.95rem;
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface); padding:16px 22px;
}
.setup-note strong { color:var(--text); }

/* Distributor path close — partners.html carries no figures by design */
.partner-close { margin:26px 0 0; font-weight:700; color:var(--text); }

/* ---- Two options, positioned as use cases ---- */
.price-card .use-case {
  align-self:flex-start; font-size:.7rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding:6px 12px; border-radius:999px; margin-bottom:12px;
  background:rgba(242,183,5,.12); color:var(--accent); border:1px solid rgba(242,183,5,.34);
}
.price-card:not(.hero-price) .use-case {
  background:rgba(90,169,255,.12); color:#5aa9ff; border-color:rgba(90,169,255,.34);
}
.shared-note {
  margin:22px 0 0; text-align:center; color:var(--text-dim); font-weight:600;
}


/* ---- Rate card: three upfront routes x two contract terms ----------------
   All six cells are on the page by design. The upfront figure carries the
   delivery/installation/onboarding charge, so there is no separate setup fee
   line to style any more. */
.term-split { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 4px; }
.term-cell {
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 10px; text-align:center;
}
.term-cell.best { border-color:rgba(242,183,5,.45); }
.term-cell .term-label {
  display:block; font-size:.7rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim);
}
.term-cell .term-price {
  display:block; font-size:1.85rem; font-weight:800; color:var(--accent);
  line-height:1.1; margin-top:5px;
}
.term-cell .term-price small { font-size:.8rem; font-weight:700; color:var(--text-dim); }
.price-card .allin { margin-top:12px; font-size:.9rem; font-weight:700; color:var(--text); }
.rate-note { margin:24px 0 0; text-align:center; color:var(--text-dim); font-weight:600; }
.price-band .net { color:var(--success); font-weight:700; }

/* Distributor line - no names, no mechanics, no figures. */
.distributor-note {
  margin:0; text-align:center; color:var(--text-dim); font-size:1rem;
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface); padding:18px 22px;
}
.distributor-note strong { color:var(--text); }

/* ---- Connectivity add-on: sold as zero-IT deployment ---- */
.addon-band { border-color:rgba(242,183,5,.3); }
.addon-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin:0; }
.addon-price .amount { font-size:2.4rem; font-weight:800; color:var(--accent); line-height:1; }
.addon-price .amount small { font-size:.95rem; font-weight:700; color:var(--text-dim); }
.addon-price .addon-sub { color:var(--text-dim); font-size:.9rem; }

/* ---- Category comparison table (no vendor is ever named) ---- */
table.tbl.compare tbody th {
  font-size:1rem; font-weight:700; color:var(--text);
  text-transform:none; letter-spacing:0;
}
table.tbl.compare th.us { color:var(--accent); }
table.tbl.compare td { color:var(--text-dim); }
table.tbl.compare td.price { color:var(--accent); font-weight:800; }
.compare-foot { margin:14px 0 0; text-align:center; color:var(--text-dim); font-size:.82rem; }
.compare-close { margin:0; font-size:1.15rem; font-weight:800; }

/* ---- Calculator: segmented rate-card picker ---- */
.seg-field { border:0; padding:0; margin:0 0 18px; }
.seg-field legend { padding:0; font-weight:700; font-size:.95rem; margin-bottom:8px; }
.seg { display:grid; gap:8px; }
.seg-3 { grid-template-columns:repeat(3,1fr); }
.seg-2 { grid-template-columns:repeat(2,1fr); }
.seg-btn {
  font-family:inherit; cursor:pointer; text-align:center; padding:12px 8px;
  border-radius:var(--radius); border:1px solid var(--border); background:var(--bg);
  color:var(--text); display:grid; gap:2px; min-height:58px; align-content:center;
}
.seg-btn:hover { border-color:var(--accent); }
.seg-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.seg-btn .seg-t { font-weight:800; font-size:1.15rem; }
.seg-btn .seg-s { font-size:.75rem; color:var(--text-dim); font-weight:600; }
.seg-btn.is-on { border-color:var(--accent); background:rgba(242,183,5,.12); }
.seg-btn.is-on .seg-t { color:var(--accent); }

.rate-readout {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:0 0 22px;
  padding:14px 16px; border-radius:var(--radius); background:var(--bg); border:1px solid var(--border);
}
.rate-readout .rr-lead {
  font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);
}
.rate-readout strong { font-size:1.5rem; font-weight:800; color:var(--accent); line-height:1; }
.rate-readout .rr-sub { font-size:.82rem; color:var(--text-dim); width:100%; }

.spend-readout {
  font-size:clamp(2.2rem,6vw,3rem); font-weight:800; color:var(--text);
  line-height:1; margin:2px 0 10px;
}
.slider-ends { display:flex; justify-content:space-between; font-size:.8rem; color:var(--text-dim); margin-top:6px; }

.addon-toggle {
  display:flex; align-items:center; gap:10px; margin:18px 0 0; padding:12px 14px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--bg);
  cursor:pointer; font-weight:600; font-size:.95rem;
}
.addon-toggle:hover { border-color:var(--accent); }
.addon-toggle input { width:18px; height:18px; accent-color:var(--accent); flex:none; }

.calc-row .k { display:grid; gap:2px; }
.calc-row .k .k-t { font-size:1rem; color:var(--text); font-weight:700; }
.calc-row .k small { color:var(--text-dim); font-size:.8rem; font-weight:500; }
.calc-row .k small.addon-flag { color:var(--accent); font-weight:700; }
.net-box .net-num.is-neutral { font-size:clamp(1.6rem,4.5vw,2.2rem); }
.payback { margin:0; text-align:center; font-weight:700; font-size:.95rem; color:var(--text-dim); }

/* On narrow screens the outputs pin to the bottom so the numbers stay visible
   while the spend slider is being dragged. */
@media (max-width:760px){
  .calc-out {
    position:sticky; bottom:0; background:var(--surface);
    border-top:1px solid var(--border); padding:14px 0 4px; margin-top:4px;
  }
}

/* ---- Resources: documents held back ----
   Cards stay so the page still describes what is coming, but nothing links to
   a PDF and the stale PDFs are deleted from the repo so they cannot be
   fetched by URL either. */
.soon-badge {
  align-self:flex-start; margin-top:10px; padding:6px 12px; border-radius:999px;
  font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); background:var(--surface-2); border:1px solid var(--border);
}
.docs-cta {
  margin:26px 0 0; text-align:center; font-size:1.02rem; font-weight:600; color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface); padding:18px 22px;
}
.docs-cta a { color:var(--accent); font-weight:700; }

/* ---- Pricing hero ----
   The low anchor and the no-capital route always travel together, so this
   headline carries two prices and needs more room than the default 16ch
   display measure. Prices never break across lines. */
.hero h1.price-h1 { max-width:24ch; }
.hero h1.price-h1 .accent { white-space:nowrap; }
.hero-sub {
  font-size:clamp(1.15rem,2.1vw,1.45rem); font-weight:700; color:var(--text);
  max-width:48ch; margin:14px 0 10px;
}

/* ---- Rate-card internal alignment ----
   The three cards are already equal height (grid stretch). The problem is how
   each card distributes that height internally: descriptions run to different
   line counts, so anything below them starts at a different y.

   Fix it structurally rather than by pinning a min-height to the longest copy:
   the description is the ONLY flexible region, so it absorbs the whole
   difference, and everything below it therefore lands on one shared baseline
   across all three cards. The all-in line additionally carries margin-top:auto
   so it stays pinned to the bottom even if a future description ever grows
   past the space available. Holds for any description length. */
.price-card .psub { flex:1 1 auto; }
.price-card .term-split { flex:none; }
.price-card .allin { flex:none; margin-top:auto; padding-top:12px; }

/* ---- Industries: sector card grid ---- */
.sector-card h3 { font-size:clamp(1.08rem,1.8vw,1.25rem); color:var(--accent); }
.sector-card p { margin:0; color:var(--text-dim); }

/* ---- Legal pages (privacy.html, cookies.html) ---- */
.legal-hero { padding-bottom:clamp(16px,2vw,24px); }
.legal-updated { color:var(--text-dim); margin:0; }
.legal { max-width:78ch; }
.legal h2 { font-size:clamp(1.3rem,2.4vw,1.6rem); margin-top:1.8em; }
.legal h2:first-child { margin-top:0; }
.legal p, .legal li { color:var(--text-dim); }
.legal strong { color:var(--text); }
.legal ul { padding-left:1.2em; margin:0 0 1em; }
.legal li { margin-bottom:.5em; }
.legal a { text-decoration:underline; text-underline-offset:2px; }
.legal .tbl-wrap { margin:0 0 1em; }
.legal code { font-size:.92em; color:var(--text); }

/* ---- Support page ---- */
.support-contact h2 { margin-bottom:6px; }
.support-email { font-size:clamp(1.15rem,2vw,1.4rem); font-weight:800; margin:0 0 10px; }
.support-contact .muted { margin:0; max-width:70ch; }