/* ==========================================================================
   AMPM ADVANCE — Unified Design System
   ampmadvance.com  ·  One house. Four brands.
   --------------------------------------------------------------------------
   00 Reset  01 Tokens  02 Type  03 Layout  04 Nav  05 Buttons  06 Cards
   07 Hero   08 Components  09 Forms  10 Footer  11 Utilities  12 Motion
   13 Responsive
   ========================================================================== */

/* ── 00 · RESET & BASE ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100vh;
}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ── 01 · TOKENS ───────────────────────────────────────────────────────── */
:root{
  --bg:#070C14;
  --bg-2:#0D1520;
  --surface:#111B28;
  --surface-2:#162030;
  --surface-3:#1C283A;

  --blue:#00B4FF;
  --gold:#FFD700;
  --gold-deep:#C9A84C;
  --purple:#9B5DE5;
  --magenta:#FF2D8F;
  --teal:#17C3B2;
  --green:#2ECC71;
  --orange:#F39C12;
  --red:#E74C3C;

  --white:#FFFFFF;
  --text:rgba(255,255,255,.92);
  --text-2:rgba(255,255,255,.68);
  --text-3:rgba(255,255,255,.52);
  --border:rgba(255,255,255,.09);
  --border-2:rgba(255,255,255,.17);

  /* theming hooks — overridden per brand */
  --accent:#00B4FF;
  --accent-2:#FFD700;
  --accent-soft:rgba(0,180,255,.12);
  --accent-glow:rgba(0,180,255,.30);
  --accent-ink:#04121C;

  --font-display:'Bebas Neue','Oswald',Impact,sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-script:'Dancing Script',cursive;
  --font-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --step--1:clamp(.82rem,.79rem + .15vw,.9rem);
  --step-0:clamp(.95rem,.92rem + .18vw,1.05rem);
  --step-1:clamp(1.15rem,1.08rem + .35vw,1.35rem);
  --step-2:clamp(1.45rem,1.3rem + .7vw,1.9rem);
  --step-3:clamp(1.9rem,1.6rem + 1.4vw,2.9rem);
  --step-4:clamp(2.6rem,2rem + 2.9vw,4.6rem);
  --step-5:clamp(3.2rem,2.2rem + 4.6vw,6.4rem);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;  --sp-7:3rem;   --sp-8:4rem;
  --sp-9:6rem;   --sp-10:8rem;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --shadow:0 18px 50px -20px rgba(0,0,0,.7);
  --shadow-lift:0 30px 70px -24px rgba(0,0,0,.85);

  --maxw:1240px;
  --nav-h:72px;

  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

/* Brand themes */
.theme-ampm{--accent:#00B4FF;--accent-2:#FFD700;--accent-soft:rgba(0,180,255,.12);--accent-glow:rgba(0,180,255,.30);--accent-ink:#04121C}
.theme-nifty{--accent:#C9A84C;--accent-2:#1A8CFF;--accent-soft:rgba(201,168,76,.13);--accent-glow:rgba(201,168,76,.32);--accent-ink:#141004}
.theme-byop{--accent:#B14AED;--accent-2:#17C3B2;--accent-soft:rgba(177,74,237,.15);--accent-glow:rgba(177,74,237,.34);--accent-ink:#150520}
.theme-cypher{--accent:#D4A843;--accent-2:#E03535;--accent-soft:rgba(212,168,67,.13);--accent-glow:rgba(212,168,67,.30);--accent-ink:#12100A;--bg:#060606;--bg-2:#0E0E0E;--surface:#131313;--surface-2:#1A1A1A;--surface-3:#222}
.theme-baskets{--accent:#17C3B2;--accent-2:#F39C12;--accent-soft:rgba(23,195,178,.13);--accent-glow:rgba(23,195,178,.30);--accent-ink:#041614}

/* ── 02 · TYPOGRAPHY ───────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{line-height:1.08;letter-spacing:-.012em;font-weight:700;color:var(--white)}
.display{font-family:var(--font-display);font-weight:400;line-height:.88;letter-spacing:.012em;text-transform:uppercase}
.h-xxl{font-size:var(--step-5)}
.h-xl{font-size:var(--step-4)}
.h-lg{font-size:var(--step-3)}
.h-md{font-size:var(--step-2)}
.h-sm{font-size:var(--step-1)}
p{font-size:var(--step-0);color:var(--text-2)}
.lead{font-size:var(--step-1);color:var(--text-2);line-height:1.55;max-width:62ch}
.script{font-family:var(--font-script);text-transform:none;letter-spacing:0;font-weight:700}
.mono{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.04em}
.muted{color:var(--text-3)}
strong{color:var(--white);font-weight:700}
a.link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a.link:hover{color:var(--accent-2)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);padding:.45rem .95rem;
  border:1px solid var(--accent-soft);background:var(--accent-soft);
  border-radius:var(--r-pill);margin-bottom:var(--sp-4);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);flex:none}
.grad{
  background:linear-gradient(100deg,var(--accent) 0%,var(--accent-2) 55%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}

/* ── 03 · LAYOUT ───────────────────────────────────────────────────────── */
.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,880px);margin-inline:auto}
.section{padding-block:var(--sp-9);position:relative}
.section-sm{padding-block:var(--sp-8)}
.section-head{max-width:70ch;margin-bottom:var(--sp-7)}
.section-head.center{margin-inline:auto;text-align:center}
.grid{display:grid;gap:var(--sp-5)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.flex{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.flex-between{display:flex;gap:var(--sp-4);align-items:center;justify-content:space-between;flex-wrap:wrap}
.stack>*+*{margin-top:var(--sp-4)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--border-2),transparent);border:0;margin-block:var(--sp-7)}
.band{background:var(--bg-2);border-block:1px solid var(--border)}

/* ── 04 · HEADER / NAV ─────────────────────────────────────────────────── */
.skip-link{
  position:absolute;left:1rem;top:-70px;z-index:200;
  background:var(--accent);color:var(--accent-ink);
  padding:.7rem 1.1rem;border-radius:var(--r-sm);font-weight:700;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:1rem}

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(7,12,20,.82);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--border);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.theme-cypher .site-header{background:rgba(6,6,6,.85)}
.site-header.scrolled{border-bottom-color:var(--border-2);box-shadow:0 10px 30px -18px #000}
.nav{height:var(--nav-h);display:flex;align-items:center;gap:var(--sp-5)}
.brandmark{display:flex;align-items:center;gap:.6rem;flex:none}
.brandmark svg{width:36px;height:36px;flex:none}
.brandmark-text{display:flex;flex-direction:column;line-height:1}
.brandmark-text b{font-family:var(--font-display);font-size:1.34rem;font-weight:400;letter-spacing:.06em;color:var(--white)}
.brandmark-text span{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.26em;color:var(--accent);text-transform:uppercase;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav-links a{
  padding:.55rem .8rem;border-radius:var(--r-pill);
  font-size:.9rem;font-weight:500;color:var(--text-2);
  transition:color .2s var(--ease),background .2s var(--ease);white-space:nowrap;
}
.nav-links a:hover{color:var(--white);background:rgba(255,255,255,.06)}
.nav-links a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.nav-links .btn{color:var(--accent-ink)}
.nav-links .btn.btn-ghost{color:var(--white)}
.nav-cta{margin-left:.45rem}
.nav-toggle{
  display:none;margin-left:auto;width:44px;height:44px;
  border:1px solid var(--border-2);border-radius:var(--r-sm);
  align-items:center;justify-content:center;color:var(--white);
}
.nav-toggle span{display:block;width:19px;height:2px;background:currentColor;position:relative;transition:transform .25s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:currentColor;transition:transform .25s var(--ease),top .25s var(--ease),opacity .2s}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(90deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;opacity:0}

/* Brand rail */
.brand-rail{border-bottom:1px solid var(--border);background:linear-gradient(90deg,var(--bg-2),var(--bg))}
.brand-rail ul{display:flex;overflow-x:auto;scrollbar-width:none}
.brand-rail ul::-webkit-scrollbar{display:none}
.brand-rail li{flex:1 0 auto}
.brand-rail a{
  display:flex;align-items:center;gap:.5rem;justify-content:center;
  padding:.7rem 1.1rem;font-size:.76rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-3);white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease);
}
.brand-rail a:hover{color:var(--white);background:rgba(255,255,255,.04)}
.brand-rail a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent);background:var(--accent-soft)}
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.dot-nifty{background:#C9A84C}
.dot-byop{background:#B14AED}
.dot-cypher{background:#D4A843}
.dot-baskets{background:#17C3B2}
.dot-ampm{background:#00B4FF}

/* ── 05 · BUTTONS ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.6rem;border-radius:var(--r-pill);
  font-weight:700;font-size:.94rem;border:1px solid transparent;cursor:pointer;
  transition:transform .22s var(--spring),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
  text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:var(--accent-ink);box-shadow:0 10px 30px -12px var(--accent-glow)}
.btn-primary:hover{box-shadow:0 18px 42px -14px var(--accent-glow)}
.btn-ghost{border-color:var(--border-2);color:var(--white);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn-solid{background:var(--white);color:#08101a}
.btn-solid:hover{background:var(--accent);color:var(--accent-ink)}
.btn-sm{padding:.6rem 1.1rem;font-size:.85rem}
.btn-lg{padding:1.05rem 2.2rem;font-size:1.05rem}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

.tag{
  display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .75rem;border-radius:var(--r-pill);
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-soft);
}
.tag-live{background:rgba(46,204,113,.13);color:var(--green);border-color:rgba(46,204,113,.26)}
.tag-soon{background:rgba(155,93,229,.15);color:#C79BFF;border-color:rgba(155,93,229,.3)}
.tag-warn{background:rgba(243,156,18,.13);color:var(--orange);border-color:rgba(243,156,18,.26)}

/* ── 06 · CARDS ────────────────────────────────────────────────────────── */
.card{
  background:linear-gradient(160deg,var(--surface),var(--surface-2));
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-5);position:relative;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--accent-soft);box-shadow:var(--shadow-lift)}
.card-flat{background:var(--surface)}
.card-flat:hover{transform:none}
.card h3{font-size:var(--step-1);margin-bottom:.55rem}
.card p{font-size:.95rem}
.card-icon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  font-size:1.45rem;margin-bottom:var(--sp-4);
  background:var(--accent-soft);border:1px solid var(--accent-soft);
}

.brand-card{
  display:flex;flex-direction:column;gap:var(--sp-4);
  padding:var(--sp-6);border-radius:var(--r-xl);
  background:linear-gradient(165deg,var(--surface),var(--bg-2) 92%);
  border:1px solid var(--border);position:relative;overflow:hidden;height:100%;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.brand-card::after{
  content:"";position:absolute;inset:auto -30% -60% -30%;height:70%;
  background:radial-gradient(50% 60% at 50% 100%,var(--accent-glow),transparent 72%);
  opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
}
.brand-card:hover{transform:translateY(-6px);border-color:var(--accent-soft);box-shadow:var(--shadow-lift)}
.brand-card:hover::after{opacity:.9}
.brand-logo{font-family:var(--font-display);font-size:var(--step-2);letter-spacing:.04em;color:var(--white);line-height:1}
.brand-logo em{font-style:normal;color:var(--accent)}
.brand-card ul{display:grid;gap:.5rem}
.brand-card ul li{font-size:.88rem;color:var(--text-2);display:flex;gap:.55rem;align-items:flex-start}
.brand-card ul li::before{content:"▸";color:var(--accent);font-size:.8rem;line-height:1.5;flex:none}
.card-foot{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:auto;padding-top:var(--sp-4)}
.brand-domain{font-family:var(--font-mono);font-size:.72rem;color:var(--text-3);letter-spacing:.03em}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--surface);padding:var(--sp-5) var(--sp-4);text-align:center}
.stat b{display:block;font-family:var(--font-display);font-size:var(--step-3);color:var(--accent);line-height:1;font-weight:400}
.stat span{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);margin-top:.5rem}

.price-table{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.price-table caption{padding:var(--sp-4);font-weight:700;color:var(--white);text-align:left;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:.95rem}
.price-table th,.price-table td{padding:.85rem 1rem;text-align:left;font-size:.92rem;border-bottom:1px solid var(--border)}
.price-table th{color:var(--text-3);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.price-table td{color:var(--text-2)}
.price-table td:last-child{color:var(--accent);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.price-table tr:last-child td{border-bottom:0}
.price-table tbody tr:hover{background:rgba(255,255,255,.03)}
.table-scroll{overflow-x:auto}

.steps{counter-reset:step;display:grid;gap:var(--sp-5)}
.step{counter-increment:step;position:relative;padding-left:3.5rem}
.step::before{
  content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;
  width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:12px;
  font-family:var(--font-mono);font-size:.8rem;font-weight:700;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-soft);
}
.step h4,.step-title{display:block;font-size:1.02rem;color:var(--white);font-weight:700;line-height:1.35;margin-bottom:.25rem}
.step p{font-size:.9rem}

.ticker{overflow:hidden;border-block:1px solid var(--border);background:var(--bg-2);padding:.7rem 0}
.ticker-track{display:flex;gap:2.5rem;width:max-content;animation:marquee 38s linear infinite}
.ticker span{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.1em;color:var(--text-3);text-transform:uppercase;white-space:nowrap}
.ticker span b{color:var(--accent);font-weight:700}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.notice{
  border:1px solid var(--border-2);border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:var(--r);
  padding:var(--sp-4) var(--sp-5);font-size:.9rem;color:var(--text-2);
}
.notice strong{color:var(--white)}

.acc{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden}
.acc+.acc{margin-top:.75rem}
.acc summary{padding:1.05rem 1.3rem;cursor:pointer;font-weight:700;color:var(--white);display:flex;justify-content:space-between;gap:1rem;align-items:center;list-style:none;font-size:.98rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1;transition:transform .25s var(--ease)}
.acc[open] summary::after{transform:rotate(45deg)}
.acc summary:hover{background:rgba(255,255,255,.03)}
.acc-body{padding:0 1.3rem 1.2rem;font-size:.93rem;color:var(--text-2)}
.acc-body p+p{margin-top:.7rem}

/* ── 07 · HERO ─────────────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(4rem,10vw,8rem) clamp(3.5rem,8vw,6.5rem);border-bottom:1px solid var(--border)}
.hero-canvas{position:absolute;inset:0;z-index:-2;opacity:.55;pointer-events:none;width:100%;height:100%}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 18% 8%,var(--accent-glow),transparent 62%),
             radial-gradient(55% 50% at 88% 22%,rgba(155,93,229,.18),transparent 65%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 35%,#000,transparent 78%);
  mask-image:radial-gradient(75% 65% at 50% 35%,#000,transparent 78%);
  opacity:.55;
}
.hero-inner{max-width:58rem}
.hero h1{margin-bottom:var(--sp-5)}
.hero .lead{margin-bottom:var(--sp-6)}
.hero-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-7)}

/* ── 08 · COMPONENTS ───────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-7);align-items:center}
.split.reverse>*:first-child{order:2}

.kit{display:grid;grid-template-columns:1fr;gap:var(--sp-5);padding:var(--sp-6);border-radius:var(--r-xl);border:1px solid var(--border);background:linear-gradient(165deg,var(--surface),var(--bg-2));position:relative;overflow:hidden}
.kit-visual{
  aspect-ratio:4/3;border-radius:var(--r-lg);display:grid;place-items:center;padding:1.5rem;
  background:radial-gradient(40% 40% at 28% 22%,rgba(0,180,255,.35),transparent 70%),
             radial-gradient(45% 45% at 76% 74%,rgba(255,45,143,.34),transparent 70%),
             linear-gradient(150deg,#F6F0E4,#E7DECB);
  border:1px solid var(--border-2);position:relative;overflow:hidden;
}
.kit-word{font-family:var(--font-display);font-size:clamp(2rem,6vw,3.4rem);color:#0F0F0F;letter-spacing:.02em;text-align:center;line-height:.9}
.kit-word small{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.3em;color:#3a3a3a;margin-top:.7rem}
.kit-word .script{color:#111;font-size:1.4rem;display:block;margin-bottom:.5rem}
.kit-price{display:flex;align-items:baseline;gap:.6rem;margin:.4rem 0 .2rem;flex-wrap:wrap}
.kit-price b{font-family:var(--font-display);font-size:var(--step-3);color:var(--white);font-weight:400;line-height:1}
.kit-price s{color:var(--text-3);font-size:.95rem}
.contents-list{display:grid;gap:.5rem}
.contents-list li{display:flex;gap:.6rem;font-size:.92rem;color:var(--text-2);align-items:flex-start}
.contents-list li::before{content:"✓";color:var(--accent);font-weight:800;flex:none}
.swatches{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:var(--sp-3)}
.swatch{width:26px;height:26px;border-radius:7px;border:1px solid rgba(0,0,0,.3);box-shadow:inset 0 -4px 8px rgba(0,0,0,.2)}

/* Builder */
.builder{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--sp-6);align-items:start}
.builder-steps{display:grid;gap:var(--sp-6)}
.builder-step>h3{font-size:1.05rem;margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
.builder-step>h3 i{
  font-style:normal;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-soft);
  padding:.25rem .6rem;border-radius:var(--r-pill);
}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:.7rem}
.opt{position:relative;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:1rem .9rem;text-align:center;cursor:pointer;transition:border-color .22s var(--ease),background .22s var(--ease);display:block}
.opt:hover{border-color:var(--border-2);background:var(--surface-2)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt-em{font-size:1.6rem;display:block;margin-bottom:.45rem}
.opt b{display:block;font-size:.92rem;color:var(--white);margin-bottom:.2rem}
.opt span{display:block;font-size:.78rem;color:var(--text-3)}

.opt.is-checked,.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.opt.is-checked span,.opt:has(input:checked) span{color:var(--accent)}
.opt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}

.color-grid{display:flex;flex-wrap:wrap;gap:.55rem}
.color-opt{position:relative;cursor:pointer;display:block}
.color-opt input{position:absolute;opacity:0;width:0;height:0}
.color-chip{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:2px solid var(--border-2);transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.color-opt input:checked+.color-chip{border-color:var(--accent);transform:scale(1.08);box-shadow:0 0 0 3px var(--accent-soft)}
.color-opt input:focus-visible+.color-chip{outline:3px solid var(--accent);outline-offset:3px}

.quote{position:sticky;top:calc(var(--nav-h) + 1rem);border:1px solid var(--accent-soft);border-radius:var(--r-lg);background:linear-gradient(165deg,var(--surface-2),var(--bg-2));padding:var(--sp-5);box-shadow:var(--shadow)}
.quote-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed var(--border);font-size:.9rem}
.quote-row span{color:var(--text-3)}
.quote-row b{color:var(--white);font-weight:600;text-align:right}
.quote-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border-2)}
.quote-total b{font-family:var(--font-display);font-size:var(--step-3);color:var(--accent);font-weight:400;line-height:1}
.range-wrap{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;min-width:170px;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--accent) var(--fill,10%),var(--surface-3) var(--fill,10%));outline-offset:6px;
}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid var(--bg);cursor:pointer;box-shadow:0 0 0 1px var(--accent)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid var(--bg);cursor:pointer;box-shadow:0 0 0 1px var(--accent)}
.qty-display{font-family:var(--font-display);font-size:var(--step-2);color:var(--white);min-width:3.6ch;text-align:center;font-weight:400}
.qty-presets{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.8rem}
.qty-preset{padding:.4rem .85rem;border:1px solid var(--border-2);border-radius:var(--r-pill);font-size:.82rem;color:var(--text-2);transition:all .2s var(--ease)}
.qty-preset:hover,.qty-preset[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ── 09 · FORMS ────────────────────────────────────────────────────────── */
.field{display:grid;gap:.45rem;margin-bottom:var(--sp-4)}
.field label{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.hint{font-size:.8rem;color:var(--text-3)}
.req{color:var(--accent)}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],
input[type=password],input[type=date],input[type=search],select,textarea{
  width:100%;padding:.8rem 1rem;border-radius:var(--r-sm);
  background:var(--bg-2);border:1px solid var(--border-2);color:var(--white);
  font-size:.95rem;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{min-height:132px;resize:vertical;line-height:1.55}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.6rem}
fieldset{border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-5);margin-bottom:var(--sp-5)}
legend{padding:0 .6rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--text-2);cursor:pointer}
.check input{width:20px;height:20px;flex:none;accent-color:var(--accent);margin-top:.15rem}
.form-status{margin-top:var(--sp-4);padding:1rem 1.2rem;border-radius:var(--r);border:1px solid rgba(46,204,113,.4);background:rgba(46,204,113,.1);color:#9BE8BF;font-size:.92rem}
.form-status[hidden]{display:none}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-4)}

.searchbar{display:flex;gap:.6rem;padding:.5rem;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border-2);flex-wrap:wrap;box-shadow:var(--shadow)}
.searchbar input{flex:1;min-width:210px;border:0;background:transparent;padding:.7rem 1.1rem}
.searchbar input:focus{box-shadow:none;border:0}

/* ── 10 · FOOTER ───────────────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--border);background:var(--bg-2);padding-block:var(--sp-8) var(--sp-5);margin-top:var(--sp-8)}
.footer-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:var(--sp-6)}
.footer-col h3,.footer-col h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-4);font-weight:700}
.footer-col ul{display:grid;gap:.6rem}
.footer-col a{font-size:.9rem;color:var(--text-2);transition:color .2s var(--ease)}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--border);font-size:.82rem;color:var(--text-3)}
.legal{font-size:.77rem;color:var(--text-3);line-height:1.7;max-width:88ch}
.legal+.legal{margin-top:.6rem}
.pay-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:var(--sp-4)}
.pay-badge{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;padding:.35rem .7rem;border:1px solid var(--border-2);border-radius:6px;color:var(--text-3)}

/* ── 11 · UTILITIES ────────────────────────────────────────────────────── */
.center{text-align:center}
.mt-0{margin-top:0}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)}
.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.full{grid-column:1/-1}

/* ── 12 · MOTION ───────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}
.reveal-d4{transition-delay:.32s}
.tilt{transform-style:preserve-3d;transition:transform .35s var(--ease)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.float{animation:floaty 6s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.78)}}
.pulse{animation:pulse-dot 1.8s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero-canvas{display:none}
}

/* ── 13 · RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width:1024px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .builder{grid-template-columns:1fr}
  .quote{position:static}
  .split{grid-template-columns:1fr;gap:var(--sp-6)}
  .split.reverse>*:first-child{order:0}
}
@media (max-width:880px){
  .nav-links{
    position:fixed;inset:calc(var(--nav-h) + 41px) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:.2rem;
    background:var(--bg);border-bottom:1px solid var(--border);
    padding:var(--sp-4) 1.25rem var(--sp-6);
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
    max-height:calc(100dvh - var(--nav-h) - 41px);overflow-y:auto;
    box-shadow:var(--shadow);margin-left:0;
  }
  .nav-links.open{transform:none;opacity:1;visibility:visible}
  .nav-links a{padding:.85rem 1rem;font-size:1rem;border-radius:var(--r-sm)}
  .nav-cta{margin-left:0;margin-top:.5rem}
  .nav-toggle{display:flex}
  .g-3,.g-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--sp-9:4.5rem;--sp-8:3rem}
  .g-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  .stats{grid-template-columns:repeat(2,1fr)}
  .brand-rail a{font-size:.68rem;padding:.65rem .75rem}
}

/* ── PRINT ─────────────────────────────────────────────────────────────── */
@media print{
  .site-header,.brand-rail,.site-footer,.hero-canvas,.btn,.ticker{display:none!important}
  body{background:#fff;color:#000}
  h1,h2,h3,h4{color:#000}
  .card,.kit,.brand-card{border:1px solid #ccc;background:#fff}
}

/* ── 15 · SHARED CART (injected by cart.js on interior pages) ───────────── */
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,94vw);z-index:300;
  background:var(--surface);box-shadow:-8px 0 34px rgba(0,0,0,.6);color:var(--text);
  transform:translateX(105%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;
}
.cart-drawer.open{transform:none}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--border)}
.cart-head h2{font-size:1.1rem;color:var(--white)}
.cart-close{font-size:1.3rem;padding:.3rem .6rem;border-radius:6px;color:var(--white)}
.cart-close:hover{background:rgba(255,255,255,.08)}
.cart-items{flex:1;overflow-y:auto;padding:.6rem 1.2rem}
.cart-item{display:flex;gap:.8rem;padding:.8rem 0;border-bottom:1px solid var(--border);align-items:flex-start}
.cart-item .ci-img{width:52px;height:52px;border-radius:6px;display:grid;place-items:center;font-size:1.4rem;flex:none}
.cart-item h4{font-size:.86rem;font-weight:600;line-height:1.3;color:var(--white)}
.cart-item .ci-price{font-size:.9rem;color:var(--accent);font-weight:700;margin-top:.15rem}
.qty-ctl{display:inline-flex;align-items:center;border:1px solid var(--border-2);border-radius:100px;margin-top:.4rem;overflow:hidden}
.qty-ctl button{width:30px;height:28px;font-size:1rem;display:grid;place-items:center;color:var(--white)}
.qty-ctl button:hover{background:rgba(255,255,255,.08)}
.qty-ctl span{min-width:30px;text-align:center;font-size:.85rem;font-weight:600;color:var(--white)}
.ci-remove{margin-left:auto;font-size:.75rem;color:var(--accent);flex:none}
.ci-remove:hover{text-decoration:underline;color:var(--accent-2)}
.cart-empty{text-align:center;color:var(--text-3);padding:3rem 1rem;font-size:.9rem}
.cart-foot{border-top:1px solid var(--border);padding:1rem 1.2rem;display:grid;gap:.6rem}
.cart-sub{display:flex;justify-content:space-between;font-size:1rem;color:var(--white)}
.cart-sub b{color:var(--accent);font-size:1.15rem}
.cart-note{font-size:.72rem;color:var(--text-3);line-height:1.5}
.cart-scrim{position:fixed;inset:0;background:rgba(15,17,17,.45);z-index:290;opacity:0;visibility:hidden;transition:opacity .3s}
.cart-scrim.show{opacity:1;visibility:visible}
.cart-drawer .btn-go{background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink);border-radius:100px;padding:.7rem 1.4rem;font-weight:700;width:100%;display:block;text-align:center}
.cart-drawer .btn-go:hover{filter:brightness(1.12)}
.toast{
  position:fixed;bottom:1.2rem;left:50%;transform:translate(-50%,20px);z-index:310;
  background:#131A22;color:#fff;padding:.8rem 1.3rem;border-radius:8px;font-size:.88rem;
  opacity:0;visibility:hidden;transition:all .3s;box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast b{color:#FFD814}
.cart-fab{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:150;
  display:flex;align-items:center;gap:.4rem;
  background:#131A22;color:#fff;border-radius:100px;padding:.7rem 1.1rem;
  box-shadow:0 6px 20px rgba(0,0,0,.3);font-weight:700;font-size:.9rem;
}
.cart-fab:hover{background:#232F3E}
.cart-fab b{color:#FFD814;min-width:1ch}
.cart-fab:not(.has){opacity:.75}

/* ── 16 · AFFILIATE PARTNER PRODUCT SHOTS (baskets.html) ────────────────── */
.bt-shot{
  aspect-ratio:1;border-radius:var(--r);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--border);margin-bottom:.25rem;
}
.bt-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.brand-card:hover .bt-shot img{transform:scale(1.05)}

/* ── 17 · CART SIZE PICKER ──────────────────────────────────────────────── */
.ci-size{display:flex;align-items:center;gap:.45rem;margin-top:.4rem;font-size:.75rem;color:var(--text-3)}
.ci-size select{
  padding:.25rem .5rem;font-size:.8rem;border-radius:6px;
  background:var(--surface-2);border:1px solid var(--border-2);color:var(--white);width:auto;
}
.ci-up{font-size:.72rem;color:var(--text-3);font-weight:400}

/* ── 18 · BYOP EDITION CARDS (byop.html) ────────────────────────────────── */
.ed-grid{
  display:grid;gap:var(--sp-5);
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
}
.ed-card{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:linear-gradient(168deg,var(--surface-2),var(--bg-2));
  overflow:hidden;transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.ed-card:hover{transform:translateY(-5px);border-color:var(--accent-soft);box-shadow:var(--shadow-lift)}
.ed-shot{position:relative;aspect-ratio:3/2;overflow:hidden;background:#0d0d11}
.ed-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.ed-card:hover .ed-shot img{transform:scale(1.04)}
.ed-flag{
  position:absolute;top:10px;right:10px;z-index:2;
  font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:var(--r-sm);
  background:#C0392B;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.ed-flag.is-green{background:#1DB954;color:#06210f}
.ed-flag.is-gold{background:var(--gold-deep);color:#1a1200}
.ed-flag.is-soon{background:#7B2FBE;color:#fff}
.ed-body{padding:1.15rem 1.2rem 1.25rem;display:flex;flex-direction:column;flex:1;gap:.55rem}
.ed-name{
  font-family:var(--font-display);font-size:var(--step-2);line-height:1;
  color:var(--white);font-weight:400;letter-spacing:.01em;
}
.ed-desc{font-size:.87rem;color:var(--text-2);line-height:1.55}
.ed-chips{display:flex;flex-wrap:wrap;gap:.32rem;margin-top:.15rem}
.ed-chip{
  font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--text-3);background:var(--surface);border:1px solid var(--border);
  padding:.24rem .5rem;border-radius:var(--r-sm);
}
.ed-foot{
  margin-top:auto;padding-top:.85rem;border-top:1px solid var(--border);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
}
.ed-price{font-family:var(--font-display);font-size:var(--step-3);line-height:1;color:var(--accent);font-weight:400}
.ed-size-note{font-size:.68rem;color:var(--text-3);text-align:right;line-height:1.45;letter-spacing:.05em;text-transform:uppercase}
.ed-buy{display:grid;gap:.45rem;margin-top:.85rem}
.ed-buy .ed-tee{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--text-3)}
.ed-buy select{
  padding:.4rem .6rem;font-size:.84rem;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--border-2);color:var(--white);width:auto;
}

/* colour-per-edition accents */
.ec-henny{--accent:#D4A050;--accent-soft:rgba(212,160,80,.16)}
.ec-patron{--accent:#8CFF50;--accent-soft:rgba(140,255,80,.14)}
.ec-espolon{--accent:#FF6060;--accent-soft:rgba(255,96,96,.15)}
.ec-julio{--accent:#64B4FF;--accent-soft:rgba(100,180,255,.15)}
.ec-casa{--accent:#3CDCB4;--accent-soft:rgba(60,220,180,.15)}
.ec-tod{--accent:#FF8050;--accent-soft:rgba(255,128,80,.15)}
.ec-birds{--accent:#3CDC3C;--accent-soft:rgba(60,220,60,.15)}
.ec-cutwater{--accent:#3CA0FF;--accent-soft:rgba(60,160,255,.15)}
.ec-soon{--accent:#9B5DE5;--accent-soft:rgba(155,93,229,.15)}

/* builder: colour theme swatches */
.swatch-row{display:flex;flex-wrap:wrap;gap:.6rem}
.swatch{
  position:relative;width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:2px solid var(--border-2);transition:transform .18s var(--ease),border-color .18s var(--ease);
}
.swatch:hover{transform:scale(1.12)}
.swatch input{position:absolute;opacity:0;width:0;height:0}
.swatch:has(input:checked){border-color:var(--white);transform:scale(1.15);box-shadow:0 0 0 3px var(--accent-soft)}
.swatch:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.swatch .tip{
  position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);
  font-size:.66rem;white-space:nowrap;color:var(--text-3);opacity:0;transition:opacity .18s;pointer-events:none;
}
.swatch:hover .tip,.swatch:has(input:checked) .tip{opacity:1}

/* builder: compact chip options (many per row) */
.chip-grid{display:flex;flex-wrap:wrap;gap:.5rem}
.chip-opt{
  position:relative;cursor:pointer;font-size:.85rem;color:var(--text-2);
  border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--surface);padding:.5rem .95rem;transition:all .18s var(--ease);
}
.chip-opt:hover{border-color:var(--border-2);background:var(--surface-2);color:var(--white)}
.chip-opt input{position:absolute;opacity:0;width:0;height:0}
.chip-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--white);font-weight:500}
.chip-opt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.chip-opt.is-full{opacity:.4;cursor:not-allowed}

.step-note{font-size:.8rem;color:var(--text-3);margin:-.2rem 0 .7rem}
.step-note b{color:var(--accent)}

@media (max-width:640px){
  .ed-grid{grid-template-columns:1fr}
  .swatch{width:34px;height:34px}
}
.ci-detail{font-size:.74rem;color:var(--text-3);line-height:1.45;margin:.2rem 0 .1rem}

/* ── 19 · PRINT JOB BUILDERS — cards / flyers / banners (print-lab.html) ── */
.pjob-tabs{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--sp-6);
  border-bottom:1px solid var(--border);padding-bottom:var(--sp-4);
}
.pjob-tab{
  font-size:.92rem;font-weight:500;color:var(--text-2);cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:.6rem 1.2rem;transition:all .2s var(--ease);
}
.pjob-tab:hover{border-color:var(--border-2);color:var(--white);background:var(--surface-2)}
.pjob-tab.is-on{
  background:var(--accent-soft);border-color:var(--accent);color:var(--white);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--accent);
}
.pjob-tab:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.pjob-grid{
  display:grid;gap:var(--sp-6);align-items:start;
  grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr);
}
.pjob-build{display:grid;gap:var(--sp-5);min-width:0}
.pjob-step{
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);padding:var(--sp-5);
}
.pjob-step legend{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);padding:0 .6rem;
}

/* the "here's what we actually made" shot at the top of each builder */
.pjob-shot{
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
}
.pjob-shot img{width:100%;aspect-ratio:1.25;object-fit:cover;display:block}
.pjob-shot figcaption{
  font-size:.78rem;color:var(--text-3);padding:.7rem .9rem;
  border-top:1px solid var(--border);letter-spacing:.02em;
}

/* artwork upload */
.art-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.art-tab{
  font-size:.83rem;color:var(--text-2);cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:.45rem .9rem;transition:all .18s var(--ease);
}
.art-tab:hover{color:var(--white);border-color:var(--border-2)}
.art-tab.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--white);font-weight:500}
.art-tab:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.drop-zone{
  display:grid;justify-items:center;gap:.35rem;text-align:center;cursor:pointer;
  border:2px dashed var(--border-2);border-radius:var(--r);
  background:var(--surface-2);padding:var(--sp-5) var(--sp-4);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.drop-zone:hover,.drop-zone.is-over{border-color:var(--accent);background:var(--accent-soft)}
.drop-zone input[type=file]{position:absolute;opacity:0;width:0;height:0}
.drop-zone:focus-within{outline:3px solid var(--accent);outline-offset:3px}
.dz-icon{font-size:1.7rem;line-height:1}
.drop-zone b{font-size:.92rem;color:var(--white);font-weight:500}
.drop-zone b u{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent)}
.dz-note{font-size:.76rem;color:var(--text-3);max-width:42ch;line-height:1.5}
.dz-list{
  display:none;font-size:.8rem;color:var(--accent);margin-top:.5rem;
  font-family:var(--font-mono);letter-spacing:.02em;word-break:break-all;
}
.dz-list.has{display:block}

@media (max-width:940px){
  .pjob-grid{grid-template-columns:1fr}
  .pjob-grid .quote{position:static}
}

/* ── 20 · IDEA CARD GALLERY + numbered lists (products.html) ───────────── */
.idea-grid{
  display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.idea{
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  background:var(--surface);transition:transform .25s var(--ease),border-color .25s var(--ease);
}
.idea:hover{transform:translateY(-4px);border-color:var(--accent-soft)}
.idea img{width:100%;height:auto;display:block}
.idea figcaption{
  font-size:.74rem;color:var(--text-3);padding:.6rem .7rem;
  border-top:1px solid var(--border);letter-spacing:.04em;text-transform:uppercase;
}
.contents-list.numbered{counter-reset:step}
.contents-list.numbered li{counter-increment:step}
.contents-list.numbered li::before{
  content:"0" counter(step);color:var(--accent);font-family:var(--font-mono);
  font-size:.78rem;font-weight:700;
}
.kit-price s{color:var(--text-3);font-size:1rem;margin-left:.1rem}