/* Layout only. All colour and type comes from brand.css (--hc-*). */
:root{
--ink:var(--hc-ink);--accent:var(--hc-cyan);--accent-text:var(--hc-cyan-text);
--surface:var(--hc-surface);--line:var(--hc-line);--dim:var(--hc-dim);
--head:var(--hc-font-sans);--body:var(--hc-font-sans);--mono:var(--hc-font-mono);
--wrap:var(--hc-container);}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.65 var(--body);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.wrap.narrow{max-width:760px}
.center{text-align:center}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--head);letter-spacing:-.022em;line-height:1.15;margin:0}
h1{font-size:clamp(34px,5vw,58px);font-weight:800}
h2{font-size:clamp(26px,3.2vw,36px);font-weight:700;margin-bottom:14px}
h3{font-size:19px;font-weight:650;margin-bottom:6px}
p{margin:0 0 16px}
code{font:13.5px var(--mono);background:var(--surface);padding:2px 6px;border-radius:5px}
section{padding:76px 0}
section.band{background:var(--surface);border-block:1px solid var(--line)}
.lede{font-size:19px;line-height:1.6;color:var(--dim)}
.sublede{color:var(--dim);font-size:17px}
/* header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
 backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.brand .hc-logo{--hc-logo-size:23px}
.flogo .hc-logo{--hc-logo-size:26px}


header nav{margin-left:auto;display:flex;gap:26px}
header nav a{color:var(--ink);font-size:14.5px;font-weight:500;text-decoration:none;opacity:.82}
header nav a:hover,header nav a.on{opacity:1;color:var(--accent-text)}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px;gap:5px;flex-direction:column}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
 padding:11px 20px;border-radius:9px;font-size:14.5px;font-weight:600;
 text-decoration:none;border:1.5px solid transparent;transition:.15s;white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn.big{padding:14px 28px;font-size:16px;border-radius:11px}
.btn.primary{background:var(--accent);color:#06222e}
.btn.primary:hover{background:var(--hc-cyan-500);color:#fff}
.btn.ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent-text)}
.btn.disabled{opacity:.45;pointer-events:none}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}
.cta.center{justify-content:center}
/* hero */
.hero{padding:88px 0 60px;text-align:center;
 background:radial-gradient(1100px 480px at 50% -12%,color-mix(in srgb,var(--accent) 13%,#fff),#fff)}
.hero .lede{max-width:660px;margin:18px auto 0}
.hero .cta{justify-content:center}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.09em;
 text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}
.proof{max-width:640px;margin:26px auto 0;color:var(--dim);font-size:15px}
/* pillars */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin-top:32px}
.pillar{background:#fff;border:1px solid var(--line);border-radius:13px;padding:24px}
.pillar h3{margin-bottom:8px}
.pillar p{color:var(--dim);font-size:14.8px;margin:0}
/* product cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:30px}
.pgrid.one{grid-template-columns:1fr;gap:26px}
.pcard{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;
 background:#fff;text-decoration:none;color:inherit;transition:.18s}
.pcard:hover{text-decoration:none;box-shadow:0 12px 34px rgba(13,17,23,.09);
 border-color:color-mix(in srgb,var(--accent) 38%,var(--line));transform:translateY(-2px)}
.pcard.wide{display:grid;grid-template-columns:minmax(0,340px) 1fr}
.pthumb{position:relative;aspect-ratio:16/9;background:var(--surface);overflow:hidden}
.pcard.wide .pthumb{aspect-ratio:auto;min-height:200px}
.pthumb img{width:100%;height:100%;object-fit:cover;display:block}
.pthumb .ph{display:none}
.pthumb.miss img{display:none}
.pthumb.miss .ph{display:flex;align-items:center;justify-content:center;height:100%;
 background:repeating-linear-gradient(45deg,#fbfcfe,#fbfcfe 11px,#f2f5f9 11px,#f2f5f9 22px)}
.pthumb.miss .ph span{font:11.5px var(--mono);color:var(--dim);background:#fff;
 padding:4px 9px;border-radius:5px;border:1px solid var(--line)}
.pbody{padding:22px 24px 24px}
.prow{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.kind{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.badge{font-size:11.5px;font-weight:650;padding:3px 10px;border-radius:20px}
.b-ok{background:var(--hc-cyan-50);color:var(--hc-cyan-700)}
.b-soon{background:var(--surface);color:var(--dim);border:1px solid var(--line)}
.pbody p{color:var(--dim);font-size:14.8px;margin-bottom:10px}
.pbody .tag{color:var(--ink);font-weight:550;font-size:15.5px}
.more{font-size:14px;font-weight:600;color:var(--accent-text)}
/* product page */
.phead{padding:66px 0 8px}
.phead.prod{background:radial-gradient(900px 380px at 20% -20%,color-mix(in srgb,var(--accent) 11%,#fff),#fff)}
.split{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start;margin-top:10px}
.specs{border:1px solid var(--line);border-radius:13px;padding:22px;background:var(--surface);position:sticky;top:90px}
.specs h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:12px}
.specs dl{margin:0 0 18px}
.spec{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec:last-child{border:0}
.spec dt{color:var(--dim)}
.spec dd{margin:0;font-weight:600;text-align:right}
.specs .btn{width:100%}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:30px}
.feat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:24px}
.feat p{color:var(--dim);font-size:14.8px;margin:0}
/* doc pages */
.doc h2{margin-top:44px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.doc h3{margin-top:26px}
.doc ul,.doc ol{padding-left:22px}
.doc li{margin-bottom:7px}
.doc table{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:18px}
.doc th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
 color:var(--dim);border-bottom:1px solid var(--line);padding:8px}
.doc td{border-bottom:1px solid var(--line);padding:9px 8px;vertical-align:top}
.cal{display:flex;gap:13px;background:var(--surface);border-left:3px solid var(--accent);
 border-radius:0 9px 9px 0;padding:14px 17px;margin:0 0 18px}
.cal b{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--hc-cyan-700);flex:0 0 62px}
.cal p:last-child{margin:0}
/* figures */
figure{margin:26px 0}
figure img{width:100%;border:1px solid var(--line);border-radius:13px;display:block}
figure .ph{display:none}
figure.miss img{display:none}
figure.miss .ph{display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;
 min-height:230px;border:2px dashed #cbd5e1;border-radius:13px;
 background:repeating-linear-gradient(45deg,#fbfcfe,#fbfcfe 11px,#f2f5f9 11px,#f2f5f9 22px)}
figure .ph span{font:12px var(--mono);color:var(--dim);background:#fff;padding:4px 10px;
 border-radius:5px;border:1px solid var(--line)}
figure .ph em{font-style:normal;font-size:13px;color:var(--dim);max-width:74%;text-align:center}
figcaption{font-size:13.5px;color:var(--dim);margin-top:9px;text-align:center}
figure.miss figcaption{display:none}
/* footer */
footer{background:var(--hc-black);color:#c3ccd8;padding:56px 0 26px;margin-top:0}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
.fcol h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:#7c8798;margin-bottom:13px}
.fcol a{display:block;color:#c3ccd8;font-size:14.5px;padding:4px 0;text-decoration:none}
.fcol a:hover{color:#fff}
.fbrand p{font-size:14.5px;color:#8d97a6;max-width:290px}


.mail{color:#fff!important;font-weight:600}
.fbot{display:flex!important;grid-template-columns:none!important;justify-content:space-between;
 border-top:1px solid #222a35;margin-top:38px;padding-top:20px;font-size:13px;color:#7c8798}
@media(max-width:900px){
 header nav{display:none;position:absolute;top:66px;left:0;right:0;background:#fff;
  flex-direction:column;padding:16px 28px;border-bottom:1px solid var(--line);gap:4px}
 body.navopen header nav{display:flex}
 header nav a{padding:10px 0}
 .burger{display:flex}
 .split{grid-template-columns:1fr}
 .specs{position:static}
 .pcard.wide{grid-template-columns:1fr}
 footer .wrap{grid-template-columns:1fr 1fr}
 .fbot{flex-direction:column;gap:8px}
 section{padding:56px 0}
}