/* ============================================================
   GETTING STARTED PAGE
   Page-specific styles. Global tokens, type scale, buttons, nav,
   hero and footer come from styles.css — this file only adds what
   this page needs. Values are from the Figma "Getting Started Page"
   frame (1440px desktop comp).
============================================================ */
/* Mobile-only footer decoration scaffold — matches DinoDex's footer
   exactly; see the true-mobile @media (max-width: 640px) block below. */
.footer-deco-m { display: none; position: absolute; pointer-events: none; }

:root {
  --gs-heading: #2d2d2d;
  --gs-body: #3d3d3d;
  --gs-muted: #636363;
  --gs-gray: #919191;
  --gs-green: #95d363;
  --gs-pastel-green: #acd87d;
  --gs-pink: #f8c9dc;
  --gs-cream: #fff9e8;
  --gs-card-green: #236314;
  --gs-card-green-mid: #447838;
}

button {
  font-family: inherit;
  color: inherit;
}

strong { font-weight: 700; }

/* Small copy differences between the desktop and mobile comps */
.gs-mobile-only { display: none; }
.gs-line { display: block; } /* a sentence that starts on its own line */
/* <picture> wrappers only swap in the mobile artwork — they mustn't add a layout box */
.do-card__head picture { display: contents; }
.types > picture { position: absolute; inset: 0; pointer-events: none; } /* same box the flowers were positioned in */

/* Pastel green CTA ("CTA Button Hi-Fi" in Figma) */
.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  background: var(--gs-pastel-green);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  filter: drop-shadow(0 0 2px rgba(125, 86, 24, 0.25));
  /* Same hover treatment as .btn-discord: an actual background-color swap
     (to the site's next green shade up) eased over 300ms, instead of a
     brightness(0.94) filter dim — a real color change reads as more of an
     "animation" than a filter darken. */
  transition: background-color 300ms ease;
}
.gs-btn:hover { background: var(--gs-green); }

/* ---------- Hero ---------- */
.hero--getting-started { height: 498px; }

/* ---------- Layout ---------- */
.gs-stack {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 100px var(--grid-margin) 0;
}
/* Matches DinoDex's 110px gap under its hero at laptop widths (e.g.
   MacBook, ~1512px) — also covers Flash Sales, which shares .gs-stack
   and doesn't override its padding-top at this width. */
@media (max-width: 1800px) {
  .gs-stack { padding-top: 110px; }
}

.gs-section { display: flex; flex-direction: column; gap: 24px; }

.gs-heading { display: flex; flex-direction: column; gap: 9px; }
.gs-heading__title { display: flex; align-items: center; gap: 16px; }
.gs-heading__title h2 { margin: 0; color: var(--gs-heading); }
.gs-heading__dot { width: 20px; height: 20px; flex-shrink: 0; }
.gs-heading__sub {
  margin: 0;
  font-weight: 600;
  font-size: var(--text-subtitle1-size);
  line-height: var(--text-subtitle1-lh);
  letter-spacing: var(--text-subtitle1-ls);
  color: var(--gs-body);
}
.gs-heading__copy {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.36px;
  color: var(--gs-body);
}
/* Comp: the first two lines run together, then a blank line (1.5 x 18px) between the rest */
.gs-heading__copy p { margin: 0 0 27px; }
.gs-heading__copy p:first-child,
.gs-heading__copy p:last-child { margin-bottom: 0; }
#during-drops .gs-heading__title { gap: 24px; }

.gs-doodle {
  position: relative;
  height: 259px;
  display: flex;
  justify-content: center;
}
.gs-doodle img { height: 259px; width: auto; max-width: 100%; }
/* The "When & Where" doodle is mirrored in the comp (X on the right) */
.gs-doodle--flip img { transform: scaleX(-1); }

.gs-arrow { display: flex; justify-content: center; }
/* The arrow SVG overhangs its 94.76px Figma frame by ~3px; don't let that add to the layout */
.gs-arrow img { width: 87px; height: auto; margin-bottom: -3.25px; }

/* ---------- Drop notifications (steps) ---------- */
/* Behaviour mirrors the Figma prototype: 5s timer per step, bar fills as a loading
   indicator, screenshot dissolves (0.3s ease-in) to the active step's image. */
.steps { display: flex; align-items: center; gap: 48px; }
.steps__list { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 50px; }
.steps__images {
  position: relative;
  flex: 0 0 654px;
  width: 654px;
  height: 532px;
  border-radius: 20px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.steps__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 300ms ease-in;
}
.steps__image.is-active { opacity: 1; }

.step {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--gs-gray);
}
.step__bar {
  position: relative;
  flex: 0 0 4px;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(145, 145, 145, 0.6);
}
.step__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gs-green);
  transform: scaleY(0); /* driven by the script: 0 -> 1 over 5s */
  transform-origin: top;
}
.step__body { flex: 0 1 612px; display: flex; flex-direction: column; gap: 16px; } /* 612px text column in the comp */
.step__title { margin: 0; }
.step__text {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
}
.step.is-active { color: var(--gs-body); }
.steps__nums { display: none; } /* mobile-only numbered picker */
.step:hover:not(.is-active) { color: var(--gs-body); }

/* ---------- Join Discord CTA ---------- */
.gs-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.gs-cta__title { margin: 0; padding: 10px; color: var(--gs-body); text-align: center; line-height: 1.2; }
.gs-cta__arrow { width: 87px; height: auto; margin-bottom: -3.25px; }

/* ---------- When & where ---------- */
.info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 29px;
  padding: 0 4px;
}
.info-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 329px;
  padding: 16px;
  background: #fff;
  border: 4px solid;
  border-radius: 20px;
  color: var(--gs-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  letter-spacing: -0.4px; /* as specified on these cards in the comp */
}
.info-card p { margin: 0; }
.info-card--blue { border-color: var(--color-accent-lightblue); }
.info-card--yellow { border-color: var(--color-accent-blonde); }
.info-card--green { border-color: var(--gs-pastel-green); }
.info-card__head { display: flex; align-items: center; gap: 24px; margin-bottom: 8px; }
.info-card__head img { height: 64px; width: auto; }
.info-card__head h3 { margin: 0; }

/* ---------- What to do / not to do ---------- */
/* In the comp the coloured header is its own bordered box laid over the top of the
   body box (whose top corners are tucked underneath it), and the two headers differ
   in height (101.6px / 89px) while the card bottoms line up. */
.do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 21px; align-items: stretch; }
.do-card { display: flex; flex-direction: column; }
.do-card__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 43px;
  border: 4px solid var(--gs-body);
  border-radius: 20px 20px 0 0;
}
.do-card__head img { width: 48px; height: 48px; }
.do-card__head h3 { margin: 0; color: var(--gs-body); line-height: 1.2; }
.do-card--do .do-card__head { height: 101.64px; background: var(--gs-pastel-green); }
/* Matched to the "What To Do" header's 101.64px so both headers are the same
   height at desktop (2560px) and laptop (1512px) widths — was 89px. */
.do-card--dont .do-card__head { height: 101.64px; background: var(--gs-pink); }
.do-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 50px;
  flex: 1;
  background: var(--color-bg);
  border: 4px solid var(--gs-body);
  border-radius: 12px 12px 20px 20px;
}
.do-card--do .do-card__body { margin-top: -11.42px; }
.do-card--dont .do-card__body { margin-top: -11.42px; }
/* Portrait cutouts, centre-cropped to the comp's 285.6 x 261.6 frame */
.do-card__art { width: 285.6px; height: 261.6px; max-width: 100%; object-fit: cover; flex-shrink: 0; }
.do-card__list { width: 100%; max-width: none; }
.do-card__list li {
  padding: 23px 7px; /* 23 + 2px rule + 23: the comp's zero-height lines sit in a 24px gap each side */
  border-top: 2px solid rgba(145, 145, 145, 0.5);
  font-weight: 600;
  font-size: var(--text-body-size);
  line-height: 1.3;
  letter-spacing: var(--text-body-ls);
  color: var(--gs-body);
}
.do-card__list li:first-child { border-top: 0; padding-top: 0; }
.do-card__list li:last-child { padding-bottom: 0; }

/* ---------- Dino limits ---------- */
.limits {
  padding: 16px;
  background: #fff;
  border: 4px solid var(--gs-pastel-green);
  border-radius: 20px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}
.limits__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-top: 2px solid rgba(145, 145, 145, 0.5);
  color: var(--gs-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
}
.limits__row:first-child { border-top: 0; padding-top: 0; }
.limits__row:last-child { padding-bottom: 0; }
.limits__row p { margin: 0; }
.limits__name { display: flex; align-items: center; gap: 24px; font-weight: 700; color: var(--gs-heading); }
.limits__name img { width: 63px; height: 55px; }

/* ---------- After finding a dino ---------- */
/* As in the comp: the columns are centred vertically, and the first one stretches to
   the row height with its screenshot filling the leftover space (so it's taller). */
#after-finding { gap: 16px; }
.after-find {
  display: flex;
  align-items: center;
  gap: 48px;
}
.after-find__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--gs-body);
}
.after-find__item:first-child { align-self: stretch; }
.after-find__item h3 { margin: 0 0 9px; }
.after-find__item p {
  margin: 0 0 24px;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
}
.after-find__item:first-child p { font-size: 18px; } /* 18px in the comp, unlike its neighbours */
.after-find__item:first-child .after-find__shot { flex: 1 0 334px; }
.after-find__shot {
  position: relative;
  flex: none;
  height: 334px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.after-find__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Zoomed crop of the #general-qna screenshot, matching the Figma crop */
.after-find__shot--qna img {
  inset: auto;
  max-width: none;
  width: 204.38%;
  height: 136.83%;
  left: -7.72%;
  top: -27.83%;
}

/* ---------- Flash sales CTA ---------- */
.flash {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 100px var(--grid-margin);
}
.flash__image { position: relative; width: 494px; height: 470px; flex-shrink: 0; }
.flash__photo { position: absolute; left: 18px; top: 10px; width: 458px; height: 458px; max-width: none; }
.spark { position: absolute; max-width: none; }
.spark--1 { width: 58.466px; height: 82.771px; left: 31.9px;  top: -2.1px;  transform: rotate(144.58deg) scaleY(-1); }
.spark--2 { width: 31.084px; height: 44.007px; left: 10.9px;  top: 69px;    transform: rotate(114.58deg) scaleY(-1); }
.spark--3 { width: 58.466px; height: 82.771px; left: 432.2px; top: 373.1px; transform: rotate(-49.09deg) scaleY(-1); }
.spark--4 { width: 31.084px; height: 44.007px; left: 467.3px; top: 334px;   transform: rotate(-79.09deg) scaleY(-1); }

.flash__text {
  position: relative;
  width: 556px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}
.flash__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 65px;
  line-height: normal;
  color: var(--gs-heading);
}
.flash__sub {
  margin: 0 0 16px;
  font-weight: 500;
  font-size: 32px;
  line-height: normal;
  color: var(--gs-muted);
}
.flash__arrow {
  position: absolute;
  left: 564.9px;
  top: 94.5px;
  width: 140.7px;
  height: 111.9px;
  max-width: none;
  transform: rotate(-78.99deg) scaleY(-1);
  pointer-events: none;
}

/* ---------- Discover drop types ---------- */
.types {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 50px var(--grid-margin);
  background: linear-gradient(to bottom, #ebffd5 0%, #acd87d 45.673%);
}
.types__flowers {
  position: absolute;
  left: 50%;
  top: 153px;
  width: 1442px;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}
.types__heading { position: relative; width: 100%; padding: 10px 0; }
.types__heading .gs-heading__title { gap: 24px; }
.types__intro { margin: 0; font-size: 24px; line-height: normal; color: var(--gs-body); }

.types__group { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.types__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 525px;
  height: 78px;
  background: url('assets/getting-started/banner-1.svg') center / 100% 100% no-repeat;
}
.types__banner h3 { margin: 0; color: var(--gs-heading); line-height: 1.2; }
.types__sprout { width: 40px; height: 40px; }
.types__sprout--l { transform: rotate(-16deg); }
.types__sprout--r { transform: rotate(16deg); }

.types__panel {
  display: flex;
  gap: 28px;
  padding: 24px 34px;
  border-radius: 24px;
  filter: drop-shadow(0 1px 2px rgba(125, 86, 24, 0.4));
}
.types__panel--common { background: #ecffd8; }
.types__panel--rare { background: #d9d8ff; }

/* Common drop cards */
.common-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 298px;
  height: 410px;
  padding: 16px 8px;
  background: var(--gs-cream);
  border: 6px solid var(--gs-green);
  border-radius: 24px;
  text-align: left;
  color: var(--gs-card-green);
  cursor: pointer;
  transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}
.common-card:hover,
.common-card:focus-visible { transform: scale(1.02) rotate(-2deg); box-shadow: 0 4px 4px rgba(81, 81, 81, 0.4); }
.common-card:nth-child(even):hover,
.common-card:nth-child(even):focus-visible { transform: scale(1.02) rotate(2deg); }
.common-card > * { width: 254px; flex-shrink: 0; }

.common-card__type,
.rare-card__type { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: 0.4px; }
.common-card__type { padding: 4px 6px; }
.common-card__type img { width: 24px; height: 24px; }

.common-card__art {
  position: relative;
  display: block;
  width: 255px;
  height: 190px;
  overflow: hidden;
  border: 2px solid var(--gs-card-green-mid);
  border-radius: 8px;
}
.common-card__art img { position: absolute; max-width: none; }
.common-card__art--green  { background: linear-gradient(to bottom, rgba(172, 216, 125, 0), #acd87d); }
.common-card__art--yellow { background: linear-gradient(to bottom, rgba(255, 246, 192, 0), #fff6c0); }
.common-card__art--pink   { background: linear-gradient(to bottom, rgba(248, 201, 220, 0), #f8c9dc); }

.common-card__desc { padding: 0 10px; font-size: 16px; line-height: normal; flex: 1; }
.common-card__more { padding: 0 10px; font-weight: 700; font-size: 14px; }
.common-card__foot,
.rare-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 2px;
  border-top: 1px solid var(--gs-card-green-mid);
  font-weight: 700;
  font-size: 10px;
  color: var(--gs-card-green-mid);
}
.common-card__foot { margin-top: 0; width: 252px; }
.common-card__tag,
.common-card__brand,
.rare-card__tag,
.rare-card__brand { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.common-card__tag img { width: 8px; height: 8px; }
.common-card__brand img,
.rare-card__brand img { width: 18px; height: 14px; }

/* Rare drop cards */
.rare-card {
  position: relative;
  display: block;
  width: 298px;
  height: 410px;
  padding: 0;
  border: 6px solid transparent; /* no overflow:hidden — it would clip the shine, which sits on this border */
  border-radius: 24px;
  /* Holographic 6px stroke. In Figma it's four stacked stroke paints (grey, a radial
     rainbow gradient, then two angular gradients in difference/screen blend modes);
     rare-border.png is that stroke rendered from the exact paint values at 2x. */
  background: url('assets/getting-started/rare-border.png') center / 100% 100% no-repeat border-box;
  text-align: left;
  color: var(--gs-card-green);
  cursor: pointer;
  transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}
/* Figma "RHover": 2% bigger with a white glow, border unchanged (0.25s ease-out) */
.rare-card:hover,
.rare-card:focus-visible {
  transform: scale(1.02) rotate(-2deg);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.7);
  animation: rare-shine 5.6s linear infinite;
}
.rare-card:nth-child(even):hover,
.rare-card:nth-child(even):focus-visible { transform: scale(1.02) rotate(2deg); }

/* "Card Shine": a white comet-tail light that travels clockwise around the border only.
   Figma steps it Lower Right -> Bottom Left -> Upper Left -> Upper Right, 1.4s each,
   linear, looping — i.e. one full lap every 5.6s. It's an angular gradient (clear for
   the first 75%, ramping to 50% white at the head) on a 6px inside stroke, drawn twice:
   sharp (::after) and blurred 8px at double strength (.rare-card__shine). */
@property --shine-angle { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@keyframes rare-shine { to { --shine-angle: 360deg; } }

.rare-card::after,
.rare-card__shine::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 6px solid transparent;
  border-radius: inherit;
  background: conic-gradient(from calc(180deg + var(--shine-angle)), transparent 0 75%, var(--shine-head) 100%) border-box;
  /* keep only the 6px ring */
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.rare-card::after,
.rare-card__shine {
  position: absolute;
  inset: -6px; /* the card's own border box */
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease-out;
}
.rare-card::after { --shine-head: rgba(255, 255, 255, 0.5); }
.rare-card__shine { --shine-head: rgba(255, 255, 255, 0.75); filter: blur(8px); } /* two 50% strokes stacked */
.rare-card:hover::after,
.rare-card:hover .rare-card__shine,
.rare-card:focus-visible::after,
.rare-card:focus-visible .rare-card__shine { opacity: 1; }
.common-card:focus-visible, .rare-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rare-card__art { position: absolute; inset: 0; overflow: hidden; border-radius: 18px; }
.rare-card__art img { position: absolute; max-width: none; }
.rare-card__box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 10px 14px;
}
.rare-card__type {
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
}
.rare-card__type img { width: 28px; height: 28px; }
.rare-card__spacer { height: 190px; flex-shrink: 0; }
.rare-card__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 130px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 0 0 8px 8px;
}
.rare-card__desc { flex: 1; font-size: 16px; line-height: normal; }
.rare-card__more { font-weight: 700; font-size: 14px; }
.rare-card__tag img { width: 14px; height: 14px; }

/* ---------- Drop type overlay ---------- */
/* Two-page "binder" from the Figma "Drop Type Overlay Ver2." component, 1065x570 at desktop. */
html.has-overlay { overflow: hidden; }
.drop-overlay {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  /* align/justify/flex-direction/gap live here unconditionally (not under
     [open]) so they stay put for the whole close transition: the "open"
     attribute is removed the instant close() is called, but allow-discrete
     keeps display: flex a little longer below so opacity/transform can ease
     out. If align/justify were only set under [open] they'd snap to their
     (left-aligned) initial values at that same instant, so the content
     visibly jumped to the left just before it faded out — this keeps it
     centered for the whole close animation.
     Pops in/out like the community photo lightbox, scaling up from slightly
     smaller + faded rather than just snapping open. allow-discrete lets the
     transition pick up display/overlay's otherwise-instant none<->flex jump,
     and this resting (closed) state is also the @starting-style for [open]
     so it animates FROM here on open and back TO here on close. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 250ms ease-out, transform 250ms ease-out, display 250ms allow-discrete, overlay 250ms allow-discrete;
}
.drop-overlay[open] {
  display: flex;
  opacity: 1;
  transform: scale(1);
}
@starting-style {
  .drop-overlay[open] { opacity: 0; transform: scale(0.85); }
}
.drop-overlay::backdrop {
  background: rgba(38, 38, 38, 0.4);
  opacity: 0;
  transition: opacity 250ms ease-out, display 250ms allow-discrete, overlay 250ms allow-discrete;
}
.drop-overlay[open]::backdrop { opacity: 1; }
@starting-style {
  .drop-overlay[open]::backdrop { opacity: 0; }
}
.drop-overlay__stage { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }

/* Pagination dots for the common/rare carousels inside the overlay — same
   dot-grows-into-a-pill pattern as .gallery__dot on the home page's Meet Our
   Community carousel. Desktop/laptop only (the binder's prev/next arrows);
   hidden at the ≤1200px .drop-sheet breakpoints below, which page between a
   single card's two tabs with .drop-sheet__dot instead. Script.js populates
   one button per drop type into whichever of the two groups matches it, and
   toggles which group is visible to match the open card. */
.drop-overlay__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.drop-overlay__dots[hidden] { display: none; }

.drop-overlay__dot {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #ebe6a0; /* same pale-yellow dot/active-yellow pair as .gallery__dot's SVG/--color-yellow */
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.drop-overlay__dot.is-active {
  width: 36px;
  background: #f2e35d;
}

.drop-arrow {
  position: relative;
  flex: 0 0 46.64px;
  width: 46.64px;
  height: 68.06px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 150ms ease-out;
}
.drop-arrow:hover { transform: scale(1.08); }
.drop-arrow:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 8px; }
.drop-arrow img { position: absolute; left: -5.02%; top: 0; width: 105.02%; height: 107.73%; max-width: none; }

.binder {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 10px;
  background: var(--gs-green);
  border-radius: 24px;
  filter: drop-shadow(0 4px 2px rgba(105, 76, 34, 0.25));
  /* Same slide-and-fade pattern as .drop-sheet__page's Overview/Rules swipe
     (same class names, same 180ms/18px), driven by navigate() in the script
     below: switching drop types slides this whole card (frame, pages, grass,
     binder holes — everything) out, swaps its content while off-screen, then
     slides the next one in from the other side, rather than the content
     just snapping to the next item. The arrows and pagination dots live
     outside .binder, so they stay put. */
  transition: transform 180ms ease, opacity 180ms ease;
}
.binder.is-offset-left { transform: translateX(-18px); opacity: 0; }
.binder.is-offset-right { transform: translateX(18px); opacity: 0; }
.binder__page {
  position: relative;
  flex: 0 0 450px;
  width: 450px;
  height: 550px;
  background: var(--color-bg);
  overflow: hidden;
}
.binder__page--photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-radius: 16px 0 0 16px;
}
.binder__page--text { border-radius: 0 16px 16px 0; }

.binder__photo {
  position: relative;
  width: 298px;
  height: 360px;
  border: 4px solid #687144;
  border-radius: 8px;
  overflow: hidden;
  background: #d9d9d9;
}
.binder__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.binder__count { margin: 0; font-weight: 700; font-size: 16px; color: #687144; }

.binder__grass { position: absolute; bottom: -1px; height: 43px; max-width: none; pointer-events: none; }
.binder__grass--left { left: -15px; width: 465px; }
.binder__grass--right { left: 0; width: 459px; }

.binder__sprout {
  position: absolute;
  left: 22px;
  top: 51px;
  width: 38.45px;
  height: 34.01px;
  max-width: none;
  /* The sprout's stem (its attachment point) sits at the bottom-center of
     its own artwork, not the box center, so the rotation pivots around
     that point instead of swinging the whole box — keeps the stem touching
     the title's first letter instead of drifting away from it. */
  transform-origin: 50% 100%;
  transform: rotate(-30deg);
}
.binder__close {
  position: absolute;
  z-index: 2; /* .binder__text is positioned and comes later, so without this it covers the button */
  top: 17.5px;
  right: 17.5px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}
.binder__close img { display: block; width: 36px; height: 36px; transform: rotate(-45deg); }
.binder__close:focus-visible { outline: 3px solid #687144; outline-offset: 2px; }

.binder__text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 61px 30px 0;
}
.binder__heading { width: 100%; padding: 0; }
.binder__heading h2 {
  margin: 0;
  padding: 2px 4px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 43px;
  line-height: normal;
  color: #687144;
}
.binder__heading p { margin: 0; padding: 2px 4px; font-size: 14px; color: #676767; white-space: nowrap; }
.binder__bullets { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.binder__bullets li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px; }
.binder__bullets img { flex: 0 0 22.75px; width: 22.75px; height: 22.75px; padding: 2px; }
.binder__bullets p { flex: 1; min-width: 0; margin: 0; font-size: 16px; line-height: normal; color: var(--gs-body); }
.binder__cta[hidden] { display: none; }

/* Mobile pop-up card (the Figma "… Pop-up" frames); only shown at ≤640px */
.drop-sheet { display: none; }

/* Swipe transition between the card's two pages (Overview/Rules): only
   one page is ever unhidden at a time (the layout doesn't support
   stacking both to cross-slide), so this fades/slides the outgoing page
   out, then the incoming page in from the opposite side — see showPage()
   in the script below. Shared across both drop-sheet breakpoints since
   the card itself only ever renders at ≤1200px. */
.drop-sheet__page { transition: transform 180ms ease, opacity 180ms ease; }
.drop-sheet__page.is-offset-left { transform: translateX(-18px); opacity: 0; }
.drop-sheet__page.is-offset-right { transform: translateX(18px); opacity: 0; }

.binder__holes {
  position: absolute;
  left: 436.63px;
  top: 78.75px;
  width: 57.75px;
  height: 412.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 150px;
  pointer-events: none;
}
.binder__holes img { width: 57.75px; height: 19.5px; max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .common-card, .rare-card, .drop-arrow, .drop-sheet__dot, .drop-sheet__page, .drop-sheet, .drop-overlay, .drop-overlay::backdrop, .drop-overlay__dot, .binder { transition: none; }
  .rare-card:hover, .rare-card:focus-visible { animation: none; } /* shine stays put */
}

/* ---------- FAQ ---------- */
.faq-wrap { margin-top: 10px; padding: 100px 54px; }
.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 38px 48px;
  background: var(--gs-cream);
  border-radius: 24px;
  box-shadow: 0 1px 4px rgba(125, 86, 24, 0.4);
}
.faq__title { display: flex; align-items: center; justify-content: center; gap: 16px; }
.faq__title img { width: 71px; height: 62px; }
.faq__title h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  color: var(--gs-heading);
  text-align: center;
}
/* The comp's list is 1286px wide inside a 1236px content box — it runs 25px into the box padding each side */
.faq__list { display: flex; gap: 22px; width: calc(100% + 50px); max-width: 1286px; margin: 0 -25px; padding: 4px 12px; }
.faq__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
/* Each item toggles between Figma's "Default" (92px) and "FAQ Open" variants, 0.3s ease-out. */
.faq-item {
  background: var(--color-bg);
  border-radius: 16px;
  filter: drop-shadow(0 1px 2px rgba(81, 81, 81, 0.16));
  transition: filter 300ms ease-out;
}
.faq-item.is-open { filter: drop-shadow(0 4px 2px rgba(81, 81, 81, 0.16)); }
.faq-item__q {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 92px;
  padding: 16px 28px;
  background: none;
  border: 0;
  border-radius: 16px;
  text-align: left;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.4px;
  color: var(--gs-heading);
  cursor: pointer;
  transition: padding 300ms ease-out, min-height 300ms ease-out;
}
.faq-item__q:focus-visible { outline: 3px solid var(--gs-pastel-green); outline-offset: 2px; }
.faq-item__q > span:first-child { flex: 1; }
.faq-item.is-open .faq-item__q { min-height: 78px; padding-top: 18px; padding-bottom: 0; }

.faq-item__icon { position: relative; flex: 0 0 44px; height: 56px; }
.faq-item__icon img { position: absolute; max-width: none; transition: opacity 300ms ease-out; }
.faq-item__plus { inset: 0; width: 44px; height: 56px; }
.faq-item__minus { left: 6px; top: 26px; width: 32.17px; height: 4px; opacity: 0; }
.faq-item.is-open .faq-item__plus { opacity: 0; }
.faq-item.is-open .faq-item__minus { opacity: 1; }

/* Height animates 0 -> auto via the grid-template-rows 0fr/1fr trick */
.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease-out;
}
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a-clip { overflow: hidden; min-height: 0; }
.faq-item__a-body {
  padding: 10px 28px 28px;
  font-size: 20px;
  line-height: normal;
  color: var(--gs-heading);
}
.faq-item__a-body p { margin: 0; }
.faq-item__a-body p + p { margin-top: 1.3em; }
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item__q, .faq-item__icon img, .faq-item__a { transition: none; }
}
.faq__more { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 2px; }
.faq__more p { margin: 0; font-size: 22px; color: var(--color-text); }

/* On this page the footer grass rises over the FAQ section, overlapping the box's bottom 30px */
.footer-grass { position: relative; margin-top: -130px; background-color: transparent; }

/* ============================================================
   TABLET / NARROW DESKTOP (no comp for these widths)
   Just stacks the multi-column layouts so nothing overflows.
   640px and below gets the real mobile layout further down.
============================================================ */
@media (max-width: 1200px) {
  .flash__arrow { display: none; }
  .types__panel--rare { flex-wrap: wrap; justify-content: center; }
  .steps { flex-direction: column; align-items: stretch; }
  .steps__images { flex: none; width: 100%; height: auto; aspect-ratio: 654 / 532; }
  .info-cards,
  .do-dont { grid-template-columns: 1fr; }
  .after-find { flex-direction: column; align-items: stretch; }
  .after-find__item:first-child .after-find__shot { flex: none; }
  .limits__row { grid-template-columns: 1fr; }
  .faq__list { flex-direction: column; width: 100%; margin: 0; }
  .flash { flex-direction: column; }
  .flash__text { align-items: center; text-align: center; width: 100%; }
  .types__panel--common { flex-direction: column; align-items: center; }
}

/* ============================================================
   MOBILE LANDSCAPE — 641px to 1200px, from the Figma "Mobile Horizontal
   Page" frame (853px wide). It uses the vertical mobile type scale and
   48px section rhythm with a 752px content column (50.5px side margins,
   scaled with the viewport), and lays some sections out side by side.
   Overrides the tablet fallback above; ≤640px is the vertical layout below.
============================================================ */
@media (min-width: 641px) and (max-width: 1200px) {
  :root { --gs-side: 5.92vw; } /* 50.5px at 853px */
  .gs-mobile-only { display: inline; }

  /* ---------- Hero: 299px, text pinned to the bottom of the content column ---------- */
  .hero--getting-started { height: 299px; }
  .hero--getting-started .hero__bg img { object-position: center; }
  .hero--getting-started .hero__content { padding: 16px var(--gs-side); }
  .hero--getting-started .hero__title { font-size: 40px; line-height: 1.2; letter-spacing: 0.8px; }
  .hero--getting-started .hero__subtitle { font-size: 12px; line-height: 1.3; letter-spacing: 0.24px; }

  /* ---------- Shared section pieces ---------- */
  .gs-stack { padding: 48px var(--gs-side) 0; gap: 48px; }
  .gs-heading { gap: 16px; }
  .gs-heading__title,
  #during-drops .gs-heading__title { gap: 24px; }
  .gs-heading__title h2 { font-size: 26px; line-height: 1.2; letter-spacing: 0.52px; text-wrap: balance; }
  .gs-heading__sub { font-size: 16px; line-height: 1.3; letter-spacing: 0.32px; }

  /* ---------- Drop notifications: screenshot left; number picker + active step right ---------- */
  .steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 24px 8.25%; /* two 345px columns, 62px apart, at 853px */
  }
  .steps__images {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 100%;
    height: auto;
    aspect-ratio: 345 / 259;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  }
  .steps__nums { grid-column: 2; grid-row: 1; display: flex; justify-content: space-between; }
  .steps__list { grid-column: 2; grid-row: 2; gap: 0; }
  .step { display: none; color: var(--gs-body); }
  .step.is-active { display: flex; }
  .step__bar { display: none; }
  .step__body { flex: 1 1 auto; }
  .step__title { font-size: 20px; line-height: 1.3; letter-spacing: 0.4px; }
  .step__text { font-size: 20px; line-height: 1.5; letter-spacing: 0.4px; }

  .steps__num {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 100px;
    background: #e0e0e0;
    cursor: pointer;
  }
  /* The currently-filling number: a slightly darker circle with a green
     ring held a couple pixels away from it, in the same green as the fill. */
  .steps__num.is-active {
    background: #cccccc;
    outline: 2px solid var(--gs-pastel-green);
    outline-offset: 2px;
  }
  .steps__num-fill { position: absolute; inset: 0; background: var(--gs-pastel-green); transform: scaleX(0); transform-origin: left; }
  .steps__num-label { position: relative; font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: 0.8px; color: var(--gs-body); }
  .steps__num:focus-visible { outline: 3px solid var(--gs-pastel-green); outline-offset: 2px; }

  /* ---------- Join Discord CTA ---------- */
  .gs-cta__title { max-width: 297px; font-size: 26px; letter-spacing: 0.52px; }
  .gs-cta .btn-discord { padding: 12px 24px; font-size: 18px; line-height: 1.3; letter-spacing: 0.9px; }

  /* ---------- When & where: 345px cards in a sideways row that runs off the right edge ---------- */
  .info-cards {
    display: flex;
    align-items: stretch; /* every card as tall as the tallest one */
    gap: 24px;
    margin-right: calc(-1 * var(--gs-side));
    padding: 0 var(--gs-side) 0 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .info-cards::-webkit-scrollbar { display: none; }
  /* 12px + the 4px border = the comp's 16px inset (its stroke doesn't take up layout space) */
  .info-card {
    flex: 0 0 345px;
    min-height: 0;
    padding: 12px;
    scroll-snap-align: start;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.32px;
  }
  .info-card__head img { height: 63.4px; }
  .info-card__head h3 { font-size: 20px; line-height: 1.3; letter-spacing: 0.4px; }
  .info-card--yellow .info-card__head { justify-content: center; }

  .gs-doodle,
  .gs-doodle img { height: 129.68px; } /* half-size doodles */

  /* ---------- What happens during drops (761px wide in the comp, 4.5px past the column each side) ---------- */
  #during-drops { gap: 24px; margin: 0 -4.5px; }
  #during-drops .gs-heading { gap: 24px; }
  .gs-heading__copy { font-size: 16px; letter-spacing: 0.32px; }
  .gs-heading__copy p { margin-bottom: 24px; }

  .do-dont { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  /* Header box: 76px, content top-aligned; the body tucks 11px up underneath it.
     Padding and title scale down below 853px so "What Not To Do" stays on one line. */
  .do-card--do .do-card__head,
  .do-card--dont .do-card__head { height: 76px; align-items: flex-start; padding: 16px min(27px, 3.17vw) 0; gap: 16px; border-width: 2px; }
  .do-card__head img { width: 28px; height: 28px; }
  .do-card__head h3 { font-size: min(26px, 3.05vw); letter-spacing: 0.52px; white-space: nowrap; }
  .do-card--do .do-card__body,
  .do-card--dont .do-card__body {
    margin-top: -11px;
    padding: 16px min(50px, 5.86vw);
    gap: 16px;
    border-width: 2px;
    border-radius: 0 0 20px 20px;
  }
  .do-card__art { width: 238px; height: 218px; }
  .do-card__list { width: 251px; max-width: 100%; }
  .do-card__list li {
    position: relative;
    padding: 16px 0;
    border-top: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.32px;
  }
  .do-card__list li + li::before { /* 4px rounded rule in the card's colour */
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 2px;
    background: var(--gs-pastel-green);
  }
  .do-card--dont .do-card__list li + li::before { background: var(--gs-pink); }

  /* ---------- Dino limits ---------- */
  #dino-limits { gap: 16px; }
  #dino-limits .gs-heading__sub { font-size: 20px; letter-spacing: 0.4px; }
  #dino-limits .gs-line { margin-top: 1.3em; }
  .limits__row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 0;
    border-top-color: var(--gs-pastel-green);
    font-size: 16px;
    letter-spacing: 0.32px;
  }

  /* ---------- After finding a dino: stacked, screenshots shown whole on Discord's dark grey ---------- */
  #after-finding .gs-heading__title { gap: 16px; }
  #after-finding .gs-heading__title h2 { max-width: 230px; } /* two lines in the comp */
  .after-find { gap: 24px; }
  .after-find__item h3 { font-size: 20px; line-height: 1.3; letter-spacing: 0.4px; }
  .after-find__item p,
  .after-find__item:first-child p { font-size: 16px; letter-spacing: 0.32px; }
  .after-find__item:first-child strong { font-weight: 400; }
  .after-find__item:first-child .after-find__shot { height: 358px; }
  .after-find__shot:not(.after-find__shot--qna) { background: #1a191e; }
  .after-find__shot:not(.after-find__shot--qna) img { object-fit: contain; }
  /* The comp paints a dark bar over each photo's left edge to hide a stray strip of the
     Discord sidebar. Offsets are from the centre, so they follow the centred photo. */
  .after-find__shot:not(.after-find__shot--qna)::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    background: #1a191e;
  }
  .after-find__item:first-child .after-find__shot::after { left: 0; width: calc(50% - 171.8px); }
  .after-find__item:nth-child(2) .after-find__shot::after { left: calc(50% - 230.5px); width: 66px; }
  .after-find__shot--qna img { width: 122.35%; height: 147.87%; left: -3.7%; top: -37.11%; }

  /* ---------- Flash sales: text and button only ---------- */
  .flash { gap: 0; padding: 70px 10px 22px; }
  .flash__image { display: none; }
  .flash__text { gap: 4px; padding: 4px 10px; }
  .flash__title { font-size: 26px; line-height: 1.2; letter-spacing: 0.52px; text-align: right; }
  .flash__sub { margin: 0 0 14px; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.32px; text-align: center; }

  /* ---------- Discover drop types: 75% cards; common row centred, rare row scrolls ---------- */
  .types { margin-top: 48px; padding: 40px 0; gap: 16px; }
  .types__flowers { left: -194px; top: 232.74px; width: 590.375px; transform: none; }
  .types__heading { padding: 0 var(--gs-side); }
  .types__intro { font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: 0.4px; }
  .types__intro strong { font-weight: inherit; }
  .gs-line--mobile { display: block; margin-top: 1.3em; }

  .types__group { width: 100%; gap: 14px; }
  .types__banner { width: 295.3px; height: 43.9px; gap: 6.75px; }
  .types__banner h3 { font-size: 20.25px; letter-spacing: 0.405px; }
  .types__sprout { width: 22.5px; height: 22.5px; }
  .types__panel,
  .types__panel--common,
  .types__panel--rare {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: none;
    border-radius: 0;
    filter: none;
  }
  .types__panel::-webkit-scrollbar { display: none; }
  .types__panel--common { padding: 4px 2px; }
  /* This comp orders the cards Flash Sales, Find Me's, Scavengers and
     Trivia, Aggieceratops, Milestone, Special */
  .types__panel--common > :nth-child(3) { order: -1; }
  .types__panel--rare > :nth-child(3) { order: 1; }
  /* Centred, but still scrollable from the first card if the row is ever wider than the screen */
  .types__panel--common > :nth-child(3) { margin-left: auto; }
  .types__panel--common > :nth-child(2) { margin-right: auto; }
  .types__panel--rare { padding: 4px calc(var(--gs-side) - 1.5px); scroll-padding: 0 calc(var(--gs-side) - 1.5px); }
  .common-card,
  .rare-card {
    zoom: 0.75; /* 223.5 x 307.5, as in the vertical mobile comp */
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .common-card { border-color: #76c03a; box-shadow: 0 1.33px 2.67px rgba(125, 86, 24, 0.4); }
  .rare-card { box-shadow: 0 1.33px 5.33px rgba(125, 86, 24, 0.4); }

  /* ---------- FAQ: full-width band, one column of 761px rows ---------- */
  .faq-wrap { margin-top: 48px; padding: 0 0 48px; }
  .faq { padding: 19px 24px; gap: 24px; border-radius: 0; }
  .faq__title { gap: 8px; }
  .faq__title img { width: 53.27px; height: 46.65px; }
  .faq__title h2 { font-size: 26px; line-height: 1.2; letter-spacing: 0.52px; }
  .faq__list,
  .faq__col { gap: 24px; }
  .faq__list { flex-direction: column; width: 100%; max-width: 761px; margin: 0; padding: 0; }
  .faq-item,
  .faq-item.is-open { filter: drop-shadow(0 4px 2px rgba(81, 81, 81, 0.16)); }
  .faq-item__q { min-height: 76px; padding: 8px 19px; font-size: 16px; letter-spacing: 0.32px; }
  .faq-item.is-open .faq-item__q { min-height: 64px; padding-top: 12px; }
  .faq-item__icon { flex: 0 0 33px; height: 42px; }
  .faq-item__plus { width: 33px; height: 42px; }
  .faq-item__minus { left: 4.5px; top: 19.5px; width: 24.13px; height: 3px; }
  .faq-item__a-body { padding: 4px 19px 20px; font-size: 16px; line-height: 1.5; }
  .faq__more p { font-size: 16px; line-height: 1.5; letter-spacing: 0.32px; }
  .faq__more .gs-btn { line-height: 1.3; letter-spacing: 0.8px; }

  /* ---------- Drop type pop-ups: wide landscape card ---------- */
  /* Photo on the left, text on the right, inside a 4px olive frame (from the landscape
     hi-fi mock). Same <dialog>, markup and script as the vertical mobile card; it scrolls
     inside itself if a page is ever taller than the screen, and the page stays locked. */
  .drop-overlay__stage { display: none; }
  .drop-overlay__dots { display: none; }
  .drop-sheet {
    position: relative;
    display: grid;
    grid-template-columns: 206px minmax(0, 1fr);
    align-items: start;
    column-gap: 28px;
    width: 606px;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow: hidden auto;
    overscroll-behavior: contain;
    padding: 18px 20px;
    background: var(--color-bg);
    border: 4px solid #687144;
    border-radius: 22px;
    /* Lets the whole card (photo included) be swiped horizontally
       without the browser treating it as a vertical scroll/pan. */
    touch-action: pan-y;
    /* Animates the card resizing to fit the incoming page's text, across
       the whole swipe transition (both its phases) — see showPage(). */
    transition: height 360ms ease;
  }
  .drop-sheet__close { /* green X in the top-right corner */
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
  }
  .drop-sheet__close img { display: block; width: 30px; height: 30px; transform: rotate(-45deg); }
  .drop-sheet__close:focus-visible { outline: 3px solid #687144; outline-offset: -2px; }

  .drop-sheet__photo {
    position: relative;
    grid-column: 1;
    height: 154px;
    overflow: hidden;
    border: 4px solid #687144;
    border-radius: 10px;
  }
  .drop-sheet__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; -webkit-user-drag: none; user-select: none; }
  /* The Figma crops (inline height/top) are tuned for the wide mobile frame and would
     squash the photo in this squarer box, so fill the box at the photo's own proportions;
     the script centres each on the same spot via object-position. */
  .drop-sheet__photo img.is-cropped { top: 0 !important; height: 100% !important; object-fit: cover; }

  .drop-sheet__info {
    position: relative;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 28px; /* clear of the X */
    touch-action: pan-y;
  }
  .drop-sheet__page { display: flex; flex-direction: column; gap: 10px; }
  .drop-sheet__page[hidden] { display: none; }
  .drop-sheet__heading { display: flex; flex-direction: column; gap: 6px; padding: 0; }
  /* Leaf sits in front of the title, before its first letter */
  .drop-sheet__title {
    position: relative;
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 1px;
    color: #687144;
  }
  .drop-sheet__title::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 16px;
    margin-right: -2px;
    vertical-align: 5px;
    background: url('assets/getting-started/overlay/sprout.svg') center / contain no-repeat;
    transform: rotate(-30deg);
  }
  .drop-sheet__desc { margin: 0; padding: 0; font-weight: 400; font-size: 13px; line-height: 1.3; letter-spacing: 0.26px; color: #676767; }
  .drop-sheet__bullets { display: flex; flex-direction: column; gap: 8px; }
  .drop-sheet__bullets li { display: flex; align-items: flex-start; gap: 8px; padding: 0; }
  .drop-sheet__bullets img { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 3px; padding: 1px; }
  .drop-sheet__bullets p { flex: 1; min-width: 0; margin: 0; font-weight: 500; font-size: 15px; line-height: 1.4; letter-spacing: 0.3px; color: var(--gs-body); }
  .drop-sheet__cta { /* "Secondary CTA" */
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 26px;
    padding: 6px 14px;
    background: var(--color-bg);
    border: 0.6px solid #649d35;
    border-radius: 16px;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.55px;
    color: #4b7d22;
  }
  .drop-sheet__cta[hidden] { display: none; }

  .drop-sheet__swipe { display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 2px 0 0; }
  .drop-sheet__swipe span { margin-left: 2px; font-weight: 600; font-size: 14px; line-height: 1.3; letter-spacing: 0.28px; color: var(--gs-card-green); }
  .drop-sheet__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--color-accent-blonde);
    cursor: pointer;
    transition: width 200ms ease-out, background-color 200ms ease-out;
  }
  .drop-sheet__dot.is-active { width: 26px; background: var(--color-accent-yellow); }
  .drop-sheet__dot:focus-visible { outline: 2px solid #687144; outline-offset: 2px; }

  /* ---------- Footer: the Figma "Mobile Footer" component stretched to the landscape width ---------- */
  /* 48px of page between the FAQ band and the grass. The strip is three copies of the
     grass art, each 42.06% wide x 44.92px, at 0%, 28.94% and 57.94% across (the middle
     one on top). Figma mirrors the left copy; a background layer can't be flipped. */
  .footer-grass {
    margin-top: 0;
    height: 44.92px;
    background-color: var(--color-bg);
    background-image: url('assets/grass.svg'), url('assets/grass.svg'), url('assets/grass.svg');
    background-size: 42.06% 44.92px;
    background-position: 49.95% bottom, 0% bottom, 100% bottom;
  }
  .site-footer { background: #def3ff; }
  /* 817px tall at 853px: link columns from 61px down, dinos and flowers on the bottom edge */
  .footer-content { padding: 61px 21px 131px; }
  .footer-columns {
    display: grid;
    grid-template-columns: 163px 161px;
    gap: 60px 32px;
    margin-bottom: 80px;
  }
  .footer-column__title { margin-bottom: 12px; font-size: 20px; line-height: 1.3; letter-spacing: 0.4px; }
  .footer-column__links a { font-size: 16px; line-height: 1.5; letter-spacing: 0.32px; }
  /* Figma stacks each side as its own column, so the rows don't line up exactly:
     Home's links sit 8px under the title, DinoDex/About Us sit 4px higher than the
     grid row would put them, and Rules is centred in its 161px column (8px in). */
  .footer-column:nth-child(1) .footer-column__title { margin-bottom: 8px; }
  .footer-column:nth-child(3),
  .footer-column:nth-child(5) { margin-top: -4px; }
  .footer-column:nth-child(4) { margin-left: 8px; }
  /* Social icons above the copyright, which wraps at 323px */
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 12px; max-width: 323px; }
  .footer-copyright { line-height: 1.5; letter-spacing: 0.32px; }

  /* Placements from the frame (the "front" cloud files include their shadow, hence the offsets).
     Asset names are misleading: dino-single is the blue one, dino-duo the green. */
  .footer-deco--flower-tl,
  .footer-deco--flower-mid { display: none; }
  .footer-deco--cloud1-back  { left: -30px;    right: auto; top: 19.46px;  width: 65.11px; height: 34.47px; }
  .footer-deco--cloud1-front { left: -33.84px; right: auto; top: 16.02px;  width: 74.04px; height: 44.27px; }
  .footer-deco--cloud2-back  { left: 264px;    right: auto; top: 355.92px; width: 85px;    height: 45px; }
  .footer-deco--cloud2-front { left: 261.1px;  right: auto; top: 352.02px; width: 93.66px; height: 54.8px; }
  .footer-deco--cloud3-back  { left: 352px;    right: auto; top: 153.37px; width: 61.49px; height: 32.55px; }
  .footer-deco--cloud3-front { left: 347.99px; right: auto; top: 150.02px; width: 70.47px; height: 42.35px; }
  .footer-deco--dino-single  { left: 21px;     right: auto; top: auto; bottom: 0;      width: 60.6px; height: auto; }
  .footer-deco--dino-duo     { left: 86.47px;  right: auto; bottom: 0;  width: 58.1px; height: auto; }
  .footer-deco--flower-small-2 { left: 164.09px; right: auto; bottom: 0; width: 20.8px; height: auto; } /* pink */
  .footer-deco--flower-small-1 { left: 187.08px; right: auto; bottom: 0; width: 28px;   height: auto; } /* blue */
}

/* ============================================================
   MOBILE — 640px and below, from the Figma "Mobile Vertical Page"
   frame (393px wide, 24px side margins). Header and nav menu come
   from styles.css / nav.js; the footer below matches DinoDex's
   mobile footer exactly rather than styles.css's plainer shared
   mobile rules.
============================================================ */
@media (max-width: 640px) {
  .gs-desktop-only { display: none; }
  .gs-mobile-only { display: inline; }

  .site-footer { margin-top: 64px; }
  .footer-content { padding-bottom: 155px; }
  .footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 60px;
  }
  .footer-column:nth-child(1) { grid-column: 1; grid-row: 1; }
  .footer-column:nth-child(2) { grid-column: 2; grid-row: 1; }
  .footer-column:nth-child(3) { grid-column: 1; grid-row: 2; }
  .footer-column:nth-child(4) { grid-column: 2; grid-row: 2; }
  .footer-column:nth-child(5) { grid-column: 1; grid-row: 3; }
  .footer-grass {
    height: 45px;
    background-size: 195px 45px;
    background-image: url('assets/grass.svg'), url('assets/grass.svg'), url('assets/grass.svg'), url('assets/grass.svg'), url('assets/grass.svg');
    background-position: -120px bottom, -10px bottom, 100px bottom, 210px bottom, 320px bottom;
  }
  .footer-deco { display: none; }
  .footer-deco-m { display: block; }
  .footer-deco-m--cloud1 { left: -30px; top: 18px; width: 42px; height: 47px; }
  .footer-deco-m--cloud2 { left: 264px; top: 354px; width: 95px; height: 57px; }
  .footer-deco-m--cloud3 { left: 352px; top: 152px; width: 46px; height: 45px; }
  .footer-deco-m--dino-blue { left: 21px; bottom: 0; width: 62px; height: 94px; }
  .footer-deco-m--dino-green { left: 86px; bottom: 0; width: 59px; height: 77px; }
  .footer-deco-m--flower1 { left: 187px; bottom: 0; width: 29px; height: 31px; }
  .footer-deco-m--flower2 { left: 164px; bottom: 0; width: 21px; height: 23px; }

  /* ---------- Hero ---------- */
  .hero--getting-started { height: 244px; padding: 10px; justify-content: center; }
  .hero--getting-started .hero__bg img { object-position: center; }
  .hero--getting-started .hero__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 345px;
    max-width: 100%;
    padding: 0;
  }
  .hero--getting-started .hero__title { margin: 0; font-size: 40px; line-height: 1.2; letter-spacing: 0.8px; }
  /* Matches About Us's mobile hero subtitle size. */
  .hero--getting-started .hero__subtitle { font-size: 16px; line-height: 1.3; letter-spacing: 0.02em; }

  /* ---------- Shared section pieces ---------- */
  .gs-stack { padding: 48px 24px 0; gap: 48px; }
  .gs-heading { gap: 16px; }
  .gs-heading__title,
  #during-drops .gs-heading__title { gap: 24px; }
  .gs-heading__title h2 { font-size: 26px; line-height: 1.2; letter-spacing: 0.52px; text-wrap: balance; } /* the comp breaks two-line titles near the middle */
  /* Matches About Us's mobile body-text size (18px), per request. */
  .gs-heading__sub { font-size: 18px; line-height: 1.4; letter-spacing: 0.03em; }

  /* ---------- Drop notifications: screenshot, numbered picker, active step ---------- */
  .steps { flex-direction: column; align-items: stretch; gap: 16px; }
  .steps__images {
    order: 1;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 345 / 259;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  }
  .steps__nums { order: 2; display: flex; justify-content: space-between; }
  .steps__list { order: 3; gap: 0; }
  .step { display: none; color: var(--gs-body); }
  .step.is-active { display: flex; }
  .step__bar { display: none; }
  .step__body { flex: 1 1 auto; }
  .step__title { font-size: 20px; line-height: 1.3; letter-spacing: 0.4px; }
  .step__text { font-size: 20px; line-height: 1.5; letter-spacing: 0.4px; }

  .steps__num {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 100px;
    background: #e0e0e0;
    cursor: pointer;
  }
  /* The currently-filling number: a slightly darker circle with a green
     ring held a couple pixels away from it, in the same green as the fill. */
  .steps__num.is-active {
    background: #cccccc;
    outline: 2px solid var(--gs-pastel-green);
    outline-offset: 2px;
  }
  .steps__num-fill { /* fills left to right over the 5s step timer */
    position: absolute;
    inset: 0;
    background: var(--gs-pastel-green);
    transform: scaleX(0);
    transform-origin: left;
  }
  .steps__num-label { position: relative; font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: 0.8px; color: var(--gs-body); }
  .steps__num:focus-visible { outline: 3px solid var(--gs-pastel-green); outline-offset: 2px; }

  /* ---------- Join Discord CTA ---------- */
  .gs-cta__title { max-width: 297px; font-size: 26px; letter-spacing: 0.52px; }
  .gs-cta .btn-discord { padding: 12px 24px; font-size: 18px; line-height: 1.3; letter-spacing: 0.9px; }

  /* ---------- When & where ---------- */
  #when-and-where { gap: 48px; } /* the comp leaves 48px between this heading and its cards */
  .info-cards { gap: 24px; padding: 0; }
  /* 12px + the 4px border = the comp's 16px inset (its stroke doesn't take up layout space) */
  .info-card { min-height: 0; padding: 12px; font-size: 16px; line-height: 1.5; letter-spacing: 0.32px; }
  .info-card__head img { height: 63.4px; }
  .info-card__head h3 { font-size: 20px; line-height: 1.3; letter-spacing: 0.4px; }
  .info-card--yellow .info-card__head { justify-content: center; } /* centred in the comp */

  .gs-doodle,
  .gs-doodle img { height: 129.68px; } /* half-size doodles */

  /* ---------- What happens during drops ---------- */
  #during-drops .gs-heading { gap: 24px; }
  .gs-heading__copy { font-size: 16px; letter-spacing: 0.32px; }
  .gs-heading__copy p { margin-bottom: 24px; }

  .do-dont { gap: 24px; justify-items: center; }
  .do-card { width: 312px; max-width: 100%; }
  .do-card--do .do-card__head,
  .do-card--dont .do-card__head { height: 67px; padding: 0 27px; gap: 16px; border-width: 2px; }
  .do-card__head img { width: 28px; height: 28px; }
  .do-card__head h3 { font-size: 26px; letter-spacing: 0.52px; }
  .do-card--do .do-card__body,
  .do-card--dont .do-card__body { margin-top: -2px; padding: 16px 28.5px; gap: 16px; border-width: 2px; border-radius: 0 0 20px 20px; }
  .do-card__art { width: 238px; height: 218px; }
  .do-card__list li {
    position: relative;
    padding: 16px 0;
    border-top: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.32px;
  }
  .do-card__list li + li::before { /* 4px rounded rule in the card's colour */
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 2px;
    background: var(--gs-pastel-green);
  }
  .do-card--dont .do-card__list li + li::before { background: var(--gs-pink); }

  /* ---------- Dino limits ---------- */
  #dino-limits { gap: 16px; }
  #dino-limits .gs-heading__sub { font-size: 20px; letter-spacing: 0.4px; }
  #dino-limits .gs-line { margin-top: 1.3em; } /* blank line between the two sentences */
  .limits__row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 0;
    border-top-color: var(--gs-pastel-green);
    font-size: 16px;
    letter-spacing: 0.32px;
  }

  /* ---------- After finding a dino ---------- */
  #after-finding .gs-heading__title { gap: 16px; }
  .after-find { gap: 24px; }
  .after-find__item h3 { font-size: 20px; line-height: 1.3; letter-spacing: 0.4px; }
  .after-find__item p,
  .after-find__item:first-child p { font-size: 16px; letter-spacing: 0.32px; }
  .after-find__item:first-child strong { font-weight: 400; } /* not bolded in the mobile comp */
  .after-find__item:first-child .after-find__shot { height: 310px; }

  /* ---------- Flash sales: text and button only ---------- */
  .flash { gap: 0; padding: 58px 10px 10px; }
  .flash__image { display: none; }
  .flash__text { gap: 4px; padding: 4px 10px; }
  .flash__title { font-size: 26px; line-height: 1.2; letter-spacing: 0.52px; text-align: right; }
  .flash__sub { margin: 0 0 14px; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.32px; text-align: center; }

  /* ---------- Discover drop types: cards in swipeable rows at 75% size ---------- */
  .types { margin-top: 48px; padding: 40px 0; gap: 16px; }
  .types__flowers { left: -194px; top: 232.74px; width: 590.375px; transform: none; }
  .types__heading { padding: 0 24px; }
  .types__intro { font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: 0.4px; }
  .types__intro strong { font-weight: inherit; }
  .gs-line--mobile { display: block; margin-top: 1.3em; }

  .types__group { width: 100%; gap: 14px; }
  .types__banner { width: 295.3px; height: 43.9px; gap: 6.75px; }
  .types__banner h3 { font-size: 20.25px; letter-spacing: 0.405px; }
  .types__sprout { width: 22.5px; height: 22.5px; }
  .types__panel,
  .types__panel--common,
  .types__panel--rare {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    padding: 4px 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 26px;
    scrollbar-width: none;
    background: none;
    border-radius: 0;
    filter: none;
  }
  .types__panel::-webkit-scrollbar { display: none; }
  .common-card,
  .rare-card {
    zoom: 0.75; /* the mobile cards are the desktop cards at 223.5 x 307.5 */
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .common-card { border-color: #76c03a; box-shadow: 0 1.33px 2.67px rgba(125, 86, 24, 0.4); }
  .rare-card { box-shadow: 0 1.33px 5.33px rgba(125, 86, 24, 0.4); }

  /* ---------- Drop type pop-ups: the mobile card replaces the desktop binder ---------- */
  /* Same <dialog>, backdrop (rgba(38,38,38,.4)), scroll lock and close behaviour as desktop.
     Card is 354 wide (393 − 2 × 19.5) and hugs its content. */
  .drop-overlay__stage { display: none; }
  .drop-overlay__dots { display: none; }
  .drop-sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 354px;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow: hidden auto;
    padding: 16px 18px;
    background: var(--color-bg);
    border-radius: 16px;
    /* Lets the whole card (photo included) be swiped horizontally
       without the browser treating it as a vertical scroll/pan. */
    touch-action: pan-y;
    /* Animates the card resizing to fit the incoming page's text, across
       the whole swipe transition (both its phases) — see showPage(). */
    transition: height 360ms ease;
  }
  .drop-sheet__close { /* 27px X rotated 45° in a 38px corner box (the
       bigger box is just a larger tap target around the visible circle) */
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38.18px;
    height: 38.18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
  }
  .drop-sheet__close img { display: block; width: 27px; height: 27px; transform: rotate(-45deg); }
  /* Hugs the 27px visible circle, not the larger 38.18px tap-target box:
     offset = -(38.18 - 27) / 2 */
  .drop-sheet__close:focus-visible { outline: 3px solid #687144; outline-offset: -5.59px; }

  .drop-sheet__photo {
    position: relative;
    flex-shrink: 0;
    height: 158px;
    overflow: hidden;
    border: 4px solid #687144;
    border-radius: 8px;
  }
  .drop-sheet__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; -webkit-user-drag: none; user-select: none; }
  .drop-sheet__photo img.is-cropped { bottom: auto; object-fit: fill; } /* height/top set per drop from Figma */

  .drop-sheet__info { position: relative; display: flex; flex-direction: column; gap: 8px; touch-action: pan-y; }
  /* Leaf accent pinned to the top-left corner of the title's first letter (both pages),
     tucked behind the lettering */
  .drop-sheet__title { position: relative; isolation: isolate; }
  .drop-sheet__title::before {
    content: '';
    position: absolute;
    left: -6px;
    top: -1px;
    width: 19.22px;
    height: 17.01px;
    background: url('assets/getting-started/overlay/sprout.svg') center / contain no-repeat;
    transform: rotate(-30deg);
    pointer-events: none;
    z-index: -1;
  }
  .drop-sheet__page { display: flex; flex-direction: column; gap: 8px; }
  .drop-sheet__page[hidden] { display: none; }
  .drop-sheet__heading { padding: 2px 4px; }
  .drop-sheet__title { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 20px; line-height: 1.3; letter-spacing: 0.4px; color: #687144; }
  .drop-sheet__desc { margin: 0; padding: 2px 4px; font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: 0.24px; color: #676767; }
  .drop-sheet__bullets { display: flex; flex-direction: column; gap: 8px; }
  .drop-sheet__bullets li { display: flex; align-items: flex-start; gap: 10px; padding: 2px 4px; }
  .drop-sheet__bullets img { flex: 0 0 17.06px; width: 17.06px; height: 17.06px; padding: 1.5px; }
  .drop-sheet__bullets p { flex: 1; min-width: 0; margin: 0; font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: 0.24px; color: var(--gs-body); }
  .drop-sheet__cta { /* Figma "Secondary CTA" */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 6px 12px;
    background: var(--color-bg);
    border: 0.5px solid #649d35;
    border-radius: 16px;
    font-weight: 700;
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.45px;
    color: #4b7d22;
  }
  .drop-sheet__cta[hidden] { display: none; }

  .drop-sheet__swipe { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 10px; }
  .drop-sheet__swipe span { font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: 0.24px; color: var(--gs-card-green); }
  .drop-sheet__dot { /* inactive: blonde dot; active: yellow pill */
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--color-accent-blonde);
    cursor: pointer;
    transition: width 200ms ease-out, background-color 200ms ease-out;
  }
  .drop-sheet__dot.is-active { width: 20px; background: var(--color-accent-yellow); }
  .drop-sheet__dot:focus-visible { outline: 2px solid #687144; outline-offset: 2px; }

  /* ---------- FAQ: full-width band, one column ---------- */
  .faq-wrap { margin-top: 48px; padding: 0; }
  .faq { padding: 19px 24px; gap: 24px; border-radius: 0; }
  .faq__title { gap: 8px; }
  .faq__title img { width: 53.27px; height: 46.65px; }
  .faq__title h2 { width: 256px; font-size: 26px; line-height: 1.2; letter-spacing: 0.52px; }
  .faq__list,
  .faq__col { gap: 24px; }
  .faq__list { flex-direction: column; width: 100%; max-width: 343px; margin: 0; padding: 0; }
  .faq-item,
  .faq-item.is-open { filter: drop-shadow(0 4px 2px rgba(81, 81, 81, 0.16)); }
  .faq-item__q { min-height: 76px; padding: 8px 19px; font-size: 16px; letter-spacing: 0.32px; }
  .faq-item.is-open .faq-item__q { min-height: 64px; padding-top: 12px; }
  .faq-item__icon { flex: 0 0 33px; height: 42px; }
  .faq-item__plus { width: 33px; height: 42px; }
  .faq-item__minus { left: 4.5px; top: 19.5px; width: 24.13px; height: 3px; }
  .faq-item__a-body { padding: 4px 19px 20px; font-size: 16px; line-height: 1.5; }
  .faq__more p { font-size: 16px; line-height: 1.5; letter-spacing: 0.32px; }
  .faq__more .gs-btn { line-height: 1.3; letter-spacing: 0.8px; }

  /* No overlap on mobile: 48px of page between the FAQ band and the grass */
  .faq-wrap { padding-bottom: 48px; }
  .footer-grass { margin-top: 0; background-color: var(--color-bg); }
}

/* ============================================================
   DESKTOP-ONLY (>1800px — e.g. a 2560x1440 monitor). Placed at the
   end of the file so it wins the cascade over the base rules above
   it (same selectors/specificity — later in source wins). ============================================================ */
@media (min-width: 1801px) {
  /* +100px side margin, matching DinoDex. .gs-stack (body content,
     also reused by Flash Sales since it loads this file too) and
     the shared .hero__content (hero TEXT only — the hero photo
     stays full-bleed) both read from --grid-margin, so overriding
     it here moves both together on both pages without touching
     styles.css. Nav/footer don't use this variable outside their
     own ≤640px mobile rules, so they're unaffected. */
  :root { --grid-margin: 148px; }
  /* No hero height override needed here — 498px is already this
     page's own native value, and it's now the sitewide target every
     other page's hero is being matched to. */
  /* Nudged down 70px per feedback. */
  .hero--getting-started .hero__bg img { object-position: center calc(68% + 70px); }
}