/* BARBOBA — components: buttons, nav, cards, forms, modal, toast, cursor */

/* ---------- buttons ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: currentColor; --btn-bd: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 0 1.6em; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  font-family: var(--f-ui); font-weight: 500; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; line-height: 1;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn--primary { --btn-bg: var(--gold); --btn-fg: var(--ink); --btn-bd: var(--gold); }
.btn--primary:not(:disabled):hover { --btn-bg: #D8BC86; box-shadow: 0 10px 30px -10px rgb(201 169 110 / .7); }
.btn--secondary { --btn-bd: var(--gold); --btn-fg: currentColor; }
.btn--secondary:hover { --btn-bg: rgb(201 169 110 / .12); }
.section--paper .btn--secondary { --btn-bd: var(--gold-deep); }
.btn--wa { --btn-bg: var(--ink); --btn-fg: var(--cream); --btn-bd: rgb(244 239 230 / .22); }
.btn--wa:hover { --btn-bd: var(--wa); }
/* the WhatsApp logo (a vector mask: sharp at any pixel density) with a breathing glow that wakes up on hover */
.btn--wa .dot { position: relative; display: inline-block; width: 24px; height: 24px; flex: none; margin-right: 2px; border-radius: 0; background: none; box-shadow: none;
  filter: drop-shadow(0 0 3px rgb(37 211 102 / .55)); animation: wa-breathe 2.8s ease-in-out infinite; transition: transform .35s var(--ease-out); }
.btn--wa .dot::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; background: radial-gradient(circle, rgb(37 211 102 / .4), rgb(37 211 102 / .12) 45%, transparent 70%); animation: wa-halo 2.8s ease-in-out infinite; }
.btn--wa .dot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, #7bf7a6 0%, var(--wa) 48%, #12904b 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.7.3-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.8 4.4 3.9 1.6.7 2.3.8 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.7.3-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.8 4.4 3.9 1.6.7 2.3.8 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn--wa:hover .dot, .btn--wa:focus-visible .dot { transform: scale(1.16) rotate(-8deg); animation-duration: 1.3s; filter: drop-shadow(0 0 7px rgb(37 211 102 / .95)); }
.btn--wa:hover .dot::before, .btn--wa:focus-visible .dot::before { animation-duration: 1.3s; inset: -12px; }
.btn--wa:active .dot { transform: scale(.94); }
@keyframes wa-breathe { 0%, 100% { filter: drop-shadow(0 0 2px rgb(37 211 102 / .4)); } 50% { filter: drop-shadow(0 0 7px rgb(37 211 102 / .85)); } }
@keyframes wa-halo { 0%, 100% { transform: scale(.82); opacity: .45; } 50% { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .btn--wa .dot, .btn--wa .dot::before { animation: none; } .btn--wa:hover .dot { transform: none; } }
.btn--sm { min-height: 44px; padding: 0 1.2em; font-size: .72rem; }
.btn--lg { min-height: 56px; padding: 0 2em; font-size: .85rem; }
.btn--block { width: 100%; }
.btn--icon { width: 48px; padding: 0; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn .arrow { transition: transform .3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--ink); border-right-color: transparent; animation: spin .7s linear infinite;
}
.link-btn { min-height: 44px; display: inline-flex; align-items: center; gap: .4em; text-decoration: underline; text-underline-offset: .25em; font-size: .85rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.magnetic { will-change: auto; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--nav-h);
  color: var(--cream); transition: transform .5s var(--ease-out), background-color .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-solid { background: rgb(14 12 10 / .82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: rgb(201 169 110 / .35); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.nav__brand .logo-mask--mark { width: 40px; color: var(--gold); }
.nav__brand .logo-mask--word { width: 110px; color: var(--cream); }
.nav__links { display: none; margin-inline: auto; gap: clamp(14px, 2vw, 30px); }
.nav__links a {
  position: relative; text-decoration: none; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  padding-block: 10px; opacity: .82; transition: opacity .2s;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out);
}
.nav__links a:hover, .nav__links a[aria-current="true"] { opacity: 1; }
.nav__links a[aria-current="true"]::after, .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav__book { display: none; }
.lang-toggle {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border-radius: 999px;
  font-size: .75rem; letter-spacing: .14em;
}
.lang-toggle span { padding: 6px 8px; border-radius: 999px; opacity: .6; transition: background-color .3s, color .3s, opacity .3s; }
.lang-toggle span.is-on { background: var(--cream); color: var(--ink); opacity: 1; }
.nav__burger { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; }
.nav__burger span { display: block; width: 22px; height: 1px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
@media (min-width: 1100px) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
  .nav__actions { margin-left: 0; }
}
@media (min-width: 560px) { .nav__book { display: inline-flex; } }
@media (max-width: 380px) { .nav__brand .logo-mask--word { width: 88px; } }

/* mobile menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 120; background: var(--ink); color: var(--cream);
  display: flex; flex-direction: column; padding: 20px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility 0s .4s;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease-out); }
.menu__top { display: flex; align-items: center; justify-content: space-between; }
.menu__close { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(244 239 230 / .2); font-size: 1.4rem; }
.menu__links { margin-block: auto; display: grid; gap: 4px; }
.menu__links a {
  font-family: var(--f-display); font-size: clamp(2.2rem, 10vw, 3.4rem); text-decoration: none; line-height: 1.15;
  display: flex; align-items: baseline; gap: 14px;
}
.menu__links a small { font-family: var(--f-ui); font-size: .75rem; letter-spacing: .2em; color: var(--gold); }
.menu__links li { opacity: 0; transform: translateY(24px); }
.menu.is-open .menu__links li { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i) * 60ms + 120ms); }
.menu__cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.menu__cta .btn { min-width: 0; padding-inline: 12px; }
@media (max-width: 359px) { .menu__cta { grid-template-columns: 1fr; } }

/* ---------- cards ---------- */
.card { background: var(--paper); color: var(--on-paper); border-radius: var(--radius); border: 1px solid var(--line-paper); }
.pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 12px; border-radius: 999px;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; border: 1px solid currentColor; white-space: nowrap;
}
.pill .pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.8s var(--ease-inout) infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(201 169 110 / .7); } 50% { box-shadow: 0 0 0 6px rgb(201 169 110 / 0); } }
.badge-free {
  display: inline-block; padding: 5px 10px; border-radius: 4px; background: var(--gold); color: var(--ink);
  font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; }
.field > label, .field__label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.field__hint { font-size: .8rem; opacity: .75; }
.field__error { font-size: .82rem; color: #B3261E; min-height: 0; }
.on-ink .field__error, .book .field__error { color: #FF9C94; }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px;
  background: var(--ivory); color: var(--ink); border: 1px solid rgb(14 12 10 / .2);
  font-weight: 400; transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 110px; resize: vertical; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgb(201 169 110 / .45); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 3px rgb(179 38 30 / .18); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; cursor: pointer; }
.field > label.check { font-size: .9rem; letter-spacing: 0; text-transform: none; font-weight: 400; line-height: 1.5; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold-deep); flex: none; }

/* segmented control / chips */
.seg { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid rgb(201 169 110 / .5); gap: 2px; flex-wrap: wrap; }
.seg button, .seg label {
  position: relative; min-height: 44px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; transition: background-color .3s var(--ease-out), color .3s var(--ease-out); cursor: pointer;
}
.seg [aria-pressed="true"], .seg [aria-checked="true"], .seg input:checked + span { background: var(--gold); color: var(--ink); }
.seg label { padding: 0; }
.seg label span { min-height: 44px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-paper);
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  transition: background-color .3s, color .3s, border-color .3s;
}
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--on-paper); color: var(--paper); border-color: var(--on-paper); }

/* ---------- modal / dialog ---------- */
.modal {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px;
  background: rgb(14 12 10 / .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-out), visibility 0s .35s;
}
.modal.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-out); }
.modal__panel { position: relative; max-width: min(92vw, 520px); max-height: 92vh; transform: translateY(16px) scale(.98); transition: transform .5s var(--ease-out); }
.modal.is-open .modal__panel { transform: none; }
.modal__panel video { max-height: 86vh; width: auto; border-radius: var(--radius); background: #000; }
.modal__close {
  position: absolute; top: -12px; right: -12px; z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  background: var(--cream); color: var(--ink); display: grid; place-items: center; font-size: 1.3rem; box-shadow: var(--shadow);
}
.modal--sheet .modal__panel { max-width: min(1200px, 100%); width: 100%; max-height: calc(100vh - 32px); overflow: auto; background: var(--ink); border: 1px solid rgb(201 169 110 / .3); border-radius: var(--radius-lg); padding: clamp(20px, 4vw, 40px); }
.modal--sheet .modal__close { top: 12px; right: 12px; position: sticky; float: right; margin: -8px -8px 0 0; }

/* ---------- toast ---------- */
.toasts { position: fixed; z-index: 200; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast {
  pointer-events: auto; padding: 14px 18px; border-radius: 12px; background: var(--cream); color: var(--ink);
  box-shadow: var(--shadow); font-size: .92rem; font-weight: 400; display: flex; gap: 12px; align-items: center; justify-content: space-between;
  border-left: 3px solid var(--gold); animation: toast-in .45s var(--ease-out);
}
.toast--error { border-left-color: #B3261E; }
.toast a { font-weight: 500; white-space: nowrap; }
.toast.is-leaving { animation: toast-out .3s var(--ease-inout) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (min-width: 900px) { .toasts { bottom: 32px; } }

/* ---------- floating WhatsApp + sticky mobile CTA ---------- */
.quick { display: contents; }
.wa-float {
  position: fixed; right: 28px; bottom: 28px; z-index: 80; width: 60px; height: 60px; border-radius: 50%;
  background: var(--ink); color: var(--cream); display: none; place-items: center;
  border: 1px solid rgb(201 169 110 / .5); box-shadow: var(--shadow); transition: transform .3s var(--ease-out), border-color .3s;
}
.wa-float:hover { transform: translateY(-3px); border-color: var(--wa); }
.wa-float svg { width: 26px; height: 26px; color: var(--wa); }
.wa-float__tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); opacity: 0; pointer-events: none;
  background: var(--cream); color: var(--ink); padding: 8px 12px; border-radius: 8px; font-size: .8rem; white-space: nowrap; transition: opacity .25s, transform .25s var(--ease-out);
}
.wa-float:hover .wa-float__tip, .wa-float:focus-visible .wa-float__tip { opacity: 1; transform: translate(0, -50%); }
@media (min-width: 900px) { .wa-float { display: grid; } }

.back-top {
  position: fixed; left: 50%; bottom: 28px; z-index: 82; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: var(--cream); background: rgb(14 12 10 / .35);
  border: 1px solid rgb(201 169 110 / .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translate(-50%, 10px); pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), border-color .3s, background .3s;
}
.back-top.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.back-top:hover, .back-top:focus-visible { border-color: var(--gold); background: rgb(14 12 10 / .6); }
.back-top svg { width: 18px; height: 18px; }
.back-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 899px) { .back-top { bottom: calc(var(--mbar-h, 0px) + 18px + env(safe-area-inset-bottom)); } }

.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; display: flex; gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgb(14 12 10 / .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid rgb(201 169 110 / .35);
  transform: translateY(110%); transition: transform .45s var(--ease-out);
}
.mbar.is-on { transform: none; }
.mbar .btn--primary { flex: 1; }
@media (min-width: 900px) { .mbar { display: none; } }

/* ---------- custom cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.cursor__dot { position: fixed; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--gold); }
.cursor__ring {
  position: fixed; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 1px solid rgb(201 169 110 / .7);
  display: grid; place-items: center; transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background-color .3s, border-color .3s;
}
.cursor__ring span { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .2s; }
.cursor.is-link .cursor__ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; background: rgb(201 169 110 / .12); }
.cursor.is-view .cursor__ring { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--gold); border-color: var(--gold); }
.cursor.is-view .cursor__ring span { opacity: 1; }
.cursor.is-hidden { opacity: 0; }

/* ---------- misc ---------- */
.icon { width: 20px; height: 20px; flex: none; }
.socials { display: flex; gap: 8px; }
.socials a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgb(244 239 230 / .2); transition: border-color .3s, color .3s; }
.socials a:hover { border-color: var(--gold); color: var(--gold); }
.socials svg { width: 18px; height: 18px; }

.tick-svg path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.is-done .tick-svg path, .is-ticked .tick-svg path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease-out) .1s; }

/* range (shared) */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; --pct: 0%; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)) 0 / var(--pct) 100% no-repeat, rgb(244 239 230 / .18); }
.range::-moz-range-track { height: 4px; border-radius: 4px; background: rgb(244 239 230 / .18); }
.range::-moz-range-progress { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7a6857 0%, #2a211a 45%, #0b0806 100%); box-shadow: 0 0 0 2px var(--gold), 0 6px 14px rgb(0 0 0 / .5); transition: transform .2s var(--ease-out); }
.range::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7a6857 0%, #2a211a 45%, #0b0806 100%); box-shadow: 0 0 0 2px var(--gold), 0 6px 14px rgb(0 0 0 / .5); }
.range:active::-webkit-slider-thumb { transform: scale(1.15); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px rgb(201 169 110 / .4); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px rgb(201 169 110 / .4); }


/* ================= 7.13 footer ================= */
.footer { padding-block: clamp(64px, 9vw, 110px) 32px; border-top: 1px solid rgb(201 169 110 / .3); background: var(--ink); color: var(--cream); }
.footer__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer__logo { width: 180px; color: var(--cream); }
.footer__brand { display: grid; gap: 18px; justify-items: start; }
.footer__tag { font-family: var(--f-display); font-size: 1.3rem; font-style: italic; max-width: 24ch; }
.footer__col h2 { color: var(--gold); margin-bottom: 14px; }
.footer__list { display: grid; gap: 2px; margin-bottom: 18px; }
.footer__list a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; opacity: .88; }
.footer__list a:hover { opacity: 1; text-decoration: underline; }
.footer__list li[data-coverage] { padding-block: 10px; opacity: .88; }
.footer__base { margin-top: 56px; display: grid; justify-items: center; gap: 14px; text-align: center; color: rgb(244 239 230 / .75); }
.page-home .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .page-home .footer { padding-bottom: 32px; } }

/* thank-you / 404 */
.simple { min-height: 100svh; display: grid; place-items: center; padding: calc(var(--nav-h) + 24px) var(--gutter) 64px; background: radial-gradient(80% 60% at 50% 20%, #2a2017 0%, var(--ink) 70%); color: var(--cream); text-align: center; }
.simple__inner { max-width: 720px; display: grid; gap: 22px; justify-items: center; }
.simple__crest { width: 84px; color: var(--gold); }
.simple .lede { color: rgb(244 239 230 / .88); margin-inline: auto; }
.simple__ref { font-family: var(--f-display); font-size: 1.6rem; color: var(--gold); letter-spacing: .08em; }
.next-steps { list-style: none; padding: 0; display: grid; gap: 14px; text-align: left; counter-reset: s; width: 100%; max-width: 520px; }
.next-steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: var(--radius); border: 1px solid rgb(201 169 110 / .3); background: rgb(26 23 20 / .7); }
.next-steps li::before { content: counter(s); font-family: var(--f-display); font-size: 1.6rem; color: var(--gold); line-height: 1; }
.simple__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.simple__img { width: min(240px, 60vw); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }

/* ---------- cup designer (home section + /book modal) ---------- */
.designer { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 1024px) { .designer { grid-template-columns: 1fr 1fr; } }
.designer__stage {
  position: relative; border-radius: var(--radius-lg); padding: clamp(14px, 2vw, 22px);
  background: radial-gradient(120% 90% at 50% 20%, #2b241d 0%, #13100d 70%); border: 1px solid rgb(201 169 110 / .25);
  display: grid; gap: 14px; justify-items: center;
}
@media (min-width: 1024px) { .designer__stage { position: sticky; top: calc(var(--nav-h) + 16px); } }
/* preview-only panel (/book step 06): one column, not sticky */
@media (min-width: 1024px) { .designer--solo { grid-template-columns: 1fr; } .designer--solo .designer__stage { position: relative; top: auto; } }
.designer__top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* LIVE PREVIEW: gold foil lettering with a slow sheen, and a green 'on air' dot that breathes */
.designer__hint { position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-weight: 600; letter-spacing: .26em; font-size: .78rem;
  background: linear-gradient(100deg, #E9D7AE 0%, #C9A96E 30%, #FFF4DA 46%, #C9A96E 62%, #E9D7AE 100%); background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgb(201 169 110 / .28)); animation: hint-sheen 6s ease-in-out infinite; }
/* the dot is its own box, so it keeps its colour while the letters are clipped to the gradient */
.designer__hint::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3BE07A;
  box-shadow: 0 0 6px 1px rgb(59 224 122 / .85), 0 0 0 0 rgb(59 224 122 / .55); animation: hint-live 1.8s ease-out infinite; }
@keyframes hint-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes hint-live {
  0% { box-shadow: 0 0 6px 1px rgb(59 224 122 / .85), 0 0 0 0 rgb(59 224 122 / .55); opacity: 1; }
  60% { box-shadow: 0 0 10px 2px rgb(59 224 122 / .6), 0 0 0 9px rgb(59 224 122 / 0); opacity: .8; }
  100% { box-shadow: 0 0 6px 1px rgb(59 224 122 / .85), 0 0 0 0 rgb(59 224 122 / 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .designer__hint, .designer__hint::before { animation: none; } }
/* preview disclaimers: 'example only' above the cup, 'final design by our team' below */
.designer__note { margin: 0; width: min(100%, 440px); text-align: center; font-size: .78rem; line-height: 1.5; letter-spacing: .02em; color: rgb(244 239 230 / .72); }
.designer__note--final { color: rgb(244 239 230 / .82); }
.designer__views label span, .designer__styles label span { min-height: 40px; padding: 0 16px; }
.designer__modes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.designer__views[hidden] { display: none; }
@media (max-width: 480px) {
  .designer__hint { display: none; }
  .designer__top { justify-content: space-between; gap: 8px; }
  .designer__views label span, .designer__styles label span { padding: 0 12px; }
}
.designer__sketch { width: min(100%, 400px); display: grid; place-items: center; padding: 8px 0 4px; }
.designer__sketch svg { width: 100%; height: auto; }
.designer__sketch svg text { transition: opacity .15s linear; }
.designer__canvas {
  position: relative; width: min(100%, 440px); aspect-ratio: 2 / 3; border-radius: 18px; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 40%, #d9dadd 0%, #c4c5c9 100%);
}
.designer__canvas .cup-canvas { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s var(--ease-out); }
.designer__canvas.is-ready .cup-canvas { opacity: 1; }
.designer__loading { position: absolute; inset: 0; display: grid; place-items: center; color: #4a4038; font-size: .85rem; letter-spacing: .08em; }
.designer__canvas.is-ready .designer__loading { display: none; }
/* edit on the cup: highlight the text line under the pointer; tip + print position buttons under the preview */
.designer__hit { position: absolute; pointer-events: none; border: 1.5px dashed var(--gold); border-radius: 6px; background: rgb(201 169 110 / .12); box-shadow: 0 0 0 3px rgb(14 12 10 / .15); transition: all .12s ease-out; }
.designer__zoomreset { position: absolute; top: 10px; right: 10px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: rgb(14 12 10 / .72); color: var(--cream); border: 1px solid rgb(201 169 110 / .5); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.designer__zoomreset[hidden] { display: none; }
.designer__zoomreset:hover { border-color: var(--gold); color: var(--gold); }
.designer__tip--solo { width: min(100%, 440px); text-align: center; }
/* touch layer over the design: a finger that starts here drags the design instead of scrolling the page */
.designer__grab { position: absolute; touch-action: none; }
.designer__grab[hidden] { display: none; }
/* gesture tutorial card over the preview */
.coach { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.coach[hidden] { display: none; }
.coach__card { position: relative; width: 168px; height: 168px; border-radius: 24px; background: rgb(14 12 10 / .74); border: 1px solid rgb(201 169 110 / .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 18px 40px rgb(0 0 0 / .35); opacity: 0; transform: scale(.92); transition: opacity .35s ease, transform .35s ease; }
.coach.is-playing .coach__card { opacity: 1; transform: none; }
.coach.is-out .coach__card { opacity: 0; transform: scale(.96); }
.coach__scene { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 6px; opacity: 0; }
.coach__svg { width: 104px; height: 104px; fill: none; stroke: var(--cream); stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.coach__dot { fill: var(--gold); stroke: none; opacity: 0; }
.coach__arrows, .coach__chev { stroke: var(--gold); opacity: 0; }
.coach__print { stroke: var(--gold); stroke-width: 1.1; }
.coach__cap { margin: 0; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--cream); text-align: center; padding: 0 12px; }
.coach__thumb { transform-origin: 6.5px 18.5px; }
.coach__index { transform-origin: 8px 13px; }
/* 9.6 s: pinch, drag, pinch, drag (2.4 s each) */
.coach.is-playing .coach__scene--pinch { animation: coach-a 4.8s 2 both; }
.coach.is-playing .coach__scene--drag { animation: coach-b 4.8s 2 both; }
@keyframes coach-a { 0%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes coach-b { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
.coach.is-playing .coach__thumb { animation: coach-thumb 2.4s ease-in-out infinite; }
.coach.is-playing .coach__index { animation: coach-index 2.4s ease-in-out infinite; }
.coach.is-playing .coach__svg--pinch .coach__dot, .coach.is-playing .coach__svg--drag .coach__dot { animation: coach-dot 2.4s ease-in-out infinite; }
.coach.is-playing .coach__arrows { animation: coach-fade 2.4s ease-in-out infinite; }
@keyframes coach-thumb { 0%, 15% { transform: rotate(28deg); } 55%, 80% { transform: rotate(-20deg); } 100% { transform: rotate(28deg); } }
@keyframes coach-index { 0%, 15% { transform: rotate(-18deg); } 55%, 80% { transform: rotate(14deg); } 100% { transform: rotate(-18deg); } }
@keyframes coach-dot { 0%, 10% { opacity: 0; transform: scale(.4); } 20%, 75% { opacity: .95; transform: none; } 90%, 100% { opacity: 0; } }
.coach__dot { transform-box: fill-box; transform-origin: center; }
@keyframes coach-fade { 0%, 25% { opacity: 0; } 55%, 80% { opacity: 1; } 100% { opacity: 0; } }
.coach.is-playing .coach__mover { animation: coach-move 2.4s ease-in-out infinite; }
.coach.is-playing .coach__chev { animation: coach-fade 2.4s ease-in-out infinite; }
@keyframes coach-move { 0%, 12% { transform: translateY(3.5px); } 45%, 55% { transform: translateY(-3.5px); } 88%, 100% { transform: translateY(3.5px); } }
@media (prefers-reduced-motion: reduce) {
  .coach__card { width: 300px; height: 150px; transition: none; }
  .coach.is-playing .coach__scene { animation: none; opacity: 1; position: static; }
  .coach__card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .coach.is-playing * { animation: none !important; }
  .coach__dot, .coach__arrows, .coach__chev { opacity: 1; }
}
/* font picker: each option written in its own font */
.fontpick { gap: 10px; }
.fontpick .fontpick__opt { flex: 0 0 96px; }
.fontpick__opt { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 14px; background: var(--cream); color: #1d1510; cursor: pointer; border: 2px solid transparent; transition: border-color .2s, transform .2s; }
.fontpick__opt input { position: absolute; opacity: 0; pointer-events: none; }
.fontpick__opt:hover { transform: translateY(-1px); }
.fontpick__opt:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(201 169 110 / .25); }
.fontpick__opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.fontpick__aa { font-size: 1.9rem; line-height: 1.1; }
.fontpick__name { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; text-align: center; }
@media (max-width: 600px) { .fontpick { gap: 8px; } .fontpick .fontpick__opt { flex-basis: 82px; } .fontpick__aa { font-size: 1.6rem; } }
/* text size sliders: gold track up to a round thumb, and a number box */
.sizes { display: grid; gap: 14px; }
.designer__edit { width: min(100%, 440px); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.designer__tipbox { display: grid; gap: 6px; justify-items: start; }
.designer__howto { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid rgb(201 169 110 / .5); color: var(--gold); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.designer__howto svg { width: 18px; height: 18px; }
@media (pointer: coarse), (max-width: 600px) { .designer__howto { min-height: 44px; padding: 0 16px 0 12px; } }
.designer__howto:hover { border-color: var(--gold); background: rgb(201 169 110 / .1); }
.designer__tip { margin: 0; font-size: .76rem; line-height: 1.45; color: rgb(244 239 230 / .72); }
.designer__nudge { display: flex; gap: 6px; flex: none; }
.designer__movewhat select { height: 40px; border-radius: 999px; border: 1px solid rgb(201 169 110 / .5); background: transparent; color: var(--cream); padding: 0 30px 0 14px; font: inherit; font-size: .72rem; letter-spacing: .06em; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.designer__movewhat select option { color: #1d1510; }
.designer__nudge button { min-width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgb(201 169 110 / .5); color: var(--cream); display: grid; place-items: center; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; padding: 0 12px; }
.designer__nudge button svg { width: 18px; height: 18px; }
.designer__nudge button:hover { border-color: var(--gold); color: var(--gold); }
.designer__sketch text[data-role] { cursor: text; }
@keyframes field-flash { 0% { box-shadow: 0 0 0 0 rgb(201 169 110 / .9); } 100% { box-shadow: 0 0 0 10px rgb(201 169 110 / 0); } }
.field.is-flash .input, .field.is-flash .select { animation: field-flash .9s ease-out; border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .designer__hit { transition: none; } .field.is-flash .input, .field.is-flash .select { animation: none; } }
@media (max-width: 480px) { .designer__edit { flex-direction: column; align-items: stretch; } .designer__nudge { justify-content: center; } }
.designer__warn { color: #F2C97D; font-size: .85rem; margin-top: -8px; }
@media (prefers-reduced-motion: reduce) { .designer__canvas .cup-canvas { transition: none; } }
.designer__controls { display: grid; gap: 20px; }
.designer__row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.designer__controls .field > label, .designer__controls .field__label, .designer__controls legend { color: var(--cream); }
.designer__controls fieldset { border: 0; padding: 0; min-width: 0; }
.designer__controls legend { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; margin-bottom: 8px; padding: 0; }
.designer .seg { border-color: rgb(201 169 110 / .4); }
.designer .seg label span { font-size: .72rem; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
/* frame style picker: one thumbnail per template (js/templates.js) */
/* design style: Cup frame / Lid style switch above the two grids */
.designer__stabs { margin-bottom: 14px; }
.tpl-grid[hidden] { display: none; }
.designer__pairhint { margin: 12px 0 0; font-size: .8rem; line-height: 1.5; color: rgb(244 239 230 / .72); }
.tpl-grid { gap: 10px; }
.tpl-grid .tpl { flex: 0 0 96px; }
.tpl { position: relative; display: grid; gap: 6px; cursor: pointer; min-width: 0; align-content: start; }
.tpl input { position: absolute; opacity: 0; pointer-events: none; }
.tpl__img { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: #efe9df; border: 1px solid rgb(201 169 110 / .3); padding: 8px; transition: box-shadow .2s, border-color .2s; }
.tpl__img img { width: 100%; height: 100%; object-fit: contain; }
.tpl__name { overflow-wrap: anywhere; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; text-align: center; color: rgb(244 239 230 / .8); line-height: 1.3; }
.tpl input:checked ~ .tpl__img { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.tpl input:checked ~ .tpl__name { color: var(--gold); }
.tpl input:focus-visible ~ .tpl__img { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 600px) { .tpl-grid { gap: 8px; } .tpl-grid .tpl { flex-basis: 82px; } .tpl__name { letter-spacing: .04em; font-size: .7rem; } }
.swatches label { position: relative; cursor: pointer; }
.swatches input { position: absolute; opacity: 0; }
.swatches span { display: block; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px rgb(244 239 230 / .3); transition: box-shadow .2s; }
.swatches input:checked + span { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--gold); }
.swatches input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 6px; }
.designer__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; border-top: 1px solid rgb(201 169 110 / .25); }
.designer__actions .btn { flex: 1 1 220px; }
.designer__err { color: #FF9C94; font-size: .85rem; }
.counter { font-size: .75rem; opacity: .7; justify-self: end; margin-top: -2px; }
/* name field with a remove (×) button: /book step 05 and the designer */
.enames__row { display: flex; gap: 8px; align-items: center; }
.enames__row .input { flex: 1; min-width: 0; }
.enames__rm { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(14 12 10 / .25); background: transparent; color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.enames__rm:hover { border-color: var(--ink); }
.enames__rm[hidden] { display: none; }
.designer .enames__rm { border-color: rgb(201 169 110 / .45); color: var(--cream); }
.designer .enames__rm:hover { border-color: var(--gold); }
.designer__add { justify-self: start; color: var(--gold); margin-top: -10px; }
.designer__add[hidden], .designer [data-name2-field][hidden] { display: none; }
/* segmented buttons in the designer: if space ever runs out they wrap neatly instead of breaking the pill */
.designer .seg { border-radius: 24px; row-gap: 4px; }
.designer .seg label span { white-space: nowrap; }
/* the designer never gets wider than its column (long option labels wrap instead) */
.designer > *, .designer__controls > *, .designer__row > * { min-width: 0; }
.designer__row .input { min-width: 0; }
@media (max-width: 360px) { .designer__row { grid-template-columns: 1fr; } }
@media (max-width: 360px) {
  .designer .seg label span { white-space: normal; text-align: center; line-height: 1.15; }
  .designer__actions .btn { min-width: 0; white-space: normal; text-align: center; line-height: 1.3; padding-inline: 16px; letter-spacing: .12em; }
}
/* phones: one option group per row, options share the width evenly on a single line */
@media (max-width: 600px) {
  .designer__controls .designer__row:has(fieldset) { grid-template-columns: 1fr; }
  .designer__controls fieldset .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; border-radius: 999px; }
  .designer__controls fieldset .seg label span { justify-content: center; padding: 0 6px; letter-spacing: .06em; font-size: .72rem; width: 100%; }
  /* the event types are too many for one line: they wrap as pills instead */
  .designer__controls fieldset .seg--wrap { display: flex; flex-wrap: wrap; border-radius: 24px; }
  .designer__controls fieldset .seg--wrap label span { padding: 0 12px; width: auto; }
}

/* one-row pickers (frames, lid styles, fonts): swipe, drag or use the arrows */
.carousel { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 8px; }
.carousel[hidden] { display: none; }
.carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 4px; padding: 4px 4px 6px; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carousel__track.is-dragging * { pointer-events: none; }
.carousel__btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgb(201 169 110 / .55); color: var(--gold); background: rgb(14 12 10 / .6); transition: opacity .25s, background .2s, border-color .2s; }
.carousel__btn svg { width: 18px; height: 18px; }
.carousel__btn:hover:not(:disabled) { border-color: var(--gold); background: rgb(201 169 110 / .14); }
.carousel__btn:disabled { opacity: .25; cursor: default; }
.carousel.is-static .carousel__btn { visibility: hidden; }
@media (pointer: coarse) { .carousel__btn { width: 44px; height: 44px; } .carousel { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; } }

/* chips on the photo: Tips (top left), Reset position (bottom left) */
.designer__chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px 0 10px; border-radius: 999px; background: rgb(14 12 10 / .72); color: var(--cream); border: 1px solid rgb(201 169 110 / .5); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.designer__chip svg { width: 17px; height: 17px; color: var(--gold); }
.designer__chip:hover, .designer__chip[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
.designer__chip[hidden] { display: none; }
.designer__tipbtn { top: 10px; left: 10px; }
.designer__posreset { bottom: 10px; left: 10px; }
.designer__tippanel { position: absolute; z-index: 4; top: 54px; left: 10px; width: min(280px, calc(100% - 20px)); display: grid; gap: 10px; justify-items: start; padding: 14px 16px; border-radius: 16px; background: rgb(14 12 10 / .9); border: 1px solid rgb(201 169 110 / .45); box-shadow: 0 18px 40px rgb(0 0 0 / .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: tip-in .2s ease-out; }
.designer__tippanel[hidden] { display: none; }
.designer__tippanel p { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--cream); }
@keyframes tip-in { from { opacity: 0; transform: translateY(-4px); } }
@media (pointer: coarse) { .designer__chip { min-height: 44px; } .designer__tippanel { top: 62px; } }
@media (prefers-reduced-motion: reduce) { .designer__tippanel { animation: none; } }

/* Lid, Lid ink and Cup ink side by side (they wrap onto two lines on narrow screens) */
.designer__controls .designer__row--inks { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.designer__controls .designer__row--inks fieldset { flex: 0 1 auto; }
.designer__controls .designer__row--inks fieldset .seg { width: auto; display: inline-flex; }

/* compact buttons so the three fit in one row on laptop widths too */
.designer__controls .designer__row--inks { gap: 12px 10px; }
.designer__controls .designer__row--inks .seg label span { padding-inline: 10px; letter-spacing: .06em; }


/* audit: comfortable touch targets and readable chip text */
.designer__chip { font-size: .75rem; }

/* ================= music button: a little vinyl record, bottom left ================= */
.music { position: fixed; left: 28px; bottom: 28px; z-index: 86; pointer-events: none; width: 60px; height: 60px; border-radius: 50%; padding: 0; border: 0; background: none; cursor: pointer;
  opacity: 0; transform: translateY(12px) scale(.9); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), bottom .45s var(--ease-out); }
.music.is-in { opacity: 1; transform: none; pointer-events: auto; }
.music__disc { position: absolute; inset: 4px; border-radius: 50%; box-shadow: 0 10px 28px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(201 169 110 / .45); transition: transform .4s var(--ease-out); }
.music__disc svg { width: 100%; height: 100%; display: block; }
.music__note { position: absolute; inset: 0; display: grid; place-items: center; color: #1a130c; pointer-events: none; }
.music__note svg { width: 16px; height: 16px; animation: music-bob 2.4s ease-in-out infinite; }
/* idle: a slow pulsing halo invites a tap */
.music__halo { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgb(201 169 110 / .6); animation: music-halo 2.8s ease-out infinite; }
/* playing: a gold light runs around the rim */
.music__ring { position: absolute; inset: 1px; border-radius: 50%; opacity: 0; transition: opacity .4s;
  background: conic-gradient(from 0deg, transparent 0 55%, rgb(201 169 110 / .15) 70%, #e8cf9c 88%, transparent 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 90%); mask: radial-gradient(closest-side, transparent 88%, #000 90%); }
.music__eq { position: absolute; left: 50%; bottom: -14px; display: flex; gap: 3px; align-items: flex-end; height: 10px; transform: translateX(-50%); opacity: 0; transition: opacity .3s; }
.music__eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--gold); transform-origin: bottom; transform: scaleY(.3); }
.music__notes { position: absolute; inset: 0; pointer-events: none; }
.music__notes i { position: absolute; left: 50%; top: 4px; font-style: normal; font-size: 15px; color: var(--gold); opacity: 0; text-shadow: 0 0 10px rgb(201 169 110 / .6); }
.music:hover .music__disc, .music:focus-visible .music__disc { transform: scale(1.06); }
.music:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.music.is-playing .music__halo { animation: none; opacity: 0; }
.music.is-playing .music__disc svg { animation: music-spin 3.2s linear infinite; }
.music.is-playing .music__note svg { animation: none; }
.music.is-playing .music__ring { opacity: 1; animation: music-spin 2.4s linear infinite; }
.music.is-playing .music__eq { opacity: 1; }
.music.is-playing .music__eq i { animation: music-eq 1s ease-in-out infinite; }
.music.is-playing .music__eq i:nth-child(2) { animation-duration: .8s; animation-delay: -.3s; }
.music.is-playing .music__eq i:nth-child(3) { animation-duration: 1.2s; animation-delay: -.6s; }
.music.is-playing .music__notes i { animation: music-float 3.6s ease-out infinite; }
.music.is-playing .music__notes i:nth-child(2) { animation-delay: 1.2s; font-size: 13px; }
.music.is-playing .music__notes i:nth-child(3) { animation-delay: 2.4s; }
.music__tip { position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
  background: var(--cream); color: var(--ink); padding: 8px 12px; border-radius: 8px; font-size: .8rem; transition: opacity .25s, transform .25s var(--ease-out); }
.music:hover .music__tip, .music:focus-visible .music__tip { opacity: 1; transform: translate(0, -50%); }
@keyframes music-spin { to { transform: rotate(360deg); } }
@keyframes music-bob { 0%, 100% { transform: translateY(1px) rotate(-6deg); } 50% { transform: translateY(-2px) rotate(6deg); } }
@keyframes music-halo { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes music-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes music-float { 0% { transform: translate(-50%, 0) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc(-50% + 18px), -46px) rotate(18deg); opacity: 0; } }
.music__notes i:nth-child(2) { margin-left: -10px; }
.music__notes i:nth-child(3) { margin-left: 8px; }
/* phones: smaller, and it rises above the bottom bar when that slides in */
@media (max-width: 899px) {
  .music { left: 16px; bottom: calc(var(--mbar-h, 0px) + 18px + env(safe-area-inset-bottom)); width: 52px; height: 52px; }
  .music__tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .music *, .music { animation: none !important; transition: none !important; }
  .music.is-playing .music__ring, .music.is-playing .music__eq { opacity: 1; }
}

/* ================= welcome window (after the intro; closing it starts the music) ================= */
.welcome { position: fixed; inset: 0; z-index: 450; display: grid; place-items: center; padding: 16px; cursor: pointer;
  background: rgb(8 7 6 / .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .45s var(--ease-out); }
.welcome.is-in { opacity: 1; }
.welcome.is-out { opacity: 0; pointer-events: none; }
.welcome__card { position: relative; width: min(340px, 100%); display: grid; justify-items: center; gap: 10px; padding: 34px 28px 22px; text-align: center; cursor: default;
  background: radial-gradient(120% 90% at 50% 0%, #241d16, var(--ink) 70%); color: var(--cream); border: 1px solid rgb(201 169 110 / .5); border-radius: 22px;
  box-shadow: 0 30px 80px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(201 169 110 / .08); transform: translateY(18px) scale(.96); transition: transform .55s var(--ease-out); }
.welcome.is-in .welcome__card { transform: none; }
.welcome.is-out .welcome__card { transform: translateY(-8px) scale(.98); }
.welcome__x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: rgb(244 239 230 / .75); }
.welcome__x svg { width: 18px; height: 18px; }
.welcome__x:hover { color: var(--gold); background: rgb(201 169 110 / .1); }
.welcome__disc { width: 58px; height: 58px; margin-bottom: 4px; filter: drop-shadow(0 8px 18px rgb(0 0 0 / .5)); }
.welcome__disc svg { width: 100%; height: 100%; animation: music-spin 6s linear infinite; }
.welcome__kicker { margin: 0; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.welcome__title { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 2.1rem; letter-spacing: .12em; line-height: 1; }
.welcome__text { margin: 4px 0 8px; font-size: .88rem; line-height: 1.6; color: rgb(244 239 230 / .8); }
.welcome__enter { width: 100%; justify-content: center; }
.welcome__quiet { margin-top: 2px; min-height: 36px; padding: 0 10px; font-size: .74rem; letter-spacing: .06em; color: rgb(244 239 230 / .6); text-decoration: underline; text-underline-offset: 3px; }
.welcome__quiet:hover { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .welcome, .welcome__card { transition: none; } .welcome__disc svg { animation: none; } }

/* ================= music volume bar (beside the vinyl button) ================= */
.music-vol { position: fixed; z-index: 87; display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px 0 6px; border-radius: 999px;
  background: rgb(14 12 10 / .9); border: 1px solid rgb(201 169 110 / .5); box-shadow: 0 14px 34px rgb(0 0 0 / .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transform: translate(-10px, -50%) scale(.96); transform-origin: left center; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out), transform .3s var(--ease-out); }
.music-vol.is-open { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
/* an invisible bridge so the mouse can travel from the record to the bar */
.music-vol::before { content: ''; position: absolute; right: 100%; top: 0; width: 14px; height: 100%; }
.music-vol button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); flex: none; }
.music-vol button:hover { background: rgb(201 169 110 / .12); }
.music-vol button svg { width: 18px; height: 18px; }
.music-vol .i-pause, .music-vol.is-playing .i-play { display: none; }
.music-vol.is-playing .i-pause { display: inline; }
.music-vol .i-x, .music-vol.is-muted .i-wave { display: none; }
.music-vol.is-muted .i-x { display: inline; }
.music-vol__play { display: none !important; }
.music-vol__range { --pct: 25%; -webkit-appearance: none; appearance: none; width: 120px; height: 36px; background: transparent; cursor: pointer; margin: 0; }
.music-vol__range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold-deep), var(--gold) var(--pct), rgb(244 239 230 / .16) var(--pct)); }
.music-vol__range::-moz-range-track { height: 4px; border-radius: 4px; background: rgb(244 239 230 / .16); }
.music-vol__range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--gold); }
.music-vol__range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a3f35, #1b1511 70%); border: 2px solid var(--gold); }
.music-vol__range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #1b1511; border: 2px solid var(--gold); }
.music-vol__range:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.music-vol__pct { min-width: 38px; text-align: right; font-size: .75rem; letter-spacing: .06em; color: var(--cream); font-variant-numeric: tabular-nums; }
.music-vol__next[hidden] { display: none; }
/* now playing (and the SoundCloud credit) just above the bar */
.music-vol__now { position: absolute; left: 14px; bottom: calc(100% + 6px); max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .75rem; letter-spacing: .04em; color: rgb(244 239 230 / .85); text-shadow: 0 1px 6px rgb(0 0 0 / .8); }
a.music-vol__now[href]:hover { color: var(--gold); }
/* the SoundCloud player itself stays out of sight */
.music-sc { position: fixed; left: -20px; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
/* touch: the bar carries its own play / pause, and the slider is easier to grab */
@media (hover: none), (pointer: coarse) {
  .music-vol__play { display: grid !important; }
  .music-vol { height: 56px; }
  .music-vol button { width: 44px; height: 44px; }
  .music-vol__range { width: 84px; height: 44px; }
  .music-vol { gap: 2px; padding-right: 8px; }
  .music-vol__range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; }
}
@media (prefers-reduced-motion: reduce) { .music-vol { transition: none; } }

/* hidden while the welcome window is open */
.music.is-hushed { opacity: 0 !important; pointer-events: none !important; }
.welcome__card { padding-top: 38px; }

/* welcome: the BB crest */
.welcome__crest { width: 92px; height: 92px; margin-bottom: 6px; filter: drop-shadow(0 6px 18px rgb(0 0 0 / .5)); opacity: 0; transform: scale(.9); transition: opacity .7s .15s var(--ease-out), transform .8s .15s var(--ease-out); }
.welcome.is-in .welcome__crest { opacity: 1; transform: none; }
.welcome__kicker { font-size: .75rem; }
/* the closed volume bar is fully hidden (not focusable, not on screen) */
.music-vol { visibility: hidden; transition: opacity .25s var(--ease-out), transform .3s var(--ease-out), visibility 0s .3s; }
.music-vol.is-open { visibility: visible; transition: opacity .25s var(--ease-out), transform .3s var(--ease-out), visibility 0s 0s; }
@media (max-width: 380px) { .welcome__crest { width: 76px; height: 76px; } }

/* ================= designer demo video (pops out while the designer is on screen) ================= */
.demo-pop { position: fixed; right: 28px; bottom: 108px; z-index: 84; width: 340px; pointer-events: none;
  opacity: 0; transform: translateY(26px) scale(.82); transform-origin: 100% 100%;
  transition: opacity .35s var(--ease-out), transform .65s cubic-bezier(.34, 1.56, .64, 1); }
.demo-pop.is-in { opacity: 1; transform: none; pointer-events: auto; }
.demo-pop__card { position: relative; padding: 8px; border-radius: 16px; background: var(--ink); color: var(--cream);
  border: 1px solid rgb(201 169 110 / .5); box-shadow: 0 24px 60px rgb(0 0 0 / .5); }
.demo-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 6px 6px; }
.demo-pop__label { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.demo-pop__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgb(201 169 110 / .6); animation: demo-dot 1.8s ease-out infinite; }
@keyframes demo-dot { 70%, 100% { box-shadow: 0 0 0 8px rgb(201 169 110 / 0); } }
.demo-pop__x { width: 36px; height: 36px; margin: -4px -2px -4px 0; border-radius: 50%; display: grid; place-items: center; color: rgb(244 239 230 / .75); }
.demo-pop__x svg { width: 16px; height: 16px; }
.demo-pop__x:hover { color: var(--gold); background: rgb(201 169 110 / .1); }
.demo-pop__screen { position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 9; background: #0c0a08; }
.demo-pop__screen video { display: block; width: 100%; height: 100%; object-fit: contain; }
.demo-pop__hit { position: absolute; inset: 0; width: 100%; display: grid; place-items: center; background: transparent; cursor: pointer; }
.demo-pop__icon { grid-area: 1 / 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: rgb(201 169 110 / .92); box-shadow: 0 8px 24px rgb(0 0 0 / .45); opacity: 0; transform: scale(.85); transition: opacity .25s, transform .3s var(--ease-out); }
.demo-pop__icon svg { width: 22px; height: 22px; }
.demo-pop__hit:hover .demo-pop__icon--grow, .demo-pop__hit:focus-visible .demo-pop__icon--grow,
.demo-pop.is-paused .demo-pop__icon--play, .demo-pop.is-ended .demo-pop__icon--replay { opacity: 1; transform: none; }
.demo-pop.is-paused .demo-pop__icon--grow, .demo-pop.is-ended .demo-pop__icon--grow { opacity: 0; }
.demo-pop__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(244 239 230 / .15); }
.demo-pop__bar i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s linear; }
/* large player */
.demo-pop.is-big { inset: 0; width: auto; z-index: 170; display: grid; place-items: center; padding: 16px;
  background: rgb(8 7 6 / .86); transform: none; transition: opacity .5s ease; }
/* one smooth rise for the big player (no backdrop blur: it is costly to animate over the whole page) */
.demo-pop.is-big .demo-pop__card { width: min(1120px, 100%); will-change: transform, opacity; animation: demo-grow .85s cubic-bezier(.16, 1, .3, 1) both; }
.demo-pop.is-big .demo-pop__hit, .demo-pop.is-big .demo-pop__bar { display: none; }
@keyframes demo-grow { from { opacity: 0; transform: translateY(28px) scale(.95); } }
/* back to the corner after the big player */
.demo-pop.is-shrunk:not(.is-big) .demo-pop__card { animation: demo-back .55s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes demo-back { from { opacity: 0; transform: translateY(18px) scale(.92); } }
html.demo-open { overflow: hidden; }
@media (max-width: 899px) {
  .demo-pop { right: 12px; bottom: calc(var(--mbar-h, 0px) + 12px + env(safe-area-inset-bottom)); width: 220px; }
  .demo-pop__card { padding: 6px; border-radius: 12px; }
  .demo-pop__head { padding: 0 0 4px 4px; }
  .demo-pop__label { font-size: .75rem; letter-spacing: .1em; }
  .demo-pop__x { width: 32px; height: 32px; }
  .demo-pop__icon { width: 40px; height: 40px; }
  .demo-pop__icon--grow { opacity: .9; transform: none; width: 30px; height: 30px; place-self: end; margin: 6px; }
  .demo-pop__icon--grow svg { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) { .demo-pop, .demo-pop.is-big .demo-pop__card, .demo-pop.is-shrunk .demo-pop__card { transition: opacity .2s; animation: none; } .demo-pop__dot { animation: none; } }

/* ================= sleeve design ideas (the demo window's frame, with a slideshow inside) ================= */
.sg-pop { width: 228px; }
.sg-pop__count { margin-left: 2px; color: rgb(244 239 230 / .55); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.sg-pop__screen { position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 2 / 3; background: #0c0a08; }
.sg-pop__screen picture, .sg-pop__screen img { display: block; width: 100%; height: 100%; }
.sg-pop__screen img { object-fit: cover; }
.sg-pop.is-swap .sg-pop__screen img { animation: sg-in .6s var(--ease-out) both; }
@keyframes sg-in { from { opacity: .25; transform: scale(1.04); } }
.sg-pop__hit { position: absolute; inset: 0; width: 100%; background: transparent; cursor: zoom-in; }
.sg-pop.is-big .sg-pop__hit { cursor: default; }
.sg-pop__nav { position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; display: grid; place-items: center;
  color: var(--cream); background: rgb(14 12 10 / .6); border: 1px solid rgb(201 169 110 / .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s, background .25s; }
.sg-pop__nav svg { width: 16px; height: 16px; }
.sg-pop__nav--prev { left: 8px; } .sg-pop__nav--next { right: 8px; }
.sg-pop__screen:hover .sg-pop__nav, .sg-pop__nav:focus-visible, .sg-pop.is-big .sg-pop__nav { opacity: 1; }
.sg-pop__nav:hover { background: rgb(201 169 110 / .85); color: var(--ink); }
.sg-pop__note { margin: 8px 4px 2px; font-size: .72rem; line-height: 1.45; color: rgb(244 239 230 / .62); }
.sg-pop.is-big .demo-pop__card { width: min(460px, 100%, calc((100vh - 150px) / 1.5 + 18px)); }
.sg-pop.is-big .sg-pop__nav { width: 44px; height: 44px; margin-top: -22px; }
/* the tucked-away button: just above the WhatsApp button */
.sg-mini { position: fixed; right: 34px; bottom: 102px; z-index: 84; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--gold); border: 1px solid rgb(201 169 110 / .55); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(14px) scale(.6); pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .5s cubic-bezier(.34, 1.56, .64, 1), border-color .3s; }
.sg-mini.is-in { opacity: 1; transform: none; pointer-events: auto; }
.sg-mini:hover { border-color: var(--gold); transform: translateY(-3px); }
.sg-mini svg { width: 22px; height: 22px; }
.sg-mini__tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); opacity: 0; pointer-events: none;
  background: var(--cream); color: var(--ink); padding: 8px 12px; border-radius: 8px; font-size: .8rem; white-space: nowrap; transition: opacity .25s, transform .25s var(--ease-out); }
.sg-mini:hover .sg-mini__tip, .sg-mini:focus-visible .sg-mini__tip { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 899px) {
  .sg-pop { width: 160px; }
  .sg-pop__note, .sg-pop__count { display: none; }
  .sg-pop .demo-pop__label { font-size: .68rem; letter-spacing: .08em; }
  .sg-mini__tip { display: none; }
  .sg-pop__nav { opacity: 1; width: 30px; height: 30px; margin-top: -15px; }
  .sg-pop__nav--prev { left: 4px; } .sg-pop__nav--next { right: 4px; }
  .sg-mini { right: 12px; bottom: calc(var(--mbar-h, 0px) + 12px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .sg-pop.is-swap .sg-pop__screen img { animation: none; } .sg-mini { transition: opacity .2s; } }

/* ================= welcome: faint gold specks and a soft glow behind the crest ================= */
.welcome__card { isolation: isolate; }
.welcome__main > :not(.welcome__fx) { position: relative; z-index: 1; }
.welcome__card > .welcome__x { position: absolute; z-index: 3; }
.welcome__fx { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.welcome__dust { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ================= login inside the welcome card + header account button ================= */
.welcome__card { width: min(380px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(201 169 110 / .5) transparent;
  display: flex; flex-direction: column; padding: 0; gap: 0; justify-items: normal; }
.welcome__card:focus { outline: none; }
.welcome__text--hi { font-size: 1.05rem; color: var(--cream); }
.acct__in, .acct__form { width: 100%; display: grid; gap: 10px; justify-items: stretch; }
.acct__in[hidden], .acct__form[hidden], .acct__form [hidden] { display: none !important; }
.acct__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border: 1px solid rgb(201 169 110 / .45); border-radius: 999px; }
.acct__tabs button { min-height: 40px; border-radius: 999px; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); transition: background-color .25s, color .25s; }
.acct__tabs button:not([aria-selected="true"]):hover { color: var(--gold); }
.acct__tabs button[aria-selected="true"] { background: var(--gold); color: var(--ink); }
.acct__form .field { text-align: left; gap: 5px; }
.acct__form .field > label { font-size: .72rem; color: rgb(244 239 230 / .85); }
.acct__form .input { width: 100%; min-height: 46px; font-size: 1rem; }
.acct__form .field__hint { color: rgb(244 239 230 / .7); font-size: .75rem; opacity: 1; }
.acct__pw { display: flex; align-items: stretch; }
.acct__pw .input { flex: 1; min-width: 0; border-right: 0; border-radius: 10px 0 0 10px; }
.acct__eye { flex: none; min-width: 64px; min-height: 48px; padding: 0 12px; border-radius: 0 10px 10px 0; background: var(--ivory); color: var(--ink); border: 1px solid rgb(14 12 10 / .2); border-left: 0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.acct__eye:hover { opacity: 1; }
.acct__pw:focus-within .input, .acct__pw:focus-within .acct__eye { border-color: var(--gold-deep); }
.acct__lead { margin: 0; font-size: .9rem; line-height: 1.55; color: rgb(244 239 230 / .88); text-align: center; }
.acct__msg { margin: 0; font-size: .85rem; line-height: 1.45; color: #ffb4a9; text-align: left; }
.acct__msg.is-note { color: var(--gold); }
.acct__msg:empty { display: none; }
.acct__link { justify-self: start; min-height: 44px; padding: 0; font-size: .8rem; letter-spacing: .04em; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.acct__link--center { justify-self: center; }
.acct__form [type="submit"][aria-busy="true"] { opacity: .65; pointer-events: none; }
.acct__or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 2px 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgb(244 239 230 / .6); }
.acct__or::before, .acct__or::after { content: ''; height: 1px; background: rgb(201 169 110 / .3); }
.acct__google { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 999px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-size: .9rem; font-weight: 500; transition: background-color .2s, box-shadow .2s; }
.acct__google:hover { background: #f6f7f8; box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
.acct__form .welcome__quiet { justify-self: center; min-height: 44px; }
.acct__in .welcome__quiet { min-height: 44px; }
@media (max-height: 760px) { .welcome__text:not(.welcome__text--hi) { display: none; } .welcome__main { padding-top: 30px; gap: 8px; } }

.acct { position: relative; }
.acct__btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--cream); border: 1px solid rgb(201 169 110 / .45); transition: color .25s, border-color .25s, background-color .25s; }
.acct__btn:hover { color: var(--gold); border-color: var(--gold); }
.acct__ico { width: 21px; height: 21px; }
.acct__ini { display: none; font-size: .9rem; font-weight: 600; line-height: 1; }
.acct.is-in .acct__btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.acct.is-in .acct__ico { display: none; }
.acct.is-in .acct__ini { display: block; }
.acct__menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 5; min-width: 220px; max-width: 280px; padding: 14px; border-radius: 14px; background: var(--ink); color: var(--cream); border: 1px solid rgb(201 169 110 / .5); box-shadow: 0 18px 40px rgb(0 0 0 / .5); }
.acct__menu[hidden] { display: none; }
.acct__who { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__mail { margin: 2px 0 12px; font-size: .8rem; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__out { width: 100%; min-height: 44px; border-radius: 999px; border: 1px solid rgb(201 169 110 / .5); color: var(--gold); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.acct__out:hover { background: rgb(201 169 110 / .1); }
@media (max-width: 559px) { .nav__actions { gap: 4px; } }
@media (max-width: 380px) { .lang-toggle { padding: 0 2px; } .lang-toggle span { padding: 6px 6px; } }
@media (max-width: 349px) { .nav__brand .logo-mask--word { display: none; } }

/* ================= side video: login on the left, the film on the right (tablet / desktop) ================= */
.welcome__main { position: relative; width: 100%; display: grid; justify-items: center; gap: 10px; padding: 38px 28px 22px; text-align: center; cursor: default; }
.welcome__media { display: none; }
@media (min-width: 760px) {
  .welcome__card { flex-direction: row; width: min(960px, 100%); }
  .welcome__main { flex: 0 0 380px; width: 380px; }
  .welcome__media { display: block; position: relative; flex: 1; min-width: 0; margin: 12px 12px 12px 0; border-radius: 14px; overflow: hidden; background: #0c0a08 center / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgb(201 169 110 / .3); }
  .welcome__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .welcome__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(14 12 10 / .35), transparent 22%), linear-gradient(0deg, rgb(14 12 10 / .3), transparent 30%); }
  .welcome__x { background: rgb(14 12 10 / .55); color: var(--cream); }
}

.welcome__vol { display: none; }
@media (min-width: 760px) {
  .welcome__vol { position: absolute; right: 6px; bottom: 6px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; color: var(--cream); }
  .welcome__vol[hidden] { display: none; }
  .welcome__vol-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgb(14 12 10 / .6); border: 1px solid rgb(201 169 110 / .55); transition: background-color .2s, color .2s, border-color .2s; }
  .welcome__vol:hover .welcome__vol-dot, .welcome__vol:focus-visible .welcome__vol-dot { background: rgb(14 12 10 / .85); color: var(--gold); border-color: var(--gold); }
  .welcome__vol svg { width: 18px; height: 18px; }
  .welcome__vol .i-wave, .welcome__vol.is-on .i-x { display: none; }
  .welcome__vol.is-on .i-wave { display: inline; }
  /* a soft ring while the sound is still off, so it is noticed */
  .welcome__vol:not(.is-on) .welcome__vol-dot { animation: welcome-vol-hint 2.4s ease-out infinite; }
  @keyframes welcome-vol-hint { 0% { box-shadow: 0 0 0 0 rgb(201 169 110 / .55); } 70%, 100% { box-shadow: 0 0 0 10px rgb(201 169 110 / 0); } }
}
@media (prefers-reduced-motion: reduce) { .welcome__vol:not(.is-on) .welcome__vol-dot { animation: none; } }

/* booking page, phones / tablets: the record is tucked half-way into the screen edge so it never sits on form rows; it slides out when used */
@media (max-width: 1399px) {
  .music--peek { --rest-left: 28px; left: -30px; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), bottom .45s var(--ease-out), left .35s var(--ease-out); }
  .music--peek.is-active, .music--peek:focus-visible { left: var(--rest-left); }
}
@media (max-width: 899px) { .music--peek { --rest-left: 16px; left: -26px; } }

/* ================= the crest: a dark plate behind it, and light that comes out from its rim only ================= */
.welcome__emblem { --crest: 92px; position: relative; display: grid; place-items: center; width: calc(var(--crest) * 1.7); height: calc(var(--crest) * 1.55); margin: -12px auto 2px;
  opacity: 0; transition: opacity .8s .1s var(--ease-out); }
.welcome.is-in .welcome__emblem { opacity: 1; }
.welcome__emblem > * { grid-area: 1 / 1; border-radius: 50%; }
@media (max-height: 760px), (max-width: 380px) { .welcome__emblem { --crest: 76px; margin-top: -8px; } }
/* the logo is line-art with gaps everywhere: this solid plate stops any light showing through the inside */
.welcome__plate { position: relative; z-index: 2; width: calc(var(--crest) * .96); height: calc(var(--crest) * .96); background: radial-gradient(circle at 50% 38%, #17110c, #0c0907 75%); }
.welcome__crest { position: relative; z-index: 3; width: var(--crest); height: var(--crest); margin: 0; filter: none; border-radius: 0; }
/* soft halo: transparent up to the logo's outer edge, brightest just outside it, fading away */
.welcome__glow { position: relative; z-index: 0; width: calc(var(--crest) * 1.5); height: calc(var(--crest) * 1.5);
  background: radial-gradient(circle closest-side, transparent 0, transparent 61%, rgb(255 226 168 / .3) 64%, rgb(236 200 135 / .13) 74%, rgb(210 172 108 / .04) 88%, transparent 100%);
  animation: welcome-ring 4.4s ease-in-out infinite; }
@keyframes welcome-ring { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
/* a faint glint travelling round the rim */
.welcome__glint { position: relative; z-index: 1; width: calc(var(--crest) * 1.4); height: calc(var(--crest) * 1.4);
  background: conic-gradient(from 0deg, transparent 0 62%, rgb(255 240 200 / .32) 76%, transparent 90% 100%);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 66.5%, #000 69%, #000 74%, transparent 90%); mask-image: radial-gradient(circle closest-side, transparent 66.5%, #000 69%, #000 74%, transparent 90%);
  animation: music-spin 9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .welcome__glow { animation: none; } .welcome__glint { animation: none; opacity: .5; } }

/* phones, home page: the record is a button inside the bottom bar */
@media (max-width: 899px) {
  .music--dock { position: relative; left: auto; bottom: auto; flex: none; width: 48px; height: 48px; align-self: center; opacity: 1; transform: none; pointer-events: auto; }
  .music--dock .music__eq, .music--dock .music__notes { display: none; }
}

.mbar .btn--icon { flex: none; }

/* previous / next song buttons in the music controls; the bar stays inside small screens */
.music-vol__prev[hidden] { display: none; }
@media (max-width: 520px) { .music-vol__pct { display: none; } .music-vol__range { width: 66px; } }

/* ---------- sleeve & lid designer (js/sleeve-designer.js) ---------- */
.designer--sleeve .designer__controls { gap: 22px; }
.tpl-grid--wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.tpl-grid--wide .tpl { flex: none; }
.tpl__img--wide { aspect-ratio: 2.1 / 1; padding: 0; overflow: hidden; background: #2a2420; }
.tpl__img--wide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swatches--sleeve span { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px rgb(244 239 230 / .45); }
.sleeved__custom { border: 1px solid rgb(201 169 110 / .3); border-radius: 14px; padding: 4px 16px 14px; }
.sleeved__custom summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--cream); list-style: none; }
.sleeved__custom summary::-webkit-details-marker { display: none; }
.sleeved__custom summary::after { content: '+'; margin-left: auto; font-size: 1.2rem; color: var(--gold); }
.sleeved__custom[open] summary::after { content: '−'; }
.sleeved__custom .field__hint { color: rgb(244 239 230 / .7); margin-bottom: 12px; }

/* switch between the custom cup print designer and the sleeve designer */
.design-switch { display: flex; width: fit-content; margin: 28px auto 34px; }
.design-switch label span { min-height: 44px; }
[data-designer-mount][hidden], [data-sleeve-mount][hidden], [data-cup-only][hidden] { display: none; }

/* Legibility pass (Oct 2026): no essential text below ~12px; hints and labels stay readable on cream and on ink. */
.field__hint { font-size: .875rem; line-height: 1.5; opacity: .92; }
.field > label, .field__label, .acct__form .field > label { font-size: .78rem; }
.acct__form .field__hint { font-size: .82rem; color: rgb(244 239 230 / .82); }
.sleeved__custom .field__hint { color: rgb(244 239 230 / .82); }
.btn--sm { font-size: .76rem; }
.designer__note { font-size: .875rem; color: rgb(244 239 230 / .86); }
.designer__note--final { color: rgb(244 239 230 / .9); }
.designer__howto, .designer__zoomreset, .designer__nudge button, .designer__chip, .sg-pop .demo-pop__label { font-size: .74rem; }
.fontpick__name { font-size: .7rem; }
.designer__movewhat select, .coach__cap, .sg-pop__note, .acct__eye, .acct__or, .sleeved__custom summary { font-size: .76rem; }
.welcome__kicker { font-size: .74rem; }
.welcome__quiet { font-size: .8rem; }

/* Welcome back (signed in): single centred panel, no side video. The first-visit welcome keeps the video. */
.welcome__card.is-back .welcome__media { display: none !important; }
.welcome__card.is-back { flex-direction: column; width: min(400px, 100%); }
.welcome__card.is-back .welcome__main { flex: none; width: 100%; }

/* Type on the cup: the small editor that opens on a text line of the preview */
/* a clear selection outline: the typed letters show on the cup itself (only the caret and selection are drawn here) */
.cupedit { position: absolute; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 0; padding: 0 4px; border: 1.5px solid var(--gold); border-radius: 4px; background: transparent; box-shadow: 0 0 0 1px rgb(14 12 10 / .35), inset 0 0 0 1px rgb(255 255 255 / .35); }
.cupedit::before, .cupedit::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; background: #fff; border: 1.5px solid var(--gold); }
.cupedit::before { left: -6px; } .cupedit::after { right: -6px; }
.cupedit__in { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: transparent; caret-color: #b8862f; font: inherit; text-align: center; padding: 0; text-shadow: none; }
.cupedit__in::selection { background: rgb(201 169 110 / .4); color: transparent; }
.cupedit__in::placeholder { color: transparent; }
.cupedit__amp { flex: 0 0 auto; width: 1.4em; color: transparent; user-select: none; }
.cupedit.is-two .cupedit__in:first-child { text-align: right; } .cupedit.is-two .cupedit__in:last-child { text-align: left; }
.cupedit.is-date { background: rgb(250 246 238 / .94); border-radius: 8px; }
.cupedit.is-date .cupedit__in { color: #1c1915; font: 500 15px/1 var(--f-ui, system-ui), sans-serif; }
.cupedit__bar { position: absolute; z-index: 7; display: flex; align-items: center; gap: 3px; padding: 4px; background: #211b16; border: 1px solid var(--gold); border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / .5); font: 500 12px/1 var(--f-ui, system-ui), sans-serif; white-space: nowrap; }
.cupedit__bar button { all: unset; cursor: pointer; color: var(--cream, #f4efe6); padding: 7px 9px; border-radius: 7px; }
.cupedit__bar button:hover, .cupedit__bar button:focus-visible { background: #3a3027; }
.cupedit__bar button.is-main { background: var(--gold); color: #1c1915; font-weight: 600; }
.cupedit__size { display: inline-flex; align-items: center; gap: 2px; margin: 0 2px; padding: 0 2px; border: 1px solid rgb(201 169 110 / .45); border-radius: 999px; color: var(--cream, #f4efe6); }
.cupedit__size button { padding: 5px 9px; font-size: 14px; }
.cupedit__size input { width: 38px; border: 0; background: transparent; color: inherit; font: inherit; text-align: right; -moz-appearance: textfield; }
.cupedit__size input::-webkit-inner-spin-button, .cupedit__size input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 420px) { .cupedit__bar { gap: 1px; } .cupedit__bar button { padding: 6px 6px; } }
.cupedit__bar { flex-wrap: wrap; max-width: calc(100% - 8px); }
.cupedit__bar [hidden] { display: none !important; }
.cupedit__msg { flex-basis: 100%; contain: inline-size; white-space: normal; margin: 2px 6px 3px; font-size: 11.5px; line-height: 1.4; color: #f2c98f; }
.cupedit__ideas { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; padding: 6px 2px 2px; border-top: 1px solid rgb(201 169 110 / .25); }
.cupedit__ideas > span { padding: 0 4px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgb(244 239 230 / .62); }
.cupedit__bar .cupedit__ideas button { padding: 5px 10px; border: 1px solid rgb(201 169 110 / .4); border-radius: 999px; font-size: 11.5px; }
.cupedit__bar .cupedit__ideas button[aria-pressed="true"] { background: rgb(201 169 110 / .22); border-color: var(--gold); color: var(--cream, #f4efe6); }
/* date: iPhone-style wheels under the typed box (js/date-wheel.js); rows are 32px, five show */
.cupedit__wheel { flex-basis: 100%; contain: inline-size; margin-top: 2px; padding-top: 4px; border-top: 1px solid rgb(201 169 110 / .25); } /* as wide as the buttons row, never wider */
.dwheel { position: relative; display: grid; grid-template-columns: 2.6em minmax(6.2em, 1fr) 3.4em; gap: 2px; height: 160px; min-width: 210px; font: 500 16px/1 var(--f-ui, system-ui), sans-serif; color: var(--cream, #f4efe6); user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.dwheel__col { position: relative; z-index: 1; height: 160px; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; touch-action: pan-y; perspective: 420px; cursor: grab; outline: none; border-radius: 8px; }
.dwheel__col::-webkit-scrollbar { display: none; }
.dwheel__col.is-drag { cursor: grabbing; }
.dwheel__col:focus-visible { box-shadow: inset 0 0 0 1.5px var(--gold); }
.dwheel__pad { height: 64px; }
.dwheel__it { height: 32px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; transform-style: preserve-3d; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dwheel__it > span { display: block; backface-visibility: hidden; } /* tilts in place, so the rows keep their 32px spacing */
.dwheel__col--month .dwheel__it { justify-content: flex-start; padding-left: 6px; }
.dwheel__it.is-off { color: rgb(244 239 230 / .3); }
.dwheel__it[aria-selected="true"]:not(.is-off) { color: #fff; font-weight: 600; }
.dwheel__band { position: absolute; left: 0; right: 0; top: 64px; height: 32px; border-radius: 8px; background: rgb(201 169 110 / .18); box-shadow: inset 0 0 0 1px rgb(201 169 110 / .35); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .dwheel__it > span { transform: none !important; } }
/* Your text: Names · Tagline · Date · Venue under the preview open the editor on the cup */
.designer__saved { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 0 0 10px; font-size: .8rem; color: rgb(244 239 230 / .78); }
.designer__saved > span { display: inline-flex; align-items: center; gap: 7px; }
.designer__saved svg { width: 15px; height: 15px; color: #7cc39a; }
.designer__saved .link-btn { font-size: .8rem; }
.designer__saved .link-btn.is-confirm { color: #f2c98f; }
.designer__lines { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 4px 0 2px; }
.designer__lines-lead { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: rgb(244 239 230 / .72); margin-right: 2px; }
.designer__line { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px 0 13px; border: 1px solid rgb(201 169 110 / .45); border-radius: 999px; background: rgb(244 239 230 / .04); color: var(--cream, #f4efe6); font: 500 .8rem/1 var(--f-ui, system-ui), sans-serif; letter-spacing: .04em; cursor: pointer; transition: border-color .2s, background-color .2s; }
.designer__line svg { width: 14px; height: 14px; color: var(--gold); }
.designer__line:hover { border-color: var(--gold); background: rgb(201 169 110 / .12); }
.designer__line:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.designer__line-dot { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .3s cubic-bezier(.34, 1.6, .64, 1); }
.designer__line.is-set .designer__line-dot { opacity: 1; transform: none; }
@media (max-width: 480px) { .designer__lines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .designer__lines-lead { grid-column: 1 / -1; text-align: center; margin: 0; } .designer__line { justify-content: center; min-height: 44px; gap: 5px; padding: 0 8px; font-size: .76rem; } .designer__line svg { width: 13px; height: 13px; } }
@media (max-width: 420px) { .designer__line svg { display: none; } .designer__line { padding: 0 4px; } }

/* phones: the music button steps aside while the footer (and its links) is on screen */
@media (max-width: 899px) { .music.is-footer, .music.is-footer.is-in { opacity: 0; pointer-events: none; transform: translateY(12px); } }