/* BirdChase site styles. One file, no build step.
   Look follows the app (bird-app/src/constants/theme.ts): navy outlines, chunky slab
   buttons, Fredoka everywhere, bright daytime sky. */

/* ---------- Fonts (self-hosted, SIL OFL: /assets/fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/Fredoka-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/Fredoka-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/Fredoka-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  --ink: #1E293B;
  --ink-2: #475569;          /* secondary text, AA on every light background here */
  --ink-soft: #64748B;
  --ink-faint: #94A3B8;
  --sky: #E3F3FF;
  --sky-2: #EAF6FF;
  --white: #FFFFFF;
  --border: #E5E0D0;
  --paper: #FFF8EA;
  --meadow: #EEF8E6;

  --green: #3DD16A;
  --green-d: #159447;
  --blue: #3AB4F2;
  --blue-d: #1279B8;
  --link: #0E6AA3;
  --gold: #FFC93C;
  --gold-d: #E09A00;
  --red: #FF6161;
  --red-d: #D63C3C;

  --r-common: #9CA3AF;     --r-common-d: #6B7280;
  --r-uncommon: #4ADE80;   --r-uncommon-d: #16A34A;
  --r-rare: #60A5FA;       --r-rare-d: #2563EB;
  --r-epic: #C084FC;       --r-epic-d: #9333EA;
  --r-legendary: #FCD34D;  --r-legendary-d: #EA580C;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --pill: 999px;
  --line: 3px solid var(--ink);
  --lift: 0 6px 0 rgba(30, 41, 59, 0.14);

  --max: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 64px;
  --sheet: clamp(24px, 4vw, 48px);           /* rounded top of each section, and how far it overlaps */
  --pad: clamp(56px, 8vw, 104px);           /* vertical section padding */

  --font: "Fredoka", "Nunito", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (min-width: 860px) {
  :root { --header-h: 72px; }
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sky);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

p { margin: 0; }
p, li { text-wrap: pretty; }

a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

strong { font-weight: 700; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-dark :focus-visible { outline-color: var(--gold); }

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

main:focus { outline: none; }

/* ---------- Utilities ---------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 10px 18px;
  font-weight: 600;
  color: var(--ink);
  background: var(--gold);
  border: var(--line);
  border-radius: var(--pill);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stars { display: inline-flex; gap: 1px; }
.stars svg {
  width: 15px;
  height: 15px;
  fill: #FFD54A;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

/* ---------- Buttons: a colored face over a darker slab ---------- */
.btn {
  --face: var(--green);
  --slab: var(--green-d);
  --label: var(--ink);
  position: relative;
  display: inline-block;
  padding: 0 0 6px;
  margin: 0;
  border: 0;
  border-radius: var(--pill);
  background: none;
  color: var(--label);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 6px 0 0;
  border: var(--line);
  border-radius: inherit;
  background: var(--slab);
  box-shadow: 0 8px 14px -6px rgba(30, 41, 59, 0.35);
}
.btn__face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 52px;
  padding: 0.75em 1.5em;
  border: var(--line);
  border-radius: inherit;
  background: var(--face);
  overflow: hidden;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.09s ease;
}
/* Gloss across the top, a soft shade along the bottom (the app's ButtonGloss). */
.btn__face::before,
.btn__face::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.btn__face::before {
  top: 2px;
  left: 8%;
  right: 8%;
  height: 46%;
  border-radius: var(--pill);
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08));
}
.btn__face::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
}
.btn__face > * { position: relative; }
.btn .icon { width: 1.2em; height: 1.2em; stroke-width: 2.6; }

.btn:hover { color: var(--label); }
.btn:hover .btn__face { transform: translateY(-2px); }
.btn:active .btn__face { transform: translateY(6px); }
.btn:focus-visible { outline-offset: 4px; border-radius: var(--pill); }

.btn--blue { --face: var(--blue); --slab: var(--blue-d); }
.btn--gold { --face: var(--gold); --slab: var(--gold-d); }
.btn--lg { font-size: 1.1875rem; }
.btn--lg .btn__face { min-height: 60px; padding: 0.8em 1.75em; }
.btn--sm { font-size: 0.9375rem; padding-bottom: 4px; }
.btn--sm::before { inset: 4px 0 0; }
.btn--sm .btn__face { min-height: 40px; padding: 0.45em 1.1em; }
.btn--sm:active .btn__face { transform: translateY(4px); }
.btn--block { display: block; width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] { cursor: progress; }
.btn[disabled] .btn__face { filter: saturate(0.6); }

.text-link {
  font-weight: 600;
  color: var(--ink);
  text-decoration-color: var(--gold-d);
}

/* ---------- Header + nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 3px solid var(--border);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
}
.site-header.is-scrolled { box-shadow: 0 6px 18px -10px rgba(30, 41, 59, 0.35); }

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--ink); }
.brand__mark {
  width: 44px;
  height: 44px;
  border: var(--line);
  border-radius: 50%;
  background: linear-gradient(160deg, #FFE08A, var(--gold));
  object-fit: cover;
}

.site-nav { position: static; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: var(--line);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
}
.nav-toggle .icon { width: 26px; height: 26px; stroke-width: 2.6; }
.nav-toggle .icon--close { display: none; }
.site-nav.is-open .nav-toggle .icon--menu { display: none; }
.site-nav.is-open .nav-toggle .icon--close { display: block; }

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-menu a:not(.btn) {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--pill);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.nav-menu a:not(.btn):hover { background: var(--sky); }
.nav-menu .nav-cta { margin-left: 8px; }

/* Collapsed menu on small screens (only once JS is running; without it the links wrap). */
@media (max-width: 859.98px) {
  .no-js .site-header__bar { flex-wrap: wrap; padding-block: 8px; }
  .no-js .nav-menu { justify-content: center; }
  .no-js .nav-menu .nav-cta { margin-left: 0; }

  .js .nav-toggle { display: inline-flex; }
  .js .nav-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px var(--gutter) 20px;
    background: #FFFFFF;
    border-bottom: 3px solid var(--border);
    box-shadow: 0 18px 24px -18px rgba(30, 41, 59, 0.45);
  }
  .js .site-nav.is-open .nav-menu { display: flex; }
  .js .nav-menu a:not(.btn) { display: block; padding: 12px 14px; font-size: 1.125rem; border-radius: var(--radius-sm); }
  .js .nav-menu .nav-cta { margin: 8px 0 0; }
  .js .nav-menu .nav-cta .btn { display: block; font-size: 1.0625rem; padding-bottom: 6px; }
  .js .nav-menu .nav-cta .btn::before { inset: 6px 0 0; }
  .js .nav-menu .nav-cta .btn__face { min-height: 50px; }
}

/* ---------- Sections stack like rounded sheets ---------- */
.sheet {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--sheet));
  padding: var(--pad) 0 calc(var(--pad) + var(--sheet));
  border-radius: var(--sheet) var(--sheet) 0 0;
  overflow: hidden;
}
.sheet--paper { background: var(--paper); }
.sheet--sky { background: var(--sky); }
.sheet--white { background: #FFFFFF; }
.sheet--meadow { background: var(--meadow); }
.sheet--dots {
  background-color: var(--sky);
  background-image: radial-gradient(rgba(18, 121, 184, 0.12) 1.6px, transparent 1.8px);
  background-size: 22px 22px;
}

.sec-head {
  max-width: 760px;
  margin: 0 auto clamp(32px, 5vw, 56px);
  text-align: center;
}
.sec-head--left { margin-inline: 0; text-align: left; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.95em;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: #FFFFFF;
  border: var(--line);
  border-radius: var(--pill);
  box-shadow: 0 3px 0 var(--ink);
}
.eyebrow .icon { width: 1.15em; height: 1.15em; stroke-width: 2.5; }

.h2 {
  margin: 0.5em 0 0.35em;
  font-size: clamp(2rem, 2.6vw + 1.15rem, 3.25rem);
}
.lead {
  max-width: 62ch;
  margin-inline: auto;
  font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.25rem);
  color: var(--ink-2);
}
.sec-head--left .lead { margin-inline: 0; }

/* A gold marker swash behind a word or two. */
.nowrap { white-space: nowrap; }
.hl {
  position: relative;
  z-index: 0;
  white-space: nowrap;
}
.hl::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.12em;
  right: -0.12em;
  bottom: 0.04em;
  height: 0.42em;
  border-radius: 0.2em;
  background: var(--gold);
  transform: rotate(-1.5deg);
}

/* ---------- Hero ---------- */
.hero {
  --T: clamp(96px, 13vw, 200px);                /* treeline height */
  --ground: calc(var(--sheet) + clamp(36px, 3.4vw, 52px));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px) 0 calc(var(--ground) + var(--T) * 0.85);
  background: linear-gradient(180deg, var(--blue) 0%, #7CCBF6 38%, #C4E7FC 70%, var(--sky) 100%);
}

.scene,
.scene > * {
  position: absolute;
  pointer-events: none;
}
.scene { inset: 0; z-index: -1; }

.scene__sun {
  top: -18%;
  right: -12%;
  width: min(80vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 240, 190, 0.9), rgba(255, 240, 190, 0.35) 45%, rgba(255, 240, 190, 0) 72%);
}

/* The wrapper stays put and fades the clouds behind the headline; the layer inside drifts. */
.scene__clouds {
  --cloud-h: clamp(200px, 32vw, 440px);
  --cloud-w: calc(var(--cloud-h) * 2.3);    /* clouds.webp is 2300 x 1000 */
  top: 2%;
  left: 0;
  right: 0;
  height: var(--cloud-h);
  overflow: hidden;
  opacity: 0.55;
}
.scene__clouds > span {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + var(--cloud-w));
  height: 100%;
  background: url("/assets/img/scene/clouds.webp") repeat-x 0 0 / auto 100%;
  will-change: transform;
  animation: drift 180s linear infinite;
}
@media (min-width: 960px) {
  .scene__clouds {
    opacity: 1;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.22) 44%, #000 64%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.22) 44%, #000 64%);
  }
}
@keyframes drift {
  to { transform: translateX(calc(-1 * var(--cloud-w))); }
}

/* Hills: half of a mirrored pair, so every other copy is flipped. */
.scene__hills {
  --hill-h: calc(var(--T) * 1.2);
  --hill-w: calc(var(--hill-h) * 3.877);    /* hills.webp is 2948 x 760 at source */
  left: 0;
  right: 0;
  bottom: var(--ground);
  height: var(--hill-h);
  display: flex;
}
.scene__hills > span {
  flex: none;
  width: var(--hill-w);
  height: 100%;
  background: url("/assets/img/scene/hills.webp") no-repeat 0 100% / 100% 100%;
}
.scene__hills > span:nth-child(even) { transform: scaleX(-1); }

.scene__trees {
  left: 0;
  right: 0;
  bottom: calc(var(--ground) - var(--T) * 0.125);
  height: var(--T);
  background: url("/assets/img/scene/trees.webp") repeat-x 0 100% / auto 100%;
}

.scene__ground {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ground);
  border-top: 4px solid var(--green-d);
  background: linear-gradient(var(--green), #2E8A43);
}

.scene__bushes {
  left: 0;
  right: 0;
  bottom: calc(var(--sheet) - 6px);
  height: calc(var(--T) * 0.5);
  background: url("/assets/img/scene/bushes.webp") repeat-x 30% 100% / auto 100%;
}

.hero__inner {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

.hero__copy { text-align: center; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  font-weight: 600;
  font-size: 0.9375rem;
  background: #FFFFFF;
  border: var(--line);
  border-radius: var(--pill);
  box-shadow: 0 3px 0 var(--ink);
}
.hero__badge .dot {
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--green);
}

.hero h1 {
  margin: 18px 0 16px;
  font-size: clamp(2.25rem, 3.6vw + 1rem, 4.25rem);
  line-height: 1.04;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55);
}
.hero__sub {
  max-width: 34em;
  margin: 0 auto;
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.3125rem);
  color: var(--ink);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 16px;
  margin-top: 26px;
}
.hero__note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  margin-top: 18px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}
.hero__note span { display: inline-flex; align-items: center; gap: 6px; }
.hero__note .icon { width: 1.1em; height: 1.1em; }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.hero__facts li {
  padding: 4px 12px;
  font-weight: 600;
  font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.78);
  border: 2px solid var(--ink);
  border-radius: var(--pill);
}

@media (max-width: 479.98px) {
  .hero__ctas .btn { width: 100%; }
}

@media (min-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
  .hero__copy { text-align: left; }
  .hero__sub { margin: 0; }
  .hero__ctas,
  .hero__note,
  .hero__facts { justify-content: flex-start; }
}

/* The fan of cards, with Wren beside it. */
.hero__art {
  position: relative;
  width: min(100%, 580px);
  margin: 0 auto calc(var(--T) * -0.75);
}
.fan {
  position: relative;
  aspect-ratio: 580 / 460;
}
.fan__rays,
.fan__glow {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.fan__glow {
  background: radial-gradient(closest-side, rgba(255, 246, 205, 0.95), rgba(255, 220, 120, 0.5) 45%, rgba(255, 220, 120, 0) 70%);
}
.fan__rays {
  width: 130%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.34) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 72%);
  animation: spin 90s linear infinite;
}
@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.fan__card {
  position: absolute;
  top: 7%;
  left: 31%;
  width: 38%;
  margin: 0;
  transform-origin: 50% 110%;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fan__card--l { left: 10%; top: 15%; transform: rotate(-11deg); }
.fan__card--r { left: 52%; top: 15%; transform: rotate(11deg); }
.fan__card--c { z-index: 2; }
.fan:hover .fan__card--l { transform: rotate(-15deg) translate(-4%, 1%); }
.fan:hover .fan__card--r { transform: rotate(15deg) translate(4%, 1%); }
.fan:hover .fan__card--c { transform: translateY(-3%); }

/* A soft rainbow glow behind the Rainbow-framed center card. */
.fan__card--c::before {
  content: "";
  position: absolute;
  inset: 4% -4% 2%;
  border-radius: 12%;
  background: conic-gradient(from 210deg, #FBCFE8, #FDE68A, #BBF7D0, #BAE6FD, #DDD6FE, #FBCFE8);
  filter: blur(18px);
  opacity: 0.9;
}

.fan__wren {
  position: absolute;
  z-index: 3;
  left: -3%;
  bottom: 0;
  width: 25%;
  animation: bob 3.4s ease-in-out infinite;
}
.fan__wren img { width: 100%; filter: drop-shadow(0 8px 6px rgba(30, 41, 59, 0.25)); }
@keyframes bob {
  50% { transform: translateY(-7px); }
}

.sparkle {
  position: absolute;
  z-index: 4;
  width: 26px;
  height: 26px;
  fill: #FFFFFF;
  filter: drop-shadow(0 0 6px rgba(255, 214, 90, 0.9));
  animation: twinkle 2.8s ease-in-out infinite;
}
.sparkle--1 { top: 4%; left: 22%; }
.sparkle--2 { top: 12%; right: 6%; width: 18px; height: 18px; animation-delay: 0.9s; }
.sparkle--3 { top: 46%; right: -1%; width: 22px; height: 22px; animation-delay: 1.6s; }
.sparkle--4 { top: 0; left: 62%; width: 16px; height: 16px; animation-delay: 2.1s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.55) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(20deg); }
}

.fan__credit {
  position: relative;
  z-index: 4;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 0;
  padding: 3px 12px;
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: center;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  border-radius: var(--pill);
}
.fan__credit a { color: var(--ink); font-weight: 600; }

/* ---------- Trading card (tilt + shine) ---------- */
.tcard {
  position: relative;
  perspective: 900px;
}
.tcard__inner {
  position: relative;
  border-radius: 6.33% / 4.53%;    /* the card's own corner: 19 of 300 by 419 */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tcard.is-tilting .tcard__inner { transition: transform 0.08s linear; }
.tcard img {
  width: 100%;
  filter: drop-shadow(0 10px 10px rgba(30, 41, 59, 0.28));
}
.tcard__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 42%),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.28) 46%, rgba(255, 255, 255, 0) 58%);
  background-size: 100% 100%, 260% 260%;
  background-position: 0 0, var(--mx, 0%) var(--my, 0%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tcard.is-tilting .tcard__inner::after { opacity: 1; }

/* An idle light sweep across the hero's center card (like the app's frame sheen). */
.tcard--sheen .tcard__inner { overflow: hidden; }
.tcard--sheen .tcard__inner::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10%;
  bottom: -10%;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  transform: skewX(-18deg) translateX(0);
  pointer-events: none;
  animation: sheen 6.5s ease-in-out 1.5s infinite;
  mix-blend-mode: soft-light;
}
.tcard--sheen { filter: drop-shadow(0 10px 10px rgba(30, 41, 59, 0.28)); }
.tcard--sheen img { filter: none; }
@keyframes sheen {
  0% { transform: skewX(-18deg) translateX(0); }
  22%, 100% { transform: skewX(-18deg) translateX(520%); }
}

/* ---------- How it works ---------- */
.steps {
  display: grid;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.step__media { position: relative; }
.step__num {
  position: absolute;
  z-index: 2;
  top: -12px;
  left: -10px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1;
  background: var(--gold);
  border: var(--line);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--ink);
}
.step h3 {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: clamp(1.5rem, 1vw + 1.15rem, 1.875rem);
  margin-bottom: 6px;
}
.step h3 .icon { width: 1em; height: 1em; color: var(--blue-d); stroke-width: 2.6; }
.step p { color: var(--ink-2); }

@media (min-width: 600px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .step { grid-template-columns: 1fr; align-content: start; text-align: center; }
  .step h3 { justify-content: center; margin-top: 8px; }
  .step p { max-width: 30ch; margin-inline: auto; }
}
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step:not(:last-child) .step__media::after {
    content: "";
    position: absolute;
    top: 44%;
    right: -26px;
    width: 18px;
    height: 18px;
    border-top: 5px solid var(--ink);
    border-right: 5px solid var(--ink);
    border-radius: 3px;
    transform: rotate(45deg);
  }
}

/* A CSS-drawn phone holding a 900 x 1600 screen. */
.phone {
  position: relative;
  width: 100%;
  max-width: 250px;
  margin-inline: auto;
  padding: 3.4%;
  background: #1E293B;
  border-radius: 13% / 7.2%;
  box-shadow:
    inset 0 0 0 2px #475569,
    0 0 0 3px var(--ink),
    0 22px 30px -16px rgba(30, 41, 59, 0.55);
}
.phone::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 5.2%;
  left: 50%;
  width: 7%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0F172A;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
  transform: translateX(-50%);
}
.phone img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 10% / 5.6%;
  background: linear-gradient(#BEE6FF, #E3F3FF);
}
.phone--tilt-l { transform: rotate(-3deg); }
.phone--tilt-r { transform: rotate(3deg); }

.how-note {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 760px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  padding: 16px 20px;
  background: #FFFFFF;
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift);
}
.how-note img {
  flex: none;
  width: 64px;
  height: 64px;
  border: var(--line);
  border-radius: 50%;
  background: var(--sky);
}
.how-note p { color: var(--ink-2); }
.how-note strong { color: var(--ink); }

/* ---------- Cards section ---------- */
.tiers-wrap {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(40px, 6vw, 72px);
}
@media (min-width: 960px) {
  .tiers-wrap { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .tiers-wrap .sec-head { margin-bottom: 0; }
}

.tiers {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: clamp(16px, 2.5vw, 26px);
  list-style: none;
  background: #FFFFFF;
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift);
}
.tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "tag count" "bar bar";
  align-items: center;
  gap: 6px 12px;
}
.tier__tag {
  grid-area: tag;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  background: var(--tag, #FCF3E2);
}
.tier__tag .stars svg { width: 14px; height: 14px; fill: var(--star, #FFD54A); }
.tier__bar {
  grid-area: bar;
  height: 18px;
  padding: 2px;
  border: 2.5px solid var(--ink);
  border-radius: var(--pill);
  background: var(--sky-2);
}
.tier__bar span {
  display: block;
  height: 100%;
  min-width: 10px;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--c1), var(--c2));
}
.tier__count {
  grid-area: count;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  text-align: right;
}
.tier__count small { font-weight: 600; font-size: 0.8125rem; color: var(--ink-2); }

@media (min-width: 600px) {
  .tier {
    grid-template-columns: 13.25rem minmax(0, 1fr) 6.5rem;
    grid-template-areas: "tag bar count";
  }
}

.tier--common    { --tag: #FCF3E2; --star: #9C978F; --c1: var(--r-common); --c2: var(--r-common-d); }
.tier--uncommon  { --tag: #4CC56E; --c1: var(--r-uncommon); --c2: var(--r-uncommon-d); }
.tier--rare      { --tag: #4D9CEB; --c1: var(--r-rare); --c2: var(--r-rare-d); }
.tier--epic      { --tag: #B794F6; --c1: var(--r-epic); --c2: var(--r-epic-d); }
.tier--legendary { --star: #FFF3C4; --c1: var(--r-legendary); --c2: var(--r-legendary-d); }
.tier--legendary .tier__tag { background: linear-gradient(90deg, #FCD34D, #FB923C 70%, #F97316); }
/* Bar lengths: count / 202 (the biggest tier). */
.tier--common .tier__bar span    { width: 63.4%; }
.tier--uncommon .tier__bar span  { width: 100%; }
.tier--rare .tier__bar span      { width: 76.2%; }
.tier--epic .tier__bar span      { width: 7.4%; }
.tier--legendary .tier__bar span { width: 2.5%; }

.tiers__note {
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-align: center;
}

/* Gallery: a swipeable row on phones, a grid from 640 px. */
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(58%, 230px);
  gap: 16px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 14px var(--gutter) 22px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.gallery > li { scroll-snap-align: start; }
@media (min-width: 640px) {
  .gallery {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 20px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}
@media (min-width: 1100px) {
  .gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.gcard { margin: 0; }
.gcard figcaption,
.credit {
  margin-top: 8px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-2);
  text-align: center;
}
.gcard figcaption b { display: block; font-weight: 600; font-size: 0.875rem; color: var(--ink); }

.minis {
  display: grid;
  gap: 20px;
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) {
  .minis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mini {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: #FFFFFF;
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift);
}
.mini h3 { font-size: 1.3125rem; margin-bottom: 4px; }
.mini p { color: var(--ink-2); font-size: 1rem; }
.mini__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--ink);
  background: var(--gold);
  border: var(--line);
  border-radius: 16px;
}
.mini__icon .icon { width: 28px; height: 28px; stroke-width: 2.4; }
.mini__icon--blue { background: var(--blue); }
.mini__locked {
  flex: none;
  width: 64px;
  transform: rotate(-4deg);
}
.mini__locked img { width: 100%; filter: drop-shadow(0 4px 4px rgba(30, 41, 59, 0.25)); }

/* ---------- Mastery (night band) ---------- */
.sheet--night {
  color: #FFFFFF;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 12%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(2px 2px at 62% 64%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 82%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(2px 2px at 90% 76%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 45% 30%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 55%, rgba(147, 51, 234, 0.28), transparent 70%),
    linear-gradient(180deg, #1E293B 0%, #26335A 55%, #2B3A67 100%);
}
.sheet--night .eyebrow { color: var(--ink); }
.sheet--night .lead { color: #DBEAFE; }

.ladder {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(52%, 220px);
  gap: 18px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 24px var(--gutter) 22px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}
.ladder > li { scroll-snap-align: start; text-align: center; }
@media (min-width: 860px) {
  .ladder {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 22px;
    margin: 0;
    padding: 24px 0 0;
    overflow: visible;
  }
  /* Each tier stands a step higher than the last. */
  .ladder > li:nth-child(2) { padding-bottom: 14px; }
  .ladder > li:nth-child(3) { padding-bottom: 28px; }
  .ladder > li:nth-child(4) { padding-bottom: 42px; }
  .ladder > li:nth-child(5) { padding-bottom: 56px; }
}
.ladder__master .tcard::before {
  content: "";
  position: absolute;
  inset: 2% -6% 0;
  border-radius: 14%;
  background: conic-gradient(from 200deg, #FBCFE8, #FDE68A, #BBF7D0, #BAE6FD, #DDD6FE, #FBCFE8);
  filter: blur(22px);
  opacity: 0.85;
}

.tier-chip {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 14px;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  border: var(--line);
  border-radius: var(--pill);
  background: #FFFFFF;
}
.tier-chip--bronze { background: linear-gradient(120deg, #E3A36B, #F3C79E 45%, #D99060); }
.tier-chip--silver { background: linear-gradient(120deg, #C9D2DC, #F2F5F8 45%, #B7C2CE); }
.tier-chip--gold { background: linear-gradient(120deg, #FFD966, #FFF3C4 45%, #F2B33D); }
.tier-chip--master { background: linear-gradient(120deg, #FBCFE8, #FDE68A, #BBF7D0, #BAE6FD, #DDD6FE); }
.ladder small {
  display: block;
  margin-top: 6px;
  font-size: 0.875rem;
  color: #CBD5E1;
}

.mastery-facts {
  display: grid;
  gap: 16px;
  max-width: 980px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .mastery-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mastery-facts li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  color: #E2E8F0;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-lg);
}
.mastery-facts strong { color: #FFFFFF; }
.mastery-facts .icon { width: 28px; height: 28px; color: var(--gold); margin-top: 2px; }
.sheet--night .credit { margin-top: 28px; color: #CBD5E1; }

/* ---------- Birds near you ---------- */
.split {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.features {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.feature {
  padding: 18px 18px 20px;
  background: #FFFFFF;
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift);
}
.feature h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  margin-bottom: 6px;
}
.feature p { color: var(--ink-2); font-size: 1rem; }
.feature__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--green);
  border: var(--line);
  border-radius: 12px;
}
.feature__icon .icon { width: 22px; height: 22px; stroke-width: 2.5; }
.feature__icon--blue { background: var(--blue); }
.feature__icon--gold { background: var(--gold); }
.feature__icon--red { background: var(--red); }

.features--4 { margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 1100px) {
  .features--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.near-art {
  position: relative;
  width: min(100%, 640px);
  margin-inline: auto;
}
.near-art::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(61, 209, 106, 0.32), rgba(61, 209, 106, 0));
}
.near-art img {
  width: 100%;
  transform: rotate(-1.5deg);
  filter: drop-shadow(0 16px 16px rgba(30, 41, 59, 0.25));
}
.small-print {
  margin-top: 18px;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-align: center;
}

/* ---------- Keep the streak (bento) ---------- */
.bento {
  display: grid;
  gap: 20px;
}
@media (min-width: 600px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--badges,
  .tile--bag { grid-column: span 2; }
}
@media (min-width: 960px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile--badges { grid-column: span 4; }
  .tile--streak { grid-column: span 2; }
  .tile--candy { grid-column: span 2; }
  .tile--bag { grid-column: span 4; }
}
.tile {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 28px);
  background: #FFFFFF;
  border: var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--lift);
}
.tile h3 { font-size: clamp(1.375rem, 0.8vw + 1.1rem, 1.75rem); margin-bottom: 8px; }
.tile p { color: var(--ink-2); }
.tile__kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 10px;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--sky);
  border: 2px solid var(--ink);
  border-radius: var(--pill);
}

.badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .badges { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.badges li { text-align: center; font-weight: 600; font-size: 0.8125rem; line-height: 1.25; }
.badges img {
  width: min(100%, 104px);
  margin: 0 auto 6px;
  filter: drop-shadow(0 5px 5px rgba(30, 41, 59, 0.22));
  transition: transform 0.25s ease;
}
.badges li:hover img { transform: translateY(-4px) rotate(-4deg); }

.tile--streak {
  color: var(--ink);
  background: linear-gradient(170deg, #FFF3C4, #FFE08A 60%, #FFC93C);
}
.tile--streak p { color: var(--ink); }
.flame {
  width: 72px;
  height: 72px;
  margin-bottom: 12px;
  fill: #FF8A3D;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 0 rgba(30, 41, 59, 0.2));
  transform-origin: 50% 90%;
  animation: flicker 1.8s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.06, 0.96) rotate(2deg); }
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: 4px 12px;
  font-weight: 600;
  font-size: 0.875rem;
  background: #FFFFFF;
  border: 2px solid var(--ink);
  border-radius: var(--pill);
}

.tile--candy { background: linear-gradient(170deg, #FFE4F1, #FFFFFF 70%); }
.tile--bag { background: linear-gradient(170deg, var(--sky-2), #FFFFFF 70%); }
.tile__media {
  display: grid;
  gap: 18px;
  align-items: center;
}
.tile__media img {
  width: min(100%, 220px);
  max-height: 220px;
  object-fit: contain;
  margin-inline: auto;
  filter: drop-shadow(0 10px 10px rgba(30, 41, 59, 0.22));
}
.tile--candy .tile__media img { width: min(100%, 168px); max-height: 120px; }
@media (min-width: 600px) {
  .tile--bag .tile__media { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .tile--bag .tile__media img { order: 2; }
}

/* ---------- Share ---------- */
.sheet--share {
  color: #FFFFFF;
  background: linear-gradient(170deg, #0F6EA9, #0B5E94 60%, #0A568A);
}
.sheet--share .lead { color: #FFFFFF; }
.sheet--share p { color: #DBEAFE; }
.sheet--share .eyebrow { color: var(--ink); }
@media (min-width: 960px) {
  .split--share { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.sheet--share .h2 { color: #FFFFFF; }
.share-list {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.share-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: #FFFFFF; }
.share-list .icon { width: 24px; height: 24px; margin-top: 1px; color: var(--gold); stroke-width: 2.8; }

.share-pics {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
  max-width: 640px;
  margin-inline: auto;
  padding: 12px 0 0;
}
.share-pics::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.12) 0deg 8deg, rgba(255, 255, 255, 0) 8deg 20deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 70%);
  mask-image: radial-gradient(closest-side, #000 25%, transparent 70%);
}
.share-pics figure { margin: 0; }
.share-pics img {
  width: 100%;
  border: var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 30px -14px rgba(0, 0, 0, 0.55);
}
.share-pics figure:first-child { transform: rotate(-4deg) translateY(4%); }
.share-pics figure:last-child { transform: rotate(4deg); }
.share-pics figcaption {
  margin-top: 12px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: center;
  color: #FFFFFF;
}
.share-credit {
  margin-top: 26px;
  font-size: 0.8125rem;
  text-align: center;
}
.sheet--share a { color: #FFFFFF; }

/* ---------- Fair play + privacy ---------- */
.promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.promise {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  padding: 22px 20px;
  background: var(--sky-2);
  border: var(--line);
  border-radius: var(--radius-lg);
}
.promise h3 { font-size: 1.25rem; margin: 0; }
.promise p { grid-column: 1 / -1; margin-top: 10px; font-size: 1rem; color: var(--ink-2); }
@media (min-width: 900px) {
  .promise { display: block; }
  .promise h3 { margin: 14px 0 6px; }
  .promise p { margin-top: 0; }
}
.promise .feature__icon { width: 48px; height: 48px; border-radius: 14px; }
.promise .feature__icon .icon { width: 26px; height: 26px; }
.promise-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 24px;
  margin-top: clamp(32px, 5vw, 48px);
}

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}
.faq details {
  background: #FFFFFF;
  border: var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 0 rgba(30, 41, 59, 0.12);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 16px 22px;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  border-radius: calc(var(--radius-md) - 3px);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--sky-2); }
.faq summary .icon {
  width: 30px;
  height: 30px;
  padding: 3px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
  stroke-width: 3;
  transition: transform 0.25s ease;
}
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.faq__a { padding: 0 22px 20px; color: var(--ink-2); }
.faq__a p + p { margin-top: 0.7em; }
.faq-more { margin-top: 28px; text-align: center; color: var(--ink-2); }

/* ---------- Join the beta ---------- */
.sheet--join {
  background:
    radial-gradient(ellipse 60% 55% at 30% 45%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%),
    linear-gradient(170deg, #FFE08A, #FFC93C 70%, #FFB627);
}
.sheet--join::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 30%;
  top: 45%;
  width: max(1400px, 140vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.22) 0deg 6deg, rgba(255, 255, 255, 0) 6deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 75%);
  mask-image: radial-gradient(closest-side, #000 10%, transparent 75%);
}
.join {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 960px) {
  .join { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.join__copy { text-align: center; }
.join__copy .lead { color: var(--ink); }
.join__wren {
  width: min(56%, 300px);
  margin: 0 auto 8px;
  filter: drop-shadow(0 12px 10px rgba(30, 41, 59, 0.25));
}
@media (min-width: 960px) {
  .join__copy { text-align: left; }
  .join__copy .lead { margin-inline: 0; }
  .join__wren { margin-inline: 0; }
}
.join__alt { margin-top: 16px; font-weight: 600; }
.join__alt a { color: var(--ink); }

.form-card {
  position: relative;
  padding: clamp(22px, 3.5vw, 36px);
  background: #FFFFFF;
  border: var(--line);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 0 var(--ink), 0 30px 40px -20px rgba(30, 41, 59, 0.45);
}
.form-card h3 { font-size: clamp(1.5rem, 1vw + 1.2rem, 1.875rem); margin-bottom: 18px; }

.beta-nojs { display: none; }
.no-js .beta-form { display: none; }
.no-js .beta-nojs { display: block; }

.field { margin-bottom: 18px; }
.field > label,
.field legend {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
}
.input {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  font-size: 1.0625rem;
  font-weight: 500;
  background: var(--sky-2);
  border: var(--line);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder { color: #56657A; }
.input:focus { outline: none; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(58, 180, 242, 0.55); }
.input[aria-invalid="true"] { border-color: var(--red-d); background: #FFF1F1; }

fieldset.field { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; flex: 1 1 110px; }
.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 14px;
  font-weight: 600;
  background: #FFFFFF;
  border: var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 0 #C9D3DE;
  transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.08s ease;
}
.choice span::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: #FFFFFF;
}
.choice input:checked + span { background: #D9F7E2; box-shadow: 0 4px 0 var(--green-d); }
.choice input:checked + span::before { background: var(--green); box-shadow: inset 0 0 0 3px #FFFFFF; }
.choice input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.choice input:active + span { transform: translateY(3px); box-shadow: 0 1px 0 #C9D3DE; }

/* The honeypot: off-screen for people, still in the form for bots. */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  min-height: 1.5em;
  margin: 12px 0 0;
  font-weight: 600;
  color: var(--red-d);
}
.form-status:empty { margin: 0; min-height: 0; }
.fine-print {
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.fine-print a { color: var(--ink); font-weight: 600; }

.beta-done { text-align: center; }
.beta-done:focus { outline: none; }
.beta-done img {
  width: 132px;
  height: 132px;
  margin: 0 auto 14px;
  border: var(--line);
  border-radius: 50%;
  background: linear-gradient(160deg, #FFE08A, var(--gold));
}
.beta-done h3 { margin-bottom: 8px; }
.beta-done p { color: var(--ink-2); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--sheet));
  padding: clamp(48px, 7vw, 80px) 0 36px;
  color: #CBD5E1;
  background: #1E293B;
  border-radius: var(--sheet) var(--sheet) 0 0;
}
.site-footer a { color: #FFFFFF; }
.site-footer a:hover { color: var(--gold); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 20px;
}
.footer-grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .footer-grid > :first-child { grid-column: auto; }
}
.site-footer .brand { color: #FFFFFF; }
.site-footer .brand:hover { color: #FFFFFF; }
.footer-tag { margin-top: 12px; max-width: 32ch; }
.footer-h {
  margin-bottom: 12px;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.footer-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.footer-links a { font-weight: 600; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 20px;
  font-size: 0.875rem;
  border-top: 2px solid rgba(255, 255, 255, 0.14);
}

/* ---------- Document pages (privacy, terms, support, credits, 404) ---------- */
.doc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(40px, 7vw, 80px) 0 calc(var(--sheet) + clamp(40px, 6vw, 72px));
  text-align: center;
  background: linear-gradient(180deg, var(--blue) 0%, #8FD3F8 60%, #C4E7FC 100%);
}
.doc-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 100%;
  background: url("/assets/img/scene/clouds.webp") repeat-x 20% 30% / auto 90%;
  opacity: 0.8;
  -webkit-mask-image: radial-gradient(ellipse 42% 60% at 50% 52%, rgba(0, 0, 0, 0.12) 55%, #000 100%);
  mask-image: radial-gradient(ellipse 42% 60% at 50% 52%, rgba(0, 0, 0, 0.12) 55%, #000 100%);
}
@media (max-width: 759.98px) {
  .doc-hero::before { opacity: 0.4; -webkit-mask-image: none; mask-image: none; }
}
.doc-hero h1 {
  margin-top: 16px;
  font-size: clamp(2.25rem, 3vw + 1.25rem, 3.75rem);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55);
}
.doc-hero p {
  max-width: 56ch;
  margin: 12px auto 0;
  font-size: 1.125rem;
}

.doc-hero__cta {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.doc {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--sheet));
  padding: clamp(36px, 6vw, 72px) 0 calc(var(--sheet) + clamp(56px, 8vw, 96px));
  background: #FFFFFF;
  border-radius: var(--sheet) var(--sheet) 0 0;
}

.prose {
  max-width: 72ch;
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}
.prose > * + *,
.prose section > * + * { margin-top: 1em; }
.prose h2 {
  position: relative;
  margin-top: 2.2em;
  padding-bottom: 0.3em;
  font-size: clamp(1.5rem, 1vw + 1.2rem, 1.875rem);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.prose h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 6px;
  margin-top: 0.35em;
  border-radius: var(--pill);
  background: var(--gold);
}
.prose h3 {
  margin-top: 1.8em;
  font-size: 1.25rem;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.prose h2 + *,
.prose h3 + * { margin-top: 0.6em; }
.prose section { scroll-margin-top: calc(var(--header-h) + 16px); }
.prose > :first-child,
.prose > section:first-child > :first-child { margin-top: 0; }
.prose ul,
.prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--blue-d); font-weight: 700; }
.prose a { font-weight: 600; }
.prose strong { color: var(--ink); }
.prose .lead {
  max-width: none;
  margin-inline: 0;
  font-size: clamp(1.1875rem, 0.4vw + 1.1rem, 1.375rem);
  line-height: 1.55;
  color: var(--ink);
}
.prose .updated {
  display: inline-block;
  padding: 4px 12px;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--sky);
  border: 2px solid var(--ink);
  border-radius: var(--pill);
}
.prose .callout {
  padding: 18px 20px;
  background: var(--sky-2);
  border: var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 0 rgba(30, 41, 59, 0.12);
}
.prose .callout > * + * { margin-top: 0.6em; }
.prose .callout > :first-child { margin-top: 0; }
.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  border: var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.prose th,
.prose td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  border-bottom: 2px solid var(--border);
}
.prose th + th,
.prose td + td { border-left: 2px solid var(--border); }
/* A label column (a provider's name): wrap only between words, so the table
   can't squeeze it to a letter or two a line on a phone. */
.prose th:first-child,
.prose td:first-child { overflow-wrap: break-word; width: 30%; }
.prose tr:last-child td { border-bottom: 0; }
.prose a[rel="license"] { white-space: nowrap; }
.prose thead th {
  font-weight: 700;
  background: var(--sky);
  border-bottom: 3px solid var(--ink);
}
.prose tbody tr:nth-child(even) td { background: #FBFCFE; }
@media (max-width: 599.98px) {
  .prose table { font-size: 0.8125rem; }
  .prose th,
  .prose td { padding: 8px; }
}

/* 404 */
.hero--lost { padding-bottom: calc(var(--ground) + var(--T) * 1.3); }
.lost {
  display: grid;
  gap: 24px;
  justify-items: center;
  text-align: center;
}
.lost img {
  width: min(62vw, 260px);
  filter: drop-shadow(0 12px 10px rgba(30, 41, 59, 0.25));
  animation: bob 3.4s ease-in-out infinite;
}
.lost h1 { font-size: clamp(2.25rem, 3vw + 1.25rem, 3.75rem); }
.lost p { max-width: 44ch; font-size: 1.125rem; color: var(--ink-2); }
.lost__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

/* ---------- Reveal on scroll (JS adds .js and .is-in) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .tcard__inner { transform: none !important; }
  .fan:hover .fan__card--l { transform: rotate(-11deg); }
  .fan:hover .fan__card--r { transform: rotate(11deg); }
  .fan:hover .fan__card--c { transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header,
  .site-footer,
  .scene,
  .skip-link { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  body { background: #FFFFFF; }
  .sheet,
  .doc { margin: 0; border-radius: 0; }
}