/* ==========================================================================
   Matchday Stubs — site design system
   Derived from brand-tokens.json v2.0. The club's colour leads on PRODUCTS;
   the site itself is the neutral frame: paper ground, ink text, gold accents.
   ========================================================================== */

/* ---- fonts (self-hosted, copied from the print engine) ---- */
@font-face { font-family:'Anton'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/assets/fonts/Anton-Regular.ttf') format('truetype'); }
@font-face { font-family:'Archivo'; font-weight:100 900; font-style:normal; font-display:swap;
  src:url('/assets/fonts/Archivo-Variable.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:100 900; font-style:normal; font-display:swap;
  src:url('/assets/fonts/Inter-Variable.ttf') format('truetype'); }
@font-face { font-family:'Spline Sans Mono'; font-weight:300 700; font-style:normal; font-display:swap;
  src:url('/assets/fonts/SplineSansMono-Variable.ttf') format('truetype'); }

:root {
  /* core palette */
  --ink:#14181C; --paper:#F4F1EA; --gold:#C8A24A; --concrete:#8A8F96; --black:#0B0D0F;
  /* support palette */
  --gold-deep:#A9842F; --paper-deep:#E7E1D5; --gold-soft:#E4CF92; --line:#D8D2C6;
  /* derived surfaces */
  --paper-card:#FBF9F4; --ink-soft:#20262C; --ink-700:rgba(20,24,28,.7); --ink-500:rgba(20,24,28,.52);
  /* studio-grey mount: behind product art shown whole (contain), so landscape
     designs sit on grey like a matted print instead of being cover-cropped */
  --mount:#DAD6CC;
  /* label/caption grey on light surfaces — darker than --concrete for AA contrast */
  --label:#6E747B;
  /* type */
  --f-display:'Anton',Impact,sans-serif;
  --f-head:'Archivo',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-data:'Spline Sans Mono',ui-monospace,monospace;
  /* scale (1.25 ratio, 16px base) */
  --t-xs:.78rem; --t-sm:.9rem; --t-base:1rem; --t-md:1.18rem; --t-lg:1.5rem;
  --t-xl:1.95rem; --t-2xl:2.6rem; --t-3xl:3.4rem; --t-4xl:4.6rem;
  /* spacing unit = 8px */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --r-card:12px; --r-tight:4px; --r-pill:999px;
  --maxw:1180px; --maxw-narrow:760px;
  --shadow:0 1px 2px rgba(20,24,28,.04),0 8px 30px rgba(20,24,28,.08);
  --shadow-lg:0 4px 12px rgba(20,24,28,.08),0 24px 60px rgba(20,24,28,.16);
  --header-h:64px;
}

/* ---- reset ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px); }
body {
  font-family:var(--f-body); font-size:var(--t-base); line-height:1.6; color:var(--ink);
  background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea { font:inherit; color:inherit; }
ul { list-style:none; }
:focus-visible { outline:2px solid var(--gold-deep); outline-offset:2px; border-radius:var(--r-tight); }

/* ---- typography ---- */
h1,h2,h3,h4 { font-family:var(--f-head); font-weight:800; line-height:1.05; letter-spacing:-.02em; }
h1 { font-size:clamp(2.4rem,7vw,var(--t-4xl)); }
h2 { font-size:clamp(1.8rem,4.5vw,var(--t-3xl)); }
h3 { font-size:clamp(1.3rem,2.6vw,var(--t-xl)); }
p { color:var(--ink-700); }
.lead { font-size:clamp(1.05rem,2vw,var(--t-md)); color:var(--ink-700); line-height:1.55; }
.eyebrow { font-family:var(--f-data); font-weight:500; font-size:var(--t-xs); letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-deep); }
.display { font-family:var(--f-display); letter-spacing:.01em; line-height:.92; }
.mono { font-family:var(--f-data); }
strong { font-weight:700; color:var(--ink); }

/* ---- layout ---- */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s3); }
.narrow { max-width:var(--maxw-narrow); }
section { padding-block:clamp(var(--s5),8vw,var(--s7)); }
.section-head { max-width:640px; margin-bottom:var(--s5); }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head h2 { margin-bottom:var(--s2); }
.grid { display:grid; gap:var(--s3); }
.surface-ink { background:var(--ink); color:var(--paper); }
.surface-ink p,.surface-ink .lead { color:rgba(244,241,234,.74); }
.surface-ink .eyebrow { color:var(--gold-soft); }
.surface-paper-deep { background:var(--paper-deep); }
.rule { height:1px; background:var(--line); border:0; }
.gold-rule { width:56px; height:3px; background:var(--gold); border-radius:2px; }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s1);
  font-family:var(--f-head); font-weight:700; font-size:var(--t-base); letter-spacing:-.01em;
  padding:14px 26px; border-radius:var(--r-pill); min-height:48px; text-align:center; white-space:nowrap;
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease,color .2s ease; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--ink); color:var(--paper); box-shadow:var(--shadow); }
.btn-primary:hover { background:#000; box-shadow:var(--shadow-lg); }
.btn-gold { background:var(--gold); color:var(--ink); box-shadow:var(--shadow); }
.btn-gold:hover { background:var(--gold-soft); }
.btn-ghost { border:1.5px solid var(--line); color:var(--ink); background:var(--paper-card); }
.btn-ghost:hover { border-color:var(--ink); }
.btn-on-ink { background:var(--paper); color:var(--ink); }
.btn-on-ink:hover { background:#fff; }
.btn-lg { font-size:var(--t-md); padding:17px 34px; min-height:56px; }
.btn-block { width:100%; }
.btn-outline { border:1.5px solid var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover { background:var(--ink); color:var(--paper); }
.btn-text { background:none; color:var(--concrete); border:none; min-height:auto; padding:6px 10px; box-shadow:none; }
.btn-text:hover { color:var(--ink); text-decoration:underline; }
.btn-sm { font-size:var(--t-sm); padding:9px 16px; min-height:40px; }
.btn[disabled] { opacity:.45; cursor:not-allowed; transform:none; }
.btn svg { width:18px; height:18px; flex:none; }

/* ---- free-delivery announcement bar (thin, scrolls away above the header) ---- */
.topbar { background:var(--gold); color:var(--ink); text-align:center; padding:7px var(--s3);
  font-family:var(--f-data); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; }
.topbar span { display:inline-flex; align-items:center; gap:8px; }
.topbar svg { width:15px; height:15px; flex:none; }

/* ---- header ---- */
.site-header { position:sticky; top:0; z-index:50; background:rgba(244,241,234,.88);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); height:var(--header-h); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:100%; gap:var(--s3); }
.brand-logo { display:flex; align-items:center; gap:9px; height:40px; }
.brand-logo img { height:34px; width:auto; }
.logo-mark { display:flex; align-items:center; }
.logo-mark svg { height:30px; width:auto; }
.logo-word { font-family:var(--f-head); font-weight:800; font-size:1.22rem; letter-spacing:-.01em;
  color:var(--ink); white-space:nowrap; line-height:1; }
.logo-word .dot { color:var(--gold); padding:0 1px; }
.site-footer .brand-logo svg { height:48px; }
.nav-links { display:flex; align-items:center; gap:var(--s4); }
.nav-links a { font-family:var(--f-head); font-weight:600; font-size:var(--t-sm); color:var(--ink-700);
  position:relative; padding-block:4px; }
.nav-links a:hover { color:var(--ink); }
.nav-links a::after { content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--gold); transition:width .2s ease; }
.nav-links a:hover::after { width:100%; }
.nav-cta { display:flex; align-items:center; gap:var(--s2); }
.nav-cta .btn { padding:9px 20px; min-height:40px; font-size:var(--t-sm); }
.nav-toggle { display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.nav-toggle svg { width:24px; height:24px; }

/* ---- hero ---- */
.hero { position:relative; overflow:hidden; }
.hero.surface-ink { padding-block:clamp(var(--s6),11vw,var(--s8)); }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s6); align-items:center; }
.hero h1 { color:var(--paper); margin:var(--s3) 0; }
.hero h1 .accent { color:var(--gold); }
.hero-sub { margin-top:var(--s2); color:rgba(244,241,234,.66); font-size:var(--t-base);
  max-width:46ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }
.hero-trust { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin-top:var(--s4);
  font-family:var(--f-data); font-size:var(--t-xs); letter-spacing:.06em; color:rgba(244,241,234,.6);
  text-transform:uppercase; }
.hero-trust li { display:flex; align-items:center; gap:6px; }
.hero-trust li::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.hero-bg-glow { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 80% at 78% 30%,rgba(200,162,74,.18),transparent 70%); }

/* ---- stub preview frame (the live ticket) ---- */
.stub-stage { position:relative; }
.stub-frame { position:relative; width:100%; aspect-ratio:186/90; border-radius:var(--r-card);
  overflow:hidden; box-shadow:var(--shadow-lg); background:var(--ink-soft); }
.stub-frame iframe { width:100%; height:100%; border:0; display:block; }
.stub-frame.is-loading::after { content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);
  background-size:200% 100%; animation:shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.stub-caption { margin-top:var(--s3); font-family:var(--f-data); font-size:var(--t-xs);
  letter-spacing:.16em; text-transform:uppercase; color:var(--concrete); text-align:center; }

/* ---- hero "matching set": the framed print + the ticket stub, laid out as a
   pair you keep. The portrait print sits behind-left; the live stub overlaps
   front-right. Both rotate through finals where we have both a stub and a print. */
.hero-set { position:relative; min-height:clamp(360px,42vw,460px); }
.hero-print { position:absolute; top:0; left:1%; width:48%; z-index:1;
  transform:rotate(-4deg); transform-origin:center;
  background:#fff; padding:11px 11px 16px; border-radius:2px;
  box-shadow:0 0 0 7px var(--ink), 0 26px 60px rgba(0,0,0,.5); }
.hero-print img { width:100%; height:auto; display:block; border-radius:1px; }
.hero-set .stub-frame { position:absolute; right:0; bottom:5%; width:74%; z-index:2;
  transform:rotate(3deg); transform-origin:center; }
.stub-flip { display:inline-flex; gap:4px; margin-top:var(--s2); justify-content:center; width:100%; }
.stub-flip button { font-family:var(--f-data); font-size:var(--t-xs); letter-spacing:.12em;
  text-transform:uppercase; padding:6px 14px; border-radius:var(--r-pill); border:1px solid var(--line);
  color:var(--concrete); background:transparent; }
.stub-flip button.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.surface-ink .stub-flip button { border-color:rgba(244,241,234,.2); color:rgba(244,241,234,.6); }
.surface-ink .stub-flip button.active { background:var(--paper); color:var(--ink); }

/* ---- steps (how it works) ---- */
.steps { grid-template-columns:repeat(3,1fr); counter-reset:step; }
.step { background:var(--paper-card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s4); position:relative; }
.step::before { counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--f-display); font-size:var(--t-2xl); color:var(--gold); line-height:1; display:block;
  margin-bottom:var(--s2); }
.step h3 { font-size:var(--t-lg); margin-bottom:var(--s1); }

/* ---- feature row ---- */
.feature-row { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); text-align:center; }
.feature-row .feat .ic { width:40px; height:40px; margin:0 auto var(--s1); color:var(--gold-deep); }
.feature-row .feat h4 { font-family:var(--f-head); font-size:var(--t-base); font-weight:700; }
.feature-row .feat p { font-size:var(--t-sm); }

/* ---- example gallery ---- */
.gallery { grid-template-columns:repeat(3,1fr); }
.example-card { background:var(--paper-card); border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; box-shadow:var(--shadow); transition:transform .18s ease,box-shadow .18s ease; }
.example-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.example-card .shot { aspect-ratio:186/90; background:var(--ink-soft); }
.example-card .shot img { width:100%; height:100%; object-fit:cover; }
.example-card .meta { padding:var(--s3); }
.example-card .meta .fixture { font-family:var(--f-head); font-weight:700; font-size:var(--t-md); }
.example-card .meta .sub { font-family:var(--f-data); font-size:var(--t-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--label); margin-top:4px; }

/* ---- pricing / product cards ---- */
.price-grid { grid-template-columns:repeat(3,1fr); }
.price-card { background:var(--paper-card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); position:relative; }
.price-card.popular { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.price-card .badge { position:absolute; top:-11px; left:var(--s4); background:var(--gold); color:var(--ink);
  font-family:var(--f-data); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase;
  padding:4px 12px; border-radius:var(--r-pill); }
.price-card .pname { font-family:var(--f-head); font-weight:800; font-size:var(--t-lg); }
.price-card .psize { font-family:var(--f-data); font-size:var(--t-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--label); }
.price-card .pprice { font-family:var(--f-display); font-size:var(--t-2xl); line-height:1; }
.price-card .pprice .cur { font-size:.5em; vertical-align:top; }
.price-card ul.feats { display:flex; flex-direction:column; gap:6px; margin-top:auto; }
.price-card ul.feats li { font-size:var(--t-sm); color:var(--ink-700); padding-left:20px; position:relative; }
.price-card ul.feats li::before { content:'✓'; position:absolute; left:0; color:var(--gold-deep); font-weight:700; }

/* ---- FAQ accordion ---- */
.faq-list { max-width:var(--maxw-narrow); margin-inline:auto; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:var(--s3) 0; font-family:var(--f-head); font-weight:700; font-size:var(--t-md); cursor:pointer;
  list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .chev { width:22px; height:22px; flex:none; transition:transform .2s ease; color:var(--gold-deep); }
.faq-item[open] summary .chev { transform:rotate(45deg); }
.faq-item .ans { padding:0 0 var(--s3); color:var(--ink-700); max-width:62ch; }

/* ---- footer ---- */
.site-footer { background:var(--ink); color:rgba(244,241,234,.66); padding-block:var(--s6) var(--s4); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s5); margin-bottom:var(--s5); }
.site-footer .brand-logo svg { height:40px; }
.site-footer h4 { font-family:var(--f-head); font-size:var(--t-sm); letter-spacing:.04em; color:var(--paper);
  text-transform:uppercase; margin-bottom:var(--s2); }
.site-footer a { color:rgba(244,241,234,.66); font-size:var(--t-sm); display:inline-block; padding:4px 0; }
.site-footer a:hover { color:var(--gold-soft); }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2);
  padding-top:var(--s3); border-top:1px solid rgba(244,241,234,.12); font-size:var(--t-xs);
  color:rgba(244,241,234,.5); font-family:var(--f-data); letter-spacing:.04em; }

/* ---- CTA band ---- */
.cta-band { text-align:center; }
.cta-band h2 { color:var(--paper); margin-bottom:var(--s2); }
.cta-band .perf { width:100%; max-width:340px; height:2px; margin:var(--s4) auto;
  background-image:radial-gradient(circle,var(--gold) 1.2px,transparent 1.4px); background-size:10px 4px;
  background-repeat:repeat-x; }

/* ---- home: story + two product lines + keepsakes strip ---- */
.story { text-align:center; }

.product-lines { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); align-items:stretch; }
.pline { display:flex; flex-direction:column; background:var(--paper-card); border:1px solid var(--line);
  border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease; }
.pline:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
/* Each side rotates examples of that product, shown WHOLE on a grey studio mount
   (never cover-cropped): the landscape stub and the portrait poster both sit
   centred and un-cropped, with a soft drop-shadow so they read as real prints. */
.pline-shot { position:relative; aspect-ratio:4/3; background:var(--mount); overflow:hidden; }
.pline-shot .poster { position:absolute; inset:0; }
.pline-shot .poster img, .pline-shot > img { width:100%; height:100%; object-fit:contain; padding:var(--s3);
  filter:drop-shadow(0 6px 16px rgba(20,24,28,.22)); }
.pline-tag { position:absolute; z-index:2; top:var(--s2); left:var(--s2); background:var(--ink); color:var(--paper);
  font-family:var(--f-data); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--r-pill); }
.pline-body { display:flex; flex-direction:column; gap:var(--s2); padding:var(--s4); flex:1; }
.pline-body h3 { font-size:var(--t-xl); }
.pline-body p { flex:1; }
.pline-body .btn { margin-top:var(--s1); }

/* "framed print" mock — we advertise the keepsakes as framed prints (mat + dark
   frame + soft shadow) even before the tool bakes frames into the artwork. The
   inner art container (.poster / .ks-card-shot) holds the rotating design. */
.kframe { display:block; background:var(--paper-card); padding:8px; border-radius:2px;
  box-shadow:0 0 0 3px #16191e, 0 12px 26px rgba(0,0,0,.3); }
.kframe > * { display:block; position:relative; aspect-ratio:2/3; background:var(--mount);
  overflow:hidden; border:1px solid rgba(20,24,28,.16); }

.ks-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); }
.ks-poster-card { display:flex; flex-direction:column; border-radius:var(--r-card); overflow:visible;
  background:var(--ink-soft); box-shadow:var(--shadow); transition:transform .18s ease,box-shadow .18s ease; }
.ks-poster-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.ks-poster-card > .kframe { margin:var(--s3) var(--s3) 0; }
.ks-poster-card .poster img { width:100%; height:100%; object-fit:cover; }
.ks-poster-meta { display:flex; flex-direction:column; gap:3px; padding:var(--s2) var(--s3) var(--s3); color:var(--paper); }
.ks-poster-comp { font-family:var(--f-data); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); }
.ks-poster-title { font-family:var(--f-head); font-weight:800; font-size:var(--t-base); line-height:1.15; }
.ks-poster-price { font-family:var(--f-data); font-size:var(--t-xs); letter-spacing:.06em;
  text-transform:uppercase; color:rgba(244,241,234,.66); margin-top:2px; }

/* =========================================================================
   CREATE / BUILDER PAGE
   ========================================================================= */
.builder { display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:start;
  padding-block:var(--s5) var(--s7); }
.builder-preview { position:sticky; top:calc(var(--header-h) + var(--s3)); }
.builder-preview .stub-frame { box-shadow:var(--shadow-lg); }
.builder-summary { margin-top:var(--s3); background:var(--paper-card); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--s3); }
.builder-summary .row { display:flex; justify-content:space-between; gap:var(--s2); padding:6px 0;
  font-size:var(--t-sm); }
.builder-summary .row .k { color:var(--concrete); font-family:var(--f-data); font-size:var(--t-xs);
  letter-spacing:.08em; text-transform:uppercase; }
.builder-summary .row .v { font-weight:600; text-align:right; }
.builder-summary .total { border-top:1px solid var(--line); margin-top:var(--s1); padding-top:var(--s2);
  font-family:var(--f-head); font-weight:800; font-size:var(--t-md); }

/* stepper */
.stepper { display:flex; gap:var(--s1); margin-bottom:var(--s4); flex-wrap:wrap; }
.stepper .dot { display:flex; align-items:center; gap:8px; font-family:var(--f-data); font-size:var(--t-xs);
  letter-spacing:.06em; text-transform:uppercase; color:var(--concrete); padding:6px 0; }
.stepper .dot .n { width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:11px; }
.stepper .dot.active { color:var(--ink); }
.stepper .dot.active .n { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.stepper .dot.done .n { border-color:var(--gold-deep); background:var(--gold); color:var(--ink); }
.stepper .dot:not(:last-child)::after { content:''; width:14px; height:1px; background:var(--line); }

.step-panel { display:none; animation:fade .25s ease; }
.step-panel.active { display:block; }
@keyframes fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.step-panel h2 { font-size:var(--t-xl); margin-bottom:var(--s1); }
.step-panel .hint { color:var(--ink-700); margin-bottom:var(--s3); font-size:var(--t-sm); }

/* club picker */
.club-search { width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--r-pill);
  background:var(--paper-card); margin-bottom:var(--s3); font-size:var(--t-base); }
.club-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); max-height:340px;
  overflow-y:auto; padding:2px; }
.club-chip { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-card);
  border:1.5px solid var(--line); background:var(--paper-card); text-align:left; transition:border-color .15s,transform .1s; }
.club-chip:hover { border-color:var(--concrete); }
.club-chip.selected { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.club-chip .swatch { width:22px; height:22px; border-radius:5px; flex:none; border:1px solid rgba(0,0,0,.12); }
.club-chip .cname { font-family:var(--f-head); font-weight:600; font-size:var(--t-sm); line-height:1.1; }

/* forms */
.field { margin-bottom:var(--s3); }
.field label { display:block; font-family:var(--f-data); font-size:var(--t-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--concrete); margin-bottom:6px; }
.field input,.field select,.field textarea { width:100%; padding:12px 14px; border:1.5px solid var(--line);
  border-radius:var(--r-tight); background:var(--paper-card); font-size:var(--t-base); }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--ink); outline:none; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.field-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--s2); }
.char-count { font-family:var(--f-data); font-size:var(--t-xs); color:var(--concrete); white-space:nowrap; }
.toggle-paths { display:flex; gap:var(--s1); margin-bottom:var(--s3); }
.toggle-paths button { flex:1; padding:12px; border-radius:var(--r-tight); border:1.5px solid var(--line);
  font-family:var(--f-head); font-weight:600; font-size:var(--t-sm); background:var(--paper-card); color:var(--ink-700); }
.toggle-paths button.active { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.toggle-paths button svg { width:18px; height:18px; flex:none; vertical-align:-3px; margin-right:6px; }
.dropzone { border:2px dashed var(--line); border-radius:var(--r-card); padding:var(--s5) var(--s3);
  text-align:center; color:var(--concrete); background:var(--paper-card); transition:border-color .15s,background .15s; }
.dropzone.drag { border-color:var(--gold-deep); background:#fff; }
.dropzone .big { font-family:var(--f-head); font-weight:700; color:var(--ink); margin-bottom:4px; }

/* product select (step 4) */
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.product-opt { display:flex; gap:var(--s2); padding:var(--s2); border:1.5px solid var(--line);
  border-radius:var(--r-card); background:var(--paper-card); align-items:flex-start; text-align:left; position:relative; }
.product-opt:hover { border-color:var(--concrete); }
.product-opt.selected { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.product-opt .pinfo { flex:1; min-width:0; }
.product-opt .pn { font-family:var(--f-head); font-weight:700; font-size:var(--t-base); }
.product-opt .pd { font-size:var(--t-xs); color:var(--label); }
.product-opt .pp { font-family:var(--f-display); font-size:var(--t-lg); margin-left:auto; }
.product-opt .badge-sm { position:absolute; top:-9px; right:10px; background:var(--gold); color:var(--ink);
  font-family:var(--f-data); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px;
  border-radius:var(--r-pill); }

/* status / alerts */
.notice { padding:12px 14px; border-radius:var(--r-tight); font-size:var(--t-sm); margin-bottom:var(--s3);
  border:1px solid; display:flex; gap:8px; align-items:flex-start; }
.notice.info { background:#eef3f7; border-color:#cdddea; color:#1d3a52; }
.notice.warn { background:#fbf3df; border-color:#ecd8a3; color:#6b5413; }
.notice.ok { background:#e9f6ec; border-color:#bfe3c6; color:#1f5230; }
.notice.err { background:#fbeaea; border-color:#ecc1c1; color:#6b1d1d; }
.spinner { width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--ink);
  border-radius:50%; animation:spin .7s linear infinite; flex:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.candidates { display:flex; flex-direction:column; gap:8px; margin-top:var(--s2); }
.candidate { text-align:left; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-tight);
  background:var(--paper-card); font-size:var(--t-sm); }
.candidate:hover { border-color:var(--ink); }

.step-actions { display:flex; gap:var(--s2); margin-top:var(--s4); }
.step-actions .btn { flex:1; }
.step-actions .back { flex:0 0 auto; }

/* confirmation */
.confirm-hero { text-align:center; max-width:var(--maxw-narrow); margin-inline:auto; }
.confirm-hero .check { width:72px; height:72px; margin:0 auto var(--s3); color:var(--gold-deep); }
.confirm-card { background:var(--paper-card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s4); margin-top:var(--s4); text-align:left; }

/* ---- responsive ---- */
@media (max-width:980px) {
  .hero-grid { grid-template-columns:1fr; gap:var(--s5); }
  .hero-stage { order:-1; max-width:520px; margin-inline:auto; width:100%; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .builder { grid-template-columns:1fr; }
  .builder-preview { position:static; max-width:520px; margin-inline:auto; width:100%; }
  .ks-strip { grid-template-columns:repeat(2,1fr); }
  /* drop the multi-up grids to 2-up here so they don't sit cramped in the 760–980 band */
  .gallery, .price-grid, .steps, .feature-row { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  :root { --header-h:60px; }
  .nav-links,.nav-make { display:none; }
  .nav-toggle { display:flex; }
  .site-header.menu-open + .mobile-menu { display:block; }
  .steps,.feature-row,.gallery,.price-grid { grid-template-columns:1fr; }
  .product-grid { grid-template-columns:1fr; }
  .product-lines { grid-template-columns:1fr; }
  .feature-row { grid-template-columns:repeat(2,1fr); }
  .club-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr; gap:var(--s4); }
  .field-row,.field-row-3 { grid-template-columns:1fr; }
  section { padding-block:var(--s5); }
}
@media (max-width:480px) {
  .ks-strip { grid-template-columns:repeat(2,1fr); gap:var(--s2); }
  .feature-row { grid-template-columns:1fr; }
  /* mobile tap-target + control polish (from responsive audit) */
  .stub-flip button { padding:10px 16px; }
  .ks-select select, .ks-search input { padding-block:14px; }
  .stepper .dot:not(:last-child)::after { display:none; }
  .stepper { gap:var(--s2); }
  .hero-actions .btn, .cta-band .btn { white-space:normal; }
}

/* mobile menu */
.mobile-menu { display:none; position:fixed; top:var(--header-h); left:0; right:0; z-index:49;
  background:var(--paper); border-bottom:1px solid var(--line); padding:var(--s2) var(--s3) var(--s3);
  box-shadow:var(--shadow); }
.mobile-menu.open { display:block; }
.mobile-menu a { display:block; padding:14px 0; font-family:var(--f-head); font-weight:600;
  border-bottom:1px solid var(--line); }
.mobile-menu .btn { margin-top:var(--s2); }

/* ---- builder v2: league entry, add-ons, in-frame preview ---- */
.link-btn { background:none; border:0; padding:6px 0; margin-top:var(--s2); cursor:pointer;
  font-family:var(--f-data); font-size:var(--t-xs); letter-spacing:.06em; color:var(--gold-deep);
  text-decoration:underline; text-underline-offset:3px; }
.link-btn:hover { color:var(--ink); }
.custom-club { margin-top:var(--s2); padding:var(--s3); border:1.5px dashed var(--line);
  border-radius:var(--r-card); background:var(--paper-card); }
.custom-club .field input[type=color] { padding:4px; height:46px; cursor:pointer; }

.addons { margin-top:var(--s3); display:grid; gap:var(--s2); }
.addons-head { margin-bottom:0; }
.addon-row { display:flex; align-items:flex-start; gap:var(--s2); padding:var(--s2);
  border:1.5px solid var(--line); border-radius:var(--r-card); cursor:pointer; }
.addon-row:hover { border-color:var(--concrete); }
.addon-row:has(input:checked) { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.addon-row input { margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--ink); }
.addon-info { flex:1; min-width:0; }
.addon-name { display:block; font-family:var(--f-head); font-weight:700; font-size:var(--t-base); }
.addon-blurb { display:block; font-size:var(--t-xs); color:var(--label); margin-top:2px; }
.addon-price { font-family:var(--f-display); font-size:var(--t-md); margin-left:auto; white-space:nowrap; }

/* ---- back-of-stub: standard branding vs custom photo (paid add-on) ---- */
.back-field > label { display:block; font-family:var(--f-data); font-size:var(--t-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--concrete); margin-bottom:6px; }
.back-choices { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.back-choice { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--r-card); }
.back-choice:hover { border-color:var(--concrete); }
.back-choice:has(input:checked) { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.back-choice input { width:18px; height:18px; flex:none; accent-color:var(--ink); }
.back-choice .bc-text { display:flex; flex-direction:column; min-width:0; }
.back-choice .bc-name { font-family:var(--f-head); font-weight:700; font-size:var(--t-sm); }
.back-choice .bc-sub { font-size:var(--t-xs); color:var(--concrete); }
.back-choice .bc-price { margin-left:auto; font-family:var(--f-data); font-size:var(--t-sm); white-space:nowrap; }
.back-photo-panel { margin-top:var(--s2); padding:var(--s3); border:1px dashed var(--line); border-radius:var(--r-card); }
.back-photo-panel .hint { margin:10px 0 0; }
.back-photo-row { display:flex; align-items:center; gap:var(--s3); }
.back-photo-thumb { width:120px; aspect-ratio:186/90; object-fit:cover; border-radius:6px; background:#111;
  box-shadow:var(--shadow); flex:none; }
.back-photo-actions { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
@media (max-width:480px){ .back-choices { grid-template-columns:1fr; } }

/* in-context mockups: wrap the ticket in a print / frame ring */
.builder-preview .stub-frame { transition:box-shadow .25s ease, border-color .25s ease; }
.builder-preview.mock-print .stub-frame { border-radius:2px; box-shadow:0 0 0 12px #fff, var(--shadow-lg); }
.builder-preview.mock-framed .stub-frame { border:14px solid #23262b; border-radius:2px;
  box-shadow:0 0 0 10px #fff, var(--shadow-lg); }

@media (prefers-reduced-motion:reduce) { *{ animation:none !important; transition:none !important; } html{scroll-behavior:auto;} }