:root{
  --bg:#f7f4ec; --bg-2:#efeadd; --panel:#ffffff; --panel-2:#f3efe4;
  --line:#e5dfd1; --line-2:#d6cebd;
  --ink:#17130d; --ink-2:#5b5446; --ink-3:#8c8474;
  --gold:#c9a227; --gold-bright:#d1a230; --gold-deep:#a9871f; --gold-soft:#c9a2271f;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --maxw:1160px; --sec-pad:clamp(30px,3.6vw,54px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
.dark{
  --bg:#181410; --bg-2:#201b13; --panel:#221c14; --panel-2:#2a2318;
  --line:#332b20; --line-2:#443a2b;
  --ink:#f6f2e9; --ink-2:#c3bbaa; --ink-3:#8f8674;
  --gold:#d6a428; --gold-bright:#e8b838; --gold-deep:#c69c34;
  background:var(--bg); color:var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
/* THE RULE THAT KEEPS INVISIBLE LAYERS FROM EATING CLICKS.
   The browser's own [hidden] is display:none at the very bottom of the
   cascade, so ANY rule that sets display, on a class or on an id, outranks
   it and a "hidden" overlay stays in front of the page swallowing every
   click while the HTML looks perfect. That shipped once. This rule is the
   fix for the whole document, not for one overlay. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--gold);color:#17130d}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
@media(max-width:520px){.wrap{padding:0 18px}}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
section[id],header[id]{scroll-margin-top:78px}

/* nav, matched to the marketing site */
#nav{position:fixed;top:0;left:0;right:0;z-index:60;
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  background:rgba(20,16,12,.9);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:13px 28px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:-.01em;font-size:21px;color:#f6f2e9}
.brand .mark{width:44px;height:44px;flex:0 0 auto;filter:drop-shadow(0 3px 8px rgba(232,182,48,.35));transition:transform .3s var(--ease)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.05)}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:#c3bbaa}
.nav-links a{position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;
  background:var(--gold-bright);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{font-size:14px;font-weight:600;color:#17130d;background:var(--gold-bright);
  padding:9px 16px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s,box-shadow .25s;border:none;cursor:pointer;white-space:nowrap}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 26px -8px rgba(232,182,48,.5)}
.cart-n{background:#17130d;color:var(--gold-bright);border-radius:99px;min-width:20px;
  height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding:0 6px}
.hamb{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.hamb span{width:22px;height:2px;background:#f6f2e9;border-radius:2px;transition:.25s}
.hamb.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb.on span:nth-child(2){opacity:0}
.hamb.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#mobile-menu{display:none;position:fixed;top:70px;left:0;right:0;z-index:59;background:rgba(20,16,12,.98);
  border-bottom:1px solid rgba(255,255,255,.08);padding:14px 20px 20px;flex-direction:column;gap:2px}
#mobile-menu.on{display:flex}
#mobile-menu a{color:#e8e2d6;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.06);font-size:16px}
#mobile-menu a.cta{margin-top:12px;background:var(--gold-bright);color:#17130d;border:none;
  border-radius:10px;text-align:center;font-weight:600}
@media(max-width:900px){
  .nav-links{display:none}
  .hamb{display:flex;margin-left:auto}
  .nav-cta{margin-left:0;padding:8px 12px;font-size:13px}
}

/* bands */
.store{padding-top:70px}
.band{padding:var(--sec-pad) 0;background:var(--bg)}
.band-2{background:var(--bg-2)}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin-bottom:14px}
h1{font-family:var(--serif);font-size:clamp(34px,5.4vw,58px);line-height:1.06;
  letter-spacing:-.02em;font-weight:600}
h1 em,h2 em{font-style:italic;color:var(--gold-bright)}
h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,40px);line-height:1.12;
  letter-spacing:-.015em;font-weight:600}
h3{font-size:19px;letter-spacing:-.01em;font-weight:650}
h4{font-size:16px;letter-spacing:-.005em;font-weight:650}
.h-sm{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);margin-bottom:22px;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cnt{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-3);
  background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:2px 10px}
.lede{font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);max-width:62ch;margin-top:16px}
.grid-note{color:var(--ink-3);font-size:14px;max-width:70ch;margin:-8px 0 22px}

.btn{font-family:var(--sans);font-size:14.5px;font-weight:600;padding:11px 20px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid transparent;
  transition:transform .15s,box-shadow .25s,background .2s,color .2s;white-space:nowrap}
.btn-primary{background:var(--gold-bright);color:#17130d}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(232,182,48,.55)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-deep)}
.dark .btn-ghost{color:var(--ink);border-color:rgba(255,255,255,.22)}
.dark .btn-ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
.btn-lg{padding:14px 26px;font-size:16px}
.btn-add{background:var(--panel-2);color:var(--ink);border-color:var(--line-2);width:100%;margin-top:12px}
.btn-add:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:#17130d}
.btn-add.on{background:var(--gold-bright);border-color:var(--gold-bright);color:#17130d}

/* store hero */
.store-hero,.line-hero,.ord-head{padding-top:calc(var(--sec-pad) + 22px);position:relative;overflow:hidden}
.store-hero::before,.line-hero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;
  background:radial-gradient(60% 55% at 28% 22%,rgba(214,164,40,.20),transparent 70%);pointer-events:none}
.store-hero .wrap,.line-hero .wrap{position:relative}
.lh-ctas,.talk-ctas,.m-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* THE FRONT WINDOW.
   Two columns: the argument on the left, the goods on the right, and a rail of
   four ways in underneath. Every decorative layer in here is pointer-events
   none, because a hero that swallows a click is a shop with the door locked. */
.hero-in{display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(22px,3.4vw,44px);align-items:center}
.hero-copy{min-width:0}
/* Shorter copy and a tighter stack: a shop's job is to get the goods on the
   screen, so the hero gives back the vertical space it used to take. */
.hero-copy .lede{margin-top:11px;font-size:clamp(15px,1.3vw,17px);max-width:46ch}
.store-hero .lh-ctas{margin-top:18px}
.hero-proof{list-style:none;margin:16px 0 0;display:flex;flex-wrap:wrap;
  column-gap:20px;row-gap:7px}
.hero-proof li{position:relative;padding-left:24px;font-size:13px;color:var(--ink-2)}
.hero-proof li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;
  border-radius:50%;background:rgba(232,184,56,.14);border:1px solid var(--gold-deep)}
.hero-proof li::after{content:"";position:absolute;left:4.6px;top:8px;width:6px;height:3px;
  border-left:1.7px solid var(--gold-bright);border-bottom:1.7px solid var(--gold-bright);
  transform:rotate(-45deg)}

.hero-show{min-width:0}
.hs-stage{position:relative;display:block;border-radius:22px;overflow:hidden;
  border:1px solid var(--line-2);padding:18px 22px 0;
  background:linear-gradient(180deg,#251e14 0%,#1a1610 100%);
  transition:border-color .25s,box-shadow .3s var(--ease)}
.hs-stage:hover{border-color:var(--gold-deep);
  box-shadow:0 30px 70px -42px rgba(232,182,48,.65)}
.hs-glow{position:absolute;inset:-18% -12% 20% -12%;pointer-events:none;
  background:radial-gradient(52% 58% at 50% 44%,rgba(232,184,56,.24),transparent 72%)}
.hs-shots{position:relative;display:block;height:clamp(214px,22vw,300px)}
.hs-shot{position:absolute;inset:0 0 12px;width:100%;height:calc(100% - 12px);
  max-width:none;object-fit:contain;object-position:center bottom;opacity:0;
  transform:translateY(6px) scale(.985);
  transition:opacity .4s var(--ease),transform .5s var(--ease);
  filter:drop-shadow(0 26px 32px rgba(0,0,0,.55))}
.hs-shot.on{opacity:1;transform:none}
.hs-cap{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;padding:12px 2px 15px;border-top:1px solid var(--line)}
.hs-cap-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hs-cap-t b{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.01em}
#hs-price{font-size:14.5px;font-weight:650;color:var(--gold-bright)}
.hs-cap-a{font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;
  border:1px solid var(--line-2);border-radius:99px;padding:7px 15px;
  transition:background .2s,color .2s,border-color .2s}
.hs-cap-a::after{content:" \203A"}
.hs-stage:hover .hs-cap-a{background:var(--gold-bright);border-color:var(--gold-bright);
  color:#17130d}
.hs-picks{display:flex;gap:9px;margin-top:13px}
.hs-pick{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:8px 4px 9px;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);
  transition:border-color .2s,background .2s,transform .2s var(--ease)}
.hs-pick img{height:40px;width:100%;object-fit:contain}
.hs-pick span{font-size:11.5px;font-weight:650;color:var(--ink-3);text-align:center;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-pick:hover{border-color:var(--line-2);transform:translateY(-2px)}
.hs-pick.on{border-color:var(--gold-deep);background:var(--panel-2)}
.hs-pick.on span{color:var(--gold-bright)}

.cat-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));
  gap:10px;margin-top:clamp(18px,2.2vw,28px)}
.cat-tile{display:flex;align-items:center;gap:13px;padding:12px 15px;border-radius:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);
  transition:border-color .2s,background .2s,transform .2s var(--ease)}
.cat-tile:hover{border-color:var(--gold-deep);background:rgba(232,184,56,.07);
  transform:translateY(-2px)}
.ct-ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:grid;
  place-items:center;overflow:hidden;
  background:radial-gradient(70% 70% at 50% 38%,rgba(255,255,255,.11),rgba(255,255,255,.02))}
.ct-ic img{width:40px;height:40px;object-fit:contain}
.ct-t{display:flex;flex-direction:column;min-width:0;gap:1px}
.ct-t>b{font-size:14.5px;font-weight:650;letter-spacing:-.005em}
.ct-t>span{font-size:12px;color:var(--ink-3);line-height:1.4}
.ct-p{color:var(--gold-bright);font-weight:650}

@media(max-width:980px){
  /* Stacked: the window first, then the argument. A shop shows the goods.
     The stage is held to a sensible width so a tablet does not get one
     small robot stranded in the middle of a very wide box. */
  .hero-in{grid-template-columns:1fr;gap:20px}
  .hero-show{order:-1;max-width:520px;margin:0 auto;width:100%}
  .hs-shots{height:clamp(178px,36vw,250px)}
  .hero-proof{margin-top:14px}
  .store-hero{padding-top:calc(var(--sec-pad) + 6px)}
  .store-hero h1{font-size:clamp(30px,4.6vw,42px)}
  .store-hero .lede{font-size:15.5px;margin-top:9px}
  .store-hero .lh-ctas{margin-top:14px}
}
@media(max-width:560px){
  .hs-stage{padding:15px 15px 0;border-radius:18px}
  .hs-shots{height:168px}
  .hs-cap{padding:12px 0 14px}
  .hs-cap-t b{font-size:18px}
  .hs-cap-a{font-size:12.5px;padding:6px 12px}
  .hs-picks{gap:6px;margin-top:10px}
  .hs-pick{padding:6px 2px 7px;border-radius:11px;gap:2px}
  .hs-pick img{height:30px}
  .hs-pick span{font-size:10px}
  .store-hero .lh-ctas{gap:9px}
  .store-hero .lh-ctas .btn{flex:1 1 0;min-width:0;white-space:normal;
    text-align:center;padding:11px 8px;font-size:14px;line-height:1.25}
  .hero-proof li{font-size:12.5px}
  .cat-tile{padding:11px 13px;gap:11px}
  .ct-ic{width:42px;height:42px}
  .ct-ic img{width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){
  .hs-shot{transition:none}
  .hs-pick:hover,.cat-tile:hover{transform:none}
}

/* why band. Three reasons to buy the robot from us, then what we actually do
   with these machines. The platform material is support for the sell, not the
   subject: a robot buyer is still the reader. */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.why-c{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
.why-c h4{margin-bottom:8px}
.why-c p{font-size:14.5px;color:var(--ink-2)}
.why-c a{color:var(--gold-deep);border-bottom:1px solid var(--gold-soft)}
.why-head{max-width:72ch;margin-bottom:26px}
.why-head .lede{margin-top:14px}
.why-sub{margin:36px 0 16px;max-width:76ch}
.why-sub h3{font-family:var(--serif);font-size:clamp(20px,2.2vw,25px);font-weight:600;
  letter-spacing:-.01em;margin:8px 0 12px}
.why-sub .grid-note{margin:0}
.chan-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;margin-bottom:18px}
@media(max-width:1040px){.chan-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.chan-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chan{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:13px 15px;display:flex;flex-direction:column;gap:5px}
.chan b{font-size:14px;font-weight:650;letter-spacing:-.005em;display:flex;
  align-items:center;gap:7px;flex-wrap:wrap}
.chan span{font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.chan .flag{font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--gold-deep);border:1px solid var(--gold-soft);background:var(--gold-soft);
  border-radius:99px;padding:2px 7px}
.why-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
@media(max-width:460px){
  .chan-strip{grid-template-columns:1fr}
  .why-ctas .btn{flex:1 1 100%}
}

/* ---------------------------------------------------------------------
   THE SHOP. The grid is the page, not a section of it: one toolbar, one
   set of cards, filtered and sorted in the browser. Every card is a real
   link to a real product page, so with the script dead the shop is still
   a working catalogue and the toolbar is inert rather than broken.
   --------------------------------------------------------------------- */
.shop{padding-top:clamp(22px,2.4vw,32px)}
.shop-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 0 12px;margin-bottom:16px;border-bottom:1px solid var(--line);
  position:sticky;top:64px;z-index:20;background:var(--bg)}
.shop-filters{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.fchip{display:inline-flex;align-items:center;gap:7px;scroll-margin-top:110px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
  border:1px solid var(--line-2);border-radius:99px;padding:7px 14px;background:var(--panel);
  transition:background .18s,color .18s,border-color .18s}
.fchip .cnt{margin:0;font-size:11.5px;color:var(--ink-3)}
.fchip:hover{border-color:var(--gold-deep);color:var(--ink)}
.fchip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.fchip.on .cnt{color:var(--gold-bright)}
.shop-tools{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.shop-sort{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);
  background:var(--panel);border:1px solid var(--line-2);border-radius:10px;
  padding:8px 30px 8px 12px;cursor:pointer;max-width:100%;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% - 2px),calc(100% - 11px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.shop-count{font-size:13px;color:var(--ink-3);margin:0 0 14px}
.shop-none{font-size:15px;color:var(--ink-3);padding:26px 0}
@media(max-width:700px){
  .shop-bar{top:60px;gap:10px;padding:9px 0 10px}
  .shop-filters{width:100%;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
  .shop-filters::-webkit-scrollbar{display:none}
  .fchip{flex:0 0 auto;font-size:12.5px;padding:6px 12px}
  .shop-tools{margin-left:0;width:100%}
  .shop-sort{width:100%}
}

/* product grid */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.prod-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .3s,border-color .25s}
.prod-card:hover{transform:translateY(-3px);border-color:var(--line-2);
  box-shadow:0 22px 50px -28px rgba(23,19,13,.4)}
.pc-media{aspect-ratio:4/3;position:relative;flex:0 0 auto;overflow:hidden;
  background:radial-gradient(64% 62% at 50% 38%,#fffdf6 0%,#f3eee1 58%,#e9e2d1 100%)}
/* Absolutely positioned, not a centred grid item. A percentage max-height
   cannot resolve against a box whose height comes from aspect-ratio, so the
   old rule left every portrait robot at its natural height and overflow
   simply sliced it through the waist. Insets give the image a definite box
   and object-fit does the letterboxing. */
.pc-media img{position:absolute;top:16px;left:16px;
  width:calc(100% - 32px);height:calc(100% - 32px);max-width:none;max-height:none;
  object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 16px 26px rgba(23,19,13,.22))}
.pc-media-empty{background:var(--panel-2)}
.pc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
/* The card says what it is in two lines. The whole sentence is still on the
   product page: this is a shelf label, not the argument. */
.pc-body p{font-size:13px;line-height:1.45;color:var(--ink-2);flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-foot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  border-top:1px solid var(--line);padding-top:10px;margin-top:2px;flex-wrap:wrap}
.pc-price{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.pc-n{font-size:12px;color:var(--ink-3)}
/* The affordance. A shop card has to look like it opens. */
.pc-go{font-size:12.5px;font-weight:650;color:var(--ink-2);border:1px solid var(--line-2);
  border-radius:99px;padding:6px 13px;margin-top:10px;align-self:flex-start;
  /* In a narrow column a flex item sized to its content will run straight
     out of the card, and the card clips it. This lets the label wrap
     instead of losing its last word. */
  max-width:100%;
  transition:background .2s,color .2s,border-color .2s}
.pc-go::after{content:" \203A"}
.prod-card:hover .pc-go{background:var(--gold-bright);border-color:var(--gold-bright);color:#17130d}
/* Two up on a phone. A shop puts goods on the screen, and one enormous card
   per scroll is a brochure. Everything the card carries stays: the name, the
   price in BOTH currencies, how many builds are behind it, and the way in. */
@media(max-width:620px){
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .prod-card{border-radius:14px}
  .pc-media img{top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
  .pc-body{padding:11px 12px 13px;gap:5px}
  .pc-body h3{font-size:15px;line-height:1.25}
  .pc-body p{font-size:11.5px;line-height:1.4}
  .pc-foot{flex-direction:column;align-items:flex-start;gap:7px;padding-top:9px}
  .pc-price{font-size:12.5px;line-height:1.35}
  .pc-go{font-size:11.5px;padding:5px 10px;margin-top:0;line-height:1.3}
  .pc-zoom{width:28px;height:28px;right:7px;bottom:7px}
  .pc-media-soft .mark{width:66px;height:66px}
}
@media(max-width:360px){
  .prod-grid{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------
   SHARE. The button, and the panel a desktop browser gets in place of the
   operating system's own share sheet.
   --------------------------------------------------------------------- */
.share-btn{gap:7px}
.sh-ic{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bt-dacts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.bt-dacts .btn{margin-top:0}
/* The build a shared link points at, said out loud for a moment. */
.model.flash,tr.flash>th,tr.flash>td{animation:sh-flash 2.2s var(--ease)}
@keyframes sh-flash{
  0%,58%{background:var(--gold-soft);box-shadow:inset 0 0 0 2px var(--gold-deep)}
  100%{background:transparent;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  .model.flash,tr.flash>th,tr.flash>td{animation:none;background:var(--gold-soft)}
}

.share-pop{position:fixed;inset:0;z-index:95;display:block}
.sp-scrim{position:absolute;inset:0;background:rgba(14,11,8,.5);opacity:0;
  transition:opacity .2s var(--ease)}
.share-pop.on .sp-scrim{opacity:1}
.sp-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);
  width:min(420px,calc(100% - 32px));background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:22px 22px 20px;
  box-shadow:0 40px 90px -40px rgba(23,19,13,.6);
  opacity:0;transition:opacity .2s var(--ease),transform .22s var(--ease)}
.share-pop.on .sp-box{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sp-x{position:absolute;top:10px;right:14px;background:none;border:none;
  font-size:26px;line-height:1;color:var(--ink-3);cursor:pointer;padding:0 4px}
.sp-x:hover{color:var(--ink)}
.sp-h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:700;margin-bottom:8px}
.sp-t{font-family:var(--serif);font-size:20px;font-weight:600;display:block}
.sp-d{font-size:13.5px;color:var(--ink-2);margin:6px 0 14px;line-height:1.45}
.sp-url{width:100%;font-family:var(--sans);font-size:13px;color:var(--ink-2);
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;
  padding:10px 12px;overflow-x:auto}
.sp-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.sp-acts .btn{flex:1 1 auto;justify-content:center;white-space:normal}
.sp-copy.on{background:var(--gold-deep);color:#fff}
.sp-hint{font-size:11.5px;color:var(--ink-3);margin-top:10px;line-height:1.45}
@media(max-width:560px){
  .sp-box{padding:20px 16px 16px;border-radius:16px}
  .sp-t{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .sp-box,.sp-scrim{transition:none}
}

/* ---------------------------------------------------------------------
   THE CART DRAWER. Slides in over the shop so nobody loses their place.
   [hidden] at the top of this sheet is what actually removes it, and the
   script toggles the attribute, never a class on its own.
   --------------------------------------------------------------------- */
.cart-dr{position:fixed;inset:0;z-index:90;display:block}
.cd-scrim{position:absolute;inset:0;background:rgba(14,11,8,.5);opacity:0;
  transition:opacity .25s var(--ease)}
.cart-dr.on .cd-scrim{opacity:1}
.cd-panel{position:absolute;top:0;right:0;bottom:0;width:min(400px,100%);
  display:flex;flex-direction:column;background:var(--panel);
  border-left:1px solid var(--line);box-shadow:-24px 0 60px -30px rgba(23,19,13,.5);
  transform:translateX(100%);transition:transform .28s var(--ease)}
.cart-dr.on .cd-panel{transform:none}
.cd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
.cd-head b{font-family:var(--serif);font-size:19px;font-weight:600}
.cd-x{background:none;border:none;font-size:26px;line-height:1;color:var(--ink-3);
  cursor:pointer;padding:0 4px}
.cd-x:hover{color:var(--ink)}
.cd-body{flex:1 1 auto;overflow-y:auto;padding:12px 18px;display:grid;
  gap:12px;align-content:start}
.cd-empty{font-size:14px;color:var(--ink-3);padding:18px 0}
.cd-item{display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:start;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.cd-pic{width:54px;height:54px;border-radius:10px;overflow:hidden;display:grid;
  place-items:center;background:var(--panel-2)}
.cd-pic img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.cd-nm{font-size:13.5px;font-weight:600;line-height:1.35}
.cd-sub2{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.cd-row{display:flex;align-items:center;gap:10px;margin-top:7px;flex-wrap:wrap}
.cd-row .qty{transform:scale(.92);transform-origin:left center}
.cd-amt{margin-left:auto;font-size:13.5px;font-weight:650}
.cd-foot{flex:0 0 auto;padding:14px 18px 18px;border-top:1px solid var(--line);
  background:var(--panel-2)}
.cd-sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:14.5px;font-weight:600}
.cd-sum b{font-size:18px;letter-spacing:-.01em}
.cd-note{font-size:11.5px;color:var(--ink-3);margin:8px 0 12px;line-height:1.45}
.cd-go{width:100%;justify-content:center}
.nav-cta .bag{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linejoin:round;flex:0 0 auto}
@media(max-width:560px){.nav-cta .bag{display:none}}
html.cd-on{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .cd-panel,.cd-scrim{transition:none}
}

/* line hero */
.lh-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.lh-media{display:grid;place-items:center;min-height:240px}
.lh-media img{max-height:440px;width:auto;object-fit:contain;
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.5))}
.back{font-size:13.5px;color:var(--ink-3);display:inline-block;margin-bottom:14px}
.back::before{content:"\2190  "}
.back:hover{color:var(--gold-bright)}
.lh-price{font-size:20px;font-weight:650;margin-top:22px}
.lh-price small{display:block;font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:4px}
.lh-who{font-size:13.5px;color:var(--ink-3);margin-top:20px}
.lead-chip{display:inline-block;margin-top:12px;font-size:13px;border:1px solid var(--line-2);
  border-radius:99px;padding:4px 12px;color:var(--ink-2)}
.ks-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  margin-top:40px}
.ks{background:var(--bg-2);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.ks span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ks b{font-size:14.5px;font-weight:600;line-height:1.35}
@media(max-width:820px){.lh-grid{grid-template-columns:1fr}.lh-media{order:-1;min-height:0}
  .lh-media img{max-height:260px}}

/* model list */
.model{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  display:grid;grid-template-columns:220px 1fr;gap:24px;padding:20px;align-items:start}
.m-media{aspect-ratio:1;border-radius:14px;position:relative;overflow:hidden;
  background:radial-gradient(64% 62% at 50% 38%,#fffdf6 0%,#f3eee1 58%,#e9e2d1 100%)}
.m-media img{position:absolute;top:14px;left:14px;
  width:calc(100% - 28px);height:calc(100% - 28px);max-width:none;max-height:none;
  object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 12px 20px rgba(23,19,13,.2))}
.m-body{min-width:0}
.m-body h3{margin-bottom:10px}
.m-spec{list-style:none;margin:14px 0 0;display:grid;gap:6px}
.m-spec li{font-size:14px;color:var(--ink-2);display:flex;gap:10px}
.m-spec li span{flex:0 0 130px;color:var(--ink-3);font-size:12.5px;letter-spacing:.04em;
  text-transform:uppercase;padding-top:2px}
.m-full{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.src{font-size:12px;color:var(--ink-3);margin-top:12px;word-break:break-word}
@media(max-width:700px){.model{grid-template-columns:1fr;gap:16px}
  .m-media{max-width:200px}.m-spec li{flex-direction:column;gap:2px}
  .m-spec li span{flex:none}}

.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:4px}
.p-usd{font-size:19px;font-weight:700;letter-spacing:-.01em}
.p-sep{color:var(--ink-3)}
.p-cad{font-size:14px;color:var(--ink-2)}
.price small{flex-basis:100%;font-size:12px;color:var(--ink-3)}

/* spec table */
.spec-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec{width:100%;border-collapse:collapse;font-size:13.5px;min-width:min(100%,420px)}
.spec th,.spec td{text-align:left;vertical-align:top;padding:8px 12px 8px 0;
  border-bottom:1px solid var(--line)}
.spec th{width:38%;font-weight:600;color:var(--ink-3);font-size:12.5px}
.spec td{color:var(--ink-2)}
.sp-note{color:var(--ink-2)}

/* item grid */
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.item-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column}
.ic-media{aspect-ratio:4/3;position:relative;flex:0 0 auto;overflow:hidden;
  background:radial-gradient(64% 62% at 50% 38%,#fffdf6 0%,#f3eee1 58%,#e9e2d1 100%)}
.ic-media img{position:absolute;top:16px;left:16px;
  width:calc(100% - 32px);height:calc(100% - 32px);max-width:none;max-height:none;
  object-fit:contain}
.ic-media-empty{background:var(--panel-2)}
.ic-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.ic-body h4{font-size:14.5px;line-height:1.35;margin-bottom:8px}
.ic-spec{list-style:none;margin:0 0 10px;display:grid;gap:3px;flex:1}
.ic-spec li{font-size:12.5px;color:var(--ink-2)}
.ic-spec li span{color:var(--ink-3);display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.ic-body .price{margin-top:auto}
.ic-body .btn-add{margin-top:12px}

/* talk band */
.talk{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.facts{list-style:none;display:grid;gap:14px}
.facts li{border-left:2px solid var(--gold);padding-left:16px}
.facts b{display:block;font-size:14.5px;margin-bottom:3px}
.facts span{font-size:14px;color:var(--ink-2)}
@media(max-width:820px){.talk{grid-template-columns:1fr;gap:28px}}

.prov{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.prov summary{cursor:pointer;font-weight:600;font-size:14.5px}
.prov p{font-size:13.5px;color:var(--ink-2);margin:12px 0}
.prov ul{margin-left:18px;font-size:12.5px;color:var(--ink-3);display:grid;gap:4px}

/* order page */
.ord-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:34px;align-items:start}
@media(max-width:900px){.ord-grid{grid-template-columns:1fr}}
.ord-line{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.ol-media{width:76px;height:76px;flex:0 0 auto;min-height:0;overflow:hidden;
  border-radius:10px;display:grid;place-items:center;padding:8px;
  background:radial-gradient(64% 62% at 50% 38%,#fffdf6 0%,#f3eee1 58%,#e9e2d1 100%)}
.ol-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.ol-name{font-size:14.5px;font-weight:600;line-height:1.35}
.ol-line{font-size:12px;color:var(--ink-3);margin-top:2px}
.ol-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:9px;overflow:hidden}
.qty button{background:var(--panel-2);border:none;width:30px;height:30px;cursor:pointer;
  font-size:16px;color:var(--ink);line-height:1}
.qty button:hover{background:var(--gold-soft)}
.qty span{min-width:30px;text-align:center;font-size:14px;font-weight:600}
.ol-price{font-size:14.5px;font-weight:650;min-width:92px;text-align:right}
.ol-rm{background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:12.5px;text-decoration:underline}
.ol-rm:hover{color:#a3341f}
@media(max-width:560px){.ord-line{grid-template-columns:60px 1fr}
  .ol-media{width:60px;height:60px}.ol-right{grid-column:1/-1;justify-content:space-between}}
.ord-empty{color:var(--ink-3);font-size:15px}
.ord-empty a{color:var(--gold-deep);border-bottom:1px solid var(--gold-soft)}
.ord-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;
  position:sticky;top:90px}
@media(max-width:900px){.ord-card{position:static}}
.ord-card h3{margin-bottom:16px}
.ord-row{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;padding:6px 0;align-items:baseline}
.ord-row.sub{font-size:13px;color:var(--ink-3);padding-top:0}
.ord-row.big{font-size:17px;font-weight:650}
.ord-card hr{border:none;border-top:1px solid var(--line);margin:14px 0}
.ord-note{font-size:12.5px;color:var(--ink-3);margin-top:10px;line-height:1.55}
.ord-warn{margin-top:16px;background:var(--gold-soft);border:1px solid var(--line-2);
  border-radius:12px;padding:14px;font-size:13px;color:var(--ink-2);line-height:1.55}
.ord-warn b{color:var(--ink)}
.ord-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:820px}
.ff{display:flex;flex-direction:column;gap:6px}
.ff.wide{grid-column:1/-1}
.ff label{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.ff input,.ff select,.ff textarea{font-family:var(--sans);font-size:15px;padding:11px 13px;
  border:1px solid var(--line-2);border-radius:11px;background:var(--panel);color:var(--ink);width:100%}
.ff textarea{resize:vertical}
@media(max-width:640px){.ord-form{grid-template-columns:1fr}}
.pay-pending{background:var(--panel);border:1px dashed var(--line-2);border-radius:14px;
  padding:18px 20px;margin-bottom:18px}
.pay-pending h4{margin-bottom:8px}
.pay-pending p{font-size:14px;color:var(--ink-2)}
.ord-status{margin-top:12px;font-size:14px;color:var(--ink-2);min-height:22px}
.ord-status.ok{color:#2e6b34}
.ord-status.err{color:#a3341f}

/* deposit checkout + discount codes (2026-09-22) */
.pay-live{background:var(--gold-soft);border:1px solid var(--line-2);border-radius:14px;
  padding:18px 20px;margin-bottom:18px}
.pay-live h4{margin-bottom:8px}
.pay-live p{font-size:14px;color:var(--ink-2)}
.ord-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ord-code{margin:14px 0 4px}
.ord-code label{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:6px}
.ord-code-row{display:flex;gap:8px}
.ord-code-row input{flex:1;min-width:0;font-family:var(--sans);font-size:15px;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:11px;background:var(--panel);color:var(--ink)}
.ord-code-row .btn{padding:10px 16px;white-space:nowrap}
.ord-code-msg{font-size:13px;color:var(--ink-2);min-height:18px;margin-top:6px}
.ord-code-msg.ok{color:#2e6b34}
.ord-code-msg.err{color:#a3341f}

/* build families and the comparison table */
.fam{font-family:var(--serif);font-size:20px;font-weight:600;margin:28px 0 12px;
  display:flex;align-items:baseline;gap:10px}
.fam:first-of-type{margin-top:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.bt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0 6px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.bt{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.bt thead th{text-align:left;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:12px 16px;border-bottom:1px solid var(--line);
  background:var(--panel-2)}
.bt tbody th{text-align:left;font-weight:650;padding:13px 16px;white-space:nowrap}
.bt td{padding:13px 16px;vertical-align:middle;color:var(--ink-2)}
.bt tbody tr+tr th,.bt tbody tr+tr td{border-top:1px solid var(--line)}
.bt tbody tr:hover{background:var(--gold-soft)}
.bt-diff{font-size:13px;line-height:1.45;min-width:220px}
.bt-price{white-space:nowrap;text-align:right}
.bt-price b{display:block;color:var(--ink);font-size:14.5px}
.bt-price span{font-size:12px;color:var(--ink-3)}
.bt-act{text-align:right}
.bt-act .btn-add{width:auto;margin:0;padding:8px 16px;font-size:13px}
/* On a phone a wide table is a bad table. Each build becomes its own block,
   so nothing scrolls sideways and nothing is hidden off the edge. */
@media(max-width:700px){
  .bt-wrap{overflow:visible;border:none;background:none;margin:12px 0 4px}
  .bt{min-width:0;width:100%;display:block}
  .bt thead{display:none}
  .bt tbody,.bt tbody tr{display:block;width:100%}
  .bt tbody tr{background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:14px 16px;margin-bottom:10px}
  .bt tbody tr+tr th,.bt tbody tr+tr td{border-top:none}
  .bt tbody th,.bt td{display:block;padding:0;white-space:normal}
  .bt tbody th{font-size:15.5px;margin-bottom:6px}
  .bt-diff{min-width:0;margin-bottom:10px}
  .bt-price{text-align:left;display:flex!important;align-items:baseline;gap:8px;margin-bottom:12px}
  .bt-price b{display:inline}
  .bt-act{text-align:left}
  .bt-act .btn-add{width:100%}
}
.model-list{display:flex;flex-direction:column;gap:16px}

/* video and datasheet */
.vid video{width:100%;max-width:100%;max-height:72vh;height:auto;display:block;
  margin:0 auto;border-radius:16px;border:1px solid var(--line);background:#0d0b08}
.doc-dl{display:flex;align-items:center;gap:16px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:16px 20px;
  transition:border-color .2s,transform .15s}
.doc-dl:hover{border-color:var(--gold);transform:translateY(-1px)}
.doc-ic{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.06em;
  background:var(--gold-soft);color:var(--gold-deep);border:1px solid var(--line-2);
  border-radius:8px;padding:8px 10px}
.doc-t{display:flex;flex-direction:column;flex:1;min-width:0}
.doc-t b{font-size:15px}
.doc-t span{font-size:12.5px;color:var(--ink-3)}
.doc-go{font-size:13.5px;font-weight:600;color:var(--gold-deep);white-space:nowrap}

/* footer, matched to the marketing site */
footer{padding:48px 0 26px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:34px;
  border-bottom:1px solid var(--line)}
.foot-brand,.foot-co{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px}
.foot-brand .mark,.foot-co .mark{width:34px;height:34px}
.foot-tag{font-size:13.5px;color:var(--ink-2);margin-top:14px;max-width:38ch}
.foot-reach{font-size:12.5px;color:var(--ink-3);margin-top:12px}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.foot-col a,.foot-sub{font-size:13.5px;color:var(--ink-2)}
.foot-col a:hover{color:var(--gold-bright)}
.foot-sub{color:var(--ink-3);font-size:12.5px;line-height:1.6}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding-top:22px;flex-wrap:wrap}
.foot-legal{font-size:12px;color:var(--ink-3);max-width:70ch}
.foot-legal a:hover{color:var(--gold-bright)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}

/* contact card, the same shape as the contact block on coryai.ca itself */
button.btn{font-family:inherit;font-size:14.5px;cursor:pointer}
.contact-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:4px 22px}
.contact-card .row{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}
.contact-card .row:last-child{border-bottom:none}
.contact-card .k{flex:0 0 108px;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);padding-top:3px}
.contact-card .v{font-size:15.5px;font-weight:600;color:var(--ink)}
.contact-card .v a{color:var(--gold-deep)}
.contact-card .v a:hover{color:var(--gold)}
.contact-card .v.sm{font-size:13.5px;font-weight:400;color:var(--ink-2);line-height:1.65}
@media(max-width:560px){.contact-card .row{flex-direction:column;gap:3px}
  .contact-card .k{flex:none}}

/* ---------------------------------------------------------------------------
   Cory. Lifted from the launcher and panel on coryai.ca so the storefront and
   the marketing site are one assistant and not two. Colours are stated rather
   than tokenised because the panel is dark on every band, light or dark.
   --------------------------------------------------------------------------- */
#cory-launch{position:fixed;right:22px;bottom:22px;z-index:80;display:inline-flex;
  align-items:center;gap:10px;
  background:linear-gradient(150deg,#f2d187 0%,#ddad3f 34%,#d6a027 66%,#be8b26 100%);
  color:#17130d;font-family:var(--sans);font-weight:650;font-size:14.5px;border:none;
  border-radius:30px;padding:12px 18px 12px 14px;cursor:pointer;
  box-shadow:0 0 0 1.5px rgba(255,252,240,.6),0 0 26px 5px rgba(255,236,175,.78),
    0 14px 30px -8px rgba(80,54,8,.6),inset 0 1px 1px rgba(255,255,255,.7),
    inset 0 -2px 4px rgba(120,78,10,.32);
  transition:transform .18s,box-shadow .25s,opacity .2s}
#cory-launch:hover{transform:translateY(-2px);
  box-shadow:0 0 0 1.5px rgba(255,252,240,.75),0 0 34px 7px rgba(255,236,175,.9),
    0 16px 36px -8px rgba(80,54,8,.62),inset 0 1px 1px rgba(255,255,255,.78),
    inset 0 -2px 4px rgba(120,78,10,.32)}
#cory-launch svg{width:26px;height:26px}
#cory-launch.hide{opacity:0;pointer-events:none;transform:scale(.85)}
@media(max-width:520px){#cory-launch span{display:none}
  #cory-launch{padding:14px;border-radius:50%;right:16px;bottom:16px}}
#cory-panel{position:fixed;right:22px;bottom:22px;z-index:81;
  width:min(392px,calc(100vw - 32px));height:min(580px,calc(100dvh - 44px));
  background:#181410;border:1px solid #443a2b;border-radius:20px;display:flex;
  flex-direction:column;overflow:hidden;opacity:0;transform:translateY(16px) scale(.98);
  pointer-events:none;transition:opacity .25s,transform .25s;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55)}
#cory-panel.open{opacity:1;transform:none;pointer-events:auto}
@media(max-width:520px){#cory-panel{right:16px;bottom:16px;
  width:calc(100vw - 32px);height:min(600px,calc(100dvh - 32px))}}
.cp-head{display:flex;align-items:center;gap:12px;padding:15px 16px;
  border-bottom:1px solid #332b20;background:#201b13}
.cp-head .mark{width:34px;height:34px;flex:0 0 auto}
.cp-head .who{font-weight:650;color:#f6f2e9;font-size:15px;line-height:1.15}
.cp-head .st{font-size:11px;color:#8fc27f;display:flex;align-items:center;gap:6px;margin-top:3px;
  letter-spacing:.04em}
.cp-head .st::before{content:"";width:7px;height:7px;border-radius:50%;background:#57c46b;
  box-shadow:0 0 8px #57c46b;flex:0 0 auto}
.cp-x{margin-left:auto;background:none;border:none;color:#8f8674;font-size:24px;
  cursor:pointer;line-height:1;padding:2px 6px}
.cp-x:hover{color:#f6f2e9}
.cp-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:11px}
.cp-msg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.55}
.cp-msg.bot{background:#2a2318;color:#e9e2d3;border-bottom-left-radius:4px;align-self:flex-start}
.cp-msg.me{background:#d6a428;color:#17130d;border-bottom-right-radius:4px;align-self:flex-end}
.cp-typing{display:flex;gap:5px;align-items:center;padding:14px}
.cp-typing i{width:6px;height:6px;border-radius:50%;background:#8f8674;display:block;
  animation:cpb 1.2s infinite ease-in-out}
.cp-typing i:nth-child(2){animation-delay:.15s}
.cp-typing i:nth-child(3){animation-delay:.3s}
@keyframes cpb{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.cp-typing i{animation:none;opacity:.5}}
.cp-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 16px 12px}
.cp-chip{font-size:12px;color:#d6a428;background:transparent;border:1px solid #443a2b;
  border-radius:20px;padding:7px 12px;cursor:pointer;font-family:inherit;
  transition:background .2s,border-color .2s}
.cp-chip:hover{background:#201b13;border-color:#c69c34}
.cp-input{display:flex;gap:8px;padding:13px 15px;border-top:1px solid #332b20;background:#201b13}
.cp-input input{flex:1;min-width:0;background:#181410;border:1px solid #443a2b;border-radius:11px;
  padding:11px 13px;color:#f6f2e9;font-family:inherit;font-size:14px;outline:none}
.cp-input input:focus{border-color:#c69c34}
.cp-input button{background:#d6a428;border:none;border-radius:11px;padding:0 15px;cursor:pointer;
  color:#17130d;font-weight:700;font-size:16px}
.cp-note{font-size:10.5px;color:#8f8674;text-align:center;padding:0 16px 11px;line-height:1.5}
.cp-note a{color:#c69c34}
.cp-lead{display:flex;flex-direction:column;gap:8px;background:#221c14;border:1px solid #443a2b;
  border-radius:14px;padding:14px}
.cp-lead-h{font-size:13.5px;font-weight:650;color:#f6f2e9}
.cp-lead input,.cp-lead textarea{background:#181410;border:1px solid #443a2b;border-radius:9px;
  padding:9px 11px;color:#f6f2e9;font-family:inherit;font-size:13.5px;outline:none;width:100%}
.cp-lead input:focus,.cp-lead textarea:focus{border-color:#c69c34}
.cp-lead button{background:#d6a428;border:none;border-radius:9px;padding:10px 14px;
  color:#17130d;font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit}
.cp-lead-note{font-size:10.5px;color:#8f8674;line-height:1.5}

/* Voice hero. Lifted from the same block on coryai.ca's index.html, so the
   mic, the pulse rings and the state wording are the ones a visitor already
   met on the main page. The one change is the monospace stack, written out
   because the storefront's CSS has no --mono token. */
#cory-panel .cp-head .st{color:#8fc27f}
#cp-voice{display:flex;align-items:center;gap:13px;padding:14px 15px;
  border-bottom:1px solid #332b20;background:linear-gradient(180deg,#241d14,#1b1610)}
#cp-voice-btn{position:relative;flex:0 0 auto;width:58px;height:58px;border-radius:50%;
  border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  color:#17130d;
  background:linear-gradient(150deg,#f2d187 0%,#ddad3f 40%,#d6a027 72%,#be8b26 100%);
  box-shadow:0 0 0 1.5px rgba(255,252,240,.5),0 0 20px 3px rgba(255,236,175,.5),
    inset 0 1px 1px rgba(255,255,255,.7);transition:transform .18s,box-shadow .25s}
#cp-voice-btn:hover{transform:translateY(-1px);
  box-shadow:0 0 0 1.5px rgba(255,252,240,.7),0 0 28px 5px rgba(255,236,175,.72),
    inset 0 1px 1px rgba(255,255,255,.8)}
#cp-voice-btn:focus-visible{outline:2px solid #f2d187;outline-offset:3px}
#cp-voice-btn svg{width:26px;height:26px;position:relative;z-index:2}
#cp-voice-btn::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(232,182,48,.6);opacity:0;pointer-events:none}
.cpv-txt{flex:1 1 auto;min-width:0}
.cpv-title{font-weight:650;color:#f6f2e9;font-size:15px;line-height:1.2}
.cpv-state{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
  color:#c2b39a;margin-top:3px;line-height:1.35}
#cp-voice-end{flex:0 0 auto;display:none;background:#2a2318;color:#e9c98f;
  border:1px solid #5a4a2b;border-radius:20px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;
  padding:6px 11px;cursor:pointer;transition:background .2s}
#cp-voice-end:hover{background:#342a1b;border-color:#c69c34}
#cp-voice[data-state="requesting"] #cp-voice-end,
#cp-voice[data-state="connecting"] #cp-voice-end,
#cp-voice[data-state="listening"] #cp-voice-end,
#cp-voice[data-state="speaking"] #cp-voice-end{display:inline-block}
#cp-voice[data-state="requesting"] #cp-voice-btn::before,
#cp-voice[data-state="connecting"] #cp-voice-btn::before{opacity:1;
  animation:cpvPulse 1.3s ease-out infinite}
#cp-voice[data-state="listening"] #cp-voice-btn::before{opacity:1;
  border-color:rgba(120,214,138,.75);animation:cpvPulse 1.7s ease-out infinite}
#cp-voice[data-state="speaking"] #cp-voice-btn::before{opacity:1;
  animation:cpvPulse .9s ease-out infinite}
#cp-voice[data-state="listening"] .cpv-state{color:#8fd08a}
#cp-voice[data-state="speaking"] .cpv-state{color:#f2cf7a}
#cp-voice[data-state="blocked"] .cpv-state,
#cp-voice[data-state="error"] .cpv-state{color:#e6a07f}
@keyframes cpvPulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){#cp-voice-btn::before{animation:none!important}}
.cp-or{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;
  color:#8f8674;text-align:center;padding:4px 16px 0}

/* ---------------------------------------------------------- our software */
.soft-panel{display:grid;grid-template-columns:1fr 200px;gap:28px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:clamp(22px,3vw,38px);margin-top:18px}
.soft-body h3{font-size:clamp(20px,2.1vw,26px);letter-spacing:-.015em}
.soft-body p{color:var(--ink-2);margin-top:10px;max-width:62ch}
.soft-body .talk-ctas{margin-top:20px}
.soft-mark{display:grid;place-items:center}
.soft-mark .mark{width:126px;height:126px;opacity:.9;
  filter:drop-shadow(0 8px 24px rgba(201,162,39,.32))}
@media(max-width:760px){.soft-panel{grid-template-columns:1fr}
  .soft-mark{display:none}}
.pc-media-soft{display:grid;place-items:center;
  background:linear-gradient(150deg,var(--panel-2),var(--bg-2))}
.pc-media-soft .mark{width:92px;height:92px;position:static;
  filter:drop-shadow(0 6px 18px rgba(201,162,39,.3))}

/* ------------------------------------------------------------------ parts */
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.jump .btn span{display:inline-block;margin-left:7px;font-size:12px;color:var(--ink-3)}
.fam a{border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.fam a:hover{border-color:var(--gold)}

/* ----------------------------------------------- expandable build details */
.bt-name{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;text-align:left}
.bt-name:hover{color:var(--gold-deep)}
.bt-chev{width:8px;height:8px;flex:0 0 auto;border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .22s var(--ease)}
.bt-name[aria-expanded="true"] .bt-chev{transform:rotate(-135deg) translate(-2px,-2px);
  border-color:var(--gold-deep)}
.bt-detail>td{padding:0 16px 20px;border-top:0}
.bt-detail:hover{background:none}
.bt-dwrap{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.bt-dmedia{aspect-ratio:1;position:relative;overflow:hidden;border-radius:12px;
  background:var(--panel-2)}
.bt-dmedia img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);
  object-fit:contain}
.bt-dbody h4{font-size:17px;letter-spacing:-.01em}
.bt-dbody .price{margin:6px 0 14px}
.bt-dadd{margin-top:16px}
.bt-nospec{font-size:13.5px;color:var(--ink-2);max-width:60ch}
@media(max-width:700px){.bt-dwrap{grid-template-columns:1fr}
  .bt-dmedia{max-width:200px}}

/* --------------------------------------------------------- picture viewer */
.lh-media img,.m-media img,.ic-media img,.bt-dmedia img{cursor:zoom-in}
.pc-zoom{position:absolute;right:10px;bottom:10px;z-index:2;width:34px;height:34px;
  border-radius:10px;border:1px solid var(--line-2);background:rgba(255,255,255,.86);
  color:var(--ink-2);cursor:zoom-in;display:grid;place-items:center;padding:0;
  opacity:0;transform:translateY(4px);transition:opacity .2s var(--ease),transform .2s var(--ease),
  background .2s var(--ease),color .2s var(--ease)}
.pc-zoom svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.prod-card:hover .pc-zoom,.pc-zoom:focus-visible{opacity:1;transform:none}
.pc-zoom:hover{background:var(--gold-bright);color:#17130d;border-color:var(--gold-bright)}
@media(hover:none){.pc-zoom{opacity:1;transform:none}}
html.lb-on{overflow:hidden}
/* A class that sets display outranks the browser's own [hidden] rule, so the
   viewer must switch itself off explicitly. Without these two selectors the
   overlay is display:grid at opacity 0 across the whole viewport and silently
   swallows every click on the site. Broke the storefront, 2026-09-17. */
.lb[hidden],.lb button[hidden]{display:none!important}
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(14,11,8,.93);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s var(--ease);padding:64px 18px 82px}
.lb.on{opacity:1}
.lb-fig{display:grid;place-items:center;gap:16px;max-width:1100px;width:100%}
.lb-fig img{max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;
  object-fit:contain;border-radius:10px}
.lb-fig figcaption{color:#c3bbaa;font-size:14px;text-align:center;max-width:60ch}
.lb button{position:absolute;background:rgba(255,255,255,.08);color:#f6f2e9;
  border:1px solid rgba(255,255,255,.16);border-radius:12px;cursor:pointer;
  display:grid;place-items:center;transition:background .18s var(--ease)}
.lb button:hover{background:var(--gold-bright);color:#17130d;border-color:var(--gold-bright)}
.lb-x{top:18px;right:18px;width:44px;height:44px;font-size:26px;line-height:1}
.lb-p,.lb-n{top:50%;transform:translateY(-50%);width:46px;height:64px;font-size:30px;line-height:1}
.lb-p{left:18px}
.lb-n{right:18px}
@media(max-width:640px){.lb{padding:58px 10px 92px}
  .lb-p,.lb-n{top:auto;bottom:18px;transform:none;height:46px}
  .lb-p{left:calc(50% - 56px)}.lb-n{right:calc(50% - 56px)}}
@media(prefers-reduced-motion:reduce){.lb,.lb.on{transition:none}}

/* language switcher, matched to the marketing site */
.lang-switch{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
.lang-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);
  font-size:13px;font-weight:600;letter-spacing:.02em;color:#c3bbaa;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  padding:7px 10px;border-radius:10px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;line-height:1}
.lang-btn:hover{color:#fff;border-color:rgba(232,182,48,.55);background:rgba(255,255,255,.08)}
.lang-globe{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;flex:0 0 auto}
.lang-cur{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em}
.lang-caret{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.2;
  opacity:.75;flex:0 0 auto;transition:transform .2s}
.lang-switch.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:158px;list-style:none;
  margin:0;padding:6px;background:rgba(22,18,13,.98);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border:1px solid rgba(255,255,255,.13);border-radius:12px;
  box-shadow:0 20px 48px -16px rgba(0,0,0,.7);opacity:0;visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:82}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-switch.up .lang-menu{top:auto;bottom:calc(100% + 9px);transform:translateY(6px)}
.lang-switch.up.open .lang-menu{transform:translateY(0)}
.lang-menu li{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:9px 11px;border-radius:8px;cursor:pointer;color:#d8d0c0;font-size:14px;
  font-weight:500;transition:background .15s,color .15s}
.lang-menu li:hover,.lang-menu li:focus-visible{background:rgba(232,182,48,.13);color:#fff;outline:none}
.lang-menu li.sel{color:#e8b838}
.lang-menu li .lang-side{display:inline-flex;align-items:center;gap:8px}
.lang-menu li .lang-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.08em;color:#8f8674;opacity:.85}
.lang-menu li.sel .lang-code{color:#e8b838;opacity:1}
.lang-menu li .lang-check{width:15px;height:15px;stroke:#e8b838;fill:none;stroke-width:2.6;
  opacity:0;flex:0 0 auto}
.lang-menu li.sel .lang-check{opacity:1}
.foot-lang .lang-btn{background:rgba(255,255,255,.04)}
/* The footer bottom row is three items now, so it is allowed to wrap. */
.foot-bottom{flex-wrap:wrap}
/* Once that row wraps, the footer switcher sits at the LEFT of its own line,
   and a menu anchored to its right edge hangs off the side of the screen. */
@media(max-width:700px){.foot-lang .lang-menu{right:auto;left:0}}
/* Once the links collapse, the globe takes the space they left rather than
   sitting against the wordmark with the hamburger pushed to the far side. */
@media(max-width:900px){
  #nav .lang-switch{margin-left:auto}
  .hamb{margin-left:8px}
}
/* At phone width the nav carries the wordmark, the globe, the order button
   and the hamburger. Everything gives up a little so none of it wraps. */
@media(max-width:520px){
  .nav-in{gap:9px;padding:10px 16px}
  .brand{font-size:18px;gap:8px}
  .brand .mark{width:34px;height:34px}
  #nav .lang-btn{padding:6px 8px;gap:5px;font-size:12px}
  #nav .lang-caret{display:none}
  .nav-cta{padding:7px 10px;font-size:12px;gap:6px}
}
/* country + payment plan (2026-09-22) */
.ord-cty{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.ord-cty>span{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;background:var(--panel)}
.seg button{font-family:var(--sans);font-size:13.5px;font-weight:600;padding:7px 14px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer}
.seg button.on{background:var(--gold-bright);color:#17130d}
.ord-plan{display:grid;gap:8px;margin:12px 0 6px}
.plan{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;cursor:pointer;background:var(--panel)}
.plan:has(input:checked){border-color:var(--gold-bright);box-shadow:0 0 0 1px var(--gold-bright) inset}
.plan input{margin:4px 0 0;accent-color:#c9a227;flex:none}
.plan b{display:block;font-size:14.5px}
.plan small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.ord-row.sub>span:last-child{text-align:right}

/* build families and the comparison table */
.fam{font-family:var(--serif);font-size:20px;font-weight:600;margin:28px 0 12px;
  display:flex;align-items:baseline;gap:10px}
.fam:first-of-type{margin-top:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.bt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0 6px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.bt{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.bt thead th{text-align:left;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:12px 16px;border-bottom:1px solid var(--line);
  background:var(--panel-2)}
.bt tbody th{text-align:left;font-weight:650;padding:13px 16px;white-space:nowrap}
.bt td{padding:13px 16px;vertical-align:middle;color:var(--ink-2)}
.bt tbody tr+tr th,.bt tbody tr+tr td{border-top:1px solid var(--line)}
.bt tbody tr:hover{background:var(--gold-soft)}
.bt-diff{font-size:13px;line-height:1.45;min-width:220px}
.bt-price{white-space:nowrap;text-align:right}
.bt-price b{display:block;color:var(--ink);font-size:14.5px}
.bt-price span{font-size:12px;color:var(--ink-3)}
.bt-act{text-align:right}
.bt-act .btn-add{width:auto;margin:0;padding:8px 16px;font-size:13px}
/* On a phone a wide table is a bad table. Each build becomes its own block,
   so nothing scrolls sideways and nothing is hidden off the edge. */
@media(max-width:700px){
  .bt-wrap{overflow:visible;border:none;background:none;margin:12px 0 4px}
  .bt{min-width:0;width:100%;display:block}
  .bt thead{display:none}
  .bt tbody,.bt tbody tr{display:block;width:100%}
  .bt tbody tr{background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:14px 16px;margin-bottom:10px}
  .bt tbody tr+tr th,.bt tbody tr+tr td{border-top:none}
  .bt tbody th,.bt td{display:block;padding:0;white-space:normal}
  .bt tbody th{font-size:15.5px;margin-bottom:6px}
  .bt-diff{min-width:0;margin-bottom:10px}
  .bt-price{text-align:left;display:flex!important;align-items:baseline;gap:8px;margin-bottom:12px}
  .bt-price b{display:inline}
  .bt-act{text-align:left}
  .bt-act .btn-add{width:100%}
}
.model-list{display:flex;flex-direction:column;gap:16px}

/* video and datasheet */
.vid video{width:100%;max-width:100%;max-height:72vh;height:auto;display:block;
  margin:0 auto;border-radius:16px;border:1px solid var(--line);background:#0d0b08}
.doc-dl{display:flex;align-items:center;gap:16px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:16px 20px;
  transition:border-color .2s,transform .15s}
.doc-dl:hover{border-color:var(--gold);transform:translateY(-1px)}
.doc-ic{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.06em;
  background:var(--gold-soft);color:var(--gold-deep);border:1px solid var(--line-2);
  border-radius:8px;padding:8px 10px}
.doc-t{display:flex;flex-direction:column;flex:1;min-width:0}
.doc-t b{font-size:15px}
.doc-t span{font-size:12.5px;color:var(--ink-3)}
.doc-go{font-size:13.5px;font-weight:600;color:var(--gold-deep);white-space:nowrap}

/* footer, matched to the marketing site */
footer{padding:48px 0 26px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:34px;
  border-bottom:1px solid var(--line)}
.foot-brand,.foot-co{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px}
.foot-brand .mark,.foot-co .mark{width:34px;height:34px}
.foot-tag{font-size:13.5px;color:var(--ink-2);margin-top:14px;max-width:38ch}
.foot-reach{font-size:12.5px;color:var(--ink-3);margin-top:12px}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.foot-col a,.foot-sub{font-size:13.5px;color:var(--ink-2)}
.foot-col a:hover{color:var(--gold-bright)}
.foot-sub{color:var(--ink-3);font-size:12.5px;line-height:1.6}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding-top:22px;flex-wrap:wrap}
.foot-legal{font-size:12px;color:var(--ink-3);max-width:70ch}
.foot-legal a:hover{color:var(--gold-bright)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}

/* contact card, the same shape as the contact block on coryai.ca itself */
button.btn{font-family:inherit;font-size:14.5px;cursor:pointer}
.contact-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:4px 22px}
.contact-card .row{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}
.contact-card .row:last-child{border-bottom:none}
.contact-card .k{flex:0 0 108px;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);padding-top:3px}
.contact-card .v{font-size:15.5px;font-weight:600;color:var(--ink)}
.contact-card .v a{color:var(--gold-deep)}
.contact-card .v a:hover{color:var(--gold)}
.contact-card .v.sm{font-size:13.5px;font-weight:400;color:var(--ink-2);line-height:1.65}
@media(max-width:560px){.contact-card .row{flex-direction:column;gap:3px}
  .contact-card .k{flex:none}}

/* ---------------------------------------------------------------------------
   Cory. Lifted from the launcher and panel on coryai.ca so the storefront and
   the marketing site are one assistant and not two. Colours are stated rather
   than tokenised because the panel is dark on every band, light or dark.
   --------------------------------------------------------------------------- */
#cory-launch{position:fixed;right:22px;bottom:22px;z-index:80;display:inline-flex;
  align-items:center;gap:10px;
  background:linear-gradient(150deg,#f2d187 0%,#ddad3f 34%,#d6a027 66%,#be8b26 100%);
  color:#17130d;font-family:var(--sans);font-weight:650;font-size:14.5px;border:none;
  border-radius:30px;padding:12px 18px 12px 14px;cursor:pointer;
  box-shadow:0 0 0 1.5px rgba(255,252,240,.6),0 0 26px 5px rgba(255,236,175,.78),
    0 14px 30px -8px rgba(80,54,8,.6),inset 0 1px 1px rgba(255,255,255,.7),
    inset 0 -2px 4px rgba(120,78,10,.32);
  transition:transform .18s,box-shadow .25s,opacity .2s}
#cory-launch:hover{transform:translateY(-2px);
  box-shadow:0 0 0 1.5px rgba(255,252,240,.75),0 0 34px 7px rgba(255,236,175,.9),
    0 16px 36px -8px rgba(80,54,8,.62),inset 0 1px 1px rgba(255,255,255,.78),
    inset 0 -2px 4px rgba(120,78,10,.32)}
#cory-launch svg{width:26px;height:26px}
#cory-launch.hide{opacity:0;pointer-events:none;transform:scale(.85)}
@media(max-width:520px){#cory-launch span{display:none}
  #cory-launch{padding:14px;border-radius:50%;right:16px;bottom:16px}}
#cory-panel{position:fixed;right:22px;bottom:22px;z-index:81;
  width:min(392px,calc(100vw - 32px));height:min(580px,calc(100dvh - 44px));
  background:#181410;border:1px solid #443a2b;border-radius:20px;display:flex;
  flex-direction:column;overflow:hidden;opacity:0;transform:translateY(16px) scale(.98);
  pointer-events:none;transition:opacity .25s,transform .25s;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55)}
#cory-panel.open{opacity:1;transform:none;pointer-events:auto}
@media(max-width:520px){#cory-panel{right:16px;bottom:16px;
  width:calc(100vw - 32px);height:min(600px,calc(100dvh - 32px))}}
.cp-head{display:flex;align-items:center;gap:12px;padding:15px 16px;
  border-bottom:1px solid #332b20;background:#201b13}
.cp-head .mark{width:34px;height:34px;flex:0 0 auto}
.cp-head .who{font-weight:650;color:#f6f2e9;font-size:15px;line-height:1.15}
.cp-head .st{font-size:11px;color:#8fc27f;display:flex;align-items:center;gap:6px;margin-top:3px;
  letter-spacing:.04em}
.cp-head .st::before{content:"";width:7px;height:7px;border-radius:50%;background:#57c46b;
  box-shadow:0 0 8px #57c46b;flex:0 0 auto}
.cp-x{margin-left:auto;background:none;border:none;color:#8f8674;font-size:24px;
  cursor:pointer;line-height:1;padding:2px 6px}
.cp-x:hover{color:#f6f2e9}
.cp-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:11px}
.cp-msg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.55}
.cp-msg.bot{background:#2a2318;color:#e9e2d3;border-bottom-left-radius:4px;align-self:flex-start}
.cp-msg.me{background:#d6a428;color:#17130d;border-bottom-right-radius:4px;align-self:flex-end}
.cp-typing{display:flex;gap:5px;align-items:center;padding:14px}
.cp-typing i{width:6px;height:6px;border-radius:50%;background:#8f8674;display:block;
  animation:cpb 1.2s infinite ease-in-out}
.cp-typing i:nth-child(2){animation-delay:.15s}
.cp-typing i:nth-child(3){animation-delay:.3s}
@keyframes cpb{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.cp-typing i{animation:none;opacity:.5}}
.cp-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 16px 12px}
.cp-chip{font-size:12px;color:#d6a428;background:transparent;border:1px solid #443a2b;
  border-radius:20px;padding:7px 12px;cursor:pointer;font-family:inherit;
  transition:background .2s,border-color .2s}
.cp-chip:hover{background:#201b13;border-color:#c69c34}
.cp-input{display:flex;gap:8px;padding:13px 15px;border-top:1px solid #332b20;background:#201b13}
.cp-input input{flex:1;min-width:0;background:#181410;border:1px solid #443a2b;border-radius:11px;
  padding:11px 13px;color:#f6f2e9;font-family:inherit;font-size:14px;outline:none}
.cp-input input:focus{border-color:#c69c34}
.cp-input button{background:#d6a428;border:none;border-radius:11px;padding:0 15px;cursor:pointer;
  color:#17130d;font-weight:700;font-size:16px}
.cp-note{font-size:10.5px;color:#8f8674;text-align:center;padding:0 16px 11px;line-height:1.5}
.cp-note a{color:#c69c34}
.cp-lead{display:flex;flex-direction:column;gap:8px;background:#221c14;border:1px solid #443a2b;
  border-radius:14px;padding:14px}
.cp-lead-h{font-size:13.5px;font-weight:650;color:#f6f2e9}
.cp-lead input,.cp-lead textarea{background:#181410;border:1px solid #443a2b;border-radius:9px;
  padding:9px 11px;color:#f6f2e9;font-family:inherit;font-size:13.5px;outline:none;width:100%}
.cp-lead input:focus,.cp-lead textarea:focus{border-color:#c69c34}
.cp-lead button{background:#d6a428;border:none;border-radius:9px;padding:10px 14px;
  color:#17130d;font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit}
.cp-lead-note{font-size:10.5px;color:#8f8674;line-height:1.5}

/* Voice hero. Lifted from the same block on coryai.ca's index.html, so the
   mic, the pulse rings and the state wording are the ones a visitor already
   met on the main page. The one change is the monospace stack, written out
   because the storefront's CSS has no --mono token. */
#cory-panel .cp-head .st{color:#8fc27f}
#cp-voice{display:flex;align-items:center;gap:13px;padding:14px 15px;
  border-bottom:1px solid #332b20;background:linear-gradient(180deg,#241d14,#1b1610)}
#cp-voice-btn{position:relative;flex:0 0 auto;width:58px;height:58px;border-radius:50%;
  border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  color:#17130d;
  background:linear-gradient(150deg,#f2d187 0%,#ddad3f 40%,#d6a027 72%,#be8b26 100%);
  box-shadow:0 0 0 1.5px rgba(255,252,240,.5),0 0 20px 3px rgba(255,236,175,.5),
    inset 0 1px 1px rgba(255,255,255,.7);transition:transform .18s,box-shadow .25s}
#cp-voice-btn:hover{transform:translateY(-1px);
  box-shadow:0 0 0 1.5px rgba(255,252,240,.7),0 0 28px 5px rgba(255,236,175,.72),
    inset 0 1px 1px rgba(255,255,255,.8)}
#cp-voice-btn:focus-visible{outline:2px solid #f2d187;outline-offset:3px}
#cp-voice-btn svg{width:26px;height:26px;position:relative;z-index:2}
#cp-voice-btn::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(232,182,48,.6);opacity:0;pointer-events:none}
.cpv-txt{flex:1 1 auto;min-width:0}
.cpv-title{font-weight:650;color:#f6f2e9;font-size:15px;line-height:1.2}
.cpv-state{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
  color:#c2b39a;margin-top:3px;line-height:1.35}
#cp-voice-end{flex:0 0 auto;display:none;background:#2a2318;color:#e9c98f;
  border:1px solid #5a4a2b;border-radius:20px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;
  padding:6px 11px;cursor:pointer;transition:background .2s}
#cp-voice-end:hover{background:#342a1b;border-color:#c69c34}
#cp-voice[data-state="requesting"] #cp-voice-end,
#cp-voice[data-state="connecting"] #cp-voice-end,
#cp-voice[data-state="listening"] #cp-voice-end,
#cp-voice[data-state="speaking"] #cp-voice-end{display:inline-block}
#cp-voice[data-state="requesting"] #cp-voice-btn::before,
#cp-voice[data-state="connecting"] #cp-voice-btn::before{opacity:1;
  animation:cpvPulse 1.3s ease-out infinite}
#cp-voice[data-state="listening"] #cp-voice-btn::before{opacity:1;
  border-color:rgba(120,214,138,.75);animation:cpvPulse 1.7s ease-out infinite}
#cp-voice[data-state="speaking"] #cp-voice-btn::before{opacity:1;
  animation:cpvPulse .9s ease-out infinite}
#cp-voice[data-state="listening"] .cpv-state{color:#8fd08a}
#cp-voice[data-state="speaking"] .cpv-state{color:#f2cf7a}
#cp-voice[data-state="blocked"] .cpv-state,
#cp-voice[data-state="error"] .cpv-state{color:#e6a07f}
@keyframes cpvPulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){#cp-voice-btn::before{animation:none!important}}
.cp-or{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;
  color:#8f8674;text-align:center;padding:4px 16px 0}

/* ---------------------------------------------------------- our software */
.soft-panel{display:grid;grid-template-columns:1fr 200px;gap:28px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:clamp(22px,3vw,38px);margin-top:18px}
.soft-body h3{font-size:clamp(20px,2.1vw,26px);letter-spacing:-.015em}
.soft-body p{color:var(--ink-2);margin-top:10px;max-width:62ch}
.soft-body .talk-ctas{margin-top:20px}
.soft-mark{display:grid;place-items:center}
.soft-mark .mark{width:126px;height:126px;opacity:.9;
  filter:drop-shadow(0 8px 24px rgba(201,162,39,.32))}
@media(max-width:760px){.soft-panel{grid-template-columns:1fr}
  .soft-mark{display:none}}
.pc-media-soft{display:grid;place-items:center;
  background:linear-gradient(150deg,var(--panel-2),var(--bg-2))}
.pc-media-soft .mark{width:92px;height:92px;position:static;
  filter:drop-shadow(0 6px 18px rgba(201,162,39,.3))}

/* ------------------------------------------------------------------ parts */
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.jump .btn span{display:inline-block;margin-left:7px;font-size:12px;color:var(--ink-3)}
.fam a{border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.fam a:hover{border-color:var(--gold)}

/* ----------------------------------------------- expandable build details */
.bt-name{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;text-align:left}
.bt-name:hover{color:var(--gold-deep)}
.bt-chev{width:8px;height:8px;flex:0 0 auto;border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .22s var(--ease)}
.bt-name[aria-expanded="true"] .bt-chev{transform:rotate(-135deg) translate(-2px,-2px);
  border-color:var(--gold-deep)}
.bt-detail>td{padding:0 16px 20px;border-top:0}
.bt-detail:hover{background:none}
.bt-dwrap{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.bt-dmedia{aspect-ratio:1;position:relative;overflow:hidden;border-radius:12px;
  background:var(--panel-2)}
.bt-dmedia img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);
  object-fit:contain}
.bt-dbody h4{font-size:17px;letter-spacing:-.01em}
.bt-dbody .price{margin:6px 0 14px}
.bt-dadd{margin-top:16px}
.bt-nospec{font-size:13.5px;color:var(--ink-2);max-width:60ch}
@media(max-width:700px){.bt-dwrap{grid-template-columns:1fr}
  .bt-dmedia{max-width:200px}}

/* --------------------------------------------------------- picture viewer */
.lh-media img,.m-media img,.ic-media img,.bt-dmedia img{cursor:zoom-in}
.pc-zoom{position:absolute;right:10px;bottom:10px;z-index:2;width:34px;height:34px;
  border-radius:10px;border:1px solid var(--line-2);background:rgba(255,255,255,.86);
  color:var(--ink-2);cursor:zoom-in;display:grid;place-items:center;padding:0;
  opacity:0;transform:translateY(4px);transition:opacity .2s var(--ease),transform .2s var(--ease),
  background .2s var(--ease),color .2s var(--ease)}
.pc-zoom svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.prod-card:hover .pc-zoom,.pc-zoom:focus-visible{opacity:1;transform:none}
.pc-zoom:hover{background:var(--gold-bright);color:#17130d;border-color:var(--gold-bright)}
@media(hover:none){.pc-zoom{opacity:1;transform:none}}
html.lb-on{overflow:hidden}
/* A class that sets display outranks the browser's own [hidden] rule, so the
   viewer must switch itself off explicitly. Without these two selectors the
   overlay is display:grid at opacity 0 across the whole viewport and silently
   swallows every click on the site. Broke the storefront, 2026-09-17. */
.lb[hidden],.lb button[hidden]{display:none!important}
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(14,11,8,.93);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s var(--ease);padding:64px 18px 82px}
.lb.on{opacity:1}
.lb-fig{display:grid;place-items:center;gap:16px;max-width:1100px;width:100%}
.lb-fig img{max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;
  object-fit:contain;border-radius:10px}
.lb-fig figcaption{color:#c3bbaa;font-size:14px;text-align:center;max-width:60ch}
.lb button{position:absolute;background:rgba(255,255,255,.08);color:#f6f2e9;
  border:1px solid rgba(255,255,255,.16);border-radius:12px;cursor:pointer;
  display:grid;place-items:center;transition:background .18s var(--ease)}
.lb button:hover{background:var(--gold-bright);color:#17130d;border-color:var(--gold-bright)}
.lb-x{top:18px;right:18px;width:44px;height:44px;font-size:26px;line-height:1}
.lb-p,.lb-n{top:50%;transform:translateY(-50%);width:46px;height:64px;font-size:30px;line-height:1}
.lb-p{left:18px}
.lb-n{right:18px}
@media(max-width:640px){.lb{padding:58px 10px 92px}
  .lb-p,.lb-n{top:auto;bottom:18px;transform:none;height:46px}
  .lb-p{left:calc(50% - 56px)}.lb-n{right:calc(50% - 56px)}}
@media(prefers-reduced-motion:reduce){.lb,.lb.on{transition:none}}

/* language switcher, matched to the marketing site */
.lang-switch{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
.lang-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);
  font-size:13px;font-weight:600;letter-spacing:.02em;color:#c3bbaa;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  padding:7px 10px;border-radius:10px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;line-height:1}
.lang-btn:hover{color:#fff;border-color:rgba(232,182,48,.55);background:rgba(255,255,255,.08)}
.lang-globe{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;flex:0 0 auto}
.lang-cur{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em}
.lang-caret{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.2;
  opacity:.75;flex:0 0 auto;transition:transform .2s}
.lang-switch.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:158px;list-style:none;
  margin:0;padding:6px;background:rgba(22,18,13,.98);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border:1px solid rgba(255,255,255,.13);border-radius:12px;
  box-shadow:0 20px 48px -16px rgba(0,0,0,.7);opacity:0;visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:82}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-switch.up .lang-menu{top:auto;bottom:calc(100% + 9px);transform:translateY(6px)}
.lang-switch.up.open .lang-menu{transform:translateY(0)}
.lang-menu li{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:9px 11px;border-radius:8px;cursor:pointer;color:#d8d0c0;font-size:14px;
  font-weight:500;transition:background .15s,color .15s}
.lang-menu li:hover,.lang-menu li:focus-visible{background:rgba(232,182,48,.13);color:#fff;outline:none}
.lang-menu li.sel{color:#e8b838}
.lang-menu li .lang-side{display:inline-flex;align-items:center;gap:8px}
.lang-menu li .lang-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.08em;color:#8f8674;opacity:.85}
.lang-menu li.sel .lang-code{color:#e8b838;opacity:1}
.lang-menu li .lang-check{width:15px;height:15px;stroke:#e8b838;fill:none;stroke-width:2.6;
  opacity:0;flex:0 0 auto}
.lang-menu li.sel .lang-check{opacity:1}
.foot-lang .lang-btn{background:rgba(255,255,255,.04)}
/* The footer bottom row is three items now, so it is allowed to wrap. */
.foot-bottom{flex-wrap:wrap}
/* Once that row wraps, the footer switcher sits at the LEFT of its own line,
   and a menu anchored to its right edge hangs off the side of the screen. */
@media(max-width:700px){.foot-lang .lang-menu{right:auto;left:0}}
/* Once the links collapse, the globe takes the space they left rather than
   sitting against the wordmark with the hamburger pushed to the far side. */
@media(max-width:900px){
  #nav .lang-switch{margin-left:auto}
  .hamb{margin-left:8px}
}
/* At phone width the nav carries the wordmark, the globe, the order button
   and the hamburger. Everything gives up a little so none of it wraps. */
@media(max-width:520px){
  .nav-in{gap:9px;padding:10px 16px}
  .brand{font-size:18px;gap:8px}
  .brand .mark{width:34px;height:34px}
  #nav .lang-btn{padding:6px 8px;gap:5px;font-size:12px}
  #nav .lang-caret{display:none}
  .nav-cta{padding:7px 10px;font-size:12px;gap:6px}
}

/* =====================================================================
   STOREFRONT SIMPLIFICATION (Mike, 2026-09-22): purpose-first front door.
   Four doors, a shortlist of picks behind each, one recommended build per
   line front and centre, hands as a toggle, everything else under Customize.
   Added after the Shopify grid; the grid CSS above is left in place and just
   no longer rendered on the landing.
   ===================================================================== */
.doors-hero{padding:clamp(34px,5vw,64px) 0 clamp(30px,4vw,52px)}
.doors-hero .eyebrow{color:var(--gold-bright)}
.doors-hero h1{font-family:var(--serif);font-size:clamp(30px,5vw,50px);line-height:1.05;letter-spacing:-.01em;margin:.2em 0 .35em}
.doors-hero h1 em{color:var(--gold-bright);font-style:normal}
.doors-hero .lede{max-width:60ch;color:var(--ink-2);font-size:clamp(16px,1.7vw,19px)}
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(22px,3vw,34px)}
@media(max-width:900px){.doors{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.doors{grid-template-columns:1fr}}
.door{display:flex;flex-direction:column;gap:8px;text-align:left;padding:20px 18px;border-radius:16px;
  background:var(--panel);border:1px solid var(--line-2);cursor:pointer;transition:.18s var(--ease);
  color:var(--ink);font:inherit;position:relative;overflow:hidden}
.door:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 34px -18px rgba(0,0,0,.5)}
.door.on{border-color:var(--gold-bright);box-shadow:0 0 0 2px var(--gold-soft) inset}
.door .d-ic{width:44px;height:44px;color:var(--gold-bright)}
.door .d-ic svg{width:44px;height:44px;display:block}
.door b{font-size:19px;font-family:var(--serif);letter-spacing:-.01em}
.door span{color:var(--ink-2);font-size:14px;line-height:1.45}
.door .d-go{margin-top:auto;color:var(--gold-deep);font-weight:600;font-size:13px;letter-spacing:.02em}
.door.help{background:linear-gradient(150deg,var(--panel-2),var(--panel))}

/* the panel behind a door: hidden until the door is chosen (JS off = all shown) */
.dp{display:none;scroll-margin-top:84px}
.dp.on{display:block;animation:dpin .28s var(--ease)}
@keyframes dpin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.no-js .dp{display:block}
.dp-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.dp-head h2{font-family:var(--serif);font-size:clamp(23px,3vw,32px);letter-spacing:-.01em}
.dp-head .dp-note{color:var(--ink-2);font-size:14px;max-width:52ch}

.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
@media(max-width:820px){.picks{grid-template-columns:1fr}}
.pick{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-2);
  border-radius:16px;overflow:hidden;transition:.18s var(--ease);color:var(--ink)}
.pick:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 16px 38px -20px rgba(0,0,0,.5)}
.pick-media{aspect-ratio:4/3;background:var(--panel-2);position:relative;display:flex;align-items:center;justify-content:center}
.pick-media img{width:100%;height:100%;object-fit:contain;padding:10px}
.pick-badge{position:absolute;top:12px;left:12px;background:var(--gold-bright);color:#17130d;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.pick-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pick-name{font-family:var(--serif);font-size:23px;letter-spacing:-.01em}
.pick-model{color:var(--ink-3);font-size:12.5px;letter-spacing:.02em;text-transform:uppercase}
.pick-best{color:var(--ink-2);font-size:14px;line-height:1.45;margin:2px 0 4px}
.pick-price{font-weight:700;font-size:16px}
.pick-price small{display:block;font-weight:400;color:var(--ink-3);font-size:12px}
.pick-go{margin-top:auto;padding-top:12px;color:var(--gold-deep);font-weight:600;font-size:14px}
.pick-go::after{content:" \2192"}

.dp-more{margin-top:16px;color:var(--ink-2);font-size:14px}
.dp-more a{color:var(--gold-deep);font-weight:600}

/* the guide */
.guide{max-width:760px}
.g-step{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;padding:18px 18px;margin-top:14px}
.g-step h3{font-size:16px;margin-bottom:12px}
.g-q{color:var(--ink-3);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;margin-right:6px}
.g-opts{display:flex;flex-wrap:wrap;gap:10px}
.g-opt{padding:11px 15px;border-radius:11px;border:1.5px solid var(--line-2);background:var(--bg);
  color:var(--ink);font:inherit;font-size:15px;cursor:pointer;transition:.14s var(--ease)}
.g-opt:hover{border-color:var(--gold)}
.g-opt.on{border-color:var(--gold-bright);background:var(--gold-soft);font-weight:600}
.g-result{margin-top:18px;display:none}
.g-result.on{display:block;animation:dpin .28s var(--ease)}
.g-result .pick{max-width:420px}

/* hands toggle on a product page */
.hands-toggle{margin:14px 0 4px;padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel-2)}
.hands-toggle .ht-lab{font-weight:700;font-size:14px;margin-bottom:4px}
.hands-toggle .ht-note{color:var(--ink-2);font-size:13px;margin-bottom:10px}
.ht-opts{display:flex;flex-wrap:wrap;gap:8px}
.ht-opt{padding:9px 13px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--bg);
  color:var(--ink);font:inherit;font-size:14px;cursor:pointer;transition:.14s var(--ease);text-align:left}
.ht-opt:hover{border-color:var(--gold)}
.ht-opt.on{border-color:var(--gold-bright);background:var(--gold-soft);font-weight:600}
.ht-opt small{display:block;color:var(--ink-3);font-weight:400;font-size:12px}
.ht-msg{margin-top:9px;font-size:13px;color:var(--gold-deep);min-height:1em}

/* recommended build + Customize expander on a product page */
.pick-host{margin:6px 0 8px}
.model.model--pick{border:1.5px solid var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.pick-flag{display:inline-block;background:var(--gold-bright);color:#17130d;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-bottom:8px}
details.customize{margin-top:20px;border-top:1px solid var(--line-2);padding-top:6px}
details.customize>summary{cursor:pointer;list-style:none;padding:14px 2px;font-weight:600;font-size:15px;
  color:var(--gold-deep);display:flex;align-items:center;gap:8px}
details.customize>summary::-webkit-details-marker{display:none}
details.customize>summary::before{content:"+";display:inline-flex;width:22px;height:22px;align-items:center;
  justify-content:center;border-radius:50%;border:1.5px solid currentColor;font-size:16px;line-height:1}
details.customize[open]>summary::before{content:"\2212"}
details.customize>summary .ct-sub{color:var(--ink-3);font-weight:400;font-size:13px}

/* Order page: address autocomplete dropdown + shipping estimate. */
.ac-wrap{position:relative}
.ac-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  background:var(--panel);border:1px solid var(--line-2);border-radius:11px;
  box-shadow:0 12px 32px rgba(23,19,13,.16);overflow:hidden;max-height:280px;overflow-y:auto}
.ac-opt{padding:10px 13px;font-size:14px;color:var(--ink);cursor:pointer;
  border-bottom:1px solid var(--line);line-height:1.35}
.ac-opt:last-child{border-bottom:none}
.ac-opt.on,.ac-opt:hover{background:var(--gold-soft);color:var(--ink)}
.ord-row.sub .is-est,.is-est{color:var(--gold-deep);font-weight:600;text-align:right}