/* ============================================================================
   SWAZBALL Store — Nike-style commerce flagship
   Tailwind (Play CDN) owns layout. This file owns brand tokens + components.
   Chrome palette: black / white / neutral grays + dark-purple accent ONLY.
   All other colour comes from product/lifestyle imagery.
   ============================================================================ */

/* Speed font — BRAND TITLE ONLY */
@font-face {
  font-family: "Speed";
  src: url("../assets/fonts/Speed.woff2") format("woff2"),
       url("../assets/fonts/Speed.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --ink: #0A0A0B;
  --paper: #FFFFFF;
  --g100: #F5F5F6; --g200: #E6E6E8; --g300: #D2D2D6;
  --g400: #A9A9B0; --g500: #74747C; --g600: #4B4B52; --g700: #2A2A2E;
  --accent: #5B21B6;        /* dark purple */
  --accent-700: #6D28D9;
  --accent-900: #3B0D73;
  --accent-300: #A78BFA;     /* light tint — the only purple readable as text on dark */

  --font-head: "Archivo", system-ui, sans-serif;       /* bold condensed grotesque */
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-brand: "Speed", "Saira Condensed", "Arial Narrow", sans-serif;

  --header-h: 60px;
  --strip-h: 40px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t: 180ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.no-scroll { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *{ transition-duration:.001ms !important; animation-duration:.001ms !important; } }

/* ---- Type ----------------------------------------------------------------- */
.font-head { font-family: var(--font-head); }
.font-brand { font-family: var(--font-brand); font-style: italic; }
.cond {
  font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.92;
}
.cond-tight { letter-spacing: -0.035em; }
.h-hero { font-size: clamp(2.6rem, 6vw, 5.5rem); }
.h-mod  { font-size: clamp(1.8rem, 3.6vw, 3rem); }
.h-tile { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.eyebrow { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.price { font-variant-numeric: tabular-nums; }

.container { width: 100%; max-width: 1480px; margin-inline: auto; padding-inline: clamp(14px, 3vw, 40px); }

/* ---- Buttons -------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600;
  font-size: 0.92rem; padding: 12px 26px; border-radius: 999px; transition: background var(--t), color var(--t), border-color var(--t), transform var(--t); white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: var(--g700); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--g200); }
.btn--out { border: 1px solid currentColor; }
.btn--out:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-700); }
.btn--lg { padding: 15px 34px; font-size: 1rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn__spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color:#fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.tlink { font-weight: 600; border-bottom: 1.5px solid var(--ink); padding-bottom: 1px; transition: opacity var(--t); }
.tlink:hover { opacity: .6; }

/* ---- Promo strip ---------------------------------------------------------- */
.strip { background: var(--accent); color: #fff; height: var(--strip-h); display: flex; align-items: center; justify-content: center; position: relative; font-size: 0.82rem; }
.strip a { text-decoration: underline; font-weight: 600; }
.strip__close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.strip__close:hover { background: rgba(255,255,255,.15); }
.strip__close svg { width: 16px; height: 16px; }
body.strip-off { --strip-total: 0px; }

/* ---- Header --------------------------------------------------------------- */
.header { position: sticky; top: 0; z-index: 200; background: var(--paper); transition: box-shadow var(--t), background var(--t); }
.header.is-stuck { box-shadow: 0 1px 0 var(--g200), 0 6px 20px rgba(0,0,0,0.06); }
.header__bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-word { font-family: var(--font-brand); font-style: normal; font-weight: 800; font-size: 1.5rem; letter-spacing: 0.03em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 4px; height: 100%; }
.nav__item { height: 100%; display: flex; align-items: center; }
.nav__link { padding: 6px 16px; font-weight: 600; font-size: 1rem; position: relative; display: inline-block;
  transform-origin: center; transition: transform var(--t) var(--ease), color var(--t); }
.nav__link::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 3px; height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: center; transition: transform var(--t) var(--ease); }
.nav__item:hover .nav__link, .nav__link:focus-visible { transform: scale(1.06); }
.nav__item:hover .nav__link::after, .nav__link:focus-visible::after { transform: scaleX(1); }

.utils { display: flex; align-items: center; gap: 4px; }
.util-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; position: relative; transition: background var(--t); }
.util-btn:hover { background: var(--g100); }
.util-btn svg { width: 22px; height: 22px; }
.cart-count { position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; border-radius: 999px; display: none; place-items: center; line-height: 1; }
.cart-count.on { display: grid; }
.search-pill { display: flex; align-items: center; gap: 8px; background: var(--g100); border-radius: 999px; padding: 9px 16px; color: var(--g500); width: 200px; transition: background var(--t); }
.search-pill:hover { background: var(--g200); }
.search-pill svg { width: 18px; height: 18px; }
.search-pill input { background: transparent; border: 0; outline: none; width: 100%; font-size: 0.9rem; color: var(--ink); }

.burger { display: none; }

/* ---- Mega menu ------------------------------------------------------------ */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-top: 1px solid var(--g200);
  box-shadow: 0 16px 30px rgba(0,0,0,0.08); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t); z-index: 190; }
.nav__item:hover .mega, .mega:hover, .mega.is-open, .nav__item:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega__inner { display: flex; flex-wrap: wrap; gap: 56px; padding: 36px 0 44px; }
.mega__col { min-width: 170px; }
.mega__col h4 { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g500); margin-bottom: 14px; }
.mega__col a { display: block; padding: 6px 0; color: var(--g600); font-size: 0.95rem; transition: color var(--t); }
.mega__col a:hover { color: var(--ink); }
.mega__promos { display: grid; grid-auto-flow: column; gap: 14px; margin-left: auto; }
.mega-promo { width: 200px; }
.mega-promo { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4/5; display: flex; align-items: flex-end; padding: 14px; color: #fff; }
.mega-promo .ph { position: absolute; inset: 0; z-index: 0; }
.mega-promo span { position: relative; z-index: 1; font-weight: 700; font-size: 0.92rem; }

/* ---- Mobile drawer -------------------------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 300; opacity: 0; pointer-events: none; transition: opacity var(--t); }
.scrim.on { opacity: 1; pointer-events: auto; }
.mdrawer { position: fixed; top: 0; left: 0; height: 100%; width: min(380px, 88vw); background: var(--paper); z-index: 310;
  transform: translateX(-100%); transition: transform 280ms var(--ease); display: flex; flex-direction: column; }
.mdrawer.on { transform: none; }
.mdrawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--g200); }
.mdrawer__body { padding: 8px 20px; overflow-y: auto; }
.macc { border-bottom: 1px solid var(--g200); }
.macc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; }
.macc__head svg { width: 20px; height: 20px; transition: transform var(--t); }
.macc.on .macc__head svg { transform: rotate(180deg); }
.macc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--ease); }
.macc.on .macc__panel { grid-template-rows: 1fr; }
.macc__panel > div { overflow: hidden; }
.macc__panel a { display: block; padding: 9px 0 9px 4px; color: var(--g600); }

/* ---- Hero carousel -------------------------------------------------------- */
.hero { position: relative; height: clamp(460px, 78vh, 760px); overflow: hidden; background: var(--ink); }
.hero__track { height: 100%; }
.hslide { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--ease); pointer-events: none; }
.hslide.on { opacity: 1; pointer-events: auto; }
.hslide__ph { position: absolute; inset: 0; z-index: 0; }
.hslide__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 50%, transparent); }
.hslide__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(40px, 7vh, 90px); color: #fff; }
.hero__dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 9px; }
.hero__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.45); transition: background var(--t), transform var(--t); }
.hero__dot.on { background: #fff; transform: scale(1.15); }
.hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.85); display: grid; place-items: center; transition: background var(--t); }
.hero__arrow:hover { background: #fff; }
.hero__arrow svg { width: 22px; height: 22px; color: var(--ink); }
.hero__arrow--prev { left: 18px; } .hero__arrow--next { right: 18px; }
@media (max-width: 720px) { .hero__arrow { display: none; } }

/* ---- Promo grid ----------------------------------------------------------- */
.promo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ptile { position: relative; overflow: hidden; border-radius: 10px; min-height: 320px; display: flex; align-items: flex-end; }
.ptile--wide { grid-column: span 2; min-height: 360px; }
.ptile--tall { min-height: 440px; }
.ptile__ph { position: absolute; inset: 0; z-index: 0; transition: transform 600ms var(--ease); }
.ptile:hover .ptile__ph { transform: scale(1.04); }
.ptile__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,.5), transparent 55%); }
.ptile__body { position: relative; z-index: 2; padding: clamp(20px, 3vw, 38px); color: #fff; }
@media (max-width: 720px) { .promo-grid { grid-template-columns: 1fr; } .ptile--wide { grid-column: span 1; } }

/* ---- Product carousel ----------------------------------------------------- */
.caro { position: relative; }
.caro__scroll { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px; margin-inline: -8px; -ms-overflow-style: none; scrollbar-width: none; }
.caro__scroll::-webkit-scrollbar { display: none; }
.caro__arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--g300); display: grid; place-items: center; transition: background var(--t), border-color var(--t); }
.caro__arrow:hover { background: var(--g100); }
.caro__arrow:disabled { opacity: .3; pointer-events: none; }
.caro__arrow svg { width: 20px; height: 20px; }

.pcard { scroll-snap-align: start; flex: 0 0 auto; width: clamp(240px, 26vw, 320px); }
@media (min-width: 900px) {
  /* no overflow at this size, so centring can't strand the first card */
  .caro__scroll { justify-content: center; }
  .caro__scroll .pcard { flex: 1 1 0; width: auto; min-width: 240px; max-width: 400px; }
}
.pcard__media { position: relative; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: var(--g100); display: grid; place-items: center; }
.pcard__img { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 350ms var(--ease); }
.pcard__img > svg, .pcard__img > img { width: 74%; height: 74%; object-fit: contain; }
.pcard__img--alt { opacity: 0; transform: scale(1.02); }
.pcard:hover .pcard__img--main { opacity: 0; }
.pcard:hover .pcard__img--alt { opacity: 1; }
.pcard__badge { position: absolute; top: 12px; left: 12px; z-index: 3; background: #fff; color: var(--accent); font-size: 0.72rem; font-weight: 700; padding: 4px 9px; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em; }
.pcard__badge--sold { color: var(--g500); }
/* 4th slot — held open until the ball is revealed */
.pcard.is-coming .pcard__img { opacity: .3; filter: grayscale(1); }
.pcard.is-coming:hover .pcard__img--main { opacity: .3; }
.pcard.is-coming:hover .pcard__img--alt { opacity: 0; }
/* product photography inside cards */
.pcard__img img { width: 82%; height: 82%; object-fit: contain; }
.pcard__fav { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.85); display: grid; place-items: center; opacity: 0; transition: opacity var(--t), background var(--t); }
.pcard__media:hover .pcard__fav { opacity: 1; }
.pcard__fav:hover { background: #fff; }
.pcard__fav svg { width: 18px; height: 18px; }
.pcard__swatches { display: flex; gap: 6px; margin-top: 12px; min-height: 18px; }
.sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--g300); cursor: pointer; transition: transform var(--t); position: relative; }
.sw:hover, .sw.on { transform: scale(1.18); }
.sw.on::after { content:""; position: absolute; inset: -4px; border: 1px solid var(--ink); border-radius: 50%; }
.pcard__tag { color: var(--accent); font-size: 0.82rem; font-weight: 600; margin-top: 10px; }
.pcard__name { font-weight: 600; font-size: 1rem; margin-top: 2px; }
.pcard__cat { color: var(--g500); font-size: 0.9rem; }
.pcard__price { font-weight: 600; margin-top: 6px; }
.pcard__price s { color: var(--g400); font-weight: 400; margin-right: 6px; }

/* ---- Editorial break ------------------------------------------------------ */
.editorial { position: relative; min-height: clamp(420px, 70vh, 640px); display: flex; align-items: center; overflow: hidden; background: var(--ink); color: #fff; }
.editorial__ph { position: absolute; inset: 0; z-index: 0; }
.editorial__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.6), transparent 70%); }
.editorial__content { position: relative; z-index: 2; }
.spec-strip { display: flex; flex-wrap: wrap; gap: 28px 44px; margin-top: 26px; }
.spec { }
.spec .v { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; }
.spec .k { color: rgba(255,255,255,.65); font-size: 0.82rem; margin-top: 2px; }

/* ---- Signup --------------------------------------------------------------- */
.signup { background: var(--ink); color: #fff; }
.signup__form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 480px; }
.signup__form input { flex: 1; min-width: 220px; height: 52px; border-radius: 999px; border: 1px solid var(--g600); background: transparent; color: #fff; padding: 0 20px; font-size: 0.95rem; }
.signup__form input::placeholder { color: var(--g400); }
.signup__form input:focus { outline: none; border-color: #fff; }
.signup__msg { font-size: 0.85rem; margin-top: 12px; min-height: 1em; color: var(--g300); }

/* ---- Footer --------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--g300); padding-top: 56px; padding-bottom: 28px; }
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 28px; }
.footer h4 { color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.footer a { display: block; padding: 6px 0; color: var(--g400); font-size: 0.92rem; transition: color var(--t); }
.footer a:hover { color: #fff; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--g700); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__legal a { color: var(--g500); font-size: 0.82rem; }
.country { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 0.85rem; font-weight: 600; }
.country svg { width: 18px; height: 18px; }
.socials { display: flex; gap: 8px; }
.socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--g700); display: grid; place-items: center; color: var(--g300); }
.socials a:hover { color: #fff; border-color: var(--g500); }
.socials svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* ---- Cart drawer + modal + toast (shared) --------------------------------- */
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 92vw); background: var(--paper); z-index: 320;
  transform: translateX(100%); transition: transform 320ms var(--ease); display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,.12); }
.drawer.on { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--g200); }
.drawer__head h3 { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: 1.2rem; }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transition: background var(--t); }
.iconbtn:hover { background: var(--g100); }
.iconbtn svg { width: 22px; height: 22px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 20px; }
.drawer__empty { height: 100%; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; text-align: center; color: var(--g500); }
.drawer__empty svg { width: 44px; height: 44px; color: var(--g300); }
.citem { display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--g200); }
.citem__thumb { width: 70px; height: 70px; border-radius: 6px; background: var(--g100); display: grid; place-items: center; overflow: hidden; }
.citem__thumb svg, .citem__thumb img { width: 80%; height: 80%; }
.citem__name { font-weight: 600; font-size: 0.95rem; }
.citem__meta { color: var(--g500); font-size: 0.82rem; margin-top: 2px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--g300); border-radius: 999px; margin-top: 8px; }
.qty button { width: 28px; height: 28px; display: grid; place-items: center; color: var(--g600); }
.qty span { min-width: 22px; text-align: center; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.citem__rm { color: var(--g400); font-size: 0.78rem; margin-top: 8px; }
.citem__rm:hover { color: var(--accent); }
.citem__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.drawer__foot { padding: 20px; border-top: 1px solid var(--g200); background: var(--g100); }
.drawer__row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--g600); margin-bottom: 6px; }
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 16px; font-weight: 700; }
.drawer__total .v { font-size: 1.3rem; font-variant-numeric: tabular-nums; }

.modal { position: fixed; inset: 0; z-index: 340; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity var(--t); }
.modal.on { opacity: 1; pointer-events: auto; }
.modal__card { background: #fff; border-radius: 14px; padding: 34px; max-width: 420px; width: 100%; text-align: center; }
.modal__card h3 { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; margin: 14px 0 10px; }
.modal__card p { color: var(--g600); margin-bottom: 22px; }
.modal__ico { width: 60px; height: 60px; border-radius: 50%; background: #ECFDF3; color: #12B76A; display: grid; place-items: center; margin: 0 auto; }
.modal__ico svg { width: 30px; height: 30px; }

.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 360; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 999px; font-size: 0.9rem; box-shadow: 0 12px 30px rgba(0,0,0,.25); transform: translateY(16px); opacity: 0; transition: all var(--t) var(--ease); }
.toast.on { transform: none; opacity: 1; }
.toast svg { width: 18px; height: 18px; color: #6EE7B7; }

/* ---- PDP ------------------------------------------------------------------ */
.pdp { padding-top: 28px; }
.pdp__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; }
.pdp__gallery { position: sticky; top: calc(var(--header-h) + 16px); }
.pdp__main { aspect-ratio: 1/1; border-radius: 12px; background: var(--g100); display: grid; place-items: center; overflow: hidden; }
.pdp__main svg, .pdp__main img { width: 76%; height: 76%; object-fit: contain; }
.pdp__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.pdp__thumb { width: 76px; height: 76px; border-radius: 8px; background: var(--g100); display: grid; place-items: center; border: 1px solid transparent; cursor: pointer; }
.pdp__thumb.on, .pdp__thumb:hover { border-color: var(--ink); }
.pdp__thumb svg, .pdp__thumb img { width: 76%; height: 76%; object-fit: contain; }
.pdp__cat { color: var(--accent); font-weight: 600; }
.pdp__name { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1; margin: 6px 0 14px; }
.pdp__price { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pdp__price s { color: var(--g400); font-weight: 400; font-size: 1.05rem; margin-right: 8px; }
.pdp__sw { display: flex; gap: 10px; margin: 8px 0; }
.pdp__sw .sw { width: 34px; height: 34px; }
.pdp__desc { color: var(--g600); line-height: 1.7; margin: 16px 0; }
.acc { border-top: 1px solid var(--g200); }
.acc__item { border-bottom: 1px solid var(--g200); }
.acc__head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 2px; font-weight: 600; }
.acc__head svg { width: 20px; height: 20px; transition: transform var(--t); }
.acc__item.on .acc__head svg { transform: rotate(45deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--ease); }
.acc__item.on .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__inner { padding: 0 2px 20px; color: var(--g600); line-height: 1.7; }
.spec-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--g200); font-size: 0.92rem; }
.spec-row:last-child { border: 0; }
.spec-row .k { color: var(--g500); }
.results { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 8px; }
.res { border: 1px solid var(--g200); border-radius: 8px; padding: 12px; text-align: center; }
.res .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.res .k { color: var(--g500); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }

/* ---- Responsive header ---------------------------------------------------- */
/* Five top-level items + a 200px search pill overflow on mid-size screens,
   so both tighten between the mobile breakpoint and full desktop. */
@media (min-width: 1081px) and (max-width: 1340px) {
  .nav__link { padding: 6px 10px; font-size: .94rem; }
  .nav__link::after { left: 10px; right: 10px; }
  .search-pill { width: 130px; }
}

@media (max-width: 1080px) {
  .nav, .search-pill { display: none; }
  .burger { display: grid; }
  .pdp__grid { grid-template-columns: 1fr; gap: 28px; }
  .pdp__gallery { position: static; }
}
@media (max-width: 520px) {
  .results { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Provenance / trust band (homepage) ----------------------------------- */
.trust { background: var(--g100); border-block: 1px solid var(--g200); }
.trust__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; padding-block: clamp(40px, 5vw, 68px); }
.trust__body { color: var(--g600); line-height: 1.75; max-width: 56ch; margin-top: 16px; font-size: 1.05rem; }
.trust__points { display: flex; flex-direction: column; gap: 14px; }
.trust__points li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1rem; }
.trust__points li svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
@media (max-width: 820px) { .trust__inner { grid-template-columns: 1fr; gap: 26px; } }

/* ---- Testing page --------------------------------------------------------- */
.test-hero { background: var(--ink); color: #fff; padding-block: clamp(48px, 8vw, 96px); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier { border: 1px solid var(--g200); border-radius: 12px; padding: 26px; }
.tier.is-pro { border-color: var(--ink); background: var(--g100); }
.tier__k { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.2rem; }
.tier__badge { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.tier p { color: var(--g600); font-size: 0.92rem; line-height: 1.6; margin-top: 8px; }

.tlist { border-top: 2px solid var(--ink); }
.tblock { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; align-items: center; padding: clamp(34px, 5vw, 60px) 0; border-bottom: 1px solid var(--g200); }
.tblock:nth-child(even) .tblock__media { order: 2; }   /* alternate sides */
.tblock__n { font-family: var(--font-head); font-weight: 800; font-size: 0.95rem; color: var(--g400); letter-spacing: 0.04em; }
.tblock__name { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; margin: 10px 0 16px; }
.tblock__std { display: inline-flex; align-items: center; gap: 8px; background: var(--g100); border: 1px solid var(--g200); border-radius: 999px; padding: 8px 15px; font-size: 0.84rem; font-weight: 600; }
.tblock__std b { color: var(--accent); font-variant-numeric: tabular-nums; }
.tblock__how { color: var(--g600); line-height: 1.75; }
.tblock__why { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--g200); font-size: 0.92rem; color: var(--g500); }
.tblock__why b { color: var(--ink); font-weight: 600; }

/* per-stage media slot (drop in photo/video) */
.tblock__media { position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden;
  background: var(--g100); border: 1px solid var(--g200); display: grid; place-items: center; }
.tblock__media .play { width: 60px; height: 60px; border-radius: 50%; background: rgba(10,10,11,0.06); border: 1px solid var(--g300); display: grid; place-items: center; }
.tblock__media .play svg { width: 22px; height: 22px; color: var(--g500); margin-left: 3px; }
.tblock__media .corner { position: absolute; top: 14px; left: 16px; font-family: var(--font-head); font-weight: 800; font-size: 0.8rem; color: var(--g400); letter-spacing: 0.04em; }
.tblock__media .ph-note { position: absolute; bottom: 14px; left: 16px; right: 16px; font-size: 0.78rem; color: var(--g400); }
.tblock__media img, .tblock__media video { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 760px) {
  .tblock { grid-template-columns: 1fr; gap: 18px; }
  .tblock:nth-child(even) .tblock__media { order: 0; }
  .tiers { grid-template-columns: 1fr; }
}

/* reveal (subtle, perceived-speed) */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .rv{opacity:1; transform:none;} }

/* ============================================================================
   FLOEMA-STYLE SCROLL MOTION (retail-safe: only brand bands + headings move)
   ============================================================================ */
/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Oversized media that parallax-drifts inside its section */
.para-img { position: absolute; left: 0; right: 0; top: -14%; height: 128%; z-index: 0;
  background-size: cover; background-position: center; will-change: transform; }

/* Masked word reveal for big headings */
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.word-inner { display: inline-block; will-change: transform; }

/* Full-bleed overlapping showcase */
.showcase { position: relative; height: clamp(500px, 88vh, 860px); overflow: hidden;
  display: flex; align-items: center; background: var(--ink); color: #fff; }
.showcase__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,.12) 55%, rgba(0,0,0,.42)); }
.showcase__content { position: relative; z-index: 2; }
.showcase__eyebrow { color: #fff; opacity: .82; margin-bottom: 14px; }

/* The section immediately after a showcase rises up and overlaps it */
.showcase + section {
  position: relative; z-index: 3; background: var(--paper);
  margin-top: clamp(-76px, -6vw, -46px);
  border-top-left-radius: 30px; border-top-right-radius: 30px;
}
@media (max-width: 640px){ .showcase + section { border-top-left-radius: 22px; border-top-right-radius: 22px; } }

/* ---- Stacked product showcases: each full-screen panel slides over the last.
   The wrapper is taller than the panel, so each design HOLDS on screen for the
   extra height before the next panel begins rising over it. */
.pstack { position: relative; }
.pshow-wrap { position: relative; height: 185vh; }
.pshow-wrap:last-child { height: 100vh; }   /* last panel: the summary rises over it */
/* Content sits high in the panel: the next panel rises from the bottom, so it
   covers empty space first and the copy stays readable through the transition. */
.pshow { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; align-items: flex-start; color: #fff;
  border-top-left-radius: 26px; border-top-right-radius: 26px;
  box-shadow: 0 -18px 50px rgba(0,0,0,.35); background: var(--ink); }
.pstack .pshow:first-child { border-radius: 0; box-shadow: none; }
.pshow__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.pshow__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.12) 62%, rgba(0,0,0,.28)); }
.pshow__ball { position: absolute; z-index: 1; right: clamp(2%, 7vw, 10%); top: 50%; transform: translateY(-54%);
  width: clamp(300px, 46vh, 560px); filter: drop-shadow(0 44px 70px rgba(0,0,0,.55));
  animation: pshow-float 7s var(--ease) infinite alternate; }
.pshow__ball img { width: 100%; height: auto; display: block; }
/* photography sits slightly larger and rounder on the stage */
.pshow__ball.has-photo { width: clamp(320px, 52vh, 620px); filter: drop-shadow(0 50px 80px rgba(0,0,0,.6)); }
.pshow--coming .pshow__ball { opacity: .35; filter: grayscale(1) blur(1px) drop-shadow(0 40px 60px rgba(0,0,0,.5)); }
@keyframes pshow-float { from { transform: translateY(-56%) rotate(-3deg); } to { transform: translateY(-50%) rotate(3deg); } }
@media (prefers-reduced-motion: reduce){ .pshow__ball { animation: none; } }
.pshow__content { position: relative; z-index: 2; padding-top: clamp(100px, 17vh, 190px); }
.pshow__num { font-family: var(--font-head); font-weight: 800; font-size: 1rem; letter-spacing: .06em; margin-bottom: 10px; }
.pshow__num span { opacity: .5; font-weight: 600; }
.pshow__name { font-size: clamp(3rem, 8.5vw, 7.5rem); line-height: .92; color: #fff; max-width: 10ch; }
.pshow__tag { max-width: 44ch; margin-top: 16px; font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,.82); }
.pshow__row { display: flex; align-items: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.pshow__price { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* summary carousel rises over the last panel */
.pstack + section { position: relative; z-index: 3; background: var(--paper);
  margin-top: clamp(-76px, -6vw, -46px); border-top-left-radius: 30px; border-top-right-radius: 30px; }
@media (max-width: 720px) {
  /* shorter hold on phones so the stack doesn't feel endless */
  .pshow-wrap { height: 150vh; }
  .pshow-wrap:last-child { height: 100vh; }
  /* copy stays top-left; ball drops into the lower half beneath it */
  .pshow__content { padding-top: clamp(88px, 14vh, 130px); }
  .pshow__ball { right: 50%; transform: translate(50%,-50%); width: clamp(200px, 40vw, 300px); top: 70%; animation: pshow-float-m 7s var(--ease) infinite alternate; }
  @keyframes pshow-float-m { from { transform: translate(50%,-53%) rotate(-3deg); } to { transform: translate(50%,-47%) rotate(3deg); } }
  .pshow__tag { font-size: .95rem; max-width: 100%; }
}

/* ---- Cause pledge + fineprint (cause.html) ------------------------------- */
.pledge { border-left: 3px solid var(--accent); background: var(--g100);
  padding: 16px 20px; margin: 24px 0; border-radius: 0 8px 8px 0; }
.pledge__line { margin: 0; font-weight: 600; font-size: 1.02rem; line-height: 1.55; color: var(--ink); }
.fineprint { font-size: .82rem; line-height: 1.55; color: var(--g500); margin: 0 0 8px; }

/* ============================================================
   LEGAL PAGES (privacy policy, terms) — long-form prose layout
   ============================================================ */
.legal { display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px, 5vw, 72px);
  align-items: start; padding-block: clamp(40px, 6vw, 80px); }
@media (max-width: 900px) { .legal { grid-template-columns: 1fr; gap: 28px; } }

.legal__toc { position: sticky; top: calc(var(--header-h) + 20px); }
@media (max-width: 900px) { .legal__toc { position: static; border-bottom: 1px solid var(--g200); padding-bottom: 20px; } }
.legal__toc h4 { font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--g500); margin-bottom: 14px; }
.legal__toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; }
.legal__toc li { counter-increment: toc; }
.legal__toc a { display: block; padding: 5px 0; font-size: .88rem; line-height: 1.45;
  color: var(--g600); transition: color var(--t); }
.legal__toc a::before { content: counter(toc) ". "; color: var(--g400); }
.legal__toc a:hover { color: var(--ink); }

.legal__body { max-width: 74ch; counter-reset: sec; }
.legal__body > section { counter-increment: sec; scroll-margin-top: calc(var(--header-h) + 24px);
  padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--g200); }
.legal__body > section:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.legal__body h2 { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.15; margin-bottom: 14px; }
.legal__body h2::before { content: counter(sec) ". "; color: var(--accent); }
.legal__body h3 { font-weight: 700; font-size: 1rem; margin: 22px 0 8px; color: var(--ink); }
.legal__body p { color: var(--g600); line-height: 1.8; margin-bottom: 14px; }
.legal__body ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.legal__body li { color: var(--g600); line-height: 1.75; margin-bottom: 7px; }
.legal__body a:not(.tlink) { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal__body strong { color: var(--ink); font-weight: 600; }

.legal__table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: .92rem; }
.legal__table th, .legal__table td { text-align: left; vertical-align: top;
  padding: 11px 14px; border: 1px solid var(--g200); line-height: 1.6; }
.legal__table th { background: var(--g100); font-weight: 600; color: var(--ink); font-size: .84rem;
  letter-spacing: .02em; text-transform: uppercase; }
.legal__table td { color: var(--g600); }

.legal__note { background: var(--g100); border-left: 3px solid var(--accent);
  padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 18px 0; }
.legal__note p { margin: 0; color: var(--g700); }
.legal__updated { font-size: .84rem; color: var(--g400); }
/* placeholder tokens the owner must fill in before publishing */
.legal__ph { background: #FFF3CD; color: #6B5300; font-weight: 600;
  padding: 1px 6px; border-radius: 4px; white-space: nowrap; }

/* ============================================================
   COMING SOON — standalone holding page (coming-soon.html)
   ============================================================ */
.soon { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto;
  background: var(--ink); color: #fff; overflow: hidden; }
.soon__bg { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(91,33,182,.55), transparent 62%),
    radial-gradient(70% 60% at 12% 88%, rgba(59,13,115,.48), transparent 66%),
    linear-gradient(140deg, #0f0f13, #17161d 52%, #0a0a0b);
  animation: soonDrift 26s ease-in-out infinite alternate; }
@keyframes soonDrift { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-2%,-2%,0); } }
.soon__grain { position: absolute; inset: 0; z-index: 1; opacity: .14; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.55) .5px, transparent .5px);
  background-size: 4px 4px; }
.soon__vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(0,0,0,.72)); }

.soon__head, .soon__main, .soon__foot { position: relative; z-index: 2; }
.soon__head { padding: clamp(10px, 1.4vh, 22px) 0; }
/* The wordmark sits left now; the liquid mark carries the centre of the page. */
.soon__head .container { display: flex; align-items: center; justify-content: flex-start;
  position: relative; min-height: 34px; }
/* Corner lockup — small on purpose: the liquid mark owns the centre, and the
   height this gives back is what buys the mark its breathing room below. */
.soon__head .brand-word { font-size: clamp(1.1rem, 1.6vw, 1.45rem); letter-spacing: .05em; }

/* Phones centre the wordmark again, and it can carry its old size there. */
@media (max-width: 640px) {
  .soon__head .container { justify-content: center; }
  .soon__head .brand-word { font-size: clamp(1.7rem, 7.4vw, 2.3rem); }
}

/* Tells people what the field is for. */
.soon__cta { color: var(--accent-300); font-weight: 500;
  font-size: clamp(.88rem, 1.2vw, .96rem);
  line-height: 1.5; margin: clamp(16px, 3.4vh, 48px) auto 0; max-width: 40ch; }

.soon__main { display: grid; text-align: center;
  padding: 0 0 clamp(14px, 3.4vh, 60px); }
/* Two rows. The mark's row takes every leftover pixel and the mark centres
   inside it, so whatever slack the viewport leaves lands equally above and
   below it instead of all pooling on top. */
.soon__main > .container { display: grid; grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center; }
.soon__inner { width: 100%; max-width: 760px; margin-inline: auto; }
.soon__eyebrow { color: #fff; opacity: .62; margin-bottom: clamp(10px, 1.6vh, 20px); }
/* Speed — the brand face. Caps-only, narrower and more slanted than Archivo,
   so it takes a larger size and looser tracking than the old headline. */
.soon__title { font-family: var(--font-brand); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.015em; line-height: .92; margin: 0;
  font-size: clamp(2.4rem, min(11.6vw, 12.6vh), 8.6rem); }
.soon__title span { display: block; }
.soon__rule { width: 64px; height: 3px; background: var(--accent); margin: clamp(10px, 1.7vh, 24px) auto; border-radius: 2px; }
.soon__body { color: var(--g300); font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.75;
  max-width: 52ch; margin: 0 auto; }
.soon__body b { color: #fff; font-weight: 600; }

.soon__form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  max-width: 420px; margin: clamp(14px, 2.2vh, 22px) auto 0; }

.soon__form input { flex: 1; min-width: 190px; height: 46px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #fff;
  padding: 0 18px; font-size: .9rem; font-family: var(--font-body);
  transition: border-color var(--t), background var(--t); }
.soon__form .btn { height: 46px; padding: 0 26px; font-size: .92rem; justify-content: center; }
.soon__form input::placeholder { color: var(--g400); }
.soon__form input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.1); }
/* Phones: full-width field with the button beneath it — bigger targets,
   and the button stops being squeezed next to the input. */
@media (max-width: 560px) {
  .soon__form { flex-direction: column; gap: 10px; }
  .soon__form input, .soon__form .btn { width: 100%; flex: 0 0 auto; }
}
.soon__msg { font-size: .86rem; margin-top: clamp(8px, 1.2vh, 14px); min-height: 1.2em; color: var(--g300); }
.soon__msg.ok { color: #8FE39A; }
.soon__msg.err { color: #FF9C9C; }

/* Short viewports (small laptops, browser chrome eating the window): keep the
   whole page on one screen by tightening the vertical rhythm. Taller screens
   keep the generous spacing above the signup block. */
@media (max-height: 720px) {
  .soon__head { padding: 10px 0; }
  .soon__main { padding: 0 0 6px; }   /* bottom only: top padding would unbalance the mark */
  .soon__rule { margin-block: 10px; }
  .soon__cta  { margin-top: 26px; }
  .soon__form { margin-top: 10px; }
  .soon__msg  { margin-top: 8px; }
  .soon__foot { padding: 10px 0; }
}

.soon__meta { display: flex; gap: clamp(16px,3vw,34px); justify-content: center; flex-wrap: wrap;
  margin-top: clamp(30px,4vw,44px); }
.soon__metaItem { text-align: center; }
.soon__metaK { font-family: var(--font-body); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--g500); margin-bottom: 5px; }
.soon__metaV { font-family: var(--font-head); font-weight: 700; font-size: .98rem;
  letter-spacing: -.01em; color: #fff; }

.soon__foot { padding: clamp(12px, 2.2vh, 36px) 0; }
/* 3-column grid with equal side tracks, so the icons sit on the page's true
   centre line. space-between would park them off-centre, because the
   copyright text is much wider than the links opposite it. */
.soon__foot .container { display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 18px; }
.soon__foot p { justify-self: start; }
.soon__foot .socials { justify-self: center; }
.soon__foot .soon__links { justify-self: end; }
.soon__foot p { color: var(--g500); font-size: .8rem; margin: 0; }
.soon__foot .socials a { border-color: rgba(255,255,255,.18); color: var(--g300); }
.soon__foot .socials a:hover { border-color: #fff; color: #fff; }
.soon__links { display: flex; gap: 18px; }
.soon__links a { color: var(--g500); font-size: .8rem; transition: color var(--t); }
.soon__links a:hover { color: #fff; }
@media (max-width: 700px) {
  .soon__foot .container { grid-template-columns: 1fr; text-align: center; gap: 14px; }
  .soon__foot p,
  .soon__foot .socials,
  .soon__foot .soon__links { justify-self: center; }
  .soon__foot p { order: 3; }
  .soon__foot .socials { order: 1; }
  .soon__foot .soon__links { order: 2; }
}

@media (prefers-reduced-motion: reduce) { .soon__bg { animation: none; } }


/* ============================================================
   HOLDING-PAGE BUILD ONLY — these pages drop the Tailwind CDN,
   so replace the handful of Preflight resets store.css assumed.
   ============================================================ */
html { line-height: 1.5; }   /* Preflight's default — several rules rely on it */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
table { border-collapse: collapse; }
input, button, textarea, select { font-family: inherit; font-size: 100%; }


/* ---- liquid metal mark ----
   The wrapper carries the original mark's class, so every existing layout rule
   still applies to it. The svg inside is the fallback and simply fills it; when
   the shader mounts, the svg is hidden and the canvas takes the same box. */
.soon__markinner { display: block; height: 100%; width: auto; margin-inline: auto; }
.soon__markwrap { line-height: 0; }
.soon__markwrap.is-liquid { aspect-ratio: 1; }

/* The centrepiece mark. Big enough that the liquid actually reads — below
   roughly 90px the flow is smaller than the strokes and the effect is lost.
   Sized off viewport height because this page has to stay on one screen. */
.soon__mark { display: block; width: auto; color: #fff;
  height: clamp(96px, 16.5vh, 210px);
  align-self: center; margin: clamp(10px, 1.8vh, 22px) auto; }
@media (max-width: 640px)  { .soon__mark { height: clamp(88px, 15vh, 150px); } }
@media (max-height: 720px) { .soon__mark { height: clamp(84px, 14vh, 152px); } }
.liquid-mark__canvas { display: block; width: 100%; height: 100%; }

/* ============================================================
   DEFERRED GRADIENT BACKDROP (ShaderGradient)
   The canvas is ~325KB gzipped, so it is never part of first paint: the
   loader waits for `load` + idle, and these layers start invisible over the
   flat background the page already paints. If it never loads -- reduced
   motion, no WebGL2, data saver, a small/low-power device -- nothing below
   changes and the page looks exactly as it did.
   ============================================================ */
.ap__sg, .soon__sg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.1s ease; }
.ap__sg.is-ready, .soon__sg.is-ready { opacity: 1; }
.ap__sg canvas, .soon__sg canvas { display: block; width: 100% !important; height: 100% !important; }
/* Reduce Motion keeps the backdrop -- it is rendered as a still frame instead
   of being hidden, so the page still looks designed. */

/* The gradient sits above the static CSS backdrop but below grain + vignette,
   so the grain and the edge darkening still read over it. */
.soon__sg { z-index: 0; }