/* SyTec AI — component + effects stylesheet (from demo site.css + shop.css). Tokens (--blue, --space-m, --sans…) come from Bricks. */
/* LIVE SITE (first on purpose): Bricks blocks default to width:100%; inside row layouts size to content like the demo. Specificity (0,1,0) so any component class declared later still wins. */
.book .front .ft>:where(.brxe-block),.book .front .ft>:where(.brxe-div),
.brandmark>:where(.brxe-block),.brandmark>:where(.brxe-div),
.buybox .pricewrap>:where(.brxe-block),.buybox .pricewrap>:where(.brxe-div),
.buyrow>:where(.brxe-block),.buyrow>:where(.brxe-div),
.cardel .r1>:where(.brxe-block),.cardel .r1>:where(.brxe-div),
.check>:where(.brxe-block),.check>:where(.brxe-div),
.check .in>:where(.brxe-block),.check .in>:where(.brxe-div),
.chip>:where(.brxe-block),.chip>:where(.brxe-div),
.coblock h3>:where(.brxe-block),.coblock h3>:where(.brxe-div),
.crumbs>:where(.brxe-block),.crumbs>:where(.brxe-div),
.desk .st>:where(.brxe-block),.desk .st>:where(.brxe-div),
.deskmap .d b>:where(.brxe-block),.deskmap .d b>:where(.brxe-div),
.drawer .dhd>:where(.brxe-block),.drawer .dhd>:where(.brxe-div),
.eyebrow>:where(.brxe-block),.eyebrow>:where(.brxe-div),
.faq summary>:where(.brxe-block),.faq summary>:where(.brxe-div),
.foot-site .base>:where(.brxe-block),.foot-site .base>:where(.brxe-div),
.go>:where(.brxe-block),.go>:where(.brxe-div),
.line .mt>:where(.brxe-block),.line .mt>:where(.brxe-div),
.links>:where(.brxe-block),.links>:where(.brxe-div),
.logo>:where(.brxe-block),.logo>:where(.brxe-div),
.mnav.open>:where(.brxe-block),.mnav.open>:where(.brxe-div),
.nav-r>:where(.brxe-block),.nav-r>:where(.brxe-div),
.opt span>:where(.brxe-block),.opt span>:where(.brxe-div),
.optlabel>:where(.brxe-block),.optlabel>:where(.brxe-div),
.opts>:where(.brxe-block),.opts>:where(.brxe-div),
.orderno>:where(.brxe-block),.orderno>:where(.brxe-div),
.paytabs>:where(.brxe-block),.paytabs>:where(.brxe-div),
.pcard .art .ribbon>:where(.brxe-block),.pcard .art .ribbon>:where(.brxe-div),
.pcard .foot>:where(.brxe-block),.pcard .foot>:where(.brxe-div),
.pcard .row>:where(.brxe-block),.pcard .row>:where(.brxe-div),
.phero .ctas>:where(.brxe-block),.phero .ctas>:where(.brxe-div),
.price>:where(.brxe-block),.price>:where(.brxe-div),
.promo>:where(.brxe-block),.promo>:where(.brxe-div),
.qty>:where(.brxe-block),.qty>:where(.brxe-div),
.rep-art .t>:where(.brxe-block),.rep-art .t>:where(.brxe-div),
.rh>:where(.brxe-block),.rh>:where(.brxe-div),
.scar>:where(.brxe-block),.scar>:where(.brxe-div),
.secure>:where(.brxe-block),.secure>:where(.brxe-div),
.side .who>:where(.brxe-block),.side .who>:where(.brxe-div),
.side button>:where(.brxe-block),.side button>:where(.brxe-div),
.stage .lbl>:where(.brxe-block),.stage .lbl>:where(.brxe-div),
.stage .thumbs>:where(.brxe-block),.stage .thumbs>:where(.brxe-div),
.stepper .s>:where(.brxe-block),.stepper .s>:where(.brxe-div),
.sumrow>:where(.brxe-block),.sumrow>:where(.brxe-div),
.tier li>:where(.brxe-block),.tier li>:where(.brxe-div),
.toast>:where(.brxe-block),.toast>:where(.brxe-div),
.toggle>:where(.brxe-block),.toggle>:where(.brxe-div),
.track>:where(.brxe-block),.track>:where(.brxe-div),
.trust>:where(.brxe-block),.trust>:where(.brxe-div),
/* ---------- checkout ---------- */
.stepper>:where(.brxe-block),/* ---------- checkout ---------- */
.stepper>:where(.brxe-div),
/* ---------- filter pills ---------- */
.filters>:where(.brxe-block),/* ---------- filter pills ---------- */
.filters>:where(.brxe-div),
/* ============ BUTTONS ============ */
.btn>:where(.brxe-block),/* ============ BUTTONS ============ */
.btn>:where(.brxe-div),
/* ============ DEMO NOTICE ============ */


/* ============ NAV ============ */
.nav>:where(.brxe-block),/* ============ DEMO NOTICE ============ */


/* ============ NAV ============ */
.nav>:where(.brxe-div),
/* ============ TYPE ============ */
.hud>:where(.brxe-block),/* ============ TYPE ============ */
.hud>:where(.brxe-div),
/* desks + partners */
.partner>:where(.brxe-block),/* desks + partners */
.partner>:where(.brxe-div){width:auto}
/* =====================================================================
   SyTec AI — demo site stylesheet (single source for every page)
   Palette + roles: ../../PALETTE.md   ·   Spec: ../../docs/specs/
   ===================================================================== */

@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--void)}
body{background:var(--void);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.mono{font-family:var(--mono)}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px;position:relative}
.wrap.narrow{max-width:860px}
::selection{background:#35D6EE44;color:#fff}

/* grain */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:100;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:sy-grain 1.2s steps(6) infinite}
@keyframes sy-grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
@keyframes sy-pulse{50%{opacity:.35}}
@keyframes sy-sheen{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
@keyframes sy-spin{to{--a:360deg}}
@keyframes sy-shimmer{to{background-position:300% 0}}
@keyframes sy-scan{to{top:110%}}
@keyframes sy-foil{0%{background-position:120% 0}50%,100%{background-position:-60% 0}}
@keyframes sy-draw{to{stroke-dashoffset:0}}
@keyframes sy-fade{to{opacity:1}}
@keyframes sy-marq{to{transform:translateX(-50%)}}
@keyframes sy-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
@keyframes sy-energy{to{left:100%}}
@keyframes sy-sweep{to{transform:rotate(360deg)}}
@keyframes sy-blip{0%,70%{opacity:0;transform:scale(.5)}75%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(1)}}
@keyframes sy-float{0%,100%{transform:rotate(var(--r,0deg)) rotateY(calc(var(--r,0deg)*-1.5)) translateY(0)}50%{transform:rotate(var(--r,0deg)) rotateY(calc(var(--r,0deg)*-1.5)) translateY(-14px)}}
@keyframes sy-floorMove{to{background-position:0 64px}}

/* ============ DEMO NOTICE ============ */


/* ============ NAV ============ */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;width:min(1240px,calc(100% - 32px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 22px;border-radius:14px;
  background:rgba(8,12,20,.6);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line2);flex-direction:row}
.logo{font:700 14px/1 var(--mono);letter-spacing:.24em;color:var(--ink);display:flex;align-items:center;gap:10px;white-space:nowrap;flex-direction:row}
.logo i{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:sy-pulse 2s infinite}
.links{display:flex;gap:24px;font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--muted);flex-direction:row}
.links a{position:relative;padding:6px 0}
.links a:hover,.links a.on{color:var(--ink)}
.links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--grad);box-shadow:0 0 8px var(--cyan)}
.nav-r{display:flex;align-items:center;gap:8px;flex-direction:row}
.cart-btn{position:relative;width:44px;height:44px;border-radius:10px;border:1px solid var(--line2);background:#ffffff08;display:grid;place-items:center;color:var(--ink);cursor:pointer}
.cart-btn svg{width:18px;height:18px}
.cart-btn .ct{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:99px;background:var(--grad);color:#04101F;font:700 11px/20px var(--mono);text-align:center;padding:0 5px;box-shadow:0 0 12px #35D6EE88;transform:scale(0);transition:transform .25s}
.cart-btn .ct.has{transform:scale(1)}
.burger{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line2);background:#ffffff08;color:var(--ink);cursor:pointer}
.mnav{position:fixed;inset:0;z-index:70;background:rgba(5,8,12,.96);backdrop-filter:blur(16px);display:none;flex-direction:column;padding:90px 28px 28px;gap:6px}
.mnav.open{display:flex;flex-direction:row}
.mnav a{font:700 30px/1.3 var(--sans);letter-spacing:-.03em;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--line)}
.mnav .x{position:absolute;top:22px;right:22px;width:44px;height:44px;border-radius:10px;border:1px solid var(--line2);background:none;color:var(--ink);font-size:20px;cursor:pointer}

/* ============ BUTTONS ============ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 14px/1 var(--sans);padding:13px 18px;border-radius:10px;cursor:pointer;transition:transform .2s,box-shadow .2s;border:0;white-space:nowrap;flex-direction:row}
.btn:hover{transform:translateY(-1px)}
.btn-p{color:#04101F;background:var(--grad);box-shadow:0 0 0 1px #ffffff22 inset,0 10px 40px -8px #4D8DFFaa;overflow:hidden}
.btn-p::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,#ffffff88 50%,transparent 70%);background-size:250% 100%;animation:sy-sheen 3.2s infinite;mix-blend-mode:overlay}
.btn-g{color:var(--ink);border:1px solid var(--line2);background:#ffffff08}
.btn-g:hover{border-color:#35D6EE66}
.btn-lg{padding:17px 24px;font-size:15px;border-radius:12px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ============ TYPE ============ */
.hud{display:flex;align-items:center;gap:14px;font:600 11px/1 var(--mono);letter-spacing:.2em;color:var(--cyan);margin-bottom:22px;flex-direction:row}
.hud .n{padding:5px 8px;border:1px solid #35D6EE44;border-radius:4px;background:#35D6EE0d}
.hud .ln{flex:0 0 60px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}
.hud.amber{color:var(--amber)}.hud.amber .n{border-color:#C4922A55;background:#C4922A12}.hud.amber .ln{background:linear-gradient(90deg,var(--amber),transparent)}
h1,.h1{font:800 clamp(48px,6.6vw,96px)/.92 var(--sans);letter-spacing:-.055em;color:var(--ink)}
h2,.h2{font:800 clamp(36px,4.6vw,64px)/1 var(--sans);letter-spacing:-.045em;color:var(--ink)}
h3,.h3{font:700 clamp(22px,2.2vw,28px)/1.15 var(--sans);letter-spacing:-.025em;color:var(--ink)}
.it{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em}
h1 .it,h2 .it{font-size:1.08em}
.it.paper{background:linear-gradient(90deg,var(--paper),#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.it.g,.grad-text{background:linear-gradient(90deg,var(--blue),var(--cyan),#9EEBFF,var(--blue));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sy-shimmer 6s linear infinite}
.it.gold{background:linear-gradient(90deg,#E8B864,var(--amber),#F6D38E,var(--amber));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sy-shimmer 7s linear infinite}
.sub{margin-top:18px;font-size:17px;line-height:1.65;color:var(--muted);max-width:640px}
.sub b{color:var(--ink);font-weight:600}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 11.5px/1 var(--mono);letter-spacing:.2em;color:var(--cyan);padding:8px 12px;border:1px solid #35D6EE33;border-radius:99px;background:#35D6EE0a;flex-direction:row}
.eyebrow em{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:sy-pulse 1.4s infinite}
.eyebrow.amber{color:var(--amber);border-color:#C4922A44;background:#C4922A0d}.eyebrow.amber em{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.chip{display:inline-flex;align-items:center;gap:6px;font:700 10px/1 var(--mono);letter-spacing:.14em;padding:5px 7px;border-radius:5px;border:1px solid var(--line2);color:var(--muted);white-space:nowrap;flex-direction:row}
.chip.blue{color:var(--blue);border-color:#4D8DFF55;background:#4D8DFF12}
.chip.cyan{color:var(--cyan);border-color:#35D6EE55;background:#35D6EE12}
.chip.amber{color:var(--amber);border-color:#C4922A55;background:#C4922A12}
.chip.coral{color:var(--coral);border-color:#FF6B5755;background:#FF6B5712}
.chip.sample{color:#1A1204;background:var(--amber);border-color:var(--amber)}
.tg{display:inline-block;font:700 10px/1 var(--mono);letter-spacing:.14em;padding:4px 6px;border-radius:4px;margin-left:8px;vertical-align:3px}
.tg.p{color:var(--paper);background:#F3EBDD1a;border:1px solid #F3EBDD33}
.tg.ai{color:var(--cyan);background:#35D6EE14;border:1px solid #35D6EE33}
.crumbs{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--dim);display:flex;gap:10px;flex-wrap:wrap;flex-direction:row}
.crumbs a:hover{color:var(--ink)}
.crumbs span{color:var(--muted)}

/* ============ SECTIONS / LAYOUT ============ */
section.sec{position:relative;padding:120px 0}
section.sec.tight{padding:80px 0}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.mt-s{margin-top:24px}.mt-m{margin-top:40px}.mt-l{margin-top:56px}
.center{text-align:center}.center .hud{justify-content:center}.center .sub{margin-left:auto;margin-right:auto}

/* sub-page hero */
.phero{position:relative;padding:170px 0 90px;overflow:hidden;border-bottom:1px solid var(--line)}
.phero canvas.field{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.phero .aurora{position:absolute;width:800px;height:800px;border-radius:50%;right:-10%;top:-40%;pointer-events:none;background:radial-gradient(circle,#4D8DFF2a 0%,#35D6EE14 35%,transparent 65%);filter:blur(30px)}
.phero .crumbs{margin-bottom:26px}
.phero h1{margin-top:20px;max-width:1000px}
.phero .sub{font-size:19px}
.phero .ctas{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;flex-direction:row}

/* reveal */
.rv{opacity:0;transform:translateY(34px);filter:blur(10px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1),filter 1s}
.rv.in{opacity:1;transform:none;filter:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}

/* ============ CARDS ============ */
.card{position:relative;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,#0B111ACC,#070B11CC);overflow:hidden;isolation:isolate}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--x,-500px) var(--y,-500px),#4D8DFF22,transparent 45%)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--x,-500px) var(--y,-500px),#35D6EEaa,transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.card.pad{padding:24px}.card.pad-l{padding:34px}
.corners{position:absolute;inset:8px;pointer-events:none}
.corners i{position:absolute;width:10px;height:10px;border-color:#35D6EE66;border-style:solid}
.corners i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.corners i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.corners i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}.corners i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.card .k{font:600 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--cyan)}
.card h3{margin-top:14px}
.card p{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--muted)}
a.card:hover .go span,.card:hover .go span{transform:translateX(6px)}
.go{display:inline-flex;gap:8px;align-items:center;font:600 14px/1 var(--sans);color:var(--cyan);margin-top:20px;flex-direction:row}
.go span{transition:transform .25s}

/* glass panel with rotating light border */
.glow{position:relative;border-radius:20px;padding:1px;background:conic-gradient(from var(--a),transparent 0 62%,var(--blue) 72%,var(--cyan) 80%,transparent 90%);animation:sy-spin 5s linear infinite}
.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--line2);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glow.amber{background:conic-gradient(from var(--a),transparent 0 62%,var(--amber) 74%,#F6D38E 80%,transparent 90%)}
.panel{position:relative;border-radius:19px;background:var(--glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);overflow:hidden}
.panel.pad{padding:24px}
.panel.scan::before{content:"";position:absolute;left:0;right:0;height:120px;top:-120px;background:linear-gradient(transparent,#35D6EE14,transparent);animation:sy-scan 4.5s linear infinite;pointer-events:none}
.tilt{transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}

/* data bits */
.bar{height:5px;border-radius:9px;background:#ffffff0d;margin-top:12px;overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--grad);border-radius:9px;box-shadow:0 0 12px #35D6EE88;transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.tile{position:relative;border:1px solid var(--line);border-radius:12px;padding:12px;background:#0B1119cc}
.tile .l{font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--muted)}
.tile .v{font:700 28px/1 var(--sans);color:var(--ink);letter-spacing:-.03em;margin-top:10px}
.tile .v small{font:600 11px/1 var(--mono);color:var(--growth);margin-left:6px;letter-spacing:0}
.up{color:var(--growth)}.dn{color:var(--coral)}
.caret{display:inline-block;width:7px;height:13px;background:var(--cyan);vertical-align:-2px;animation:sy-pulse .9s steps(1) infinite}
.rrow{display:grid;grid-template-columns:130px 1fr 74px;gap:14px;align-items:center;padding:13px 0;font:500 12.5px/1 var(--mono);color:var(--muted);border-bottom:1px solid #ffffff08}
.rrow .bar{margin:0;height:7px}
.rrow em{font-style:normal;color:var(--ink);text-align:right;font-weight:600}
.rrow em small{color:var(--growth);font-size:10px;margin-left:4px}
.rh{display:flex;justify-content:space-between;gap:10px;font:500 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--muted);padding-bottom:16px;border-bottom:1px solid var(--line);flex-direction:row}
.rh b{color:var(--ink);font-weight:600}
.soon{font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--cyan);border:1px dashed #35D6EE66;padding:6px 8px;border-radius:6px;white-space:nowrap}

/* desks + partners */
.partner{display:flex;gap:18px;align-items:center;padding:22px;flex-direction:row}
.partner .ph{width:78px;height:78px;border-radius:16px;flex:none;display:grid;place-items:center;font:700 22px/1 var(--sans);color:var(--void);background:linear-gradient(135deg,var(--paper),#fff);position:relative}
.partner .ph::after{content:"";position:absolute;inset:-4px;border-radius:19px;border:1px solid #F3EBDD55}
.partner .ph img,.bio .ph img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.partner .nm{font:700 20px/1.1 var(--sans);color:var(--ink);letter-spacing:-.02em}
.partner p{margin-top:6px;font-size:14px;color:var(--muted);line-height:1.5}
a.bk{color:var(--ink);text-decoration:underline;text-decoration-color:var(--cyan);text-underline-offset:3px;text-decoration-thickness:1px}
a.bk:hover{color:var(--cyan)}
.desk{padding:20px}
.desk .ic{position:relative;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#4D8DFF14;border:1px solid #4D8DFF44;color:var(--blue);font:700 14px/1 var(--mono)}
.desk .ic::before,.desk .ic::after{content:"";position:absolute;inset:-1px;border-radius:12px;border:1px solid var(--cyan);opacity:0;animation:sy-ring 2.6s infinite}
.desk .ic::after{animation-delay:1.3s}
.desk .nm{margin-top:16px;font:700 16px/1.2 var(--sans);color:var(--ink)}
.desk p{margin-top:5px;font-size:13px;color:var(--muted);line-height:1.5}
.desk .st{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line2);font:500 11px/1.4 var(--mono);color:var(--cyan);display:flex;gap:8px;align-items:center;flex-direction:row}
.desk .st em{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:sy-pulse 1.3s infinite;flex:none}

/* ============ PRESS / MAGAZINE COVERS ============ */
.press-bg{background:radial-gradient(ellipse at 20% 0%,#1A2F6E 0%,var(--navy) 45%,#07102E 100%);overflow:hidden}
.press-bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#C4922A22 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse at 70% 50%,#000,transparent 70%);pointer-events:none}
.press-bg h2{font:400 clamp(44px,5.4vw,76px)/1 var(--serif);letter-spacing:-.02em;color:var(--paper)}
.press-bg .sub{color:#C9D2E6}
.mag{position:relative;width:240px;aspect-ratio:3/4;border-radius:4px;overflow:hidden;box-shadow:0 40px 80px #000a,0 0 0 1px #ffffff18;flex:none}
.mag.float{animation:sy-float 7s ease-in-out infinite}
.mag::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,#ffffff40 42%,#35D6EE30 48%,#E8B86440 54%,transparent 70%);background-size:300% 100%;animation:sy-foil 5s ease-in-out infinite;mix-blend-mode:screen;pointer-events:none}
.mag.mag--img{aspect-ratio:auto;background:#0A1A2E}
.mag--img .cv,.mag--img img{display:block;width:100%;height:auto}
.mag.mag--img .soonbadge{top:auto;bottom:10px}
.mag .mh{position:absolute;left:14px;right:14px;top:14px;font:400 28px/.95 var(--serif);color:var(--paper)}
.mag .mh small{display:block;font:600 10px/1.6 var(--mono);letter-spacing:.22em;color:var(--amber);margin-top:5px}
.mag .face{position:absolute;left:24%;right:18%;top:27%;bottom:30%;border-radius:50% 50% 10px 10px}
.mag .hd{position:absolute;left:14px;right:14px;bottom:16px;font:400 italic 19px/1.05 var(--serif);color:var(--paper)}
.mag .hd small{display:block;font:600 10px/1.6 var(--mono);font-style:normal;letter-spacing:.2em;color:var(--amber);margin-top:6px}
.mag--dim{background:linear-gradient(180deg,#0A1A2E 0 21%,#3B6DA8 21% 73%,#0A1A2E 73%)}
.mag--dim .face{background:radial-gradient(circle at 50% 34%,#E2B89A 0 21%,#0A1A2E 22% 100%)}
.mag--lem{background:linear-gradient(180deg,var(--navy) 0 21%,#22314F 21% 73%,var(--navy) 73%)}
.mag--lem .face{background:radial-gradient(circle at 50% 34%,#D4A487 0 21%,#0D1B4B 22% 100%)}
.mag--llj{background:linear-gradient(180deg,var(--paper) 0 21%,#1B2436 21% 73%,var(--paper) 73%)}
.mag--llj .mh{color:#141B2B}.mag--llj .mh small{color:#8A5A12}
.mag--llj .face{background:radial-gradient(circle at 50% 34%,#CFA284 0 21%,#0E1422 22% 100%)}
.mag--llj .hd{color:#141B2B}.mag--llj .hd small{color:#8A5A12}
.mag .soonbadge{position:absolute;right:10px;top:10px;font:700 10px/1 var(--mono);letter-spacing:.14em;color:#04101F;background:var(--grad);padding:4px 6px;border-radius:3px;z-index:2}
.covers3{position:relative;height:420px;perspective:1200px}
.covers3 .mag{position:absolute;width:218px}
.covers3 .mag:nth-child(1){left:0;top:34px;--r:-7deg}
.covers3 .mag:nth-child(2){left:206px;top:0;--r:0deg;z-index:2;animation-delay:-2.3s}
.covers3 .mag:nth-child(3){left:412px;top:38px;--r:6deg;animation-delay:-4.6s}
.steps .st{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:22px 0;border-top:1px solid #F3EBDD22}
.steps .st .k{font:500 11px/1 var(--mono);color:var(--amber);padding-top:6px}
.steps .st b{font:400 26px/1.1 var(--serif);color:var(--paper);display:block}
.steps .st p{margin-top:6px;font-size:14px;color:#AAB6D0;line-height:1.5}
.only{margin-top:26px;font:400 italic 30px/1.2 var(--serif);color:var(--amber);text-shadow:0 0 30px #C4922A55}

/* ============ PROOF MARQUEE ============ */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--void),#0A1224,var(--void));overflow:hidden;position:relative}
.proof::before,.proof::after{content:"";position:absolute;top:0;bottom:0;width:140px;z-index:2}
.proof::before{left:0;background:linear-gradient(90deg,var(--void),transparent)}.proof::after{right:0;background:linear-gradient(-90deg,var(--void),transparent)}
.track{display:flex;gap:64px;align-items:center;padding:26px 0;width:max-content;animation:sy-marq 42s linear infinite;flex-direction:row}
.track .m{font:400 26px/1 var(--serif);color:var(--paper);white-space:nowrap}
.track .m small{font:600 10px/1 var(--mono);letter-spacing:.2em;color:var(--amber);margin-left:10px;vertical-align:4px}
.track .t{font:500 11.5px/1 var(--mono);letter-spacing:.16em;color:var(--muted);white-space:nowrap}
.track .s{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue);flex:none}

/* ============ HOW RAIL ============ */
.how{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.how .rail{position:absolute;left:24px;right:24px;top:31px;height:2px;background:var(--line2);overflow:hidden;border-radius:2px}
.how .rail::after{content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 16px var(--cyan);animation:sy-energy 3.2s cubic-bezier(.6,0,.4,1) infinite}
.how .step{padding:0 22px 22px 22px}
.how .node{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--mono);color:var(--cyan);background:var(--void);border:1px solid #35D6EE55;box-shadow:0 0 0 6px var(--void),0 0 30px -4px #35D6EE66;position:relative;z-index:2}
.how .step:last-child .node{color:var(--void);background:var(--grad);border:0}
.how b{display:block;margin-top:22px;font:700 20px/1.2 var(--sans);color:var(--ink);letter-spacing:-.02em}
.how p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted)}

/* ============ CTA RADAR ============ */
.cta{position:relative;padding:160px 0 140px;text-align:center;overflow:hidden}
.radar{position:absolute;left:50%;top:50%;width:900px;height:900px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle,transparent 0 89px,#4D8DFF1c 89px 90px);mask-image:radial-gradient(circle,#000 30%,transparent 70%)}
.radar::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 80%,#35D6EE33 96%,#35D6EE88 100%);animation:sy-sweep 4s linear infinite}
.blip{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 16px var(--coral);animation:sy-blip 4s infinite}
.cta .hud{justify-content:center}
.cta h2{font-size:clamp(46px,6.2vw,90px)}
.scar{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font:600 12px/1 var(--mono);color:var(--coral);border:1px solid #FF6B5755;background:#FF6B5712;padding:9px 12px;border-radius:99px;letter-spacing:.06em;flex-direction:row}
.scar em{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 10px var(--coral);animation:sy-pulse 1.1s infinite}
.check{position:relative;margin:30px auto 0;max-width:620px;display:flex;border-radius:14px;padding:1px;background:conic-gradient(from var(--a),#35D6EE22 0 60%,var(--blue) 75%,var(--cyan) 85%,#35D6EE22 95%);animation:sy-spin 4s linear infinite;box-shadow:0 20px 80px -20px #4D8DFF88;flex-direction:row}
.check .in{flex:1;display:flex;border-radius:13px;background:#070C14;overflow:hidden;flex-direction:row}
.check .field{flex:1;padding:20px;text-align:left;font:500 16px/1 var(--mono);color:var(--muted)}
.check .field .typed{color:var(--ink)}
.check .go{margin:0;background:var(--grad);color:#04101F;font:800 14px/1 var(--sans);padding:20px 22px;letter-spacing:.02em}
.small{margin-top:16px;font-size:13px;color:var(--dim)}

/* ============ FORMS ============ */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{font:600 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--muted)}
.fld input,.fld select,.fld textarea{width:100%;font:500 15px/1.4 var(--sans);color:var(--ink);background:#070C14;border:1px solid var(--line2);border-radius:10px;padding:14px 14px;outline:none;transition:border-color .2s,box-shadow .2s;appearance:none}
.fld textarea{min-height:120px;resize:vertical}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 4px #35D6EE1a}
.fld input::placeholder,.fld textarea::placeholder{color:var(--dim)}
.opts{display:flex;gap:8px;flex-wrap:wrap;flex-direction:row}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border-radius:10px;border:1px solid var(--line2);background:#070C14;font:600 13px/1 var(--sans);color:var(--muted);cursor:pointer;transition:all .2s;flex-direction:row}
.opt input:checked+span{color:var(--ink);border-color:var(--cyan);background:#35D6EE12;box-shadow:0 0 0 3px #35D6EE14,0 0 24px -6px #35D6EE88}
.fine{font-size:12px;color:var(--dim);line-height:1.5}

/* ============ PROSE (long-form) ============ */
.prose{font-size:18px;line-height:1.75;color:#C7D2DD}
.prose > * + *{margin-top:1.1em}
.prose h2{font:800 clamp(28px,3vw,40px)/1.1 var(--sans);letter-spacing:-.035em;color:var(--ink);margin-top:2em}
.prose h3{font:700 22px/1.25 var(--sans);color:var(--ink);margin-top:1.6em}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.prose a{color:var(--cyan);border-bottom:1px solid #35D6EE55}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--cyan)}
.prose blockquote{border-left:2px solid var(--cyan);padding:6px 0 6px 22px;font:400 italic 26px/1.35 var(--serif);color:var(--paper)}
.prose .callout{border:1px solid #35D6EE33;background:#35D6EE0a;border-radius:14px;padding:20px 22px;font-size:16px}
.prose .callout b{display:block;font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--cyan);margin-bottom:10px}
.prose hr{border:0;height:1px;background:var(--line2);margin:2.2em 0}

/* ============ TABLE / COMPARE ============ */
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.cmp th{font:600 10.5px/1.3 var(--mono);letter-spacing:.14em;color:var(--muted)}
.cmp td{color:var(--text)}
.cmp td.y{color:var(--cyan);font-weight:700}
.cmp td.n{color:var(--dim)}
.cmp tr:hover td{background:#ffffff05}

/* ============ SHOP / PRODUCT ============ */
.pcard{display:flex;flex-direction:column;padding:0}
.pcard .art{position:relative;height:230px;display:grid;place-items:center;border-bottom:1px solid var(--line);overflow:hidden;background:radial-gradient(ellipse at 50% 120%,#4D8DFF22,transparent 60%)}
.pcard .art .mag{width:120px}
.pcard .body{padding:22px;display:flex;flex-direction:column;flex:1}
.pcard .row{display:flex;gap:8px;flex-wrap:wrap;flex-direction:row}
.pcard h3{margin-top:14px;font-size:21px}
.pcard p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted)}
.price{display:flex;align-items:baseline;gap:8px;font:800 30px/1 var(--sans);letter-spacing:-.03em;color:var(--ink);flex-direction:row}
.price small{font:500 12px/1 var(--mono);color:var(--muted);letter-spacing:0}
.pcard .foot{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-direction:row}
.buybox .price{font-size:48px}
.incl{list-style:none;display:grid;gap:10px;margin-top:18px}
.incl li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15px;line-height:1.5;color:var(--text)}
.incl li::before{content:"";width:18px;height:18px;border-radius:5px;margin-top:2px;background:var(--grad);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;font:500 11px/1.4 var(--mono);color:var(--dim);letter-spacing:.06em;flex-direction:row}
.trust span::before{content:"◆ ";color:var(--cyan)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:10px;overflow:hidden;flex-direction:row}
.qty button{width:40px;height:44px;background:#ffffff06;border:0;color:var(--ink);font-size:18px;cursor:pointer}
.qty span{min-width:40px;text-align:center;font:600 14px/1 var(--mono);color:var(--ink)}
.toggle{display:inline-flex;padding:4px;border-radius:12px;border:1px solid var(--line2);background:#070C14;flex-direction:row}
.toggle button{border:0;background:none;color:var(--muted);font:600 13px/1 var(--sans);padding:10px 16px;border-radius:9px;cursor:pointer;transition:all .2s}
.toggle button.on{color:#04101F;background:var(--grad);box-shadow:0 0 20px -4px #35D6EE99}
.toggle .save{font:700 10px/1 var(--mono);color:var(--growth);margin-left:6px}

/* ============ CART DRAWER ============ */
.scrim{position:fixed;inset:0;z-index:80;background:#02040899;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(440px,100%);background:rgba(7,11,18,.96);backdrop-filter:blur(24px);border-left:1px solid var(--line2);transform:translateX(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--cyan),transparent);box-shadow:0 0 16px var(--cyan)}
.drawer .dhd{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line);flex-direction:row}
.drawer .dhd b{font:700 18px/1 var(--sans);color:var(--ink)}
.drawer .dhd .x{width:40px;height:40px;border-radius:10px;border:1px solid var(--line2);background:none;color:var(--ink);cursor:pointer;font-size:18px}
.drawer .items{flex:1;overflow:auto;padding:10px 24px}
.line{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.line .th{width:54px;height:54px;border-radius:10px;border:1px solid var(--line2);display:grid;place-items:center;font:700 12px/1 var(--mono);color:var(--cyan);background:radial-gradient(circle at 50% 120%,#4D8DFF33,#070C14)}
.line .nm{font:600 14.5px/1.3 var(--sans);color:var(--ink)}
.line .mt{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex-direction:row}
.line .pr{font:700 15px/1 var(--sans);color:var(--ink);text-align:right}
.line .pr small{display:block;font:500 10px/1.6 var(--mono);color:var(--muted)}
.line .rm{background:none;border:0;color:var(--dim);font:500 11px/1 var(--mono);cursor:pointer;margin-top:6px}
.line .rm:hover{color:var(--coral)}
.drawer .dft{padding:22px 24px;border-top:1px solid var(--line)}
.sumrow{display:flex;justify-content:space-between;font:500 13px/1 var(--mono);color:var(--muted);padding:6px 0;flex-direction:row}
.sumrow.tot{font:800 22px/1 var(--sans);color:var(--ink);padding-top:14px;margin-top:8px;border-top:1px solid var(--line)}
.empty{padding:50px 10px;text-align:center;color:var(--muted);font-size:14px}
.empty b{display:block;font:700 18px/1.3 var(--sans);color:var(--ink);margin-bottom:8px}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,40px);opacity:0;z-index:95;font:600 13px/1 var(--sans);color:var(--ink);background:#0B111Aee;border:1px solid #35D6EE55;padding:14px 18px;border-radius:12px;box-shadow:0 20px 60px -10px #35D6EE55;transition:all .35s cubic-bezier(.2,.8,.2,1);display:flex;gap:10px;align-items:center;flex-direction:row}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast em{width:8px;height:8px;border-radius:50%;background:var(--growth);box-shadow:0 0 10px var(--growth)}

/* ============ FOOTER ============ */
.foot-site{border-top:1px solid var(--line);padding:70px 0 34px;background:linear-gradient(180deg,var(--void),#03050A)}
.foot-site .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px}
.foot-site :is(h2,h4){font:600 10.5px/1 var(--mono);letter-spacing:.18em;color:var(--muted);margin-bottom:16px}
.foot-site a{display:block;font-size:14px;color:var(--text);padding:5px 0}
.foot-site a:hover{color:var(--cyan)}
.foot-site .about{font-size:14px;line-height:1.6;color:var(--muted);margin-top:16px;max-width:320px}
.foot-site .base{margin-top:50px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 11px/1.5 var(--mono);color:var(--dim);letter-spacing:.06em;flex-direction:row}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .links{display:none}.burger{display:grid;place-items:center}
  .split,.g2{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}
  .how{grid-template-columns:1fr 1fr}.how .rail{display:none}
  .tilt{transform:none!important}
  .foot-site .cols{grid-template-columns:1fr 1fr}
  .covers3,.covers3.rv.in{height:360px;transform:scale(.8);transform-origin:left top}
}
@media (max-width:720px){
  .wrap{padding:0 18px}
  .g3,.g4,.how,.form{grid-template-columns:1fr}
  section.sec{padding:84px 0}
  .phero{padding:130px 0 60px}
  .rrow{grid-template-columns:96px 1fr 64px;gap:10px;font-size:11px}
  .nav .btn-p{display:none}
  .check,.check .in{flex-direction:column}
  .covers3,.covers3.rv.in{height:195px;transform:scale(.5)}
  .foot-site .cols{grid-template-columns:1fr}
  .buybox .price{font-size:38px}
  .cmp{font-size:12.5px}.cmp th,.cmp td{padding:10px 8px}
  
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none;filter:none}}

/* =====================================================================
   SyTec AI — commerce surfaces (Fluent Cart demo)
   Shop · Product ×3 · Cart · Checkout · Thank-you · Account
   In Bricks: product/shop are Bricks templates; cart/checkout/account are
   Fluent Cart markup restyled with these token overrides only.
   ===================================================================== */

/* ---------- sample banner ---------- */
.testbar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px 16px;margin-top:0;font:600 11px/1.4 var(--mono);letter-spacing:.12em;color:var(--amber);background:repeating-linear-gradient(135deg,#C4922A10 0 12px,transparent 12px 24px);border-bottom:1px solid #C4922A33;text-align:center;flex-direction:row}

/* ---------- filter pills ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;flex-direction:row}
.filters button{font:600 12px/1 var(--mono);letter-spacing:.1em;color:var(--muted);background:#070C14;border:1px solid var(--line2);padding:11px 14px;border-radius:99px;cursor:pointer;transition:all .2s}
.filters button.on{color:#04101F;background:var(--grad);border-color:transparent;box-shadow:0 0 20px -4px #35D6EE99}
.filters button:hover:not(.on){color:var(--ink);border-color:#35D6EE55}

/* ---------- shop grid ---------- */
.shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shopgrid .feat{grid-column:span 2}
.feat .body{padding:30px}
.feat .art{height:300px}
.pcard[hidden]{display:none}
.pcard .art .ribbon{position:absolute;left:14px;top:14px;display:flex;gap:6px;flex-direction:row}
.pcard .art .fan{position:relative;width:300px;height:220px}
.pcard .art .fan .mag{position:absolute;width:118px;top:30px;animation:sy-float 7s ease-in-out infinite}
.pcard .art .fan .mag:nth-child(1){left:0;--r:-9deg}.pcard .art .fan .mag:nth-child(2){left:90px;top:12px;z-index:2;--r:0deg;animation-delay:-2s}.pcard .art .fan .mag:nth-child(3){left:180px;--r:8deg;animation-delay:-4s}
.pcard .art .mag .mh{font-size:16px;left:8px;right:8px;top:8px}.pcard .art .mag .hd{font-size:11px;left:8px;right:8px;bottom:9px}
.pcard .art .mag .mh small,.pcard .art .mag .hd small{display:none}
.feat .art .fan{transform:scale(1.25)}

/* mini report art (subscriptions) */
.rep-art{width:78%;max-width:300px;border:1px solid var(--line2);border-radius:12px;background:#070C14;padding:14px;box-shadow:0 30px 60px -20px #000,0 0 40px -10px #4D8DFF55;transform:perspective(900px) rotateX(10deg) rotateY(-8deg)}
.rep-art .t{font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--muted);display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--line);flex-direction:row}
.rep-art .r{display:grid;grid-template-columns:60px 1fr;gap:8px;align-items:center;margin-top:9px;font:500 10px/1 var(--mono);color:var(--muted)}
.rep-art .r i{display:block;height:5px;border-radius:9px;background:var(--grad);box-shadow:0 0 8px #35D6EE88}
.rep-art .r i.off{background:#ffffff12;box-shadow:none}

/* 3D book (digital) */
.book{position:relative;width:150px;height:200px;transform-style:preserve-3d;transform:perspective(900px) rotateY(-28deg) rotateX(6deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card:hover .book,.book.big:hover{transform:perspective(900px) rotateY(-8deg) rotateX(2deg)}
.book .front{position:absolute;inset:0;border-radius:3px 8px 8px 3px;background:linear-gradient(160deg,#0B1628 0%,#122446 55%,#0B1628 100%);box-shadow:inset 3px 0 0 #ffffff14,0 30px 60px -10px #000;overflow:hidden;padding:16px 14px}
.book .front::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,#35D6EE33,transparent 55%),repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 14px)}
.book .front::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff33 45%,transparent 60%);background-size:300% 100%;animation:sy-foil 5s ease-in-out infinite}
.book .front .k{position:relative;font:700 10px/1 var(--mono);letter-spacing:.18em;color:var(--cyan)}
.book .front b{position:relative;display:block;margin-top:12px;font:800 19px/1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.book .front b i{font:400 italic 20px/1 var(--serif);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.book .front .ft{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--muted);flex-direction:row}
.book .spine{position:absolute;left:0;top:0;bottom:0;width:26px;transform-origin:left;transform:rotateY(90deg) translateX(-26px);background:linear-gradient(90deg,#060C18,#0E1D38)}
.book .pages{position:absolute;right:-10px;top:5px;bottom:5px;width:12px;transform:translateZ(-12px);background:repeating-linear-gradient(90deg,#E8E2D4 0 1px,#CFC8B8 1px 2px);border-radius:0 3px 3px 0}
.book.big{width:260px;height:346px}
.book.big .front{padding:26px 22px}.book.big .front b{font-size:32px;margin-top:18px}.book.big .front b i{font-size:34px}.book.big .front .k{font-size:10px}.book.big .front .ft{font-size:10px;left:22px;right:22px;bottom:22px}
.kitbox{position:relative;width:180px;height:160px;transform-style:preserve-3d;transform:perspective(900px) rotateX(55deg) rotateZ(-35deg)}
.kitbox i{position:absolute;inset:0;border-radius:14px;border:1px solid #35D6EE55;background:linear-gradient(135deg,#4D8DFF22,#35D6EE10);box-shadow:0 0 30px -8px #35D6EE66;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.kitbox i:nth-child(1){transform:translateZ(0)}.kitbox i:nth-child(2){transform:translateZ(22px)}.kitbox i:nth-child(3){transform:translateZ(44px);background:linear-gradient(135deg,#4D8DFF44,#35D6EE22)}
.card:hover .kitbox i:nth-child(2){transform:translateZ(36px)}.card:hover .kitbox i:nth-child(3){transform:translateZ(72px)}
.kitbox b{position:absolute;inset:0;display:grid;place-items:center;transform:translateZ(46px);font:700 11px/1 var(--mono);letter-spacing:.2em;color:var(--ink)}

/* ---------- product page ---------- */
.pd{padding:140px 0 60px}
.pd .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
.stage{position:sticky;top:110px;border-radius:22px;min-height:600px;padding:40px 0 90px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 110%,#4D8DFF33,transparent 60%),radial-gradient(ellipse at 50% -10%,#35D6EE14,transparent 50%),#060A10}
.stage canvas.field{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.stage .floorg{position:absolute;left:-20%;right:-20%;bottom:-12%;height:45%;transform:perspective(500px) rotateX(70deg);background-image:linear-gradient(#4D8DFF26 1px,transparent 1px),linear-gradient(90deg,#4D8DFF26 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to top,#000,transparent 85%);animation:sy-floorMove 3s linear infinite}
.stage .mag{width:300px;z-index:2;transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
.stage .mag.swap{opacity:0;transform:translateY(20px) rotateY(25deg) scale(.95)}
.stage .lbl{position:absolute;left:16px;top:16px;display:flex;gap:6px;z-index:3;flex-direction:row}
.stage .thumbs{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3;flex-direction:row}
.stage .thumbs button{width:46px;height:60px;border-radius:4px;border:1px solid var(--line2);cursor:pointer;opacity:.55;transition:all .25s;padding:0}
.stage .thumbs button.on{opacity:1;border-color:var(--cyan);box-shadow:0 0 16px -2px #35D6EE99}
.buybox h1{font-size:clamp(40px,4.6vw,64px);margin-top:16px}
.buybox .desc{margin-top:16px;font-size:17px;line-height:1.6;color:var(--muted)}
.buybox .pricewrap{margin-top:26px;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;flex-direction:row}
.buybox .pricewrap .note{font:600 10px/1.5 var(--mono);letter-spacing:.12em;color:var(--amber)}
.optlabel{margin-top:28px;margin-bottom:12px;font:600 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--muted);display:flex;justify-content:space-between;flex-direction:row}
.mastpick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mastpick label{position:relative;cursor:pointer}
.mastpick input{position:absolute;opacity:0}
.mastpick span{display:block;padding:14px 12px;border-radius:12px;border:1px solid var(--line2);background:#070C14;transition:all .2s}
.mastpick span b{display:block;font:400 19px/1.05 var(--serif);color:var(--ink)}
.mastpick span small{display:block;margin-top:6px;font:600 10px/1.3 var(--mono);letter-spacing:.12em;color:var(--dim)}
.mastpick input:checked+span{border-color:var(--cyan);background:#35D6EE10;box-shadow:0 0 0 3px #35D6EE14,0 0 28px -8px #35D6EEaa}
.mastpick input:checked+span small{color:var(--cyan)}
.buyrow{margin-top:26px;display:flex;gap:12px;align-items:stretch;flex-direction:row}
.buyrow .glow{flex:1;border-radius:13px}
.buyrow .glow .btn{border-radius:12px;height:100%}
.gate{margin-top:18px;border:1px dashed #C4922A66;background:#C4922A0a;border-radius:12px;padding:14px 16px;font-size:13.5px;line-height:1.55;color:#D8CBB3}
.gate b{display:block;font:700 10px/1 var(--mono);letter-spacing:.16em;color:var(--amber);margin-bottom:8px}
.gate .fld{margin-top:12px}.gate .fld input{padding:11px 12px;font-size:14px}

/* timeline strip */
.tl{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:40px;position:relative}
.tl .rail{position:absolute;left:20px;right:20px;top:21px;height:2px;background:var(--line2);overflow:hidden}
.tl .rail::after{content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 16px var(--cyan);animation:sy-energy 3.2s cubic-bezier(.6,0,.4,1) infinite}
.tl .s{position:relative;z-index:2}
.tl .s i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--void);border:1px solid #35D6EE55;font:700 11px/1 var(--mono);color:var(--cyan);font-style:normal;box-shadow:0 0 0 6px var(--void)}
.tl .s b{display:block;margin-top:16px;font:700 16px/1.2 var(--sans);color:var(--ink)}
.tl .s p{margin-top:6px;font-size:13px;line-height:1.5;color:var(--muted)}
.tl .s small{display:block;margin-top:8px;font:600 10px/1 var(--mono);letter-spacing:.12em;color:var(--dim)}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;font:700 18px/1.3 var(--sans);color:var(--ink);flex-direction:row}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--mono);color:var(--cyan);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;font-size:15px;line-height:1.65;color:var(--muted);max-width:760px}

/* ---------- department (subscription) ---------- */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.tier{position:relative;cursor:pointer;padding:26px;border-radius:18px;border:1px solid var(--line2);background:#070C14;transition:all .3s}
.tier input{position:absolute;opacity:0}
.tier .nm{font:800 24px/1.1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.tier .pp{margin-top:14px;font:800 42px/1 var(--sans);letter-spacing:-.04em;color:var(--ink)}
.tier .pp small{font:500 13px/1 var(--mono);color:var(--muted);letter-spacing:0;margin-left:4px}
.tier p{margin-top:10px;font-size:14px;line-height:1.55;color:var(--muted)}
.tier ul{list-style:none;margin-top:16px;display:grid;gap:8px}
.tier li{font-size:13.5px;color:var(--text);display:flex;gap:8px;align-items:flex-start;flex-direction:row}
.tier li::before{content:"◆";color:var(--cyan);font-size:10px;margin-top:4px}
.tier li.no{color:var(--dim)}.tier li.no::before{content:"–";color:var(--dim);font-size:12px;margin-top:0}
.tier.on{border-color:var(--cyan);background:linear-gradient(180deg,#0E1D2B,#070C14);box-shadow:0 0 0 3px #35D6EE14,0 20px 60px -20px #35D6EE77}
.tier .pop{position:absolute;right:16px;top:16px}
.deskmap{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.deskmap .d{border:1px solid var(--line);border-radius:12px;padding:14px;background:#0B1119;transition:all .5s;opacity:.35;filter:grayscale(1)}
.deskmap .d.lit{opacity:1;filter:none;border-color:#35D6EE55;box-shadow:0 0 30px -10px #35D6EE88}
.deskmap .d b{display:flex;justify-content:space-between;font:700 14px/1 var(--sans);color:var(--ink);flex-direction:row}
.deskmap .d b em{font:600 10px/1 var(--mono);font-style:normal;letter-spacing:.14em;color:var(--cyan)}
.deskmap .d .bar{margin-top:12px}
.deskmap .d small{display:block;margin-top:10px;font:500 10.5px/1.4 var(--mono);color:var(--muted)}

/* ---------- cart page ---------- */
.cartgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start}
.cartlist .line{grid-template-columns:72px 1fr auto;padding:22px 0}
.cartlist .line .th{width:72px;height:72px;font-size:14px;border-radius:14px}
.cartlist .line .nm{font-size:17px}
.summary{position:sticky;top:110px}
.promo{display:flex;gap:8px;margin-top:16px;flex-direction:row}
.promo input{flex:1;font:500 14px/1 var(--mono);color:var(--ink);background:#070C14;border:1px solid var(--line2);border-radius:10px;padding:12px;outline:none}
.promo input:focus{border-color:var(--cyan)}

/* ---------- checkout ---------- */
.stepper{display:flex;align-items:center;gap:10px;font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--dim);margin-bottom:34px;flex-wrap:wrap;flex-direction:row}
.stepper .s{display:flex;align-items:center;gap:8px;flex-direction:row}
.stepper .s i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);font-style:normal;font-size:10px}
.stepper .s.on{color:var(--ink)}.stepper .s.on i{background:var(--grad);color:#04101F;border:0;box-shadow:0 0 14px #35D6EE88}
.stepper .s.done{color:var(--cyan)}.stepper .s.done i{border-color:var(--cyan);color:var(--cyan)}
.stepper .sep{width:40px;height:1px;background:var(--line2)}
.cogrid{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:start}
.coblock{padding:26px;margin-bottom:16px}
.coblock h3{font-size:20px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;flex-direction:row}
.cogrid>*,.cartgrid>*,.acct>*,.pd .grid>*{min-width:0}
.coblock .form{margin-top:18px}
.cardel{margin-top:18px;border:1px solid var(--line2);border-radius:12px;background:#070C14;overflow:hidden}
.cardel .r1{display:flex;align-items:center;gap:12px;padding:15px 14px;border-bottom:1px solid var(--line);flex-direction:row}
.cardel .r1 input{flex:1;background:none;border:0;outline:none;font:500 16px/1 var(--mono);color:var(--ink);letter-spacing:.08em}
.cardel .r2{display:grid;grid-template-columns:1fr 1fr}
.cardel .r2 input{background:none;border:0;outline:none;font:500 15px/1 var(--mono);color:var(--ink);padding:15px 14px}
.cardel .r2 input+input{border-left:1px solid var(--line)}
.brandmark{display:flex;gap:4px;flex-direction:row}
.brandmark i{width:30px;height:20px;border-radius:4px;background:#ffffff14;border:1px solid var(--line2)}
.brandmark i:first-child{background:linear-gradient(135deg,#4D8DFF,#35D6EE)}
.paytabs{display:flex;gap:8px;margin-top:16px;flex-direction:row}
.paytabs button{flex:1;padding:12px;border-radius:10px;border:1px solid var(--line2);background:#070C14;color:var(--muted);font:600 13px/1 var(--sans);cursor:pointer}
.paytabs button.on{color:var(--ink);border-color:var(--cyan);background:#35D6EE10}
.secure{display:flex;align-items:center;gap:8px;margin-top:14px;font:600 10.5px/1.4 var(--mono);letter-spacing:.1em;color:var(--dim);flex-direction:row}
.secure svg{width:14px;height:14px;color:var(--growth)}
.processing{position:fixed;inset:0;z-index:120;background:rgba(3,5,9,.94);backdrop-filter:blur(10px);display:none;place-items:center;text-align:center}
.processing.on{display:grid}
.processing .rad{position:relative;width:220px;height:220px;margin:0 auto;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 26px,#4D8DFF26 26px 27px)}
.processing .rad::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 75%,#35D6EE55 95%,#35D6EE 100%);animation:sy-sweep 1.4s linear infinite}
.processing .rad::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 20px var(--cyan)}
.processing .log{margin-top:28px;font:500 13px/1.9 var(--mono);color:var(--muted);min-height:100px}
.processing .log div{opacity:0;transform:translateY(6px);transition:all .4s}
.processing .log div.in{opacity:1;transform:none}
.processing .log div b{color:var(--growth);font-weight:600}

/* ---------- thank you ---------- */
.lock{position:relative;width:260px;height:260px;margin:0 auto;display:grid;place-items:center}
.lock .ringx{position:absolute;inset:0;border-radius:50%;border:1px solid #35D6EE44}
.lock .ringx:nth-child(2){inset:30px;border-color:#35D6EE66}.lock .ringx:nth-child(3){inset:60px;border-color:#35D6EE88}
.lock .pulse{position:absolute;inset:60px;border-radius:50%;border:2px solid var(--cyan);animation:sy-ring 2.2s infinite}
.lock .core{position:relative;width:110px;height:110px;border-radius:50%;background:var(--grad);display:grid;place-items:center;box-shadow:0 0 60px #35D6EE88,inset 0 0 0 6px #ffffff22}
.lock .core svg{width:48px;height:48px;color:#04101F;stroke-dasharray:60;stroke-dashoffset:60;animation:sy-draw .9s .4s cubic-bezier(.2,.8,.2,1) forwards}
.orderno{display:inline-flex;gap:10px;align-items:center;margin-top:24px;font:600 12px/1 var(--mono);letter-spacing:.14em;color:var(--muted);border:1px solid var(--line2);padding:10px 14px;border-radius:99px;flex-direction:row}
.orderno b{color:var(--ink)}
.next .card{padding:26px}
.next .card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#4D8DFF14;border:1px solid #4D8DFF44;color:var(--blue);font:700 13px/1 var(--mono)}
.next .card h3{font-size:20px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:16px}
.cal span{aspect-ratio:1;border-radius:7px;display:grid;place-items:center;font:600 11px/1 var(--mono);color:var(--dim);border:1px solid var(--line)}
.cal span.ok{color:var(--ink);border-color:#4D8DFF55;cursor:pointer}
.cal span.ok:hover,.cal span.pick{background:var(--grad);color:#04101F;border-color:transparent}

/* ---------- account ---------- */
.acct{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.side{position:sticky;top:110px;padding:14px}
.side .who{display:flex;gap:12px;align-items:center;padding:10px 10px 18px;border-bottom:1px solid var(--line);margin-bottom:10px;flex-direction:row}
.side .who i{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--paper),#fff);display:grid;place-items:center;font:700 14px/1 var(--sans);color:var(--void);font-style:normal}
.side .who b{display:block;font:700 15px/1.2 var(--sans);color:var(--ink)}.side .who small{font:500 11px/1 var(--mono);color:var(--dim)}
.side button{display:flex;justify-content:space-between;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:12px 12px;font:600 14px/1 var(--sans);color:var(--muted);cursor:pointer;flex-direction:row}
.side button.on{color:var(--ink);background:#35D6EE10;box-shadow:inset 2px 0 0 var(--cyan)}
.side button em{font:600 10px/1 var(--mono);font-style:normal;color:var(--cyan)}
.tabp{display:none}.tabp.on{display:block;animation:sy-fade .4s forwards}
.otable{width:100%;border-collapse:collapse;font-size:14px}
.otable th{text-align:left;font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line2)}
.otable td{padding:16px 14px;border-bottom:1px solid var(--line);color:var(--text)}
.status{font:700 10px/1 var(--mono);letter-spacing:.12em;padding:5px 8px;border-radius:5px}
.status.ok{color:var(--growth);background:#3DD68C14;border:1px solid #3DD68C44}
.status.act{color:var(--cyan);background:#35D6EE14;border:1px solid #35D6EE44}
.status.prog{color:var(--amber);background:#C4922A14;border:1px solid #C4922A44}

@media (max-width:1080px){
  .pd .grid,.cartgrid,.cogrid,.acct{grid-template-columns:1fr}
  .stage,.summary,.side{position:relative;top:0}
  .shopgrid{grid-template-columns:1fr 1fr}.shopgrid .feat{grid-column:1/-1}
  .tl{grid-template-columns:1fr 1fr}.tl .rail{display:none}
}
@media (max-width:720px){
  .shopgrid,.tiers,.mastpick{grid-template-columns:1fr}
  .stage{min-height:440px}.stage .mag{width:230px}
  .feat .art .fan{transform:scale(1)}
  .tl{grid-template-columns:1fr}
  .otable{font-size:12.5px}.otable th,.otable td{padding:10px 8px}
  .otable .hide-m{display:none}
  .buyrow{flex-direction:column}
}

/* ============ LIVE SITE: Bricks header (Nav Menu element "sy-menu") ============ */
.nav .logo{text-decoration:none}
.sy-menu .bricks-nav-menu{gap:24px}
.sy-menu .bricks-nav-menu>li>a{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;padding:6px 0;transition:color .2s}
.sy-menu .bricks-nav-menu>li>a:hover,.sy-menu .bricks-nav-menu>li.current-menu-item>a{color:var(--ink)}
.sy-menu .bricks-nav-menu>li.current-menu-item>a{box-shadow:inset 0 -1px 0 var(--cyan)}
.sy-menu .bricks-mobile-menu-toggle{color:var(--ink);width:44px;height:44px;border:1px solid var(--line2);border-radius:10px;place-items:center;background:#ffffff08}
.sy-menu .bricks-mobile-menu-toggle .bar-top,.sy-menu .bricks-mobile-menu-toggle .bar-center,.sy-menu .bricks-mobile-menu-toggle .bar-bottom{background:var(--ink);width:18px;left:12px}
.sy-menu .bricks-mobile-menu-wrapper{background:rgba(5,8,12,.97)!important;backdrop-filter:blur(16px);padding:96px 28px 28px}
.sy-menu.show-mobile-menu .bricks-mobile-menu-wrapper{width:100%!important;left:0!important;right:0!important}
.sy-menu:not(.show-mobile-menu) .bricks-mobile-menu-wrapper{display:none!important}
.sy-menu .bricks-mobile-menu,.sy-menu .bricks-mobile-menu>li{background:transparent!important}
.sy-menu .bricks-mobile-menu>li>a{font:700 28px/1.3 var(--sans)!important;letter-spacing:-.03em;color:var(--ink)!important;padding:8px 0!important;border-bottom:1px solid var(--line);display:block}
.sy-menu.show-mobile-menu .bricks-mobile-menu-toggle{position:fixed;top:26px;right:26px;z-index:1001}
.nav .cart-btn{text-decoration:none}
@media (max-width:1080px){.sy-menu .bricks-nav-menu-wrapper{display:none}.sy-menu .bricks-mobile-menu-toggle{display:grid}}
@media (min-width:1081px){.sy-menu .bricks-mobile-menu-toggle{display:none!important}}

.nav{flex-wrap:nowrap}.nav-r{justify-content:flex-end}
@media (max-width:1080px){.sy-menu{order:3}.nav-r{margin-left:auto}}
.nav{left:0!important;right:0!important;margin-inline:auto;transform:none!important}
.nav:has(.show-mobile-menu){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.sy-menu .bricks-mobile-menu-wrapper::before{background:var(--void)!important;opacity:.97}
/* Bricks containers have a fixed default width (1100px) capped by max-width:100%; .wrap replaces the cap, so restore fluid width */
.brxe-container.wrap{width:100%}
.field-host{position:absolute;inset:0;pointer-events:none;z-index:0}
.field-host canvas{position:absolute;inset:0;width:100%;height:100%}
.spark .spark{width:100%;height:100%}
.spark path.l{fill:none!important}
/* Grid/flex children must be allowed to shrink below their content width (Bricks text elements otherwise push panels past the viewport) */
.split>*,.g2>*,.g3>*,.g4>*,.how>*,.cogrid>*,.cartgrid>*,.acct>*,.shopgrid>*,.tiers>*,.panel>*,.card>*{min-width:0}
.panel .brxe-div:has(>.soon){flex-wrap:wrap}
/* Importer splits "text + inline label" into sibling elements (block by default); keep them on one line like the demo */
.tile .v>*,.nm>*,.price>*,.pp>*,.meta b+*{display:inline!important;width:auto}
.tile .v{display:block}
/* Site-wide form fields (native forms, Fluent Forms, FluentCart checkout) in the SyTec field style */
form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),form select,form textarea{width:100%;font:500 15px/1.4 var(--sans);color:var(--ink);background:#070C14;border:1px solid var(--line2);border-radius:10px;padding:14px;outline:none;transition:border-color .2s,box-shadow .2s}
form input:focus,form select:focus,form textarea:focus{border-color:var(--cyan)!important;box-shadow:0 0 0 4px #35D6EE1a}
form input::placeholder,form textarea::placeholder{color:var(--dim)}
form textarea{min-height:120px}
/* Native Bricks Accordion styled as the demo FAQ */
.sy-faq{display:grid;gap:12px}
.sy-faq .accordion-item{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#0B111ACC,#070B11CC);transition:border-color .25s,box-shadow .25s}
.sy-faq .accordion-item.brx-open{border-color:#35D6EE55;box-shadow:0 0 30px -12px #35D6EE88}
.sy-faq .accordion-title-wrapper{padding:20px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.sy-faq .accordion-title,.sy-faq .accordion-title-wrapper h3,.sy-faq .accordion-title-wrapper .title{font:700 18px/1.3 var(--sans)!important;color:var(--ink)!important;margin:0;letter-spacing:-.01em}
.sy-faq .accordion-title-wrapper .icon{color:var(--cyan)}
.sy-faq .accordion-content-wrapper{padding:0 22px 20px;font-size:15px;line-height:1.65;color:var(--muted)}
/* ============ Fluent Forms in the SyTec style ============
   Traps: fields sit inside a <fieldset>; FF prints per-form inline CSS that outranks plain selectors,
   so selectors include form.frm-fluent-form and colours use !important. */
.sy-ff{width:100%}
.sy-ff form.frm-fluent-form fieldset{display:grid;grid-template-columns:1fr 1fr;gap:14px;border:0;padding:0;margin:0}
.sy-ff form.frm-fluent-form fieldset>.ff-el-group{margin:0!important}
.sy-ff form.frm-fluent-form fieldset>.ff-el-group:has(textarea),.sy-ff form.frm-fluent-form fieldset>.ff-el-group:has(.ff-el-form-check),.sy-ff form.frm-fluent-form fieldset>.ff_submit_btn_wrapper{grid-column:1/-1}
.sy-ff form.frm-fluent-form .ff-el-input--label label{font:600 10.5px/1 var(--mono)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)!important}
.sy-ff form.frm-fluent-form .ff-el-input--label.asterisk-right label:after{color:var(--coral)!important}
.sy-ff form.frm-fluent-form .ff-el-form-control{background:#070C14!important;color:var(--ink)!important;border:1px solid var(--line2)!important;border-radius:10px!important;padding:14px!important;font:500 15px/1.4 var(--sans)!important;box-shadow:none!important}
.sy-ff form.frm-fluent-form .ff-el-form-control:focus{border-color:var(--cyan)!important;box-shadow:0 0 0 4px #35D6EE1a!important}
.sy-ff form.frm-fluent-form .ff-el-form-check{display:inline-flex;margin:0 8px 8px 0!important}
.sy-ff form.frm-fluent-form .ff-el-form-check label{display:inline-flex!important;align-items:center;gap:8px;padding:11px 14px;border-radius:10px;border:1px solid var(--line2);background:#070C14;font:600 13px/1 var(--sans)!important;color:var(--muted)!important;cursor:pointer;transition:all .2s}
.sy-ff form.frm-fluent-form .ff-el-form-check input{accent-color:var(--cyan)}
.sy-ff form.frm-fluent-form .ff-el-form-check.ff_item_selected label,.sy-ff form.frm-fluent-form .ff-el-form-check label:has(input:checked){color:var(--ink)!important;border-color:var(--cyan);background:#35D6EE12;box-shadow:0 0 24px -6px #35D6EE88}
.sy-ff form.frm-fluent-form .ff-btn-submit{width:100%;background:var(--grad)!important;color:#04101F!important;border:0!important;border-radius:12px!important;padding:17px 24px!important;font:800 15px/1 var(--sans)!important;box-shadow:0 10px 40px -8px #4D8DFFaa!important;cursor:pointer}
.sy-ff .error.text-danger,.sy-ff .ff-el-is-error .text-danger{color:var(--coral)!important;font:500 12px/1.4 var(--sans)!important;margin-top:6px}
.sy-ff .ff-message-success,.sy-ff .sy-ff-ok{border:1px solid #35D6EE55!important;background:#35D6EE0d!important;color:var(--ink)!important;border-radius:14px;padding:20px 22px!important;font:600 16px/1.5 var(--sans);box-shadow:0 0 40px -10px #35D6EE55!important}
@media (max-width:720px){.sy-ff form.frm-fluent-form fieldset{grid-template-columns:1fr}}

/* ==== FLUENTCART → SyTec tokens (T9 Step 3). Token overrides only: FluentCart's own markup, no template edits.
   Store pages: shop 118, cart 116, checkout 115, thank-you 117, account 119; products = post type fluent-products (/item/<slug>/). ==== */
:root{
  --fct-primary-text-color:var(--ink);--fct-secondary-text-color:var(--muted);--fct-heading-color:var(--ink);
  --fct-primary-bg-color:#4D8DFF;--fct-secondary-bg-color:#ffffff0a;--fct-border-color:var(--line2);--fct-divider-color:var(--line);
  --fct-active-border-color:#4D8DFF;--fct-secondary-active-border-color:#35D6EE;--fct-primary-active-text-color:#35D6EE;
  --fct-btn-bg-color:#4D8DFF;--fct-btn-text-color:#04101F;--fct-btn-border-color:transparent;
  --fct-secondary-btn-bg-color:#ffffff08;--fct-secondary-btn-border-color:var(--line2);--fct-secondary-btn-hover-bg-color:#ffffff14;--fct-secondary-btn-text-color:var(--ink);
  --fct-input-bg-color:#ffffff08;--fct-input-text-color:var(--ink);--fct-input-placeholder-text-color:var(--dim);--fct-input-disabled-bg-color:#ffffff05;--fct-input-disabled-bg:#ffffff05;
  /* the hard-coded whites */
  --fct-card-bg:#0B111A;--fct-checkout-summary-bg-color:#0B111A;--fct-checkout-payment-method-bg-color:#ffffff06;--fct-checkout-radio-bg-color:transparent;--fct-checkout-radio-dot-bg-color:#04101F;
  --fct-checkout-checkbox-bg:transparent;--fct-checkout-address-wrapper-bg:#0B111A;--fct-checkout-address-modal-bg:#0B111A;--fct-checkout-shipping-methods-bg:#0B111A;
  --fct-cart-drawer-bg:#070B11;--fct-cart-drawer-border-color:var(--line2);--fct-cart-drawer-primary-text-color:var(--ink);--fct-cart-drawer-secondary-text-color:var(--muted);
  --fct-cart-drawer-footer-action-bg-color:#070B11;--fct-cart-drawer-open-btn-bg-color:#0B111A;--fct-cart-drawer-quantity-bg-color:transparent;--fct-cart-drawer-quantity-btn-bg:#ffffff0a;--fct-cart-drawer-quantity-btn-hover-bg:#ffffff14;
  --fct-cart-drawer-close-btn-color:var(--ink);--fct-cart-drawer-badge-bg-color:#4D8DFF;--fct-cart-drawer-badge-text-color:#04101F;
  --fct-cart-item-delete-btn-bg-color:transparent;--fct-cart-item-delete-btn-hover-bg-color:#FF6B5722;--fct-view-cart-btn-bg-color:transparent;--fct-view-cart-drawer-btn-hover-bg:#ffffff0a;
  --fct-single-product-qty-bg:#ffffff0a;--fct-single-product-qty-text-color:var(--ink);
  --fct-shop-input-bg:#ffffff08;--fct-shop-checkmark-bg:transparent;--fct-shop-paginator-bg:transparent;--fct-shop-paginator-items-hover-bg:#ffffff0a;--fct-shop-view-switcher-active-bg:#ffffff14;
  --fct-select-dropdown-bg:#0B111A;--fct-select-option-hover-bg:#ffffff0a;
  --fct-customer-dashboard-nav-active-bg-color:#ffffff0a;--fct-customer-dashboard-nav-active-text-color:var(--ink);--fct-customer-dashboard-nav-active-bar-color:#4D8DFF;--fct-customer-dashboard-nav-text-color:var(--muted);
  --fct-customer-dashboard-logout-btn-bg-color:#FF6B5714;--fct-customer-dashboard-logout-btn-hover-bg-color:#FF6B5726;--fct-customer-dashboard-logout-btn-text-color:#FF6B57;
  --fct-modal-checkout-border-radius:var(--r);
}
/* clear the fixed glass header. Store pages render in article#brx-content (no <main>); products in main#brx-content */
body.single-fluent-products #brx-content:has(>.fct-single-product-page),body:is(.page-id-115,.page-id-116,.page-id-119) #brx-content{padding:130px clamp(16px,4vw,40px) 80px;max-width:1280px;margin-inline:auto;width:100%;box-sizing:border-box}
body.single-fluent-products #brx-content:has(>.fct-single-product-page)>p{color:var(--text);max-width:760px}
body:is(.page-id-115,.page-id-116,.page-id-119) #brx-content>h1{color:var(--ink);font-weight:800;letter-spacing:-.03em;margin-bottom:28px}
/* panels read as SyTec glass */
.fct-product-gallery-wrapper,.fct-product-card,[class*="fct-checkout-summary"],.fct_auth_wrap,.fct-not-found-container{background:linear-gradient(180deg,#0B111ACC,#070B11CC);border:1px solid var(--line);border-radius:var(--r)}
/* no product photos yet: dim the placeholders instead of bright white tiles; hide empty variant thumbs */
.fct-product-card-image-wrap,.fct-product-gallery-wrapper{background:#0B111A}
img.fct-product-card-image[src*="placeholder"],.fct-product-gallery-wrapper img[src*="placeholder"]{opacity:.18;filter:invert(1)}
.fct-product-variant-image:not(:has(img:not([src*="placeholder"]))){display:none}
/* primary actions get the signal gradient; secondary stay ghost */
.fct-single-product-page .fluent-cart-direct-checkout-button,[data-fluent-cart-direct-checkout-button],.fct-checkout-modal-content button[type=submit],.fluent-cart-checkout-page button[type=submit],[class*="fct-checkout"] .fct-button-primary{background:var(--grad)!important;color:#04101F!important;border:0!important;font-weight:700;box-shadow:0 10px 40px -8px #4D8DFFaa}
/* variant pills + prices: mono labels, cyan when chosen */
.fct-product-variant-item,.fct-product-variants [class*="variant"]{background:#ffffff06;color:var(--text)}
.fct-product-price,.fct-product-item-price,[class*="fct-"][class*="price"]{font-family:var(--mono);color:var(--ink)}
.fct-product-meta,.fct-shop-filter-form label,[class*="fct-"] label{color:var(--muted)}
.sy-sample{display:inline-block;font:700 10px/1 var(--mono);letter-spacing:.14em;padding:5px 7px;margin-right:6px;border-radius:5px;border:1px solid #C4922A88;color:#C4922A}
.fct-single-product-page+*,.fct-single-product-page ~ .fct-product-description{max-width:1280px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px);color:var(--text)}
/* product description: one left edge for every block under the product row */
body.single-fluent-products #brx-content:has(>.fct-single-product-page)>:not(.fct-single-product-page){padding-inline:0!important;margin-inline:0!important;max-width:760px}
/* Bricks trap 11: the importer turns <button> into span.brxe-button, so every demo "x button" rule needs a .brxe-button twin */
.filters .brxe-button{font:600 12px/1 var(--mono);letter-spacing:.1em;color:var(--muted);background:#070C14;border:1px solid var(--line2);padding:11px 14px;border-radius:99px;cursor:pointer;transition:all .2s;min-height:0;line-height:1}
.filters .brxe-button.on{color:#04101F;background:var(--grad);border-color:transparent;box-shadow:0 0 20px -4px #35D6EE99}
.filters .brxe-button:hover:not(.on){color:var(--ink);border-color:#35D6EE55}
/* Bricks trap 12: a .wrap inside a section can shrink to its content; the demo's block .wrap is always full width */
.brxe-section>.wrap{width:100%}

/* ==== PRODUCT TEMPLATES: FluentCart's native buy section (#buyslot) dressed as the demo's buy box (T9) ==== */
#buyslot .fct_buy_section{display:flex;flex-direction:column;gap:18px}
/* variants → the demo's card picker (.mastpick look) */
#buyslot .fct-product-variants{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
#buyslot .fct-product-variant-item{padding:14px 12px;border-radius:12px;border:1px solid var(--line2);background:#070C14;cursor:pointer;transition:all .2s;box-shadow:none}
#buyslot .fct-product-variant-item:hover{border-color:#35D6EE55}
#buyslot .fct-product-variant-item.selected{border-color:var(--cyan);background:#35D6EE10;box-shadow:0 0 0 3px #35D6EE14,0 0 28px -8px #35D6EEaa}
#buyslot .fct-product-variant-image{display:none}
#buyslot .fct-product-variant-title{font:400 19px/1.1 var(--serif);color:var(--ink);letter-spacing:0;background:none;padding:0}
#buyslot .fct-product-variant-text::after{display:block;margin-top:6px;font:600 10px/1.3 var(--mono);letter-spacing:.12em;color:var(--dim)}
#buyslot .fct-product-variant-item.selected .fct-product-variant-text::after{color:var(--cyan)}
/* big price like the demo's .pricewrap, with the test-mode note */
#buyslot .fct-product-item-price{font:800 52px/1 var(--sans);letter-spacing:-.04em;color:var(--ink);display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
#buyslot .fct-product-item-price.is-hidden{display:none}
#buyslot .fct-product-item-price::after{content:"SAMPLE PRICE · TEST MODE";font:600 10px/1.5 var(--mono);letter-spacing:.12em;color:var(--amber);padding-bottom:6px}
/* one cover story / plan / download per order: no quantity stepper */
#buyslot .fct-product-quantity-container{display:none}
#buyslot .fct-product-buttons-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#buyslot .fct-product-buttons-wrap>*{min-height:54px;border-radius:12px;font:700 15px/1 var(--sans);display:flex;align-items:center;justify-content:center}
#buyslot .fluent-cart-add-to-cart-button{background:#ffffff08;color:var(--ink);border:1px solid var(--line2)}
@media (max-width:560px){#buyslot .fct-product-buttons-wrap{grid-template-columns:1fr}#buyslot .fct-product-item-price{font-size:42px}}
/* Cover Story (product 110): the demo's subtitles per masthead */
#buyslot [data-product-id="110"] [data-cart-id="1"] .fct-product-variant-text::after{content:"MAGAZINE · NATIONAL"}
#buyslot [data-product-id="110"] [data-cart-id="2"] .fct-product-variant-text::after{content:"MAGAZINE · LOCAL LEADERS"}
#buyslot [data-product-id="110"] [data-cart-id="3"] .fct-product-variant-text::after{content:"JOURNAL · LAUNCHING"}
/* trap 11 again: the cover thumbnails were <button>s */
.thumbs .brxe-button{width:46px;height:60px;border-radius:4px;border:1px solid var(--line2);cursor:pointer;opacity:.55;transition:all .25s;padding:0;min-height:0}
.thumbs .brxe-button.on{opacity:1;border-color:var(--cyan);box-shadow:0 0 16px -2px #35D6EE99}
#buyslot .fct-product-variant-text,#buyslot .variant-content{background:none;padding:0}
/* Bricks trap 13: no native <table>, so the importer drops it as "code". Comparison tables ship as a role=table div grid */
.cmpg{display:grid;min-width:520px;font-size:14px}
.cmpg .cr{display:grid;grid-template-columns:1.6fr 1fr 1fr;flex-direction:row}
.cmpg .cc{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--text);align-self:stretch}
.cmpg .ch .cc{font:600 10.5px/1.3 var(--mono);letter-spacing:.14em;color:var(--muted)}
.cmpg .cc.y{color:var(--cyan);font-weight:700}
.cmpg .cc.n{color:var(--dim)}
.cmpg .cr:not(.ch):hover .cc{background:#ffffff05}
@media (max-width:640px){.cmpg{font-size:12.5px}.cmpg .cc{padding:10px 8px}}
.cmpg .cc b{display:inline;font-weight:700}
/* Department template (products 111/112): FluentCart's Monthly/Yearly tabs → the demo's .toggle pill */
#buyslot .fct-product-tab-nav{display:inline-flex;position:relative;gap:0;padding:4px;border-radius:12px;border:1px solid var(--line2);background:#070C14;width:auto}
#buyslot .fct-product-tab-nav .tab-active-bar{display:none}
#buyslot .fct-product-tab-nav-item{font:600 13px/1 var(--sans);letter-spacing:0;color:var(--muted);padding:10px 16px;border-radius:9px;cursor:pointer;transition:all .2s;border:0}
#buyslot .fct-product-tab-nav-item.active{color:#04101F;background:var(--grad);box-shadow:0 0 20px -4px #35D6EE99}
#buyslot .fct-product-tab-nav-item[data-tab=yearly]::after{content:"2 MO FREE";margin-left:6px;font:700 10px/1 var(--mono);color:var(--growth)}
#buyslot .fct-product-tab-nav-item[data-tab=yearly].active::after{color:#04101F}
/* one plan per tab, so the single variant card is redundant: the tab IS the choice */
#buyslot .fct_price_type_subscription:only-child{display:none}
#buyslot .fct-product-tab-content{margin:0}
#buyslot .fct-product-payment-type{font:800 40px/1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
#buyslot .fct-product-payment-type.is-hidden{display:none}
#buyslot .fct-product-buttons-wrap:has(>:only-child){grid-template-columns:1fr}
.tier{display:block;color:inherit;text-decoration:none}
#buyslot .fct-product-tab~.fct-product-item-price{display:none}
/* plan pages: a tab pane holding a single plan is empty once its card is hidden, so drop the pane; keep FluentCart's casing off our labels */
#buyslot .fct-product-tab-content:not(:has(.fct-product-variant-item+.fct-product-variant-item)){display:none}
#buyslot .fct-product-buttons-wrap>*{text-transform:none}
#buyslot .fct-product-tab-nav{margin-bottom:0}#buyslot .fct-product-buttons-wrap{margin-top:4px}
/* download templates (113/114): FluentCart's buy box shows no price for a single-variant product, so the native
   fct-price-range element sits above it, styled as the demo's .pricewrap */
#buyslot>.brxe-fct-price-range{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:22px 0 18px;font:800 52px/1 var(--sans);letter-spacing:-.04em;color:var(--ink)}
#buyslot>.brxe-fct-price-range *{font:inherit;color:inherit;letter-spacing:inherit}
#buyslot>.brxe-fct-price-range::after{content:"ONE-TIME DOWNLOAD\A SAMPLE PRICE · TEST MODE";white-space:pre;font:600 10px/1.5 var(--mono);letter-spacing:.12em;color:var(--amber);padding-bottom:6px}
/* thank-you (page 117): FluentCart's receipt (an email template with inline colours) inside the ORDER SUMMARY glass panel.
   Its green "Purchase Successful!" header repeats "Locked in." and is a second <h1>, so it goes. */
.sy-receipt .fct-thank-you-page-header{display:none}
.sy-receipt .fct-thank-you-page-body{background:transparent!important;padding:6px 0 0!important;border:0;box-shadow:none}
.sy-receipt .fct-thank-you-page-body *{background-color:transparent!important;color:var(--text)!important;border-color:var(--line)!important;font-family:var(--sans)}
.sy-receipt .fct-thank-you-page-body :is(h1,h2,h3,h4,strong,b){color:var(--ink)!important}
.sy-receipt .fct-thank-you-page-body a{color:var(--cyan)!important}
.sy-receipt .fct-thank-you-page-body :is(th,thead td){font:600 10px/1.3 var(--mono)!important;letter-spacing:.14em;color:var(--muted)!important;text-transform:uppercase}
.sy-receipt .fct-thank-you-page-body :is(td,span)[style*="text-align: right"],.sy-receipt .fct-thank-you-page-body td:last-child{font-family:var(--mono)!important}
.sy-receipt .fct-thank-you-page-body [style*="color"]:is(p,span,div):not(:has(*)){color:var(--muted)!important}
.sy-receipt .fct-thank-you-page-footer{display:flex;gap:10px;justify-content:flex-start;margin-top:18px;flex-wrap:wrap}
.sy-receipt .fct-thank-you-page-footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:12px;font:700 14px/1 var(--sans);text-decoration:none}
.sy-receipt .fct-thank-you-page-view-order-button{background:var(--grad)!important;color:#04101F!important}
.sy-receipt .fct-thank-you-page-download-receipt-button{background:#ffffff08!important;color:var(--ink)!important;border:1px solid var(--line2)}

/* ==== BLOG (page 176 + Blog Post template 95), 2026-09-24 ==== */
.bloggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.bcard{display:flex;flex-direction:column;padding:0;overflow:hidden;color:inherit;text-decoration:none;transition:transform .25s,border-color .25s}
.bcard:hover{transform:translateY(-3px);border-color:#35D6EE55}
.bcard .bthumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-bottom:1px solid var(--line)}
.bcard .bthumb:not([src]),.bcard .bthumb[src=""]{display:none}
.bcard .bbody{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.bcard .top .k{font:600 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--cyan);text-transform:uppercase}
.bcard .btitle{font:700 21px/1.25 var(--sans);letter-spacing:-.02em;color:var(--ink);margin:0}
.bcard .bexcerpt{color:var(--muted);font-size:15px;line-height:1.55;margin:0}
.bcard .go{margin-top:auto;padding-top:6px;font:600 12px/1 var(--mono);letter-spacing:.1em;color:var(--cyan)}
@media (max-width:560px){.bloggrid{grid-template-columns:1fr}}
/* article hero image under the headline */
.post-hero{display:block;width:100%;height:auto;margin-top:34px;border-radius:var(--r);border:1px solid var(--line);box-shadow:0 30px 80px -30px #000c}
/* post body: WP wraps the_content in .brxe-post-content, so ".prose > * + *" never reached the paragraphs (they ran together).
   Space the wrapper's children, and give lists back their markers (Bricks' reset removes them). */
.prose .brxe-post-content>*+*{margin-top:1.1em}
.prose .brxe-post-content>h2{margin-top:2em}
.prose .brxe-post-content>h3{margin-top:1.6em}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{display:list-item}
.prose li::marker{color:var(--cyan)}
.prose li>ul,.prose li>ol{margin-top:.45em}
.prose .dek{font-size:20px;line-height:1.6;color:var(--muted)}
.prose .post-byline{font:600 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.prose .post-byline strong{color:var(--cyan);font-weight:600}
/* post tables + pull quotes (editor-written posts) */
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;display:block;overflow-x:auto}
.prose th,.prose td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font:600 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:#ffffff05}
.prose td{color:var(--text)}
.prose blockquote{margin-left:0;padding:4px 0 4px 20px;border-left:2px solid var(--cyan);color:var(--ink);font:400 22px/1.45 var(--serif)}
/* phones: post tables restack into one card per row, each value labelled by its column (labels set by single-post.js).
   Mobile gate: a table hidden in a sideways-scroll box reads as content bleeding off the page. */
@media (max-width:640px){
  .prose .tblwrap{overflow:visible}
  .prose table.sy-stack{display:block;overflow:visible;border:0}
  .prose table.sy-stack thead{display:none}
  .prose table.sy-stack tbody,.prose table.sy-stack tr{display:block}
  .prose table.sy-stack tr{border:1px solid var(--line);border-radius:12px;padding:6px 14px;margin:0 0 12px;background:#ffffff05}
  .prose table.sy-stack tr:has(th):not(:has(td)){display:none}
  .prose table.sy-stack td,.prose table.sy-stack th{display:block;border:0;padding:8px 0}
  .prose table.sy-stack td+td{border-top:1px solid var(--line)}
  .prose table.sy-stack td[data-label]::before{content:attr(data-label);display:block;margin-bottom:4px;font:600 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
}
@media (max-width:640px){.prose table.sy-stack{min-width:0!important;width:100%!important;max-width:100%}.prose table.sy-stack td,.prose table.sy-stack th{white-space:normal;min-width:0}}

/* a11y heading order: shop card titles are <h2 class="h3"> (right level under the h1, same look as h3) */
.card h2.h3{margin-top:14px}
.pcard h2.h3{margin-top:14px;font-size:21px}
.next .card h2.h3{font-size:20px}

/* ============ LIVE SITE: dropdown sub-menus in the header Nav Menu ("Services" > "Website Reviews") ============ */
.sy-menu .bricks-nav-menu .brx-submenu-toggle{gap:6px}
.sy-menu .bricks-nav-menu>li>.brx-submenu-toggle>a{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;padding:6px 0;transition:color .2s}
.sy-menu .bricks-nav-menu .brx-submenu-toggle button{color:var(--muted);padding:0;transition:color .2s,transform .2s}
.sy-menu .bricks-nav-menu .brx-submenu-toggle button svg{width:10px!important;height:10px!important}
.sy-menu .bricks-nav-menu>li:hover>.brx-submenu-toggle>a,.sy-menu .bricks-nav-menu>li:hover>.brx-submenu-toggle button,.sy-menu .bricks-nav-menu>li.current-menu-ancestor>.brx-submenu-toggle>a{color:var(--ink)}
.sy-menu .bricks-nav-menu>li.current-menu-ancestor>.brx-submenu-toggle>a{box-shadow:inset 0 -1px 0 var(--cyan)}
.sy-menu .bricks-nav-menu>li:hover>.brx-submenu-toggle button,.sy-menu .bricks-nav-menu>li.open>.brx-submenu-toggle button{transform:rotate(180deg)}
.sy-menu .bricks-nav-menu .sub-menu{min-width:230px;margin-top:14px;padding:8px;background:rgba(7,11,17,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line2);border-radius:14px;box-shadow:0 24px 60px -12px #000000cc,0 0 0 1px #35D6EE14 inset}
.sy-menu .bricks-nav-menu .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.sy-menu .bricks-nav-menu .sub-menu li{background:transparent}
.sy-menu .bricks-nav-menu .sub-menu a{display:block;padding:13px 14px;border-radius:9px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .2s,background .2s}
.sy-menu .bricks-nav-menu .sub-menu a:hover,.sy-menu .bricks-nav-menu .sub-menu .current-menu-item>a{color:var(--ink);background:#35D6EE0f}
.sy-menu .bricks-nav-menu .sub-menu .current-menu-item>a{box-shadow:inset 2px 0 0 var(--cyan)}
/* mobile panel: parent styled like the other top-level items, children indented beneath it */
.sy-menu .bricks-mobile-menu>li>.brx-submenu-toggle{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.sy-menu .bricks-mobile-menu>li>.brx-submenu-toggle>a{font:700 28px/1.3 var(--sans)!important;letter-spacing:-.03em;color:var(--ink)!important;padding:8px 0!important}
.sy-menu .bricks-mobile-menu>li>.brx-submenu-toggle button{color:var(--ink);width:44px;height:44px;display:grid;place-items:center}
.sy-menu .bricks-mobile-menu>li>.brx-submenu-toggle button svg{width:16px!important;height:16px!important}
.sy-menu .bricks-mobile-menu .sub-menu{background:transparent!important;padding:6px 0 10px 16px;border-left:1px solid #35D6EE44;margin:8px 0 6px}
.sy-menu .bricks-mobile-menu .sub-menu a{font:500 13px/1 var(--mono)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)!important;padding:12px 0!important;display:block}