/* pinnet — dark promo layout. Palette: --pg-* from branding; --surf/--gold from templateData via inline vars. */
:root{--bg:var(--pg-bg);--tx:var(--pg-text);--c1:var(--pg-primary);--hi:var(--pg-accent);--c2:var(--surf,#14202b);--gold1:#ffe08a;--gold2:#f0a020;--mut:color-mix(in srgb,var(--tx) 68%,transparent);--line:color-mix(in srgb,var(--tx) 12%,transparent);--r:var(--pg-radius,14px);--w:880px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.65 var(--pg-font-body);min-height:100vh}
a{color:var(--hi)}
img,svg{max-width:100%}
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:8px;z-index:9;background:var(--c1);color:#fff;padding:8px 12px}
h1,h2,h3{font-family:var(--pg-font-heading);line-height:1.2;margin:0 0 .6em}
/* header */
.hd{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd__bar{display:flex;align-items:center;gap:12px;min-height:60px}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--tx);font:900 22px/1 var(--pg-font-heading);letter-spacing:-.02em;margin-right:auto}
.logo__mark{display:grid;place-items:center;width:32px;height:32px;border-radius:calc(var(--r)*.6);background:var(--c1);color:#fff;font-size:18px}
.logo__b{color:var(--c1)}
.hd__acts{display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 16px;border-radius:calc(var(--r)*.6);font:700 13px/1 var(--pg-font-body);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;cursor:pointer;border:0;white-space:nowrap}
.btn--main{background:var(--c1);color:#fff}
.btn--main:hover{filter:brightness(1.1)}
.btn--ghost{background:transparent;color:var(--tx);border:1px solid color-mix(in srgb,var(--c1) 70%,transparent)}
.burger{display:grid;gap:5px;width:42px;height:38px;padding:10px;border-radius:calc(var(--r)*.6);border:1px solid var(--line);background:transparent;cursor:pointer}
.burger span{display:block;height:2px;background:var(--tx);border-radius:2px;transition:.2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{border-top:1px solid var(--line);background:var(--bg);max-height:calc(100vh - 60px);overflow:auto}
.menu__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px 28px;padding-top:18px;padding-bottom:22px}
.menu__h{display:block;margin:0 0 6px;font:800 14px/1.3 var(--pg-font-heading);text-transform:uppercase;letter-spacing:.04em;color:var(--tx);text-decoration:none}
.menu ul{list-style:none;margin:0;padding:0}
.menu li a{display:block;padding:6px 0;color:var(--mut);text-decoration:none}
.menu a:hover,.menu a.is-on,.menu__h.is-on{color:var(--hi)}
/* hero */
.hero{text-align:center;padding:28px 0 8px}
.hero h1{font-size:clamp(24px,4.6vw,38px);font-weight:900;text-transform:uppercase}
.hero__lead{color:var(--mut);max-width:640px;margin:0 auto 14px}
.crumbs ol{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;list-style:none;padding:0;margin:0 0 14px;font-size:13px;color:var(--mut)}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}.crumbs a{color:var(--mut)}
.code{display:inline-flex;align-items:center;gap:10px;font-size:12px;text-transform:uppercase;font-weight:700;margin:4px 0 8px}
.code__v{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px dashed var(--hi);border-radius:8px;background:color-mix(in srgb,var(--hi) 10%,transparent);color:var(--tx);cursor:pointer;font:700 14px/1 var(--pg-font-body)}
.code__v svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.is-copied{outline:2px solid var(--hi)}
/* banners */
.bn{position:relative;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:8px;margin:26px 0;padding:22px 24px;border-radius:var(--r);background:linear-gradient(120deg,var(--c2),color-mix(in srgb,var(--c2) 60%,var(--hi)));overflow:hidden;min-height:180px}
.bn__k{margin:0 0 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold1)}
.bn__t{margin:0 0 6px;font:900 italic clamp(22px,3.6vw,32px)/1.05 var(--pg-font-heading);text-transform:uppercase;color:#fff}
.bn__p{margin:0 0 14px;color:color-mix(in srgb,#fff 82%,transparent);font-size:14px}
.bn__art{display:flex;justify-content:center}.bn__art .art{width:100%;max-width:300px;height:auto}
/* text */
.txt{font-size:15.5px}
.txt h2{font-size:clamp(20px,2.8vw,26px);margin-top:1.4em}
.txt h3{font-size:18px;margin-top:1.2em}
.txt p,.txt ul,.txt ol{margin:0 0 1em}
.txt li{margin:.25em 0}
.txt table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:14px;display:block;overflow-x:auto}
.txt th,.txt td{padding:9px 10px;border:1px solid var(--line);text-align:left;vertical-align:top}
.txt th{background:color-mix(in srgb,var(--c2) 70%,transparent)}
.txt blockquote{margin:0 0 1.2em;padding:12px 16px;border-left:4px solid var(--hi);background:color-mix(in srgb,var(--hi) 8%,transparent);border-radius:0 var(--r) var(--r) 0}
.txt blockquote p:last-child{margin:0}
/* faq */
.faq{margin:30px 0}
.faq__i{border:1px solid var(--line);border-radius:var(--r);margin:0 0 10px;background:color-mix(in srgb,var(--c2) 45%,transparent)}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--hi);font-weight:900}
.faq__i[open] summary::after{content:"−"}
.faq__a{padding:0 16px 12px;color:var(--mut)}
/* footer */
.ft{margin-top:40px;border-top:1px solid var(--line);padding:28px 0 36px;text-align:center}
.logo--ft{margin:0 auto 14px}
.ft__links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;list-style:none;padding:0;margin:0 0 14px;font-size:14px}
.ft__links a{color:var(--mut);text-decoration:none}.ft__links a:hover{color:var(--hi)}
.ft__disc{max-width:680px;margin:0 auto 10px;font-size:12.5px;color:var(--mut)}
.ft__copy{font-size:12px;color:var(--mut);margin:0}
.ft__age{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--c1);color:var(--tx);font-weight:900;font-size:11px;margin-right:6px;vertical-align:middle}
@media (max-width:640px){.bn{grid-template-columns:1fr;text-align:left}.bn__art{order:-1}.bn__art .art{max-width:220px}.hd__code{display:none}.btn{padding:0 12px}}
/* ── layout variants ── */
.v2 .bn{background:var(--bg);border:2px solid var(--c1);grid-template-columns:.9fr 1.1fr}.v2 .bn__art{order:-1}.v2 .bn__t{font-style:normal}.v2 .hero{text-align:left}.v2 .crumbs ol{justify-content:flex-start}.v2 .hero__lead{margin-left:0}
.v3 .bn{grid-template-columns:1fr;text-align:center;background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--hi) 35%,var(--c2)),var(--c2) 70%)}.v3 .bn__art{order:-1}.v3 .bn__art .art{max-width:240px}.v3 .faq__i{border-radius:999px 999px var(--r) var(--r)}
.v4 .hero h1{font-style:italic;letter-spacing:-.01em}.v4 .bn{background:linear-gradient(90deg,var(--c1) 0 42%,var(--c2) 42%)}.v4 .bn__k{color:#fff}.v4 .bn .btn--main{background:#fff;color:var(--c1)}.v4 .txt h2{border-left:6px solid var(--c1);padding-left:12px}
.v5 .bn{background:repeating-linear-gradient(135deg,var(--c2) 0 18px,color-mix(in srgb,var(--c2) 85%,var(--hi)) 18px 36px)}.v5 .txt h2{text-transform:uppercase;font-size:clamp(18px,2.4vw,22px);letter-spacing:.03em}.v5 .hd{border-bottom:3px solid var(--c1)}.v5 .logo__mark{border-radius:50%}
@media (max-width:640px){.v2 .bn,.v4 .bn{grid-template-columns:1fr}.v4 .bn{background:linear-gradient(180deg,var(--c1) 0 38%,var(--c2) 38%)}}