/* QuicklyCards — modern light storefront.
   White surfaces, sky-blue accents, black type; atmosphere lives in soft
   radial glows (sky with a whisper of pink), never in the UI chrome. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

:root {
  /* surfaces */
  --bg: #ffffff;
  --bg-2: #fafcff;
  --bg-3: #f2f8fd;

  /* text */
  --ink: #0f1720;
  --ink-60: rgba(15, 23, 32, 0.62);
  --ink-40: rgba(15, 23, 32, 0.4);
  --ink-10: rgba(15, 23, 32, 0.08);
  --ink-05: rgba(15, 23, 32, 0.04);

  --gray-2: #64798c;
  --gray-3: #93a6b8;

  /* brand */
  --sky: #0ea5e9;
  --sky-deep: #0284c7;
  --sky-light: #38bdf8;
  --sky-dim: rgba(14, 165, 233, 0.28);
  --sky-subtle: rgba(14, 165, 233, 0.08);
  --pink-glow: rgba(236, 72, 153, 0.1);

  --green: #10b981;
  --amber: #d97706;
  --red: #dc2626;

  --gradient: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-card: 22px;

  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* the atmosphere every page sits on */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 480px at 82% -8%, rgba(56, 189, 248, 0.09), transparent 62%),
    radial-gradient(720px 420px at 8% 4%, var(--pink-glow), transparent 60%),
    radial-gradient(1100px 620px at 50% 118%, rgba(14, 165, 233, 0.07), transparent 62%);
}

a { color: inherit; text-decoration: none; }

button { font-family: var(--font); border: none; background: none; cursor: pointer; }

input, textarea, select { font-family: var(--font); }

::selection { background: var(--sky-dim); color: var(--ink); }

.wrap { max-width: 1184px; margin: 0 auto; padding: 0 32px; }

/* ---------- nav ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 40px;
  height: 56px;
  border-bottom: 1px solid var(--ink-10);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  flex-shrink: 0;
}

.runner { object-fit: contain; }

.nav-logo .runner { width: 22px; height: 22px; }

.nav-logo .wm { color: var(--ink); }

.nav-logo .wm em { font-style: normal; color: var(--sky-deep); }

.nav-tabs { display: flex; align-items: center; gap: 2px; }

.nav-tab {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-2);
  border-radius: 8px;
  letter-spacing: -0.1px;
  white-space: nowrap;
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.nav-tab:hover { color: var(--ink); }

.nav-tab-active { background: var(--sky-subtle); color: var(--sky-deep); }

.nav-cta {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: var(--gradient);
  border-radius: 8px;
  letter-spacing: -0.1px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.25);
  transition: opacity 0.15s, transform 0.15s;
}

.nav-cta:hover { opacity: 0.92; transform: translateY(-1px); }
.nav-cta:active { opacity: 0.85; transform: translateY(0); }

:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 4px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  transition: all 0.2s var(--ease-out);
  white-space: nowrap;
}

.btn-primary {
  background: var(--gradient);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.28);
}

.btn-primary:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 12px 32px rgba(14, 165, 233, 0.36); }
.btn-primary:active { opacity: 0.85; transform: translateY(0); }

.btn-ghost {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--ink-10);
}

.btn-ghost:hover { background: var(--ink-05); }

.btn-small { padding: 7px 14px; font-size: 13px; }

.btn-big { padding: 14px 26px; font-size: 15px; border-radius: var(--radius-md); }

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 96px 32px 110px;
}

.hero-text { display: flex; flex-direction: column; gap: 26px; }

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--sky-deep);
  background: var(--sky-subtle);
  border: 1px solid rgba(14, 165, 233, 0.16);
  padding: 5px 12px;
  border-radius: 999px;
}

.hero-title {
  font-size: clamp(42px, 5vw, 62px);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1.05;
}

.hero-title .dim { color: var(--gray-2); }

.hero-title .accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: 17px;
  color: var(--ink-60);
  line-height: 1.6;
  letter-spacing: -0.1px;
  max-width: 420px;
}

.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.hero-quiet-link { font-size: 14px; font-weight: 500; color: var(--gray-2); }

.hero-quiet-link:hover { color: var(--ink); }

/* floating card mockup */

.hero-card { display: flex; flex-direction: column; align-items: center; position: relative; }

.card-glow {
  position: absolute;
  width: 460px;
  height: 340px;
  background: radial-gradient(ellipse, rgba(14, 165, 233, 0.17) 0%, var(--pink-glow) 55%, transparent 75%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.card-float {
  position: relative;
  z-index: 2;
  animation: floatCard 4s ease-in-out infinite;
  filter: drop-shadow(0 24px 48px rgba(14, 165, 233, 0.18));
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(-2deg); }
}

.mock-card {
  position: relative;
  width: min(430px, 88vw);
  aspect-ratio: 1.586;
  background: linear-gradient(160deg, #ffffff 0%, #fbfdff 60%, #f1f8fd 100%);
  border-radius: var(--radius-lg);
  padding: 22px 26px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--ink-10),
    0 20px 48px rgba(14, 165, 233, 0.12),
    0 4px 16px rgba(15, 23, 32, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  user-select: none;
}

.mock-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 60% 45% at 15% 0%, var(--pink-glow) 0%, transparent 70%);
  pointer-events: none;
}

.mock-noise {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.mock-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  position: relative;
  z-index: 1;
}

.mock-head .runner { width: 18px; height: 18px; }

.mock-head span span { color: var(--sky-deep); }

.mock-product {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.mock-foot { display: flex; align-items: flex-end; gap: 22px; position: relative; z-index: 1; }

.mock-visa { height: 20px; width: auto; display: block; }

.mock-mark { margin-left: auto; opacity: 0.9; }

.mock-mark .runner { width: 22px; height: 22px; }

/* ---------- sections ---------- */

.section { border-top: 1px solid var(--ink-10); padding: 80px 0; }

.section-head { max-width: 620px; margin-bottom: 36px; }

.section-title { font-size: 34px; font-weight: 700; letter-spacing: -1px; line-height: 1.15; }

.section-sub { font-size: 15px; color: var(--ink-60); margin-top: 8px; letter-spacing: -0.1px; }

/* ---------- catalog ---------- */

.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 10px; }

.search {
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 320px;
  outline: none;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.search:focus { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-subtle); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.1px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--ink-10);
  background: var(--bg);
  color: var(--gray-2);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}

.chip:hover { color: var(--ink); }

.chip[aria-pressed="true"] {
  background: var(--sky-subtle);
  border-color: rgba(14, 165, 233, 0.24);
  color: var(--sky-deep);
  font-weight: 600;
}

.chip-cat {
  background: var(--sky-subtle);
  border-color: rgba(14, 165, 233, 0.16);
  color: var(--sky-deep);
  font-weight: 600;
  cursor: default;
}

.count-line { color: var(--gray-3); font-size: 13px; font-weight: 500; margin: 14px 0 18px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 24px;
}

.empty { color: var(--gray-2); font-size: 14px; padding: 28px 0; }

/* The card art is the tile — it runs edge to edge with the meta below it,
   so the artwork reads as a card sitting on the page rather than a thumbnail
   inside a box. */
.tile {
  display: block;
  transition: transform 0.2s var(--ease-out);
}

.tile .card-art {
  box-shadow: 0 1px 2px rgba(15, 23, 32, 0.1), 0 8px 24px rgba(15, 23, 32, 0.09);
  transition: box-shadow 0.2s var(--ease-out);
}

.tile:hover { transform: translateY(-4px); }

.tile:hover .card-art {
  box-shadow: 0 2px 4px rgba(15, 23, 32, 0.12), 0 18px 40px rgba(14, 165, 233, 0.22);
}

/* Card face — modeled on a physical gift card: small marks at the corners and
   the brand itself filling the middle at full size. */

.card-art {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  /* Chunkier than a physical credit card (1.586) — the extra height gives the
     brand mark room to be the whole point of the card. */
  aspect-ratio: 1.34;
  border-radius: 18px;
  padding: 14px 16px;
  color: #ffffff;
  overflow: hidden;
}

.card-art::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -18%;
  width: 65%;
  height: 130%;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(22deg);
  pointer-events: none;
}

.card-art-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-art-eyebrow {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.9;
  text-transform: uppercase;
}

.card-art-value {
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.3);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* The face: brand mark, or the name set large when there's no mark. */
.card-art-face {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 6px 2px;
}

.card-art-logo {
  width: 46%;
  max-height: 100%;
  object-fit: contain;
  /* Normalize every mark to a white silhouette so any source variant works:
     brightness(0) flattens the artwork to black, invert(1) lifts it to white,
     and transparency is preserved throughout. Saves hunting for a reversed
     version when a press kit only ships the dark or full-color one. */
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

/* Marks that read small at the standard width — a wordmark+icon lockup, a
   name-only logo with a lot of internal whitespace — get more room. */
.card-art-logo--lg {
  width: 66%;
}

.card-art-name {
  font-size: clamp(16px, 9cqw, 34px);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  overflow-wrap: anywhere;
}

.card-art-foot {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Light brands (Forever 21's yellow, Apple's silver) can't carry white ink,
   so the whole card flips to dark. The mark keeps brightness(0) but skips the
   invert, landing on black instead of white. */
.card-art--light { color: #16191d; }

.card-art--light .card-art-logo {
  filter: brightness(0) drop-shadow(0 2px 5px rgba(255, 255, 255, 0.35));
}

.card-art--light .card-art-name { text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4); }

.card-art--light .card-art-value { background: rgba(0, 0, 0, 0.14); }

.card-art--light::after { background: rgba(255, 255, 255, 0.22); }

.tile-meta { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 2px; gap: 8px; }

.tile-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; }

.tile-price { font-size: 12.5px; font-weight: 500; color: var(--gray-2); white-space: nowrap; }

.tile-cat {
  display: block;
  margin: 2px 2px 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gray-3);
  text-transform: uppercase;
}

/* ---------- steps ---------- */

.step-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

.step { display: flex; flex-direction: column; gap: 10px; }

.step-num { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--sky-deep); }

.step h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }

.step p { font-size: 14px; color: var(--ink-60); line-height: 1.55; }

/* ---------- faq ---------- */

.faq-list { max-width: 720px; }

.faq-list details { border-bottom: 1px solid var(--ink-10); padding: 18px 0; }

.faq-list details:first-of-type { border-top: 1px solid var(--ink-10); }

.faq-list summary {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  font-size: 18px;
  font-weight: 400;
  color: var(--gray-3);
  transition: transform 0.2s var(--ease-out);
}

.faq-list details[open] summary::after { transform: rotate(45deg); }

.faq-list details p { font-size: 14px; color: var(--ink-60); line-height: 1.6; margin-top: 10px; max-width: 640px; }

/* ---------- bottom cta ---------- */

.bottom-cta { text-align: center; }

.bottom-cta-inner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.bottom-cta h2 { font-size: 36px; font-weight: 700; letter-spacing: -1px; }

.bottom-cta p { font-size: 16px; color: var(--ink-60); }

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--ink-10); padding: 40px 0 48px; background: var(--bg-2); }

.foot-row { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }

.foot .nav-logo { font-size: 14px; }

.foot-note { max-width: 460px; font-size: 12px; color: var(--gray-3); line-height: 1.6; margin-top: 12px; }

.foot-nav { display: flex; flex-direction: column; gap: 8px; }

.foot-nav a { font-size: 13px; font-weight: 500; color: var(--gray-2); }

.foot-nav a:hover { color: var(--ink); }

/* ---------- product page ---------- */

.product { padding: 56px 32px 90px; max-width: 1100px; margin: 0 auto; }

.crumbs { font-size: 13px; font-weight: 500; color: var(--gray-3); margin-bottom: 34px; }

.crumbs a { color: var(--gray-2); }

.crumbs a:hover { color: var(--ink); }

.crumbs span[aria-hidden] { margin: 0 6px; }

.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

.product-art-col { position: relative; }

.product-art-col .card-glow { width: 420px; height: 300px; }

.card-art-big {
  position: relative;
  z-index: 1;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px rgba(15, 23, 32, 0.1),
    0 20px 48px rgba(14, 165, 233, 0.14),
    0 4px 16px rgba(15, 23, 32, 0.08);
}

.card-art-big .card-art-eyebrow { font-size: 11px; }

.card-art-big .card-art-value { font-size: 14px; padding: 4px 12px; }

.card-art-big .card-art-foot { font-size: 10px; }

.card-art-big .card-art-logo { width: 48%; }

.card-art-big .card-art-logo--lg { width: 68%; }

.card-art-big .card-art-name { font-size: clamp(26px, 8.5cqw, 46px); letter-spacing: -1px; }

.assurances { margin: 32px 0 0; padding: 0; list-style: none; position: relative; z-index: 1; }

.assurances li {
  padding-left: 28px;
  position: relative;
  margin: 12px 0;
  font-size: 14px;
  color: var(--ink-60);
  letter-spacing: -0.1px;
}

.assurances li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--sky-subtle);
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.assurances li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 7px;
  height: 4.5px;
  border-left: 1.8px solid var(--sky-deep);
  border-bottom: 1.8px solid var(--sky-deep);
  transform: rotate(-45deg);
}

.product-title { font-size: clamp(30px, 4vw, 40px); font-weight: 700; letter-spacing: -1.2px; line-height: 1.1; margin: 10px 0 12px; }

.product-blurb { font-size: 15px; color: var(--ink-60); line-height: 1.6; margin-bottom: 30px; max-width: 460px; }

.pick-label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-2); margin-bottom: 12px; }

.value-row { display: flex; flex-wrap: wrap; gap: 8px; }

.value-btn {
  font-size: 14.5px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-10);
  background: var(--bg);
  color: var(--ink);
  transition: all 0.2s var(--ease-out);
}

.value-btn:hover { border-color: rgba(14, 165, 233, 0.35); }

.value-btn[aria-pressed="true"] {
  background: var(--gradient);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
}

.custom-row { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; flex-wrap: wrap; }

.custom-row label { font-size: 13px; font-weight: 500; color: var(--gray-2); }

.custom-input {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-sm);
  padding: 2px 12px;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.custom-input:focus-within { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-subtle); }

.custom-dollar { font-size: 14px; font-weight: 600; color: var(--gray-3); }

.custom-input input {
  border: none;
  outline: none;
  font-size: 14.5px;
  font-weight: 600;
  width: 76px;
  padding: 8px 6px;
  background: transparent;
  color: var(--ink);
}

.custom-hint { font-size: 12px; font-weight: 500; color: var(--gray-3); }

.price-box {
  background: var(--bg);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin: 26px 0;
  box-shadow: 0 2px 12px rgba(15, 23, 32, 0.03);
}

.price-main { font-size: 34px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; }

.price-sub { font-size: 13px; color: var(--gray-2); margin-top: 2px; }

.crypto-line {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-05);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--gray-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.tiny-note { font-size: 12px; color: var(--gray-3); margin-top: 12px; }

/* ---------- modal ---------- */

.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 32, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 200;
}

.modal {
  max-width: 430px;
  width: 100%;
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 0 0 1px var(--ink-10), 0 32px 80px rgba(15, 23, 32, 0.18);
}

.modal h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 6px; }

.modal-sub { font-size: 14px; color: var(--ink-60); line-height: 1.55; }

.field-label { display: block; font-size: 13px; font-weight: 600; margin: 18px 0 6px; }

.text-input {
  width: 100%;
  font-size: 14.5px;
  font-weight: 500;
  padding: 11px 14px;
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.text-input:focus { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-subtle); }

.form-error { color: var(--red); font-size: 13px; font-weight: 500; margin-top: 10px; }

.modal-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

.big-code {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  background: #0b1622;
  color: #7dd3fc;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  display: inline-block;
  letter-spacing: 0.05em;
  user-select: all;
  margin: 12px 0;
}

.big-code-quiet { font-size: 15px; margin: 0; }

/* ---------- tracking page ---------- */

.track-page { padding: 64px 32px 90px; max-width: 760px; margin: 0 auto; min-height: 58vh; }

.track-page .section-title { font-size: clamp(30px, 4vw, 40px); letter-spacing: -1.2px; }

.success-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0b7a5b;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.success-steps { margin: 26px 0 22px; }

.track-form { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 8px; }

.code-input {
  flex: 1 1 240px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

.panel {
  background: var(--bg);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(15, 23, 32, 0.05);
  padding: 26px 28px;
  margin-top: 28px;
}

.order-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: start; }

.order-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; margin: 8px 0 2px; }

.muted { color: var(--gray-2); font-size: 13px; }

.timeline { list-style: none; margin: 28px 0; padding: 0; }

.timeline li {
  position: relative;
  padding: 0 0 24px 34px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--gray-3);
}

.timeline li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 22px;
  bottom: 2px;
  width: 2px;
  background: var(--ink-10);
}

.timeline li:last-child { padding-bottom: 0; }

.timeline li:last-child::before { display: none; }

.timeline li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ink-10);
  background: var(--bg);
}

.timeline li.done { color: var(--ink); }

.timeline li.done::after { background: var(--sky); border-color: var(--sky); }

.timeline li.now { color: var(--sky-deep); font-weight: 600; }

.timeline li.now::after { border-color: var(--sky); background: var(--sky-subtle); }

.timeline .stamp { display: block; font-size: 12px; font-weight: 400; color: var(--gray-3); }

.reveal, .await-note, .failed-note { border-radius: var(--radius-md); padding: 18px 20px; margin-top: 8px; }

.reveal { background: var(--sky-subtle); border: 1px solid rgba(14, 165, 233, 0.22); }

.reveal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }

/* Follows Apple's own Add to Apple Wallet badge convention: black pill,
   wallet glyph, a small "Add to" line over a larger "Apple Wallet" line. */
.wallet-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.wallet-badge:hover { opacity: 0.85; }

.wallet-badge:disabled { opacity: 0.6; cursor: default; }

.wallet-badge svg { width: 22px; height: 22px; fill: #ffffff; flex-shrink: 0; }

.wallet-badge-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wallet-badge-text em { font-style: normal; font-size: 11px; font-weight: 400; }

.wallet-badge-text span { font-size: 16px; font-weight: 600; }

.reveal h3, .await-note h3, .failed-note h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }

.gift-code {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  background: #0b1622;
  color: #7dd3fc;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  display: inline-block;
  margin: 10px 12px 10px 0;
  user-select: all;
  word-break: break-all;
}

.activate-hint {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sky-deep);
  margin: 0 0 14px;
}

.activate-success {
  font-size: 13.5px;
  font-weight: 600;
  color: #16a34a;
  margin: 12px 0 0;
}

.await-note { background: var(--bg-3); border: 1px solid var(--ink-10); }

.failed-note { background: rgba(220, 38, 38, 0.05); border: 1px solid rgba(220, 38, 38, 0.2); }

.await-note p, .failed-note p { margin-top: 6px; font-size: 13.5px; color: var(--ink-60); line-height: 1.55; }

.gift-banner {
  background: linear-gradient(135deg, var(--sky-subtle), rgba(236, 72, 153, 0.06));
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 18px 0;
}

.gift-banner-label { font-size: 13.5px; font-weight: 700; color: var(--sky-deep); letter-spacing: -0.1px; }

.gift-banner-note {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-60);
  line-height: 1.55;
  font-style: italic;
}

/* ---------- admin desk ---------- */

.desk { max-width: 1150px; margin: 0 auto; padding: 34px 32px 70px; }

.desk-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }

.desk-title { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; }

.desk-tabs { display: flex; gap: 8px; align-items: center; }

.login-card {
  max-width: 360px;
  margin: 80px auto;
  padding: 30px;
  background: var(--bg);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(15, 23, 32, 0.06);
}

.login-card h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 4px; }

.login-card .muted { margin-bottom: 16px; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-md);
  background: var(--bg);
}

table { border-collapse: collapse; width: 100%; }

th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--ink-05); font-size: 13.5px; }

th {
  background: var(--bg-2);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--gray-2);
  border-bottom: 1px solid var(--ink-10);
}

tr:last-child td { border-bottom: none; }

td code { font-family: var(--mono); font-size: 12.5px; }

td .btn { margin: 2px 4px 2px 0; }

.status-chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  white-space: nowrap;
}

.status-0 { background: var(--sky-subtle); color: var(--sky-deep); }
.status-1 { background: rgba(217, 119, 6, 0.1); color: var(--amber); }
.status-2 { background: rgba(16, 185, 129, 0.1); color: #0b7a5b; }
.status-failed { background: rgba(220, 38, 38, 0.08); color: var(--red); }

.gift-flag {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(236, 72, 153, 0.1);
  color: #be1874;
  white-space: nowrap;
}

.gift-intro { display: block; max-width: 560px; margin-bottom: 16px; }

.low { color: var(--red); font-weight: 600; }

.desk-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 18px; }

.desk-form label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-2); margin-bottom: 5px; }

.desk-form select, .desk-form input, .desk-form textarea {
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 12px;
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  outline: none;
}

.desk-form select:focus, .desk-form input:focus, .desk-form textarea:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px var(--sky-subtle);
}

.desk-form textarea { font-family: var(--mono); font-size: 12.5px; min-width: 280px; min-height: 88px; }

.desk-note { color: var(--gray-2); font-size: 13px; }

.deliver-bar {
  background: var(--bg);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(15, 23, 32, 0.06);
  padding: 18px 20px;
  margin: 0 0 18px;
}

.deliver-bar h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 2px; }

.deliver-form { margin: 12px 0 0; }

/* ---------- responsive + motion ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 56px; padding: 56px 24px 72px; text-align: center; }
  .hero-text { align-items: center; }
  .hero-pill { margin: 0 auto; }
  .product-grid { grid-template-columns: 1fr; gap: 40px; }
  .step-row { grid-template-columns: 1fr; gap: 32px; }
  .nav { padding: 0 20px; }
}

@media (max-width: 560px) {
  .nav-tabs { display: none; }
  .wrap { padding: 0 20px; }
  .section { padding: 56px 0; }
  .order-head { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card-float { animation: none; }
  .btn, .tile, .nav-cta { transition: none; }
}