/* ==========================================================================
   Styles — Jeffree $DOOGLER

   THE PALETTE IS GOOGLE'S FOUR, on a white ground with near-black ink. They
   are used as ACCENTS and never as surfaces: the wordmark's letters, the six
   stat icons, and nothing else. A page that fills panels with them stops
   reading as a document and starts reading as a toy, and the numbers are the
   point of this one.

   Each of the four appears on exactly one or two of the six stat tiles, in a
   fixed order, so the row reads as one set rather than six unrelated badges.

   YELLOW IS DEEPENED FOR TEXT. Google's own #fbbc05 on white sits around 1.7:1
   — fine as a logo, illegible as a word. --g-yellow is the darkened one used
   wherever a letter is set in it; --g-yellow-pure is kept for icon strokes and
   for the dark banner, where it has a ground to sit on.

   ROUNDED, per the mockup. --r-card and --r-btn are read by every box that
   takes a corner, so the whole page rounds or squares from the two lines
   below rather than from thirty edits. The template this was copied from set
   both to 0 because its artwork was hard-edged voxels; this mockup's cards,
   buttons and plates are all softly rounded, so they are set here and nothing
   else had to change.

   The surfaces are WHITE on white. There is nowhere lighter to go, so a card
   does not separate itself by being brighter — it separates by a hairline
   border and a soft shadow underneath.
   ========================================================================== */

:root {
  /* Surfaces & ink */
  --page:        #ffffff;
  --surface:     #ffffff;
  --band:        #f7f9fc;
  --ink:         #0c0d10;
  --ink-2:       #3c4043;   /* Google's own body grey */
  --muted:       #80868b;
  --line:        #e4e7ec;
  --line-strong: #d2d7de;
  --dark:        #101418;   /* the banner band */

  /* Google's four */
  --g-blue:        #4285f4;
  --g-red:         #ea4335;
  --g-yellow:      #e6a100;   /* darkened: legible as text on white */
  --g-yellow-pure: #fbbc05;   /* the real one — icons and the dark banner */
  --g-green:       #34a853;

  --g-blue-deep: #1a56c4;

  /* Shape. Both tokens are read by the cards, the buttons, the chip and the
     toast, so these two lines are the whole of "make it rounded"; there is no
     other corner on the page. */
  --r-btn:  10px;
  --r-card: 12px;

  /* Depth. A card is white on white, so the shadow is the only thing holding
     it off the page: one tight shadow for the edge and one wide, faint one for
     the lift. Both are pitched under 10% and tinted rather than grey — a
     neutral shadow on this much white reads as dirt. */
  --card-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 24px rgba(16, 24, 40, .07);
  --card-lift:   0 2px 4px rgba(16, 24, 40, .07), 0 18px 34px rgba(66, 133, 244, .14);

  --wrap: 1180px;
  --gut:  clamp(16px, 4vw, 40px);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* The collage captions. A handwritten face is not loaded over the network for
     three captions — the system cursive is close enough and costs nothing. */
  --font-hand: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--page);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* the collage tilts outside its box by design */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

:where(a, button):focus-visible {
  outline: 2.5px solid var(--g-blue-deep);
  outline-offset: 3px;
  border-radius: var(--r-btn);
}

/* Present to screen readers, absent on screen */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

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


/* ==========================================================================
   THE WORDMARK
   Each letter is its own span so the four colours come from here rather than
   from an image: it stays crisp at any zoom, costs no request, and the letters
   are still real text to a screen reader (which is given the whole word by the
   parent's aria-label, the letters being hidden from it individually).
   ========================================================================== */

.wordmark {
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.wordmark .g-b { color: var(--g-blue); }
.wordmark .g-r { color: var(--g-red); }
.wordmark .g-y { color: var(--g-yellow); }
.wordmark .g-g { color: var(--g-green); }

/* On the dark band there is a ground behind the letters, so the true Google
   yellow is legible and is used instead of the darkened one. */
.wordmark--onDark .g-y { color: var(--g-yellow-pure); }

.wordmark--xl { font-size: 1em; }
.wordmark--lg { font-size: clamp(30px, 4.4vw, 54px); }


/* ==========================================================================
   STICKY TOP BAR
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* A translucent bar over a white page needs the blur to do the separating. If
   the browser has no backdrop-filter, it goes opaque instead of transparent —
   the content scrolling visibly through the bar is worse than losing the
   effect. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: #fff; }
}

.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding-block: 10px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }

.brand__avatar {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  /* The source is a square crop of the dog's head, so cover never has much to
     trim — but it is stated rather than assumed, because a replacement mark
     that is not square would otherwise stretch the dog. */
  object-fit: cover;
}

.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand__first {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.brand .wordmark { font-size: 19px; }

.topnav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topnav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: var(--r-btn);
  font-family: inherit;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.topnav__link:hover { color: var(--ink); background: var(--band); }

.topnav__icon { width: 17px; height: 17px; flex: none; color: var(--g-blue); }
.topnav__icon--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The two-line CTA block, far right. */
.cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 8px;
  padding: 8px 16px;
  border: 1px solid #d7e3fb;
  border-radius: var(--r-btn);
  background: #eaf1fd;      /* the mockup's pale blue plate */
  color: var(--ink);
  line-height: 1.3;
  transition: background-color .16s ease, border-color .16s ease;
}
.cta:hover { background: #dfeafd; border-color: #c4d6f8; }
.cta__l1, .cta__l2 { font-size: 12.5px; font-weight: 500; }
.cta b { font-weight: 700; }


/* ==========================================================================
   HERO — two columns
   ========================================================================== */

/* The hero, per the mockup: the photograph fills the band and the copy sits
   on it, left.

   The scrim is the load-bearing part. The delivered frame has trees, bicycles
   and an Android statue down its left side, and black type straight onto that
   is unreadable at any weight. A left-to-right white gradient lifts the type's
   ground to near-solid while letting the picture emerge before the dog — so it
   still reads as one photograph rather than as a white panel with a picture
   stuck beside it.

   background-attachment is NOT fixed: on iOS that silently disables the
   background entirely on some builds, and the whole hero would go white. */
.hero {
  position: relative;
  background-image: url("../../images/hero.webp?v=4");
  background-size: cover;
  background-position: 62% center;
  isolation: isolate;
}
/* Anything without WebP still gets a photograph rather than a blank band. */
@supports not (background-image: url("a.webp")) {
  .hero { background-image: url("../../images/hero.jpg?v=4"); }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, .97) 0%,
    rgba(255, 255, 255, .94) 32%,
    rgba(255, 255, 255, .74) 45%,
    rgba(255, 255, 255, .22) 58%,
    rgba(255, 255, 255, 0) 70%
  );
}

.hero__in {
  position: relative;
  padding-block: clamp(34px, 5.4vw, 74px) clamp(40px, 6vw, 86px);
  max-width: min(100% - (var(--gut) * 2), var(--wrap));
}

/* The copy column never crosses into the dog, at any width. */
/* Wide enough that "Buy $DOOGLER" and "Get $GOOGL." each hold one line at
   every width, and no wider — past this the copy starts crossing onto the
   dog. */
.hero__title { max-width: 42rem; }
.hero__sub, .hero__actions, .lockups { max-width: 34rem; }

.hero__title {
  margin: 0 0 20px;
  /* Sized so that "Buy $DOOGLER" and "Get $GOOGL." each hold ONE line in the
     hero column at every width. The mockup's hierarchy depends on that break:
     let the first line wrap and the wordmark detaches from the verb, which is
     the one thing the headline exists to join. */
  font-size: clamp(32px, 5vw, 62px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.hero__line { display: block; }

.hero__sub {
  margin: 0 0 26px;
  max-width: 34rem;
  font-size: clamp(15px, 1.25vw, 17.5px);
  line-height: 1.55;
  color: var(--ink-2);
}
.hero__sub b { font-weight: 700; color: var(--ink); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}


/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}
.btn__icon { width: 18px; height: 18px; flex: none; }
.btn__icon--stroke {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.btn--solid {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--card-shadow);
}
.btn u { text-underline-offset: 3px; }
.btn__icon--bars { fill: currentColor; }
.btn--solid:hover { transform: translateY(-2px); box-shadow: var(--card-lift); }

.btn--outline {
  background: #fff;
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--card-shadow);
}
.btn--outline:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-lift);
  border-color: var(--g-blue);
  color: var(--g-blue-deep);
}
.btn:active { transform: translateY(0); box-shadow: var(--card-shadow); }


/* ---- The CA chip ---- */

.ca-wrap { position: relative; display: inline-flex; }

.ca-chip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 48px;
  padding: 0 14px;
  font-family: inherit;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ca-chip:hover { border-color: var(--g-blue); box-shadow: var(--card-shadow); }
.ca-chip__stack { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }

.ca-chip__label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}
.ca-chip__addr {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  /* An address is compared digit by digit, so it is set in a mono face with
     figures that line up rather than in the body face. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.ca-chip__icon {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--muted); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ca-chip:hover .ca-chip__icon { stroke: var(--g-blue); }


/* ---- The copy toast ---- */

.toast {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  border-radius: var(--r-btn);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -5px) scale(.96);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast__check { width: 15px; height: 15px; flex: none; color: #7ddb6a; }
.toast.is-error .toast__check { color: #ff8a7a; }


/* ---- Partner lockups ---- */

.lockups {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 34rem;
}

.lockup {
  display: grid;
  gap: 5px;
  justify-items: start;
  padding: 11px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lockup:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-lift);
  border-color: var(--g-blue);
}
.lockup__kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.lockup__name { grid-area: name; font-size: 15px; font-weight: 700; }

/* Each partner's own supplied logo. Sized by HEIGHT so the two sit on a
   shared optical baseline despite very different source proportions — the
   Stockify lockup is 3:1 and the Stonks button is 5:1, so matching their
   widths instead would leave one of them half the other's size. */
.lockup__logo {
  height: 24px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  margin-top: 3px;
}
/* The Stonks mark is drawn FOR A DARK GROUND: its background is transparent
   and its dominant ink is #e8ecfc, which on this white card is all but
   invisible — 1.1:1 against the surface. It gets the dark plate it was drawn
   for rather than being recoloured, which would mean redrawing someone else's
   logo. The plate is sized by the same optical height as the other lockup. */
.lockup__logo--stonks {
  height: 20px;
  padding: 6px 10px;
  background: #1b1f27;
  box-sizing: content-box;
  margin-top: 0;
}
.lockup__arrow {
  grid-area: arrow;
  font-size: 17px;
  color: var(--muted);
  transition: transform .16s ease, color .16s ease;
}
.lockup:hover .lockup__arrow { transform: translateX(3px); color: var(--g-blue); }


/* ==========================================================================
   STATS STRIP — one white card, six tiles
   ========================================================================== */

.statwrap { padding-block: clamp(26px, 4vw, 44px) clamp(30px, 5vw, 54px); }

/* Six SEPARATE cards with real gaps, per the mockup — not the single divided
   strip this template shipped with. */
.stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  padding: 18px 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--card-lift); }

/* Filled colour icons, per the mockup, rather than the template's stroked
   set in a tinted disc. */
.stat__icon {
  display: block;
  width: 30px; height: 30px;
  margin-bottom: 8px;
}
.stat__icon svg { width: 100%; height: 100%; display: block; }

.stat__label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  /* Two-line labels must not shove their figure out of line with the rest of
     the row. */
  min-height: 2.4em;
  display: flex;
  align-items: flex-start;
}

.stat__value {
  margin: 0;
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  /* Figures that change every minute must not jitter their own width. */
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}
.stat__unit,
.stat__suffix { font-size: .62em; font-weight: 700; color: var(--ink); }
/* The suffix belongs to a figure; with no figure it is noise. */
.stat__value .is-empty ~ .stat__suffix { display: none; }
.stat__value .is-empty { color: var(--muted); font-weight: 500; }

.stat__sub {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stat__sub b { font-weight: 500; }

/* The loading ellipsis, shown until a source resolves. */
.dots { display: inline-flex; gap: 3px; align-items: center; height: 1em; }
.dots i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line-strong);
  animation: blink 1.1s infinite ease-in-out;
}
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .55; } }

/* The live line, right-aligned under the strip. */
.legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}
.legend__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  flex: none;
}
.legend.is-live .legend__dot {
  background: var(--g-green);
  box-shadow: 0 0 0 3px rgba(52, 168, 83, .18);
}
/* The mockup's dot is green before anything has answered too — it reads as
   "this is a live feed", not as "this figure is confirmed". */
.legend__dot { background: var(--g-green); opacity: .45; }
.legend.is-live .legend__dot { opacity: 1; }
.legend.is-stale .legend__dot { background: var(--g-yellow-pure); }

/* The "what holders receive" disclosure. Quiet, but not hidden: it is the
   precise version of the headline's promise and it sits directly under the
   figure it qualifies. */
.disclose {
  margin: 22px 0 0;
  padding: 15px 18px;
  max-width: 82ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--band);
  border: 1px solid var(--line);
  border-left: 3px solid var(--g-blue);
  border-radius: var(--r-card);
}
.disclose b { color: var(--ink); font-weight: 700; }
.disclose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  padding: 1px 5px;
  background: #fff;
  border: 1px solid var(--line);
}


/* ==========================================================================
   LORE — two columns
   ========================================================================== */

.lore {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
  padding-block: clamp(46px, 7vw, 92px);
}

.lore__title {
  margin: 0 0 20px;
  font-size: clamp(30px, 4.1vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.lore__title > span { display: block; }
.lore__title > span span { display: inline; }
/* "Meme" is ink, not colour: in the mockup only the second line carries the
   Google palette, which is what makes that line land. */
.lore__title .g-ink { color: var(--ink); }

.lore__body { font-size: 15.5px; color: var(--ink-2); }
.lore__body p { margin: 0 0 15px; max-width: 58ch; }
.lore__body b { color: var(--ink); font-weight: 700; }

/* The Code of Conduct line, set AS A QUOTATION with its source attached.
   Deliberately not styled as a document, a screenshot or an internal memo:
   the sentence is real and public, and dressing it as a leaked artifact would
   make a true quote into a fake object. */
.quote {
  margin: 0 0 18px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--g-yellow-pure);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
}
.quote p {
  margin: 0 0 9px;
  font-size: 16px;
  font-style: italic;
  color: var(--ink);
  max-width: none;
}
.quote footer { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.quote footer a {
  color: var(--g-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.quote footer a:hover { color: var(--g-blue-deep); }

.lore__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }


/* ---- The card stack ----------------------------------------------------
   The mockup scatters four cards at angles with a handwritten note beside
   them. Three are built: the fourth, a photograph of a named real person
   captioned with a quote he has not given, is not — see index.html.

   Laid out on a grid rather than absolutely positioned, so it reflows to one
   column on a phone instead of overlapping itself. The tilt is on each card,
   so captions tilt with them. */
.collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
  align-items: start;
  padding-top: 6px;
}

.card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;   /* the mockup's cards are the one rounded thing */
  box-shadow: 0 2px 6px rgba(16,24,40,.06), 0 14px 30px rgba(16,24,40,.09);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.card:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--card-lift); }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; } }

/* The Code of Conduct quotation. Styled as a quotation — NOT as a Google
   document with a section number, which is what the mockup draws and which
   would be a forged artifact around a genuine sentence. */
.card--quote {
  grid-column: 1 / -1;
  transform: rotate(-1.4deg);
  padding: 16px 18px;
}
.card--quote blockquote { margin: 0 0 10px; }
.card--quote p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
  max-width: none;
}
.card--quote mark {
  background: #fdf3c7;      /* the mockup's highlight, kept */
  color: inherit;
  font-style: normal;
  font-weight: 600;
  padding: 0 2px;
}
.card--quote figcaption { font-size: 12px; color: var(--muted); }
.card--quote figcaption b { color: var(--ink-2); font-weight: 600; }
.card--quote figcaption a {
  color: var(--g-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.card--photo { padding: 9px 9px 0; }
.card--photo img { width: 100%; height: auto; display: block; border-radius: 4px; }
.card--photo figcaption {
  padding: 9px 4px 11px;
  font-family: var(--font-hand);
  font-size: 15px;
  color: var(--ink-2);
}
.card--cap  { transform: rotate(-2.6deg); }
.card--jump { transform: rotate(2.2deg); margin-top: 16px; }

/* The handwritten checklist beside the stack. */
.scribble {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-family: var(--font-hand);
  font-size: 15px;
  color: var(--ink-2);
  transform: rotate(-1deg);
}
.scribble li { display: flex; align-items: baseline; gap: 7px; }
.scribble li::before { content: "✓"; color: var(--g-green); font-weight: 700; }

/* ==========================================================================
   DARK BANNER
   A rounded plate inside the wrap, per the mockup — not a full-bleed band.
   ========================================================================== */

.bannerwrap { padding-bottom: clamp(30px, 5vw, 56px); }

.banner {
  /* ⚠ ARTWORK PENDING: the Earth-from-space image sits at the LEFT of this
     plate in the mockup. Layer it UNDER the gradient below, which is what
     keeps the type legible over whatever the photo turns out to be:

       background-image:
         linear-gradient(90deg, rgba(8,11,15,.35) 0%, rgba(8,11,15,.88) 34%, rgba(8,11,15,.96) 100%),
         url("../../images/earth.jpg");
       background-size: cover;
       background-position: left center;

     Until then the plate is the dark ground alone, with a blue cast at the
     left standing in for the planet's limb. */
  background:
    radial-gradient(70% 150% at 8% 50%, rgba(66, 133, 244, .34) 0%, transparent 62%),
    var(--dark);
  color: #fff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 24px clamp(24px, 6vw, 90px);
  padding: clamp(26px, 3.6vw, 40px) clamp(24px, 4vw, 54px);
}

.banner__line {
  margin: 0;
  margin-left: auto;
  font-size: clamp(19px, 2.3vw, 27px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.banner__mark { text-align: right; }
.banner__sub {
  margin: 6px 0 0;
  font-size: clamp(9.5px, .95vw, 11.5px);
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .6);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot {
  background: var(--band);
  border-top: 1px solid var(--line);
}

.foot__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .85fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
  padding-block: clamp(28px, 4vw, 44px);
}

.brand--foot { align-items: center; }
.brand--foot .brand__avatar { width: 46px; height: 46px; }
.brand--foot .wordmark { font-size: 19px; }
.brand--foot .brand__name { gap: 3px; }

.foot__tag {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.foot__mid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.lockup--foot { background: #fff; }

.foot__facts { text-align: right; }
.foot__facts p {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.foot__facts p:last-child { margin-bottom: 0; }
.foot__facts b { color: var(--ink); font-weight: 700; }

.foot__legal {
  padding-block: 22px 30px;
  border-top: 1px solid var(--line);
}
.foot__legal p {
  margin: 0 0 9px;
  max-width: 100ch;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.foot__legal p:last-child { margin-bottom: 0; }
.foot__legal b { color: var(--ink-2); font-weight: 700; }


/* ==========================================================================
   ENTRANCE
   Opacity and translate only — `transform` is left alone so it never outranks
   a hover or the collage's own tilt.
   ========================================================================== */

.anim [data-rise], .anim .rise { opacity: 0; }

.anim [data-rise].is-in,
.anim .rise.is-in {
  animation: rise .5s cubic-bezier(.22, .68, .3, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes rise {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .anim [data-rise], .anim .rise { opacity: 1; }
  .anim [data-rise].is-in, .anim .rise.is-in { animation: none; }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* The six cards go three and three before they go two and two. */
@media (max-width: 1180px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  /* The hero scrim has to cover more of the frame as the copy column takes a
     larger share of it, or the type starts crossing onto the dog. */
  .hero::before {
    background: linear-gradient(
      100deg,
      rgba(255,255,255,.97) 0%, rgba(255,255,255,.95) 40%,
      rgba(255,255,255,.72) 56%, rgba(255,255,255,.2) 72%,
      rgba(255,255,255,0) 84%
    );
  }
  .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__facts { grid-column: 1 / -1; text-align: left; }
  .foot__mid { justify-content: flex-start; }
}

@media (max-width: 960px) {
  .lore { grid-template-columns: minmax(0, 1fr); }
  .collage { max-width: 560px; }

  /* The top bar sheds its labels before it sheds its buttons: the icons still
     identify X, the chart and the CA, and the CTA is the thing a visitor came
     for. */
  .topnav__link span:not(.sr-only) { display: none; }
  .topnav__link { padding: 9px; }
  .topnav__icon { width: 19px; height: 19px; }
}

@media (max-width: 720px) {
  /* Below this the photograph cannot carry type over it at all — the dog is
     the whole frame at this width. It moves to a band under the copy, which
     is the same picture doing the same job with the reading order intact. */
  .hero {
    background-image: none;
    padding-bottom: 0;
  }
  .hero::before { display: none; }
  .hero::after {
    content: "";
    display: block;
    margin-top: 22px;
    aspect-ratio: 1981 / 793;
    background-image: url("../../images/hero.webp?v=4");
    background-size: cover;
    background-position: 62% center;
  }
  .hero__title, .hero__sub, .hero__actions, .lockups { max-width: none; }
}

@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat__label { min-height: 0; }
  .legend { justify-content: flex-start; }

  .hero__actions { gap: 8px; }
  .btn, .ca-chip { height: 44px; }
  .ca-chip { padding-inline: 12px; gap: 10px; }

  .lockups { flex-direction: column; }
  .lockup { width: 100%; }

  .collage { grid-template-columns: minmax(0, 1fr); }
  .card--cap, .card--jump { margin-top: 0; }

  .banner { flex-direction: column; align-items: flex-start; }
  .banner__line, .banner__mark { margin-left: 0; text-align: left; }

  .foot__in { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  /* Below this the CTA block goes, not the links: a visitor at phone width can
     still reach X, the chart and the CA. */
  .cta { display: none; }
  .brand .wordmark { font-size: 16px; }
}