/* Swagpay landing: a print shop's proof sheet. Tokens match the Swagpay overview page.
   One loud thing: the headline printed slightly off-register (magenta and USDC-blue plates).
   Everything else is quiet sheets with crop marks. */
:root {
  --paper: #f5f6f9;
  --sheet: #ffffff;
  --ink: #171a38;
  --ink-2: #4a4f72;
  --rule: #d9dcea;
  --mark: #9aa0c0;
  --magenta: #d7266f;
  --magenta-soft: #fbe3ee;
  --usdc: #2466c4;
  --usdc-soft: #e2ecfa;
  --owner: #b86a00;
  --owner-soft: #fbeedb;
  --plate-m: rgba(215, 38, 111, 0.55);
  --plate-c: rgba(36, 102, 196, 0.45);
  --font-display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1124; --sheet: #171a33; --ink: #eceef9; --ink-2: #a9aecb; --rule: #2c3052; --mark: #555b85;
    --magenta: #ff5b9b; --magenta-soft: #3a1830; --usdc: #6ea2ff; --usdc-soft: #182a4d; --owner: #f0a64a; --owner-soft: #3a2a14;
    --plate-m: rgba(255, 91, 155, 0.5); --plate-c: rgba(110, 162, 255, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1124; --sheet: #171a33; --ink: #eceef9; --ink-2: #a9aecb; --rule: #2c3052; --mark: #555b85;
  --magenta: #ff5b9b; --magenta-soft: #3a1830; --usdc: #6ea2ff; --usdc-soft: #182a4d; --owner: #f0a64a; --owner-soft: #3a2a14;
  --plate-m: rgba(255, 91, 155, 0.5); --plate-c: rgba(110, 162, 255, 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
}
h1 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
p { margin: 0; max-width: 60ch; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }

/* One screen: brand bar on top, the proof sheet filling the rest */
.screen {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  padding: 0 16px 16px;
  max-width: 1280px;
  margin: 0 auto;
}
.top { display: flex; align-items: center; padding-top: 18px; }
.brand { display: inline-flex; line-height: 0; }
.brand img { width: 186px; height: auto; }
/* The logo follows the colour mode, whether set by the system or by data-theme */
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }

/* The sheet, with crop marks in its four corners */
.sheet {
  --m: var(--mark);
  background:
    linear-gradient(var(--m), var(--m)) left 10px top 10px / 16px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left 10px top 10px / 1px 16px no-repeat,
    linear-gradient(var(--m), var(--m)) right 10px top 10px / 16px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right 10px top 10px / 1px 16px no-repeat,
    linear-gradient(var(--m), var(--m)) left 10px bottom 10px / 16px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left 10px bottom 10px / 1px 16px no-repeat,
    linear-gradient(var(--m), var(--m)) right 10px bottom 10px / 16px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right 10px bottom 10px / 1px 16px no-repeat,
    var(--sheet);
  border: 1px solid var(--rule);
  min-width: 0;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 5vw, 64px) clamp(26px, 5vw, 64px) clamp(26px, 3vw, 40px);
}
.hero-copy { display: grid; gap: clamp(18px, 2.4vh, 28px); min-width: 0; }

/* The one loud thing: the headline printed with the colour plates slightly off-register */
.misreg {
  font-size: clamp(3rem, min(8.4vw, 12vh), 7.2rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-shadow: -0.045em 0.02em 0 var(--plate-m), 0.04em -0.015em 0 var(--plate-c);
}
.lede { font-size: clamp(1.02rem, 1.3vw, 1.2rem); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.btn {
  display: inline-block;
  background: var(--magenta);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 15px 24px;
  border-radius: 4px;
  font-size: 1.05rem;
  line-height: 1.2;
}
.btn:hover { filter: brightness(1.08); }
.cta-note { font-size: 0.92rem; color: var(--ink-2); max-width: 32ch; }

/* The mascot: the agent, on a light sticker-pink panel in both colour modes
   (its ink outline would vanish on the dark sheet) */
.mascot {
  margin: 0;
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 0;
  padding: clamp(56px, 7vh, 88px) 20px 20px;
  background: #fbe3ee;
  border-radius: 12px;
}
.mascot-art { width: min(100%, 360px, 46vh); height: auto; display: block; overflow: visible; }
.mascot-art .shadow { fill: #171a38; opacity: 0.14; }
.mascot-art g { transform-box: fill-box; }
.mascot-art .hop { transform-origin: 50% 100%; }
.mascot-art .shadow { transform-box: fill-box; transform-origin: center; }
.mascot-art .face { transform-origin: 30% 60%; }
.mascot-art .eye { transform-origin: center; }

/* The mascot's motion: one entrance (it hops as its speech bubble pops up), then a quiet idle,
   floating over its shadow and blinking now and then. Nothing moves when motion is turned off. */
@media (prefers-reduced-motion: no-preference) {
  .bubble { transform-origin: 0 100%; animation: bubble-in 0.42s cubic-bezier(0.2, 1.4, 0.5, 1) 0.75s both; }
  .mascot-art .hop { animation: hop 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 0.3s both; }
  .mascot-art .float { animation: float 5.6s ease-in-out 1.2s infinite; }
  .mascot-art .shadow { animation: shadow 5.6s ease-in-out 1.2s infinite; }
  .mascot-art .eye { animation: blink 6.2s ease-in-out 2s infinite; }
  .mascot-art .face { animation: tilt 11s ease-in-out 3s infinite; }
}
@keyframes bubble-in { from { opacity: 0; transform: scale(0.6) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hop {
  0% { transform: translateY(0) scale(1, 1); }
  25% { transform: translateY(0) scale(1.06, 0.92); }
  55% { transform: translateY(-14px) scale(0.97, 1.04); }
  80% { transform: translateY(0) scale(1.03, 0.97); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shadow { 0%, 100% { transform: scaleX(1); opacity: 0.14; } 50% { transform: scaleX(0.88); opacity: 0.09; } }
/* A single blink, and a double blink later in the cycle */
@keyframes blink {
  0%, 40%, 44%, 86%, 89.5%, 93%, 100% { transform: scaleY(1); }
  42%, 87.8%, 91.2% { transform: scaleY(0.1); }
}
/* Now and then the face tips a little, as if listening */
@keyframes tilt { 0%, 70%, 100% { transform: rotate(0); } 76%, 88% { transform: rotate(-4deg); } }
.bubble {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  max-width: 30ch;
  margin: 0;
  padding: 10px 14px;
  background: #ffffff;
  color: #171a38;
  border: 1.5px solid #171a38;
  border-radius: 12px 12px 12px 3px;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* The printer's colour bar along the bottom of the sheet */
.colorbar { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, 1fr); height: 12px; border: 1px solid var(--rule); }
.colorbar i:nth-child(1) { background: var(--ink); }
.colorbar i:nth-child(2) { background: var(--magenta); }
.colorbar i:nth-child(3) { background: var(--usdc); }
.colorbar i:nth-child(4) { background: var(--owner); }
.colorbar i:nth-child(5) { background: var(--ink-2); }
.colorbar i:nth-child(6) { background: var(--magenta-soft); }
.colorbar i:nth-child(7) { background: var(--usdc-soft); }
.colorbar i:nth-child(8) { background: var(--owner-soft); }

/* Narrow screens: one column; the mascot shrinks under the copy */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto; align-content: center; }
  .mascot { max-width: 520px; }
}
/* Phones: headline and button first, a small mascot without its speech bubble */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .mascot { padding: 16px; justify-self: center; width: 100%; }
  .mascot-art { width: 150px; }
  .bubble { display: none; }
}