/* ==========================================================================
   A777 APP — "CABINET" design system
   Built from the logo's own colours: lacquered felt green + brass + ivory.
   felt #0A1410 · lacquer #0F1D17 · brass #C8A24A · emerald #12B76A · bone #F2EDE1
   Type: Bodoni Moda (display) / Outfit (body) / Space Mono (data)
   Class prefix: cb*   — shares nothing with a* or nv*
   ========================================================================== */

:root{
  --felt:#0A1410; --felt2:#07100C; --lacq:#0F1D17; --lacq2:#142A20;
  --brass:#C8A24A; --brass-hi:#E8CE8A; --brass-lo:#8A6E2C;
  --em:#12B76A; --em-hi:#3DDC91; --em-lo:#0A7A45;
  --bone:#F2EDE1; --mu:#9DB0A4; --dim:#7E9186;
  --rule:rgba(200,162,74,.26); --rule2:rgba(200,162,74,.5);
  --hair:rgba(242,237,225,.13);

  --gBrass:linear-gradient(135deg,#E8CE8A 0%,#C8A24A 42%,#A6863A 100%);
  --gMetal:linear-gradient(100deg,#8A6E2C 0%,#E8CE8A 24%,#C8A24A 44%,#F3E3B6 60%,#A4832F 82%,#D8B76A 100%);
  --gEm:linear-gradient(135deg,#3DDC91 0%,#12B76A 50%,#119E5C 100%);
  --gTx:linear-gradient(96deg,#F2EDE1 0%,#E8CE8A 46%,#C8A24A 100%);

  --sh1:0 2px 10px rgba(0,0,0,.42);
  --sh2:0 16px 44px rgba(0,0,0,.56);
  --sh3:0 40px 90px rgba(0,0,0,.68);
  --glB:0 0 30px rgba(200,162,74,.34);
  --glE:0 0 30px rgba(18,183,106,.34);

  --d:'Bodoni Moda',Didot,'Times New Roman',serif;
  --b:'Outfit',ui-sans-serif,system-ui,sans-serif;
  --m:'Space Mono',ui-monospace,monospace;

  --r1:3px; --r2:6px; --r3:10px; --rp:999px;
  --e:cubic-bezier(.2,.8,.24,1); --e2:cubic-bezier(.5,0,.15,1);
  --f:.2s var(--e); --n:.42s var(--e); --sl:.75s var(--e);
  --max:1240px; --nav:70px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:92px}
body{margin:0;background:var(--felt);color:var(--bone);font-family:var(--b);font-size:16px;
  line-height:1.66;font-weight:350;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.02;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}
::selection{background:rgba(200,162,74,.34);color:var(--bone)}

/* ---------------- felt + light ---------------- */
.cbFelt{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(74% 52% at 50% -8%,rgba(18,183,106,.12),transparent 62%),
    radial-gradient(48% 40% at 92% 22%,rgba(200,162,74,.09),transparent 66%),
    radial-gradient(60% 46% at 4% 74%,rgba(18,183,106,.07),transparent 66%)}
.cbWeave{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px)}
.cbGrain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.26;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}

/* ---------------- shell ---------------- */
.cbW{width:min(100% - 40px,var(--max));margin-inline:auto;position:relative;z-index:2}
.cbS{position:relative;padding:clamp(64px,8vw,118px) 0;z-index:2}
.cbS--sm{padding:clamp(40px,5vw,70px) 0}
main{position:relative;z-index:2}

/* brass hairline rule */
.cbRule{height:1px;background:linear-gradient(90deg,transparent,var(--rule2) 12%,var(--rule2) 88%,transparent);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e)}
.cbRule.on{transform:scaleX(1)}

/* ---------------- type ---------------- */
.cbKick{display:inline-flex;align-items:center;gap:11px;font-family:var(--m);font-size:.66rem;
  font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--brass)}
.cbKick::before{content:"";width:26px;height:1px;background:var(--brass);opacity:.7}
.cbH1{font-family:var(--d);font-size:clamp(40px,8.4vw,104px);line-height:.96;letter-spacing:-.028em;
  font-weight:500}
.cbH2{font-family:var(--d);font-size:clamp(30px,5vw,60px);line-height:1.02;letter-spacing:-.024em;
  font-weight:500}
.cbH3{font-family:var(--b);font-size:clamp(17px,1.7vw,21px);font-weight:600;letter-spacing:-.012em;
  line-height:1.28}
.cbIt{font-style:italic;font-weight:400}
.cbBr{background:var(--gTx);-webkit-background-clip:text;background-clip:text;color:transparent}
.cbLd{color:var(--mu);font-size:clamp(14.6px,1.1vw,17px);line-height:1.74;max-width:60ch;font-weight:350}
.cbMu{color:var(--mu)}
.cbMono{font-family:var(--m);font-variant-numeric:tabular-nums}
.cbCen{text-align:center}
.cbCen .cbLd{margin-inline:auto}
.cbHd{display:grid;gap:16px;justify-items:start;margin-bottom:clamp(34px,4vw,56px)}
.cbCen.cbHd{justify-items:center}

/* ---------------- buttons ---------------- */
.cbB{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--m);font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  padding:16px 26px;border-radius:var(--r1);cursor:pointer;white-space:nowrap;overflow:hidden;
  min-height:48px;transition:transform var(--f),box-shadow var(--f),color var(--f),background var(--f)}
.cbB svg{width:16px;height:16px;flex:none}
.cbB--pr{background:var(--gBrass);color:#1A1206;box-shadow:var(--sh1),inset 0 1px 0 rgba(255,255,255,.42)}
.cbB--pr:hover{transform:translateY(-2px);box-shadow:var(--sh2),var(--glB),inset 0 1px 0 rgba(255,255,255,.5)}
.cbB--em{background:var(--gEm);color:#04170D;box-shadow:var(--sh1),inset 0 1px 0 rgba(255,255,255,.32)}
.cbB--em:hover{transform:translateY(-2px);box-shadow:var(--sh2),var(--glE)}
.cbB--gh{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--rule2)}
.cbB--gh:hover{background:rgba(200,162,74,.09);box-shadow:inset 0 0 0 1px var(--brass);transform:translateY(-2px)}
.cbB--lg{padding:19px 34px;font-size:.8rem}
.cbB--sm{padding:12px 18px;font-size:.68rem;min-height:44px}
.cbB--blk{width:100%}
.cbB:active{transform:translateY(0) scale(.99)}
/* brass sweep */
.cbB--pr::after,.cbB--em::after{content:"";position:absolute;top:0;left:-60%;width:36%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .62s var(--e)}
.cbB--pr:hover::after,.cbB--em:hover::after{left:130%}
.cbRip{position:absolute;border-radius:50%;transform:scale(0);background:rgba(0,0,0,.22);
  animation:cbRip .6s var(--e2) forwards;pointer-events:none}
@keyframes cbRip{to{transform:scale(2.6);opacity:0}}

/* ---------------- header ---------------- */
.cbNav{position:fixed;top:0;left:0;right:0;z-index:60;
  border-bottom:1px solid transparent;transition:background var(--n),border-color var(--n),backdrop-filter var(--n)}
.cbNav::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gMetal);
  background-size:220% 100%;animation:cbShift 9s linear infinite}
@keyframes cbShift{to{background-position:220% 0}}
.cbNav.is-stuck{background:rgba(7,16,12,.92);border-bottom-color:var(--rule);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.cbNav-in{display:flex;align-items:center;gap:20px;height:var(--nav)}
.cbLogo{display:inline-flex;align-items:center;flex:none;padding-block:8px}
.cbLogo img{height:28px;width:auto}
.cbMenu{display:flex;align-items:center;gap:2px;margin-left:auto}
.cbMenu a{position:relative;display:inline-flex;align-items:center;gap:6px;padding:13px 13px;
  font-family:var(--m);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);
  transition:color var(--f)}
.cbMenu a i{font-style:normal;font-size:.56rem;color:var(--brass);opacity:.6}
.cbMenu a:hover{color:var(--bone)}
.cbMenu a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform var(--n)}
.cbMenu a:hover::after{transform:scaleX(1);transform-origin:left}
.cbMenu a[aria-current="page"]{color:var(--bone)}
.cbMenu a[aria-current="page"]::after{transform:scaleX(1)}
.cbBurg{display:none;width:46px;height:46px;margin-left:auto;flex:none;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  box-shadow:inset 0 0 0 1px var(--rule2);border-radius:var(--r1)}
.cbBurg i{display:block;width:17px;height:1.5px;background:var(--bone);transition:transform var(--f),opacity var(--f)}
.cbBurg[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.cbBurg[aria-expanded="true"] i:nth-child(2){opacity:0}
.cbBurg[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.cbDrw{position:fixed;inset:0;z-index:59;visibility:hidden;pointer-events:none}
.cbDrw-sc{position:absolute;inset:0;background:rgba(4,9,7,.78);opacity:0;transition:opacity var(--n)}
.cbDrw-p{position:absolute;top:0;right:0;bottom:0;width:min(370px,88vw);padding:92px 26px 30px;
  background:var(--lacq);border-left:1px solid var(--rule);transform:translateX(102%);
  transition:transform var(--sl);display:flex;flex-direction:column;overflow-y:auto}
.cbDrw.on{visibility:visible;pointer-events:auto}
.cbDrw.on .cbDrw-sc{opacity:1}
.cbDrw.on .cbDrw-p{transform:none}
.cbDrw-p a.cbLnk{display:flex;align-items:baseline;gap:14px;padding:17px 2px;
  border-bottom:1px solid var(--hair);color:var(--bone);
  opacity:0;transform:translateX(20px);transition:opacity .42s var(--e),transform .42s var(--e)}
.cbDrw-p a.cbLnk b{font-family:var(--d);font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
.cbDrw-p a.cbLnk i{font-family:var(--m);font-style:normal;font-size:.6rem;color:var(--brass);
  letter-spacing:.16em}
.cbDrw.on .cbDrw-p a.cbLnk{opacity:1;transform:none}
.cbDrw-p .cbB{margin-top:26px}

/* ---------------- reveal ---------------- */
.cbR{opacity:0;transform:translateY(20px);
  transition:opacity .74s var(--e),transform .74s var(--e);transition-delay:var(--dl,0ms)}
.cbR.on{opacity:1;transform:none}
.cbR[data-rv="left"]{transform:translateX(-26px)}
.cbR[data-rv="right"]{transform:translateX(26px)}
.cbR.on[data-rv]{transform:none}

/* ==========================================================================
   HERO — editorial split with cabinet window
   ========================================================================== */
.cbHero{position:relative;padding-top:calc(var(--nav) + clamp(40px,6vw,84px));
  padding-bottom:clamp(50px,7vw,96px)}
.cbHero-g{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(34px,5vw,74px);align-items:center}
.cbHero-l{display:grid;gap:24px;justify-items:start}
.cbCta{display:flex;flex-wrap:wrap;gap:12px}
.cbSeals{display:flex;flex-wrap:wrap;gap:20px;padding-top:6px}
.cbSeals span{display:inline-flex;align-items:center;gap:8px;font-family:var(--m);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.cbSeals svg{width:13px;height:13px;color:var(--em);flex:none}

/* cabinet window: brass frame around the device */
.cbCab{position:relative;display:grid;place-items:center;padding:clamp(18px,2.4vw,30px)}
.cbCab::before{content:"";position:absolute;inset:0;border-radius:var(--r3);
  background:var(--gMetal);background-size:220% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;padding:1.5px;animation:cbShift 12s linear infinite}
.cbCab::after{content:"";position:absolute;inset:9px;border-radius:var(--r2);
  box-shadow:inset 0 0 0 1px rgba(200,162,74,.2);pointer-events:none}
.cbCab-in{position:relative;width:100%;padding:clamp(20px,3vw,34px) clamp(16px,2.4vw,28px);
  background:linear-gradient(168deg,rgba(20,42,32,.9),rgba(7,16,12,.96));
  border-radius:var(--r2);display:grid;place-items:center;box-shadow:var(--sh3)}
.cbCab-lamp{position:absolute;top:-1px;left:22%;right:22%;height:2px;border-radius:2px;
  background:var(--brass-hi);box-shadow:0 0 22px 3px rgba(232,206,138,.55)}

/* ---------------- device ---------------- */
.cbPhone{position:relative;width:min(258px,62%)}
.cbPhone-b{position:relative;border-radius:clamp(24px,7%,40px);padding:3px;
  background:linear-gradient(150deg,#C9B57E,#4A3F22 22%,#E8DBAE 42%,#3B331B 64%,#B5A06A 100%);
  box-shadow:0 0 0 .5px rgba(255,255,255,.2),var(--sh3),inset 0 0 0 .5px rgba(255,255,255,.16)}
.cbPhone-i{position:relative;border-radius:clamp(21px,6.2%,36px);padding:5px;background:#050907}
/* the screen carries the ratio, so the source is never cropped */
.cbPhone-s{position:relative;aspect-ratio:512/908;border-radius:clamp(17px,5.2%,31px);
  overflow:hidden;background:var(--lacq)}
.cbPhone-s img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity .7s var(--e)}
.cbPhone-s img.on{opacity:1}
.cbPhone-g{position:absolute;inset:5px;z-index:3;pointer-events:none;overflow:hidden;
  border-radius:clamp(17px,5.2%,31px)}
.cbPhone-g::before{content:"";position:absolute;top:-60%;left:-45%;width:64%;height:220%;
  transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13) 46%,rgba(255,255,255,.05) 58%,transparent);
  animation:cbSheen 9s var(--e2) infinite}
@keyframes cbSheen{0%,66%{transform:translateX(-40%) rotate(20deg)}
  94%,100%{transform:translateX(340%) rotate(20deg)}}
.cbPips{display:flex;justify-content:center;gap:7px;margin-top:20px}
.cbPips i{width:7px;height:7px;border-radius:50%;background:rgba(242,237,225,.18);transition:all var(--f)}
.cbPips i.on{width:22px;border-radius:99px;background:var(--gBrass);box-shadow:var(--glB)}

/* ==========================================================================
   SPLIT-FLAP COUNTERS
   ========================================================================== */
.cbFlaps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--rule);border-radius:var(--r2);overflow:hidden}
.cbFlap{position:relative;padding:20px 18px;text-align:center;
  background:linear-gradient(180deg,rgba(20,42,32,.5),rgba(7,16,12,.5))}
.cbFlap + .cbFlap{border-left:1px solid var(--rule)}
.cbFlap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(0,0,0,.5);pointer-events:none}
.cbFlap b{display:block;font-family:var(--m);font-weight:700;font-size:clamp(19px,2.3vw,28px);
  letter-spacing:-.02em;line-height:1.1;
  background:var(--gTx);-webkit-background-clip:text;background-clip:text;color:transparent}
.cbFlap span{display:block;font-family:var(--m);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-top:7px}

/* ---------------- ticker ---------------- */
.cbTick{position:relative;border-block:1px solid var(--rule);overflow:hidden;
  background:linear-gradient(180deg,rgba(20,42,32,.42),transparent)}
.cbTick-t{display:flex;gap:0;width:max-content;animation:cbRoll 44s linear infinite}
.cbTick:hover .cbTick-t{animation-play-state:paused}
@keyframes cbRoll{to{transform:translateX(-50%)}}
.cbTick-i{display:inline-flex;align-items:center;gap:16px;padding:14px 26px;
  font-family:var(--m);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mu);
  white-space:nowrap}
.cbTick-i::after{content:"\\2726";color:var(--brass);font-size:.7rem}

/* ==========================================================================
   SPEC PLATE — machine ID plate
   ========================================================================== */
.cbPlate{position:relative;border:1px solid var(--rule2);border-radius:var(--r2);
  background:linear-gradient(168deg,rgba(20,42,32,.62),rgba(7,16,12,.86));box-shadow:var(--sh2)}
.cbPlate::before,.cbPlate::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#E8CE8A,#6E5620);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.cbPlate::before{left:11px;top:11px}
.cbPlate::after{right:11px;top:11px}
.cbPlate-g{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(24px,3vw,34px)}
.cbRows{display:grid;grid-template-columns:repeat(4,1fr)}
.cbRow{padding:6px 18px}
.cbRow + .cbRow{border-left:1px solid var(--hair)}
.cbRow dt{font-family:var(--m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:7px}
.cbRow dd{margin:0;font-family:var(--m);font-weight:700;font-size:1rem;letter-spacing:-.02em;color:var(--bone)}
.cbRow dd.br{color:var(--brass-hi)}
.cbPlate-cta{display:grid;gap:11px;min-width:min(250px,100%)}
.cbStamps{display:flex;flex-wrap:wrap;gap:18px;padding:0 clamp(24px,3vw,34px) clamp(22px,3vw,30px)}
.cbStamps span{display:inline-flex;align-items:center;gap:8px;font-family:var(--m);font-size:.63rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.cbStamps svg{width:12px;height:12px;color:var(--em);flex:none}
.cbMet{height:3px;background:rgba(242,237,225,.09);overflow:hidden;border-radius:2px}
.cbMet i{display:block;height:100%;width:0;background:var(--gBrass);box-shadow:var(--glB);
  transition:width 1.6s var(--e)}

/* ==========================================================================
   FEATURE INDEX — numbered editorial list
   ========================================================================== */
.cbIndex{border-top:1px solid var(--rule)}
.cbItem{position:relative;display:grid;grid-template-columns:76px 1.1fr 1.5fr;gap:clamp(16px,3vw,44px);
  align-items:start;padding:clamp(24px,3vw,36px) 0;border-bottom:1px solid var(--rule);
  transition:background var(--n),padding-left var(--n)}
.cbItem:hover{background:rgba(200,162,74,.045);padding-left:14px}
.cbItem-n{font-family:var(--m);font-size:.72rem;letter-spacing:.16em;color:var(--brass);padding-top:5px}
.cbItem h3{font-family:var(--d);font-size:clamp(20px,2.6vw,31px);font-weight:500;letter-spacing:-.02em;
  line-height:1.1}
.cbItem p{color:var(--mu);font-size:.96rem;line-height:1.72}
.cbItem-b{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gBrass);
  transform:scaleY(0);transform-origin:top;transition:transform var(--n)}
.cbItem:hover .cbItem-b{transform:scaleY(1)}

/* ==========================================================================
   TICKET CARDS — perforated stubs for the bonus highlights
   ========================================================================== */
.cbTickets{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.cbTk{position:relative;display:block;border-radius:var(--r2);overflow:hidden;
  background:linear-gradient(168deg,rgba(20,42,32,.72),rgba(7,16,12,.9));
  box-shadow:inset 0 0 0 1px var(--rule),var(--sh1);
  transition:transform var(--n),box-shadow var(--n)}
.cbTk:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--rule2),var(--sh2),var(--glB)}
.cbTk img{width:100%;height:auto;aspect-ratio:71/32;object-fit:cover;
  transition:transform .8s var(--e)}
.cbTk:hover img{transform:scale(1.05)}
/* perforation line */
.cbTk-p{position:relative;height:0;border-top:1px dashed rgba(200,162,74,.4)}
.cbTk-p::before,.cbTk-p::after{content:"";position:absolute;top:-9px;width:18px;height:18px;
  border-radius:50%;background:var(--felt);box-shadow:inset 0 0 0 1px var(--rule)}
.cbTk-p::before{left:-9px}
.cbTk-p::after{right:-9px}
.cbTk-b{display:flex;align-items:center;gap:14px;padding:20px 22px}
.cbTk-b b{display:block;font-family:var(--d);font-size:1.2rem;font-weight:500;letter-spacing:-.015em}
.cbTk-b span{display:block;color:var(--mu);font-size:.88rem;margin-top:2px}
.cbTk-b .go{margin-left:auto;font-family:var(--m);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);white-space:nowrap;
  transition:transform var(--f)}
.cbTk:hover .cbTk-b .go{transform:translateX(4px)}

/* ==========================================================================
   REEL — screenshot strip in a cabinet window
   ========================================================================== */
.cbReel{position:relative;padding:clamp(16px,2vw,26px);border-radius:var(--r3);
  background:linear-gradient(168deg,rgba(20,42,32,.6),rgba(7,16,12,.9));
  box-shadow:inset 0 0 0 1.5px var(--rule2),var(--sh3)}
.cbReel-lamp{position:absolute;top:-1px;left:30%;right:30%;height:2px;background:var(--brass-hi);
  box-shadow:0 0 24px 3px rgba(232,206,138,.5)}
.cbReel-w{position:relative;overflow:hidden;border-radius:var(--r2);
  box-shadow:inset 0 0 0 1px var(--hair),inset 0 18px 34px rgba(0,0,0,.55),
             inset 0 -18px 34px rgba(0,0,0,.55)}
.cbStrip{display:flex;gap:clamp(10px,1.4vw,18px);padding:clamp(14px,2vw,24px);
  transition:transform .78s var(--e2)}
.cbCell{flex:none;width:clamp(126px,15vw,178px);position:relative;
  transition:transform .6s var(--e),opacity .6s var(--e),filter .6s var(--e)}
.cbCell[data-a="0"]{transform:scale(1.06);opacity:1}
.cbCell[data-a="1"]{opacity:.58;filter:saturate(.78)}
.cbReel-f{position:absolute;top:0;bottom:0;width:11%;z-index:3;pointer-events:none}
.cbReel-f.l{left:0;background:linear-gradient(90deg,rgba(7,16,12,.95),transparent)}
.cbReel-f.r{right:0;background:linear-gradient(270deg,rgba(7,16,12,.95),transparent)}
.cbReel-c{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px;flex-wrap:wrap;row-gap:12px}
.cbArr{flex:none;width:48px;height:48px;border-radius:var(--r1);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--rule2);color:var(--bone);transition:all var(--f)}
.cbArr:hover{background:var(--gBrass);color:#1A1206;box-shadow:var(--glB)}
.cbArr svg{width:17px;height:17px}
.cbDots{display:flex;gap:7px;padding-block:16px;flex-wrap:wrap;justify-content:center;max-width:100%}
.cbDots button{position:relative;width:24px;height:3px;background:rgba(242,237,225,.16);
  transition:all var(--f)}
.cbDots button::before{content:"";position:absolute;left:-11px;right:-11px;top:-22px;bottom:-22px}
.cbDots button.on{width:42px;background:var(--gBrass);box-shadow:var(--glB)}

/* ==========================================================================
   LOBBY — horizontal rails
   ========================================================================== */
.cbLobby-w{position:relative;overflow:hidden;width:100%}
.cbRail{display:flex;gap:12px;width:max-content;animation:cbRoll var(--dur,66s) linear infinite;
  margin-bottom:12px}
.cbRail--rev{animation-direction:reverse}
.cbLobby:hover .cbRail{animation-play-state:paused}
.cbTile{position:relative;flex:none;width:128px;border-radius:var(--r2);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--hair);background:var(--lacq);
  transition:transform var(--f),box-shadow var(--f)}
.cbTile img{width:100%;height:auto;aspect-ratio:211/260;object-fit:cover}
.cbTile figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 9px 8px;font-size:.7rem;
  font-weight:600;background:linear-gradient(180deg,transparent,rgba(7,16,12,.95));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbTile:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--rule2),var(--sh2);z-index:2}
.cbFade{position:absolute;top:0;bottom:0;width:12%;z-index:3;pointer-events:none}
.cbFade.l{left:0;background:linear-gradient(90deg,var(--felt),transparent)}
.cbFade.r{right:0;background:linear-gradient(270deg,var(--felt),transparent)}
.cbChips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:30px}
.cbChips button{font-family:var(--m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 18px;border-radius:var(--rp);color:var(--mu);min-height:44px;
  box-shadow:inset 0 0 0 1px var(--hair);transition:all var(--f)}
.cbChips button:hover{color:var(--bone);box-shadow:inset 0 0 0 1px var(--rule2)}
.cbChips button.on{background:var(--gBrass);color:#1A1206;box-shadow:var(--glB)}
.cbGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.cbGrid .cbTile{width:auto}
.cbTile.off{display:none}

/* ==========================================================================
   STEPS / LEDGER / QUOTES
   ========================================================================== */
.cbSteps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--rule);
  border-radius:var(--r2);overflow:hidden}
.cbStep{padding:clamp(22px,2.6vw,30px);position:relative;
  background:linear-gradient(180deg,rgba(20,42,32,.42),transparent);transition:background var(--n)}
.cbStep:hover{background:rgba(200,162,74,.06)}
.cbStep + .cbStep{border-left:1px solid var(--rule)}
.cbStep .n{display:block;font-family:var(--d);font-size:2.4rem;font-weight:500;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--brass);margin-bottom:14px}
.cbStep h3{font-family:var(--b);font-size:1.02rem;font-weight:600;margin-bottom:7px}
.cbStep p{color:var(--mu);font-size:.9rem;line-height:1.66}

.cbSpecs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);border-radius:var(--r2);
  overflow:hidden}
.cbSpecs>div{padding:17px 20px;border-bottom:1px solid var(--hair)}
.cbSpecs>div:nth-child(odd){border-right:1px solid var(--hair)}
.cbSpecs>div:nth-last-child(-n+2){border-bottom:0}
.cbSpecs dt{font-family:var(--m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:6px}
.cbSpecs dd{margin:0;font-family:var(--m);font-weight:700;font-size:.96rem;letter-spacing:-.02em}

.cbQuotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.cbQ{padding:26px;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--hair);
  background:linear-gradient(168deg,rgba(20,42,32,.5),transparent);
  transition:transform var(--n),box-shadow var(--n)}
.cbQ:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--rule2),var(--sh1)}
.cbQ .mark{font-family:var(--d);font-size:2.6rem;line-height:.6;color:var(--brass);opacity:.5;
  display:block;margin-bottom:12px}
.cbQ p{color:var(--mu);font-size:.94rem;line-height:1.72;margin-bottom:20px}
.cbQ-w{display:flex;align-items:center;gap:11px}
.cbAv{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--d);font-weight:500;background:var(--gBrass);color:#1A1206;font-size:.9rem}
.cbQ-w b{display:block;font-size:.9rem;font-weight:600}
.cbVf{display:inline-flex;align-items:center;gap:5px;font-family:var(--m);font-size:.58rem;
  color:var(--em);letter-spacing:.1em;text-transform:uppercase}
.cbVf svg{width:10px;height:10px}
.cbQ-w .st{margin-left:auto;color:var(--brass);font-size:.7rem;letter-spacing:.1em}

.cbScore{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,54px);align-items:center;
  padding:clamp(24px,3vw,36px);border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--rule)}
.cbScore-c{text-align:center}
.cbScore-c b{display:block;font-family:var(--d);font-size:clamp(52px,7vw,86px);font-weight:500;
  line-height:1;background:var(--gTx);-webkit-background-clip:text;background-clip:text;color:transparent}
.cbScore-c .st{color:var(--brass);letter-spacing:.22em;font-size:.95rem;margin-top:8px}
.cbScore-c .sub{font-family:var(--m);font-size:.6rem;color:var(--dim);letter-spacing:.16em;margin-top:10px}
.cbBars{display:grid;gap:9px}
.cbBar{display:grid;grid-template-columns:30px 1fr 40px;gap:12px;align-items:center;
  font-family:var(--m);font-size:.68rem;color:var(--mu)}
.cbBar .tr{height:4px;background:rgba(242,237,225,.09);overflow:hidden}
.cbBar .fl{display:block;height:100%;width:0;background:var(--gBrass);transition:width 1.3s var(--e)}

.cbCards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.cbCard{padding:28px;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--hair);
  background:linear-gradient(168deg,rgba(20,42,32,.5),transparent);
  transition:transform var(--n),box-shadow var(--n)}
.cbCard:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--rule2),var(--sh1)}
.cbIco{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin-bottom:17px;
  box-shadow:inset 0 0 0 1px var(--rule2);color:var(--brass);transition:all var(--n)}
.cbIco svg{width:18px;height:18px}
.cbCard:hover .cbIco{background:var(--gBrass);color:#1A1206;box-shadow:var(--glB)}
.cbCard h3{font-family:var(--b);font-size:1.04rem;font-weight:600;margin-bottom:8px}
.cbCard p{color:var(--mu);font-size:.92rem;line-height:1.68}

/* ---------------- FAQ ---------------- */
.cbFaq{max-width:900px;margin-inline:auto;border-top:1px solid var(--rule)}
.cbQa{border-bottom:1px solid var(--rule);transition:background var(--n)}
.cbQa[open]{background:rgba(200,162,74,.045)}
.cbQa summary{list-style:none;cursor:pointer;position:relative;padding:22px 56px 22px 0;
  font-family:var(--d);font-size:clamp(17px,1.7vw,21px);font-weight:500;letter-spacing:-.015em;
  line-height:1.34;transition:color var(--f)}
.cbQa summary::-webkit-details-marker{display:none}
.cbQa summary:hover{color:var(--brass-hi)}
.cbQa summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:1px;
  background:var(--brass);transform:translateY(-50%)}
.cbQa summary::before{content:"";position:absolute;right:14px;top:50%;width:1px;height:13px;
  background:var(--brass);transform:translateY(-50%);transition:transform var(--n)}
.cbQa[open] summary::before{transform:translateY(-50%) scaleY(0)}
.cbAns{padding:0 56px 24px 0;color:var(--mu);font-size:.95rem;line-height:1.76}

/* ---------------- CTA / footer ---------------- */
.cbBand{position:relative;text-align:center;padding:clamp(46px,6vw,84px) clamp(24px,4vw,60px);
  border-radius:var(--r3);overflow:hidden;
  background:linear-gradient(168deg,rgba(20,42,32,.78),rgba(7,16,12,.94));
  box-shadow:inset 0 0 0 1.5px var(--rule2),var(--sh3)}
.cbBand::before{content:"";position:absolute;inset:-40% -20% auto;height:120%;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 100%,rgba(18,183,106,.2),transparent 66%)}
.cbBand>*{position:relative;z-index:1}
.cbBand p{color:var(--mu);max-width:54ch;margin:18px auto 30px}
.cbBand .cbCta{justify-content:center}
.cbNote{text-align:center;margin-top:22px;font-family:var(--m);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.cbNote b{color:var(--brass);margin-right:8px}

.cbFoot{position:relative;z-index:2;margin-top:clamp(50px,7vw,96px);border-top:1px solid var(--rule)}
.cbFoot-g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:clamp(26px,4vw,54px);
  padding:clamp(44px,6vw,72px) 0 38px}
.cbFoot-b .cbLogo img{height:38px}
.cbFoot-b p{color:var(--mu);font-size:.9rem;margin:18px 0 20px;max-width:38ch}
.cbFoot h4{font-family:var(--m);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);margin-bottom:15px;font-weight:700}
.cbFoot .l{display:block;padding:11px 0;color:var(--mu);font-size:.92rem;
  transition:color var(--f),padding-left var(--f)}
.cbFoot .l:hover{color:var(--brass-hi);padding-left:5px}
.cbSoc{display:flex;gap:10px;margin-top:18px}
.cbSoc a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--mu);
  box-shadow:inset 0 0 0 1px var(--hair);transition:all var(--f)}
.cbSoc a:hover{color:#1A1206;background:var(--gBrass);box-shadow:var(--glB)}
.cbSoc svg{width:16px;height:16px}
.cbFoot-b2{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  padding:20px 0 28px;border-top:1px solid var(--hair);font-family:var(--m);font-size:.64rem;
  letter-spacing:.08em;color:var(--dim)}
.cbFoot-b2 .pol{display:flex;gap:6px;flex-wrap:wrap}
.cbFoot-b2 .pol a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
.cbFoot-b2 a:hover{color:var(--brass)}

.cbTop{position:fixed;right:20px;bottom:22px;z-index:55;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:var(--lacq);box-shadow:inset 0 0 0 1px var(--rule2),var(--sh2);
  color:var(--bone);opacity:0;visibility:hidden;transform:translateY(12px);transition:all var(--n)}
.cbTop.on{opacity:1;visibility:visible;transform:none}
.cbTop:hover{background:var(--gBrass);color:#1A1206}
.cbTop svg{width:17px;height:17px}
/* sticky download bar — .cbSticky, NOT .cbBar (that is the review rating row) */
.cbSticky{position:fixed;left:0;right:0;bottom:0;z-index:56;display:none;align-items:center;gap:14px;
  padding:11px 16px;background:rgba(7,16,12,.96);border-top:1px solid var(--rule);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transform:translateY(120%);transition:transform var(--sl)}
.cbSticky.on{transform:none}
.cbSticky .cbB{flex:none}
.cbSticky-t{flex:1 1 auto;min-width:0}
.cbSticky-t b{display:block;font-family:var(--d);font-size:1.02rem;font-weight:500}
.cbSticky-t span{display:block;font-family:var(--m);font-size:.6rem;letter-spacing:.1em;color:var(--dim)}
.cbProgBar{position:fixed;top:0;left:0;height:2px;z-index:80;width:0;background:var(--gBrass);
  box-shadow:var(--glB);transition:width .1s linear}

/* ---------------- gate / cookie / prose / contact ---------------- */
.cbGate{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;
  background:rgba(4,9,7,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cbGate[hidden]{display:none}
.cbGate-c{max-width:440px;text-align:center;padding:40px 34px;border-radius:var(--r3);
  background:linear-gradient(168deg,rgba(20,42,32,.96),rgba(7,16,12,.98));
  box-shadow:inset 0 0 0 1.5px var(--rule2),var(--sh3)}
.cbGate-c .seal{width:66px;height:66px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--m);font-weight:700;font-size:1.1rem;background:var(--gBrass);color:#1A1206}
.cbGate-c h2{font-family:var(--d);font-size:1.6rem;font-weight:500;margin-bottom:12px}
.cbGate-c p{color:var(--mu);font-size:.92rem;margin-bottom:26px}
.cbGate-c .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cbCookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;display:flex;gap:14px;
  align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 18px;border-radius:var(--r2);
  background:rgba(7,16,12,.96);box-shadow:inset 0 0 0 1px var(--rule),var(--sh2);
  font-size:.86rem;color:var(--mu)}
.cbCookie[hidden]{display:none}

.cbProse{max-width:760px;margin-inline:auto}
.cbProse h2{font-family:var(--d);font-size:1.5rem;font-weight:500;margin:34px 0 12px}
.cbProse h2:first-child{margin-top:0}
.cbProse p{color:var(--mu);margin-bottom:14px;font-size:.95rem}
.cbProse a{color:var(--brass-hi);text-decoration:underline;text-underline-offset:3px}

.cbTwo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px);align-items:start}
.cbWays{display:grid;gap:0;border-top:1px solid var(--rule)}
.cbWay{display:flex;align-items:center;gap:16px;padding:22px 4px;border-bottom:1px solid var(--rule);
  cursor:pointer;transition:padding-left var(--n),background var(--n)}
.cbWay:hover{padding-left:14px;background:rgba(200,162,74,.05)}
.cbWay .ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  box-shadow:inset 0 0 0 1px var(--rule2);color:var(--brass)}
.cbWay .ic svg{width:18px;height:18px}
.cbWay b{display:block;font-family:var(--b);font-size:.98rem;font-weight:600}
.cbWay span{display:block;color:var(--mu);font-size:.85rem}
.cbWay .go{margin-left:auto;color:var(--brass);transition:transform var(--f)}
.cbWay:hover .go{transform:translateX(5px)}
.cbForm{padding:clamp(24px,3vw,34px);border-radius:var(--r2);
  box-shadow:inset 0 0 0 1px var(--rule);background:linear-gradient(168deg,rgba(20,42,32,.5),transparent)}
.cbForm h2{font-family:var(--d);font-size:1.5rem;font-weight:500;margin-bottom:8px}
.cbForm>p{color:var(--mu);font-size:.9rem;margin-bottom:22px}
.cbFld{margin-bottom:16px}
.cbFld label{display:block;font-family:var(--m);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.cbFld input,.cbFld textarea{width:100%;padding:14px 16px;border-radius:var(--r1);color:var(--bone);
  background:rgba(4,9,7,.6);border:1px solid var(--hair);font:inherit;font-size:.94rem;
  transition:border-color var(--f),box-shadow var(--f)}
.cbFld textarea{min-height:118px;resize:vertical}
.cbFld input:focus,.cbFld textarea:focus{outline:none;border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(200,162,74,.16)}
.cbMsg{margin-top:14px;font-size:.88rem;color:var(--em-hi)}
.cbMsg[hidden]{display:none}

.cbVow{text-align:center;padding:clamp(32px,4vw,56px);border-radius:var(--r3);
  box-shadow:inset 0 0 0 1.5px var(--rule2);
  background:linear-gradient(168deg,rgba(20,42,32,.7),rgba(7,16,12,.9))}
.cbVow p{font-family:var(--d);font-size:clamp(21px,2.8vw,34px);font-weight:500;line-height:1.32;
  letter-spacing:-.02em}
.cbVow .by{font-family:var(--m);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);margin-top:20px}

.cbGuides{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.cbGd{display:block;padding:28px;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--hair);
  transition:transform var(--n),box-shadow var(--n)}
.cbGd:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--rule2),var(--sh1)}
.cbGd .tagx{font-family:var(--m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);display:block;margin-bottom:14px}
.cbGd h3{font-family:var(--d);font-size:1.24rem;font-weight:500;margin-bottom:9px}
.cbGd p{color:var(--mu);font-size:.9rem;margin-bottom:16px}
.cbGd .go{font-family:var(--m);font-size:.66rem;letter-spacing:.14em;color:var(--brass)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1040px){
  .cbQuotes,.cbCards,.cbGuides{grid-template-columns:repeat(2,1fr)}
  .cbSteps{grid-template-columns:repeat(2,1fr)}
  .cbStep:nth-child(3){border-left:0}
  .cbStep:nth-child(n+3){border-top:1px solid var(--rule)}
  .cbFoot-g{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .cbMenu{display:none}
  .cbNav .cbB--sm{display:none}
  .cbBurg{display:flex}
  .cbHero-g{grid-template-columns:1fr;gap:44px}
  .cbCab{order:-1}
  .cbPhone{width:min(230px,58%)}
  .cbPlate-g{grid-template-columns:1fr;gap:24px}
  .cbItem{grid-template-columns:56px 1fr;gap:18px}
  .cbItem p{grid-column:2}
  .cbTwo{grid-template-columns:1fr}
  .cbScore{grid-template-columns:1fr;gap:26px}
}
@media(max-width:720px){
  .cbW{width:min(100% - 30px,var(--max))}
  .cbFlaps{grid-template-columns:repeat(2,1fr)}
  .cbFlap:nth-child(3){border-left:0}
  .cbFlap:nth-child(n+3){border-top:1px solid var(--rule)}
  .cbRows{grid-template-columns:repeat(2,1fr)}
  .cbRow:nth-child(3){border-left:0}
  .cbRow:nth-child(n+3){border-top:1px solid var(--hair);padding-top:16px;margin-top:10px}
  .cbTickets,.cbQuotes,.cbCards,.cbGuides{grid-template-columns:1fr}
  .cbSteps{grid-template-columns:1fr}
  .cbStep + .cbStep{border-left:0;border-top:1px solid var(--rule)}
  .cbSpecs{grid-template-columns:1fr}
  .cbSpecs>div:nth-child(odd){border-right:0}
  .cbSpecs>div:nth-last-child(2){border-bottom:1px solid var(--hair)}
  .cbFoot-g{grid-template-columns:1fr;gap:30px}
  .cbSticky{display:flex}
  .cbTop{bottom:82px;right:14px}
  .cbCookie{bottom:82px}
  .cbCell{width:clamp(112px,32vw,150px)}
  .cbCta{width:100%}
  .cbCta .cbB{flex:1;min-width:150px}
  .cbHero-l{justify-items:stretch}
  .cbHero-l .cbKick{justify-self:start}
}
@media(max-width:420px){
  .cbFlaps,.cbRows{grid-template-columns:1fr}
  .cbFlap:nth-child(n+2){border-left:0;border-top:1px solid var(--rule)}
  .cbRow:nth-child(n+2){border-left:0;border-top:1px solid var(--hair);padding-top:16px;margin-top:10px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .cbR{opacity:1;transform:none}
  .cbRule{transform:scaleX(1)}
  .cbRail,.cbTick-t{animation:none}
}
@media print{
  .cbNav,.cbBar,.cbTop,.cbGate,.cbCookie,.cbFelt,.cbWeave,.cbGrain,.cbProgBar{display:none !important}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   COVER HERO — magazine cover, full-width headline over a machine stand
   ========================================================================== */
.cbCover{padding-block:clamp(6px,1.5vw,18px)}
.cbCover-meta{display:flex;flex-wrap:wrap;gap:0;border-block:1px solid var(--rule);margin-bottom:clamp(20px,3vw,34px)}
.cbCover-meta span{flex:1 1 auto;padding:11px 16px;font-family:var(--m);font-size:.62rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dim);text-align:center;white-space:nowrap}
.cbCover-meta span + span{border-left:1px solid var(--rule)}
.cbCover-t{max-width:15ch}
.cbCover-b{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,60px);align-items:end}
.cbCover-a{display:grid;gap:22px;justify-items:start}

/* machine stand: wide brass band holding the device + counters */
.cbStand{position:relative;margin-top:clamp(30px,4vw,52px);padding:clamp(22px,3vw,38px);
  border-radius:var(--r3);
  background:linear-gradient(168deg,rgba(20,42,32,.72),rgba(7,16,12,.94));
  box-shadow:inset 0 0 0 1.5px var(--rule2),var(--sh3)}
.cbStand-rail{position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px 3px 0 0;
  background:var(--gMetal);background-size:220% 100%;animation:cbShift 10s linear infinite}
.cbStand-g{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(26px,4vw,58px);align-items:center}
.cbStand-r{display:grid;gap:20px}
.cbStand .cbCab{padding:0}
.cbStand .cbCab::before,.cbStand .cbCab::after{display:none}
.cbStand .cbCab-in{background:none;box-shadow:none;padding:0}
.cbStand .cbPhone{width:min(250px,80%)}
.cbStand .cbCab-lamp{left:26%;right:26%}

@media(max-width:900px){
  .cbCover-t{max-width:none}
  .cbCover-b{grid-template-columns:1fr;gap:26px;align-items:start}
  .cbStand-g{grid-template-columns:1fr;gap:32px}
  .cbStand .cbPhone{width:min(215px,58%)}
}
@media(max-width:560px){
  .cbCover-meta span{flex:1 0 50%;border-left:0 !important}
  .cbCover-meta span:nth-child(even){border-left:1px solid var(--rule) !important}
  .cbCover-meta span:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* ==========================================================================
   TICKET STUBS — app key highlights
   ========================================================================== */
.cbTk{position:relative;padding-top:0}
.cbTk-code{position:absolute;z-index:4;top:12px;left:12px;font-family:var(--m);font-size:.58rem;
  letter-spacing:.2em;color:var(--brass-hi);padding:5px 10px;border-radius:2px;
  background:rgba(7,16,12,.8);box-shadow:inset 0 0 0 1px var(--rule2)}
/* barcode strip along the bottom edge */
.cbTk-bar{display:block;height:16px;margin:0 22px 18px;opacity:.5;
  background-image:repeating-linear-gradient(90deg,
    var(--brass) 0 1px,transparent 1px 3px,
    var(--brass) 3px 5px,transparent 5px 6px,
    var(--brass) 6px 7px,transparent 7px 11px);
  transition:opacity var(--n)}
.cbTk:hover .cbTk-bar{opacity:.95}
/* print-in reveal: the stub rolls out of the machine.
   The clip lives in a keyframe that only runs once .on is applied — putting it in the
   hidden state would zero the element's intersection rect and the observer could never
   fire, leaving the stub clipped forever. */
.cbTk.cbR{transform:translateY(22px)}
.cbTk.cbR.on{transform:none;
  transition:opacity .5s var(--e),transform .8s var(--e);
  animation:cbPrint .85s var(--e) both;
  animation-delay:calc(var(--tk,0) * 110ms + 60ms)}
@keyframes cbPrint{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
/* foil sweep across the stub */
.cbTk::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(102deg,transparent 34%,rgba(232,206,138,.18) 47%,
    rgba(255,255,255,.1) 51%,transparent 62%);
  transform:translateX(-110%);transition:transform .9s var(--e)}
.cbTk:hover::after{transform:translateX(110%)}

/* ==========================================================================
   DOWNLOAD — work order layout
   ========================================================================== */
.cbOrder{position:relative;display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(26px,3.4vw,44px);
  border-radius:var(--r3);
  background:linear-gradient(168deg,rgba(20,42,32,.66),rgba(7,16,12,.92));
  box-shadow:inset 0 0 0 1.5px var(--rule2),var(--sh3)}
.cbOrder::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px 3px 0 0;
  background:var(--gMetal);background-size:220% 100%;animation:cbShift 10s linear infinite}
.cbOrder-r .cbCab{padding:0}
.cbOrder-r .cbCab::before,.cbOrder-r .cbCab::after{display:none}
.cbOrder-r .cbCab-in{background:none;box-shadow:none;padding:0}
.cbOrder-r .cbPhone{width:min(220px,66%)}
@media(max-width:900px){
  .cbOrder{grid-template-columns:1fr;gap:30px}
  .cbOrder-r .cbPhone{width:min(200px,54%)}
}

@media(prefers-reduced-motion:reduce){
  .cbTk.cbR{transform:none}
  .cbTk::after{display:none}
  .cbStand-rail,.cbOrder::before{animation:none}
}


/* ==========================================================================
   NARROW PHONES — CTA buttons stack full width so label text can never clip
   ========================================================================== */
@media(max-width:560px){
  .cbCta{flex-direction:column;align-items:stretch;width:100%}
  .cbCta .cbB{width:100%;flex:0 0 auto}
}

@media(max-width:900px){ .cbPlate-cta{width:100%} }
@media(max-width:560px){
  .cbBand .cbCta{width:100%}
  .cbPlate-cta .cbB{width:100%}
}

@media(max-width:400px){
  .cbPlate-cta .cbB--lg,.cbBand .cbB--lg{
    font-size:.7rem;padding:14px 18px;letter-spacing:.1em;gap:8px}
  .cbPlate-cta .cbB--lg svg,.cbBand .cbB--lg svg{width:14px;height:14px}
}