/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("5a80eacc-bb61-4f5f-9daf-dca91106a462.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("5961fc67-09e5-4100-b96c-da72b51ff0d8.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("1d2f1d23-73b3-47c8-aabf-2daa5fa38830.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("05c50ead-c59e-4052-b328-ad4fd6c54b2c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("5057486f-60a1-49ba-8748-29bf5d16764e.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("922a7163-438a-46e6-b4e7-eefb09785d9d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("893319f3-7209-49b9-b86d-34aa7c38d9fd.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fd376427-88be-441e-8028-36353e9b23e4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("86d33f35-abdf-4a22-b109-160bb343606a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("3854e667-0838-4116-ab78-510f93bb75af.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("7d6892c8-803b-4e79-a2be-c7988404595e.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("61b75edb-d280-44bb-af42-a2bc00c1ffdd.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("82c6458a-1a11-4aea-b710-2ea42412be9b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("4fba2aaf-8d06-42cc-b2b8-066dc2bcfc89.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("cad48f46-2c5a-4223-873c-71eb1c8e556e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c4300f70-10d7-47dc-8a85-c41dab54b252.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("5901216d-25f2-4ca7-adc1-ce9121adbe97.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("61b75edb-d280-44bb-af42-a2bc00c1ffdd.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("82c6458a-1a11-4aea-b710-2ea42412be9b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4fba2aaf-8d06-42cc-b2b8-066dc2bcfc89.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("cad48f46-2c5a-4223-873c-71eb1c8e556e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("c4300f70-10d7-47dc-8a85-c41dab54b252.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("5901216d-25f2-4ca7-adc1-ce9121adbe97.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("61b75edb-d280-44bb-af42-a2bc00c1ffdd.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("82c6458a-1a11-4aea-b710-2ea42412be9b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("4fba2aaf-8d06-42cc-b2b8-066dc2bcfc89.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("cad48f46-2c5a-4223-873c-71eb1c8e556e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c4300f70-10d7-47dc-8a85-c41dab54b252.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("5901216d-25f2-4ca7-adc1-ce9121adbe97.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---- next block ---- */

/* ============================================================
   Clai · See the Magic of Clai
   Mobile/tablet card-trick experience for tradeshow booths
   ============================================================ */

:root {
  --paper:        #F6F4EE;
  --paper-2:      #FBFAF6;
  --paper-3:      #ECE7DA;
  --ink:          #17201C;
  --ink-2:        #2C342F;
  --ink-mute:     #5E6B64;
  --ink-dim:      #8E978F;
  --hair:         rgba(20,30,25,0.10);
  --hair-2:       rgba(20,30,25,0.18);
  --green:        #2F8F5E;
  --green-deep:   #1E6B43;
  --green-bright: #44BA82;
  --green-soft:   rgba(47,143,94,0.12);
  --mint:         #7FDCA7;
  --amber:        #E5B64A;
  --amber-deep:   #8A6513;
  --amber-soft:   rgba(229,182,74,0.18);

  --font-sans:  "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Instrument Serif", "Fraunces", ui-serif, Georgia, serif;
  --font-script:"Caveat", "Brush Script MT", cursive;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  overscroll-behavior: none;
}
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","cv11";
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* ============================================================
   Stage, the dark velvet table
   ============================================================ */
.stage {
  position: fixed; inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 30%, #20302a 0%, #141a17 60%, #0b100e 100%);
}
.stage::before {
  /* fabric weave */
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.10) 0 2px, transparent 2px 6px);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.stage::after {
  /* vignette */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(140% 100% at 50% 50%, transparent 40%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

/* Floating sparkles backdrop */
.sparkles {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.7;
}
.sparkle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px 2px var(--amber);
  animation: drift 9s ease-in-out infinite;
  opacity: 0;
}
.sparkle.sparkle--green { background: var(--mint); box-shadow: 0 0 10px 2px var(--mint); }
.sparkle.sparkle--paper { background: var(--paper); box-shadow: 0 0 8px 2px var(--paper); width: 2.5px; height: 2.5px; }
@keyframes drift {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  20%  { opacity: 0.9; }
  50%  { opacity: 0.6; transform: translateY(-30px) scale(1); }
  80%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-60px) scale(0.7); }
}

/* ============================================================
   Top + bottom HUD
   ============================================================ */
.hud {
  position: absolute; left: 0; right: 0;
  padding: max(env(safe-area-inset-top), 18px) 22px 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  z-index: 30;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud__brand {
  display: inline-flex; align-items: center; gap: 11px;
  font: 600 14px/1 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--paper);
}
.hud__wordmark {
  height: 22px;
  width: auto;
  display: block;
  /* The wordmark PNG is green, brighten toward mint on the dark stage */
  filter: brightness(1.18) saturate(0.92);
}
.hud__brand .mono {
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mint);
  margin-left: 4px;
  padding: 4px 6px;
  border: 1px solid rgba(127,220,167,0.35);
  border-radius: 4px;
}
.hud__btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(246,244,238,0.08);
  border: 1px solid rgba(246,244,238,0.16);
  color: var(--paper);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 13px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.hud__btn:hover { background: rgba(246,244,238,0.14); }
.hud__btn:active { transform: scale(0.96); }
.hud__btn .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(127,220,167,0.18); }

.hud-bottom {
  position: absolute; left: 0; right: 0;
  bottom: max(env(safe-area-inset-bottom), 18px);
  padding: 0 22px;
  display: flex; justify-content: center;
  z-index: 30;
  pointer-events: none;
}
.hud-bottom__counter {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(246,244,238,0.4);
  pointer-events: auto;
}

/* ============================================================
   Headlines, title above the deck
   ============================================================ */
.title-block {
  position: absolute;
  left: 0; right: 0;
  top: 12vh;
  text-align: center;
  padding: 0 24px;
  z-index: 10;
  pointer-events: none;
}
.title-block__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mint);
}
.title-block__eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 0 4px rgba(127,220,167,0.18);
}
.title-block__h {
  margin: 16px 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(40px, 10vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.038em;
  color: var(--paper);
  text-wrap: balance;
}
.title-block__h em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--mint);
}
.title-block__sub {
  margin: 18px auto 0;
  max-width: 36ch;
  font-size: clamp(14px, 3.6vw, 17px);
  line-height: 1.5;
  color: rgba(246,244,238,0.65);
  text-wrap: pretty;
}

/* compact title (after intro), but reveal mode gets bigger headline */
.title-block--compact { top: 5vh; z-index: 110; }
.title-block--compact .title-block__h {
  font-size: clamp(22px, 5vw, 32px);
}
.title-block--compact .title-block__sub {
  font-size: clamp(13px, 3.4vw, 15px);
  margin-top: 8px;
}

/* Reveal: show the actual feature headline, big and unmistakable */
.title-block--reveal {
  top: 6vh;
  z-index: 110;
  /* faint paper-blurred halo so the headline always reads against the deck */
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}
.title-block--reveal .title-block__h {
  font-size: clamp(26px, 6.6vw, 44px);
  line-height: 1.02;
  margin-top: 14px;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.title-block--reveal .title-block__sub {
  font-size: clamp(12px, 3.2vw, 14px);
  margin-top: 12px;
}
.title-block--reveal .title-block__eyebrow { color: var(--mint); }
/* Promo variant on reveal, amber tone */
.title-block--reveal.title-block--promo .title-block__eyebrow,
.title-block--reveal.title-block--promo .title-block__h em { color: var(--amber); }
.title-block--reveal.title-block--promo .title-block__eyebrow::before {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(229,182,74,0.18);
}

/* ============================================================
   Deck area
   ============================================================ */
.deck-zone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  display: grid;
  place-items: center;
  perspective: 1400px;
  perspective-origin: 50% 30%;
  z-index: 15;
}
.deck-zone--lifted { top: 55%; }
.deck-zone--reveal { top: 55%; }

.deck {
  position: relative;
  /* Cap by min(vw, vh) so the chosen card always fits between title and CTAs.
     Lower floors are intentional, we'd rather have a smaller crisp card than one that overlaps chrome. */
  width: clamp(180px, min(58vw, 30vh), 300px);
  height: clamp(220px, min(82vw, 42vh), 440px);
  transform-style: preserve-3d;
}

/* ============================================================
   Card, base
   ============================================================ */
.card {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  cursor: pointer;
}
.card__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 18px;
  box-shadow:
    0 0 0 1.5px rgba(20,30,25,0.9),
    0 22px 50px rgba(0,0,0,0.5),
    0 8px 18px rgba(0,0,0,0.35);
}
.card__face-inner {
  position: absolute; inset: 0;
  border-radius: 18px;
  overflow: hidden;
}
.card__face--back {
  background:
    radial-gradient(120% 80% at 50% 0%, #244134 0%, #15211b 60%, #0c1411 100%);
  color: var(--mint);
}
.card__face--front {
  /* Dark magical card aesthetic, ink-on-black with mint + gold accents.
     A touch darker and warmer than the back so the two sides feel related but distinct. */
  background:
    radial-gradient(140% 100% at 50% -10%, #1c2620 0%, #0f1612 55%, #06090a 100%);
  color: var(--paper);
  transform: rotateY(180deg);
}
.card--promo .card__face--front {
  /* Promo front, same dark base, but warm amber undertone for the "treasure" feel */
  background:
    radial-gradient(140% 100% at 50% -10%, #2a2110 0%, #1a1408 55%, #0a0703 100%);
  color: var(--paper);
}
.card__face--front .card__face-inner,
.card__face--back  .card__face-inner { background: inherit; }

/* Subtle filigree weave on the front so it reads as cardstock, not flat black */
.card__face--front .card__face-inner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(127,220,167,0.025) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(229,182,74,0.018) 0 1px, transparent 1px 9px);
  pointer-events: none;
}
.card--promo .card__face--front .card__face-inner::before {
  background:
    repeating-linear-gradient(45deg, rgba(229,182,74,0.04) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(229,182,74,0.025) 0 1px, transparent 1px 9px);
}

/* Inner stroke around the front content, defined later in the cfront block */

/* Back design */
.cback {
  position: absolute; inset: 0;
  padding: 18px;
  display: flex; flex-direction: column;
}
.cback__border {
  position: absolute; inset: 10px;
  border: 1px solid rgba(127,220,167,0.35);
  border-radius: 12px;
}
.cback__border::before, .cback__border::after {
  content: "";
  position: absolute; inset: 4px;
  border: 1px solid rgba(127,220,167,0.18);
  border-radius: 9px;
  pointer-events: none;
}
.cback__corners {
  position: absolute; inset: 16px;
  pointer-events: none;
}
.cback__corner {
  position: absolute;
  width: 24px; height: 24px;
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: rgba(127,220,167,0.55);
  display: grid; place-items: center;
}
.cback__corner--tl { top: 0; left: 0; }
.cback__corner--tr { top: 0; right: 0; transform: rotate(90deg); }
.cback__corner--bl { bottom: 0; left: 0; transform: rotate(-90deg); }
.cback__corner--br { bottom: 0; right: 0; transform: rotate(180deg); }

.cback__center {
  margin: auto;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--mint);
}
.cback__monogram {
  font: 600 44px/1 var(--font-sans);
  letter-spacing: -0.04em;
  color: var(--mint);
  margin-bottom: 6px;
}
.cback__monogram em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--paper);
}
.cback__wordmark {
  width: 64%;
  max-width: 180px;
  height: auto;
  display: block;
  margin: 0 auto 6px;
  /* Brighten the green wordmark to mint on the dark card back */
  filter: brightness(1.25) saturate(0.85);
}
.cback__label {
  font: 500 9px/1.4 var(--font-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(127,220,167,0.55);
  text-align: center;
}
.cback__seal {
  width: 56px; height: 56px;
  margin-top: 10px;
  border-radius: 50%;
  border: 1px solid rgba(127,220,167,0.35);
  display: grid; place-items: center;
  position: relative;
}
.cback__seal::before {
  content: ""; position: absolute; inset: 4px;
  border-radius: 50%;
  border: 1px dashed rgba(127,220,167,0.22);
}
.cback__seal svg { width: 26px; height: 26px; color: var(--mint); }

/* ---------- Card front · magical playing-card layout ---------- */
.cfront {
  position: absolute; inset: 0;
  /* No padding, children position themselves with margins from the inner border. */
  z-index: 2;
}

/* Inner-border inset (must match the ::after rule below) */
.card__face--front .card__face-inner::after {
  content: "";
  position: absolute; inset: 14px;
  border-radius: 12px;
  border: 1px solid rgba(127,220,167,0.22);
  pointer-events: none;
}
.card--promo .card__face--front .card__face-inner::after {
  border-color: rgba(229,182,74,0.32);
}

/* Corner indices: rank stacked over suit, like a real playing card */
.cfront__index {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  line-height: 1;
  font-family: var(--font-serif);
  color: var(--mint);
  z-index: 3;
}
.cfront__index--tl { top: 22px; left: 22px; }
.cfront__index--br { bottom: 22px; right: 22px; transform: rotate(180deg); }
.cfront__index__rank {
  font: 500 18px/1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--mint);
  margin-bottom: 2px;
}
.cfront__index__suit {
  font: 400 17px/1 var(--font-serif);
  font-style: italic;
  color: var(--amber);
}
.card--promo .cfront__index__rank { color: var(--amber); }
.card--promo .cfront__index__suit { color: var(--amber); }

/* Wordmark, small stamp top-right */
.cfront__wordmark {
  position: absolute;
  top: 24px; right: 22px;
  height: 14px;
  width: auto;
  display: block;
  z-index: 3;
  /* Brighten the green wordmark toward mint on dark */
  filter: brightness(1.25) saturate(0.85);
  opacity: 0.85;
}
.card--promo .cfront__wordmark {
  filter: brightness(1.0) sepia(0.55) hue-rotate(-12deg) saturate(2);
}

/* Center area: large suit pip + kicker + headline */
.cfront__center {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  margin-inline: auto;
  transform: translateY(-54%);
  width: calc(100% - 56px);
  max-width: 280px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  z-index: 2;
}
.cfront__pip {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  color: var(--amber);
  text-shadow: 0 0 22px rgba(229,182,74,0.35);
}
.card--promo .cfront__pip { color: var(--amber); text-shadow: 0 0 26px rgba(229,182,74,0.5); }
.cfront__kicker {
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0;
}
.card--promo .cfront__kicker { color: var(--amber); }
.cfront__h {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--paper);
  text-wrap: balance;
  max-width: 18ch;
  margin: 0 auto;
}
.cfront__h em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--mint);
}
.card--promo .cfront__h em { color: var(--amber); }

/* "Tap for the full story" affordance, only visible inside the chosen card */
.cfront__tap {
  position: absolute;
  bottom: 24px;
  /* Use inset+margin auto instead of left:50% + translateX(-50%), the latter
     gets clobbered by editor-mode wrappers and animation keyframes. */
  left: 0; right: 0;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 36px);
  display: none;
  align-items: center; gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(127,220,167,0.16);
  border: 1px solid rgba(127,220,167,0.45);
  color: var(--mint);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 3;
}
.cfront__tap svg { width: 12px; height: 12px; }
.card--chosen .cfront__tap { display: inline-flex; animation: cfront-tap-pulse 1.6s ease-in-out infinite; }
@keyframes cfront-tap-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.card--promo .cfront__tap {
  background: rgba(229,182,74,0.2);
  border-color: rgba(229,182,74,0.55);
  color: var(--amber);
}

/* Promo card variant, ribbon */
.card--promo .cfront__ribbon {
  position: absolute;
  top: 16px; right: -34px;
  transform: rotate(34deg);
  background: var(--amber);
  color: #1c1408;
  font: 600 9px/1 var(--font-mono);
  letter-spacing: 0.22em;
  padding: 5px 36px;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(229,182,74,0.45);
  z-index: 3;
}

/* Deck stack positioning (intro state) */
.deck--stack .card {
  transform: translateY(calc(var(--i) * 1.5px)) translateX(calc(var(--i) * 0.8px)) rotate(calc((var(--i) - 4) * 0.6deg));
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.deck--stack .card:nth-child(1) {
  animation: idle-breathe 5s ease-in-out infinite;
}
@keyframes idle-breathe {
  0%, 100% { box-shadow: 0 22px 50px rgba(0,0,0,0.5); }
  50% { filter: drop-shadow(0 0 18px rgba(127,220,167,0.25)); }
}

/* Shuffle, synchronized fan that sways, with cards taking turns to peek their front */
.deck--shuffle {
  animation: deck-sway 4.6s ease-in-out infinite;
}
@keyframes deck-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg);  }
}

.deck--shuffle .card {
  /* Resting fan position is in --tx / --ty / --rot (set per-card via inline style).
     The keyframe applies a peek motion ON TOP of that position. */
  animation: card-peek 2.8s cubic-bezier(0.6, 0, 0.4, 1) var(--peek-delay) infinite;
  transition: none;
  z-index: var(--i);
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
}
@keyframes card-peek {
  0%, 8%, 64%, 100% {
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) translateZ(0) rotateY(0deg) scale(1);
    filter: drop-shadow(0 18px 30px rgba(0,0,0,0.4));
  }
  28%, 46% {
    transform:
      translate(var(--tx), calc(var(--ty) - 56px))
      rotate(calc(var(--rot) * 0.4))
      translateZ(80px)
      rotateY(180deg)
      scale(1.06);
    filter: drop-shadow(0 32px 50px rgba(0,0,0,0.55)) drop-shadow(0 0 18px rgba(127,220,167,0.25));
  }
}

/* When stopped + revealing, chosen card flies center, others sink back */
.deck--reveal .card {
  animation: none;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease, filter 500ms ease;
}
.deck--reveal .card:not(.card--chosen) {
  transform: translateY(calc(var(--i) * 2px)) translateX(calc(var(--i) * 1px)) rotate(calc((var(--i) - 3) * 1.2deg)) translateZ(calc(var(--i) * -6px)) scale(0.86);
  opacity: 0.32;
}
.deck--reveal .card--chosen {
  /* Modest lift, bigger growth was crashing the card into the CTA bar on shorter viewports.
     Perspective + translateZ already gives visual emphasis without a hard scale boost. */
  transform: translateY(-6px) translateZ(50px) rotateY(180deg) scale(1.03);
  z-index: 100;
}
/* Belt + suspenders #1: hide back face entirely on the flipped chosen card - 
   removed from layout, can't possibly bleed through. */
.deck--reveal .card--chosen .card__face--back {
  display: none;
}
/* Belt + suspenders #2: glow on the visible FRONT face via box-shadow on its inner.
   We deliberately do NOT use `filter: drop-shadow` on the card itself, because
   that creates a flattening context that breaks `backface-visibility: hidden`
   on some browsers (iPad Safari especially). */
.deck--reveal .card--chosen .card__face--front {
  animation: chosen-front-glow 2.2s ease-in-out infinite;
}
@keyframes chosen-front-glow {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(127,220,167,0.16) inset,
      0 0 0 1.5px rgba(20,30,25,0.9),
      0 22px 50px rgba(0,0,0,0.6),
      0 8px 18px rgba(0,0,0,0.4);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(127,220,167,0.16) inset,
      0 0 0 1.5px rgba(20,30,25,0.9),
      0 22px 50px rgba(0,0,0,0.6),
      0 8px 18px rgba(0,0,0,0.4),
      0 0 30px rgba(127,220,167,0.55);
  }
}
.deck--reveal .card--chosen.card--promo .card__face--front {
  animation: chosen-front-glow-promo 1.8s ease-in-out infinite;
}
@keyframes chosen-front-glow-promo {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(229,182,74,0.2) inset,
      0 0 0 1.5px rgba(20,30,25,0.9),
      0 22px 50px rgba(0,0,0,0.6),
      0 8px 18px rgba(0,0,0,0.4);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(229,182,74,0.2) inset,
      0 0 0 1.5px rgba(20,30,25,0.9),
      0 22px 50px rgba(0,0,0,0.6),
      0 8px 18px rgba(0,0,0,0.4),
      0 0 34px rgba(229,182,74,0.6);
  }
}
/* Old filter-based chosen-glow keyframes intentionally removed - 
   `filter` on a 3D-transformed card creates a flattening context that
   defeats backface-visibility. We now glow via box-shadow on the front face. */
/* Promo glow handled by chosen-front-glow-promo on the front face above */

/* "Tap for the full story" affordance, only visible inside the chosen card */
.cfront__tap {
  display: none;
  margin-top: 14px;
  align-items: center; justify-content: space-between;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(127,220,167,0.14);
  border: 1px solid rgba(127,220,167,0.4);
  color: var(--mint);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cfront__tap svg { width: 12px; height: 12px; }
.card--chosen .cfront__tap { display: flex; animation: cfront-tap-pulse 1.6s ease-in-out infinite; }
@keyframes cfront-tap-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.card--promo .cfront__tap {
  background: rgba(229,182,74,0.18);
  border-color: rgba(229,182,74,0.5);
  color: var(--amber);
}

/* ============================================================
   Tap-hint pulse (intro)
   ============================================================ */
.tap-ring {
  position: absolute;
  inset: -18px;
  border: 1px solid rgba(127,220,167,0.4);
  border-radius: 24px;
  pointer-events: none;
  animation: ring 2.4s ease-out infinite;
}
@keyframes ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* ============================================================
   CTAs
   ============================================================ */
.cta-bar {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(max(env(safe-area-inset-bottom), 18px) + 36px);
  display: flex; justify-content: center;
  z-index: 25;
  pointer-events: none;
}
.cta {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 12px;
  height: 60px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font: 500 16px/1 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
  box-shadow:
    0 14px 40px rgba(0,0,0,0.5),
    0 0 0 1px rgba(20,30,25,0.2);
  transition: transform 200ms cubic-bezier(0.22,1,0.36,1), box-shadow 200ms ease, background 160ms ease;
  font-family: var(--font-sans);
}
.cta:active { transform: scale(0.96); }
.cta:hover { background: var(--paper-2); }
.cta--green {
  background: var(--green-bright);
  color: var(--ink);
  box-shadow: 0 14px 40px rgba(68,186,130,0.45), 0 0 0 1px rgba(20,30,25,0.2);
}
.cta--green:hover { background: var(--mint); }
.cta--amber {
  background: var(--amber);
  color: #2C231A;
  box-shadow: 0 14px 40px rgba(229,182,74,0.45), 0 0 0 1px rgba(20,30,25,0.2);
}
.cta--lg { height: 64px; padding: 0 32px; font-size: 17px; }
.cta--ghost {
  background: transparent;
  color: var(--paper);
  box-shadow: 0 0 0 1px rgba(246,244,238,0.3);
}
.cta--ghost:hover { background: rgba(246,244,238,0.08); }
.cta__arrow {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
}
.cta--green .cta__arrow,
.cta--amber .cta__arrow { background: var(--ink); color: var(--paper); }
.cta__arrow svg { width: 14px; height: 14px; }
.cta__sparkle {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
}
.cta__sparkle svg { width: 22px; height: 22px; }

.cta-stack {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}

.tap-instruction {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(max(env(safe-area-inset-bottom), 18px) + 110px);
  text-align: center;
  font-family: var(--font-script);
  font-size: 26px;
  color: var(--mint);
  z-index: 24;
  pointer-events: none;
  animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(-4px); opacity: 1; }
}
.tap-instruction .arrow {
  display: block;
  font-size: 30px;
  margin-top: 2px;
}

/* ============================================================
   Expanded card (fullscreen value-prop section)
   ============================================================ */
.expanded {
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: expand-in 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes expand-in {
  0%   { clip-path: circle(0% at 50% 50%); opacity: 0.6; }
  100% { clip-path: circle(150% at 50% 50%); opacity: 1; }
}
.expanded__inner {
  min-height: 100%;
  display: flex; flex-direction: column;
  padding: max(env(safe-area-inset-top), 24px) 28px max(env(safe-area-inset-bottom), 28px);
}
.expanded__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
}
.expanded__brand {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 14px/1 var(--font-sans);
  color: var(--ink);
}
.expanded__wordmark {
  height: 26px;
  width: auto;
  display: block;
}
.expanded__close {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(20,30,25,0.06);
  border: 1px solid var(--hair);
  color: var(--ink);
  cursor: pointer;
}
.expanded__close:hover { background: rgba(20,30,25,0.1); }
.expanded__close svg { width: 16px; height: 16px; }

.expanded__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--green-deep);
}
.expanded__kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 4px rgba(47,143,94,0.14);
}
.expanded--promo .expanded__kicker { color: var(--amber-deep); }
.expanded--promo .expanded__kicker::before {
  background: var(--amber); box-shadow: 0 0 0 4px rgba(229,182,74,0.18);
}

.expanded__h {
  margin: 22px 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(40px, 11vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.038em;
  color: var(--ink);
  text-wrap: balance;
}
.expanded__h em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--green-deep);
}
.expanded--promo .expanded__h em { color: var(--amber-deep); }

.expanded__sub {
  margin-top: 22px;
  font-size: clamp(16px, 4vw, 19px);
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 50ch;
  text-wrap: pretty;
}
.expanded__sub b { color: var(--ink); font-weight: 500; }

.expanded__points {
  margin: 32px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 14px;
}
.expanded__points li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.expanded__points li::before {
  content: "·";
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--green-deep);
  text-align: center;
}
.expanded--promo .expanded__points li::before { color: var(--amber-deep); }

.expanded__promo-card {
  margin-top: 32px;
  background: linear-gradient(180deg, #FFF6E0 0%, #F5E9CB 100%);
  border: 1.5px solid rgba(138,101,19,0.3);
  border-radius: 18px;
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
}
.expanded__promo-card::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(138,101,19,0.03) 0 2px, transparent 2px 6px);
  pointer-events: none;
}
.expanded__promo-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 10px;
}
.expanded__promo-tag::before {
  content: "★";
  font-size: 14px;
  line-height: 1;
}
.expanded__promo-value {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: #2C231A;
}
.expanded__promo-fine {
  margin-top: 8px;
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: 0.04em;
  color: #6A5728;
}

.expanded__footer {
  margin-top: auto;
  padding-top: 36px;
  display: flex; flex-direction: column; gap: 12px;
}

.expanded__cta {
  display: inline-flex; align-items: center; justify-content: space-between;
  width: 100%;
  height: 60px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font: 500 16px/1 var(--font-sans);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(20,30,25,0.18);
  transition: transform 160ms ease, background 160ms ease;
  font-family: var(--font-sans);
}
.expanded__cta:active { transform: scale(0.98); }
.expanded__cta:hover { background: var(--green-deep); }
.expanded__cta--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair-2);
}
.expanded__cta--ghost:hover { background: rgba(20,30,25,0.04); color: var(--ink); }
.expanded__cta--amber {
  background: var(--amber-deep);
  color: #FFF6E0;
  box-shadow: 0 14px 40px rgba(138,101,19,0.32);
}
.expanded__cta--amber:hover { background: #6E4F0E; }
.expanded__cta .arrow {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
}
.expanded__cta--ghost .arrow { background: rgba(20,30,25,0.08); }
.expanded__cta .arrow svg { width: 14px; height: 14px; }

/* ============================================================
   Contact sheet
   ============================================================ */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 300;
  animation: fade-in 240ms ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 310;
  background: var(--paper);
  color: var(--ink);
  border-radius: 28px 28px 0 0;
  padding: 14px 24px max(env(safe-area-inset-bottom), 24px);
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: slide-up 360ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.4);
}
@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (min-width: 720px) {
  .sheet {
    left: 50%;
    right: auto;
    bottom: 50%;
    transform: translate(-50%, 50%);
    width: 480px;
    max-height: 86dvh;
    border-radius: 22px;
    animation: pop-in 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes pop-in {
    from { transform: translate(-50%, 60%); opacity: 0; }
    to   { transform: translate(-50%, 50%); opacity: 1; }
  }
}

.sheet__handle {
  width: 44px; height: 4px;
  margin: 6px auto 16px;
  background: var(--hair-2);
  border-radius: 999px;
}
.sheet__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.sheet__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--green-deep);
}
.sheet__kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 4px rgba(47,143,94,0.14);
}
.sheet--promo .sheet__kicker { color: var(--amber-deep); }
.sheet--promo .sheet__kicker::before {
  background: var(--amber); box-shadow: 0 0 0 4px rgba(229,182,74,0.18);
}
.sheet__close {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(20,30,25,0.06);
  border: 1px solid var(--hair);
  color: var(--ink);
  cursor: pointer;
}
.sheet__close svg { width: 14px; height: 14px; }
.sheet__h {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.sheet__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--green-deep); }
.sheet--promo .sheet__h em { color: var(--amber-deep); }
.sheet__sub {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}

.sheet__claim {
  margin: 16px 0 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--amber-soft);
  border: 1px solid rgba(229,182,74,0.32);
  display: flex; align-items: center; gap: 12px;
}
.sheet__claim__star {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--amber-deep);
  color: #FFF6E0;
  display: grid; place-items: center;
  font-size: 16px;
  flex: none;
}
.sheet__claim__text {
  font-size: 14px;
  line-height: 1.3;
  color: #2C231A;
}
.sheet__claim__text b { font-weight: 600; }

.sheet__form {
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.field {
  display: flex; flex-direction: column; gap: 6px;
}
.field label {
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.field input {
  font: 400 15px/1.4 var(--font-sans);
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  padding: 13px 14px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  font-family: var(--font-sans);
}
.field input:focus {
  border-color: var(--green-deep);
  box-shadow: 0 0 0 4px rgba(47,143,94,0.12);
}
.field--row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.sheet__submit {
  margin-top: 6px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 500 15.5px/1 var(--font-sans);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans);
  transition: background 160ms ease;
}
.sheet__submit:hover { background: var(--green-deep); }
.sheet--promo .sheet__submit { background: var(--amber-deep); color: #FFF6E0; }
.sheet--promo .sheet__submit:hover { background: #6E4F0E; }
.sheet__fine {
  margin-top: 8px;
  font: 500 10px/1.5 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  text-align: center;
}

/* Confirmation */
.sheet__success {
  text-align: center;
  padding: 8px 0 12px;
}
.sheet__success__seal {
  margin: 8px auto 18px;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--green-soft);
  display: grid; place-items: center;
  position: relative;
}
.sheet__success__seal::before {
  content: ""; position: absolute; inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(47,143,94,0.4);
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sheet__success__seal svg { width: 32px; height: 32px; color: var(--green-deep); }
.sheet--promo .sheet__success__seal { background: var(--amber-soft); }
.sheet--promo .sheet__success__seal::before { border-color: rgba(229,182,74,0.5); }
.sheet--promo .sheet__success__seal svg { color: var(--amber-deep); }

.sheet__signature {
  font-family: var(--font-script);
  font-size: 38px;
  color: var(--green-deep);
  line-height: 1;
  margin-top: 8px;
}
.sheet--promo .sheet__signature { color: var(--amber-deep); }

/* ============================================================
   Responsive tweaks
   ============================================================ */
@media (max-width: 380px) {
  .title-block { top: 9vh; }
  .deck { width: 200px; height: 300px; }
  .cfront { padding: 22px 18px; }
  .cfront__h { font-size: 23px; }
  .cfront__sub { font-size: 12.5px; }
  .cback__monogram { font-size: 38px; }
}

@media (min-width: 720px) {
  .cfront__h { font-size: 22px; }
  .cfront__pip { font-size: 76px; }
  .cback__monogram { font-size: 52px; }
}

@media (min-width: 1024px) {
  .title-block { top: 10vh; }
  .cfront__h { font-size: 24px; }
  .cfront__pip { font-size: 84px; }
  .expanded__inner { max-width: 720px; margin: 0 auto; padding-left: 0; padding-right: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sparkle, .deck--stack .card:nth-child(1), .tap-instruction, .tap-ring,
  .deck--shuffle .card, .deck--reveal .card--chosen {
    animation: none !important;
  }
}

/* Short-viewport / landscape safety, keep the chosen card from colliding with chrome */
@media (max-height: 720px) {
  .title-block { top: 4vh; }
  .title-block--compact .title-block__h { font-size: clamp(20px, 4.4vw, 28px); }
  .title-block--reveal .title-block__h { font-size: clamp(22px, 5vw, 34px); }
  .title-block--reveal .title-block__sub { display: none; }
  .title-block__sub { font-size: clamp(11px, 2.6vw, 13px); margin-top: 4px; }
  .deck-zone--lifted { top: 50%; }
  .deck-zone--reveal { top: 50%; }
  .cta-bar { bottom: max(env(safe-area-inset-bottom), 10px); }
  .tap-instruction { bottom: calc(max(env(safe-area-inset-bottom), 10px) + 78px); font-size: 18px; }
  .cta--lg { height: 50px; padding: 0 22px; font-size: 14px; }
  .cta { height: 44px; padding: 0 18px; font-size: 13px; }
  .cta-stack { gap: 6px; }
  .deck--reveal .card--chosen {
    transform: translateY(-3px) translateZ(35px) rotateY(180deg) scale(1.02);
  }
  /* Scale playing-card content down to match the smaller card */
  .cfront__index--tl { top: 14px; left: 14px; }
  .cfront__index--br { bottom: 14px; right: 14px; }
  .cfront__index__rank { font-size: 14px; }
  .cfront__index__suit { font-size: 13px; }
  .cfront__wordmark { top: 14px; right: 14px; height: 11px; }
  .cfront__pip { font-size: 44px; }
  .cfront__kicker { font-size: 8.5px; letter-spacing: 0.22em; }
  .cfront__h { font-size: 14px; max-width: 16ch; }
  .cfront__tap { bottom: 14px; padding: 6px 11px; font-size: 8.5px; }
  .cback__wordmark { width: 56%; max-width: 110px; }
  .cback__label { font-size: 8px; letter-spacing: 0.22em; }
  .cback__seal { width: 36px; height: 36px; margin-top: 4px; }
  .cback__seal svg { width: 18px; height: 18px; }
}

/* Ultra-short viewports (e.g. iPad landscape with chrome), even tighter */
@media (max-height: 600px) {
  .title-block--reveal .title-block__h { font-size: clamp(18px, 4.2vw, 26px); }
  .hud { padding-top: 8px; }
  .hud__wordmark { height: 18px; }
  .cta-bar { bottom: 6px; }
  .cfront__h { font-size: 12.5px; }
  .cfront__pip { font-size: 38px; }
}


/* ---- next block ---- */


/* iOS Safari zooms the page when a focused input's font-size is under 16px,
   which lets the page pan sideways. 16px controls on phones prevent the zoom;
   overflow-x:clip stops sideways panning from decorative elements (clip,
   unlike hidden, creates no scroll container). */
html,body{overflow-x:clip;}
@media (max-width:809px){
  input,select,textarea{font-size:16px !important;}
}