/* Nomad shop · design direction E ("Pro"): Apple calm + FabFilter audio craft. Dark only, on purpose.
   No inline styles or scripts anywhere (CSP default-src 'self'). Fonts are local (Geist, OFL-1.1). */
@font-face{font-family:"Geist";src:url("/assets/fonts/geist.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/assets/fonts/geist-mono.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
 color-scheme:dark;
 --bg:#0B0C10; --card:#1C1D23; --line:#2A2C33; --dim:#9A9DA6; --text:#F5F5F7;
 --gold:#DEC7A5; --gold-hi:#F1DDBA; --blue:#7DB0FF; --blue-deep:#2F6BFF; --violet:#8B6CFF;
 --p-ink:#141412; --p-paper:#F7F5F0;
 --sans:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
 --mono:"Geist Mono",ui-monospace,Menlo,monospace;
 --gut:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{padding-inline:var(--gut)}
.wrap-inner{max-width:1120px;margin-inline:auto;width:calc(100% - 2 * var(--gut))}

.testbar{text-align:center;padding:8px 16px;background:#2a2417;color:var(--gold);font:600 11px var(--mono);letter-spacing:.12em}
.testbar span{letter-spacing:0;font-weight:400;margin-left:10px;color:#cbb994}
.testbar[hidden]{display:none}

.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px;font-size:13px;color:#c9ccd3;position:relative;z-index:3}
.nav a{text-decoration:none}
.nav .mk{display:flex;align-items:center;gap:5px;color:var(--text);font-weight:600;white-space:nowrap}
.nav .mk img{border-radius:6px}
.nav .mk .mk-shop{margin-left:1px;font-weight:400;opacity:.62}
.nav nav{display:flex;gap:26px}
.nav nav a:hover{color:var(--text)}
.nav .acc{border:1px solid #3a3c44;border-radius:8px;padding:6px 12px;white-space:nowrap}

.hero{position:relative;height:clamp(520px,78vh,760px);display:grid;align-content:end;padding-bottom:clamp(36px,6vw,70px)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,16,.85) 0%,rgba(11,12,16,0) 22%,rgba(11,12,16,0) 55%,rgba(11,12,16,.92) 100%);pointer-events:none}
.hero-txt{position:relative;z-index:2;display:grid;gap:12px;max-width:900px}
/* Keep the hero text calm over the sound landscape */
.hero::before{content:"";position:absolute;left:0;bottom:0;width:min(900px,90%);height:70%;z-index:1;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 25% 70%,rgba(11,12,16,.72),transparent 70%)}
.pname{margin:0;font-weight:300;font-size:clamp(64px,10vw,140px);line-height:.9;letter-spacing:-.05em}
.pname b{font-weight:650}
.pname sup{font-size:.3em;font-weight:400;color:var(--gold);letter-spacing:0;vertical-align:super;margin-left:.05em}
.tag{margin:0;font-size:clamp(19px,2.2vw,26px);color:var(--gold);font-weight:500;letter-spacing:-.01em}
.tag span{color:#c9ccd3;font-weight:400}
.fn{text-decoration:none;color:var(--dim);font-size:.7em;vertical-align:super;margin-left:1px}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.meta{margin:0;font-size:12.5px;color:#8d9099}

/* Buttons in Paul's colour: shiny black (ink #141412) with a lacquer highlight and a fine champagne edge. */
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(222,199,165,.38);border-radius:40px;padding:12px 24px;font:600 15px var(--sans);cursor:pointer;
 background:linear-gradient(180deg,#34332e 0%,#1b1a17 46%,#141412 54%,#0a0a09 100%);color:#F7F5F0;text-decoration:none;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.6),0 10px 28px -10px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.5);
 transition:transform .15s,box-shadow .15s,border-color .15s}
.btn:hover{transform:translateY(-1px);border-color:rgba(222,199,165,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.6),0 14px 34px -12px rgba(222,199,165,.35),0 0 0 1px rgba(0,0,0,.5)}
.btn:active{transform:translateY(0);background:linear-gradient(180deg,#141412,#1b1a17)}
.btn.light{background:linear-gradient(180deg,#fff,#ece9e2);color:#141412;border-color:rgba(255,255,255,.6)}
.btn.dark{border-color:rgba(255,255,255,.14)}
.btn.gold{background:linear-gradient(180deg,#f1ddba 0%,#dec7a5 50%,#c9ae86 100%);color:#17120a;border-color:rgba(255,255,255,.35)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.link{background:none;border:0;padding:0;font:inherit;color:var(--gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.sec{padding-block:clamp(70px,10vw,130px) 0}
.center{text-align:center;display:grid;justify-items:center;gap:14px}
.h{margin:0;font-weight:650;font-size:clamp(40px,6.4vw,84px);line-height:1;letter-spacing:-.05em;text-wrap:balance}
.h .g{background:linear-gradient(90deg,var(--gold-hi),var(--gold) 40%,var(--blue) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.p{margin:0;max-width:52ch;font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--dim)}

.analyzer{margin-top:48px;margin-bottom:0;background:linear-gradient(180deg,#202128,#16171c);border:1px solid #33353d;border-radius:18px;box-shadow:0 50px 120px -50px rgba(139,108,255,.45),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden}
.an-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #2c2e35;font:500 11px var(--mono);color:#a7aab3;flex-wrap:wrap}
.an-bar .lg{font:600 13px var(--sans);color:var(--text);margin-right:8px}
.an-bar .lg span{color:var(--gold)}
.chip{border:1px solid #3a3c44;border-radius:6px;padding:3px 8px}
.chip.on{border-color:var(--gold);color:var(--gold)}
.an-bar .rt{margin-left:auto;display:flex;gap:10px;align-items:center}
.led{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80}
.an{position:relative;aspect-ratio:16/6.2}
.an canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.an-foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #2c2e35}
.an-foot div{padding:12px 14px;border-right:1px solid #2c2e35;display:grid;gap:3px}
.an-foot div:last-child{border-right:0}
.an-foot span{font:500 10.5px var(--mono);color:#80838c;letter-spacing:.06em;text-transform:uppercase}
.an-foot b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.an-foot b.g{color:var(--gold)}
.analyzer figcaption{padding:10px 14px;border-top:1px solid #2c2e35;font-size:12.5px;color:#7d8089;text-align:center}

.bento{margin-top:48px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.bx{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:26px;display:grid;gap:10px;align-content:space-between;min-height:220px;position:relative;overflow:hidden}
.bx.w4{grid-column:span 4}.bx.w2{grid-column:span 2}
.bx > *{position:relative}
.bx .k{font-size:14px;color:var(--dim)}
.bx .big{font-size:clamp(54px,7vw,96px);font-weight:650;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums}
.bx .big.g{background:linear-gradient(90deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.bx .mid{display:block;font-size:clamp(28px,3vw,40px);font-weight:650;letter-spacing:-.04em;line-height:1;margin-bottom:8px}
.bx p{margin:0;font-size:14.5px;line-height:1.5;color:var(--dim)}
.bx.glow::before,.bx.blue::before{content:"";position:absolute;inset:auto -30% -60% -30%;height:90%}
.bx.glow::before{background:radial-gradient(ellipse at center,rgba(222,199,165,.22),transparent 65%)}
.bx.blue::before{background:radial-gradient(ellipse at center,rgba(47,107,255,.28),transparent 65%)}
.chip3{width:64px;height:64px;border-radius:14px;background:linear-gradient(145deg,#2b2d35,#15161a);border:1px solid #3a3c44;display:grid;place-items:center;font:600 13px var(--mono);color:var(--gold);box-shadow:0 0 0 6px rgba(222,199,165,.06)}

/* Paul's live text screen, rebuilt from the real app (paul_listens LiveDraft.swift, glass shipped in 0.3.34):
   thin material at 0.25+0.75·g (g 0.3), black tint 0.18 → 0.29 top to bottom, 1px white edge at 0.18, a soft glint,
   pure white text with a dark shadow, provisional words at 0.48. It rolls up from the bottom edge like a blind. */
.stage{margin-top:48px}
.live{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/9;max-width:100%;
 background:radial-gradient(60% 70% at 15% 20%,#5b3fb0 0%,transparent 60%),radial-gradient(55% 65% at 85% 30%,#1f5fd6 0%,transparent 60%),radial-gradient(60% 60% at 60% 95%,#b08a52 0%,transparent 65%),#0e0f14;
 border:1px solid #26272c;box-shadow:0 60px 140px -70px rgba(125,176,255,.45)}
.bd-win{position:absolute;inset:7% 9%;border-radius:16px;background:rgba(20,21,26,.82);border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 90px rgba(0,0,0,.55);display:flex;flex-direction:column;overflow:hidden}
.bd-bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.06);flex:none}
.bd-bar i{width:11px;height:11px;border-radius:50%;background:#3a3b40;display:block}
.bd-bar i:nth-child(1){background:#ff5f57}.bd-bar i:nth-child(2){background:#febc2e}.bd-bar i:nth-child(3){background:#28c840}
.bd-bar span{margin-left:12px;font:600 12px var(--sans);color:#a7a8ae}
.bd-chat{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:16px 18px;overflow:hidden}
.bd-chat p{margin:0;max-width:62%;padding:10px 14px;border-radius:18px;font:400 clamp(12px,1.35vw,15px)/1.35 var(--sans)}
.bd-chat .in{align-self:flex-start;background:#2c2d33;color:#e8e8ec;border-bottom-left-radius:6px}
.bd-chat .out{align-self:flex-end;background:linear-gradient(180deg,#3d8bff,#2f6bff);color:#fff;border-bottom-right-radius:6px}
.field{position:relative;display:flex;align-items:center;gap:2px;margin:0 14px 14px;background:#1d1e23;border:1px solid #34353b;border-radius:20px;padding:11px 46px 11px 16px;font:400 clamp(13px,1.4vw,16px) var(--sans);color:#ecebe8;min-height:44px;flex:none}
.field-ph{color:#6e6f75;display:none}
.field.empty .field-ph{display:inline}
.field.empty .field-text{display:none}
.field-send{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:#2f6bff;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
.caret{display:inline-block;width:1.5px;height:1.1em;background:#ecebe8;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.paulscreen{position:absolute;left:9%;right:9%;bottom:7%;z-index:2;border-radius:20px;padding:16px 22px 18px;display:grid;gap:clamp(18px,4.5vw,52px);
 background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.29)),rgba(36,36,40,.475);
 -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.22),0 24px 60px rgba(0,0,0,.45);
 clip-path:inset(100% 0 0 0 round 20px);transition:clip-path .42s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.paulscreen.up{clip-path:inset(0 0 0 0 round 20px)}
.paulscreen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);background-size:250% 100%;animation:glint 7s ease-in-out infinite}
@keyframes glint{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
.ps-top{display:flex;justify-content:space-between;align-items:center;gap:14px;opacity:.92}
.ps-top img{height:clamp(16px,2vw,22px);width:auto}
.ps-status{display:flex;align-items:center;gap:9px;font:600 clamp(8px,.85vw,10px) var(--sans);letter-spacing:.14em;white-space:nowrap}
.ps-dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.ps-voice{color:var(--gold)}
.ps-state{color:rgba(255,255,255,.7)}
.ps-wave{display:flex;gap:2px;align-items:center;height:12px}
.ps-wave i{display:block;width:2px;height:3px;border-radius:1px;background:var(--gold);transition:height .08s}
.ps-text{margin:0;font:500 clamp(14px,1.75vw,19px)/1.4 var(--sans);min-height:1.4em;color:#fff;text-shadow:0 1px 2.5px rgba(0,0,0,.75)}
.ps-text .tmp{color:rgba(255,255,255,.48)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.paulscreen{background:rgba(30,30,34,.94)}}

/* Screenshot gallery: horizontal snap strip */
.gallery{margin-top:48px}
.gal-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin;align-items:flex-start}
.shot{margin:0;flex:none;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;max-width:92vw}
.shot img{display:block;height:clamp(260px,44vw,560px);width:auto;max-width:92vw;object-fit:contain;object-position:left top}
.shot figcaption{padding:12px 16px;font-size:14px;color:var(--dim);width:0;min-width:100%}

.cmp{margin-top:48px;max-width:900px;border-top:1px solid var(--line)}
.cmp .r{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;padding:18px 4px;border-bottom:1px solid var(--line);font-size:15.5px;align-items:baseline}
.cmp .r.hd{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#80838c}
.cmp .r.hd .us{color:var(--gold)}
.cmp .r > span:first-child{color:var(--dim)}
.cmp .us{color:var(--text);font-weight:600}
.cmp .th{color:#6f727b}

.status{min-height:1.4em;margin:26px 0 0;text-align:center;color:var(--gold);font-size:14.5px}
.buy{margin-top:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.buy{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.buy{grid-template-columns:1fr}}
.teams{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:linear-gradient(90deg,#1c1d23,#15161a);border:1px solid var(--line);border-radius:26px;padding:24px 28px}
.teams .nm{font-size:20px;font-weight:650;letter-spacing:-.02em}
.teams p{margin:6px 0 0;color:var(--dim);font-size:14.5px;max-width:52ch}
.teams-cta{display:flex;align-items:center;gap:16px}
.teams .req{font-size:22px;font-weight:650;letter-spacing:-.03em;color:var(--gold)}
.pl{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:28px;display:grid;gap:12px;align-content:start}
.pl.hot{background:linear-gradient(180deg,#24211b,#1c1d23 60%);border-color:#5b4d36;box-shadow:0 40px 100px -50px rgba(222,199,165,.45)}
.pl .nm{font-size:15px;font-weight:600;display:flex;justify-content:space-between;gap:8px;align-items:center}
/* Price tags: product logo, big tier name, audience line in gold */
.pl{position:relative;overflow:hidden}
.pl::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.06),transparent 35%)}
.pl-head{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:28px;margin-bottom:6px}
.pl-logo{height:24px;width:auto;opacity:.92}
.pl-badge{font:600 10.5px var(--mono);color:#1a1408;background:var(--gold);border-radius:20px;padding:3px 8px;letter-spacing:.06em}
.pl .tier{font-size:clamp(34px,3.4vw,44px);font-weight:700;letter-spacing:-.05em;line-height:.95}
.pl .aud{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.pl.hot .tier{background:linear-gradient(90deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.pl .nm b{font:600 10.5px var(--mono);color:#1a1408;background:var(--gold);border-radius:20px;padding:3px 8px;letter-spacing:.06em}
.pl .pr{font-size:40px;font-weight:600;letter-spacing:-.04em;line-height:1;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.pl .pr small{display:block;margin-top:6px;font-size:14px;color:var(--dim);font-weight:500;letter-spacing:0}
.pl p{margin:0;font-size:14.5px;color:var(--dim);line-height:1.5}
.pl .pr.req{font-size:34px;line-height:1.5}
.pl.contact{background:linear-gradient(180deg,#1c1d23,#15161a)}
.pl form,.pl > .btn{margin-top:4px;justify-self:start}
.also{margin-top:18px;text-align:center;font-size:14px;color:var(--dim);display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.also form{display:inline}

.flow{margin-top:56px}
.flow ol{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.flow li{font:500 13px var(--mono);border:1px solid var(--line);border-radius:30px;padding:8px 14px;color:#c9ccd3}
.flow li b{color:var(--gold);font-weight:600;margin-right:6px}

.foot{margin-top:72px;font-size:12px;line-height:1.6;color:#6f727b;border-top:1px solid var(--line);padding-block:16px 60px;display:grid;gap:8px}
.foot p{margin:0}
.foot b{color:#a7aab3;font-weight:600}
.foot a{color:#a7aab3}

/* "You're in" page */
.done{min-height:70vh;display:grid;place-items:center;padding-block:60px}
.done-card{max-width:560px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,5vw,44px);display:grid;gap:16px;position:relative;overflow:hidden}
.done-card::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;height:120%;background:radial-gradient(circle,rgba(222,199,165,.2),transparent 60%)}
.done-card > *{position:relative}
.check{width:52px;height:52px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:#17120a;font-weight:800;font-size:24px}
.done-card h1{margin:0;font-size:clamp(36px,6vw,54px);letter-spacing:-.05em;font-weight:650;line-height:1}
.done-card p{margin:0;color:var(--dim);font-size:16px;line-height:1.55}
.done-card ol{margin:0;padding-left:20px;color:#c9ccd3;display:grid;gap:6px;font-size:15px}

@media (max-width:820px){
 .nav nav{display:none}
 .bento{grid-template-columns:1fr}
 .bx.w4,.bx.w2{grid-column:auto}
 .an{aspect-ratio:16/9}
 .an-foot{grid-template-columns:repeat(2,minmax(0,1fr))}
 .an-foot div:nth-child(2){border-right:0}
 .cmp .r{font-size:14px;gap:10px}
 .ps-wave,.ps-state{display:none}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .caret{animation:none}
 .btn{transition:none}
}

/* Shop home: categories and product cards */
.shop-hero{position:relative;min-height:clamp(420px,62vh,620px);display:grid;align-content:end;padding-bottom:clamp(36px,6vw,64px);overflow:hidden}
.shop-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.shop-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,16,.8),rgba(11,12,16,0) 30%,rgba(11,12,16,0) 55%,rgba(11,12,16,.92));pointer-events:none}
.shop-hero .hero-txt{position:relative;z-index:2;display:grid;gap:12px}
.cat{margin-top:clamp(56px,8vw,96px)}
.cat-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:18px}
.cat-head h2{margin:0;font-size:clamp(24px,3vw,34px);letter-spacing:-.04em;font-weight:650}
.cat-head p{margin:0;color:var(--dim);font-size:14.5px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.card{display:grid;gap:10px;align-content:start;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;text-decoration:none;min-height:200px;transition:border-color .2s,transform .2s;position:relative;overflow:hidden}
.card:hover{border-color:#44464e;transform:translateY(-2px)}
.card.live{background:linear-gradient(180deg,#24211b,#1c1d23 60%);border-color:#5b4d36}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.card-top b{font-size:22px;letter-spacing:-.03em;font-weight:650}
.card-tag{color:#c9ccd3;font-size:15px;line-height:1.45}
.card-foot{margin-top:auto;font-size:13.5px;color:var(--gold);font-weight:600}
.pill-live,.pill-soon{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;border-radius:20px;padding:4px 9px;white-space:nowrap}
.pill-live{background:var(--gold);color:#17120a}
.pill-soon{border:1px solid #3a3c44;color:#a7aab3;display:inline-block}
.plats{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.plats span{font:500 11px var(--mono);border:1px solid #33353d;border-radius:6px;padding:2px 7px;color:#9a9da6}
.center .plats{justify-content:center}

/* waitlist, notes, faq, quotes, prose */
.waitlist{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.waitlist input[type=email]{min-width:min(320px,100%);border:1px solid #3a3c44;background:#141519;color:var(--text);border-radius:40px;padding:12px 18px;font:400 15px var(--sans)}
.small{font-size:13px;color:#7d8089;margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.notice{margin:18px auto 0;text-align:center;color:var(--gold)}
.notes{margin-top:56px;font-size:12px;line-height:1.6;color:#6f727b;display:grid;gap:8px}
.notes p{margin:0}
.faq{margin-top:48px;max-width:860px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:18px 4px}
.faq summary{cursor:pointer;font-size:17px;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{color:var(--dim);line-height:1.6;margin:12px 0 0}
.quotes{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.quotes blockquote{margin:0;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;display:grid;gap:14px}
.quotes p{margin:0;font-size:17px;line-height:1.5}
.quotes footer{color:var(--dim);font-size:13.5px}
.prose{margin-top:48px;max-width:760px;color:#c9ccd3;line-height:1.65}
.prose h2{color:var(--text);font-size:28px;letter-spacing:-.03em}
.hero-image{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;padding-block:60px}
.hero-img{border-radius:22px;border:1px solid var(--line)}
@media (max-width:820px){.hero-image{grid-template-columns:1fr}.live{aspect-ratio:4/5}.bd-win{inset:4%}.paulscreen{left:4%;right:4%;bottom:4%}.bd-chat p{max-width:80%}}
@media (prefers-reduced-motion:reduce){.paulscreen{transition:none}.paulscreen::after{animation:none}}

/* Voice focus: two voices in, only yours out (or all, when switched) */
.vf{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:stretch}
.vf-lanes{display:grid;gap:14px;align-content:center;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px}
.lane{display:grid;gap:8px}
.lane .who{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.lane.other .who{color:#8b8d95}
.bars{display:flex;gap:3px;align-items:center;height:56px}
.bars i{flex:1;border-radius:2px;background:var(--gold);height:20%;animation:bar 1.3s ease-in-out infinite}
.lane.other .bars i{background:#5a5c63}
.bars i:nth-child(3n){animation-delay:-.4s}.bars i:nth-child(3n+1){animation-delay:-.9s}.bars i:nth-child(4n){animation-duration:1.7s}.bars i:nth-child(5n){animation-duration:.9s}
@keyframes bar{0%,100%{height:15%}50%{height:90%}}
.vf.mode-you .lane.other .bars{opacity:.35;transition:opacity .4s}
.vf-out{position:relative;border-radius:24px;padding:22px 24px;display:grid;gap:18px;align-content:start;overflow:hidden;
 background:radial-gradient(70% 90% at 90% 0%,rgba(91,63,176,.35),transparent 60%),radial-gradient(60% 80% at 0% 100%,rgba(176,138,82,.25),transparent 60%),#14151a;border:1px solid var(--line)}
.vf-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.vf-head img{height:20px;width:auto}
.vf-toggle{display:inline-flex;border:1px solid rgba(255,255,255,.16);border-radius:30px;padding:3px;background:rgba(255,255,255,.04)}
.vf-toggle span{font:600 12px var(--sans);padding:6px 12px;border-radius:30px;color:#a7aab3;transition:all .3s}
.vf.mode-you .t-you,.vf.mode-all .t-all{background:var(--gold);color:#17120a}
.vf-text{margin:0;font:500 clamp(17px,1.9vw,22px)/1.45 var(--sans);color:#fff;text-shadow:0 1px 2.5px rgba(0,0,0,.6)}
.vf-text .ol{transition:opacity .4s,filter .4s}
.vf.mode-you .vf-text .ol{opacity:.0;filter:blur(4px)}
.vf-note{margin:0;font-size:13.5px;line-height:1.5;color:#c9b8ff;border:1px solid rgba(168,140,255,.35);background:rgba(120,90,220,.12);border-radius:12px;padding:10px 12px;transition:opacity .4s}
.vf-note b{display:block;font-weight:600;color:#b9a4ff;margin-bottom:2px}
.vf.mode-all .vf-note{opacity:.25}
@media (max-width:820px){.vf{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.bars i{animation:none;height:50%}}

/* Feature list */
.feats{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.fg{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px}
.fg h3{margin:0 0 14px;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fg ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fg li{display:grid;gap:3px}
.fn-name{font-size:16px;font-weight:600;letter-spacing:-.01em}
.fn-text{font-size:14px;line-height:1.45;color:var(--dim)}
.st{font:600 9.5px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;border-radius:20px;padding:2px 7px;margin-left:6px;vertical-align:2px}
.st.lab{border:1px solid #4a4c55;color:#a7aab3}
.st.soon{background:rgba(125,176,255,.15);color:var(--blue)}

/* Languages */
.langs{margin-top:48px;display:grid;gap:14px}
.langs h3{margin:10px 0 0;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:10px}
.lang-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:grid;gap:4px}
.lang-card.soon{opacity:.7}
.lc-name{font-size:19px;font-weight:650;letter-spacing:-.02em}
.lc-native{font-size:13px;color:var(--dim)}
.lc-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--gold)}
.lc-meta .st{margin-left:0}
.lang-grid.mixed .lang-card{background:linear-gradient(135deg,#24211b,#1c1d23 60%);border-color:#5b4d36}
.lang-note{margin:4px 0 0;font-size:14px;color:var(--dim)}

/* ============ Sales experience (21 Oct 2026): "schwarz erzählen, weiß verkaufen" ============
   Product pages tell the story in the dark; buying happens in white sections (.sell) and on the light home (body.light).
   Everything works without JavaScript: radios + CSS :checked / :has. shop.js only mirrors the choice for older browsers. */
@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/bricolage-grotesque-300.woff2") format("woff2");font-weight:300;font-display:swap}

/* Light context: the home page and every selling section */
body.light,.sell{--bg:#F5F3EE;--card:#FFFFFF;--line:#E4DFD5;--dim:#6B6A64;--text:#141412;--soft:#FAF8F4;--gold-deep:#8A6E4B;color:var(--text)}
body.light{background:var(--bg);color-scheme:light}
.sell{color-scheme:light}
body.light .nav{color:#4c4a44}
body.light .nav .acc{border-color:#d9d3c7}
body.light .testbar{background:#F1E7D3;color:#6b5330}
body.light .testbar span{color:#7d6a4b}
body.light .foot{color:#8a877f;border-color:var(--line)}
body.light .foot a,body.light .foot b{color:#4c4a44}
body.light :focus-visible,.sell :focus-visible{outline-color:#141412}
.sell{background:#fff;margin-top:clamp(70px,10vw,130px);padding-block:clamp(48px,7vw,90px);border-block:1px solid #e9e5dc}
.sell + .sell{margin-top:0;border-top:0}
.sell .h .g{background:none;color:var(--gold-deep)}
.sell .p{color:var(--dim)}
.sell .status{color:var(--gold-deep)}
.sell-head{margin-bottom:28px}
.sell-home{margin-top:22px;background:transparent;border:0;padding-block:0}
.sell .btn.ghost,body.light .btn.ghost{background:#fff;color:#141412;border-color:#d9d3c7;box-shadow:none}
.sell .btn.ghost:hover,body.light .btn.ghost:hover{border-color:#141412}
.btn.wide{width:100%}
.btn.sm{padding:7px 15px;font-size:12.5px}
.badge{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:#141412;color:var(--gold);border-radius:20px;padding:4px 9px;white-space:nowrap}
.trust{list-style:none;margin:0;padding:0;display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12.5px;color:var(--dim)}
.trust li::before{content:"✓\00a0\00a0";color:var(--gold-deep);font-weight:700}
.sell .teams{background:var(--soft);border-color:var(--line);border-radius:18px;padding:16px 20px}
.sell .teams .nm{font-size:17px}
.sell .teams .req{color:var(--gold-deep);font-size:16px}
.sell .also{color:var(--dim)}
.sell .also .link,.sell .link{color:var(--gold-deep)}

/* Buy box A · classic: product image left; badge, name, text, Yearly/Monthly switch, price, Buy + Try free, trust */
.bbA{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:30px;background:#fff;border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:0 30px 70px -45px rgba(20,20,18,.35)}
.bb-media{align-self:start}
.bb-media .pimg{width:100%;border-radius:18px}
.bb-info{position:relative;display:grid;gap:14px;align-content:center;padding:6px 10px 6px 0}
.bb-title{margin:0;font-size:34px;letter-spacing:-.045em;font-weight:650;line-height:1.05}
.bb-title .lt{font-weight:300;color:var(--dim)}
.bb-info .desc{margin:0;color:#4c4a44;line-height:1.55}
.seg{display:inline-flex;justify-self:start;background:#F0EDE6;border-radius:30px;padding:3px;gap:2px}
.seg label{font:600 13px var(--sans);color:var(--dim);padding:7px 14px;border-radius:30px;cursor:pointer;user-select:none}
.seg em{font-style:normal;color:var(--gold-deep);font-size:11px;margin-left:4px}
.bb-ry:checked ~ .seg .seg-y,.bb-rm:checked ~ .seg .seg-m{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.bb-ry:focus-visible ~ .seg .seg-y,.bb-rm:focus-visible ~ .seg .seg-m{outline:2px solid #141412;outline-offset:2px}
.amt{display:none;gap:4px}
.bb-ry:checked ~ .bb-amounts .amt-y,.bb-rm:checked ~ .bb-amounts .amt-m{display:grid}
.amount{font-size:46px;font-weight:650;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.amount small{font-size:15px;color:var(--dim);font-weight:500;letter-spacing:0;margin-left:6px}
.price-note{font-size:13px;color:var(--dim)}
.buyrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Buy box C · plan picker: screenshot left, plan rows as radio cards right; button and note follow the choice */
.bbC{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 30px 70px -45px rgba(20,20,18,.35)}
.bb-shot{background:linear-gradient(160deg,#16171c,#0b0c10);padding:28px;display:grid;align-content:center;gap:16px}
.bb-shot > img{width:100%;border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.bb-shot .cap{color:#c9ccd3;font-size:13px}
.bb-pick{padding:28px;display:grid;gap:12px;align-content:start}
.bb-pick h3{margin:0;font-size:28px;letter-spacing:-.045em;font-weight:650}
.opts{display:grid;gap:10px}
.opt{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;cursor:pointer;background:var(--soft);transition:border-color .15s,box-shadow .15s}
.opt input{accent-color:#141412;width:18px;height:18px;margin:0}
.opt-t b{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:15.5px;font-weight:650}
.opt-t small{display:block;color:var(--dim);font-size:12.5px;margin-top:2px}
.opt .pr{font-weight:650;font-size:17px;letter-spacing:-.02em;text-align:right;white-space:nowrap}
.opt .pr small{display:block;font-weight:500;letter-spacing:0;font-size:12px;color:var(--dim)}
.opt:has(input:checked),.opt.on{border-color:#141412;background:#fff;box-shadow:0 8px 20px -14px rgba(0,0,0,.5)}
.opts:has(input:checked) .opt.on:not(:has(input:checked)){border-color:var(--line);background:var(--soft);box-shadow:none}
.opt.soon{opacity:.55;cursor:default}
.opt:focus-within{outline:2px solid #141412;outline-offset:2px}
.bb-ctas > *,.bb-notes > *{display:none}
.bb-ctas > .on{display:flex}
.bb-notes > .on{display:block}
.bb-notes p{margin:0;font-size:13px;color:var(--dim);min-height:1.3em}
/* No JavaScript: the chosen row (1–8) picks its button and note. */
.bb-pick:has(.opts input:checked) .bb-ctas > .on,.bb-pick:has(.opts input:checked) .bb-notes > .on{display:none}
.bb-pick:has(.opts > :nth-child(1) input:checked) .bb-ctas > :nth-child(1),.bb-pick:has(.opts > :nth-child(2) input:checked) .bb-ctas > :nth-child(2),
.bb-pick:has(.opts > :nth-child(3) input:checked) .bb-ctas > :nth-child(3),.bb-pick:has(.opts > :nth-child(4) input:checked) .bb-ctas > :nth-child(4),
.bb-pick:has(.opts > :nth-child(5) input:checked) .bb-ctas > :nth-child(5),.bb-pick:has(.opts > :nth-child(6) input:checked) .bb-ctas > :nth-child(6),
.bb-pick:has(.opts > :nth-child(7) input:checked) .bb-ctas > :nth-child(7),.bb-pick:has(.opts > :nth-child(8) input:checked) .bb-ctas > :nth-child(8){display:flex}
.bb-pick:has(.opts > :nth-child(1) input:checked) .bb-notes > :nth-child(1),.bb-pick:has(.opts > :nth-child(2) input:checked) .bb-notes > :nth-child(2),
.bb-pick:has(.opts > :nth-child(3) input:checked) .bb-notes > :nth-child(3),.bb-pick:has(.opts > :nth-child(4) input:checked) .bb-notes > :nth-child(4),
.bb-pick:has(.opts > :nth-child(5) input:checked) .bb-notes > :nth-child(5),.bb-pick:has(.opts > :nth-child(6) input:checked) .bb-notes > :nth-child(6),
.bb-pick:has(.opts > :nth-child(7) input:checked) .bb-notes > :nth-child(7),.bb-pick:has(.opts > :nth-child(8) input:checked) .bb-notes > :nth-child(8){display:block}
/* Page editor: every button text and note can be edited, so all are shown. */
.nmd-editing .bb-ctas > *,.nmd-editing .bb-notes > *{display:flex !important}
.nmd-editing .amt{display:grid}

/* Product image tile: dark Nomad frame, real product picture, real logo bottom-left, type top-right, "//" bottom-right */
.pimg{--a:var(--tile-a,255,255,255);--b:var(--tile-b,255,255,255);position:relative;aspect-ratio:1;border-radius:24px;overflow:hidden;background:#0C0D12;isolation:isolate;container-type:inline-size;color:#fff}
.pimg::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(80% 70% at 75% 95%,rgba(var(--b),.30),transparent 60%),radial-gradient(70% 60% at 10% 10%,rgba(var(--a),.18),transparent 65%)}
.pimg::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 26%)}
.pimg canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.5;display:block}
.pimg .obj{position:absolute;z-index:3;left:9%;right:9%;top:16%;bottom:24%}
.pimg .shade{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:6;background:linear-gradient(180deg,transparent,rgba(8,9,12,.92) 70%)}
.pimg .kind{position:absolute;right:6.5%;top:6.5%;z-index:8;font:600 2.3cqw var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--a));border:1px solid rgba(var(--a),.45);border-radius:20px;padding:.9cqw 2cqw;background:rgba(0,0,0,.35)}
.pimg .slash{position:absolute;right:6.5%;bottom:6.5%;z-index:8;font:700 3.2cqw var(--mono);letter-spacing:-.14em;color:rgba(255,255,255,.55)}
.pimg .logo{position:absolute;left:6.5%;bottom:6.5%;right:16%;z-index:8;display:flex;align-items:center;gap:2.6cqw}
.pimg .logo .lg{display:block;width:auto;height:auto;max-height:8cqw;max-width:42cqw;border-radius:0}
.pimg .logo .lg.inv{filter:invert(1)}
.pimg .logo .lg.icon{height:9cqw;max-height:none;border-radius:22%}
.pimg .logo .plus + .lg{max-width:30cqw;max-height:6cqw}
.pimg .logo .plus{color:rgba(255,255,255,.5);font:300 4cqw var(--sans)}
.pimg .wm{font:300 6.4cqw/1 var(--sans);letter-spacing:-.02em;color:#fff;white-space:nowrap}
.pimg .wm.brico{font-family:"Bricolage Grotesque",var(--sans)}
.pimg .wm-mark{display:inline-block;font-size:.72em;margin-left:.08em;color:rgb(var(--b));transform:rotate(-15deg)}
.pimg .photo{border-radius:2cqw;overflow:hidden;box-shadow:0 4cqw 9cqw rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.pimg .photo img{display:block;width:100%;height:100%;object-fit:cover}
.pimg.hero-image .obj{left:7%;right:7%;top:14%;bottom:28%}
.pimg .win{border-radius:1.6cqw;overflow:hidden;background:#15161b;box-shadow:0 4cqw 8cqw rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08);transform:perspective(1400px) rotateY(-20deg) rotateX(8deg) rotateZ(-2deg);transform-origin:left center}
.pimg.hero-screenshot-window .obj{left:12%;right:-14%;top:16%;bottom:auto}
.pimg .win .bar{height:3.2cqw;display:flex;align-items:center;gap:.9cqw;padding:0 1.6cqw;background:#1d1e24;border-bottom:1px solid rgba(255,255,255,.06)}
.pimg .win .bar i{width:1.2cqw;height:1.2cqw;border-radius:50%;display:block;background:#ff5f57}
.pimg .win .bar i:nth-child(2){background:#febc2e}.pimg .win .bar i:nth-child(3){background:#28c840}
.pimg .win img{display:block;width:100%}
.pimg.hero-phones .obj{left:18%;right:6%;top:9%;bottom:12%}
.pimg .phone{position:absolute;width:42%;border-radius:5.5cqw;padding:1.1cqw;background:linear-gradient(160deg,#3a3b40,#121214);box-shadow:0 5cqw 9cqw rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.12)}
.pimg .phone img{display:block;width:100%;border-radius:4.6cqw}
.pimg .phone.a{left:0;top:4%;transform:rotate(-7deg)}
.pimg .phone.b{left:44%;top:0;transform:rotate(5deg)}
.pimg.hero-paul-glass .obj{left:9%;right:9%;top:24%;bottom:auto;perspective:1200px}
.pimg .glass{border-radius:3cqw;padding:3cqw 3.6cqw 3.4cqw;display:grid;gap:5cqw;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.29)),rgba(36,36,40,.475);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.25),0 4cqw 9cqw rgba(0,0,0,.55);transform:rotateX(8deg) rotateY(-10deg)}
.pimg .glass .top{display:flex;justify-content:space-between;align-items:center;gap:2cqw}
.pimg .glass .top img{height:4.6cqw;width:auto;opacity:.95}
.pimg .glass .st{display:flex;gap:1.4cqw;align-items:center;font:600 1.6cqw var(--sans);letter-spacing:.14em;white-space:nowrap}
.pimg .glass .st .w{display:flex;gap:.35cqw;align-items:center;height:2.4cqw}
.pimg .glass .st .w i{display:block;width:.35cqw;height:30%;border-radius:.2cqw;background:#DEC7A5}
.pimg .glass .st .w i:nth-child(2n){height:70%}.pimg .glass .st .w i:nth-child(3n){height:100%}.pimg .glass .st .w i:nth-child(5n){height:45%}
.pimg .glass .st .v{color:#DEC7A5}
.pimg .glass p{margin:0;color:#fff;font:500 3.6cqw/1.35 var(--sans);text-shadow:0 1px 3px rgba(0,0,0,.75)}
.pimg .glass p .tmp{color:rgba(255,255,255,.48)}
.pimg.soon .soon-name{position:absolute;inset:0;z-index:4;display:grid;place-items:center;align-content:center;text-align:center;gap:2cqw;padding:8%}
.pimg.soon .soon-name b{color:#fff;font-size:10cqw;letter-spacing:-.05em;font-weight:650;line-height:1}
.pimg.soon .soon-name span{font:600 2.4cqw var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--a),.85)}

/* product_image block layouts (dark story sections) */
.pi-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(40px,7vw,90px) 0}
.pi-hero .pi-txt{display:grid;gap:14px}
.pi-hero .pname{font-size:clamp(52px,7.4vw,108px)}
.pi-hero .pimg{box-shadow:0 50px 120px -50px rgba(var(--b),.6)}
.pi-band{margin-top:clamp(56px,8vw,96px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.pi-band h2,.pi-fig h2{margin:0 0 10px;font-size:clamp(30px,4vw,48px);letter-spacing:-.045em;font-weight:650;line-height:1.02}
.pi-band p,.pi-fig p{margin:0;color:var(--dim);font-size:17px;line-height:1.55}
.pi-fig{margin-top:clamp(56px,8vw,96px);margin-bottom:0;display:grid;gap:18px}
.pi-fig .pimg{aspect-ratio:16/9}
.pi-fig figcaption{max-width:62ch}
.pi-fig h2{font-size:clamp(22px,2.6vw,30px)}

/* Light home */
.home-head{padding-top:clamp(28px,5vw,60px);display:grid;gap:6px}
.home-head h1{margin:0;font-size:clamp(40px,6vw,72px);letter-spacing:-.055em;font-weight:650;line-height:1}
.home-head p{margin:0;color:var(--dim);font-size:clamp(16px,1.6vw,19px)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:clamp(36px,5vw,56px)}
.chips a{font-size:13.5px;border:1px solid var(--line);border-radius:20px;padding:7px 13px;color:var(--dim);text-decoration:none;background:#fff}
.chips a:hover{border-color:#141412;color:#141412}
.chips a.on{background:#141412;color:#fff;border-color:#141412}
/* Sections sit side by side in one 4-column grid; each spans as many columns as its cards need (span-1…4). */
body.light #products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 16px;margin-top:28px}
body.light .cat{margin:0;min-width:0;scroll-margin-top:16px}
body.light .cat.span-2{grid-column:span 2}body.light .cat.span-3{grid-column:span 3}body.light .cat.span-4{grid-column:span 4}
body.light .cat-head{display:grid;gap:2px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px}
body.light .cat-head h2{font-size:19px;letter-spacing:-.025em}
body.light .cat-head p{font-size:13px}
body.light .cat:target .cat-head h2{text-decoration:underline;text-underline-offset:4px}
body.light .cards{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:16px}
body.light .span-2 .cards{--cols:2}body.light .span-3 .cards{--cols:3}body.light .span-4 .cards{--cols:4}
.btn.sm{white-space:nowrap}
.pcard{border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);display:grid;grid-template-rows:auto 1fr;transition:transform .2s,box-shadow .2s;min-width:0}
.pcard:hover{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(0,0,0,.4)}
.pcard.wide{grid-column:span 2}
.pcard.wide .pimg{aspect-ratio:2/1}
.pcard-img{display:block}
.pcard .pimg{border-radius:0}
.pcard-body{padding:14px 16px 16px;display:grid;gap:4px;align-content:start}
.pcard-name{text-decoration:none}
.pcard-name b{font-size:16px;letter-spacing:-.02em}
.pcard .card-tag{margin:0;font-size:13px;color:var(--dim);line-height:1.45;min-height:2.9em}
.pcard-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
.from{font-size:12.5px;color:var(--dim)}
.soonpill{font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:20px;padding:3px 8px;white-space:nowrap}

/* Package picker: radio cards; the chosen package's parts with quantities; waitlist or mailto */
.pk-form{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:start}
.pk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px}
.pk-card{display:grid;gap:8px;align-content:start;border:1.5px solid var(--line);border-radius:18px;padding:14px;background:var(--soft);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pk-card img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.pk-card-t b{display:block;font-size:17px;letter-spacing:-.02em}
.pk-card-t small{display:block;color:var(--dim);font-size:13px;line-height:1.4;margin-top:2px}
.pk-dots{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.pk-dots i{width:8px;height:8px;border-radius:2px;background:#141412;display:block}
.pk-dots s{width:6px}
.pk-price{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep)}
.pk-side{position:sticky;top:16px;display:grid;gap:14px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 30px 70px -45px rgba(20,20,18,.35)}
.pk-detail{display:none}
.pk-h{margin:0 0 10px;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.pk-comps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pk-comps li{display:grid;grid-template-columns:3.2em 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.pk-comps .qty{font:650 17px var(--sans);letter-spacing:-.02em}
.pk-comps .cn{font-weight:600}
.pk-comps .units{display:flex;gap:4px}
.pk-comps .units i{display:block;width:12px;height:12px;border-radius:3px;background:linear-gradient(180deg,#34332e,#0a0a09);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.pk-note{margin:0;font-size:13px;color:var(--dim)}
.pk-cta{display:grid;gap:10px}
.pk-cta input[type=email]{border:1px solid #d9d3c7;background:#fff;color:var(--text);border-radius:40px;padding:12px 18px;font:400 15px var(--sans);width:100%}
.pk-cta .btn{white-space:normal;text-align:center;gap:.3em;flex-wrap:wrap}
.pk-names > span,.pk-mails > a{display:none}
.pk-legend{margin-top:34px}
.pk-legend h3{margin:0 0 12px;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.pk-legend dl{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:12px}
.pk-legend dl > div{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--soft);display:grid;gap:4px;align-content:start}
.pk-legend img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;margin-bottom:6px}
.pk-legend dt{font-weight:650}
.pk-legend dd{margin:0;font-size:13.5px;color:var(--dim);line-height:1.45}
/* The chosen package (1–8): highlighted card, its parts, its name in the button, its mail link. */
.pk-r:nth-of-type(1):checked ~ .pk-cards > :nth-child(1),.pk-r:nth-of-type(2):checked ~ .pk-cards > :nth-child(2),.pk-r:nth-of-type(3):checked ~ .pk-cards > :nth-child(3),.pk-r:nth-of-type(4):checked ~ .pk-cards > :nth-child(4),
.pk-r:nth-of-type(5):checked ~ .pk-cards > :nth-child(5),.pk-r:nth-of-type(6):checked ~ .pk-cards > :nth-child(6),.pk-r:nth-of-type(7):checked ~ .pk-cards > :nth-child(7),.pk-r:nth-of-type(8):checked ~ .pk-cards > :nth-child(8)
 {border-color:#141412;background:#fff;box-shadow:0 8px 20px -14px rgba(0,0,0,.5)}
.pk-r:nth-of-type(1):focus-visible ~ .pk-cards > :nth-child(1),.pk-r:nth-of-type(2):focus-visible ~ .pk-cards > :nth-child(2),.pk-r:nth-of-type(3):focus-visible ~ .pk-cards > :nth-child(3),.pk-r:nth-of-type(4):focus-visible ~ .pk-cards > :nth-child(4),
.pk-r:nth-of-type(5):focus-visible ~ .pk-cards > :nth-child(5),.pk-r:nth-of-type(6):focus-visible ~ .pk-cards > :nth-child(6),.pk-r:nth-of-type(7):focus-visible ~ .pk-cards > :nth-child(7),.pk-r:nth-of-type(8):focus-visible ~ .pk-cards > :nth-child(8)
 {outline:2px solid #141412;outline-offset:2px}
.pk-r:nth-of-type(1):checked ~ .pk-side .pk-details > :nth-child(1),.pk-r:nth-of-type(2):checked ~ .pk-side .pk-details > :nth-child(2),.pk-r:nth-of-type(3):checked ~ .pk-side .pk-details > :nth-child(3),.pk-r:nth-of-type(4):checked ~ .pk-side .pk-details > :nth-child(4),
.pk-r:nth-of-type(5):checked ~ .pk-side .pk-details > :nth-child(5),.pk-r:nth-of-type(6):checked ~ .pk-side .pk-details > :nth-child(6),.pk-r:nth-of-type(7):checked ~ .pk-side .pk-details > :nth-child(7),.pk-r:nth-of-type(8):checked ~ .pk-side .pk-details > :nth-child(8){display:block}
.pk-r:nth-of-type(1):checked ~ .pk-side .pk-names > :nth-child(1),.pk-r:nth-of-type(2):checked ~ .pk-side .pk-names > :nth-child(2),.pk-r:nth-of-type(3):checked ~ .pk-side .pk-names > :nth-child(3),.pk-r:nth-of-type(4):checked ~ .pk-side .pk-names > :nth-child(4),
.pk-r:nth-of-type(5):checked ~ .pk-side .pk-names > :nth-child(5),.pk-r:nth-of-type(6):checked ~ .pk-side .pk-names > :nth-child(6),.pk-r:nth-of-type(7):checked ~ .pk-side .pk-names > :nth-child(7),.pk-r:nth-of-type(8):checked ~ .pk-side .pk-names > :nth-child(8){display:inline}
.pk-r:nth-of-type(1):checked ~ .pk-side .pk-mails > :nth-child(1),.pk-r:nth-of-type(2):checked ~ .pk-side .pk-mails > :nth-child(2),.pk-r:nth-of-type(3):checked ~ .pk-side .pk-mails > :nth-child(3),.pk-r:nth-of-type(4):checked ~ .pk-side .pk-mails > :nth-child(4),
.pk-r:nth-of-type(5):checked ~ .pk-side .pk-mails > :nth-child(5),.pk-r:nth-of-type(6):checked ~ .pk-side .pk-mails > :nth-child(6),.pk-r:nth-of-type(7):checked ~ .pk-side .pk-mails > :nth-child(7),.pk-r:nth-of-type(8):checked ~ .pk-side .pk-mails > :nth-child(8){display:inline-flex}
.nmd-editing .pk-detail{display:block;margin-bottom:12px}

@media (max-width:980px){
 .bbA,.bbC,.pk-form,.pi-hero,.pi-band{grid-template-columns:1fr}
 body.light #products{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.light .cat.span-3,body.light .cat.span-4{grid-column:span 2}
 body.light .span-3 .cards,body.light .span-4 .cards{--cols:2}
 .pk-side{position:static}
}
@media (max-width:560px){
 body.light #products{grid-template-columns:1fr}
 body.light .cat.span-2,body.light .cat.span-3,body.light .cat.span-4{grid-column:auto}
 body.light .cards{--cols:1 !important;grid-template-columns:1fr}
 .pcard.wide{grid-column:auto}
 .pcard.wide .pimg{aspect-ratio:1}
 .bbA{padding:14px;gap:18px}
 .bb-info{padding:0}
 .bb-pick,.bb-shot{padding:18px}
 .amount{font-size:38px}
 .opt{grid-template-columns:auto 1fr;}
 .opt .pr{grid-column:2;text-align:left}
 .pi-fig .pimg{aspect-ratio:4/3}
 /* Packages as a swipe strip, so the chosen package's parts stay close below */
 .pk-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
 .pk-card{scroll-snap-align:start}
}

/* ============ Shared bits of the selling sections (21 Oct 2026) ============ */
.pcard-name .byline{display:block;margin-top:1px;font-size:12px;font-weight:500;color:var(--dim);letter-spacing:0}
.pimg .logo .plus.by{font:600 2.1cqw var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap}
.pi-hero .pname{overflow-wrap:anywhere}
.sell:has(+ .sell){border-bottom:0;padding-bottom:clamp(36px,5vw,64px)}
.faq-h{margin:0 0 18px;font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.045em}
.sell-faq{padding-block:0 clamp(28px,4vw,48px)}
.sell-faq .faq{margin-top:0;border-top:0}
.sell-faq .faq details:first-of-type{border-top:1px solid var(--line)}
.sell-faq .faq details{border-color:var(--line)}
.sell-faq .faq p{color:var(--dim)}
.sell-band{padding-block:0 clamp(48px,7vw,90px)}
.sell-band .teams{margin-top:0}

/* ============ APOLLON SYSTEMS · hardware hero, device tiles, system configurator (21 Oct 2026) ============
   AudioCrypt look: near-black cards, fine hairlines, warm gold, product photos in soft light, small-caps eyebrows.
   Everything works without JavaScript: radios / checkboxes / a range input in one form; :checked and :has pick the
   stage scene, the dock and the summary entry of the chosen system (s1…s12) and programmes (p1…p12). */
.sh,.dt,.cfg-sec,.ap-sec{--ac-bg:#0A0A0B;--ac-card:#111113;--ac-card2:#161618;--ac-line:#2B2B30;--ac-line2:#3A3A41;--ac-gold:#C9A15A;--ac-gold-hi:#E6C995;
 --ac-text:#F3EEE7;--ac-dim:#AAA6A0;--ac-mute:#7C7872;--ac-ease:cubic-bezier(.2,.7,.2,1);color:var(--ac-text)}
.eyebrow{margin:0;font:600 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-gold,#C9A15A)}
/* AudioCrypt lockup: the real logo file (black on transparent, inverted on dark) + the model name */
.lk{display:inline-flex;align-items:center;gap:.42em;white-space:nowrap;max-width:100%}
.lk-logo{--lh:.86em;height:var(--lh);width:auto;flex:none;filter:invert(1);opacity:.96}
/* The AudioCrypt logo file has 178 of its 500 px as transparent space on the right: crop it everywhere */
img[src$="/audiocrypt-logo.png"]{aspect-ratio:322/70;object-fit:cover;object-position:left center}
.lk-model{overflow:hidden;text-overflow:ellipsis}

/* Series lockup: [AudioCrypt] × [Apollon], both real logo files */
.series{--sh:16px;display:inline-flex;align-items:center;gap:calc(var(--sh) * .75);line-height:1}
.series-ac{height:var(--sh);width:auto}
.series-ap{height:calc(var(--sh) * 1.1);width:auto}
.series-div{width:1px;height:calc(var(--sh) * 1.5);background:currentColor;opacity:.32}
.series-dark{color:#F3EEE7}.series-light{color:#141412}
.series-dark .series-ac{filter:invert(1)}
.pimg .logo .plus.div{width:1px;height:7cqw;background:rgba(255,255,255,.4)}
.series-light .series-ap{filter:invert(1)}
.sh-series .series{--sh:clamp(20px,2.2vw,26px)}
.sh-series{margin-bottom:10px}
.cfg-sum-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cfg-sum-h .series{--sh:12px;opacity:.9}
.pcard-name .by-series{display:flex;align-items:center;gap:8px;margin-top:4px}
.by-series .series{--sh:11px}

/* Hero */
.sh{position:relative;overflow:hidden;padding-block:clamp(48px,8vw,110px) clamp(40px,6vw,80px)}
.sh::before{content:"";position:absolute;inset:-20% -10% auto 35%;height:120%;background:radial-gradient(45% 45% at 55% 50%,rgba(201,161,90,.16),rgba(201,161,90,0) 70%);pointer-events:none}
.sh-in{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.sh-txt{display:grid;gap:16px;justify-items:start}
.sh-mark{height:clamp(22px,2.4vw,30px);width:auto;opacity:.92;margin-bottom:6px}
.sh-title{margin:0;font-weight:650;font-size:clamp(46px,6.6vw,96px);line-height:.92;letter-spacing:-.05em;text-wrap:balance}
.sh-by{margin:0;display:flex;align-items:center;gap:12px;font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ac-dim)}
.sh-logo{height:22px;width:auto;filter:invert(1)}
.sh-text{margin:4px 0 0;max-width:44ch;font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:var(--ac-dim)}
.sh .ctas{margin-top:8px}
.sh-photo{position:relative;border-radius:26px;padding:1px;background:linear-gradient(160deg,rgba(201,161,90,.45),rgba(255,255,255,.05) 35%,rgba(255,255,255,.02) 70%,rgba(201,161,90,.25))}
.sh-photo::after{content:"";position:absolute;inset:auto 8% -30px;height:60px;background:radial-gradient(50% 50% at 50% 50%,rgba(201,161,90,.28),transparent 70%);filter:blur(10px);z-index:-1}
.sh-photo img{display:block;width:100%;border-radius:25px;box-shadow:0 60px 120px -50px rgba(0,0,0,.9)}
.btn.gold,.cfg-sec .btn.gold,.sh .btn.gold{background:linear-gradient(180deg,#EAD09F 0%,#C9A15A 55%,#A8823E 100%);color:#15100A;border-color:rgba(255,255,255,.28);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 34px -14px rgba(201,161,90,.6)}
.sh .btn.gold:hover,.cfg-sec .btn.gold:hover{border-color:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 18px 40px -14px rgba(201,161,90,.75)}

/* What's inside: device tiles after audiocrypt.io/hardware */
.dt{padding-block:clamp(40px,6vw,80px) 0}
.dt-head{display:grid;gap:10px;margin-bottom:26px;max-width:640px}
.dt-head h2{margin:0;font-size:clamp(30px,3.8vw,48px);font-weight:650;letter-spacing:-.045em;line-height:1.02}
.dt-sub{margin:0;color:var(--ac-dim);font-size:16px;line-height:1.55}
.dt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dt-card{position:relative;display:flex;flex-direction:column;background:var(--ac-card);border:1px solid var(--ac-line);border-radius:16px;padding:22px;overflow:hidden;
 transition:transform .3s var(--ac-ease),border-color .3s,box-shadow .3s}
.dt-card:hover{transform:translateY(-3px);border-color:var(--ac-line2);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.dt-card.wide{grid-column:span 2}
.dt-img{position:relative;height:210px;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;margin:-4px -4px 16px;border-radius:12px;
 background:radial-gradient(55% 60% at 50% 58%,rgba(255,255,255,.085),rgba(255,255,255,0) 72%)}
.dt-img img{grid-area:1/1;width:auto;height:auto;min-height:0;max-height:100%;max-width:88%;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(0,0,0,.75)) brightness(1.08);transition:opacity .35s var(--ac-ease),transform .5s var(--ac-ease)}
.dt-card:hover .dt-img img{transform:scale(1.03)}
.dt-card.wide .dt-img{height:auto;aspect-ratio:16/8;background:none;overflow:hidden}
.dt-card.wide .dt-img img{max-width:100%;width:100%;height:100%;object-fit:cover;border-radius:12px;filter:none}
.dt-r1:checked ~ .dt-img .i2,.dt-r2:checked ~ .dt-img .i1{opacity:0;transform:scale(.96)}
.dt-sw{position:absolute;top:16px;right:16px;display:flex;padding:3px;gap:2px;border-radius:30px;background:rgba(10,10,11,.75);border:1px solid var(--ac-line)}
.dt-sw label{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ac-dim);padding:6px 10px;border-radius:30px;cursor:pointer;transition:background .2s,color .2s}
.dt-sw label:hover{color:var(--ac-text)}
.dt-r1:checked ~ .dt-sw .l1,.dt-r2:checked ~ .dt-sw .l2{background:var(--ac-gold);color:#15100A}
.dt-r1:focus-visible ~ .dt-sw .l1,.dt-r2:focus-visible ~ .dt-sw .l2{outline:2px solid var(--ac-gold);outline-offset:2px}
.dt-txt{display:grid;gap:6px}
.dt-name{margin:2px 0 0;font-size:23px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.dt-line{margin:0;color:var(--ac-dim);font-size:15px;line-height:1.5}
.dt-spec{margin:4px 0 0;font:500 11.5px var(--mono);letter-spacing:.04em;color:var(--ac-mute)}

/* Dark FAQ and contact band on the APOLLON page keep the same hairline look */
.theme-audiocrypt .faq{margin-top:clamp(56px,8vw,100px)}
.theme-audiocrypt .teams{background:linear-gradient(90deg,#141416,#0f0f10);border-color:#2B2B30}
.theme-audiocrypt .teams .req{color:#C9A15A}

/* ---------- configurator ---------- */
.cfg-sec{position:relative;margin-top:clamp(64px,9vw,120px);padding-block:clamp(56px,8vw,110px);border-top:1px solid var(--ac-line);
 background:radial-gradient(60% 40% at 50% 0%,rgba(201,161,90,.07),transparent 70%),linear-gradient(180deg,#0B0B0C,#08080A)}
.cfg-head{display:grid;justify-items:center;text-align:center;gap:12px;margin-bottom:clamp(28px,4vw,52px)}
.cfg-title{margin:0;font-size:clamp(34px,4.8vw,64px);font-weight:650;letter-spacing:-.05em;line-height:1;text-wrap:balance}
.cfg-lede{margin:0;max-width:56ch;color:var(--ac-dim);font-size:clamp(15.5px,1.4vw,18px);line-height:1.55}
.cfg{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,3.6vw,56px);align-items:start}
.cfg-in{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.cfg .na{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-gold)}
.cfg .m,.cfg .y{font-variant-numeric:tabular-nums}
.cfg-b-m:checked ~ * .y,.cfg-b-y:checked ~ * .m,.cfg-b-o:checked ~ * .m,.cfg-b-o:checked ~ * .y,.cfg-b-m:checked ~ * .o,.cfg-b-y:checked ~ * .o{display:none}
.cfg-l-mk1:checked ~ .cfg-main .cfg-line-hub,.cfg-l-hub:checked ~ .cfg-main .cfg-line-mk1{display:none}

/* Stage (left, sticky): the chosen system's photo, its devices as cut-outs with quantities, the top view */
.cfg-side{position:sticky;top:16px;display:grid;gap:12px;min-width:0}
.cfg-stage{position:relative;border:1px solid var(--ac-line);border-radius:24px;overflow:hidden;
 background:radial-gradient(90% 60% at 50% 0%,#1B1B1E,#0D0D0E 72%)}
.st-scene{display:none;grid-template-rows:auto auto auto}
.st-scene.on{display:grid}
.cfg:has(.cfg-opt .cfg-in:checked) .st-scene.on,.cfg:has(.cfg-opt .cfg-in:checked) .cfg-ss.on,.cfg:has(.cfg-opt .cfg-in:checked) .cfg-dk.on{display:none}
.cfg:has(.cfg-opt.s1 .cfg-in:checked) .st-scene.s1,.cfg:has(.cfg-opt.s1 .cfg-in:checked) .cfg-ss.s1,.cfg:has(.cfg-opt.s1 .cfg-in:checked) .cfg-dk.s1,
.cfg:has(.cfg-opt.s2 .cfg-in:checked) .st-scene.s2,.cfg:has(.cfg-opt.s2 .cfg-in:checked) .cfg-ss.s2,.cfg:has(.cfg-opt.s2 .cfg-in:checked) .cfg-dk.s2,
.cfg:has(.cfg-opt.s3 .cfg-in:checked) .st-scene.s3,.cfg:has(.cfg-opt.s3 .cfg-in:checked) .cfg-ss.s3,.cfg:has(.cfg-opt.s3 .cfg-in:checked) .cfg-dk.s3,
.cfg:has(.cfg-opt.s4 .cfg-in:checked) .st-scene.s4,.cfg:has(.cfg-opt.s4 .cfg-in:checked) .cfg-ss.s4,.cfg:has(.cfg-opt.s4 .cfg-in:checked) .cfg-dk.s4,
.cfg:has(.cfg-opt.s5 .cfg-in:checked) .st-scene.s5,.cfg:has(.cfg-opt.s5 .cfg-in:checked) .cfg-ss.s5,.cfg:has(.cfg-opt.s5 .cfg-in:checked) .cfg-dk.s5,
.cfg:has(.cfg-opt.s6 .cfg-in:checked) .st-scene.s6,.cfg:has(.cfg-opt.s6 .cfg-in:checked) .cfg-ss.s6,.cfg:has(.cfg-opt.s6 .cfg-in:checked) .cfg-dk.s6,
.cfg:has(.cfg-opt.s7 .cfg-in:checked) .st-scene.s7,.cfg:has(.cfg-opt.s7 .cfg-in:checked) .cfg-ss.s7,.cfg:has(.cfg-opt.s7 .cfg-in:checked) .cfg-dk.s7,
.cfg:has(.cfg-opt.s8 .cfg-in:checked) .st-scene.s8,.cfg:has(.cfg-opt.s8 .cfg-in:checked) .cfg-ss.s8,.cfg:has(.cfg-opt.s8 .cfg-in:checked) .cfg-dk.s8,
.cfg:has(.cfg-opt.s9 .cfg-in:checked) .st-scene.s9,.cfg:has(.cfg-opt.s9 .cfg-in:checked) .cfg-ss.s9,.cfg:has(.cfg-opt.s9 .cfg-in:checked) .cfg-dk.s9,
.cfg:has(.cfg-opt.s10 .cfg-in:checked) .st-scene.s10,.cfg:has(.cfg-opt.s10 .cfg-in:checked) .cfg-ss.s10,.cfg:has(.cfg-opt.s10 .cfg-in:checked) .cfg-dk.s10,
.cfg:has(.cfg-opt.s11 .cfg-in:checked) .st-scene.s11,.cfg:has(.cfg-opt.s11 .cfg-in:checked) .cfg-ss.s11,.cfg:has(.cfg-opt.s11 .cfg-in:checked) .cfg-dk.s11,
.cfg:has(.cfg-opt.s12 .cfg-in:checked) .st-scene.s12,.cfg:has(.cfg-opt.s12 .cfg-in:checked) .cfg-ss.s12,.cfg:has(.cfg-opt.s12 .cfg-in:checked) .cfg-dk.s12{display:grid}
.cfg:has(.cfg-opt .cfg-in:checked) .cfg-dk.on{display:none}
.cfg-dk{display:none;align-items:center;gap:14px;min-width:0}
.cfg-dk.on{display:flex}
.st-scene{animation:stIn .55s var(--ac-ease)}
@keyframes stIn{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}
.st-photo{position:relative;aspect-ratio:16/9;overflow:hidden}
@media (max-height:780px) and (min-width:981px){.st-photo{aspect-ratio:2/1}}
.st-photo img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}
.st-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,14,.55) 0%,rgba(13,13,14,0) 30%,rgba(13,13,14,0) 55%,#0E0E0F 100%)}
.st-cap{position:absolute;left:22px;top:20px;right:22px;display:grid;gap:4px;z-index:2}
.st-k{font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ac-gold)}
.st-name{font-size:clamp(22px,2.3vw,30px);font-weight:600;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.st-parts{position:relative;z-index:2;list-style:none;margin:-64px 0 0;padding:0 18px;display:flex;gap:10px;flex-wrap:wrap}
.st-parts li{display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 10px;padding:8px 14px 8px 8px;border-radius:16px;
 background:rgba(17,17,19,.82);border:1px solid var(--ac-line2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.st-pic{grid-row:span 2;width:52px;height:52px;border-radius:11px;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 55%,rgba(255,255,255,.12),rgba(255,255,255,.02) 75%)}
.st-pic img{max-width:44px;max-height:44px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.8)) brightness(1.15)}
.st-pic:empty::before{content:"";width:22px;height:14px;border:1.5px solid var(--ac-gold);border-radius:3px}
.st-x{font:700 17px var(--mono);color:var(--ac-gold-hi);letter-spacing:-.02em}
.st-n{font-size:12px;color:var(--ac-dim)}
.st-plan{margin:0;padding:10px 18px 16px}
.st-plan .dg{max-height:min(210px,26vh);margin-inline:auto}
/* The top view (SVG): gold hairlines on dark, tiny mono labels */
.dg{display:block;width:100%;height:auto;overflow:visible}
.dg-bench{fill:rgba(255,255,255,.025);stroke:rgba(243,238,231,.42);stroke-width:1}
.dg-sat,.dg-box{fill:#141416;stroke:rgba(243,238,231,.55);stroke-width:1}
.dg-amp{stroke:var(--ac-gold,#C9A15A)}
.dg-bm{fill:rgba(201,161,90,.1);stroke:var(--ac-gold,#C9A15A);stroke-width:1.1;stroke-dasharray:3 2.4}
.dg-bm.dg-opt{opacity:.45}
.dg-sub{fill:rgba(201,161,90,.06);stroke:var(--ac-gold,#C9A15A);stroke-width:1;stroke-dasharray:3 2.4}
.dg-ring{fill:none;stroke:rgba(201,161,90,.75);stroke-width:1}
.dg-dot{fill:var(--ac-gold,#C9A15A)}
.dg-wire{fill:none;stroke:rgba(201,161,90,.7);stroke-width:1;stroke-dasharray:1.5 2.5}
.dg-t{font:600 7.5px var(--mono);letter-spacing:.12em;fill:rgba(243,238,231,.78)}
.dg-dim{fill:rgba(243,238,231,.45)}
.dg-gold{fill:var(--ac-gold,#C9A15A)}
.dg-b{fill:#F3EEE7;font-size:8px}
.dg-k{fill:var(--ac-gold,#C9A15A);font-size:8.5px;letter-spacing:.18em}

/* Dock: chosen system + price + button (next to the stage; a bottom bar on phones) */
.cfg-dock{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 12px 12px 20px;border:1px solid var(--ac-line);border-radius:20px;
 background:rgba(17,17,19,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.cfg-dock-t{display:grid;min-width:0}
.cfg-dk-p{font-size:15px;font-weight:600;color:var(--ac-gold-hi);white-space:nowrap}
.cfg-dk-p small,.cfg-dk-live small{font-size:12px;font-weight:500;color:var(--ac-dim);margin-left:3px}
.cfg-dk-live{font-size:13px;color:var(--ac-dim)}
.cfg-dk-live b{color:var(--ac-gold-hi);font-size:15px}
/* Several rooms: the dock shows the total of all rooms instead of one system */
.cfg.multi .cfg-dk{display:none!important}
.cfg.multi .cfg-dk-live{display:grid}
.cfg-dk-k{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-gold)}
.cfg-dock .btn{flex:none;padding:12px 20px;font-size:14.5px}

/* Steps (right): airy, hairline-separated, numbered in gold */
.cfg-main{display:grid;min-width:0}
.cfg-step{display:grid;gap:16px;padding-block:26px;border-top:1px solid var(--ac-line)}
.cfg-step:first-child{border-top:0;padding-top:0}
.cfg-step-h{display:flex;align-items:center;gap:14px}
.cfg-n{font:600 11px var(--mono);letter-spacing:.12em;color:var(--ac-gold)}
.cfg-step-h h3{margin:0;font-size:clamp(21px,2vw,26px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.cfg-step-text{margin:-6px 0 0;color:var(--ac-dim);font-size:14.5px;line-height:1.55}
.cfg-mark{margin-left:auto;height:20px;width:auto;opacity:.85}

/* Wide segmented controls with two levels (label + sub-label) */
.cfg-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:5px;border-radius:20px;background:#0E0E10;border:1px solid var(--ac-line)}
.cfg-seg label{position:relative;display:grid;align-content:center;gap:3px;padding:16px 18px;border-radius:15px;cursor:pointer;user-select:none;color:var(--ac-dim);
 transition:background .25s var(--ac-ease),color .25s,box-shadow .25s,transform .12s}
.cfg-seg label:hover{background:#161618;color:var(--ac-text)}
.cfg-seg b{font-size:16px;font-weight:600;letter-spacing:-.01em;color:inherit}
.cfg-seg small{font-size:12.5px;line-height:1.4;color:var(--ac-mute)}
.cfg-bill label{grid-auto-flow:column;justify-content:center;align-items:center;gap:10px;padding:14px 18px;text-align:center}
.cfg-l-mk1:checked ~ .cfg-main .seg-mk1,.cfg-l-hub:checked ~ .cfg-main .seg-hub,.cfg-b-m:checked ~ .cfg-main .seg-m,.cfg-b-y:checked ~ .cfg-main .seg-y,.cfg-b-o:checked ~ .cfg-main .seg-o{
 background:linear-gradient(180deg,#1F1F22,#161618);color:var(--ac-text);box-shadow:inset 0 0 0 1px rgba(201,161,90,.6),inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px -16px rgba(0,0,0,.9)}
.cfg-l-mk1:checked ~ .cfg-main .seg-mk1 small,.cfg-l-hub:checked ~ .cfg-main .seg-hub small{color:var(--ac-dim)}
.cfg-l-mk1:focus-visible ~ .cfg-main .seg-mk1,.cfg-l-hub:focus-visible ~ .cfg-main .seg-hub,.cfg-b-m:focus-visible ~ .cfg-main .seg-m,.cfg-b-y:focus-visible ~ .cfg-main .seg-y,.cfg-b-o:focus-visible ~ .cfg-main .seg-o{outline:2px solid var(--ac-gold);outline-offset:2px}
.cfg-save{display:none;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:#15100A;background:var(--ac-gold);border-radius:20px;padding:4px 8px}
.cfg:has(.cfg-opt.s1 .cfg-in:checked) .cfg-save.s1,
.cfg:has(.cfg-opt.s2 .cfg-in:checked) .cfg-save.s2,
.cfg:has(.cfg-opt.s3 .cfg-in:checked) .cfg-save.s3,
.cfg:has(.cfg-opt.s4 .cfg-in:checked) .cfg-save.s4,
.cfg:has(.cfg-opt.s5 .cfg-in:checked) .cfg-save.s5,
.cfg:has(.cfg-opt.s6 .cfg-in:checked) .cfg-save.s6,
.cfg:has(.cfg-opt.s7 .cfg-in:checked) .cfg-save.s7,
.cfg:has(.cfg-opt.s8 .cfg-in:checked) .cfg-save.s8,
.cfg:has(.cfg-opt.s9 .cfg-in:checked) .cfg-save.s9,
.cfg:has(.cfg-opt.s10 .cfg-in:checked) .cfg-save.s10,
.cfg:has(.cfg-opt.s11 .cfg-in:checked) .cfg-save.s11,
.cfg:has(.cfg-opt.s12 .cfg-in:checked) .cfg-save.s12{display:inline-block}

/* System cards: design B (slim, centred, airy), the top view on top, a gold state ring */
.cfg-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cfg-opt{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 18px 20px;border-radius:22px;cursor:pointer;
 background:linear-gradient(180deg,#141416,#0F0F10);border:1px solid var(--ac-line);
 transition:transform .3s var(--ac-ease),border-color .25s,box-shadow .3s var(--ac-ease)}
.cfg-opt:hover{border-color:var(--ac-line2);box-shadow:0 26px 50px -30px rgba(0,0,0,.95)}
.cfg-ring{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;border:1px solid var(--ac-line2);display:grid;place-items:center;transition:background .2s,border-color .2s}
.cfg-ring::after{content:"";width:7px;height:4px;border-left:1.6px solid #15100A;border-bottom:1.6px solid #15100A;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.cfg-opt:has(.cfg-in:checked),.cfg-opt.on{border-color:rgba(201,161,90,.85);background:radial-gradient(80% 60% at 50% 0%,rgba(201,161,90,.1),transparent 70%),linear-gradient(180deg,#17171A,#101011);
 box-shadow:0 0 0 1px rgba(201,161,90,.5),0 28px 60px -30px rgba(201,161,90,.35)}
.cfg-opts:has(.cfg-in:checked) .cfg-opt.on:not(:has(.cfg-in:checked)){border-color:var(--ac-line);background:linear-gradient(180deg,#141416,#0F0F10);box-shadow:none}
.cfg-opt:has(.cfg-in:checked) > .cfg-ring,.cfg-opt.on > .cfg-ring{background:var(--ac-gold);border-color:var(--ac-gold)}
.cfg-opt:has(.cfg-in:checked) > .cfg-ring::after,.cfg-opt.on > .cfg-ring::after{opacity:1}
.cfg-opts:has(.cfg-in:checked) .cfg-opt.on:not(:has(.cfg-in:checked)) > .cfg-ring{background:none;border-color:var(--ac-line2)}
.cfg-opts:has(.cfg-in:checked) .cfg-opt.on:not(:has(.cfg-in:checked)) > .cfg-ring::after{opacity:0}
.cfg-opt:has(.cfg-in:focus-visible),.cfg-pick:has(.cfg-in:focus-visible),.cfg-single:has(.cfg-in:focus-visible){outline:2px solid var(--ac-gold);outline-offset:3px}
.cfg-opt-dg{width:100%;max-width:250px;margin:2px 0 4px}
.cfg-opt-dg .dg-t{display:none}
.cfg-opt-name{font-size:21px;font-weight:600;letter-spacing:-.025em;margin-top:2px;max-width:100%}
.cfg-opt-line{font-size:13px;color:var(--ac-dim);line-height:1.5;max-width:36ch}
.cfg-opt-price{margin-top:4px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.cfg-opt-price small,.cfg-pick-p small{font-size:12px;font-weight:500;color:var(--ac-dim);margin-left:3px}
.cfg-box{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--ac-line);width:100%}
.cfg-parts{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12.5px;color:var(--ac-dim)}
.cfg-opt .cfg-box{margin-top:6px}
.cfg-opt .cfg-parts{justify-content:center;font-size:12px}
.cfg-ss .cfg-parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cfg-box .qty{color:var(--ac-gold-hi);font-weight:600;font-variant-numeric:tabular-nums}
.cfg-by{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;color:var(--ac-text)}
.cfg-by-k{font:600 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-mute)}
.cfg-by .lk-logo{--lh:.82em}
.cfg-opt .cfg-by{justify-content:center}
.st-cap .cfg-by{font-size:13.5px;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.cfg-ss-desc{font-size:13.5px;line-height:1.5;color:var(--ac-dim)}
.cfg-dk-n{font-size:16px;font-weight:600;letter-spacing:-.01em}
.cfg-power{font-size:12px;color:var(--ac-dim)}
.cfg-power b{color:var(--ac-text)}
/* Wide, flat system cards (one per row): top view left, name + powered by + sentence in the middle, price right, parts below */
@media (min-width:641px){
 .cfg-opts{grid-template-columns:minmax(0,1fr);gap:10px}
 .cfg-opt{display:grid;grid-template-columns:112px minmax(0,1fr) auto;grid-template-areas:"dg name price" "dg by price" "dg line line" "dg box box" "dg power power";
  align-items:center;text-align:left;gap:3px 20px;padding:16px 52px 16px 16px;border-radius:18px}
 .cfg-opt-dg{grid-area:dg;align-self:center;max-width:none;margin:0}
 .cfg-opt-name{grid-area:name;font-size:19px;margin:0}
 .cfg-opt .cfg-by{grid-area:by;justify-content:flex-start;font-size:12.5px}
 .cfg-opt-line{grid-area:line;max-width:none;font-size:13px;margin-top:2px}
 .cfg-opt-price{grid-area:price;align-self:start;margin:0;font-size:15px;text-align:right;white-space:nowrap}
 .cfg-opt .cfg-box{grid-area:box;display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;margin-top:6px;padding-top:8px}
 .cfg-opt .cfg-box{border-top:0;padding-top:0}
 .cfg-opt .cfg-box .cfg-k2{display:none}
 .cfg-opt .cfg-parts{justify-content:flex-start;gap:4px;font-size:11.5px}
 .cfg-opt .cfg-part{padding:2px 8px;border-radius:20px;border:1px solid var(--ac-line);white-space:nowrap}
 .cfg-opt .cfg-power{grid-area:power}
}

/* Rooms: a native range input, styled; the tick scale shows the value without JavaScript */
.cfg-rooms{display:grid;gap:6px;--fill:0%}
.cfg-range{-webkit-appearance:none;appearance:none;width:100%;height:36px;margin:0;background:transparent;cursor:pointer}
.cfg-range::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--ac-gold) 0 var(--fill),#2B2B30 var(--fill))}
.cfg-range::-moz-range-track{height:6px;border-radius:6px;background:#2B2B30}
.cfg-range::-moz-range-progress{height:6px;border-radius:6px;background:var(--ac-gold)}
.cfg-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
 background:radial-gradient(circle at 50% 35%,#FFF6E4,#E6C995 45%,#B08A45);box-shadow:0 6px 18px -4px rgba(0,0,0,.9),0 0 0 6px rgba(201,161,90,.12);transition:transform .15s}
.cfg-range::-moz-range-thumb{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:radial-gradient(circle at 50% 35%,#FFF6E4,#E6C995 45%,#B08A45);box-shadow:0 6px 18px -4px rgba(0,0,0,.9),0 0 0 6px rgba(201,161,90,.12)}
.cfg-range:active::-webkit-slider-thumb{transform:scale(1.08)}
.cfg-range:focus-visible{outline:none}
.cfg-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #0A0A0B,0 0 0 5px var(--ac-gold)}
.cfg-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #0A0A0B,0 0 0 5px var(--ac-gold)}
.cfg-ticks{display:flex;justify-content:space-between;padding-inline:9px;font:500 11px var(--mono);color:var(--ac-mute)}
.cfg-ticks span{width:20px;text-align:center}
/* HUB One: any mix of NetAmps per room (shown while the HUB One line is chosen) */
.cfg-na-box{display:grid;gap:14px;margin-top:6px;padding:20px;border-radius:20px;border:1px solid var(--ac-line);background:linear-gradient(180deg,var(--ac-card2),var(--ac-card))}
.cfg-r.cfg-l-mk1:checked ~ .cfg-main .cfg-na-box{display:none}
.cfg-na-h h4{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em}
.cfg-na-h p{margin:4px 0 0;font-size:13.5px;color:var(--ac-dim);line-height:1.5}
.cfg-na-list{display:grid;gap:8px}
.cfg-na{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:14px 14px 14px 18px;border-radius:16px;border:1px solid var(--ac-line);background:rgba(10,10,11,.4);transition:border-color .25s,box-shadow .25s}
.cfg-na.on{border-color:rgba(201,161,90,.7);box-shadow:0 0 0 1px rgba(201,161,90,.35) inset}
.cfg-na-t{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:3px 10px;min-width:0}
.cfg-na-t b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.cfg-na-o{justify-self:start;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ac-gold);padding:3px 8px;border:1px solid rgba(201,161,90,.4);border-radius:20px}
.cfg-na-t small{grid-column:1/-1;font-size:12.5px;color:var(--ac-dim);line-height:1.45}
.cfg-na-p{grid-column:1/-1;font-size:13px;color:var(--ac-gold-hi)}
.cfg-na-p small{color:var(--ac-dim);margin-left:2px}
.cfg-na-q{display:flex;align-items:center;gap:4px;padding:4px;border-radius:40px;border:1px solid var(--ac-line2);background:#0C0C0D}
.cfg-na-in,.cfg-dev-in{width:44px;height:36px;border:0;background:transparent;color:var(--ac-text);font:600 18px var(--sans,inherit);text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.cfg-na-in::-webkit-inner-spin-button,.cfg-na-in::-webkit-outer-spin-button,.cfg-dev-in::-webkit-inner-spin-button,.cfg-dev-in::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cfg-na-in:focus-visible,.cfg-dev-in:focus-visible{outline:2px solid var(--ac-gold);outline-offset:2px;border-radius:8px}
.cfg-na-b{width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;font:500 20px/1 var(--sans,inherit);color:#15100A;background:linear-gradient(180deg,#E6C995,#C9A15A);transition:opacity .2s,transform .15s}
.cfg-na-b:first-of-type{color:var(--ac-text);background:#222226}
.cfg-na-b:hover:not(:disabled){transform:scale(1.06)}
.cfg-na-b:disabled{opacity:.3;cursor:default}
.cfg-na-b:focus-visible{outline:2px solid var(--ac-gold);outline-offset:2px}
.cfg-dev-h{margin-top:10px;padding-top:16px;border-top:1px solid var(--ac-line)}
.cfg-dev{grid-template-columns:56px 1fr auto;padding-left:10px}
.cfg-dev-pic{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 55%,rgba(255,255,255,.12),rgba(255,255,255,.02) 75%)}
.cfg-dev-pic img{max-width:46px;max-height:46px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.8)) brightness(1.15)}
.cfg-dev .cfg-na-t{grid-template-columns:1fr}
.cfg-ch{margin:8px 0 0;display:inline-block;padding:5px 10px;border-radius:20px;font:600 11px var(--mono);letter-spacing:.06em;color:var(--ac-gold-hi);border:1px solid rgba(201,161,90,.4)}
.cfg-ch.full{color:#15100A;background:var(--ac-gold);border-color:var(--ac-gold)}
.cfg-ch[hidden]{display:none}
.cfg-dep{display:block;font-size:11.5px;font-weight:500;color:var(--ac-dim)}
.cfg-na-p .cfg-dep{display:inline;margin-left:8px}
.cfg-na-p .cfg-dep::before{content:"· "}
/* Rooms: one tab per room (hardware + sound), the active room's head, the room list in the summary */
.cfg-roombar{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;margin-top:6px;scroll-snap-type:x proximity;scrollbar-width:thin}
.cfg-roombar[hidden],.cfg-roomhead[hidden],.cfg-roomlist[hidden],.cfg-stage-room[hidden],.cfg-roomcards[hidden],.cfg-next[hidden]{display:none}
.cfg-room{flex:0 0 auto;min-width:168px;max-width:220px;display:grid;gap:3px;text-align:left;padding:14px 16px;border-radius:16px;cursor:pointer;scroll-snap-align:start;
 font:inherit;color:var(--ac-text);background:linear-gradient(180deg,var(--ac-card2),var(--ac-card));border:1px solid var(--ac-line);transition:border-color .25s,transform .25s var(--ac-ease),box-shadow .25s}
.cfg-room:hover{border-color:var(--ac-line2)}
.cfg-room.on{border-color:var(--ac-gold);box-shadow:0 0 0 1px var(--ac-gold) inset,0 18px 40px -24px rgba(201,161,90,.55)}
.cfg-room:focus-visible{outline:2px solid var(--ac-gold);outline-offset:3px}
.cfg-room-k{font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ac-gold)}
.cfg-room-s{font-size:15px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-room-p{font-size:12.5px;color:var(--ac-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-room-tag{justify-self:start;margin-top:4px;padding:3px 8px;border-radius:20px;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ac-dim);border:1px solid var(--ac-line2)}
.cfg-roomhead{position:sticky;top:12px;z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px;padding:14px 18px;border-radius:14px;
 background:rgba(24,21,15,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(201,161,90,.38);box-shadow:0 16px 36px -22px rgba(0,0,0,.9)}
.cfg-roomhead-t{margin:0;margin-right:auto;font-size:15px;color:var(--ac-dim)}
.cfg-roomhead-t b{color:var(--ac-gold-hi);font-weight:600}
.cfg-roomhead .cfg-room-tag{margin:0}
.cfg-link{font:600 13px var(--sans,inherit);color:var(--ac-text);background:transparent;border:1px solid var(--ac-line2);border-radius:30px;padding:8px 14px;cursor:pointer;transition:border-color .2s,background .2s}
.cfg-link:hover{border-color:var(--ac-gold);background:rgba(201,161,90,.08)}
.cfg-link:focus-visible{outline:2px solid var(--ac-gold);outline-offset:2px}
.cfg-roomlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cfg-roomlist button{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font:inherit;color:inherit;text-align:left;cursor:pointer;
 background:transparent;border:1px solid var(--ac-line);transition:border-color .2s,background .2s}
.cfg-roomlist button:hover{border-color:var(--ac-line2)}
.cfg-roomlist li.on button{border-color:rgba(201,161,90,.6);background:rgba(201,161,90,.06)}
.cfg-rl-k{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-gold)}
.cfg-rl-t{display:grid;min-width:0}
.cfg-rl-t b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-rl-t small{font-size:12px;color:var(--ac-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-rl-a{font-size:14px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.cfg-rl-a small{font-weight:400;color:var(--ac-dim);margin-left:3px}
.cfg-stage-room{position:absolute;z-index:3;top:16px;right:16px;padding:7px 12px;border-radius:30px;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
 color:#15100A;background:linear-gradient(180deg,#E6C995,#C9A15A);box-shadow:0 10px 24px -10px rgba(0,0,0,.9)}
/* Desktop with several rooms: the left column lists every room (the active one open), the stage photo steps aside */
.cfg-roomcards{display:grid;gap:10px}
.cfg-rc{display:grid;grid-template-columns:minmax(0,1fr) 104px;grid-template-areas:"h dg" "s dg" "p dg";align-items:center;gap:2px 14px;width:100%;text-align:left;font:inherit;color:var(--ac-text);cursor:pointer;
 padding:12px 14px 12px 18px;border-radius:16px;background:linear-gradient(180deg,var(--ac-card2),var(--ac-card));border:1px solid var(--ac-line);transition:border-color .2s,box-shadow .2s,background .2s}
.cfg-rc:hover{border-color:var(--ac-line2)}
.cfg-rc:focus-visible{outline:2px solid var(--ac-gold);outline-offset:3px}
.cfg-rc.on{border-color:var(--ac-gold);box-shadow:0 0 0 1px var(--ac-gold) inset,0 20px 44px -30px rgba(201,161,90,.6);background:radial-gradient(90% 90% at 30% 0%,#1D1A14,#111113 75%)}
.cfg-rc-h{grid-area:h;display:flex;align-items:center;gap:8px;min-width:0}
.cfg-rc-h .cfg-room-tag{margin:0}
.cfg-rc-k{font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ac-gold)}
.cfg-rc-a{margin-left:auto;font-size:13px;font-weight:600;color:var(--ac-gold-hi);white-space:nowrap;font-variant-numeric:tabular-nums}
.cfg-rc-a small{font-weight:400;color:var(--ac-dim);margin-left:3px}
.cfg-rc-a .na{font-size:9.5px}
.cfg-rc-s{grid-area:s;font-size:16px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-rc-p{grid-area:p;font-size:12.5px;color:var(--ac-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-rc-dg{grid-area:dg;display:block;opacity:.55;transition:opacity .2s}
.cfg-rc.on .cfg-rc-dg{opacity:1}
.cfg-rc-dg .dg{max-height:58px}
.cfg-rc-dg .dg-t{display:none}
.cfg-next{display:flex;justify-content:flex-end;padding-top:6px}
.cfg-next-b{font:600 15px var(--sans,inherit);color:#15100A;background:linear-gradient(180deg,#E6C995,#C9A15A);border:0;border-radius:40px;padding:14px 24px;cursor:pointer;
 box-shadow:0 14px 30px -14px rgba(201,161,90,.7);transition:transform .2s var(--ac-ease)}
.cfg-next-b:hover{filter:brightness(1.06)}
.cfg-next-b:focus-visible{outline:2px solid var(--ac-gold-hi);outline-offset:3px}
@media (min-width:981px){
 .cfg.multi .cfg-stage,.cfg.multi .cfg-roombar{display:none}
 .cfg.multi .cfg-side{max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px}
}
@media (max-width:980px){.cfg-roomcards{display:none!important}.cfg-roomhead{top:0}}
.cfg-rooms-out{margin-left:auto;display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--ac-dim)}
.cfg-rooms-out[hidden]{display:none}
.cfg-rooms-out b{font-size:30px;font-weight:600;letter-spacing:-.04em;color:var(--ac-gold-hi);font-variant-numeric:tabular-nums}

/* Programmes: three large toggle tiles; the third opens the chip grid Nr. 1–10 */
.cfg-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cfg-tiles .cfg-single{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;gap:16px}
.cfg-single .cfg-pick-t{flex:1}
.cfg-single .cfg-count{margin:0 34px 0 0}
.cfg-tile{position:relative;display:flex;flex-direction:column;gap:10px;min-height:168px;padding:18px 16px 16px;border-radius:20px;cursor:pointer;
 background:linear-gradient(180deg,#141416,#0F0F10);border:1px solid var(--ac-line);transition:transform .3s var(--ac-ease),border-color .25s,box-shadow .3s,opacity .25s}
.cfg-tile:hover,.cfg-chip:hover{transform:translateY(-2px);border-color:var(--ac-line2)}
.cfg-tile:active,.cfg-chip:active{transform:scale(.985)}
.cfg-pick-t{display:flex;flex-direction:column;gap:4px;padding-right:22px}
.cfg-tile .cfg-pick-t b{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.cfg-tile-k{order:-1;font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ac-gold)}
.cfg-pick-t small{font-size:12.5px;line-height:1.45;color:var(--ac-dim)}
.cfg-pick-p{margin-top:auto;font-size:14.5px;font-weight:600;white-space:nowrap}
.cfg-tick{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:6px;border:1px solid var(--ac-line2);display:grid;place-items:center;transition:background .2s,border-color .2s}
.cfg-tick::after{content:"";width:7px;height:4px;border-left:1.6px solid #15100A;border-bottom:1.6px solid #15100A;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.cfg-pick:has(.cfg-in:checked),.cfg-pick.on,.cfg-single:has(.cfg-in:checked){border-color:rgba(201,161,90,.85);background:radial-gradient(90% 70% at 100% 0%,rgba(201,161,90,.14),transparent 65%),linear-gradient(180deg,#17171A,#101011);box-shadow:0 0 0 1px rgba(201,161,90,.45),0 22px 44px -26px rgba(201,161,90,.4)}
.cfg-pick:has(.cfg-in:checked) > .cfg-tick,.cfg-pick.on > .cfg-tick,.cfg-single:has(.cfg-in:checked) > .cfg-tick{background:var(--ac-gold);border-color:var(--ac-gold)}
.cfg-pick:has(.cfg-in:checked) > .cfg-tick::after,.cfg-pick.on > .cfg-tick::after,.cfg-single:has(.cfg-in:checked) > .cfg-tick::after{opacity:1}
.cfg-count{font:600 11px var(--mono);letter-spacing:.12em;color:var(--ac-mute)}
.cfg-covered{display:none;color:var(--ac-gold) !important}
.cfg:has(.cfg-complete .cfg-in:checked) .cfg-single{opacity:.5}
.cfg:has(.cfg-complete .cfg-in:checked) .cfg-covered{display:block}
.cfg-chips{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;animation:stIn .4s var(--ac-ease)}
.cfg:has(.cfg-single-in:checked) .cfg-chips{display:grid}
.cfg:has(.cfg-complete .cfg-in:checked) .cfg-chips{display:none}
.cfg-chip{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;cursor:pointer;background:#111113;border:1px solid var(--ac-line);transition:transform .2s var(--ac-ease),border-color .2s,box-shadow .2s}
.cfg-chip .cfg-tick{top:12px;right:12px;width:18px;height:18px;border-radius:5px}
.cfg-chip-n{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-gold)}
.cfg-chip .cfg-pick-t b{font-size:14.5px;font-weight:600}
.cfg-chip .cfg-pick-t small{font-size:12px}
.cfg-chip .cfg-pick-p{font-size:13px}
.cfg-chip .cfg-pick-p:empty{display:none}

/* Summary: system lockup + small top view, today / then, one huge price, e-mail and the wide button */
.cfg-sum{position:relative;display:grid;gap:16px;margin-top:10px;padding:28px;border-radius:24px;border:1px solid var(--ac-line);overflow:hidden;
 background:radial-gradient(70% 50% at 100% 0%,rgba(201,161,90,.1),transparent 70%),linear-gradient(180deg,#141416,#0D0D0E);box-shadow:0 50px 100px -60px rgba(0,0,0,1)}
.cfg-sum::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(201,161,90,.9),transparent)}
.cfg-k,.cfg-k2{margin:0;font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ac-gold)}
.cfg-ss{display:none;gap:10px}
.cfg-ss.on{display:grid}
.cfg-ss-dg{display:block;max-width:220px;opacity:.9}
.cfg-ss-dg .dg-t{display:none}
.cfg-ss-name{font-size:clamp(24px,2.4vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.cfg-ss-line{color:var(--ac-dim);font-size:13.5px}
.cfg-money{margin:6px 0 0}
.cfg-money > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 16px;align-items:baseline;padding-top:14px;border-top:1px solid var(--ac-line)}
.cfg-money dt{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-mute)}
.cfg-money dd{margin:0;text-align:right;font-size:14.5px;line-height:1.45;color:var(--ac-text)}
.cfg-amount{font-size:clamp(44px,4.6vw,60px) !important;font-weight:600;letter-spacing:-.05em;line-height:1 !important;font-variant-numeric:tabular-nums;color:var(--ac-text) !important}
.cfg-amount small{font-size:15px;font-weight:500;letter-spacing:0;color:var(--ac-dim);margin-left:6px}
.cfg-amount.na{line-height:1.1 !important}
.cfg-amount.na .na,.cfg-amount.na > span{font:600 30px var(--sans);letter-spacing:-.035em;text-transform:none;color:var(--ac-gold-hi)}
.cfg.js .cfg-ss .cfg-money{display:none}
.cfg-rooms-sum{margin:0;display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid var(--ac-line)}
.cfg-rooms-sum[hidden]{display:none}
.cfg-rooms-sum b{font-size:15px;font-weight:600}
.cfg-sum-progs{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--ac-line)}
.cfg-sum-progs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cfg-sum-progs li{display:none;font:600 12px var(--sans);background:rgba(201,161,90,.12);color:var(--ac-gold-hi);border:1px solid rgba(201,161,90,.35);border-radius:20px;padding:5px 11px}
.cfg-sum-progs li.on{display:inline-flex}
.cfg:has(.cfg-pick.p1 .cfg-in:checked) .cfg-sum-progs li.p1,
.cfg:has(.cfg-pick.p2 .cfg-in:checked) .cfg-sum-progs li.p2,
.cfg:has(.cfg-pick.p3 .cfg-in:checked) .cfg-sum-progs li.p3,
.cfg:has(.cfg-pick.p4 .cfg-in:checked) .cfg-sum-progs li.p4,
.cfg:has(.cfg-pick.p5 .cfg-in:checked) .cfg-sum-progs li.p5,
.cfg:has(.cfg-pick.p6 .cfg-in:checked) .cfg-sum-progs li.p6,
.cfg:has(.cfg-pick.p7 .cfg-in:checked) .cfg-sum-progs li.p7,
.cfg:has(.cfg-pick.p8 .cfg-in:checked) .cfg-sum-progs li.p8,
.cfg:has(.cfg-pick.p9 .cfg-in:checked) .cfg-sum-progs li.p9,
.cfg:has(.cfg-pick.p10 .cfg-in:checked) .cfg-sum-progs li.p10,
.cfg:has(.cfg-pick.p11 .cfg-in:checked) .cfg-sum-progs li.p11,
.cfg:has(.cfg-pick.p12 .cfg-in:checked) .cfg-sum-progs li.p12{display:inline-flex}
.cfg-none{font-size:13px;color:var(--ac-mute)}
.cfg:has(.cfg-pick .cfg-in:checked) .cfg-none,.cfg.has-progs .cfg-none{display:none}
.cfg-status{margin:0;padding:12px 14px;border-radius:12px;background:rgba(201,161,90,.1);border:1px solid rgba(201,161,90,.35);color:var(--ac-text);font-size:13.5px;line-height:1.45}
.cfg-cta{display:grid;gap:10px;padding-top:4px;scroll-margin-top:16px}
.cfg-cta input[type=email]{border:1px solid var(--ac-line2);background:#0A0A0B;color:var(--ac-text);border-radius:40px;padding:15px 20px;font:400 15px var(--sans);width:100%;transition:border-color .2s}
.cfg-cta input[type=email]::placeholder{color:var(--ac-mute)}
.cfg-cta input[type=email]:focus{border-color:var(--ac-gold);outline:none;box-shadow:0 0 0 3px rgba(201,161,90,.2)}
.cfg-cta .btn{padding:18px 24px;font-size:16.5px}
.btn.wide{width:100%}
.cfg-small{margin:0;font-size:12.5px;color:var(--ac-dim);line-height:1.45;text-align:center}
.cfg-sum .trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;padding-top:14px;border-top:1px solid var(--ac-line);font-size:12.5px;color:var(--ac-dim)}
.cfg-sum .trust li::before{color:var(--ac-gold)}
.cfg-note{margin:0;font-size:12px;line-height:1.5;color:var(--ac-mute)}
.cfg-note::before{content:"i";display:inline-grid;place-items:center;width:15px;height:15px;margin-right:7px;border-radius:50%;border:1px solid var(--ac-line2);font:600 10px var(--mono);vertical-align:1px}
.cfg :focus-visible,.dt :focus-visible,.sh :focus-visible{outline-color:var(--ac-gold)}

/* Header language switch (EN | DE) */
.nav-r{display:flex;align-items:center;gap:14px}
.nav .lang,.lang{display:flex;align-items:center;gap:6px;font:600 11px var(--mono);letter-spacing:.08em}
.lang a{text-decoration:none;opacity:.55;padding:4px 2px}
.lang a:hover,.lang a[aria-current]{opacity:1}
.lang-menu{position:relative}
.lang-menu summary{list-style:none;cursor:pointer;padding:4px 6px;border:1px solid currentColor;border-radius:8px;opacity:.75}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu nav{position:absolute;right:0;top:calc(100% + 8px);z-index:20;display:grid;min-width:160px;max-height:60vh;overflow:auto;padding:6px;border-radius:12px;background:#15161B;border:1px solid #2B2B30;box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.lang-menu nav a{padding:8px 10px;border-radius:8px;font:500 13px var(--sans);letter-spacing:0;opacity:.8;color:#F3EEE7}
.lang-menu nav a:hover,.lang-menu nav a[aria-current]{background:#22232A;opacity:1}
.lang span{opacity:.3}

/* Home card: "powered by" + the AudioCrypt logo (black on the white card) */
.pcard-name .by-ac{display:flex;align-items:center;gap:6px}
.by-logo{height:11px;width:auto}

/* Page editor: every line, scene, summary entry and programme chip is shown so its text can be edited */
.nmd-editing .cfg .cfg-line-mk1,.nmd-editing .cfg .cfg-line-hub{display:flex}
.nmd-editing .cfg-ss,.nmd-editing .cfg .cfg-money{display:grid}
.nmd-editing .cfg-sum-progs li,.nmd-editing .cfg-save{display:inline-flex}
.nmd-editing .cfg-chips{display:grid}
.nmd-editing .cfg-covered{display:block}
.nmd-editing .cfg .cfg-side{position:relative;top:auto}

@media (max-width:980px){
 .sh-in{grid-template-columns:1fr}
 .dt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cfg{grid-template-columns:minmax(0,1fr);gap:20px}
 /* The stage goes on top (shorter), the dock becomes a bottom bar while the configurator is on screen */
 .cfg-side{display:contents}
 .cfg-stage{order:0}
 .cfg-main{order:1}
 .cfg-dock{order:2;position:sticky;bottom:0;z-index:5;margin-inline:calc(-1 * var(--gut));border-radius:18px 18px 0 0;border-bottom:0;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(12,12,13,.92)}
 .st-photo{aspect-ratio:2/1}
 .st-plan{display:none}
 .st-parts{margin-top:-46px;padding-bottom:14px}
}
@media (max-width:640px){
 .dt-grid{grid-template-columns:1fr}
 .dt-card.wide{grid-column:auto}
 .dt-img{height:180px}
 .cfg-opts{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;margin-inline:-2px;scrollbar-width:none}
 .cfg-opts::-webkit-scrollbar{display:none}
 .cfg-opt{scroll-snap-align:start}
 .cfg-tiles{grid-template-columns:1fr}
 .cfg-tile{min-height:0}
 .cfg-seg label{padding:13px 12px}
 .cfg-seg b{font-size:14.5px}
 .cfg-seg small{font-size:11.5px}
 .cfg-sum{padding:20px}
 .cfg-sum .trust{grid-template-columns:1fr}
 .st-cap{left:16px;top:14px}
 .st-parts{padding-inline:12px;gap:6px}
 .st-parts li{padding:6px 10px 6px 6px;gap:0 8px}
 .st-pic{width:40px;height:40px}.st-pic img{max-width:34px;max-height:34px}
 .st-x{font-size:14px}.st-n{font-size:11px}
 .cfg-dk-n{font-size:14px}
 .cfg-dock .btn{padding:11px 16px;font-size:13.5px}
}
@media (max-width:420px){.cfg-chips{grid-template-columns:1fr}.st-n{display:none}}
@media (prefers-reduced-motion:reduce){
 .st-scene,.cfg-chips{animation:none}
 .cfg-opt,.cfg-tile,.cfg-chip,.cfg-seg label,.dt-card,.dt-img img{transition:none}
 .cfg-opt:hover,.cfg-tile:hover,.cfg-chip:hover,.dt-card:hover{transform:none}
 .dt-card:hover .dt-img img{transform:none}
}

/* ---------- Apollon programmes: a high-end audio data sheet (calm, precise, no animation) ---------- */
.ap-sec{position:relative;padding-block:clamp(80px,11vw,150px);background:linear-gradient(180deg,#0E0E0F 0%,#0A0A0B 100%);border-top:1px solid #1E1E21;border-bottom:1px solid #1E1E21}
.ap-head{display:grid;justify-items:center;text-align:center;gap:14px}
.ap-mark{width:min(260px,60vw);height:auto;margin-bottom:18px;opacity:.95}
.ap-title{margin:0;max-width:22ch;font-size:clamp(34px,4.6vw,60px);font-weight:600;letter-spacing:-.04em;line-height:1.05;color:var(--ac-text)}
.ap-accent{color:var(--ac-dim);font-weight:400}
.ap-lede{margin:4px 0 0;max-width:58ch;color:var(--ac-dim);font-size:clamp(16px,1.4vw,18px);line-height:1.6}
.ap-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:clamp(44px,6vw,76px);background:#26262A;border:1px solid #26262A;border-radius:22px;overflow:hidden}
.ap-card{display:grid;align-content:start;gap:16px;padding:clamp(28px,3.4vw,48px);background:#0F0F11}
.ap-plate{margin:0;display:flex;align-items:center;gap:18px;min-height:44px}
.ap-plate-logo{height:30px;width:auto}
.ap-plate-brand{font-size:22px;font-weight:300;letter-spacing:.28em;color:var(--ac-text)}
.ap-plate-div{width:1px;align-self:stretch;background:#3A3A41}
.ap-plate-model{font-size:44px;font-weight:300;letter-spacing:.12em;line-height:1;color:var(--ac-text)}
.ap-use{margin:6px 0 0;font-size:clamp(20px,1.9vw,24px);font-weight:500;letter-spacing:-.02em;color:var(--ac-text)}
.ap-text{margin:0;max-width:46ch;color:var(--ac-dim);font-size:15.5px;line-height:1.6}
.ap-specs{margin:8px 0 0;display:grid;border-top:1px solid #26262A}
.ap-specs div{display:grid;grid-template-columns:minmax(110px,.42fr) 1fr;gap:16px;padding:12px 0;border-bottom:1px solid #26262A}
.ap-specs dt{font:600 10.5px/1.9 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ac-mute)}
.ap-specs dd{margin:0;font-size:14.5px;color:var(--ac-text);font-variant-numeric:tabular-nums}
.ap-pack{margin:4px 0 0;display:grid;gap:3px;padding:14px 16px;border:1px solid #33302A;border-radius:12px;background:#141311}
.ap-pack b{font-size:14.5px;font-weight:600;color:var(--ac-gold-hi)}
.ap-pack span{font-size:13.5px;color:var(--ac-dim)}
.ap-list{margin-top:clamp(48px,7vw,84px)}
.ap-list-h{margin:0 0 6px;font:600 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ac-mute)}
/* The ten frequencies: each one an object with its own signature trace, gold hairlines, number and length */
.ap-freqs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.ap-freq{position:relative;display:grid;align-content:start;gap:10px;padding:18px 18px 20px;border-radius:16px;
 background:linear-gradient(180deg,#131315 0%,#0C0C0D 100%) padding-box,linear-gradient(180deg,rgba(230,201,149,.45),rgba(201,161,90,.08) 40%,rgba(201,161,90,.04) 70%,rgba(230,201,149,.25)) border-box;
 border:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -40px rgba(0,0,0,.9);transition:box-shadow .4s,transform .4s var(--ac-ease)}
.ap-freq:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(201,161,90,.35),0 36px 70px -40px rgba(201,161,90,.35)}
.ap-freq-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px}
.ap-n{font:500 11px var(--mono);letter-spacing:.14em;color:var(--ac-gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.ap-len{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ac-mute);white-space:nowrap}
.ap-sig{display:block;width:100%;height:64px;margin:4px 0 6px;border-top:1px solid #1F1F22;border-bottom:1px solid #1F1F22}
.ap-sig-grid{stroke:#1D1D20;stroke-width:1;vector-effect:non-scaling-stroke}
.ap-sig-axis{stroke:#2A2A2E;stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.ap-sig-line{fill:none;stroke:#F3EEE7;stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.7;transition:opacity .4s}
.ap-sig-field{opacity:.16;transition:opacity .4s}
.ap-sig-edge{fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.75}
.ap-freq:hover .ap-sig-field,.ap-freq.on .ap-sig-field{opacity:.32}
.ap-tone{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;vertical-align:1px;box-shadow:0 0 10px currentColor;background:currentColor}
.ap-tone-1{color:#C9A15A}.ap-tone-2{color:#E8CF9E}.ap-tone-3{color:#C7774A}.ap-tone-4{color:#A9845A}.ap-tone-5{color:#F3EEE7}
.ap-tone-6{color:#D6A86A}.ap-tone-7{color:#B88A6E}.ap-tone-8{color:#E6C995}.ap-tone-9{color:#9C7A4C}.ap-tone-10{color:#D9B98C}
/* The Apollon field: how the system works, as a signal flow drawn in waves. Output (white) → A2H → room resonance
   (violet, with reflections) and bench module (gold) → heard and felt. Translucent layers, one colour each; a playhead
   runs across and leaves the part not yet reached dim; the wires carry a slow flowing dash */
.af{--af-out:#F3EEE7;--af-room:#9B86D6;--af-found:#C7774A;--af-bench:#C9A15A;margin:22px 0 18px;padding:0;border:1px solid #26262A;border-radius:20px;overflow:hidden;
 background:radial-gradient(70% 70% at 70% 15%,rgba(155,134,214,.08),transparent 60%),radial-gradient(70% 70% at 70% 95%,rgba(201,161,90,.08),transparent 60%),linear-gradient(180deg,#0E0E10,#09090A);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 50px 90px -60px rgba(0,0,0,.9)}
.af-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #1E1E21;font:600 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ac-dim)}
.af-dot{width:7px;height:7px;border-radius:50%;background:var(--ac-gold);box-shadow:0 0 12px var(--ac-gold);animation:afPulse 2.4s ease-in-out infinite}
.af-t{color:var(--ac-text)}
.af-range{margin-left:auto;color:var(--ac-mute);letter-spacing:.12em}
.af-plot{position:relative;aspect-ratio:10/3;margin:10px 0 6px}
.af-svg,.af-live{position:absolute;inset:0;width:100%;height:100%;display:block}
.af-live{pointer-events:none;opacity:0;transition:opacity .5s}
.af.live .af-live{opacity:1}
.af.live .af-out{opacity:.12;transition:opacity .5s}
.af-zero{stroke:#232327;stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke}
.af-wire{fill:none;stroke-width:1.4;stroke-dasharray:4 6;vector-effect:non-scaling-stroke}
.af-wire-room{stroke:var(--af-room);stroke-opacity:.6}.af-wire-found{stroke:var(--af-found);stroke-opacity:.6}.af-wire-bench{stroke:var(--af-bench);stroke-opacity:.7}
.af-node{fill:#141416;stroke:#3A3A41;stroke-width:1;vector-effect:non-scaling-stroke}
.af-node-dot{stroke:var(--ac-gold);stroke-width:9;stroke-linecap:round;vector-effect:non-scaling-stroke}
.af-end{stroke:#F3EEE7;stroke-width:10;stroke-linecap:round;vector-effect:non-scaling-stroke}
.af-end-ring{stroke:var(--af-room);stroke-opacity:.28;stroke-width:40;stroke-linecap:round;vector-effect:non-scaling-stroke}
.af-end-ring3{stroke:var(--af-found);stroke-opacity:.32;stroke-width:32;stroke-linecap:round;vector-effect:non-scaling-stroke}
.af-end-ring2{stroke:var(--af-bench);stroke-opacity:.45;stroke-width:22;stroke-linecap:round;vector-effect:non-scaling-stroke}
.af.anim.in .af-end-ring{animation:afRing 3s ease-in-out infinite}
.af-room,.af-found,.af-bench,.af-out{mix-blend-mode:screen}
.af-found .af-area{fill:url(#af-found-g)}
.af-found .af-edge{fill:none;stroke:var(--af-found);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.af-out .af-area{fill:var(--af-out);fill-opacity:.07}
.af-out .af-line{fill:none;stroke:var(--af-out);stroke-opacity:.85;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.af-room .af-area{fill:url(#af-room-g)}
.af-room .af-edge{fill:none;stroke:var(--af-room);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.af-room .af-echo{fill:none;stroke:var(--af-room);stroke-opacity:.3;stroke-width:1.2;vector-effect:non-scaling-stroke}
.af-bench .af-area{fill:url(#af-bench-g)}
.af-bench .af-edge{fill:none;stroke:var(--af-bench);stroke-width:2.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.af-bench .af-glow{fill:none;stroke:var(--af-bench);stroke-opacity:.2;stroke-width:10;vector-effect:non-scaling-stroke}
.af-dim{fill:#0B0B0C;opacity:0;transform-box:view-box;transform-origin:100% 0}
.af-head-l{stroke:#F3EEE7;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transform-box:view-box}
.af-labels{position:absolute;inset:0;pointer-events:none}
.af-l{position:absolute;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-dim);white-space:nowrap}
.af-l1{left:2%;top:4%;color:var(--af-out)}
.af-ld i{font-style:normal}
.af-l1 .af-ld{display:block;margin-top:5px;color:var(--ac-mute)}.af-l1 .af-ld i{display:none}
.af-l2{left:31.67%;top:63%;transform:translateX(-50%);color:var(--ac-gold)}
.af-l3{left:41.67%;top:3%;color:var(--af-room)}
.af-l4{left:41.67%;top:33%;color:var(--af-found)}
.af-l5{left:41.67%;top:94%;color:var(--af-bench)}
.af-l6{right:2.5%;top:61%;color:var(--af-out)}
.af-steps{list-style:none;margin:0;padding:12px 18px 14px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;border-top:1px solid #1E1E21}
.af-steps li{display:flex;align-items:center;gap:8px;min-width:0;font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-dim)}
.af-steps li::before{content:"";flex:none;width:14px;height:3px;border-radius:2px;background:var(--c)}
.af-steps span{color:var(--ac-mute)}
.af-s-out{--c:var(--af-out)}.af-s-a2h{--c:var(--ac-gold)}.af-s-room{--c:var(--af-room)}.af-s-found{--c:var(--af-found)}.af-s-bench{--c:var(--af-bench)}
.af-note{margin:0;padding:12px 18px 14px;border-top:1px solid #1E1E21;font-size:12.5px;line-height:1.5;color:var(--ac-mute)}
/* It plays: the playhead runs, the part not yet reached stays dim, the wires flow (only in view, never with reduced motion) */
.af.anim.in .af-dim{opacity:.62;animation:afPlay 9s linear infinite}
.af.anim.in .af-head-l{opacity:.8;animation:afHead 9s linear infinite}
.af.anim.in .af-wire{animation:afFlow 1.4s linear infinite}
@keyframes afPlay{0%{transform:scaleX(1)}86%,100%{transform:scaleX(0)}}
@keyframes afHead{0%{transform:translateX(0);opacity:.8}86%{transform:translateX(1200px);opacity:.8}87%,100%{transform:translateX(1200px);opacity:0}}
@keyframes afFlow{to{stroke-dashoffset:-20}}
@keyframes afPulse{50%{opacity:.4}}
@keyframes afRing{50%{stroke-opacity:.12}}
@media (prefers-reduced-motion:reduce){.af-dot{animation:none}}
@media (max-width:1000px){.af-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.af{border-radius:14px}.af-plot{aspect-ratio:auto;height:200px}.af-l{font-size:8.5px;letter-spacing:.1em}.af-l3,.af-l4,.af-l5{left:40%}.af-l1 .af-ld,.af-l3 .af-ld,.af-l4 .af-ld{display:none}.af-l6{top:61%}.af-steps{grid-template-columns:1fr 1fr;gap:8px 12px}.af-steps li{font-size:9.5px}}
.ap-freq:hover .ap-sig-line,.ap-freq.on .ap-sig-line{opacity:1}
.ap-freq b{font-size:18px;font-weight:500;letter-spacing:-.02em;color:var(--ac-text)}
.ap-freq .ap-line{font-size:12.5px;line-height:1.5;color:var(--ac-dim)}
.ap-use-l{display:grid;gap:3px;padding-top:9px;border-top:1px solid #1F1F22;font-size:12px;line-height:1.45;color:var(--ac-text)}
.ap-use-l i{font:600 9.5px var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ac-gold)}
@media (max-width:1100px){.ap-freqs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.ap-freqs{grid-template-columns:repeat(2,minmax(0,1fr))}.ap-freq{padding:14px}}
.ap-note{margin:28px auto 0;text-align:center;font-size:12.5px;color:var(--ac-mute)}
@media (max-width:720px){.ap-duo{grid-template-columns:1fr}}

/* ---------- App pages (betterTV): hero with logo and TV-framed screen, text beside screenshots, card rows ---------- */
.ah{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(48px,8vw,110px) clamp(40px,6vw,80px)}
.ah-txt{display:grid;gap:18px;justify-items:start}
.ah-logo img{height:clamp(38px,4vw,52px);width:auto;display:block}
.ah-eyebrow,.fs-eyebrow{margin:0;font:600 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ah-title{margin:0;font-size:clamp(46px,6.4vw,92px);font-weight:650;letter-spacing:-.05em;line-height:.98;color:var(--text)}
.ah-accent{display:block;color:var(--text)}
.ah-text{margin:0;max-width:30ch;font-size:clamp(18px,1.7vw,22px);line-height:1.45;color:#c9ccd3}
.ah-note{margin:0;font-size:13px;color:var(--dim,#8a8f98)}
.tvf{margin:0;display:grid;gap:14px}
.tvf-frame{padding:clamp(6px,.7vw,10px);border-radius:clamp(14px,1.6vw,22px);background:linear-gradient(180deg,#2A2E37,#171A20);border:1px solid #343944;
 box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.03) inset}
.tvf-frame img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:clamp(8px,1vw,14px);background:#0E1116}
.tvf figcaption{display:grid;gap:6px}
.tvf-k{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tvf-c{font-size:clamp(16px,1.5vw,20px);line-height:1.4;color:var(--text)}
.fs{padding-block:clamp(56px,8vw,110px);border-top:1px solid #1C1F25}
.fs-head{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,48px)}
.fs-title,.cr-title{margin:0;font-size:clamp(34px,4.6vw,62px);font-weight:650;letter-spacing:-.045em;line-height:1.02;color:var(--text)}
.fs-body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.fs-flip .fs-body{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.fs-flip .fs-txt{order:2}
.fs-txt{display:grid;gap:16px}
.fs-sub{margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:650;letter-spacing:-.03em;line-height:1.12;color:var(--text)}
.fs-p{margin:0;font-size:16.5px;line-height:1.6;color:#b4b8c0}
.fs-points{margin:6px 0 0;display:grid;gap:14px}
.fs-points dt{font-size:15.5px;font-weight:650;color:var(--text)}
.fs-points dd{margin:2px 0 0;font-size:15px;line-height:1.55;color:#b4b8c0}
.fs-note,.cr-note{margin:4px 0 0;font-size:13px;line-height:1.55;color:#8a8f98}
.cr{padding-block:clamp(56px,8vw,110px);border-top:1px solid #1C1F25}
.cr-head{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,44px)}
.cr-accent{margin:0;font-size:clamp(20px,2.2vw,28px);font-weight:500;letter-spacing:-.02em;color:var(--gold)}
.cr-text{margin:0;max-width:62ch;font-size:17px;line-height:1.6;color:#b4b8c0}
.cr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.cr-card{display:grid;align-content:start;gap:12px;padding:clamp(22px,2.4vw,32px);border-radius:20px;background:#171A21;border:1px solid #232733}
.cr-k{margin:0;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.cr-card h3{margin:0;font-size:clamp(21px,2vw,26px);font-weight:650;letter-spacing:-.03em;line-height:1.15;color:var(--text)}
.cr-card p:not(.cr-k){margin:0;font-size:15.5px;line-height:1.55;color:#b4b8c0}
.cr-statement{margin:clamp(24px,3vw,36px) 0 0;font-size:clamp(17px,1.6vw,20px);font-weight:500;color:var(--text)}
@media (max-width:900px){.ah,.fs-body,.fs-flip .fs-body{grid-template-columns:1fr}.fs-flip .fs-txt{order:0}}

/* ---------- Listening samples (Apollon Frequencies) ---------- */
.demo{display:inline-flex;align-items:center;gap:10px;justify-self:start;padding:9px 16px 9px 10px;border-radius:40px;border:1px solid rgba(230,201,149,.45);
 color:var(--ac-text,#F3EEE7);text-decoration:none;font:600 13px var(--sans);background:rgba(201,161,90,.06);transition:background .2s,border-color .2s}
.demo:hover{background:rgba(201,161,90,.14);border-color:rgba(230,201,149,.8)}
.demo:focus-visible{outline:2px solid #C9A15A;outline-offset:3px}
.demo-i{width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#E6C995,#C9A15A);position:relative;flex:none}
.demo-i::after{content:"";position:absolute;left:8px;top:6px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #15100A}
.demo.playing .demo-i::after{left:7px;top:6px;width:8px;height:10px;border:0;border-left:3px solid #15100A;border-right:3px solid #15100A;box-sizing:border-box}
.demo-sm{padding:5px 11px 5px 6px;font-size:11.5px;gap:7px;margin-top:4px}
.demo-sm .demo-i{width:18px;height:18px}.demo-sm .demo-i::after{left:6.5px;top:4.5px;border-width:4.5px 0 4.5px 7px}
.demo-sm.playing .demo-i::after{left:5px;top:4.5px;width:8px;height:9px;border:0;border-left:3px solid #15100A;border-right:3px solid #15100A}
.demo-soon{justify-self:start;font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ac-mute,#7C7872)}
.demo-soon.demo-sm{font-size:9.5px;margin-top:6px}
.ap-more{margin:26px auto 0;text-align:center}
.ap-more a{color:var(--ac-gold-hi,#E6C995);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(230,201,149,.4)}
.ap-more a:hover{border-bottom-color:currentColor}

/* ---------- Editorial pages (Apollon Science): a calm trade magazine ---------- */
.ar-hero{display:grid;justify-items:center;text-align:center;gap:18px;padding-block:clamp(70px,11vw,150px) clamp(40px,6vw,80px)}
.ar-mark{width:min(240px,56vw);height:auto;margin-bottom:12px;opacity:.95}
.ar-eyebrow{margin:0;font:600 11.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.ar-title{margin:0;max-width:16ch;font-family:var(--sans);font-weight:650;font-size:clamp(52px,8vw,118px);line-height:.95;letter-spacing:-.05em;color:var(--text)}
.ar-dek{margin:6px 0 0;max-width:46ch;font-size:clamp(18px,1.8vw,23px);line-height:1.5;color:#c9ccd3}
.ar-meta{margin:0;font:500 12px var(--mono);letter-spacing:.08em;color:#8a8f98}
.ar-sec{padding-block:clamp(64px,9vw,120px);border-top:1px solid #1C1F25}
.ar-light{background:#F2EFE8;color:#1A1A1C;border-top:0}
.ar-in{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start}
.ar-side{position:sticky;top:24px;display:grid;gap:18px}
.ar-n{margin:0;font:500 13px var(--mono);letter-spacing:.14em;color:var(--gold)}
.ar-light .ar-n{color:#9A7634}
.ar-h{margin:0;font-family:var(--sans);font-weight:600;font-size:clamp(34px,4.2vw,56px);line-height:1.02;letter-spacing:-.035em;color:var(--text)}
.ar-light .ar-h{color:#141416}
.ar-facts{margin:8px 0 0;display:grid;border-top:1px solid #2A2D35}
.ar-light .ar-facts{border-top-color:#D8D3C8}
.ar-facts div{display:grid;gap:3px;padding:12px 0;border-bottom:1px solid #2A2D35}
.ar-light .ar-facts div{border-bottom-color:#D8D3C8}
.ar-facts dt{font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8a8f98}
.ar-light .ar-facts dt{color:#6F6A60}
.ar-facts dd{margin:0;font-size:16px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.ar-light .ar-facts dd{color:#141416}
.ar-body{display:grid;gap:18px;max-width:64ch}
.ar-body p{margin:0;font-size:clamp(16.5px,1.35vw,18.5px);line-height:1.7;color:#b9bdc6}
.ar-light .ar-body p{color:#3A3A3F}
.ar-body .ar-lede{font-size:clamp(20px,1.9vw,25px);line-height:1.5;color:var(--text)}
.ar-light .ar-body .ar-lede{color:#141416}
.ar-quote{margin:14px 0 0;padding:6px 0 6px 22px;border-left:2px solid var(--gold);font-family:var(--sans);font-weight:500;letter-spacing:-.02em;font-size:clamp(22px,2.4vw,32px);line-height:1.3;color:var(--text)}
.ar-light .ar-quote{color:#141416;border-left-color:#B08A45}
.ar-fig{margin-top:clamp(28px,4vw,48px)}
@media (max-width:900px){.ar-in{grid-template-columns:1fr}.ar-side{position:static}}

/* Explanatory figures: gold lines on graphite, calm motion once in view (.anim.in, set by shop.js) */
.sci-fig{margin:0;display:grid;gap:12px;padding:clamp(18px,2.6vw,32px);border-radius:22px;background:#0F1014;border:1px solid #23252C}
.ar-light .sci-fig{background:#141416;border-color:#141416}
.cr .sci-fig{margin-top:clamp(20px,3vw,32px)}
.sci-fig figcaption{font-size:13px;line-height:1.5;color:#8a8f98}
.sf{display:block;width:100%;height:auto;overflow:visible}
.sf-t{font:500 12px var(--sans);fill:#c9ccd3}
.sf-b{font-weight:600;fill:#F3EEE7}
.sf-dim{font:500 11px var(--mono);fill:#8a8f98}
.sf-k{font:600 10.5px var(--mono);letter-spacing:.14em;fill:#C9A15A}
.sf-gold-t{font:600 12px var(--mono);fill:#E6C995}
.sf-box{fill:#16181E;stroke:#3A3D47;stroke-width:1}
.sf-gold{stroke:#C9A15A}
.sf-flow{fill:none;stroke:#C9A15A;stroke-width:1.6;stroke-dasharray:3 7}
.sf-tag{fill:#1E1A12;stroke:#C9A15A;stroke-width:1}
.sf-tagt{font:700 11px var(--mono);letter-spacing:.12em;fill:#E6C995}
.sf-dev{fill:#1A1C22;stroke:#8E8A82;stroke-width:1}
.sf-dot{fill:#C9A15A}
.sf-ring{fill:none;stroke:#C9A15A;stroke-width:1.2}
.sf-wave{fill:none;stroke:#E6C995;stroke-width:1.4;stroke-linecap:round;opacity:.8}
.sf-benchtop{fill:#22252D;stroke:#A6A29A;stroke-width:1}
.sf-bm{fill:rgba(201,161,90,.14);stroke:#C9A15A;stroke-width:1;stroke-dasharray:3 2.5}
.sf-vib{fill:none;stroke:#C9A15A;stroke-width:1.3;stroke-linejoin:round;opacity:.85}
.sf-phase{fill:#16181E;stroke:#30333B}
.sf-phase.p2{fill:rgba(201,161,90,.14);stroke:rgba(201,161,90,.6)}
.sf-axis,.sf-tick{stroke:#3A3D47;stroke-width:1;fill:none}
.sf-curve{fill:none;stroke:#E6C995;stroke-width:2;stroke-linecap:round}
.sf-band{transform-box:fill-box;transform-origin:left center}
.sf-hear{fill:rgba(243,238,231,.08);stroke:rgba(243,238,231,.35)}
.sf-feel{fill:rgba(201,161,90,.16);stroke:rgba(201,161,90,.55)}
.sf-core{fill:rgba(201,161,90,.32);stroke:none}
.sf-res{stroke:#E6C995;stroke-width:1.5;stroke-dasharray:3 3}
.sf-ray{fill:none;stroke:#E6C995;stroke-width:1.4;stroke-linecap:round;opacity:.75}
.sf-arrow{fill:none;stroke:#C9A15A;stroke-width:1.6;stroke-linejoin:round}
.sf-fan{fill:rgba(243,238,231,.06);stroke:rgba(243,238,231,.3)}.sf-fan-w{fill:rgba(201,161,90,.12);stroke:rgba(201,161,90,.55)}
.sf-fader{fill:rgba(201,161,90,.35)}.sf-knob{fill:#E6C995;stroke:#0F1014;stroke-width:2}
.sf-b-room{fill:rgba(155,134,214,.2);stroke:rgba(155,134,214,.7)}.sf-b-found{fill:rgba(199,119,74,.24);stroke:rgba(199,119,74,.75)}.sf-b-bench{fill:rgba(201,161,90,.28);stroke:rgba(201,161,90,.8)}
/* motion (only once visible) */
.sci-fig.anim .sf-curve{stroke-dasharray:1;stroke-dashoffset:1}
.sci-fig.anim.in .sf-curve{transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1);stroke-dashoffset:0}
.sci-fig.anim .sf-band{transform:scaleX(.02);opacity:0}
.sci-fig.anim.in .sf-band{transition:transform 1.6s cubic-bezier(.2,.7,.2,1),opacity .6s;transform:none;opacity:1}
.sci-fig.anim.in .sf-core{transition-delay:.5s}
.sci-fig.anim.in .sf-flow{animation:sfFlow 1.2s linear infinite}
.sci-fig.anim.in .sf-wave{animation:sfWave 2.4s ease-out infinite}
.sci-fig.anim.in .sf-wave.w1{animation-delay:.4s}.sci-fig.anim.in .sf-wave.w2{animation-delay:.8s}
.sci-fig.anim.in .sf-vib{animation:sfVib .9s ease-in-out infinite alternate}
.sci-fig.anim.in .sf-vib.v1,.sci-fig.anim.in .sf-vib.v3{animation-delay:-.45s}
.sci-fig.anim.in .sf-bench{animation:sfBench .18s linear infinite alternate}
@keyframes sfFlow{to{stroke-dashoffset:-20}}
@keyframes sfWave{0%{opacity:0;transform:translateX(-6px)}30%{opacity:.9}100%{opacity:0;transform:translateX(10px)}}
@keyframes sfVib{from{opacity:.25;transform:translateY(2px)}to{opacity:.95;transform:translateY(-2px)}}
@keyframes sfBench{from{transform:translateY(0)}to{transform:translateY(.8px)}}
@media (prefers-reduced-motion:reduce){.sci-fig .sf-flow,.sci-fig .sf-wave,.sci-fig .sf-vib,.sci-fig .sf-bench{animation:none!important}}
.ar-link{margin:4px 0 0}
.ar-link a{font-weight:600;color:var(--gold);text-decoration:none;border-bottom:1px solid currentColor}
.ar-light .ar-link a{color:#7A5A22}

/* ---------- Product data sheet (AudioCrypt style): logo + model, key figures, spec tables, drawing, notes ---------- */
.ds{padding-block:clamp(48px,8vw,110px);color:#F3EEE7}
.ds-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.ds-txt{display:grid;gap:18px;justify-items:start}
.ds-eyebrow{margin:0;font:600 11.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#C9A15A}
.ds-model{margin:0;display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);flex-wrap:wrap;font-size:clamp(48px,7vw,96px);font-weight:600;letter-spacing:-.04em;line-height:1}
.ds-logo{height:.42em;width:auto;filter:invert(1)}
.ds-text{margin:0;max-width:52ch;font-size:clamp(16.5px,1.5vw,19px);line-height:1.6;color:#B9B4AC}
.ds-photo{border-radius:24px;border:1px solid #2B2B30;background:radial-gradient(70% 70% at 50% 45%,#1C1C20,#0D0D0F 75%);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.ds-photo img{width:78%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.8)) brightness(1.08)}
.ds-keys{margin:clamp(36px,5vw,64px) 0 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid #2B2B30;border-bottom:1px solid #2B2B30}
.ds-keys div{display:grid;gap:6px;padding:20px 16px;border-left:1px solid #2B2B30}
.ds-keys div:first-child{border-left:0;padding-left:0}
.ds-keys dt{font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#7C7872}
.ds-keys dd{margin:0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.ds-keys b{font-size:clamp(26px,2.6vw,36px);font-weight:600;letter-spacing:-.03em;color:#F3EEE7;font-variant-numeric:tabular-nums}
.ds-keys dd span{font:600 12px var(--mono);color:#C9A15A}
.ds-groups{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(28px,4vw,56px)}
.ds-group h2{margin:0 0 6px;font:600 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#C9A15A}
.ds-group dl{margin:0;border-top:1px solid #2B2B30}
.ds-group dl div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid #222226}
.ds-group dt{font-size:14px;color:#AAA6A0}
.ds-group dd{margin:0;font:500 14px var(--mono);color:#F3EEE7;font-variant-numeric:tabular-nums}
.ds-drawing{margin-top:clamp(24px,3vw,40px)}
/* Numbered sections, as in the AudioCrypt product data sheets */
.ds-sec{margin-top:clamp(56px,8vw,110px)}
.ds-alliance{margin:0 0 clamp(24px,3vw,40px);display:flex;align-items:center;justify-content:flex-end;gap:14px;font:600 10.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#7C7872}
.ds-alliance i{width:1px;height:18px;background:#3A3A41}
.ds-alliance img{height:18px;width:auto;opacity:.9}
.ds-strap{margin:0;padding-top:14px;border-top:1px solid #2B2B30;font:600 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#C9A15A}
.ds-index{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #2B2B30}
.ds-index a{display:grid;gap:6px;padding:14px 16px 0 0;font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#AAA6A0;text-decoration:none}
.ds-index a span{color:#C9A15A}
.ds-index a:hover{color:#F3EEE7}
.ds-sec{scroll-margin-top:80px}
@media (max-width:640px){.ds-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 0}.ds-alliance{justify-content:flex-start}}
.ds-sec-k{margin:0 0 12px;display:flex;gap:12px;font:600 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7C7872}
.ds-sec-k span{color:#C9A15A}
.ds-sec-h{margin:0 0 clamp(20px,3vw,36px);font-size:clamp(30px,4vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1.08;color:#F3EEE7}
.ds-idea{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
.ds-idea p{margin:0;font-size:15.5px;line-height:1.7;color:#B9B4AC}
.ds-idea .ds-lead{font-size:clamp(19px,1.9vw,24px);line-height:1.45;color:#F3EEE7}
.ds-body{margin:0;max-width:78ch;font-size:16px;line-height:1.7;color:#B9B4AC}
.ds-hl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,56px)}
.ds-hl li{display:grid;grid-template-columns:34px 1fr;gap:4px 10px;padding:18px 0;border-top:1px solid #26262A}
.ds-hl-n{grid-row:span 2;font:600 11px/1.9 var(--mono);color:#C9A15A}
.ds-hl h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;color:#F3EEE7}
.ds-hl p{margin:0;font-size:14.5px;line-height:1.6;color:#AAA6A0}
.ds-views{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(12px,2vw,24px);margin-bottom:clamp(20px,3vw,32px)}
.ds-views-1{--n:1}.ds-views-2{--n:2}.ds-views-3{--n:3}.ds-views-4{--n:4}
.ds-views figure{margin:0;display:grid;gap:10px}
.ds-view{border-radius:18px;border:1px solid #2B2B30;background:radial-gradient(70% 70% at 50% 45%,#202024,#0D0D0F 78%);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.ds-view img{max-width:82%;max-height:82%;width:auto;height:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.8)) brightness(1.15)}
.ds-views-1 .ds-view{aspect-ratio:16/9}.ds-views-1 .ds-view img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover;filter:none}
.ds-views figcaption{font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#7C7872}
@media (max-width:640px){.ds-views{grid-template-columns:minmax(0,1fr)}}
.ds-cols{margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.ds-cols h3{margin:0 0 8px;font-size:16px;font-weight:600;color:#F3EEE7}
.ds-cols p{margin:0;font-size:14.5px;line-height:1.6;color:#AAA6A0}
.ds-sec .ds-groups{margin-top:0}
@media (max-width:760px){.ds-idea,.ds-hl,.ds-cols{grid-template-columns:minmax(0,1fr)}}
.ds-notes{margin:clamp(28px,4vw,48px) 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ds-notes li{position:relative;padding-left:22px;font-size:15px;line-height:1.55;color:#B9B4AC}
.ds-notes li::before{content:"";position:absolute;left:0;top:.65em;width:10px;height:1px;background:#C9A15A}
.sf-body{fill:#16181E;stroke:#A6A29A;stroke-width:1.2}
.sf-mount{fill:none;stroke:#C9A15A;stroke-width:1;stroke-dasharray:4 4}
.sf-coil{fill:none;stroke:#3A3D47;stroke-width:1}
.sf-hole{fill:#0F1014;stroke:#C9A15A;stroke-width:1.2}
.sf-dim-l{fill:none;stroke:#8a8f98;stroke-width:1}
.sf-fin{fill:none;stroke:#6E6A63;stroke-width:2;stroke-linecap:round}
.sf-term{fill:#C9A15A}
@media (max-width:980px){.ds-keys{grid-template-columns:repeat(3,minmax(0,1fr))}.ds-keys div:nth-child(4){border-left:0;padding-left:0}.ds-keys div:nth-child(n+4){border-top:1px solid #2B2B30}}
@media (max-width:760px){.ds-head,.ds-groups{grid-template-columns:1fr}.ds-photo{order:-1;max-width:420px}}
@media (max-width:480px){.ds-keys{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-keys div{border-left:0;padding-left:0}.ds-keys div:nth-child(n+3){border-top:1px solid #2B2B30}}
/* Print: the data sheet on white paper */
@media print{
 body:has(.ds){background:#fff!important}
 body:has(.ds) .nav,body:has(.ds) .foot,body:has(.ds) .testbar,body:has(.ds) .ctas,body:has(.ds) #notify{display:none!important}
 .ds{color:#111;padding-block:0}.ds-model,.ds-keys b,.ds-group dd{color:#111}.ds-logo{filter:none}.ds-text,.ds-group dt,.ds-notes li{color:#333}
 .ds-photo{background:#fff;border-color:#ddd}.ds-keys,.ds-keys div,.ds-group dl,.ds-group dl div{border-color:#ccc}
 .sci-fig{background:#fff;border-color:#ccc}.sf-b{fill:#111}.sf-body{fill:#f4f4f4;stroke:#333}
}
.dt-link{margin:10px 0 0}
.dt-link a{font:600 12px var(--mono);letter-spacing:.08em;color:var(--ac-gold-hi,#E6C995);text-decoration:none;border-bottom:1px solid rgba(230,201,149,.4)}
.dt-link a:hover{border-bottom-color:currentColor}
.sf-port{fill:none;stroke:#C9A15A;stroke-width:2.5;stroke-linecap:round}

/* Brand header (AudioCrypt shop): the white AudioCrypt logo leads, "powered by // Nomad Code Labs Shop" follows small */
.nav .mk-brand{display:flex;align-items:center;flex:none}
.mk-logo{height:20px;width:auto;filter:invert(1);display:block}
.foot .mk-by{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#8a8f98;text-decoration:none}
.foot .mk-by:hover{color:var(--text)}
.mk-by img{border-radius:4px;opacity:.85}
.mk-by-k{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6f747d}
.mk-by .mk-shop{opacity:.7}
/* The Nomad Code Labs shop's pointer to shopyroo (brand shops show none). */
.foot .sy{display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--text);text-decoration:none;font-size:14.5px;line-height:1.5}
.foot .sy:hover{border-color:var(--dim)}
.foot .sy img{flex:none;border-radius:7px}
.foot .sy b{font-weight:600}
.foot .sy-go{white-space:nowrap;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.mk-logo{height:17px}}
/* Releases (/releases): one row per tool, download through the counter */
.rel-head{padding-block:clamp(56px,9vw,120px) 24px}
.rel-head h1{margin:6px 0 10px;font-size:clamp(44px,6vw,80px);font-weight:650;letter-spacing:-.05em;line-height:.95}
.rel-head .lede{margin:0;max-width:52ch;color:#AAA6A0;font-size:18px}
.rel-list{display:grid;gap:14px;padding-bottom:clamp(56px,8vw,110px)}
.rel{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:24px 26px;border:1px solid #2B2B30;border-radius:20px;background:#111113}
.rel h2{margin:0 0 4px;font-size:26px;font-weight:600;letter-spacing:-.03em}
.rel p{margin:0;color:#AAA6A0}
.rel-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px!important;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#7C7872!important}
.rel-act{display:flex;align-items:center;gap:16px}
.rel-link{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#C9A15A}

/* Earnings calculator (operator example): fields, the two results and the note */
.calc{margin-top:28px;border:1px solid var(--line);border-radius:22px;padding:28px;background:linear-gradient(160deg,#17181d,#0f1013)}
.calc-head h2{margin:0;font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em;line-height:1.15}
.calc-head p{margin:10px 0 0;color:var(--dim);max-width:62ch}
.calc-k{margin:0 0 8px!important;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)!important}
.calc-body{margin-top:22px;display:grid;gap:18px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end}
.calc-in{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.calc-in[hidden],.calc-ex[hidden]{display:none}
.calc-f{display:grid;gap:6px;font-size:13px;color:var(--dim)}
.calc-f input{width:100%;box-sizing:border-box;font:inherit;font-size:22px;font-weight:600;color:var(--text);background:#0b0c10;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.calc-f input:focus{outline:2px solid var(--gold);outline-offset:1px}
.calc-ex{margin:0;color:var(--dim);font-size:15px}
.calc-out{margin:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.calc-out div{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#0b0c10}
.calc-out dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.calc-out dd{margin:6px 0 0;font-size:clamp(24px,3vw,32px);font-weight:650;letter-spacing:-.02em;color:var(--gold)}
.calc-note{margin:18px 0 0;font-size:12.5px;color:var(--dim);max-width:80ch}
@media (max-width:760px){.calc{padding:20px}.calc-body{grid-template-columns:1fr}.calc-in{grid-template-columns:1fr 1fr 1fr}.calc-f input{font-size:18px}}
@media (max-width:420px){.calc-in{grid-template-columns:1fr}}

/* Preview lock: the password form of a locked page */
.lock{max-width:520px;margin:72px auto 24px;border:1px solid var(--line);border-radius:22px;padding:32px;background:linear-gradient(160deg,#17181d,#0f1013)}
.lock h1{margin:0;font-size:clamp(28px,4vw,38px);letter-spacing:-.02em}
.lock p{margin:12px 0 0;color:var(--dim)}
.lock form{margin-top:22px;display:grid;gap:14px}
.lock-f{display:grid;gap:6px;font-size:13px;color:var(--dim)}
.lock-f input{width:100%;box-sizing:border-box;font:inherit;font-size:18px;color:var(--text);background:#0b0c10;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.lock-f input:focus{outline:2px solid var(--gold);outline-offset:1px}
.lock .btn{justify-self:start}
.lock-wrong{color:#ff8a7a!important}
@media (max-width:560px){.lock{margin:40px 0 16px;padding:22px}.lock .btn{justify-self:stretch;text-align:center}}

/* AudioCrypt Sensory Fusion lockup: the system name after the AudioCrypt logo, split by a hairline */
.nav .mk-brand{gap:0}
.mk-sub{margin-left:11px;padding-left:11px;border-left:1px solid rgba(255,255,255,.28);font-size:13.5px;line-height:18px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold,#DEC7A5);white-space:nowrap}
@media (max-width:640px){.mk-sub{margin-left:9px;padding-left:9px;font-size:11.5px;letter-spacing:.12em}}
@media (max-width:360px){.mk-sub{letter-spacing:.06em}}

/* Track list (owner, 29 Oct 2026): the ten APOLLON frequencies as AudioCrypt previews, one row each, an L / S switch above */
.tl-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:20px 0 14px}
.tl-switch{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.tl-switch[hidden]{display:none}
.tl-switch button{appearance:none;border:0;background:none;color:var(--ac-dim);font:inherit;font-size:13px;padding:9px 16px;border-radius:999px;cursor:pointer;display:inline-flex;gap:8px;align-items:baseline;transition:background .25s,color .25s}
.tl-switch button b{font-weight:600;letter-spacing:.06em;color:inherit}
.tl-switch button span{font-size:12px;opacity:.75}
.tl-switch button[aria-checked="true"]{background:linear-gradient(180deg,#E6C995,#C9A15A);color:#15100A}
.tl-switch button:focus-visible{outline:2px solid #E6C995;outline-offset:2px}
.tl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.tl-chips span{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ac-mute);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:5px 10px;white-space:nowrap}
.ap-freqs.tl-list{display:grid;grid-template-columns:1fr;gap:8px}
.ap-freq.tl-row{grid-template-columns:64px minmax(0,1.25fr) minmax(0,1fr) 104px 50px;align-items:center;align-content:center;gap:18px;padding:14px 16px 14px 20px;border-radius:18px;transition:box-shadow .3s,background .3s}
.tl-n{display:flex;align-items:center;gap:10px;font:500 13px var(--mono);letter-spacing:.12em;color:var(--ac-gold);font-variant-numeric:tabular-nums}
.tl-n .ap-tone{position:static}
.tl-t{display:grid;gap:3px;min-width:0}
.tl-t b{font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--ac-text)}
.tl-t .ap-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-use{font-size:11.5px;color:var(--ac-mute)}
.tl-use i{font:500 10px var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;margin-right:4px}
.tl-wave{width:100%;height:40px;display:block}
.tl-len{font:500 12.5px var(--mono);color:var(--ac-dim);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-play{position:relative;width:46px;height:46px;border-radius:50%;border:0;padding:0;cursor:pointer;justify-self:end;background:linear-gradient(180deg,#E6C995,#C9A15A);box-shadow:0 10px 30px -12px rgba(201,161,90,.7);transition:transform .2s,opacity .2s}
.tl-play:hover:not(:disabled){transform:scale(1.05)}
.tl-play:focus-visible{outline:2px solid #E6C995;outline-offset:4px}
.tl-play:disabled{opacity:.22;cursor:default;box-shadow:none}
.tl-ring{position:absolute;left:-4px;top:-4px;width:54px;height:54px;transform:rotate(-90deg);pointer-events:none}
.tl-ring circle{fill:none;stroke-width:1.5;stroke:rgba(230,201,149,.16)}
.tl-ring .tl-prog{stroke:#E6C995;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
.tl-i{position:absolute;left:18px;top:15px;width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #15100A}
.tl-row.playing .tl-i{left:16px;top:15px;width:14px;height:16px;border:0;border-left:4px solid #15100A;border-right:4px solid #15100A;box-sizing:border-box}
.ap-freq.tl-row.playing{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(201,161,90,.55),0 36px 70px -40px rgba(201,161,90,.45)}
.tl-row.playing .tl-len{color:#E6C995}
.tl-soon{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ac-mute);justify-self:end;text-align:right}
@media (max-width:900px){.ap-freq.tl-row{grid-template-columns:44px minmax(0,1fr) 50px;gap:6px 12px;padding:14px}.tl-wave{display:none}.tl-n{grid-row:1 / span 2}.tl-t{grid-column:2}.tl-len{grid-column:2;grid-row:2;text-align:left}.tl-play,.tl-soon,.tl-row .demo{grid-column:3;grid-row:1 / span 2}.tl-t .ap-line{white-space:normal}}
@media (max-width:520px){.tl-switch{width:100%}.tl-switch button{flex:1;justify-content:center;padding:9px 10px}.tl-switch button span{display:none}}

/* "Play demo" over the track list's play button: on hover, keyboard focus and a tap ("Pause" while it plays) */
.tl-tip{position:absolute;bottom:calc(100% + 12px);right:-6px;padding:6px 11px;border-radius:999px;background:#E6C995;color:#15100A;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.tl-tip::after{content:"";position:absolute;top:100%;right:22px;border:5px solid transparent;border-top-color:#E6C995}
.tl-play:not(:disabled):hover .tl-tip,.tl-play:not(:disabled):focus-visible .tl-tip,.tl-play.tip-on .tl-tip{opacity:1;transform:none}
@media (hover:none){.tl-play:not(:disabled):hover .tl-tip{opacity:0}.tl-play.tip-on .tl-tip{opacity:1}}
/* Track list: while AudioCrypt's stream starts, the ring turns */
.tl-row.loading .tl-ring{animation:tl-turn .9s linear infinite}
.tl-row.loading .tl-prog{stroke-dashoffset:72!important}
@keyframes tl-turn{to{transform:rotate(270deg)}}
@media (prefers-reduced-motion:reduce){.tl-row.loading .tl-ring{animation:none}}

/* Renting on a product page (rentout module, src/stock/shop-rent.mjs) */
.rent{max-width:760px}
.rent .h{margin-bottom:8px}
.rent-form,.rent-req{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:22px 0 10px}
.rf{display:grid;gap:6px;flex:1 1 160px;font-size:13px;color:var(--dim)}
.rf-qty{flex:0 1 90px}
.rf input,.rf select{width:100%;border:1px solid var(--line,#3a3c44);background:transparent;color:inherit;border-radius:12px;padding:11px 14px;font:400 15px var(--sans)}
.rent-quote{margin:18px 0 0;padding:18px 20px;border:1px solid var(--line,#3a3c44);border-radius:16px}
.rent-quote p{display:flex;justify-content:space-between;gap:16px;margin:0 0 8px}
.rent-quote b{font-size:20px;letter-spacing:-.02em}
.rent-avail{margin:12px 0 0!important;font-size:14px}
.rent-avail.ok{color:#2f8a5b}
.rent-avail.short{color:#c2341f}
.rent-msg{padding:12px 16px;border-radius:12px;margin:14px 0 0;font-size:15px}
.rent-msg.ok{border:1px solid #2f8a5b;color:#2f8a5b}
.rent-msg.err{border:1px solid #c2341f;color:#c2341f}

/* Buying and the cart (src/stock/cart.mjs) */
.buy-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:16px 0;border-bottom:1px solid var(--line,#3a3c44)}
.buy-name{flex:1 1 220px;display:grid;gap:2px;font-weight:600;font-size:17px}
.buy-name small{font-weight:400;font-size:14px;color:var(--dim)}
.buy-cart{margin:18px 0 0}
.cart-t{width:100%;border-collapse:collapse;margin:20px 0 14px}
.cart-t td{padding:14px 8px;border-bottom:1px solid var(--line,#3a3c44);vertical-align:middle}
.cart-t td small{color:var(--dim)}
.cart-t .n{text-align:right;white-space:nowrap}
.cart-t tfoot td{border:0;font-size:18px}
.cart-q{width:64px;border:1px solid var(--line,#3a3c44);background:transparent;color:inherit;border-radius:10px;padding:8px 10px;font:400 15px var(--sans);text-align:center}
.cart-x{border:0;background:transparent;color:var(--dim);font-size:22px;cursor:pointer;padding:4px 8px}
.cart-x:hover{color:inherit}

/* ===== Layout templates (owner, 31 Oct 2026; product theme.template → body.tpl.tpl-<name>) =====
   Every template is a light page: its own colours, type, corners, buttons and cards. Classic (no template) stays dark.
   Shared base first, then the character of each template. */
body.tpl{--sans:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--display:var(--sans);--radius:16px;--btn-bg:var(--text);--btn-text:var(--bg);--btn-line:var(--text);--shadow:0 1px 2px rgba(0,0,0,.05)}
body.tpl{background:var(--bg);color:var(--text)}
body.tpl .h,body.tpl .faq-h,body.tpl h1,body.tpl h2,body.tpl h3{font-family:var(--display);color:var(--text)}
body.tpl .h .g{background:none;color:var(--gold);-webkit-text-fill-color:currentColor}
body.tpl .p,body.tpl .small,body.tpl .faq p{color:var(--dim)}
body.tpl .btn,body.tpl .btn.gold,body.tpl .cfg-sec .btn.gold,body.tpl .sh .btn.gold{background:var(--btn-bg);color:var(--btn-text);border:1px solid var(--btn-line);box-shadow:var(--shadow);border-radius:var(--btn-radius,999px);text-shadow:none}
body.tpl .btn:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
body.tpl .btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
body.tpl .btn.ghost:hover{border-color:var(--text)}
body.tpl .card,body.tpl .rent-quote,body.tpl .teams{background:var(--card);border-color:var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
body.tpl .sell{background:var(--card);border-color:var(--line)}
body.tpl .rf input,body.tpl .rf select,body.tpl .cart-q,body.tpl .waitlist input[type=email]{background:var(--field,#fff);border-color:var(--line);color:var(--text);border-radius:calc(var(--radius) * .7)}
body.tpl .pill-live{background:var(--gold);color:var(--btn-text)}
body.tpl .pill-soon,body.tpl .eyebrow{color:var(--gold);border-color:var(--line)}
body.tpl .nav,body.tpl .nav .mk{color:var(--text)}
body.tpl .foot{color:var(--dim);border-color:var(--line)}
body.tpl .foot a,body.tpl .foot b{color:var(--text)}
body.tpl .testbar{background:var(--card);color:var(--dim)}
body.tpl :focus-visible{outline-color:var(--gold)}
body.tpl .faq details,body.tpl .faq,body.tpl .buy-row,body.tpl .cart-t td{border-color:var(--line)}

/* shopyroo: the house look. Black and white, one orange signal, bold tight type. */
body.tpl-shopyroo{--bg:#F6F6F3;--card:#FFFFFF;--line:rgba(11,11,11,.12);--dim:#686864;--text:#0B0B0B;--gold:#FF4F00;--gold-hi:#FF4F00;--blue:#0B0B0B;--violet:#FF4F00;--radius:14px}
body.tpl-shopyroo .h{font-weight:700;letter-spacing:-.06em}

/* Blue and black: crisp white, black type, light and deep blue accents. */
body.tpl-blue{--bg:#FFFFFF;--card:#F4F7FC;--line:#DCE4F2;--dim:#5B6577;--text:#0A0F1A;--gold:#1F4FD8;--gold-hi:#6FA0FF;--blue:#6FA0FF;--violet:#1F4FD8;--btn-bg:#0A0F1A;--btn-line:#0A0F1A;--btn-text:#fff;--radius:12px}
body.tpl-blue .h .g{background:linear-gradient(90deg,#1F4FD8,#6FA0FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Earth: warm sand and brown, calm and grown-up. */
body.tpl-earth{--bg:#F3EDE4;--card:#FBF8F3;--line:#E2D6C5;--dim:#7A6A58;--text:#2E2219;--gold:#8B5E3C;--gold-hi:#B07D52;--blue:#8B5E3C;--violet:#B07D52;--btn-bg:#3B2A1E;--btn-line:#3B2A1E;--btn-text:#F8F2E9;--radius:10px}

/* Sage: soft green, fresh and quiet. */
body.tpl-sage{--bg:#EEF2EC;--card:#F8FAF6;--line:#D5DFD1;--dim:#5F6F5E;--text:#1D2A1F;--gold:#3E7B5B;--gold-hi:#6FA58A;--blue:#3E7B5B;--violet:#6FA58A;--btn-bg:#1F3A2B;--btn-line:#1F3A2B;--btn-text:#F2F7F0;--radius:18px}

/* Apricot: orange pastel, translucent glass cards over a soft gradient. */
body.tpl-apricot{--bg:#FFF4EC;--card:rgba(255,255,255,.55);--line:rgba(214,120,62,.18);--dim:#8A6A57;--text:#3A2418;--gold:#E8763A;--gold-hi:#F4A06E;--blue:#E8763A;--violet:#F4A06E;--btn-bg:#E8763A;--btn-line:#E8763A;--btn-text:#fff;--radius:24px;--shadow:0 20px 50px -30px rgba(214,120,62,.45);--field:rgba(255,255,255,.7)}
body.tpl-apricot{background:radial-gradient(900px 600px at 85% -10%,#FFD9C2,transparent 60%),radial-gradient(700px 500px at -10% 30%,#FFE9D6,transparent 60%),#FFF4EC}
body.tpl-apricot .card,body.tpl-apricot .rent-quote,body.tpl-apricot .sell{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7)}

/* Cartoon: loud and fun. Sunny yellow, thick black outlines, offset shadows, round type. */
/* Cartoon: 60s comic action. Bangers (OFL, self-hosted), red/blue/yellow, black outlines, halftone dots */
@font-face{font-family:"Bangers";src:url("/assets/fonts/bangers.woff2") format("woff2");font-weight:400;font-display:swap}
body.tpl-cartoon{--bg:#FFFFFF;--card:#FFFFFF;--line:#111111;--dim:#1A1A1A;--text:#111111;--gold:#E8212B;--gold-hi:#E8212B;--blue:#1D5FD1;--violet:#E8212B;--btn-bg:#E8212B;--btn-line:#111;--btn-text:#fff;--radius:0px;--btn-radius:0px;--shadow:8px 8px 0 #111;--display:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",sans-serif}
/* Ben-Day dots: a coarse 45° raster of red dots over the yellow, like cheap 60s comic print */
body.tpl-cartoon{background-color:#FFFFFF;background-image:radial-gradient(rgba(232,33,43,.24) 2.6px,transparent 3px),radial-gradient(rgba(232,33,43,.24) 2.6px,transparent 3px);background-size:14px 14px;background-position:0 0,7px 7px}
body.tpl-cartoon .hero{background:radial-gradient(rgba(17,17,17,.16) 2px,transparent 2.4px) 0 0/10px 10px,repeating-conic-gradient(from 0deg at 28% 62%,#FFFFFF 0 7deg,#F1F1F1 7deg 14deg);border-bottom:6px solid #111}
body.tpl-cartoon .h,body.tpl-cartoon .pname,body.tpl-cartoon .pname b,body.tpl-cartoon h2,body.tpl-cartoon h3{font-family:"Bangers",var(--display);font-weight:400;letter-spacing:.03em;line-height:.95}
/* 3D block letters: red, black outline, extruded in blue and black */
body.tpl.tpl-cartoon .h,body.tpl.tpl-cartoon .pname{color:#E8212B;-webkit-text-stroke:.04em #111;paint-order:stroke fill;transform:rotate(-3deg) skewX(-4deg);
 text-shadow:.025em .025em 0 #1D5FD1,.05em .05em 0 #1D5FD1,.075em .075em 0 #1D5FD1,.1em .1em 0 #111,.12em .12em 0 #111}
body.tpl.tpl-cartoon .h .g,body.tpl.tpl-cartoon .pname sup{color:#FFE45C;-webkit-text-stroke:.03em #111;text-shadow:.05em .05em 0 #111}
body.tpl-cartoon .pname{position:relative;width:fit-content;max-width:100%;font-size:clamp(84px,13vw,190px)}
body.tpl-cartoon .pname::before,body.tpl-cartoon .pname::after{content:"";position:absolute;right:-.6em;top:-1.6em;font-size:.32em;width:4.6em;height:4.6em;clip-path:polygon(50% 0,59% 24%,82% 6%,75% 32%,100% 30%,80% 50%,100% 70%,74% 68%,82% 94%,58% 76%,50% 100%,42% 76%,18% 94%,26% 68%,0 70%,20% 50%,0 30%,25% 32%,18% 6%,41% 24%);transform:rotate(12deg);pointer-events:none}
body.tpl-cartoon .pname::before{background:#111;transform:rotate(12deg) scale(1.12)}
body.tpl-cartoon .pname::after{content:"BAM!";display:grid;place-items:center;background:#E8212B;color:#FFE45C;-webkit-text-stroke:.04em #111;text-shadow:.07em .07em 0 #111;letter-spacing:.04em}
/* Square comic panels: thick black frames, hard shadows, no rounding */
body.tpl-cartoon .card,body.tpl-cartoon .rent-quote,body.tpl-cartoon .rf input,body.tpl-cartoon .rf select,body.tpl-cartoon .pimg,body.tpl-cartoon .sell{border:5px solid #111;border-radius:0;box-shadow:8px 8px 0 #111}
body.tpl-cartoon .sell{background:radial-gradient(rgba(29,95,209,.18) 2.2px,transparent 2.6px) 0 0/12px 12px,#fff;border-inline:0}
body.tpl-cartoon .pimg::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(17,17,17,.22) 1.6px,transparent 2px) 0 0/8px 8px;mix-blend-mode:multiply;pointer-events:none;z-index:5}
body.tpl-cartoon .btn{border:4px solid #111;border-radius:0;box-shadow:6px 6px 0 #111;font-family:"Bangers",var(--sans);font-weight:400;font-size:24px;letter-spacing:.07em;color:#FFE45C;-webkit-text-stroke:1.5px #111;paint-order:stroke fill;transform:rotate(-1.5deg)}
body.tpl-cartoon .btn:hover{transform:rotate(1.5deg) scale(1.06);box-shadow:10px 10px 0 #111}
body.tpl-cartoon .btn.ghost{background:#1D5FD1;color:#fff}
/* Narration boxes */
body.tpl-cartoon .eyebrow{display:inline-block;padding:5px 12px;background:#fff;border:3px solid #111;box-shadow:4px 4px 0 #111;font:400 19px/1.1 "Bangers",var(--sans);letter-spacing:.1em;color:#111}

/* Magazine: editorial. Off-white paper, huge serif headlines, hairline rules, square corners. */
body.tpl-magazine{--bg:#FAF8F3;--card:#FFFFFF;--line:#1A1A1A;--dim:#555049;--text:#111111;--gold:#B3261E;--gold-hi:#B3261E;--blue:#111;--violet:#B3261E;--radius:0px;--btn-radius:0px;--display:"Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;--shadow:none}
body.tpl-magazine .h{font-weight:500;letter-spacing:-.02em;font-style:normal}
body.tpl-magazine .h .g{font-style:italic;color:var(--gold)}
body.tpl-magazine .sec{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px)}
body.tpl-magazine .card{border-width:0 0 1px;background:transparent}
body.tpl-magazine .eyebrow{font-family:var(--sans);color:var(--gold)}

/* Handmade: kraft paper, warm serif, soft and personal (Etsy-like). */
body.tpl-handmade{--bg:#F4ECDF;--card:#FFFBF4;--line:#E3D3BC;--dim:#7B6651;--text:#3A2A1C;--gold:#C0623B;--gold-hi:#D98A5F;--blue:#7F8F5E;--violet:#C0623B;--btn-bg:#C0623B;--btn-line:#C0623B;--btn-text:#FFF8EF;--radius:20px;--display:"Iowan Old Style",Georgia,serif;--shadow:0 2px 0 #E3D3BC}
body.tpl-handmade .h{font-weight:600;letter-spacing:-.01em}
body.tpl-handmade .card{border-style:dashed}

/* Templates: the hero is light too. Waves in the template's colours over its background (shop.js reads --wave-*). */
body.tpl .hero::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 85%,transparent) 0%,transparent 22%,transparent 55%,color-mix(in srgb,var(--bg) 92%,transparent) 100%)}
body.tpl .hero::before{background:radial-gradient(ellipse 70% 60% at 25% 70%,color-mix(in srgb,var(--bg) 72%,transparent),transparent 70%)}
body.tpl .pname,body.tpl .tag{color:var(--text)}
body.tpl-shopyroo{--wave-fill:#F6F6F3;--wave-back:#D9D9D4;--wave-mid:#9C9C97;--wave-front:#FF4F00}
body.tpl-blue{--wave-fill:#FFFFFF;--wave-back:#C9D8F5;--wave-mid:#6FA0FF;--wave-front:#1F4FD8}
body.tpl-earth{--wave-fill:#F3EDE4;--wave-back:#E2D6C5;--wave-mid:#B07D52;--wave-front:#5A3B25}
body.tpl-sage{--wave-fill:#EEF2EC;--wave-back:#C9D9C6;--wave-mid:#6FA58A;--wave-front:#1F3A2B}
body.tpl-apricot{--wave-fill:#FFF4EC;--wave-back:#FFD9C2;--wave-mid:#F4A06E;--wave-front:#E8763A}
body.tpl-cartoon{--wave-fill:#FFFFFF;--wave-back:#1D5FD1;--wave-mid:#E8212B;--wave-front:#111111}
body.tpl-magazine{--wave-fill:#FAF8F3;--wave-back:#D8D3C8;--wave-mid:#8A847A;--wave-front:#B3261E}
body.tpl-handmade{--wave-fill:#F4ECDF;--wave-back:#E3D3BC;--wave-mid:#7F8F5E;--wave-front:#C0623B}

/* Payment choice and bank transfer (src/stock/cart.mjs) */
.pay{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0 0 4px;padding:0}
.pay legend{width:100%;margin-bottom:8px;font-size:13px;color:var(--dim);padding:0}
.pay-o{position:relative}
.pay-o input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pay-o span{display:inline-block;padding:10px 16px;border:1px solid var(--line,#3a3c44);border-radius:999px;font-size:14px}
.pay-o input:checked+span{border-color:currentColor;font-weight:600}
.pay-o input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.bank-lines{display:block!important;font:500 15px/1.6 var(--mono);margin:6px 0 10px!important}

/* Four catalogue templates (owner, 1 Nov 2026; inspired by print furniture catalogues, built for the web) */
/* Atelier: luxury minimal. White, grey photo surfaces, very large thin high-contrast serif, letter-spaced caps, hairlines. */
body.tpl-atelier{--bg:#FFFFFF;--card:#F2F2F0;--line:#D9D9D6;--dim:#6E6E6A;--text:#2B2B2B;--gold:#2B2B2B;--gold-hi:#8C8C88;--blue:#2B2B2B;--violet:#8C8C88;--btn-bg:#2B2B2B;--btn-line:#2B2B2B;--btn-text:#fff;
 --radius:0px;--btn-radius:0px;--shadow:none;--display:"Didot","Bodoni 72","Bodoni MT","Playfair Display",Georgia,serif;--wave-fill:#FFFFFF;--wave-back:#E6E6E3;--wave-mid:#B9B9B5;--wave-front:#2B2B2B}
body.tpl-atelier .h,body.tpl-atelier .pname{font-weight:400;letter-spacing:-.025em;line-height:.95}
body.tpl-atelier .pname b{font-weight:400}
body.tpl-atelier .eyebrow,body.tpl-atelier .pill-soon,body.tpl-atelier .btn{text-transform:uppercase;letter-spacing:.16em;font-size:12px}
body.tpl-atelier .sec{border-top:1px solid var(--line)}
body.tpl-atelier .card{background:var(--card);border:0}
/* Inter Tight (OFL, variable 400–800, self-hosted) for Ivory */
@font-face{font-family:"Inter Tight";src:url("/assets/fonts/inter-tight.woff2") format("woff2");font-weight:400 800;font-display:swap}
/* Ivory: square catalogue. Ivory and beige, browns, bold tight grotesque in capitals, square crops. */
body.tpl-ivory{--bg:#F6F2EA;--card:#E6DED0;--line:#D8CDBB;--dim:#7A6A58;--text:#3A2C22;--gold:#9C7A5A;--gold-hi:#B79A7C;--blue:#6E5642;--violet:#9C7A5A;--btn-bg:#4A382B;--btn-line:#4A382B;--btn-text:#F6F2EA;
 --radius:2px;--btn-radius:2px;--shadow:none;--display:"Inter Tight",var(--sans);--sans:"Inter Tight",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--wave-fill:#F6F2EA;--wave-back:#E6DED0;--wave-mid:#B79A7C;--wave-front:#4A382B}
body.tpl-ivory .h,body.tpl-ivory .pname{text-transform:uppercase;font-weight:700;letter-spacing:-.04em;line-height:.9}
body.tpl-ivory .h .g{color:var(--gold)}
body.tpl-ivory .btn{text-transform:uppercase;letter-spacing:.08em;font-size:13px}
body.tpl-ivory .card,body.tpl-ivory .sell{background:var(--card);border:0}
/* Forum and Poppins (OFL, self-hosted; loaded only where a template uses them) */
@font-face{font-family:"Forum";src:url("/assets/fonts/forum-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-600.woff2") format("woff2");font-weight:600 700;font-display:swap}
/* Terracotta: warm off-white, terracotta accent, antique serif capitals with wide tracking, slate text. */
body.tpl-terracotta{--bg:#F7F3EE;--card:#FFFFFF;--line:#E4DBD1;--dim:#5F6266;--text:#1E1E1E;--gold:#B7622F;--gold-hi:#D08458;--blue:#5F6266;--violet:#B7622F;--btn-bg:#B7622F;--btn-line:#B7622F;--btn-text:#fff;
 --radius:4px;--btn-radius:4px;--shadow:none;--display:"Forum","Palatino Linotype",Georgia,serif;--sans:"Poppins",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--wave-fill:#F7F3EE;--wave-back:#E4DBD1;--wave-mid:#A7AAAE;--wave-front:#B7622F}
body.tpl-terracotta .h,body.tpl-terracotta .pname{text-transform:uppercase;font-weight:400;letter-spacing:.06em;line-height:1.02}
body.tpl-terracotta .pname b{font-weight:400}
body.tpl-terracotta .eyebrow{letter-spacing:.24em}
body.tpl-terracotta .btn{text-transform:uppercase;letter-spacing:.14em;font-size:12.5px}
/* Walnut: the dark one. Deep walnut brown with ivory type and brass accents. */
body.tpl-walnut{color-scheme:dark;--bg:#2A1F18;--card:#352820;--line:#4A3A2E;--dim:#C8B8A4;--text:#F3EADB;--gold:#C9A66B;--gold-hi:#E2C58F;--blue:#C9A66B;--violet:#8C6A47;--btn-bg:#C9A66B;--btn-line:#C9A66B;--btn-text:#2A1F18;
 --radius:6px;--shadow:none;--display:"Didot","Bodoni 72",Georgia,serif;--field:#2F241C;--wave-fill:#2A1F18;--wave-back:#4A3A2E;--wave-mid:#8C6A47;--wave-front:#C9A66B}
body.tpl-walnut .h,body.tpl-walnut .pname{font-weight:400;letter-spacing:-.02em}
body.tpl-walnut .nav,body.tpl-walnut .nav .mk{color:var(--text)}
body.tpl-walnut .testbar{background:#1F1712;color:var(--dim)}
body.tpl.tpl-cartoon .tag span{color:#1D5FD1}
body.tpl.tpl-cartoon .hero .meta{color:#111;opacity:.75}

/* ===== Ultimate Cartoon (owner, 1 Nov 2026): the whole shop layout as a 60s pop-art comic store =====
   Yellow and blue Ben-Day zones, cream comic panels with thick black ink and hard shadows, sunbursts and bursts,
   heavy italic block letters (Luckiest Guy, Apache 2.0; Bangers, OFL), price in a cloud, red pill buttons with a cart,
   our own mascot (/assets/img/cartoon/, made for this template). */
@font-face{font-family:"Luckiest Guy";src:url("/assets/fonts/luckiest-guy.woff2") format("woff2");font-weight:400;font-display:swap}
body.tpl-ultimate{--bg:#FFE600;--card:#FFF4D6;--line:#111111;--dim:#2A2A2A;--text:#111111;--gold:#E8212B;--gold-hi:#E8212B;--blue:#26B5EA;--violet:#E8212B;--btn-bg:#E8212B;--btn-line:#111;--btn-text:#fff;
 --radius:26px;--btn-radius:999px;--shadow:7px 7px 0 #111;--display:"Luckiest Guy","Bangers",Impact,sans-serif;--field:#fff;
 --ink:#111;--cream:#FFF4D6;--cyan:#26B5EA;--red:#E8212B;--yel:#FFE600;--dots:radial-gradient(rgba(17,17,17,.85) 1.7px,transparent 2.1px);
 --wave-fill:#FFE600;--wave-back:#26B5EA;--wave-mid:#E8212B;--wave-front:#111}
body.tpl-ultimate{background-color:var(--yel);background-image:var(--dots),var(--dots);background-size:13px 13px;background-position:0 0,6.5px 6.5px}
/* zones: every other section sits on a blue dot field, like the bottom of a comic page */
body.tpl-ultimate main>section:nth-of-type(even):not(.hero):not(.sell){position:relative}
body.tpl-ultimate main>section:nth-of-type(4n+2):not(.sell)::before{content:"";position:absolute;inset:-28px calc(50% - 50vw);z-index:-1;background:var(--dots) 0 0/13px 13px,var(--dots) 6.5px 6.5px/13px 13px,var(--cyan);border-block:5px solid var(--ink)}
body.tpl-ultimate main{isolation:isolate}

/* type: heavy italic block letters with black ink and a hard drop */
body.tpl-ultimate .h,body.tpl-ultimate .pname,body.tpl-ultimate .pname b,body.tpl-ultimate h2,body.tpl-ultimate h3,body.tpl-ultimate .faq-h{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:.98;font-style:normal}
body.tpl.tpl-ultimate .h,body.tpl.tpl-ultimate .pname{color:#fff;-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:.06em .07em 0 var(--ink);transform:skewX(-8deg) rotate(-2deg);text-transform:uppercase}
body.tpl.tpl-ultimate .h .g,body.tpl.tpl-ultimate .pname b{color:var(--yel)}
body.tpl.tpl-ultimate .pname b{-webkit-text-stroke:.05em var(--ink);text-shadow:.06em .07em 0 var(--ink)}
body.tpl.tpl-ultimate .h .g{background:none;-webkit-text-fill-color:currentColor;color:var(--red)}
body.tpl.tpl-ultimate .pname sup{font-family:var(--display);color:var(--red);-webkit-text-stroke:.03em var(--ink);text-shadow:none}
body.tpl-ultimate h3{color:var(--red);-webkit-text-stroke:.6px var(--ink);text-transform:uppercase;letter-spacing:.02em}
body.tpl-ultimate .p,body.tpl-ultimate .small,body.tpl-ultimate .faq p{color:#222}

/* nav: a cream pill with black ink, like the search/cart bar on a comic cover */
body.tpl-ultimate .nav{margin:14px auto 0;max-width:min(1180px,calc(100% - 24px));padding:10px 18px;background:var(--cream);border:4px solid var(--ink);border-radius:999px;box-shadow:6px 6px 0 var(--ink);font:400 15px var(--display);letter-spacing:.03em;text-transform:uppercase}
body.tpl-ultimate .nav .mk{font-family:var(--display);font-size:17px}
body.tpl-ultimate .nav .mk .mk-shop{opacity:1;color:var(--red)}
body.tpl-ultimate .nav nav a:hover{color:var(--red)}
body.tpl-ultimate .nav .acc{background:var(--red);color:#fff;border:3px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);-webkit-text-stroke:.5px var(--ink);paint-order:stroke fill}
body.tpl-ultimate .lang summary{font-family:var(--display);font-size:14px}
body.tpl-ultimate .testbar{background:var(--ink);color:var(--yel)}

/* hero: sunburst, a red burst behind the title, the mascot giving a thumbs up */
body.tpl-ultimate .hero{height:auto;min-height:clamp(560px,82vh,780px);margin-top:-80px;padding-top:120px;border-bottom:6px solid var(--ink);
 background:url(/assets/img/cartoon/mascot.webp) right max(0px,calc(50% - 600px)) bottom 0/auto min(88%,560px) no-repeat,
 url(/assets/img/cartoon/burst-red.svg) left max(-60px,calc(50% - 720px)) top 70px/min(62vw,620px) no-repeat,
 url(/assets/img/cartoon/sparkle.svg) right 38% top 18%/46px no-repeat,url(/assets/img/cartoon/sparkle.svg) right 8% top 30%/30px no-repeat,
 repeating-conic-gradient(from 0deg at 35% 55%,#FFF4D6 0 6deg,#FFE600 6deg 12deg)}
body.tpl-ultimate .hero canvas,body.tpl.tpl-ultimate .hero::before,body.tpl.tpl-ultimate .hero::after{display:none}
body.tpl-ultimate .hero-txt{max-width:min(760px,62%)}
body.tpl-ultimate .pname{font-size:clamp(68px,10.5vw,156px)}
body.tpl-ultimate .tag{display:inline-block;width:fit-content;padding:8px 16px;background:var(--cyan);border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transform:rotate(-2deg);font:400 clamp(18px,2.2vw,26px)/1.15 var(--display);color:#fff;-webkit-text-stroke:.04em var(--ink);paint-order:stroke fill;letter-spacing:.02em;text-transform:uppercase}
body.tpl.tpl-ultimate .tag span{color:var(--yel)}
body.tpl.tpl-ultimate .hero .meta{color:var(--ink);font-weight:600;max-width:46ch}

/* buttons: red pills, white italic block letters, black ink, a cart */
body.tpl-ultimate .btn,body.tpl-ultimate .btn.gold{padding:12px 26px;border:4px solid var(--ink);border-radius:999px;box-shadow:6px 6px 0 var(--ink);font:400 22px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;color:#fff;-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;transform:skewX(-6deg)}
body.tpl-ultimate .btn:hover{transform:skewX(-6deg) translate(-2px,-3px) scale(1.04);box-shadow:9px 9px 0 var(--ink)}
body.tpl-ultimate .btn:active{transform:skewX(-6deg) translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
body.tpl-ultimate .ctas .btn:first-child::after,body.tpl-ultimate .buy-row .btn::after,body.tpl-ultimate .cart-go::after{content:"";width:1.05em;height:1.05em;margin-left:.45em;background:url(/assets/img/cartoon/cart.svg) center/contain no-repeat}
body.tpl-ultimate .btn.light,body.tpl-ultimate .btn.ghost{background:var(--cyan);color:#fff;border-color:var(--ink)}
body.tpl-ultimate .btn[disabled]{background:#cfcfcf;color:#fff}

/* panels: cream comic frames with heavy ink */
body.tpl-ultimate .card,body.tpl-ultimate .rent-quote,body.tpl-ultimate .teams,body.tpl-ultimate .gallery figure,body.tpl-ultimate .bento>*,body.tpl-ultimate .feats>*,body.tpl-ultimate .pimg{background-color:var(--cream);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow)}
body.tpl-ultimate .pimg::after{content:"";position:absolute;inset:0;background:var(--dots) 0 0/9px 9px;opacity:.18;mix-blend-mode:multiply;pointer-events:none;z-index:5}
body.tpl-ultimate .eyebrow,body.tpl-ultimate .pill-soon,body.tpl-ultimate .badge{display:inline-block;width:fit-content;padding:4px 12px;background:var(--cyan);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:400 17px/1.1 var(--display);letter-spacing:.06em;color:#fff;-webkit-text-stroke:.04em var(--ink);paint-order:stroke fill;transform:rotate(-2deg)}
body.tpl-ultimate .badge{background:var(--red);font-size:12px;box-shadow:2px 2px 0 var(--ink)}
body.tpl-ultimate .sec .h,body.tpl-ultimate .sell-head .h{font-size:clamp(40px,6.4vw,88px)}

/* the buy box: a big comic panel; prices sit in a cloud */
body.tpl-ultimate .sell{position:relative;background:var(--dots) 0 0/13px 13px,var(--dots) 6.5px 6.5px/13px 13px,var(--red);border-block:6px solid var(--ink)}
body.tpl-ultimate .sell .checkout,body.tpl-ultimate .sell .buy,body.tpl-ultimate .sell-home{background:var(--cream);border:5px solid var(--ink);border-radius:30px;box-shadow:10px 10px 0 var(--ink);padding:clamp(16px,3vw,32px)}
body.tpl-ultimate .sell-head .p{display:inline-block;padding:8px 14px;background:var(--cream);border:3px solid var(--ink);border-radius:14px}
body.tpl-ultimate .opt{border:3px solid var(--ink)!important;border-radius:18px!important;background:#fff!important;box-shadow:4px 4px 0 var(--ink)}
body.tpl-ultimate .opt.on{background:var(--yel)!important}
body.tpl-ultimate .opt b{font-family:var(--display);font-weight:400;letter-spacing:.02em;font-size:20px;text-transform:uppercase}
body.tpl-ultimate .pr,body.tpl-ultimate .buy-row .price,body.tpl-ultimate .rent-quote b{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,38px);color:var(--ink);transform:skewX(-8deg)}
body.tpl-ultimate .buy-row .price,body.tpl-ultimate .pr{display:inline-grid;place-items:center;min-width:5.2em;min-height:3.6em;padding:.2em .7em;background:url(/assets/img/cartoon/cloud.svg) center/100% 100% no-repeat}
body.tpl-ultimate .pr small{display:block;font:600 11px var(--sans);transform:none}
body.tpl-ultimate .trust li{font-weight:700}
body.tpl-ultimate .rf input,body.tpl-ultimate .rf select,body.tpl-ultimate .cart-q{border:3px solid var(--ink);border-radius:14px;background:#fff;font-weight:600}

body.tpl-ultimate .vf>*,body.tpl-ultimate .stage{border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow)}
/* lead texts sit in caption boxes so they stay readable over the dots */
body.tpl-ultimate .sec>.p,body.tpl-ultimate .sec .p.center,body.tpl-ultimate .sec-lead,body.tpl-ultimate .hero .meta{width:fit-content;max-width:min(62ch,100%);margin-inline:auto;padding:10px 16px;background:var(--cream);border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);color:var(--ink)}
body.tpl-ultimate .hero .meta{margin-inline:0;font-size:12px}
body.tpl-ultimate .notes,body.tpl-ultimate .rent form,body.tpl-ultimate .flow{padding:18px 22px;background:var(--cream);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink)}
body.tpl-ultimate .notes{font-size:12.5px}
body.tpl-ultimate .rent form{width:fit-content;max-width:100%}
/* comparison, FAQ, notes */
body.tpl-ultimate .cmp,body.tpl-ultimate .faq details,body.tpl-ultimate .buy-row{border-color:var(--ink)}
body.tpl-ultimate .faq summary{font-family:var(--display);font-size:20px;letter-spacing:.02em;text-transform:uppercase}

/* footer: the last comic panel */
body.tpl-ultimate .foot{margin-top:72px;margin-bottom:28px;padding:22px 26px;background:var(--cream);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink)}
body.tpl-ultimate .foot b,body.tpl-ultimate .foot a{color:var(--ink)}

@media (max-width:760px){
 body.tpl-ultimate .hero{background-size:min(64vw,300px) auto,90vw,32px,22px,auto;background-position:right -10px bottom 0,left -40px top 90px,right 30% top 14%,right 6% top 26%,0 0;padding-bottom:min(66vw,310px)}
 body.tpl-ultimate .nav{padding:8px 10px;font-size:12px;gap:8px}
 body.tpl-ultimate .nav .mk{font-size:14px}
 body.tpl-ultimate .nav .mk .mk-shop,body.tpl-ultimate .nav>nav{display:none}
 body.tpl-ultimate .nav .acc{padding:5px 10px}
 body.tpl-ultimate .hero-txt{max-width:100%}
 body.tpl-ultimate .nav{border-radius:24px}
 body.tpl-ultimate .btn{font-size:19px;padding:11px 20px}
}

/* ===== Eight card looks (owner's example cards, 1 Nov 2026) as shop layouts =====
   studio, clean, frost, stone: light product cards; premium, series, amber, noir: full-bleed photo looks.
   Instrument Serif (OFL, self-hosted) for the editorial ones. */
@font-face{font-family:"Instrument Serif";src:url("/assets/fonts/instrument-serif.woff2") format("woff2");font-weight:400;font-display:swap}
body.tpl-studio,body.tpl-clean,body.tpl-frost,body.tpl-stone,body.tpl-premium,body.tpl-series,body.tpl-amber,body.tpl-noir{--radius:22px;--btn-radius:999px;--shadow:none}
body.tpl-studio .eyebrow,body.tpl-clean .eyebrow,body.tpl-frost .eyebrow,body.tpl-stone .eyebrow,body.tpl-premium .eyebrow,body.tpl-series .eyebrow,body.tpl-amber .eyebrow,body.tpl-noir .eyebrow{font:500 11px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase}
body.tpl-studio .h,body.tpl-clean .h,body.tpl-frost .h,body.tpl-stone .h,body.tpl-premium .h,body.tpl-amber .h{font-weight:600;letter-spacing:-.035em}

/* Studio: warm off-white, soft beige cards, black pill buttons */
body.tpl-studio{--bg:#F4F1EC;--card:#ECE7DF;--line:#E0D9CE;--dim:#6F6A62;--text:#1B1B1B;--gold:#1B1B1B;--gold-hi:#8C857A;--blue:#1B1B1B;--violet:#8C857A;--btn-bg:#1E1E1E;--btn-line:#1E1E1E;--btn-text:#fff;
 --wave-fill:#F4F1EC;--wave-back:#E3DDD3;--wave-mid:#B9B1A5;--wave-front:#1E1E1E}
body.tpl-studio .card,body.tpl-studio .pimg{background:linear-gradient(180deg,#F1EDE6,#E6E0D6);border:0}

/* Clean: white outlined cards, quantity stepper, square cart button */
body.tpl-clean{--bg:#FFFFFF;--card:#FFFFFF;--line:#D9D9D9;--dim:#6B6B6B;--text:#151515;--gold:#151515;--gold-hi:#8A8A8A;--blue:#151515;--violet:#8A8A8A;--btn-bg:#1E1E1E;--btn-line:#1E1E1E;--btn-text:#fff;--btn-radius:14px;
 --wave-fill:#FFFFFF;--wave-back:#EDEDED;--wave-mid:#BDBDBD;--wave-front:#151515}
body.tpl-clean .card,body.tpl-clean .rent-quote,body.tpl-clean .sell .checkout,body.tpl-clean .pimg{border:1.5px solid var(--line);background:#fff}
body.tpl-clean .cart-q,body.tpl-clean .rf input[type=number]{border-radius:999px}

/* Frost: brushed silver, frosted glass cards, white pills */
body.tpl-frost{--bg:#E6E8EB;--card:rgba(255,255,255,.38);--line:rgba(255,255,255,.75);--dim:#5B6068;--text:#1C2026;--gold:#3A4048;--gold-hi:#8D949E;--blue:#3A4048;--violet:#8D949E;--btn-bg:#FFFFFF;--btn-line:rgba(255,255,255,.9);--btn-text:#1C2026;
 --shadow:0 10px 30px -14px rgba(30,36,44,.35);--wave-fill:#E6E8EB;--wave-back:#F7F8FA;--wave-mid:#AEB4BC;--wave-front:#3A4048}
body.tpl-frost{background:linear-gradient(160deg,#F4F5F7 0%,#D6DADF 45%,#EEF0F2 70%,#C9CED4 100%) fixed}
body.tpl-frost .card,body.tpl-frost .rent-quote,body.tpl-frost .sell,body.tpl-frost .pimg,body.tpl-frost .teams{background:rgba(255,255,255,.34);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow)}
body.tpl-frost .btn{box-shadow:0 4px 14px -6px rgba(30,36,44,.4)}

/* Stone: travertine beige, gallery light, outlined pills */
body.tpl-stone{--bg:#EDE8E1;--card:#E4DDD2;--line:#CFC6B8;--dim:#6E665B;--text:#1E1C19;--gold:#1E1C19;--gold-hi:#9A8F80;--blue:#1E1C19;--violet:#9A8F80;--btn-bg:transparent;--btn-line:#1E1C19;--btn-text:#1E1C19;
 --wave-fill:#EDE8E1;--wave-back:#DDD4C6;--wave-mid:#B3A794;--wave-front:#1E1C19}
body.tpl-stone .btn{border-width:1.5px}
body.tpl-stone .btn:hover{background:#1E1C19;color:#EDE8E1}
body.tpl-stone .card,body.tpl-stone .pimg{border:0;background:linear-gradient(180deg,#EFEAE3 0%,#E2DACD 100%)}
body.tpl-stone .sell{background:#E4DDD2}

/* Premium: black, warm wood light, white type, circle arrow buttons; full-bleed photos */
body.tpl-premium{color-scheme:dark;--bg:#0D0D0D;--card:#171717;--line:#2A2A2A;--dim:#A3A3A3;--text:#FFFFFF;--gold:#D2A878;--gold-hi:#E6C49C;--blue:#D2A878;--violet:#8A6A48;--btn-bg:#FFFFFF;--btn-line:#FFFFFF;--btn-text:#0D0D0D;--field:#151515;
 --wave-fill:#0D0D0D;--wave-back:#2A2A2A;--wave-mid:#8A6A48;--wave-front:#D2A878}
body.tpl-premium .btn.ghost,body.tpl-premium .btn.light{background:transparent;color:#fff;border:1.5px solid #fff}
body.tpl-premium .nav,body.tpl-premium .nav .mk{color:#fff}
body.tpl-premium .testbar{background:#000;color:#8a8a8a}
body.tpl-premium .sell{background:#111}

/* Series: editorial. Warm paper, huge Instrument Serif, arrow links instead of loud buttons */
body.tpl-series{--bg:#EFEAE3;--card:#E6DFD4;--line:#D3CABD;--dim:#6B645A;--text:#141414;--gold:#141414;--gold-hi:#8F877B;--blue:#141414;--violet:#8F877B;--btn-bg:#141414;--btn-line:#141414;--btn-text:#EFEAE3;--display:"Instrument Serif","Iowan Old Style",Georgia,serif;
 --wave-fill:#EFEAE3;--wave-back:#DED6C9;--wave-mid:#A99F90;--wave-front:#141414}
body.tpl.tpl-series .h,body.tpl.tpl-series .pname,body.tpl-series .pname b{font-family:var(--display);font-weight:400;letter-spacing:-.035em;line-height:.88}
body.tpl-series .pname{font-size:clamp(84px,14vw,210px)}
body.tpl-series .h{font-size:clamp(48px,7.6vw,110px)}
body.tpl-series .btn.ghost,body.tpl-series .btn.light{background:transparent;color:var(--text);box-shadow:none;border:0;border-bottom:1.5px solid var(--text);border-radius:0;padding-inline:2px}
body.tpl-series .btn.ghost::after,body.tpl-series .btn.light::after{content:"→";margin-left:10px}

/* Amber: warm caramel light with leaf shadows, cream type and pills */
body.tpl-amber{color-scheme:dark;--bg:#6E4426;--card:rgba(255,236,214,.1);--line:rgba(255,232,206,.28);--dim:#F1D8BD;--text:#FFF3E4;--gold:#FFD7A8;--gold-hi:#FFE6C6;--blue:#FFD7A8;--violet:#C98A55;--btn-bg:#FFF3E4;--btn-line:#FFF3E4;--btn-text:#3B2414;--field:#5B371E;
 --wave-fill:#6E4426;--wave-back:#8A5A33;--wave-mid:#C98A55;--wave-front:#FFD7A8}
body.tpl-amber{background:radial-gradient(1100px 700px at 80% 0%,#C98A55 0%,transparent 60%),radial-gradient(900px 700px at 0% 60%,#8A5A33 0%,transparent 65%),#5E3920}
body.tpl-amber .nav,body.tpl-amber .nav .mk{color:var(--text)}
body.tpl-amber .testbar{background:#3B2414;color:#E8C9A6}
body.tpl-amber .card,body.tpl-amber .rent-quote,body.tpl-amber .sell,body.tpl-amber .teams{background:rgba(255,236,214,.08);border:1px solid var(--line)}
body.tpl-amber .btn.ghost,body.tpl-amber .btn.light{background:transparent;color:var(--text);border:1.5px solid var(--text)}
body.tpl-amber .pill-live,body.tpl-amber .badge{background:transparent;border:1.5px solid var(--text);color:var(--text)}

/* Noir: pure black, Instrument Serif in white, spaced caps, vinyl grooves, round white buttons */
body.tpl-noir{color-scheme:dark;--bg:#070707;--card:#121212;--line:#262626;--dim:#9E9E9E;--text:#FFFFFF;--gold:#FFFFFF;--gold-hi:#BDBDBD;--blue:#FFFFFF;--violet:#6B6B6B;--btn-bg:#FFFFFF;--btn-line:#FFFFFF;--btn-text:#070707;--field:#121212;--display:"Instrument Serif","Iowan Old Style",Georgia,serif;
 --wave-fill:#070707;--wave-back:#1E1E1E;--wave-mid:#5A5A5A;--wave-front:#E8E8E8}
body.tpl.tpl-noir .h,body.tpl.tpl-noir .pname,body.tpl-noir .pname b{font-family:var(--display);font-weight:400;letter-spacing:-.025em;line-height:.92}
body.tpl-noir .pname{font-size:clamp(80px,12vw,180px)}
body.tpl-noir .hero{background:repeating-radial-gradient(circle at 110% 40%,#0B0B0B 0 3px,#131313 3px 4px),#070707}
body.tpl-noir .tag{letter-spacing:.2em;text-transform:uppercase;font-size:14px}
body.tpl-noir .nav,body.tpl-noir .nav .mk{color:#fff}
body.tpl-noir .testbar{background:#000;color:#777}
body.tpl-noir .sell{background:#0E0E0E}
body.tpl-noir .btn.ghost,body.tpl-noir .btn.light{background:transparent;color:#fff;border:1.5px solid #fff}
body.tpl-premium .pname sup,body.tpl-amber .pname sup,body.tpl-noir .pname sup{color:var(--gold)}

/* Full-bleed: in premium, series, amber and noir the photo hero fills the screen and the text sits on it */
body.tpl-premium .hero-image,body.tpl-series .hero-image,body.tpl-amber .hero-image,body.tpl-noir .hero-image{position:relative;display:grid;align-items:end;min-height:clamp(560px,86vh,860px);padding:0 0 clamp(32px,6vw,72px);overflow:hidden}
body.tpl-premium .hero-img,body.tpl-series .hero-img,body.tpl-amber .hero-img,body.tpl-noir .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;z-index:0}
body.tpl-premium .hero-image::after,body.tpl-amber .hero-image::after,body.tpl-noir .hero-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.72) 100%);z-index:1}
body.tpl-series .hero-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(239,234,227,.9) 0%,rgba(239,234,227,.4) 45%,transparent 70%);z-index:1}
body.tpl-premium .hero-image .hero-txt,body.tpl-series .hero-image .hero-txt,body.tpl-amber .hero-image .hero-txt,body.tpl-noir .hero-image .hero-txt{position:relative;z-index:2;padding-inline:var(--gut)}
body.tpl-premium .hero-image .pname,body.tpl-amber .hero-image .pname,body.tpl-noir .hero-image .pname{color:#fff}
/* product pictures and screenshots edge to edge, no frame */
body.tpl-premium .pimg,body.tpl-amber .pimg,body.tpl-noir .pimg,body.tpl-series .pimg{border:0}
body.tpl-premium .gallery img,body.tpl-amber .gallery img,body.tpl-noir .gallery img,body.tpl-series .gallery img,body.tpl-premium .bb-shot img,body.tpl-noir .bb-shot img{border:0;border-radius:var(--radius)}

/* Full-bleed hero photo (theme.heroPhoto) instead of the waves, in every look: the photo fills the screen,
   the title sits low on a fade into the page colour so it stays readable on light and dark templates. */
.hero.hero-full{min-height:clamp(560px,92vh,940px);height:auto;overflow:hidden}
.hero-full .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero.hero-full::before{display:none}
.hero.hero-full::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(0deg,var(--bg,#08090B) 0%,color-mix(in srgb,var(--bg,#08090B) 72%,transparent) 26%,transparent 62%),linear-gradient(90deg,color-mix(in srgb,var(--bg,#08090B) 55%,transparent) 0%,transparent 55%)}
body.tpl .hero.hero-full::after{display:block;background:linear-gradient(0deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 72%,transparent) 26%,transparent 62%),linear-gradient(90deg,color-mix(in srgb,var(--bg) 55%,transparent) 0%,transparent 55%)}
.hero-full .hero-txt{z-index:2}
body.tpl-ultimate .hero.hero-full{background:none}
body.tpl-ultimate .hero.hero-full .hero-photo{filter:saturate(1.5) contrast(1.1)}
body.tpl-ultimate .hero.hero-full::after{display:block;background:radial-gradient(rgba(17,17,17,.5) 1.4px,transparent 1.8px) 0 0/8px 8px;mix-blend-mode:multiply}
body.tpl-noir .hero.hero-full{background:none}

/* ===== Product card blocks: collections, detail views, spec card, video (src/catalog/render.mjs) =====
   Neutral by default; every template colours them through its tokens (--card, --line, --text, --btn-*, --radius). */
.coll,.dv,.spec,.vid{margin-top:clamp(48px,7vw,96px)}
.coll-h,.vid-h{margin-bottom:24px}
.coll-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.coll-grid.n1{grid-template-columns:1fr}
.coll-grid.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){.coll-grid.n4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:420px){.coll-grid.n4{grid-template-columns:1fr}}
.coll-card{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--radius,22px);overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;background:#111}
.coll-grid.n1 .coll-card,.coll-grid.n2 .coll-card{aspect-ratio:16/10}
.coll-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);z-index:-1}
.coll-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.7));z-index:-1}
.coll-card:hover img{transform:scale(1.04)}
.coll-txt{position:absolute;left:22px;right:76px;bottom:20px;display:grid;gap:4px}
.coll-txt small{font:500 10.5px var(--sans);letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.coll-txt b{font:400 clamp(24px,2.6vw,34px)/1.02 var(--display,var(--sans));letter-spacing:-.02em}
.coll-go{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;width:44px;height:44px;border:1.5px solid rgba(255,255,255,.9);border-radius:50%;transition:background .2s,color .2s}
.coll-card:hover .coll-go{background:#fff;color:#111}
.ic,.ic-arrow,.ic-cart,.ic-heart{width:20px;height:20px;flex:none}
.dv-head{margin-bottom:22px;display:grid;gap:10px}
.dv-box{position:relative;display:grid;gap:12px;padding:clamp(14px,2vw,22px);background:var(--card);border:1px solid var(--line);border-radius:var(--radius,22px)}
.dv-r{position:absolute;opacity:0;pointer-events:none}
.dv-stage{aspect-ratio:16/9;border-radius:calc(var(--radius,22px) * .7);overflow:hidden;background:#e9e6e0}
.dv-img{display:none;width:100%;height:100%;object-fit:cover}
.dv-thumbs{position:absolute;left:clamp(26px,3.4vw,40px);bottom:clamp(26px,3.4vw,40px);display:flex;gap:10px;flex-wrap:wrap}
.dv-t{width:clamp(48px,7vw,76px);aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:pointer;border:2px solid rgba(255,255,255,.7);box-shadow:0 6px 18px -6px rgba(0,0,0,.45);opacity:.8;transition:opacity .2s,border-color .2s}
.dv-t:hover{opacity:1}
.dv-t img{width:100%;height:100%;object-fit:cover;display:block}
.dv-r:nth-of-type(1):checked~.dv-stage .dv-img:nth-child(1){display:block}
.dv-r:nth-of-type(1):checked~.dv-thumbs .dv-t:nth-child(1){opacity:1;border-color:#fff}
.dv-r:nth-of-type(1):focus-visible~.dv-thumbs .dv-t:nth-child(1){outline:2px solid var(--gold);outline-offset:2px}
.dv-r:nth-of-type(2):checked~.dv-stage .dv-img:nth-child(2){display:block}
.dv-r:nth-of-type(2):checked~.dv-thumbs .dv-t:nth-child(2){opacity:1;border-color:#fff}
.dv-r:nth-of-type(2):focus-visible~.dv-thumbs .dv-t:nth-child(2){outline:2px solid var(--gold);outline-offset:2px}
.dv-r:nth-of-type(3):checked~.dv-stage .dv-img:nth-child(3){display:block}
.dv-r:nth-of-type(3):checked~.dv-thumbs .dv-t:nth-child(3){opacity:1;border-color:#fff}
.dv-r:nth-of-type(3):focus-visible~.dv-thumbs .dv-t:nth-child(3){outline:2px solid var(--gold);outline-offset:2px}
.dv-r:nth-of-type(4):checked~.dv-stage .dv-img:nth-child(4){display:block}
.dv-r:nth-of-type(4):checked~.dv-thumbs .dv-t:nth-child(4){opacity:1;border-color:#fff}
.dv-r:nth-of-type(4):focus-visible~.dv-thumbs .dv-t:nth-child(4){outline:2px solid var(--gold);outline-offset:2px}
.dv-r:nth-of-type(5):checked~.dv-stage .dv-img:nth-child(5){display:block}
.dv-r:nth-of-type(5):checked~.dv-thumbs .dv-t:nth-child(5){opacity:1;border-color:#fff}
.dv-r:nth-of-type(5):focus-visible~.dv-thumbs .dv-t:nth-child(5){outline:2px solid var(--gold);outline-offset:2px}
.dv-r:nth-of-type(6):checked~.dv-stage .dv-img:nth-child(6){display:block}
.dv-r:nth-of-type(6):checked~.dv-thumbs .dv-t:nth-child(6){opacity:1;border-color:#fff}
.dv-r:nth-of-type(6):focus-visible~.dv-thumbs .dv-t:nth-child(6){outline:2px solid var(--gold);outline-offset:2px}
.spec-grid{display:grid;gap:16px;align-items:stretch}
.spec-grid.has-img{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.spec-img{width:100%;height:100%;min-height:320px;object-fit:cover;border-radius:var(--radius,22px)}
.spec-card{display:grid;align-content:start;gap:18px;padding:clamp(20px,3vw,32px);background:var(--card);border:1px solid var(--line);border-radius:var(--radius,22px);color:var(--text)}
.spec-top{display:flex;justify-content:space-between;gap:12px}
.spec-name{margin:0;font:600 clamp(22px,2.4vw,30px)/1.1 var(--sans);letter-spacing:-.02em;color:var(--text)}
.spec-price{margin:6px 0 0;font-size:clamp(20px,2.2vw,26px);color:var(--text)}
.spec-list{list-style:none;margin:0;padding:0}
.spec-list li{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.spec-list li:last-child{border-bottom:0}
.spec-cta{width:100%;gap:10px;margin-top:6px}
.vid-box{position:relative;margin:0;border-radius:var(--radius,22px);overflow:hidden;background:#000;aspect-ratio:16/9}
.vid-v{display:block;width:100%;height:100%;object-fit:cover}
.vid-play,.vid-poster{display:none}
.vid-box.ready .vid-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.vid-box.ready .vid-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:clamp(64px,8vw,92px);aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.95);border-radius:50%;background:rgba(0,0,0,.28);color:#fff;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .2s,background .2s}
.vid-box.ready .vid-play:hover{transform:translate(-50%,-50%) scale(1.06);background:rgba(0,0,0,.45)}
.ic-play{width:42%;height:42%;margin-left:6%}
.vid-cap{position:absolute;left:22px;bottom:18px;display:grid;gap:2px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5);pointer-events:none}
.vid-cap span{font-size:15px;font-weight:500}
.vid-cap small{font-size:12.5px;opacity:.85}
.vid-box.playing .vid-play,.vid-box.playing .vid-cap,.vid-box.playing .vid-poster{display:none}
@media (max-width:760px){.spec-grid.has-img{grid-template-columns:1fr}.spec-img{min-height:240px}.coll-card{aspect-ratio:4/5}}

/* Full-bleed product cards on the shop home (card.photo or the hero photo): the picture fills the card,
   name, text, price and button sit on a dark fade at the bottom. Cards without a photo keep the product image tile. */
.pcard.full{position:relative;display:block;min-height:440px;border:0;background:#0B0C10;color:#fff;isolation:isolate}
.pcard.full .pcard-img{position:absolute;inset:0;z-index:-2}
.pcard-photo{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pcard.full:hover .pcard-photo{transform:scale(1.04)}
.pcard.full::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 28%,transparent 42%,rgba(0,0,0,.82) 100%)}
.pcard.full .pcard-body{position:absolute;left:0;right:0;bottom:0;padding:20px 20px 20px}
.pcard.full .pcard-name b{font-size:clamp(20px,2vw,26px);letter-spacing:-.025em;color:#fff}
.pcard.full .pcard-name .byline,.pcard.full .card-tag{color:rgba(255,255,255,.78)}
.pcard.full .card-tag{min-height:0}
.pcard.full .from{color:#fff;font-weight:600}
.pcard.full .btn.sm{background:#fff;color:#0B0C10;border-color:#fff;box-shadow:none}
.pcard.full .btn.ghost.sm{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
.pcard.full .soonpill{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4)}
@media (max-width:700px){.pcard.full{min-height:0;aspect-ratio:4/5}}
.pcard-photo.at-left{object-position:22% 50%}
.pcard-photo.at-right{object-position:78% 50%}

/* Device tiles, full-bleed style (device_tiles.style = full): the picture fills the tile and the text sits on a dark fade.
   Photos with a background (cover, and the wide tile) fill the tile; cut-out devices stand large in studio light. */
.dt.full .dt-card{padding:0;min-height:clamp(420px,38vw,520px);justify-content:flex-end;
 background:radial-gradient(90% 65% at 50% 34%,#2C2C31 0%,#141416 58%,#0A0A0B 100%)}
.dt.full .dt-img{position:absolute;inset:0;margin:0;height:auto;aspect-ratio:auto;border-radius:0;place-items:start center;padding-top:9%;
 background:radial-gradient(42% 26% at 50% 66%,rgba(255,255,255,.07),transparent 70%)}
.dt.full .dt-img img{max-width:74%;max-height:58%;filter:drop-shadow(0 34px 40px rgba(0,0,0,.85)) brightness(1.1)}
.dt.full .dt-card.cover .dt-img,.dt.full .dt-card.wide .dt-img{padding:0;place-items:stretch}
.dt.full .dt-card.cover .dt-img img,.dt.full .dt-card.wide .dt-img img{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover;border-radius:0;filter:none}
.dt.full .dt-card:hover .dt-img img{transform:scale(1.04)}
.dt.full .dt-txt{position:relative;z-index:2;padding:clamp(18px,2vw,26px);padding-top:clamp(60px,7vw,110px);background:linear-gradient(180deg,transparent 0%,rgba(8,8,9,.82) 46%,rgba(8,8,9,.94) 100%)}
.dt.full .dt-sw{z-index:3}
@media (max-width:760px){.dt.full .dt-card{min-height:400px}}

/* shopyroo demo shops (src/shopyroo/demos.mjs): the demo bar on top, the brand as a wordmark, an honest footer. */
.demobar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:10px var(--gut);background:#0B0B0B;color:#fff;font:500 13px/1.3 "Geist",var(--sans)}
.demobar span{margin-right:auto}
.demobar b{font-weight:650}
.demobar a{color:#fff;text-decoration:none;white-space:nowrap}
.demobar-all{opacity:.7}
.demobar-all:hover{opacity:1}
.demobar-go{padding:7px 14px;border-radius:999px;background:#FF4F00;font-weight:650}
.demobar-go:hover{background:#ff6a26}
.nav .mk-word{font:600 17px var(--display,var(--sans));letter-spacing:-.01em;color:var(--text);text-decoration:none}
.demo-foot p{margin:0}
@media (max-width:640px){.demobar{flex-wrap:wrap;gap:8px 12px;font-size:12px}.demobar span{flex-basis:100%}}

/* ===== Page width for layout templates (theme.width; owner, 1 Nov 2026) =====
   One column for everything: the logo, the hero text and every block start on the same line. contained: the content
   column (1120px); a photo hero becomes a rounded stage of that width. full: the whole window with the same side
   margins everywhere; the photo hero stays edge to edge. Classic pages (no template) keep their own layout. */
body.tpl{--inner:1120px}
body.tpl.w-full{--inner:100%}
body.tpl .wrap{padding-inline:max(var(--gut), calc((100% - var(--inner)) / 2))}
body.tpl .wrap-inner{max-width:var(--inner)}
body.tpl .hero-txt.wrap{max-width:none}
body.tpl .hero-txt.wrap > *{max-width:min(900px, 100%)}
body.tpl-ultimate .hero-txt.wrap{max-width:none}
body.tpl-ultimate .hero-txt.wrap > *{max-width:min(760px, 56vw)}
/* contained: the photo hero as a stage in the column */
body.tpl.w-contained .hero.hero-full,
body.tpl.w-contained:is(.tpl-premium,.tpl-series,.tpl-amber,.tpl-noir) .hero.hero-image{width:min(var(--inner), calc(100% - 2 * var(--gut)));margin:8px auto 0;padding-inline:0;
 min-height:clamp(480px,72vh,760px);border-radius:max(var(--radius,16px),18px);overflow:hidden;isolation:isolate}
body.tpl.w-contained .hero.hero-full .hero-txt.wrap,
body.tpl.w-contained:is(.tpl-premium,.tpl-series,.tpl-amber,.tpl-noir) .hero.hero-image .hero-txt{padding-inline:clamp(22px,3.4vw,48px)}
/* full: big blocks stay within the screen height */
body.tpl.w-full .dv-stage{max-height:78vh;aspect-ratio:auto;height:min(78vh, calc((100vw - 2 * var(--gut)) * 9 / 16))}
body.tpl.w-full .vid-box{max-height:82vh}
body.tpl.w-full .coll-card{max-height:78vh}
/* the shopyroo wordmark and the width switch in the demo bar */
.demobar-mk{font:800 15px/1 "Geist",var(--sans);letter-spacing:-.04em;color:#fff;text-decoration:none;opacity:1!important;padding:0!important;background:none!important}
.demobar-mk i{font-style:normal;color:#FF4F00}
.demobar-w{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.1)}
.demobar-w a{padding:5px 11px;border-radius:999px;font-size:12px;opacity:.75}
.demobar-w a[aria-current]{background:#fff;color:#0B0B0B;opacity:1}
@media (max-width:640px){.demobar-w{order:3}.demobar span:not(.demobar-w){flex-basis:auto}}
/* full: the full-bleed photo hero's section already has the side margin; its text adds none */
body.tpl.w-full:is(.tpl-premium,.tpl-series,.tpl-amber,.tpl-noir) .hero.hero-image .hero-txt{padding-inline:0}
/* Ultimate Cartoon: the pill navigation is as wide as the column, with its own inner padding */
body.tpl.tpl-ultimate .nav.wrap{max-width:min(calc(var(--inner) + 40px), calc(100% - 24px));padding-inline:20px}

/* Demo bar, bigger and easier to read (owner, 1 Nov 2026): back to all styles on the left, the shopyroo wordmark and the
   style, the width switch, a large "Start a shop in this style". Phones: one row plus the width switch, short labels. */
.demobar{gap:14px 18px;padding:12px var(--gut);font:500 15px/1.3 "Geist",var(--sans);min-height:60px}
.demobar > span{flex-basis:auto}
.demobar-t{margin-right:auto}
.demobar-back{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font-weight:600;font-size:14px}
.demobar-back:hover{background:rgba(255,255,255,.1)}
.demobar-mk{font-size:21px}
.demobar-w a{padding:7px 14px;font-size:13.5px}
.demobar-go{padding:12px 22px;font-size:15.5px;font-weight:700;box-shadow:0 6px 18px -8px rgba(255,79,0,.8)}
.db-s{display:none}
@media (max-width:900px){.demobar-back .db-l{display:none}.demobar-back{padding:9px 13px}}
@media (max-width:640px){
 .demobar{flex-wrap:wrap;gap:8px 10px;padding:8px 12px;min-height:0;font-size:13.5px}
 .demobar-t .db-l,.demobar-go .db-l{display:none}
 .demobar-go .db-s{display:inline}
 .demobar-mk{font-size:17px}
 .demobar-back{padding:7px 11px;font-size:15px}
 .demobar-go{padding:9px 14px;font-size:13.5px}
 .demobar-w{order:9;flex-basis:100%;justify-content:center;background:rgba(255,255,255,.08)}
 .demobar-w a{flex:1;text-align:center;padding:5px 10px;font-size:12px}
}

/* The product description (Text block) in layout templates: an editorial spread, the heading in the template's display
   type on the left, the text on the right with a larger first paragraph; colours from the template. */
body.tpl .prose{max-width:var(--inner);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,4vw,72px);align-items:start;
 margin-top:clamp(56px,8vw,112px);color:var(--dim);font-size:clamp(16px,1.25vw,18px);line-height:1.7}
body.tpl .prose h2{grid-row:span 20;margin:0;font:inherit;font-family:var(--display);font-size:clamp(34px,4.4vw,64px);line-height:1.02;letter-spacing:-.03em;color:var(--text)}
body.tpl .prose p{margin:0 0 1em;grid-column:2}
body.tpl .prose p:first-of-type{font-size:1.22em;line-height:1.55;color:var(--text)}
body.tpl .prose p:last-child{margin-bottom:0}
@media (max-width:760px){body.tpl .prose{grid-template-columns:1fr;gap:14px}body.tpl .prose h2,body.tpl .prose p{grid-column:1;grid-row:auto}}
/* Demo shops: the call to action under "This is a demo shop." */
.demo-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.demo-cta .btn{font-size:16px;padding:14px 26px}
body.tpl .prose{row-gap:0;color:color-mix(in srgb,var(--text) 78%,var(--bg))}
body.tpl .prose p{margin-bottom:1.1em}

/* ===== Article (magazine print style; owner, 1 Nov 2026) =====
   Kicker, a big headline in the page's display type, a standfirst and a byline; the lead picture; the text in one or two
   columns (justified, hyphenated) with an optional drop cap; heads, pull quotes and pictures span the columns. */
.art{margin-top:clamp(64px,9vw,128px);color:var(--text)}
.art-head{max-width:980px;margin:0 auto clamp(28px,4vw,48px);text-align:center}
.art-kicker{margin:0 0 18px;font:600 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.art-title{margin:0;font-family:var(--display,var(--sans));font-weight:inherit;font-size:clamp(44px,7vw,104px);line-height:.95;letter-spacing:-.035em;text-wrap:balance}
.art-dek{max-width:720px;margin:24px auto 0;font-size:clamp(19px,1.8vw,24px);line-height:1.45;color:color-mix(in srgb,var(--text) 80%,var(--bg,#fff))}
.art-by{margin:20px 0 0;font:500 13px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.art-lead{margin:0 0 clamp(32px,5vw,64px)}
.art-lead img,.art-fig img{display:block;width:100%;border-radius:calc(var(--radius,16px) * .6)}
.art-lead img{aspect-ratio:16/8;object-fit:cover}
.art figcaption{margin-top:10px;font:400 13px/1.5 var(--sans);color:var(--dim)}
.art-body{max-width:760px;margin:0 auto;font-size:clamp(17px,1.2vw,19px);line-height:1.72;color:color-mix(in srgb,var(--text) 86%,var(--bg,#fff));hyphens:auto;-webkit-hyphens:auto}
.art.cols-2 .art-body{max-width:none}.art.cols-2 .art-cols{column-count:2;column-gap:clamp(32px,4vw,64px);column-rule:1px solid var(--line);text-align:justify}
.art-body p{margin:0 0 1.05em;orphans:3;widows:3}
.art-body h3{column-span:all;margin:1.4em 0 .7em;font-family:var(--display,var(--sans));font-weight:inherit;font-size:clamp(26px,2.6vw,38px);line-height:1.1;letter-spacing:-.02em;color:var(--text);text-align:left}
.art.cols-2 .art-body h3{column-span:none;break-after:avoid}
.art.dropcap .art-body > .art-cols:first-child > p:first-child::first-letter{float:left;margin:.06em .1em 0 0;font-family:var(--display,var(--sans));font-size:5.4em;line-height:.78;font-weight:700;color:var(--gold)}
.art-quote{column-span:all;margin:clamp(28px,4vw,56px) auto;max-width:900px;padding:clamp(22px,3vw,36px) 0;border-block:2px solid var(--text);text-align:center;break-inside:avoid}
.art-quote p{margin:0;font-family:var(--display,var(--sans));font-size:clamp(28px,3.4vw,50px);line-height:1.12;letter-spacing:-.02em;color:var(--text);text-align:center;hyphens:manual}
.art-quote p::before{content:"“";display:block;font-size:1.6em;line-height:.6;color:var(--gold)}
.art-quote cite{display:block;margin-top:16px;font:600 12px var(--sans);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.art-fig{column-span:all;margin:clamp(24px,3vw,44px) 0;break-inside:avoid}
@media (max-width:760px){.art.cols-2 .art-cols{column-count:1;text-align:left}.art-lead img{aspect-ratio:4/3}}
/* classic dark pages: the same article, the shop's own colours */
body:not(.tpl) .art-dek{color:#c9ccd3}
body:not(.tpl) .art-body{color:#d8dae0}
.art.dropcap .art-body > .art-cols:first-child > p:first-child::first-letter{font-size:6.6em;line-height:.74;margin:.04em .09em 0 -.02em}
/* the article headline in the comic looks: the same block letters as their other headlines */
body.tpl.tpl-ultimate .art-title{color:#fff;-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:.06em .07em 0 var(--ink);text-transform:uppercase;transform:skewX(-6deg)}
body.tpl.tpl-cartoon .art-title{font-family:"Bangers",var(--display);color:#E8212B;-webkit-text-stroke:.035em #111;paint-order:stroke fill;text-shadow:.025em .025em 0 #1D5FD1,.05em .05em 0 #1D5FD1,.08em .08em 0 #111;letter-spacing:.03em}
body.tpl.tpl-ultimate .art-quote p,body.tpl.tpl-cartoon .art-quote p{text-transform:uppercase}

/* ---------- Product magazine (owner, 1 Nov 2026): headlines on pictures, catalogue pages, buy band ---------- */
/* Hero: kicker, a big marketing headline, the product name under it */
.hero-k{margin:0 0 18px;font:600 12px/1.2 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold,currentColor)}
.hero-image .pname.hero-hl b{display:block;font-family:inherit;font-size:clamp(52px,8.6vw,136px);line-height:.92;letter-spacing:-.045em;text-wrap:balance}
.hero-name{margin:18px 0 0;font:600 14px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase}
/* cover: the picture fills the hero, the text lies on it (white on a soft shade); the four photo templates already do this */
body.tpl:not(.tpl-premium,.tpl-series,.tpl-amber,.tpl-noir) .hero.hero-image.hero-cover{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;min-height:clamp(560px,86vh,880px);
 margin-top:8px;padding:clamp(28px,5vw,72px);border-radius:var(--radius,16px);overflow:hidden;isolation:isolate;background:#111;color:#fff}
body.tpl:not(.tpl-premium,.tpl-series,.tpl-amber,.tpl-noir) .hero.hero-image.hero-cover::before{display:none}
body.tpl:not(.tpl-premium,.tpl-series,.tpl-amber,.tpl-noir) .hero.hero-image.hero-cover::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 32%,rgba(0,0,0,.66) 100%),linear-gradient(90deg,rgba(0,0,0,.28),transparent 60%)}
body.tpl:not(.tpl-premium,.tpl-series,.tpl-amber,.tpl-noir) .hero-cover .hero-img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0;z-index:-2;box-shadow:none;transform:none}
body.tpl:not(.tpl-premium,.tpl-series,.tpl-amber,.tpl-noir) .hero-cover .hero-txt{position:relative;max-width:min(980px,100%);margin:0;padding:0;background:none;border:0;box-shadow:none;text-align:left;color:#fff}
body.tpl:not(.tpl-premium,.tpl-series,.tpl-amber,.tpl-noir,.tpl-cartoon) .hero-cover :is(.pname,.pname b,.tag,.hero-name){color:#fff;-webkit-text-stroke:0;text-shadow:0 2px 30px rgba(0,0,0,.25)}
body.tpl:not(.tpl-premium,.tpl-series,.tpl-amber,.tpl-noir) .hero-cover .hero-k{color:#fff;opacity:.92}
body.tpl:not(.tpl-premium,.tpl-series,.tpl-amber,.tpl-noir) .hero-cover .tag{max-width:560px;opacity:.92}
/* Cartoon keeps its red comic headline on the picture; the BAM burst moves above it */
body.tpl-cartoon .hero-cover :is(.tag,.hero-name){color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.4)}
body.tpl-cartoon .hero-cover .pname.hero-hl{font-size:clamp(64px,10vw,150px)}
body.tpl-cartoon .hero-cover .pname::before,body.tpl-cartoon .hero-cover .pname::after{top:-3.6em;right:2%}
@media (max-width:640px){body.tpl:not(.tpl-premium,.tpl-series,.tpl-amber,.tpl-noir) .hero.hero-image.hero-cover{min-height:78vh;padding:24px 20px}}

/* Article as a magazine cover: the headline on the lead picture */
.art-cover{position:relative;display:grid;align-items:end;min-height:clamp(480px,78vh,820px);margin:0;border-radius:var(--radius,16px);overflow:hidden;isolation:isolate;background:#111;color:#fff}
.art-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.art-cover::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.08) 25%,rgba(0,0,0,.7))}
.art-cover-txt{padding:clamp(28px,5vw,72px);max-width:1040px}
.art-cover .art-kicker{color:#fff;opacity:.9}
.art-cover .art-title{color:#fff;font-size:clamp(48px,8vw,120px);text-align:left}
.art-cover .art-dek{margin:22px 0 0;max-width:720px;color:rgba(255,255,255,.88);text-align:left}
.art-cover .art-by{color:rgba(255,255,255,.75)}
.art-cover-cap{margin:12px 0 clamp(32px,5vw,64px);font-size:13px;color:var(--dim)}

/* Catalogue page: like a spread of a high-end print catalogue */
.ctlg{margin-top:clamp(72px,10vw,140px);color:var(--text)}
.ctlg-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px clamp(28px,5vw,80px);align-items:end;padding-bottom:clamp(24px,3vw,40px);border-bottom:1.5px solid var(--text)}
.ctlg-k{grid-column:1/-1;display:flex;gap:16px;align-items:baseline;margin:0;font:600 11.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.ctlg-no{color:var(--gold,var(--text))}
.ctlg-t{margin:0;font-family:var(--display,var(--sans));font-weight:inherit;font-size:clamp(42px,6.4vw,96px);line-height:.94;letter-spacing:-.04em;text-wrap:balance}
.ctlg-i{margin:0;max-width:520px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:color-mix(in srgb,var(--text) 80%,var(--bg,#fff))}
.ctlg-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,104px);margin-top:clamp(36px,5vw,64px)}
.ctlg-notes{display:grid;gap:clamp(26px,3.4vw,40px);align-content:start}
.ctlg-n{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px}
.ctlg-nn{grid-row:span 2;margin:0;font:400 30px/1 var(--display,var(--sans));letter-spacing:-.02em;color:var(--gold,var(--text))}
.ctlg-n h3{margin:4px 0 10px;font:600 12.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.ctlg-n p:not(.ctlg-nn){margin:0;font-size:15.5px;line-height:1.7;color:color-mix(in srgb,var(--text) 80%,var(--bg,#fff))}
.ctlg-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius,16px);margin-bottom:clamp(22px,3vw,36px)}
.ctlg-tb{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ctlg-tb+.ctlg-tb{margin-top:clamp(26px,3vw,40px)}
.ctlg-tb caption{padding:0 0 12px;border-bottom:1.5px solid var(--text);text-align:left;font:600 11.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--text)}
.ctlg-tb th,.ctlg-tb td{padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 16%,transparent);vertical-align:top;text-align:left;font-size:15px;line-height:1.45}
.ctlg-tb th{width:44%;padding-right:18px;font-weight:400;color:var(--dim)}
.ctlg-tb td{font-weight:500;color:var(--text)}
.ctlg-f{margin:18px 0 0;font-size:12.5px;line-height:1.55;color:var(--dim)}
@media (max-width:860px){.ctlg-top,.ctlg-grid{grid-template-columns:minmax(0,1fr)}}

/* Buy band: the call to action under a story */
.bband{margin-top:clamp(56px,8vw,112px)}
.bband-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px clamp(24px,4vw,56px);align-items:center;padding:clamp(18px,2.4vw,28px);border:1px solid var(--line);border-radius:calc(var(--radius,16px) + 6px);background:var(--card,var(--bg))}
.bband-in.has-img{grid-template-columns:clamp(96px,14vw,168px) minmax(0,1fr) auto}
.bband-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius,16px)}
.bband-k{margin:0 0 8px;font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.bband-t{margin:0;font-family:var(--display,var(--sans));font-weight:inherit;font-size:clamp(26px,3vw,40px);line-height:1;letter-spacing:-.03em}
.bband-p{margin:10px 0 0;max-width:520px;font-size:15px;line-height:1.55;color:var(--dim)}
.bband-buy{display:grid;justify-items:end;gap:14px}
.bband-price{margin:0;font-family:var(--display,var(--sans));font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bband .ctas{margin:0;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:760px){.bband-in,.bband-in.has-img{grid-template-columns:88px minmax(0,1fr)}.bband-buy{grid-column:1/-1;justify-items:start}.bband .ctas{justify-content:flex-start}}

/* Sandbox shops (customer shops before going live): a bar that cannot be missed and a SANDBOX mark in the corner */
.sbx{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:12px max(16px,calc((100% - 1120px)/2));font:500 14px/1.35 "Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:#111;
 background:repeating-linear-gradient(-45deg,#FF4F00 0 18px,#FF6A26 18px 36px);box-shadow:0 2px 0 #111}
.sbx-k{padding:5px 12px;border-radius:999px;background:#111;color:#fff;font-weight:800;letter-spacing:-.02em;font-size:15px;white-space:nowrap}
.sbx-t{flex:1 1 280px;font-weight:600;color:#111}
.sbx-go{color:#111;font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sbx-mark{position:fixed;right:-58px;bottom:34px;z-index:61;margin:0;width:240px;padding:9px 0;transform:rotate(-45deg);background:#111;color:#FF4F00;text-align:center;font:800 15px/1 "Geist",-apple-system,sans-serif;letter-spacing:.32em;text-transform:uppercase;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}
@media print{.sbx-mark{position:absolute}}

/* Spec card as a sales card: brand, name, price, a short pitch, punch lines, specs, button, delivery line */
.spec-k{margin:0 0 10px;font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.spec-card .spec-name{font-family:var(--display,var(--sans));font-weight:inherit;font-size:clamp(28px,3vw,42px);line-height:1;letter-spacing:-.035em}
.spec-text{margin:0;font-size:16px;line-height:1.6;color:color-mix(in srgb,var(--text) 82%,var(--bg,#fff))}
.spec-pts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.spec-pts li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.5;color:color-mix(in srgb,var(--text) 78%,var(--bg,#fff))}
.spec-pts li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--gold,var(--text))}
.spec-pts b{font-weight:800;color:var(--text)}
.spec-note{margin:-4px 0 0;font-size:13px;text-align:center;color:var(--dim)}

/* Detail views as a catalogue spread: a headline and a line on each picture (they change with it), a price sticker */
.dv-box.has-caps .dv-stage{position:relative}
.dv-box.has-caps .dv-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.12) 38%,transparent 60%);pointer-events:none}
.dv-caps{position:absolute;left:clamp(30px,5vw,72px);right:clamp(150px,22vw,300px);top:clamp(30px,5vw,64px);pointer-events:none}
.dv-cap{display:none;animation:dvIn .6s cubic-bezier(.2,.7,.2,1)}
.dv-r:nth-of-type(1):checked~.dv-caps .dv-cap:nth-child(1){display:block}
.dv-r:nth-of-type(2):checked~.dv-caps .dv-cap:nth-child(2){display:block}
.dv-r:nth-of-type(3):checked~.dv-caps .dv-cap:nth-child(3){display:block}
.dv-r:nth-of-type(4):checked~.dv-caps .dv-cap:nth-child(4){display:block}
.dv-r:nth-of-type(5):checked~.dv-caps .dv-cap:nth-child(5){display:block}
.dv-r:nth-of-type(6):checked~.dv-caps .dv-cap:nth-child(6){display:block}
.dv-hl{margin:0;font-family:var(--display,var(--sans));font-weight:700;font-size:clamp(30px,4.6vw,68px);line-height:.98;letter-spacing:-.04em;color:#fff;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.dv-tx{margin:14px 0 0;max-width:520px;font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:rgba(255,255,255,.92);text-shadow:0 1px 16px rgba(0,0,0,.35)}
@keyframes dvIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dv-cap{animation:none}}
.dv-price{position:absolute;right:clamp(26px,3.4vw,44px);bottom:clamp(26px,3.4vw,44px);z-index:2;margin:0;color:var(--text);text-decoration:none;font-variant-numeric:tabular-nums;transition:transform .2s,box-shadow .2s}
.dv-price b{font-family:var(--display,var(--sans));font-weight:inherit;letter-spacing:-.03em;line-height:1}
.dv-price s{font-size:13px;color:var(--dim)}
.dv-badge{font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold,var(--text))}
/* tag (default): a quiet card in the shop's own card colour, frosted */
.dv-p-tag{display:grid;gap:6px;min-width:150px;padding:16px 20px 15px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--radius,16px);background:color-mix(in srgb,var(--card,#fff) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 40px -24px rgba(0,0,0,.45)}
.dv-p-tag b{font-size:clamp(30px,3vw,42px)}
a.dv-p-tag:hover{transform:translateY(-2px)}
/* seal: a fine round seal, double rule */
.dv-p-seal{display:grid;place-items:center;align-content:center;gap:5px;width:clamp(124px,12vw,150px);aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--bg,#fff) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 box-shadow:inset 0 0 0 1px var(--text),inset 0 0 0 5px color-mix(in srgb,var(--bg,#fff) 88%,transparent),inset 0 0 0 6px var(--text);text-align:center}
.dv-p-seal b{font-size:clamp(26px,2.6vw,34px)}.dv-p-seal .dv-badge{font-size:9.5px;letter-spacing:.2em;max-width:80%}
/* band: a slim bar with the way to the cart */
.dv-p-band{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 22px;border-radius:999px;background:var(--text);color:var(--bg,#fff);box-shadow:0 16px 36px -20px rgba(0,0,0,.6)}
.dv-p-band b{font-size:24px}.dv-p-band s{color:color-mix(in srgb,var(--bg,#fff) 60%,transparent)}.dv-p-band .dv-badge{color:var(--gold-hi,var(--gold,currentColor))}
.dv-go{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bg,#fff);color:var(--text);font-weight:700}
a.dv-p-band:hover{transform:translateX(3px)}
/* burst: the comic sticker (Cartoon looks only) */
.dv-p-burst{top:clamp(26px,3.4vw,44px);bottom:auto;display:grid;place-items:center;align-content:center;gap:2px;width:clamp(112px,13vw,168px);aspect-ratio:1;border-radius:50%;background:#FFD400;color:#111;text-align:center;transform:rotate(-8deg);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.dv-p-burst b{font:800 clamp(28px,3.4vw,44px)/1 var(--sans);letter-spacing:-.05em}.dv-p-burst s{color:#111;opacity:.7}
.dv-p-burst .dv-badge{padding:4px 8px;border-radius:999px;background:#E8212B;color:#fff;font-weight:800;letter-spacing:.06em}
a.dv-p-burst:hover{transform:rotate(-4deg) scale(1.04)}
/* jump targets clear the sticky bars (demo bar, sandbox bar) */
body.tpl [id]{scroll-margin-top:clamp(84px,9vw,112px)}
@media (max-width:700px){.dv-caps{right:clamp(20px,5vw,40px);top:auto;bottom:clamp(96px,22vw,130px)}.dv-box.has-caps .dv-stage::after{background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 70%)}.dv-hl{font-size:26px}.dv-tx{display:none}
 .dv-price{right:18px;bottom:auto;top:18px}.dv-p-tag{min-width:0;padding:10px 14px}.dv-p-tag b,.dv-p-band b{font-size:22px}.dv-p-seal{width:96px}.dv-p-seal b{font-size:20px}.dv-p-burst{width:96px}.dv-p-burst b{font-size:24px}}
@media (max-width:700px){body.tpl .dv-box.has-caps .dv-stage,.dv-box.has-caps .dv-stage{aspect-ratio:4/5;height:auto;max-height:none}.dv-caps{left:28px;right:28px;bottom:118px}.dv-badge{font-size:9px}}
/* Price labels as glass (owner, 1 Nov 2026): more see-through, blurred and saturated behind, a fine light edge and a soft
   sheen on top; the text stays readable on light and dark photos */
.dv-p-tag,.dv-p-seal,.dv-p-band{-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.dv-p-tag{background:linear-gradient(160deg,color-mix(in srgb,var(--card,#fff) 62%,transparent),color-mix(in srgb,var(--card,#fff) 40%,transparent));
 border:1px solid rgba(255,255,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 18px 40px -22px rgba(0,0,0,.5)}
.dv-p-seal{background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.5),transparent 55%),color-mix(in srgb,var(--bg,#fff) 52%,transparent);
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 70%,transparent),inset 0 0 0 5px transparent,inset 0 0 0 6px color-mix(in srgb,var(--text) 45%,transparent),inset 0 1px 0 7px rgba(255,255,255,.18),0 18px 40px -22px rgba(0,0,0,.45)}
.dv-p-band{background:linear-gradient(160deg,color-mix(in srgb,var(--text) 62%,transparent),color-mix(in srgb,var(--text) 48%,transparent));
 border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 16px 36px -20px rgba(0,0,0,.6)}
.dv-p-band .dv-go{background:rgba(255,255,255,.9)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.dv-p-tag{background:var(--card,#fff)}.dv-p-seal{background:var(--bg,#fff)}.dv-p-band{background:var(--text)}}
/* print: the price printed on the photo like a furniture catalogue (owner, 1 Nov 2026): a flag with a point, the name
   and the former price in bold, then the price, huge; dark ink (print) or white ink (print-white) */
.dv-p-print,.dv-p-print-white{display:grid;justify-items:start;gap:10px;max-width:min(320px,46%);color:#111;font-family:var(--sans)}
.dv-p-print-white{color:#fff}
.dv-flag{display:block;padding:12px 18px 22px;background:#E5532D;color:#fff;font:800 clamp(17px,1.7vw,24px)/1.02 var(--sans);letter-spacing:-.01em;text-transform:uppercase;max-width:13ch;
 clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%)}
.dv-name{font:800 clamp(16px,1.5vw,21px)/1.15 var(--sans);letter-spacing:-.015em}
.dv-name s{font-weight:800;color:inherit;opacity:1;text-decoration-thickness:2px}
.dv-p-print b,.dv-p-print-white b{font:800 clamp(64px,8vw,124px)/.84 var(--sans);letter-spacing:-.06em}
.dv-p-print{text-shadow:none}.dv-p-print-white{text-shadow:0 2px 24px rgba(0,0,0,.35)}
a.dv-p-print:hover,a.dv-p-print-white:hover{transform:translateY(-2px)}
@media (max-width:700px){.dv-p-print,.dv-p-print-white{gap:6px;max-width:58%}.dv-flag{font-size:13px;padding:8px 12px 16px}.dv-name{font-size:13px}.dv-p-print b,.dv-p-print-white b{font-size:46px}}
/* stack: one ink box with the flag across its corner, hanging over the picture's bottom edge (owner, 1 Nov 2026: no
   second block behind it) */
.dv-p-stack{bottom:calc(clamp(14px,2vw,22px) * -1);right:clamp(34px,5vw,64px);display:grid;justify-items:start;gap:6px;padding:44px 26px 18px 24px;min-width:200px;
 background:var(--text);color:var(--bg,#fff);isolation:isolate;box-shadow:0 26px 50px -26px rgba(0,0,0,.6)}
.dv-p-stack .dv-flag{position:absolute;left:-18px;top:-30px;transform:rotate(-5deg);font-size:clamp(14px,1.3vw,18px);padding:10px 14px 18px;box-shadow:0 10px 20px -12px rgba(0,0,0,.5)}
.dv-p-stack .dv-name{font-size:clamp(14px,1.2vw,17px);opacity:.92}
.dv-p-stack .dv-name s{color:inherit}
.dv-p-stack b{font:800 clamp(56px,6.4vw,96px)/.86 var(--sans);letter-spacing:-.06em}
a.dv-p-stack:hover{transform:translate(-2px,-2px)}
@media (max-width:700px){.dv-p-stack{bottom:auto;top:30px;right:24px;min-width:0;padding:30px 16px 12px}.dv-p-stack .dv-flag{left:-10px;top:-18px;font-size:11px}.dv-p-stack b{font-size:40px}}

/* The label kit (owner, 1 Nov 2026): size, place and ink for every label style */
.dv-price.dv-s-small{zoom:.72}.dv-price.dv-s-monster{zoom:1.38}
@media (max-width:700px){.dv-price.dv-s-monster{zoom:1.08}.dv-price.dv-s-small{zoom:.85}}
/* places on the picture; thumbnails and headlines move out of the way */
.dv-price.dv-at-bottom-left{left:clamp(26px,3.4vw,44px);right:auto}
.lbl-bottom-left .dv-thumbs{left:auto;right:clamp(26px,3.4vw,40px)}
.dv-price.dv-at-top-right{top:clamp(26px,3.4vw,44px);bottom:auto}
.dv-price.dv-at-top-left{top:clamp(26px,3.4vw,44px);bottom:auto;left:clamp(26px,3.4vw,44px);right:auto}
.lbl-top-left .dv-caps{top:auto;bottom:clamp(110px,12vw,150px)}
.lbl-top-right .dv-caps,.lbl-center .dv-caps{right:clamp(30px,5vw,72px)}
.dv-price.dv-at-center{inset:0;margin:auto;width:fit-content;height:fit-content}
.dv-p-stack.dv-at-top-right,.dv-p-stack.dv-at-top-left{top:clamp(40px,4.6vw,60px)}
/* under the picture: in the page's own colours */
.dv-price.dv-at-below{position:static;justify-self:end;margin:clamp(10px,1.4vw,18px) 0 4px}
.dv-at-below.dv-p-print,.dv-at-below.dv-p-print-white{color:var(--text);text-shadow:none;max-width:none}
.dv-at-below.dv-p-tag{background:var(--card,#fff);border-color:var(--line)}
.dv-at-below.dv-p-seal{background:var(--bg,#fff)}
.dv-at-below.dv-p-stack{margin-top:34px;margin-right:6px}
/* ink: light (white, for dark photos) or dark (for light photos); auto is set by shop.js from the photo itself */
.dv-p-tag[data-ink=light]{background:linear-gradient(160deg,rgba(18,18,18,.42),rgba(18,18,18,.28));color:#fff;border-color:rgba(255,255,255,.22)}
.dv-p-tag[data-ink=light] s,.dv-p-seal[data-ink=light] s{color:rgba(255,255,255,.72)}
.dv-p-tag[data-ink=dark]{background:linear-gradient(160deg,rgba(255,255,255,.66),rgba(255,255,255,.44));color:#111;border-color:rgba(255,255,255,.6)}
.dv-p-tag[data-ink=dark] s,.dv-p-seal[data-ink=dark] s{color:#555}
.dv-p-seal[data-ink=light]{background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.18),transparent 55%),rgba(18,18,18,.36);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 0 0 6px rgba(255,255,255,.4),0 18px 40px -22px rgba(0,0,0,.5)}
.dv-p-seal[data-ink=dark]{background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.6),transparent 55%),rgba(255,255,255,.5);color:#111;box-shadow:inset 0 0 0 1px rgba(17,17,17,.8),inset 0 0 0 6px rgba(17,17,17,.4),0 18px 40px -22px rgba(0,0,0,.4)}
.dv-p-band[data-ink=dark]{background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.5));color:#111;border-color:rgba(255,255,255,.6)}
.dv-p-band[data-ink=dark] s{color:#555}.dv-p-band[data-ink=dark] .dv-go{background:#111;color:#fff}
.dv-p-band[data-ink=light]{background:linear-gradient(160deg,rgba(18,18,18,.6),rgba(18,18,18,.45));color:#fff}
.dv-p-print[data-ink=light],.dv-p-print-white[data-ink=light]{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.dv-p-print[data-ink=dark],.dv-p-print-white[data-ink=dark]{color:#111;text-shadow:none}
.dv-p-stack[data-ink=dark]{background:#111;color:#fff}
.dv-p-stack[data-ink=light]{background:#fff;color:#111}
/* under the picture there is nothing to see through: the band and the tag become solid */
.dv-at-below.dv-p-band{background:var(--text);color:var(--bg,#fff);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.dv-at-below.dv-p-band s{color:color-mix(in srgb,var(--bg,#fff) 60%,transparent)}.dv-at-below.dv-p-band .dv-go{background:var(--bg,#fff);color:var(--text)}
.dv-at-below.dv-p-tag{-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--text)}
/* the cart button right under a printed price */
.dv-price .dv-buy{margin-top:8px;gap:9px;text-shadow:none;font-size:15px;padding:13px 22px}
.dv-price .dv-buy svg{width:18px;height:18px}
@media (max-width:700px){.dv-price .dv-buy{font-size:13px;padding:10px 16px}}

/* Product intro: the opener of a product page like a magazine spread (owner, 1 Nov 2026) */
.pin{margin-top:clamp(28px,5vw,64px);color:var(--text)}
.pin-k{margin:0 0 clamp(16px,2vw,24px);font:600 12px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold,var(--dim))}
.pin-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;padding-bottom:clamp(26px,3.4vw,44px);border-bottom:1.5px solid var(--text)}
.pin-t{margin:0;font-family:var(--display,var(--sans));font-weight:inherit;font-size:clamp(46px,7.4vw,118px);line-height:.92;letter-spacing:-.045em;text-wrap:balance}
body.tpl:not(.tpl-magazine,.tpl-atelier,.tpl-ivory,.tpl-terracotta,.tpl-walnut,.tpl-series,.tpl-noir,.tpl-handmade) .pin-t{font-weight:800;letter-spacing:-.055em}
.pin-side{display:grid;gap:18px;align-content:end}
.pin-name{margin:0;font:800 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.pin-sf{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:color-mix(in srgb,var(--text) 82%,var(--bg,#fff))}
.pin-facts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;border-top:1px solid color-mix(in srgb,var(--text) 18%,transparent)}
.pin-facts div{padding:11px 12px 11px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 18%,transparent)}
.pin-facts dt{font:600 10.5px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.pin-facts dd{margin:4px 0 0;font-size:15px;font-weight:600}
.pin-buy{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 16px;margin:4px 0 0}
.pin-buy .dv-flag{flex-basis:100%;width:fit-content;max-width:none;font-size:15px;padding:9px 14px 16px}
.pin-price{font:800 clamp(52px,6vw,88px)/.86 var(--sans);letter-spacing:-.06em}
.pin-buy s{font-weight:700;font-size:18px;color:var(--dim);text-decoration-thickness:2px}
.pin-ctas{display:flex;flex-wrap:wrap;gap:10px;margin:0}
@media (max-width:860px){.pin-grid{grid-template-columns:minmax(0,1fr);align-items:start}}
/* Demo bar, calmer (owner, 1 Nov 2026: a little smaller, all buttons the same height, the orange one softer) */
@media (min-width:641px){
 .demobar{min-height:52px;padding:8px var(--gut);font-size:14px;gap:12px 16px}
 .demobar-back,.demobar-go,.demobar-w{height:36px;box-sizing:border-box}
 .demobar-back{padding:0 14px;font-size:13.5px}
 .demobar-mk{font-size:19px}
 .demobar-w{padding:3px;align-items:stretch}.demobar-w a{display:inline-flex;align-items:center;padding:0 12px;font-size:13px}
 .demobar-go{display:inline-flex;align-items:center;padding:0 16px;font-size:13.5px;font-weight:650;background:rgba(255,79,0,.9);box-shadow:none}
 .demobar-go:hover{background:#FF4F00}
}
/* product intro: the headline starts at the top beside the text; the flag only as wide as its words */
.pin-grid{align-items:start}
.pin-buy{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:end;gap:8px 16px}
.pin-buy .dv-flag{grid-column:1/-1;justify-self:start;flex:none;width:auto}
/* the intro with its product picture under the headline, so the first screen shows what it is about */
.pin-grid.has-img{align-items:end}
.pin-main{display:grid;gap:clamp(18px,2.4vw,30px);align-content:start}
.pin-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius,16px);background:var(--card,#eee)}
@media (min-width:861px){.pin-grid.has-img{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}

/* Font pairs (owner, 1 Nov 2026): a main font for headlines and a second one for text that belong together; swap turns
   them round; the headline weight from light to black. Self-hosted, OFL; a face loads only when a page uses it. */
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-var.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader-var.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/assets/fonts/playfair-display-var.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4-var.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Literata";src:url("/assets/fonts/literata-var.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("/assets/fonts/bodoni-moda-var.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("/assets/fonts/eb-garamond-var.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope-var.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/assets/fonts/dm-sans-var.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/space-grotesk-var.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-var.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk-var.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("/assets/fonts/schibsted-grotesk-var.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/bricolage-grotesque-var.woff2") format("woff2");font-weight:300 800;font-display:swap}
body.tpl.fp-geist-instrument{--display:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--sans:"Instrument Serif",Georgia,"Times New Roman",serif}body.tpl.fp-geist-instrument.fp-swap{--display:"Instrument Serif",Georgia,"Times New Roman",serif;--sans:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-fraunces-intertight{--display:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Inter Tight",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fp-fraunces-intertight.fp-swap{--display:"Inter Tight",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--sans:"Fraunces",Georgia,"Times New Roman",serif}
body.tpl.fp-playfair-dmsans{--display:"Playfair Display",Georgia,"Times New Roman",serif;--sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fp-playfair-dmsans.fp-swap{--display:"DM Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--sans:"Playfair Display",Georgia,"Times New Roman",serif}
body.tpl.fp-bodoni-manrope{--display:"Bodoni Moda",Georgia,"Times New Roman",serif;--sans:"Manrope",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fp-bodoni-manrope.fp-swap{--display:"Manrope",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--sans:"Bodoni Moda",Georgia,"Times New Roman",serif}
body.tpl.fp-newsreader-space{--display:"Newsreader",Georgia,"Times New Roman",serif;--sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fp-newsreader-space.fp-swap{--display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--sans:"Newsreader",Georgia,"Times New Roman",serif}
body.tpl.fp-archivo-sourceserif{--display:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--sans:"Source Serif 4",Georgia,"Times New Roman",serif}body.tpl.fp-archivo-sourceserif.fp-swap{--display:"Source Serif 4",Georgia,"Times New Roman",serif;--sans:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-bricolage-literata{--display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--sans:"Literata",Georgia,"Times New Roman",serif}body.tpl.fp-bricolage-literata.fp-swap{--display:"Literata",Georgia,"Times New Roman",serif;--sans:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-garamond-hanken{--display:"EB Garamond",Georgia,"Times New Roman",serif;--sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fp-garamond-hanken.fp-swap{--display:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--sans:"EB Garamond",Georgia,"Times New Roman",serif}
body.tpl.fp-schibsted-playfair{--display:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--sans:"Playfair Display",Georgia,"Times New Roman",serif}body.tpl.fp-schibsted-playfair.fp-swap{--display:"Playfair Display",Georgia,"Times New Roman",serif;--sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-space-fraunces{--display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--sans:"Fraunces",Georgia,"Times New Roman",serif}body.tpl.fp-space-fraunces.fp-swap{--display:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-manrope-newsreader{--display:"Manrope",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--sans:"Newsreader",Georgia,"Times New Roman",serif}body.tpl.fp-manrope-newsreader.fp-swap{--display:"Newsreader",Georgia,"Times New Roman",serif;--sans:"Manrope",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-dmsans-bodoni{--display:"DM Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--sans:"Bodoni Moda",Georgia,"Times New Roman",serif}body.tpl.fp-dmsans-bodoni.fp-swap{--display:"Bodoni Moda",Georgia,"Times New Roman",serif;--sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl[class*=" fp-"]{font-family:var(--sans)}
body.tpl[class*=" fp-"] :is(.pname,.pname b,.h,.art-title,.pin-t,.ctlg-t,.dv-hl,.spec-name,.bband-t,.coll-txt b,.coll-h,.vid-h,.cat-t,h1,h2,h3){font-family:var(--display)}
body.tpl.hw-300 :is(.pname,.pname b,.h,.art-title,.pin-t,.ctlg-t,.dv-hl,.spec-name,.bband-t,.coll-txt b,.coll-h,.vid-h,h1,h2){font-weight:300}
body.tpl.hw-400 :is(.pname,.pname b,.h,.art-title,.pin-t,.ctlg-t,.dv-hl,.spec-name,.bband-t,.coll-txt b,.coll-h,.vid-h,h1,h2){font-weight:400}
body.tpl.hw-700 :is(.pname,.pname b,.h,.art-title,.pin-t,.ctlg-t,.dv-hl,.spec-name,.bband-t,.coll-txt b,.coll-h,.vid-h,h1,h2){font-weight:700}
body.tpl.hw-900 :is(.pname,.pname b,.h,.art-title,.pin-t,.ctlg-t,.dv-hl,.spec-name,.bband-t,.coll-txt b,.coll-h,.vid-h,h1,h2){font-weight:900}
/* the fonts menu in the demo bar */
.demobar-f{position:relative}
.demobar-f summary{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.1);cursor:pointer;list-style:none;font-size:13px;white-space:nowrap}
.demobar-f summary::-webkit-details-marker{display:none}.demobar-f summary::after{content:"▾";margin-left:7px;opacity:.7}
.demobar-fm{position:absolute;top:44px;left:0;z-index:70;display:grid;min-width:250px;max-height:70vh;overflow:auto;padding:6px;border-radius:14px;background:#161616;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.demobar-fm a{padding:9px 12px;border-radius:9px;font-size:13.5px;opacity:.85}.demobar-fm a:hover{background:rgba(255,255,255,.08);opacity:1}
.demobar-fm a[aria-current]{background:#fff;color:#111;opacity:1}
.demobar-fm .demobar-swap{margin-top:4px;border-top:1px solid rgba(255,255,255,.12);border-radius:0 0 9px 9px;color:#FF8A4C}
@media (max-width:640px){.demobar-f{order:8}.demobar-fm{left:auto;right:0}}
/* product intro: less room above; only the cart button is black, the others a quiet grey */
.pin{margin-top:clamp(16px,2.6vw,36px)}
.pin-ctas .btn.light{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text);border-color:transparent;box-shadow:none}
.pin-ctas .btn.light:hover{background:color-mix(in srgb,var(--text) 14%,transparent)}
/* a big price and its flag take you to the cart too */
a.pin-buy,a.pin-buy:hover{color:inherit;text-decoration:none}
a.pin-buy:hover .pin-price{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.dv-price a.dv-hit{color:inherit;text-decoration:none}
.dv-price a.dv-hit{display:contents}

/* Layout presets (owner, 1 Nov 2026: the layout follows the picture): the intro's picture left, right or stacked; the
   headline on the detail pictures in any corner; the hero text left, centre or right */
@media (min-width:861px){
 .pin-grid.pin-image-right{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
 .pin-grid.pin-image-right .pin-main{order:2}
 .pin-grid.pin-stacked{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .pin-grid.pin-stacked .pin-main{grid-column:1/-1;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end}
 .pin-grid.pin-stacked .pin-img{grid-column:1/-1;aspect-ratio:21/9}
 .pin-grid.pin-stacked .pin-side{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,5vw,80px);align-items:start}
}
.cap-top-right .dv-caps{left:auto;right:clamp(30px,5vw,72px);text-align:right}.cap-top-right .dv-tx{margin-left:auto}
.cap-bottom-left .dv-caps{top:auto;bottom:clamp(110px,12vw,150px)}
.cap-bottom-right .dv-caps{top:auto;bottom:clamp(110px,12vw,150px);left:auto;right:clamp(30px,5vw,72px);text-align:right}.cap-bottom-right .dv-tx{margin-left:auto}
.dv-box.has-caps:is(.cap-bottom-left,.cap-bottom-right) .dv-stage::after{background:linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.12) 42%,transparent 65%)}
/* the label goes where the headline is not */
.cap-top-right.lbl-top-right .dv-caps,.cap-bottom-right.lbl-bottom-right .dv-caps{right:clamp(240px,30vw,420px)}
body.tpl .hero.hero-cover.hero-at-center .hero-txt{margin-inline:auto;text-align:center}.hero-cover.hero-at-center .hero-txt .ctas{justify-content:center}
body.tpl .hero.hero-cover.hero-at-right .hero-txt{margin-left:auto;text-align:right}.hero-cover.hero-at-right .hero-txt .ctas{justify-content:flex-end}
.hero-cover:is(.hero-at-center,.hero-at-right) .tag{margin-inline:auto 0}.hero-cover.hero-at-center .tag{margin-inline:auto}

/* Style manager (owner, 1 Nov 2026): the price font of each pair (a trio), each role replaceable on its own, colour pairs */
body.tpl.fp-geist-instrument{--price:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-fraunces-intertight{--price:"Inter Tight",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-playfair-dmsans{--price:"DM Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-bodoni-manrope{--price:"Bodoni Moda",Georgia,"Times New Roman",serif}
body.tpl.fp-newsreader-space{--price:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-archivo-sourceserif{--price:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-bricolage-literata{--price:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-garamond-hanken{--price:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-schibsted-playfair{--price:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-space-fraunces{--price:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-manrope-newsreader{--price:"Manrope",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fp-dmsans-bodoni{--price:"DM Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fh-geist{--display:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.ft-geist{--sans:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fpr-geist{--price:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fh-inter-tight{--display:"Inter Tight",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.ft-inter-tight{--sans:"Inter Tight",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fpr-inter-tight{--price:"Inter Tight",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fh-manrope{--display:"Manrope",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.ft-manrope{--sans:"Manrope",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fpr-manrope{--price:"Manrope",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fh-dm-sans{--display:"DM Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.ft-dm-sans{--sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fpr-dm-sans{--price:"DM Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fh-space-grotesk{--display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.ft-space-grotesk{--sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fpr-space-grotesk{--price:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fh-archivo{--display:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.ft-archivo{--sans:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fpr-archivo{--price:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fh-hanken-grotesk{--display:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.ft-hanken-grotesk{--sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fpr-hanken-grotesk{--price:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fh-schibsted-grotesk{--display:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.ft-schibsted-grotesk{--sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fpr-schibsted-grotesk{--price:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fh-bricolage-grotesque{--display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.ft-bricolage-grotesque{--sans:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fpr-bricolage-grotesque{--price:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fh-poppins{--display:"Poppins",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.ft-poppins{--sans:"Poppins",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}body.tpl.fpr-poppins{--price:"Poppins",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body.tpl.fh-instrument-serif{--display:"Instrument Serif",Georgia,"Times New Roman",serif}body.tpl.ft-instrument-serif{--sans:"Instrument Serif",Georgia,"Times New Roman",serif}body.tpl.fpr-instrument-serif{--price:"Instrument Serif",Georgia,"Times New Roman",serif}
body.tpl.fh-fraunces{--display:"Fraunces",Georgia,"Times New Roman",serif}body.tpl.ft-fraunces{--sans:"Fraunces",Georgia,"Times New Roman",serif}body.tpl.fpr-fraunces{--price:"Fraunces",Georgia,"Times New Roman",serif}
body.tpl.fh-newsreader{--display:"Newsreader",Georgia,"Times New Roman",serif}body.tpl.ft-newsreader{--sans:"Newsreader",Georgia,"Times New Roman",serif}body.tpl.fpr-newsreader{--price:"Newsreader",Georgia,"Times New Roman",serif}
body.tpl.fh-playfair-display{--display:"Playfair Display",Georgia,"Times New Roman",serif}body.tpl.ft-playfair-display{--sans:"Playfair Display",Georgia,"Times New Roman",serif}body.tpl.fpr-playfair-display{--price:"Playfair Display",Georgia,"Times New Roman",serif}
body.tpl.fh-source-serif-4{--display:"Source Serif 4",Georgia,"Times New Roman",serif}body.tpl.ft-source-serif-4{--sans:"Source Serif 4",Georgia,"Times New Roman",serif}body.tpl.fpr-source-serif-4{--price:"Source Serif 4",Georgia,"Times New Roman",serif}
body.tpl.fh-literata{--display:"Literata",Georgia,"Times New Roman",serif}body.tpl.ft-literata{--sans:"Literata",Georgia,"Times New Roman",serif}body.tpl.fpr-literata{--price:"Literata",Georgia,"Times New Roman",serif}
body.tpl.fh-bodoni-moda{--display:"Bodoni Moda",Georgia,"Times New Roman",serif}body.tpl.ft-bodoni-moda{--sans:"Bodoni Moda",Georgia,"Times New Roman",serif}body.tpl.fpr-bodoni-moda{--price:"Bodoni Moda",Georgia,"Times New Roman",serif}
body.tpl.fh-eb-garamond{--display:"EB Garamond",Georgia,"Times New Roman",serif}body.tpl.ft-eb-garamond{--sans:"EB Garamond",Georgia,"Times New Roman",serif}body.tpl.fpr-eb-garamond{--price:"EB Garamond",Georgia,"Times New Roman",serif}
body.tpl.fh-forum{--display:"Forum",Georgia,"Times New Roman",serif}body.tpl.ft-forum{--sans:"Forum",Georgia,"Times New Roman",serif}body.tpl.fpr-forum{--price:"Forum",Georgia,"Times New Roman",serif}
body.tpl:is([class*=" fp-"],[class*=" fpr-"]) :is(.dv-p-print b,.dv-p-print-white b,.dv-p-stack b,.pin-price,.bband-price,.spec-price,.dv-p-tag b,.dv-p-seal b,.dv-p-band b,.spec-card .spec-price){font-family:var(--price,var(--sans))}
body.tpl[class*=" ft-"]{font-family:var(--sans)}
body.tpl:is([class*=" fh-"]) :is(.pname,.pname b,.h,.art-title,.pin-t,.ctlg-t,.dv-hl,.spec-name,.bband-t,.coll-txt b,.coll-h,.vid-h,h1,h2,h3){font-family:var(--display)}
body.tpl.pal-signal{--gold:#FF4F00;--gold-hi:#111111;--flag:#E5532D;--accent:#FF4F00}
body.tpl.pal-terracotta{--gold:#C0623B;--gold-hi:#D9C3A0;--flag:#B4472A;--accent:#C0623B}
body.tpl.pal-forest{--gold:#2F5D46;--gold-hi:#B8934A;--flag:#B8934A;--accent:#2F5D46}
body.tpl.pal-navy{--gold:#1F3A5F;--gold-hi:#F26B5B;--flag:#F26B5B;--accent:#1F3A5F}
body.tpl.pal-plum{--gold:#5B2A4B;--gold-hi:#E7A3B5;--flag:#C2416B;--accent:#5B2A4B}
body.tpl.pal-ocean{--gold:#0F6E7A;--gold-hi:#C6E36B;--flag:#0F6E7A;--accent:#0F6E7A}
body.tpl.pal-ink{--gold:#111111;--gold-hi:#C8A257;--flag:#C8A257;--accent:#111111}
body.tpl.pal-clay{--gold:#A65A3A;--gold-hi:#6B7A3E;--flag:#A65A3A;--accent:#A65A3A}
body.tpl.pal-sky{--gold:#2F7DE1;--gold-hi:#FFC83D;--flag:#2F7DE1;--accent:#2F7DE1}
body.tpl.pal-mono{--gold:#111111;--gold-hi:#8A8A8A;--flag:#111111;--accent:#111111}
.dv-flag{background:var(--flag,#E5532D)}
body.tpl[class*=" pal-"] :is(.pin-k,.hero-k,.art-kicker,.ctlg-no,.ctlg-nn,.cat-no){color:var(--gold)}
.sw-dot{display:inline-block;width:12px;height:12px;margin-right:4px;border-radius:50%;vertical-align:-1px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}.sw-dot+.sw-dot{margin-left:-8px;margin-right:9px}
.sw-signal-a{background:#FF4F00}.sw-signal-b{background:#111111}
.sw-terracotta-a{background:#C0623B}.sw-terracotta-b{background:#D9C3A0}
.sw-forest-a{background:#2F5D46}.sw-forest-b{background:#B8934A}
.sw-navy-a{background:#1F3A5F}.sw-navy-b{background:#F26B5B}
.sw-plum-a{background:#5B2A4B}.sw-plum-b{background:#E7A3B5}
.sw-ocean-a{background:#0F6E7A}.sw-ocean-b{background:#C6E36B}
.sw-ink-a{background:#111111}.sw-ink-b{background:#C8A257}
.sw-clay-a{background:#A65A3A}.sw-clay-b{background:#6B7A3E}
.sw-sky-a{background:#2F7DE1}.sw-sky-b{background:#FFC83D}
.sw-mono-a{background:#111111}.sw-mono-b{background:#8A8A8A}
/* The sales box: its own heading over the product name, pictures fading in turn (owner, 1 Nov 2026) */
.spec-for{margin:8px 0 0;font:700 12.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.spec-imgs{position:relative;min-height:320px;border-radius:var(--radius,22px);overflow:hidden}
.spec-imgs .spec-img{position:absolute;inset:0;min-height:0;border-radius:0}
.spec-imgs .spec-img+.spec-img{opacity:0}
@media (prefers-reduced-motion:no-preference){
 .spec-imgs.n2 .spec-img{animation:specFade2 10s infinite}.spec-imgs.n2 .spec-img:nth-child(2){animation-delay:-5s}
 .spec-imgs.n3 .spec-img{animation:specFade3 15s infinite}.spec-imgs.n3 .spec-img:nth-child(2){animation-delay:-10s}.spec-imgs.n3 .spec-img:nth-child(3){animation-delay:-5s}
 .spec-imgs.n4 .spec-img{animation:specFade4 20s infinite}.spec-imgs.n4 .spec-img:nth-child(2){animation-delay:-15s}.spec-imgs.n4 .spec-img:nth-child(3){animation-delay:-10s}.spec-imgs.n4 .spec-img:nth-child(4){animation-delay:-5s}
}
@keyframes specFade2{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes specFade3{0%,30%{opacity:1}33.3%,96.7%{opacity:0}100%{opacity:1}}
@keyframes specFade4{0%,22%{opacity:1}25%,97.5%{opacity:0}100%{opacity:1}}
@media (max-width:760px){.spec-imgs{min-height:0;aspect-ratio:4/3}}
/* The demo context box: what this page shows, and the way to all sales boxes */
.demo-ctx{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:clamp(14px,2vw,22px);padding:14px 18px;border:1px dashed color-mix(in srgb,var(--text) 30%,transparent);border-radius:14px;font:500 14px/1.45 "Geist",var(--sans);color:var(--text)}
.demo-ctx-k{display:flex;align-items:center;gap:8px;margin:0;font:600 11px/1 "Geist Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.demo-ctx-k i{width:8px;height:8px;border-radius:50%;background:#FF4F00}
.demo-ctx-t{flex:1 1 320px;margin:0;color:color-mix(in srgb,var(--text) 82%,var(--bg,#fff))}
.demo-ctx-go{font-weight:700;color:var(--text);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.art-cols > :last-child{margin-bottom:0}.art-cols h3:first-child{margin-top:0}
.art.cols-2 .art-cols:has(> :only-child){column-count:1;max-width:820px;margin-inline:auto;text-align:left}

/* Sales box layouts (owner, 1 Nov 2026): a picture with the information and the button, beside, stacked or on the picture */
.spec-pic{position:relative;min-height:320px;border-radius:var(--radius,22px);overflow:hidden;background:var(--card,#eee)}
.spec-pic > .spec-img,.spec-pic > .spec-imgs{position:absolute;inset:0;width:100%;height:100%;min-height:0;border-radius:0}
.spec-pic > .spec-imgs .spec-img{width:100%;height:100%;object-fit:cover}
.spec-on{position:absolute;left:clamp(20px,3vw,40px);right:clamp(20px,3vw,40px);top:clamp(20px,3vw,40px);z-index:1;margin:0;max-width:16ch;font-family:var(--display,var(--sans));font-size:clamp(30px,4vw,60px);line-height:.98;letter-spacing:-.04em;color:#fff;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.spec-pic:has(.spec-on)::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 50%);pointer-events:none}
/* beside, the picture on the right */
@media (min-width:761px){.spec-beside-right .spec-grid.has-img{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.spec-beside-right .spec-pic{order:2}}
/* stacked: the picture on top, the box under it in two columns (what it is | price and button) */
.spec-stacked .spec-grid.has-img{grid-template-columns:minmax(0,1fr)}
.spec-stacked .spec-pic{aspect-ratio:16/8;min-height:0}
@media (min-width:861px){
 .spec-stacked .spec-card{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-auto-flow:row dense;column-gap:clamp(28px,5vw,72px)}
 .spec-stacked .spec-card > :is(.spec-top,.spec-text,.spec-pts){grid-column:1}
 .spec-stacked .spec-card > :is(.spec-list,.spec-cta,form,.spec-note){grid-column:2}
}
/* on the picture: a see-through glass box (right, left) or a glass bar along the bottom */
@media (min-width:861px){
 :is(.spec-overlay-right,.spec-overlay-left,.spec-overlay-bottom) .spec-grid.has-img{display:block;position:relative}
 :is(.spec-overlay-right,.spec-overlay-left,.spec-overlay-bottom) .spec-pic{min-height:clamp(560px,74vh,780px)}
 :is(.spec-overlay-right,.spec-overlay-left) .spec-card{position:absolute;top:clamp(18px,2.4vw,32px);bottom:clamp(18px,2.4vw,32px);width:min(430px,42%);overflow:auto;align-content:center}
 .spec-overlay-right .spec-card{right:clamp(18px,2.4vw,32px)}.spec-overlay-left .spec-card{left:clamp(18px,2.4vw,32px)}
 .spec-overlay-left .spec-on{left:auto;text-align:right}
 .spec-overlay-bottom .spec-card{position:absolute;left:clamp(18px,2.4vw,32px);right:clamp(18px,2.4vw,32px);bottom:clamp(18px,2.4vw,32px);grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;grid-auto-flow:row dense;align-items:center;column-gap:clamp(20px,3vw,44px);row-gap:6px}
 .spec-overlay-bottom .spec-card > .spec-top,.spec-overlay-bottom .spec-card > .spec-text{grid-column:1}
 .spec-overlay-bottom .spec-card > .spec-list{grid-column:2;grid-row:1/span 2}
 .spec-overlay-bottom .spec-card > :is(.spec-cta,form){grid-column:3;grid-row:1}.spec-overlay-bottom .spec-card > .spec-note{grid-column:3;grid-row:2}
 .spec-overlay-bottom .spec-card > .spec-pts{display:none}
 .spec-overlay-bottom .spec-list li{padding:6px 0}
 :is(.spec-overlay-right,.spec-overlay-left,.spec-overlay-bottom) .spec-card{background:color-mix(in srgb,var(--card,#fff) 70%,transparent);border-color:rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 24px 60px -30px rgba(0,0,0,.6)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:is(.spec-overlay-right,.spec-overlay-left,.spec-overlay-bottom) .spec-card{background:var(--card,#fff)}}
/* the glass box on the picture keeps to the essentials and grows from the bottom (nothing cut at the top) */
@media (min-width:861px){
 :is(.spec-overlay-right,.spec-overlay-left) .spec-card{top:auto;max-height:calc(100% - 2 * clamp(18px,2.4vw,32px));align-content:start;gap:14px}
 :is(.spec-overlay-right,.spec-overlay-left) .spec-card > .spec-pts{display:none}
 :is(.spec-overlay-right,.spec-overlay-left) .spec-list li{padding:7px 0}
}