/* ============================================================
   Focus Monke — design system v2 "The site is the ocean."
   Water colors sampled from the app's dive scene (fdc-water-back).
   Type: BeanBurrito (app brand font), Fredoka, Patrick Hand — all OFL,
   bundled from the app repo. Every image is the artist's app art.
   ============================================================ */

@font-face {
  font-family: "BeanBurrito";
  src: url("assets/fonts/beanburrito-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("assets/fonts/fredoka-vf.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Patrick Hand";
  src: url("assets/fonts/patrick-hand.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --surface: #48e5ff;      /* app water, top */
  --shallow: #30caea;
  --mid: #0f9fd4;          /* app water, mid */
  --deep: #075e8f;
  --abyss: #032a47;
  --ink: #0e3c63;
  --ink-soft: #2b5d85;
  --paper: #fff9ee;        /* MonkeNotes notepad cream */
  --paper-edge: #f0e2c8;
  --banana: #ffd447;
  --monke-orange: #f07f2d;
  --white: #ffffff;
  --display: "BeanBurrito", "Fredoka", system-ui, sans-serif;
  --body: "Fredoka", system-ui, sans-serif;
  --hand: "Patrick Hand", "Fredoka", cursive;
  --shell-max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Keyboard focus: one visible banana ring everywhere (links, buttons, FAQ
   summaries) — the UA default is invisible against bright water. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--banana);
  outline-offset: 2px;
}

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 420;
  color: var(--ink);
  background: var(--mid);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--paper); color: var(--ink);
  padding: 0.6rem 1rem; border-radius: 0 0 12px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ============================== the ocean ============================== */
/* Fixed, full-viewport water behind everything. --depth (0..1, set by JS on
   scroll) crossfades the deep layer in: scrolling IS descending. */

.ocean {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(180deg,
    var(--surface) 0%, var(--shallow) 34%, var(--mid) 68%, var(--deep) 100%);
}
.ocean__deep {
  position: absolute; inset: 0; opacity: var(--depth, 0);
  background: linear-gradient(180deg,
    var(--mid) 0%, var(--deep) 46%, var(--abyss) 100%);
  transition: opacity 0.25s linear;
}
.ocean__rays {
  position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: 120vw; max-width: none; pointer-events: none;
  mix-blend-mode: overlay;
  animation: rays-breathe 9s ease-in-out infinite alternate;
}
@keyframes rays-breathe {
  from { opacity: calc(0.75 - var(--depth, 0) * 0.7); }
  to   { opacity: calc(1 - var(--depth, 0) * 0.7); }
}
.ocean__life { position: absolute; inset: 0; }

/* ------------------------------ rigged fish ------------------------------
   .rf is one fish: the artist's whole composite sprite (assets/fish/).
   The art faces RIGHT. Fish traveling left get .rf--l, which mirrors the art
   so facing == direction of travel — fish always swim FORWARD. */

.rf {
  position: absolute; left: 0; width: var(--size);
  animation: rf-travel var(--dur) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: var(--o, 1);
  filter: var(--haze, none);
  pointer-events: none;
}
.rf--l { animation-direction: reverse; }
@keyframes rf-travel {
  from { transform: translateX(calc(-1.7 * var(--size))); }
  to   { transform: translateX(calc(100vw + 0.7 * var(--size))); }
}
.rf--l .rf__flip { transform: scaleX(-1); }
.rf__bob {
  animation: rf-bob var(--bob, 5s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
@keyframes rf-bob {
  from { transform: translateY(-4%) rotate(1.6deg); }
  to   { transform: translateY(4%) rotate(-1.6deg); }
}
/* The whole artist composite swims as one stack, like the app's aquarium
   (AquariumScene+SwimFeel sways zRotation ±0.02-0.08 rad per species and the
   tail-beat reads as a subtle scaleX squash on the full body). The base is
   always the untouched composite — every fish keeps its eye and fins exactly
   as drawn — and the HYBRID part overlays (.rf__part, shift 7) ride on top. */
.rf__art {
  position: relative;
  transform-origin: 42% 55%;
  animation: rf-swim var(--beat, 0.9s) ease-in-out infinite;
  will-change: transform;
}
.rf__sprite { display: block; width: 100%; height: auto; }
@keyframes rf-swim {
  0%, 100% { transform: rotate(1.8deg) scaleX(1); }
  50%      { transform: rotate(-2.2deg) scaleX(0.955); }
}
/* Animated tail/fin overlays: exactly the pixels of that part VISIBLE in the
   composite (exporter erases whatever the body covers), pivoting at the
   rig's body-side join. The static part in the composite underneath fills
   the swept gap, so anatomy never breaks. Motion = the app's Ben-approved
   round-9 values (rotate ±--pa, x-foreshortening --psq in quadrature: the
   squash peaks at each rotation zero-crossing, twice per beat, like the
   app's coupleFinBeat). */
.rf__part {
  position: absolute; height: auto; pointer-events: none;
  animation: rf-part-beat var(--pp, 1s) ease-in-out infinite;
  animation-delay: var(--pd, 0s);
  will-change: transform;
}
@keyframes rf-part-beat {
  0%, 100% { transform: rotate(var(--pa, 3deg)) scaleX(1); }
  25%, 75% { transform: rotate(0deg) scaleX(calc(1 - var(--psq, 0.07))); }
  50%      { transform: rotate(calc(-1 * var(--pa, 3deg))) scaleX(1); }
}

/* Ambient drifters (seahorse, jellyfish): upright composites, slow wander. */
.drifter {
  position: absolute; width: var(--size);
  opacity: var(--o, 0.9); pointer-events: none;
  animation: drift var(--dur) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
.drifter img { width: 100%; height: auto; display: block; }
@keyframes drift {
  from { transform: translate(0, 0) rotate(-3deg); }
  to   { transform: translate(var(--wander, 6vw), -7vh) rotate(3deg); }
}

/* Rising bubbles — the app's own procedural ring-bubble texture
   (bubbleRingTexture() formula, redrawn by the exporter). */
.bubble {
  position: absolute; bottom: -8vh; width: var(--size, 22px);
  opacity: 0.55; pointer-events: none;
  animation: bubble-rise var(--dur, 11s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes bubble-rise {
  0%   { transform: translateY(0) translateX(0) scale(0.7); opacity: 0; }
  8%   { opacity: 0.55; }
  50%  { transform: translateY(-55vh) translateX(2.2vw) scale(0.9); }
  92%  { opacity: 0.4; }
  100% { transform: translateY(-112vh) translateX(-1.4vw) scale(1); opacity: 0; }
}

/* ============================== header ============================== */

.site-header { position: relative; z-index: 10; }
/* Home: header floats OVER the full-viewport hero so the hero (and the coral
   bed at its bottom) spans exactly the first screen — no open-water strip
   below the reef, scroll cue still on-screen. Hero top padding compensates. */
body.home .site-header { position: absolute; top: 0; left: 0; right: 0; }
.nav-shell {
  max-width: var(--shell-max); margin: 0 auto; padding: 1rem 1.4rem;
  display: flex; align-items: center; gap: 1rem;
}
.brand {
  display: flex; align-items: center; gap: 0.65rem;
  font-family: var(--display); font-size: 1.5rem; text-decoration: none;
  color: var(--white);
  text-shadow: 0 2px 0 rgba(9, 70, 110, 0.35);
}
.brand img { border-radius: 11px; }
.menu-toggle {
  display: none; margin-left: auto; background: rgba(255, 255, 255, 0.25);
  border: 0; border-radius: 12px; padding: 0.5rem; cursor: pointer;
  color: var(--white); width: 44px; height: 44px;
}
.nav-links {
  display: flex; gap: 0.4rem; list-style: none;
  margin: 0 0 0 auto; padding: 0;
}
.nav-links a {
  display: block; padding: 0.5rem 0.95rem; border-radius: 999px;
  color: var(--white); text-decoration: none; font-weight: 550;
  transition: background 0.2s ease;
}
.nav-links a:hover, .nav-links a:focus-visible { background: rgba(255, 255, 255, 0.22); }
.nav-links a[aria-current="page"] { background: rgba(255, 255, 255, 0.3); }

/* ============================== hero ============================== */

/* Full first viewport: the coral bed (bottom of this flex column) must TOUCH
   the fold — no strip of open water under the reef on first paint (Ben,
   shift 6). svh with vh fallback for older browsers. */
.hero {
  position: relative; min-height: max(100vh, 620px);
  min-height: max(100svh, 620px);
  display: flex; flex-direction: column;
  padding: calc(3vh + 78px) 1.4rem 0; /* clears the overlaid header */
  /* Cliff width drives the whole cliff-side composition. The 26vh/svh term
     guarantees the wall (aspect 680:2667 -> height = 3.92x width) always
     reaches the top of the hero — its top/right/bottom cuts bleed offscreen,
     only the artist's natural left silhouette shows. */
  --cliffw: max(clamp(200px, 19vw, 380px), 26vh);
  --cliffw: max(clamp(200px, 19vw, 380px), 26svh);
}
/* The right cliff wall from the app's focus-dive scene (fdc-* layers).
   z1: behind the reef (z2 — Monke + corals paint in front) and content (z3). */
.hero-cliff {
  position: absolute; right: 0; bottom: 0;
  width: var(--cliffw); height: auto;
  z-index: 1; pointer-events: none;
}
.hero-content {
  position: relative; z-index: 3;
  margin: 6vh auto 0;
  width: 100%; max-width: var(--shell-max);
}
/* Short viewports: tuck the content up so the hero (content + reef) still
   fits ~one screen and the scroll cue stays at/above the fold. */
@media (max-height: 860px) {
  .hero-content { margin-top: 2vh; }
}
.eyebrow {
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 0.85rem; color: rgba(255, 255, 255, 0.92); margin: 0 0 0.6rem;
  text-shadow: 0 1px 0 rgba(9, 70, 110, 0.3);
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  line-height: 1.02; margin: 0 0 1rem; color: var(--white);
  text-shadow: 0 3px 0 rgba(9, 70, 110, 0.28), 0 10px 30px rgba(4, 48, 80, 0.35);
}
.hero-copy {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.55;
  max-width: 34em; color: #eefcff; margin: 0 0 1.6rem;
  text-shadow: 0 1px 0 rgba(9, 70, 110, 0.25);
}
.store-cta { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.store-link { display: inline-block; border-radius: 12px; transition: transform 0.2s ease; }
.store-link:hover { transform: translateY(-2px) scale(1.02); }
.cta-note { color: #eefcff; margin: 0.4rem 0 0; }
.proof-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  list-style: none; margin: 0; padding: 0;
  color: rgba(255, 255, 255, 0.95); font-weight: 500; font-size: 0.98rem;
  /* Same ink shadow family as .hero-copy/.hero h1 — on narrow locale pages
     the longer proof lines cross Monke's orange suit and the cliff, and this
     was the only hero text block relying on bare white (shift-7 cleanup). */
  text-shadow: 0 1px 0 rgba(9, 70, 110, 0.3), 0 2px 12px rgba(4, 48, 80, 0.5);
}
.proof-row li { display: flex; align-items: center; gap: 0.45rem; }
.proof-row li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--banana); box-shadow: 0 0 8px rgba(255, 212, 71, 0.8);
}

/* The reef floor: coral bed + Monke (241-frame hand-drawn loop) sitting in it.
   overflow-x: clip — coral-base has min-width 900px so the sand keeps believable
   scale on phones; the clip stops it creating horizontal layout overflow
   (mobile Safari rubber-band) while keeping Monke and coral tops unclipped. */
.hero-reef {
  position: relative; z-index: 2; margin: auto -1.4rem 0;
  pointer-events: none;
  overflow-x: clip;
}
/* The COMPLETE coral bed (shift 7): all twenty Coral_* groups of the
   artist's paywall PSD at their authored positions in ONE image — no more
   single stalks lined up evenly ("floating there in a line", Ben). */
.coral-bed { position: relative; height: clamp(150px, 24vw, 300px); }
.coral-bed img { position: absolute; bottom: -2px; }
.coral-base { left: 0; width: 100%; min-width: 900px; z-index: 1; }
/* The one sea star (Ben: "you can have a sea star somewhere") — the artist's
   submarine-seastar, resting static on the sand between coral clusters. */
.coral-bed .sea-star {
  left: 36%; bottom: 4px; width: clamp(42px, 4.6vw, 88px);
  z-index: 2; transform: rotate(-10deg);
}

/* Monke seated ON the cliff (shift 7 — Ben: "get more of the cliff there so
   he's actually sitting against it"). All of his geometry is a function of
   --cliffw, and the cliff is width-sized with height:auto (aspect fixed), so
   the ledge under his butt sits at the SAME image fraction at every viewport
   — seat contact never drifts. The wrapper is static; only the video floats
   (±2px, far smaller than the butt/ledge overlap). */
.hero-monke {
  position: absolute;
  right: calc(var(--cliffw, 280px) * 0.30);
  bottom: calc(var(--cliffw, 280px) * 0.44);
  z-index: 2; width: min(calc(var(--cliffw, 280px) * 1.02), 400px);
  filter: drop-shadow(0 14px 22px rgba(3, 42, 71, 0.35));
}
@keyframes monke-float {
  from { transform: translateY(-2px) rotate(-0.35deg); }
  to   { transform: translateY(2px) rotate(0.4deg); }
}
.hero-monke__video {
  width: 100%; height: auto; display: block;
  position: relative; z-index: 2;
  animation: monke-float 6.5s ease-in-out infinite alternate;
}
.monke-seat { position: absolute; left: 50%; transform: translateX(-50%); }
/* (the hero seat rock is gone — the cliff ledge is the seat now; the rock
   remains under gold Monke on the Certified card) */

.scroll-cue {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(10px, 2.4vw, 26px); z-index: 4;
  color: var(--white); text-decoration: none; font-weight: 600;
  background: rgba(9, 70, 110, 0.55); backdrop-filter: blur(4px);
  padding: 0.45rem 1.1rem; border-radius: 999px;
  animation: cue-bob 2.6s ease-in-out infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

/* ============================== sections ============================== */

.page-section { position: relative; z-index: 3; padding: clamp(3rem, 7vh, 5.5rem) 1.4rem; }
.section-shell { max-width: var(--shell-max); margin: 0 auto; }
.section-card {
  background: var(--paper);
  border-radius: 26px;
  border: 2px solid var(--paper-edge);
  box-shadow: 0 18px 50px rgba(3, 42, 71, 0.35);
  padding: clamp(1.6rem, 4vw, 3rem);
}
.kicker {
  font-family: var(--hand); font-size: 1.2rem; color: var(--monke-orange);
  margin: 0 0 0.4rem;
}
.section-card h2 {
  font-family: var(--display); color: var(--ink);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; margin: 0 0 0.8rem;
}
.section-heading { max-width: 46em; }
.section-heading p:not(.kicker) { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.6; }

.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem; margin-top: 1.8rem;
}
.feature {
  background: var(--white); border-radius: 18px; padding: 1.2rem 1.3rem;
  border: 2px solid var(--paper-edge);
}
.feature h3 { font-family: var(--display); margin: 0 0 0.5rem; font-size: 1.15rem; }
.feature p { margin: 0; line-height: 1.55; color: var(--ink-soft); }

/* Feature card art — the artist's own app pieces (START plank, submarine,
   grinning Monke + banana). Fixed-height stage keeps the three cards level. */
.feature-art {
  height: 130px; margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.feature-art img {
  max-height: 100%; width: auto; max-width: 100%;
  filter: drop-shadow(0 6px 10px rgba(3, 42, 71, 0.18));
}
.feature-art--reward { position: relative; }
.feature-art--reward .reward-monke { max-height: 92%; }
.feature-art--reward .reward-banana {
  position: absolute; width: 74px; right: calc(50% - 108px); bottom: -4px;
  transform: rotate(-14deg);
}
.feature:hover .feature-art img { animation: art-pop 0.45s ease; }
@keyframes art-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06) rotate(-1.5deg); }
  100% { transform: scale(1); }
}
.feature:hover .feature-art--reward .reward-banana {
  animation: none; /* keep the banana's rotation transform intact */
}

.fish-parade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem; margin: 1.8rem 0 0.6rem;
}
.fish-parade figure { margin: 0; text-align: center; }
.fish-parade img {
  width: 100%; max-width: 190px; transition: transform 0.25s ease;
}
.fish-parade figure:hover img { transform: translateY(-6px) rotate(-2deg); }
.fish-parade figcaption { font-family: var(--hand); font-size: 1.05rem; color: var(--ink-soft); }
.reef-rumor { font-family: var(--hand); font-size: 1.2rem; color: var(--ink-soft); margin: 1rem 0 0; }

/* "Your reef" with Monke's selfie (MonkeSelfie app art) on the right. */
.reef-card { display: grid; grid-template-columns: 1.55fr 0.75fr; gap: 2rem; align-items: center; }
.reef-selfie { margin: 0; text-align: center; }
.reef-selfie img {
  width: min(230px, 100%); height: auto;
  filter: drop-shadow(0 12px 20px rgba(3, 42, 71, 0.25));
  transform: rotate(2deg); transition: transform 0.25s ease;
}
.reef-selfie:hover img { transform: rotate(-1deg) translateY(-4px); }
.reef-selfie figcaption { font-family: var(--hand); font-size: 1.1rem; color: var(--ink-soft); margin-top: 0.5rem; }

.pro-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; }
.pro-copy ul { padding-left: 1.2rem; line-height: 1.7; }
.pro-note { font-weight: 600; }
.pricing { display: flex; flex-direction: column; gap: 0.8rem; justify-content: center; }
/* Gold-suit Monke (MonkeNotesGoldFrames loop) crowning the pricing column. */
.gold-monke { display: flex; justify-content: center; margin-bottom: 0.2rem; position: relative; }
.gold-monke video {
  width: min(210px, 52vw); height: auto;
  position: relative; z-index: 1;
  filter: drop-shadow(0 10px 18px rgba(3, 42, 71, 0.3));
}
/* Gold Monke gets the same artist rock so he isn't hovering over the card. */
.gold-monke .monke-seat { z-index: 0; bottom: -2%; width: min(276px, 68vw); }
.price {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  background: var(--white); border: 2px solid var(--paper-edge);
  border-radius: 16px; padding: 0.9rem 1.2rem;
}
.price.best { border-color: var(--banana); box-shadow: 0 0 0 3px rgba(255, 212, 71, 0.35); }
.price-name { font-weight: 600; }
.price-name small { display: block; font-weight: 500; color: var(--monke-orange); }
.price-value { font-family: var(--display); font-size: 1.3rem; white-space: nowrap; }
.price-value small { font-family: var(--body); font-size: 0.85rem; color: var(--ink-soft); }

.challenge-teaser .section-card { text-align: center; }
.challenge-teaser p { max-width: 40em; margin-inline: auto; }
.button {
  display: inline-block; margin-top: 1rem;
  background: var(--banana); color: var(--ink);
  font-family: var(--display); font-size: 1.1rem; text-decoration: none;
  padding: 0.75rem 1.6rem; border-radius: 999px;
  box-shadow: 0 4px 0 rgba(3, 42, 71, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(3, 42, 71, 0.25); }

/* ============================== footer ============================== */

.site-footer {
  position: relative; z-index: 3; margin-top: 2rem;
  background: linear-gradient(180deg, rgba(3, 42, 71, 0) 0%, rgba(3, 42, 71, 0.55) 30%, rgba(2, 26, 45, 0.85) 100%);
  color: #d9f2ff; padding: 4rem 1.4rem 2rem;
}
.footer-shell { max-width: var(--shell-max); margin: 0 auto; }
.footer-brand { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.2rem; }
.footer-brand img { border-radius: 12px; }
.footer-brand strong { font-family: var(--display); font-size: 1.2rem; display: block; }
.footer-brand span { font-family: var(--hand); }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  list-style: none; margin: 0 0 1.2rem; padding: 0;
}
.footer-links a { color: #d9f2ff; text-decoration: none; font-weight: 500; }
.footer-links a:hover { text-decoration: underline; }
.pricing-note { font-size: 0.8rem; opacity: 0.72; margin: 0.7rem 0 0; }
.footer-langs { gap: 0.35rem 1rem; margin-bottom: 1.1rem; font-size: 0.92rem; }
.footer-langs a { color: rgba(217, 242, 255, 0.78); font-weight: 400; }
.footer-langs a[aria-current="true"] { color: #ffffff; font-weight: 600; text-decoration: underline; }
.copyright { font-size: 0.9rem; color: rgba(217, 242, 255, 0.75); }

/* ============================== subpages ==============================
   (page-hero/page-main/content-card shells; full restyle lands in a later
   shift, but they inherit the ocean + card system now.) */

.page-hero { position: relative; z-index: 3; padding: clamp(2rem, 6vh, 4rem) 1.4rem 1rem; }
.page-hero .page-shell, .page-main .page-shell { max-width: 880px; margin: 0 auto; }
.page-hero h1 {
  font-family: var(--display); color: var(--white);
  font-size: clamp(2.1rem, 5vw, 3.2rem); margin: 0.2rem 0 0.6rem;
  text-shadow: 0 3px 0 rgba(9, 70, 110, 0.28);
}
.page-hero p { color: #eefcff; font-size: 1.1rem; max-width: 40em; text-shadow: 0 1px 2px rgba(9, 70, 110, 0.45); }
.page-main { position: relative; z-index: 3; padding: 1rem 1.4rem 3rem; }
.content-card {
  background: var(--paper); border: 2px solid var(--paper-edge);
  border-radius: 26px; box-shadow: 0 18px 50px rgba(3, 42, 71, 0.35);
  padding: clamp(1.6rem, 4vw, 2.6rem); margin-bottom: 1.6rem;
}
.content-card h2 { font-family: var(--display); font-size: 1.5rem; }
.content-card a { color: var(--mid); }

.faq-list { display: grid; gap: 0.9rem; }
.faq-item {
  background: var(--white); border: 2px solid var(--paper-edge);
  border-radius: 16px; padding: 0.4rem 1.2rem;
}
.faq-item summary { font-weight: 600; cursor: pointer; padding: 0.7rem 0; }
.faq-answer { padding-bottom: 0.9rem; line-height: 1.6; color: var(--ink-soft); }

.reward-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.reward {
  background: var(--white); border: 2px solid var(--paper-edge);
  border-radius: 16px; padding: 1rem; text-align: center;
}
.reward-likes { font-family: var(--display); font-size: 1.3rem; display: block; }
.reward-term { color: var(--ink-soft); display: block; }
.callout {
  background: rgba(255, 212, 71, 0.25); border: 2px solid var(--banana);
  border-radius: 16px; padding: 1rem 1.2rem;
}
.hashtags { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; }
.hashtag {
  background: var(--white); border: 2px solid var(--paper-edge);
  border-radius: 999px; padding: 0.3rem 0.9rem; font-weight: 550;
}
.pro-tips { line-height: 1.7; }
.closing-line { font-family: var(--hand); font-size: 1.25rem; }

/* (Legacy .aquarium markup removed 2026-08-05: every page now runs the
   rigged-fish ocean engine — #ocean-life + .ocean shell, site.js cast.) */

/* ============================== 404 ==============================
   The only page pinned at depth: being lost IS being deep. The ocean div
   carries an inline --depth (no #ocean id, so scroll never surfaces it),
   and the anglerfish (real app art, unused elsewhere) is the local. */

.lost-card { text-align: center; }
.lost-fish {
  width: min(320px, 70vw); margin: 0.4rem auto 0.2rem; display: block;
  filter: drop-shadow(0 0 22px rgba(255, 212, 71, 0.35)) drop-shadow(0 10px 18px rgba(2, 20, 35, 0.5));
  animation: lost-drift 7s ease-in-out infinite alternate;
}
@keyframes lost-drift {
  from { transform: translateY(-6px) rotate(-1.4deg); }
  to   { transform: translateY(8px) rotate(1.2deg); }
}
.lost-caption { font-family: var(--hand); color: var(--ink-soft); margin: 0 0 1rem; }
.lost-log { font-family: var(--hand); font-size: 1.15rem; color: var(--ink-soft); margin: 1.2rem 0 0; }

/* ============================== responsive ============================== */

@media (max-width: 860px) {
  .pro-card { grid-template-columns: 1fr; }
  .reef-card { grid-template-columns: 1fr; }
  .reef-selfie img { width: min(190px, 60vw); }
}

@media (max-width: 720px) {
  .menu-toggle { display: grid; place-items: center; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 1rem; right: 1rem;
    background: var(--paper); border-radius: 18px; padding: 0.6rem;
    box-shadow: 0 18px 40px rgba(3, 42, 71, 0.4); z-index: 20;
    flex-direction: column;
  }
  .nav-shell { position: relative; }
  .nav-links.open { display: flex; }
  .nav-links a { color: var(--ink); }
  .nav-links a[aria-current="page"], .nav-links a:hover { background: rgba(72, 201, 229, 0.18); }
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero h1 br { display: none; }
  .hero-monke {
    right: calc(var(--cliffw, 220px) * 0.18);
    bottom: calc(var(--cliffw, 220px) * 0.42);
    width: calc(var(--cliffw, 220px) * 0.82);
  }
  .proof-row { flex-direction: column; gap: 0.45rem; }
}

/* ============================== motion safety ============================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rf, .rf__bob, .rf__art, .rf__part,
  .drifter, .bubble, .hero-monke, .hero-monke__video, .scroll-cue,
  .ocean__rays, .feature-art img, .lost-fish {
    animation: none !important;
  }
  .rf { transform: translateX(var(--rest-x, 20vw)); }
  .bubble { display: none; }
}