/* Pupwise brand tokens + base. The only source of colour and type; pages add layout on top. */
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}
:root {
  --ink: #1E2340;
  --ink-2: #4A5070;
  --ink-3: #6B7089;
  --line: #D9D3CB;
  --bg: #FFFFFF;
  --sand: #FFF4E8;
  --sand-2: #FBE7CF;
  --cta: #F2581B;
  --cta-press: #D9480F;
  --cta-dim: #F7A27E;
  --sky: #2F5BD8;
  --sky-soft: #E6EDFF;
  --ok: #15803D;
  --warn-1: #FF9A3C;
  --warn-2: #F0443A;
  --sun: #FFC93C;
  --rose: #F6B8C8;
  --radius-option: 14px;
  --radius-card: 20px;
  --gutter: 16px;
  --col: 400px;
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.hl { color: var(--sky); }
.ok { color: var(--ok); }

/* Primary action: full-width pill with arrow, Woofz geometry. */
.btn {
  display: flex; align-items: center; justify-content: center; position: relative;
  width: 100%; height: 50px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--cta); color: #fff; font-size: 20px; font-weight: 700; letter-spacing: .1px;
  box-shadow: 0 6px 16px rgba(242, 88, 27, .28); transition: background .15s, transform .1s;
}
.btn:active { background: var(--cta-press); transform: scale(.985); }
.btn[disabled] { background: var(--cta-dim); box-shadow: none; cursor: default; }
.btn .arrow { position: absolute; right: 22px; width: 22px; height: 22px; }
.link {
  display: block; margin: 14px auto 0; background: none; border: 0; cursor: pointer;
  color: var(--ink-2); font-size: 15px; text-decoration: underline; text-underline-offset: 3px;
}
