/* ================================================================
   Glaze Catering Funnel — shared kit (single source of truth)
   Loaded by every catering-*.html page so the design system,
   wayfinding bar, and help launcher stay pixel-consistent.
   Mirrors the wholesale proto/final aesthetic, tuned BRIGHT for
   catering (cream + honey + blush, plum/gold anchors).
   ================================================================ */

/* ── Fonts ── */
@font-face {
  font-family: 'Recoleta';
  src: url('/fonts/Recoleta-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Recoleta's woff has a broken % glyph and broken Latin-1 accents
     (Crème Brûlée!). Exclude U+0025 and U+00C0–U+024F so the percent
     sign and accented letters fall back to Georgia instead of tofu. */
  unicode-range: U+0-24, U+26-BF, U+250-10FFFF;
}

/* ── Tokens ── */
:root {
  --cream: #fdf8f0;
  --panel: #fffdf8;
  --slip: #fffdf8;
  --plum: #4a1942;
  --plum-soft: #5d2454;
  --gold: #d4a843;
  --gold-soft: #e8c46a;
  --gold-text: #7c5814;
  --muted: #6f5968;
  --ink: #160a13;
  --blush: #ffd8e8;
  --blush-deep: #c84a6b;
  --honey: #f6d47a;
  --mint: #cfe8cf;
  --serif: 'Recoleta', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --line: rgba(74, 25, 66, 0.14);
  --line-soft: rgba(74, 25, 66, 0.08);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  overflow: hidden;
  background: var(--cream);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: inherit; }
a { color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Stage: one screen, no scroll (mirrors wholesale) ── */
.stage {
  position: fixed;
  inset: 0;
  bottom: 48px;                       /* reserve the wayfinding bar */
  height: calc(100dvh - 48px);
  width: 100vw;
  overflow: hidden;
  background:
    radial-gradient(135% 120% at 50% -14%, #fffdf7 0%, var(--cream) 46%, #f6e7cf 100%);
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 2.1vh, 22px) clamp(16px, 3.6vw, 64px) clamp(12px, 2vh, 18px);
}

/* ── Masthead (shared) ── */
.cmast {
  flex: 0 0 auto;
  position: relative; z-index: 6;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(6px, 1vh, 12px);
  border-bottom: 1px solid var(--line-soft);
}
.cmast-l { display: flex; align-items: baseline; gap: 12px; }
.cmast-mark {
  font-family: var(--serif);
  font-size: clamp(17px, 1.9vw, 22px);
  color: var(--plum);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.cmast-tag {
  font-size: clamp(9.5px, 0.9vw, 10px);
  letter-spacing: 0.3em; text-transform: uppercase; font-weight: 700;
  color: var(--gold-text);
}
.cmast-meta {
  font-size: clamp(9.5px, 0.9vw, 10px);
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  color: var(--muted);
  display: flex; align-items: center; gap: 10px;
}
.cmast-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); display: inline-block; }
@media (max-width: 600px) { .cmast-meta { display: none; } }

/* ── Headline lockup ── */
.chead-h {
  font-family: var(--serif);
  color: var(--plum);
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0;
  font-feature-settings: "liga" 0;     /* avoid broken fi/fl ligatures */
}
.chead-h em { font-style: italic; color: var(--gold-text); }
.chead-sub {
  font-size: clamp(12px, 1.2vw, 15px);
  line-height: 1.5; color: var(--muted);
  max-width: 52ch; margin: 10px 0 0;
}
.chead-sub b { color: var(--plum); font-weight: 600; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.26em;
  font-size: clamp(9.5px, 0.9vw, 11px); font-weight: 700;
  color: var(--gold-text);
}

/* ── Buttons (shared) ── */
.btn {
  font-family: var(--sans); font-weight: 700; font-size: 14px;
  border: none; cursor: pointer; border-radius: 999px;
  padding: 13px 26px; line-height: 1; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .2s var(--ease), box-shadow .2s ease, background .2s ease;
}
.btn-primary { background: var(--gold); color: var(--plum); box-shadow: 0 10px 24px -10px rgba(212,168,67,.85); }
.btn-primary:hover { background: var(--gold-soft); transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(212,168,67,.95); }
.btn-primary.is-disabled, .btn-primary:disabled { background: #efe6d6; color: #b7a98f; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; color: var(--plum); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--gold); background: rgba(212,168,67,.08); }
.btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

/* ── Cards / chips / pills (shared) ── */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 44px -32px rgba(74,25,66,0.34);
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; padding: 5px 11px;
  background: rgba(212,168,67,.16); color: var(--gold-text);
  border: 1px solid rgba(212,168,67,.34);
}
.pill-premium { background: rgba(74,25,66,.08); color: var(--plum); border-color: rgba(74,25,66,.2); }

/* ── Inline error / recover banner (no dead-ends) ── */
.recover {
  display: none; margin-top: 12px;
  background: rgba(200,74,107,.1); border: 1px solid rgba(200,74,107,.4);
  color: var(--blush-deep); border-radius: 12px; padding: 11px 14px;
  font-size: 13px; line-height: 1.45;
}
.recover.is-shown { display: block; }
.recover a { color: var(--plum); font-weight: 700; }

/* ── Bottom wayfinding bar (verbatim from wholesale) ── */
.glz-fn{position:fixed;left:0;right:0;bottom:0;height:48px;z-index:9000;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 clamp(14px,2vw,28px);background:rgba(74,25,66,0.96);box-shadow:0 -8px 24px -14px rgba(74,25,66,0.6);font-family:'DM Sans',system-ui,sans-serif;}
.glz-fn-back,.glz-fn-next{font-size:13px;font-weight:700;letter-spacing:.01em;text-decoration:none;border-radius:999px;padding:9px 18px;line-height:1;white-space:nowrap;cursor:pointer;border:none;}
.glz-fn-back{color:#fdf8f0;opacity:.82;background:transparent;}
.glz-fn-back:hover{opacity:1;}
.glz-fn-next{color:#4a1942;background:#d4a843;box-shadow:0 6px 16px -8px rgba(212,168,67,.8);}
.glz-fn-next:hover{background:#e0b652;}
.glz-fn-next.is-disabled{background:rgba(253,248,240,0.28);color:rgba(253,248,240,0.6);box-shadow:none;cursor:not-allowed;pointer-events:none;}
.glz-fn-mid{display:flex;align-items:center;gap:10px;color:rgba(253,248,240,.8);}
.glz-fn-step{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.glz-fn-dots{display:flex;gap:6px;}
.glz-fn-dots i{width:6px;height:6px;border-radius:50%;background:rgba(253,248,240,.32);display:block;}
.glz-fn-dots i.on{background:#d4a843;transform:scale(1.25);}
@media(max-width:680px){.glz-fn-step{display:none;}}

/* ── Scroll-release on short / small viewports ── */
@media (max-height: 700px) {
  html, body { height: auto; overflow: visible; }
  .stage { position: relative; inset: auto; height: auto; min-height: calc(100dvh - 48px); overflow: visible; }
}
@media (max-width: 720px) {
  html, body { height: auto; overflow: visible; }
  .stage { position: relative; inset: auto; height: auto; min-height: calc(100dvh - 48px); overflow: visible; padding-bottom: 64px; }
}

/* ================================================================
   glz-guide help launcher + walkthrough (verbatim from wholesale)
   ================================================================ */
.glz-g, .glz-g *{box-sizing:border-box;}
.glz-g{
  --g-cream:var(--cream,#fdf8f0);--g-plum:var(--plum,#4a1942);--g-gold:var(--gold,#d4a843);
  --g-gold-text:var(--gold-text,#7c5814);--g-ink:var(--ink,#160a13);--g-muted:var(--muted,#6f5968);
  --g-line:var(--line,rgba(74,25,66,0.14));--g-panel:var(--panel,#fffdf8);
  --g-serif:var(--serif,'Recoleta',Georgia,'Times New Roman',serif);
  --g-sans:var(--sans,'DM Sans',system-ui,-apple-system,sans-serif);
}
.glz-g-launch{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:8800;width:64px;min-height:168px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 8px;border:none;cursor:pointer;border-radius:18px 0 0 18px;background:linear-gradient(160deg,var(--g-plum),#5d2454);border-left:1px solid rgba(212,168,67,0.55);box-shadow:0 18px 40px -20px rgba(74,25,66,0.6);color:var(--g-cream);font-family:var(--g-sans);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease;}
.glz-g-launch:hover,.glz-g-launch:focus-visible{transform:translateY(-50%) translateX(-6px);box-shadow:0 24px 52px -18px rgba(74,25,66,0.72);}
.glz-g-launch:focus-visible{outline:2px solid var(--g-gold);outline-offset:3px;}
.glz-g-launch::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 rgba(212,168,67,0.5);}
.glz-g-launch.is-pulsing::after{animation:glzPulse 2.6s ease-out infinite;}
.glz-g-launch:hover::after,.glz-g-launch:focus-visible::after,.glz-g-launch.is-resting::after{animation:none;box-shadow:none;}
@keyframes glzPulse{0%{box-shadow:0 0 0 0 rgba(212,168,67,0.5);}70%{box-shadow:0 0 0 12px rgba(212,168,67,0);}100%{box-shadow:0 0 0 0 rgba(212,168,67,0);}}
.glz-g-launch .glz-g-glyph{flex:0 0 auto;display:block;}
.glz-g-launch .glz-g-ltext{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);display:flex;flex-direction:column;align-items:center;gap:6px;line-height:1.05;}
.glz-g-launch .glz-g-l1{font-weight:700;font-size:13px;color:var(--g-cream);letter-spacing:.01em;}
.glz-g-launch .glz-g-l2{font-weight:600;font-size:11px;color:var(--g-gold);letter-spacing:.01em;}
.glz-g-launch .glz-g-pill-text{display:none;}
@media (max-width:779px){
  .glz-g-launch{top:auto;right:14px;bottom:calc(48px + env(safe-area-inset-bottom) + 14px);transform:none;width:auto;min-height:0;height:46px;flex-direction:row;gap:8px;padding:0 18px;border-radius:999px;border-left:1px solid rgba(212,168,67,0.55);}
  .glz-g-launch:hover,.glz-g-launch:focus-visible{transform:translateX(-2px);}
  .glz-g-launch .glz-g-ltext{display:none;}
  .glz-g-launch .glz-g-pill-text{display:inline;font-weight:700;font-size:14px;color:var(--g-cream);letter-spacing:.01em;}
}
.glz-g-overlay{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px);background:rgba(22,10,19,0.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;font-family:var(--g-sans);}
.glz-g-overlay.is-open{display:flex;}
.glz-g-overlay.is-shown{opacity:1;transition:opacity .22s ease;}
.glz-g-card{position:relative;max-width:460px;width:100%;background:var(--g-panel);border:1px solid var(--g-line);border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(74,25,66,.55),0 2px 0 rgba(255,255,255,.6) inset;}
.glz-g-accent{height:5px;width:100%;background:linear-gradient(90deg,#eac766,#d4a843 50%,#b8902d);}
.glz-g-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px 0;}
.glz-g-head-l{display:flex;align-items:center;gap:10px;}
.glz-g-chip{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--g-plum);display:flex;align-items:center;justify-content:center;}
.glz-g-head-txt{display:flex;flex-direction:column;line-height:1.1;}
.glz-g-head-title{font-weight:700;font-size:13px;color:var(--g-plum);}
.glz-g-head-loc{font-size:11px;color:var(--g-gold-text);margin-top:2px;}
.glz-g-x{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--g-line);background:transparent;color:var(--g-muted);cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;transition:color .2s ease,border-color .2s ease;}
.glz-g-x:hover{color:var(--g-plum);border-color:var(--g-plum);}
.glz-g-x:focus-visible{outline:2px solid var(--g-gold);outline-offset:2px;}
.glz-g-body{padding:18px 24px 4px;}
.glz-g-eyebrow{text-transform:uppercase;letter-spacing:.2em;color:var(--g-gold-text);font-size:9.5px;font-weight:700;}
.glz-g-title{font-family:var(--g-serif);color:var(--g-plum);font-size:clamp(22px,4.4vw,30px);line-height:1.08;margin:8px 0 0;font-weight:600;}
.glz-g-title em{font-style:italic;color:var(--g-gold-text);}
.glz-g-text{font-size:clamp(13.5px,1.9vw,15.5px);color:var(--g-muted);line-height:1.55;margin:10px 0 0;max-width:40ch;}
.glz-g-text b{color:var(--g-plum);font-weight:700;}
.glz-g-tip{display:flex;align-items:flex-start;gap:8px;background:rgba(212,168,67,.13);border:1px solid rgba(212,168,67,.4);border-radius:12px;padding:9px 12px;margin-top:14px;}
.glz-g-tip svg{flex:0 0 auto;margin-top:1px;}
.glz-g-tip span{color:var(--g-gold-text);font-size:12px;line-height:1.45;}
.glz-g-tel{display:flex;align-items:center;gap:12px;text-decoration:none;border:1px solid var(--g-line);background:rgba(74,25,66,.05);border-radius:14px;padding:14px 16px;margin-top:14px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.glz-g-tel:hover{transform:translateY(-2px);border-color:var(--g-gold);box-shadow:0 14px 30px -18px rgba(74,25,66,.5);}
.glz-g-tel:focus-visible{outline:2px solid var(--g-gold);outline-offset:2px;}
.glz-g-tel-num{font-family:var(--g-serif);color:var(--g-plum);font-size:clamp(22px,5vw,30px);font-weight:600;line-height:1;}
.glz-g-tel-sub{font-size:12px;color:var(--g-muted);margin-top:10px;}
.glz-g-rail{display:flex;align-items:center;justify-content:center;gap:7px;padding:16px 24px 0;}
.glz-g-dot{width:7px;height:7px;border-radius:99px;background:rgba(74,25,66,.22);transition:width .25s ease,background .25s ease;}
.glz-g-dot.is-done{background:rgba(74,25,66,.45);}
.glz-g-dot.is-active{width:20px;background:var(--g-gold);}
.glz-g-meter-wrap{padding:10px 24px 0;}
.glz-g-meter{height:3px;border-radius:99px;background:rgba(74,25,66,.12);overflow:hidden;}
.glz-g-meter-fill{height:100%;background:var(--g-gold);width:0;transition:width .28s cubic-bezier(.22,1,.36,1);}
.glz-g-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 24px 22px;}
.glz-g-back{background:transparent;border:none;cursor:pointer;color:var(--g-muted);font-family:var(--g-sans);font-size:13px;font-weight:600;padding:8px 4px;transition:color .2s ease;}
.glz-g-back:hover{color:var(--g-plum);}
.glz-g-back:focus-visible{outline:2px solid var(--g-gold);outline-offset:2px;border-radius:6px;}
.glz-g-back.is-hidden{visibility:hidden;}
.glz-g-skip{background:transparent;border:none;cursor:pointer;color:var(--g-muted);font-family:var(--g-sans);font-size:13px;padding:8px 4px;text-decoration:none;}
.glz-g-skip:hover{text-decoration:underline;color:var(--g-plum);}
.glz-g-skip:focus-visible{outline:2px solid var(--g-gold);outline-offset:2px;border-radius:6px;}
.glz-g-skip.is-hidden{visibility:hidden;}
.glz-g-next{background:var(--g-gold);color:var(--g-plum);border:none;cursor:pointer;border-radius:999px;padding:10px 22px;font-family:var(--g-sans);font-weight:700;font-size:13px;box-shadow:0 6px 16px -8px rgba(212,168,67,.8);transition:transform .2s ease,box-shadow .2s ease;}
.glz-g-next:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(212,168,67,.9);}
.glz-g-next:focus-visible{outline:2px solid var(--g-plum);outline-offset:2px;}
.glz-g-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
@media (prefers-reduced-motion: reduce){
  .glz-g-launch,.glz-g-launch::after,.glz-g-overlay,.glz-g-card,.glz-g-swap,.glz-g-tel,.glz-g-next,.glz-g-dot,.glz-g-meter-fill{transition:none!important;animation:none!important;}
}
@media (prefers-reduced-motion: no-preference){
  .glz-g-overlay.is-open .glz-g-card{animation:glzCardIn .34s cubic-bezier(.22,1,.36,1) both;}
  .glz-g-swap{animation:glzSwapIn .22s ease both;}
}
@keyframes glzCardIn{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}
@keyframes glzSwapIn{from{opacity:0;transform:translateX(var(--glz-dir,10px));}to{opacity:1;transform:none;}}
body.glz-guide-lock{overflow:hidden!important;}