/*
 * Shared patterns — reset, typography defaults, and common building blocks.
 * Aligned to ios.html's shipping look (IBM Plex, breathing pill grid,
 * version chip, .cta button, eyebrow / subtitle / fine text roles).
 *
 * Every page includes design.css + base.css in that order, then adds page-
 * specific styles as an inline <style> block.
 */

/* ----- reset ----- */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

/* The gradient lives on <html> so it paints the whole canvas. On <body> it
   only covers body's box, and the flat slate below it shows as a seam.
   The background-color matches the gradient's outer stop, so anything past
   the gradient box (overscroll, short pages) continues it seamlessly. */
html {
  min-height: 100%;
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 25%,
      color-mix(in oklab, var(--slate), white 12%) 0%,
      var(--slate) 55%,
      color-mix(in oklab, var(--slate), black 14%) 100%
    ) no-repeat,
    color-mix(in oklab, var(--slate), black 14%);
}

html, body {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 56px var(--gutter) var(--safe-bottom);
  position: relative;
  overflow-x: hidden;
}

/* Optional WebGL / shader slot — pages can drop a <canvas id="bg-fx">
   into <body> for a decorative background layer without touching layout. */
#bg-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

main {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  width: 100%;
  text-align: center;
}

a { color: inherit; }
::selection { background: var(--coral); color: #fff; }
:focus-visible { outline: 2px solid var(--air); outline-offset: 3px; border-radius: var(--r-sm); }

/* ----- eyebrow (top-of-page mono uppercase line, also for section labels) ----- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 16px;
}
.eyebrow a {
  color: var(--air);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease);
}
.eyebrow a:hover { border-color: var(--air); }

/* ----- hero ----- */
h1 {
  font-size: clamp(var(--fs-h1-min), 10vw, var(--fs-h1-max));
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 10px;
}
.subtitle {
  font-size: var(--fs-subtitle);
  color: var(--ink-soft);
  font-weight: 400;
  margin-bottom: 28px;
}
.version {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-version);
  font-weight: 500;
  color: #2A3942;
  background: var(--air);
  padding: 4px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 36px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Four-pill glyph — 240×240 grid, mirrors the app icon. Each pill breathes
   on a 6s cycle, staggered a quarter-phase apart so the group never pulses
   in unison. Honours prefers-reduced-motion (see the guard at the bottom). */
.pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 240px;
  margin: 42px auto 26px;
  height: 240px;
}
.pill {
  border-radius: var(--r-pill);
  transform-origin: center;
  animation: breathe var(--dur-breathe) ease-in-out infinite;
  will-change: transform;
}
.pill.earth { background: var(--earth); animation-delay: 0s; }
.pill.air   { background: var(--air);   animation-delay: -1.5s; }
.pill.fire  { background: var(--fire);  animation-delay: -3s; }
.pill.water { background: var(--water); animation-delay: -4.5s; }

@keyframes breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.04); }
}

/* ----- CTA button (fire-coloured pill with arrow, hover-lift) ----- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 40px;
  background: var(--fire);
  color: #fff;
  border-radius: var(--r-md);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.005em;
  box-shadow: var(--shadow-cta);
  transition:
    transform var(--dur-fast) ease,
    box-shadow var(--dur-med) ease,
    background-color 0.2s ease;
}
.cta:hover {
  transform: translateY(-2px);
  background: #EF8585;
  box-shadow: var(--shadow-cta-hover);
}
.cta:active { transform: translateY(0); }
.cta::after {
  content: "→";
  font-weight: 500;
  opacity: 0.85;
}
.cta[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ----- Numbered install / step list ----- */
.steps {
  margin: 64px auto 0;
  max-width: 360px;
  text-align: left;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  counter-reset: step;
  list-style: none;
}
.steps li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--ink-hair);
}
.steps li:first-child { border-top: none; }
.steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  color: var(--fire);
  font-weight: 500;
  flex-shrink: 0;
}

/* ----- forms ----- */
form { margin-top: 26px; text-align: left; }
.field { margin-bottom: 20px; }
label {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.req { color: var(--coral); }

input[type=text], input[type=email], input[type=password], input[type=url], select, textarea {
  width: 100%;
  background: var(--surface-inset);
  border: 1px solid var(--ink-hair);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-body);
  padding: 13px 14px;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--air);
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

/* checkbox row (opt-ins, etc.) */
.check {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--surface-inset);
  border: 1px solid var(--ink-hair);
  border-radius: var(--r-md);
  padding: 14px 15px;
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box {
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--ink-faint);
  flex: 0 0 auto; display: grid; place-items: center;
}
.check.on { border-color: var(--air); background: rgba(164, 208, 224, .12); }
.check.on .box { background: var(--air); border-color: var(--air); }

/* Submit — used on signup forms; a wide primary button under the fields. */
.submit {
  width: 100%;
  background: var(--fire);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.005em;
  padding: 15px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-cta);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-med) ease, background-color 0.2s ease;
}
.submit:hover {
  background: #EF8585;
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-hover);
}
.submit:active { transform: translateY(0); }
.submit[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ----- rules block (sweepstakes / contest fine print) ----- */
.rules {
  margin-top: 48px;
  padding: 22px;
  text-align: left;
  background: var(--surface-inset);
  border: 1px solid var(--ink-hair);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.rules h3 {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.rules p + p { margin-top: 10px; }

/* ----- footer fine print ----- */
.fine {
  margin-top: 56px;
  font-family: var(--mono);
  font-size: var(--fs-fine);
  color: var(--ink-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.fine a {
  color: var(--air);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease);
}
.fine a:hover { border-color: var(--air); }

/* ----- motion guard -----
   Kill the decorative pill animation for anyone who asked the OS for
   reduced motion. Everything else here is hover/focus transition only. */
@media (prefers-reduced-motion: reduce) {
  .pill { animation: none; }
}