/* goofre.com homepage as a merchant story (2026-10-23).
   Loaded by / only, after site.css. Comic panels in the reels' 3D look,
   speech bubbles as real text (never baked into images, so search and AI
   assistants can read them), Gia as the guide, Scout drawn as inline SVG.

   Motion is opt-in: story.js adds html.motion only when the visitor has not
   asked for reduced motion, so without JS or with reduced motion every panel
   and bubble is simply there. */

:root {
  --font-display: "Nunito", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  --font-letter: "Comic Neue", "Comic Sans MS", "Chalkboard SE", "Trebuchet MS", sans-serif;
  --line: #14201A;
  --cap: #FEF3C7;
  --scout: #38BDF8;
  --sky: #0B1B3A;
}

.story h1, .story h2, .story h3 { font-weight: 800; letter-spacing: -.015em; }
.story h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); line-height: 1.02; }
.story .btn { border-radius: 999px; padding: .9rem 1.35rem; }
.story .nav .btn { padding: .6rem 1rem; }

/* ── Hero ──────────────────────────────────────────────── */
.story .hero { padding-block: clamp(2rem, 5vw, 3.6rem) clamp(2.4rem, 5vw, 3.6rem); overflow: hidden; }
.story .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: end; }
.story .hero-copy { align-self: center; }
@media (max-width: 900px) { .story .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; } }
.story .hero h1 em { font-style: normal; color: var(--accent); }
.story .hero-check { box-shadow: 6px 6px 0 var(--line); border: 2px solid var(--line); border-radius: 16px; }

.hero-art { position: relative; margin: 0; min-height: 420px; display: grid; align-items: end; justify-items: center; }
.hero-art .blob {
  position: absolute; inset: 8% 2% 0 6%; border-radius: 46% 54% 48% 52% / 55% 50% 50% 45%;
  background: radial-gradient(circle at 40% 35%, #D1FAE5 0, #A7F3D0 45%, #6EE7B7 100%);
}
.hero-art .gia { position: relative; width: min(100%, 380px); height: auto; display: block; }
.hero-art .bubble { position: absolute; left: -4%; top: 4%; max-width: 15.5rem; z-index: 2; }
.hero-art .scout { position: absolute; right: 2%; top: 14%; width: 92px; z-index: 3; }
/* phones and tablets: Gia comes first, small, with her bubble beside her */
@media (max-width: 900px) {
  .hero-art {
    order: -1; min-height: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 132px;
    align-items: center; gap: .6rem; margin-bottom: -.4rem;
  }
  .hero-art .blob { inset: auto 0 0 auto; width: 132px; height: 150px; }
  .hero-art .bubble { position: relative; left: auto; top: auto; max-width: none; grid-column: 1; grid-row: 1; }
  .hero-art .bubble.t-br::after { left: auto; right: -10px; bottom: auto; top: 40%; transform: rotate(-45deg); }
  .hero-art .gia { grid-column: 2; grid-row: 1; width: 132px; height: 170px; object-fit: cover; object-position: top; }
  .hero-art .scout { width: 46px; right: 0; top: -6px; }
}

/* While the check runs Scout leaves Gia and circles the check box. */
.scout { filter: drop-shadow(0 0 14px rgba(56, 189, 248, .55)); }
.motion .scout { animation: bob 3.2s ease-in-out infinite; }
.motion .hero-art.scanning .scout { animation: scan 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px); } }
@keyframes scan {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-60px, 40px) scale(.9) rotate(-8deg); }
  50% { transform: translate(-20px, 90px) scale(1.05); }
  75% { transform: translate(30px, 40px) scale(.95) rotate(8deg); }
}

/* ── Speech bubbles and caption boxes ──────────────────── */
.bubble {
  position: relative; margin: 0; background: #fff; color: var(--line);
  border: 2.5px solid var(--line); border-radius: 18px; padding: .55rem .85rem .6rem;
  font: 700 1.02rem/1.3 var(--font-letter); box-shadow: 3px 3px 0 var(--line);
}
.bubble .who {
  display: block; font: 600 .62rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .25rem;
}
/* the tail: a rotated square on one edge, set by .t-bl / .t-br / .t-tl / .t-tr / .t-r / .t-l */
.bubble::after {
  content: ""; position: absolute; width: 16px; height: 16px; background: #fff;
  border: solid var(--line); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
  bottom: -10px; left: 24px;
}
.bubble.t-br::after { left: auto; right: 24px; }
.bubble.t-tl::after { bottom: auto; top: -10px; transform: rotate(225deg); }
.bubble.t-tr::after { bottom: auto; top: -10px; left: auto; right: 24px; transform: rotate(225deg); }
.bubble.t-r::after { bottom: auto; top: 40%; left: auto; right: -10px; transform: rotate(-45deg); }
.bubble.t-l::after { bottom: auto; top: 40%; left: -10px; transform: rotate(135deg); }
.bubble.scout-says { background: #E0F2FE; }
.bubble.scout-says::after { background: #E0F2FE; }

.cap {
  margin: 0; background: var(--cap); border: 2px solid var(--line); padding: .45rem .7rem;
  font: 700 .82rem/1.35 var(--font-sans); color: var(--line); box-shadow: 2px 2px 0 var(--line);
}
.cap b { font-family: var(--font-mono); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; display: block; color: var(--accent-hover); }

/* ── Chapters ──────────────────────────────────────────── */
.chapter { padding-block: clamp(3.2rem, 7vw, 5.2rem); border-top: 2px dashed var(--rule); }
.chapter:nth-of-type(even) { background: #fff; }
.ch-head { display: grid; gap: .8rem; max-width: 780px; margin-bottom: 2rem; }
.ch-no {
  justify-self: start; font: 700 .74rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--line); color: #fff; padding: .42rem .7rem; border-radius: 999px;
}
.ch-head h2 q { quotes: "\201C" "\201D"; }
.ch-head .lead { max-width: 64ch; }

/* comic strip: a grid of framed panels */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.strip.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.strip.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.panel {
  position: relative; margin: 0; background: var(--sky); border: 3px solid var(--line); border-radius: 12px;
  overflow: hidden; box-shadow: 5px 5px 0 var(--line); aspect-ratio: 4 / 3;
}
.panel.tall { grid-row: span 2; aspect-ratio: auto; }
.panel.wide { grid-column: span 2; aspect-ratio: auto; min-height: 220px; }
.panel.wide > img { object-position: 50% 28%; }
.panel.full { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.panel .bubble, .panel .cap { position: absolute; z-index: 1; max-width: 78%; }
.panel .bubble { font-size: .98rem; max-width: 62%; }
.panel .at-bl + .at-br, .panel .at-bl:has(+ .at-br) { max-width: 46%; }
.panel .cap { left: 10px; top: 10px; }
.panel .cap.bottom { top: auto; bottom: 10px; }
.panel .at-tl { left: 12px; top: 12px; }
.panel .at-tr { right: 12px; top: 12px; }
.panel .at-bl { left: 12px; bottom: 16px; }
.panel .at-br { right: 12px; bottom: 16px; }
.panel .at-tc { left: 50%; top: 12px; transform: translateX(-50%); }
.panel .day {
  position: absolute; right: 10px; top: 10px; z-index: 1; background: var(--accent); color: #fff;
  font: 700 .8rem/1 var(--font-mono); padding: .45rem .65rem; border-radius: 999px; border: 2px solid var(--line);
}
@media (max-width: 860px) {
  .strip, .strip.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel.tall { grid-row: auto; aspect-ratio: 3 / 4; }
  .panel.full { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .strip, .strip.two, .strip.four { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .panel.wide { grid-column: auto; aspect-ratio: 4 / 3; }
  .panel.tall { aspect-ratio: 4 / 5; }
  .panel .bubble { font-size: .9rem; max-width: 80%; }
}
.cast-note { margin-top: 1rem; font-size: .8rem; color: var(--ink-3); }

/* Gia explains: the plain-language facts after each strip */
.gia-says {
  margin-top: 2rem; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1rem 1.2rem; align-items: start;
  background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 1.3rem 1.4rem; box-shadow: 5px 5px 0 var(--accent);
}
.chapter:nth-of-type(even) .gia-says { background: var(--ground); }
.avatar { width: 76px; height: 76px; border-radius: 50%; border: 2.5px solid var(--line); background: #A7F3D0; object-fit: cover; }
.gia-says .who { font: 600 .7rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: .45rem; display: block; }
.gia-says p + p, .gia-says ul + p, .gia-says p + ul { margin-top: .7rem; }
.gia-says ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; color: var(--ink-2); }
.gia-says .btn-row { margin-top: 1rem; }
@media (max-width: 560px) { .gia-says { grid-template-columns: 1fr; } .avatar { width: 60px; height: 60px; } }

/* evidence board (sourced stats as pinned cards) */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 1.6rem; }
.note {
  position: relative; background: #fff; border: 2px solid var(--line); border-radius: 6px; padding: 1.3rem 1.1rem 1rem;
  box-shadow: 4px 4px 0 var(--line); display: grid; gap: .45rem; transform: rotate(-1.2deg);
}
.note:nth-child(2) { transform: rotate(1deg); background: var(--cap); }
.note:nth-child(3) { transform: rotate(-.4deg); }
.note::before { content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: #EF4444; border: 2px solid var(--line); transform: translateX(-50%); }
.note .n { font: 800 2.2rem/1 var(--font-display); color: var(--accent); }
.note p { color: var(--ink-2); font-size: .95rem; }
.note .src { font: 500 .72rem/1.3 var(--font-mono); color: var(--ink-3); }
@media (max-width: 820px) { .board { grid-template-columns: minmax(0, 1fr); } .note { transform: none !important; } }

/* timeline strip (Magento chapter) */
.tl-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 1.6rem; }
.tl-box { background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 1rem; display: grid; gap: .45rem; align-content: start; box-shadow: 3px 3px 0 var(--line); }
.tl-box time { font: 700 .74rem/1 var(--font-mono); background: var(--cap); border: 1.5px solid var(--line); padding: .35rem .5rem; justify-self: start; }
.tl-box h3 { font-size: 1.05rem; }
.tl-box p { font-size: .9rem; color: var(--ink-2); }
.tl-box .src { font: 500 .7rem/1.3 var(--font-mono); color: var(--ink-3); }
@media (max-width: 960px) { .tl-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tl-strip { grid-template-columns: minmax(0, 1fr); } }

/* Scout's five doors (the free check's five areas) */
.doors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.door5 { background: #fff; border: 2px solid var(--line); border-radius: 14px 14px 6px 6px; padding: 1rem .9rem; display: grid; gap: .4rem; align-content: start; box-shadow: 3px 3px 0 var(--line); }
.door5 .lv { font: 700 .7rem/1 var(--font-mono); color: #fff; background: var(--sky); border-radius: 999px; padding: .3rem .5rem; justify-self: start; }
.door5 h3 { font-size: 1.1rem; }
.door5 p { font-size: .88rem; color: var(--ink-2); }
.door5 .breaks { color: var(--warn); }
.door5 .breaks::before { content: "Trips up when: "; font-weight: 600; }
@media (max-width: 960px) { .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .doors { grid-template-columns: minmax(0, 1fr); } }

/* team */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.person { background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 1.3rem; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; box-shadow: 5px 5px 0 var(--line); align-items: start; }
.person .portrait { width: 96px; height: 96px; border-radius: 50%; border: 2.5px solid var(--line); object-fit: cover; background: var(--tint); display: grid; place-items: center; font: 800 1.9rem/1 var(--font-display); color: var(--accent-hover); }
.person h3 { font-size: 1.2rem; }
.person .role { font: 500 .78rem/1.35 var(--font-mono); color: var(--accent); margin: .2rem 0 .5rem; }
.person p { font-size: .95rem; color: var(--ink-2); }
.story .figs { margin-top: 1.4rem; }
@media (max-width: 760px) { .team { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .person { grid-template-columns: 1fr; } }

/* Ask Gia: the FAQ as a chat */
.story .faq details { border: 2px solid var(--line); border-radius: 14px; background: #fff; margin-bottom: 10px; box-shadow: 3px 3px 0 var(--line); padding: 0; }
.story .faq summary { padding: .9rem 1.1rem; font-weight: 600; cursor: pointer; }
.story .faq .a { padding: 0 1.1rem 1rem 4.4rem; position: relative; }
.story .faq .a::before {
  content: ""; position: absolute; left: 1.1rem; top: 0; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--line); background: #A7F3D0 url("story/gia-avatar.webp") center / cover;
}

/* developers band */
.dev-band { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 1.4rem; align-items: center; background: var(--ink); color: #C9D3CD; border-radius: 18px; padding: 1.2rem 1.4rem; border: 2px solid var(--line); box-shadow: 5px 5px 0 var(--accent); }
.dev-band img { width: 160px; height: 160px; border-radius: 12px; object-fit: cover; border: 2px solid #34D399; }
.dev-band h3 { color: #fff; }
.dev-band .btn { background: #34D399; border-color: #34D399; color: var(--ink); }
@media (max-width: 760px) { .dev-band { grid-template-columns: 1fr; } .dev-band img { width: 100%; height: auto; aspect-ratio: 1; max-width: 220px; } }

/* closer group shot */
.closer-art { margin: 0 0 1.6rem; border: 3px solid #34D399; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 7; }
.closer-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gia's reaction on the check result */
.gia-react { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; align-items: center; margin-bottom: 1.2rem; }
.gia-react .avatar { width: 64px; height: 64px; }

/* ── Motion (only with html.motion) ────────────────────── */
.motion .panel, .motion .note, .motion .door5, .motion .tl-box {
  opacity: 0; translate: 0 26px; transition: opacity .5s ease, translate .6s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--d, 0s);
}
.motion .in { opacity: 1; translate: 0 0; }
.motion .panel .bubble, .motion .panel .cap, .motion .hero-art .bubble {
  opacity: 0; scale: .6; transition: opacity .3s ease, scale .45s cubic-bezier(.3, 1.6, .5, 1);
  transition-delay: calc(var(--d, 0s) + var(--b, .35s));
}
.motion .in .bubble, .motion .in .cap, .motion .hero-art.in .bubble { opacity: 1; scale: 1; }
.motion .hero-art .gia { animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }
.typing { display: inline-flex; gap: 4px; vertical-align: middle; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { opacity: .2; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .scout, .typing i, .hero-art .gia { animation: none !important; }
}

/* a panel with its explanation underneath (ACO chapter) */
.frame { display: grid; gap: .8rem; align-content: start; }
.frame > p { font-size: .92rem; color: var(--ink-2); }
.result .gia-react .bubble { font: 700 1rem/1.35 var(--font-letter); color: var(--line); }

/* ── Placed bubbles (2026-10-23 review: never over a face, tail at the speaker) ──
   Each panel bubble carries its own spot as percentages of the picture
   (--x, --y, --w) and a tail on one edge (tail-t/b/l/r) at --t along it.
   Text is sized from the panel width (cqi), so the bubble covers the same
   part of the picture on a phone as on a laptop. Every panel keeps its
   picture's own shape (4:3, or 16:9 for .full), so nothing gets cropped. */
.panel { container-type: inline-size; aspect-ratio: 4 / 3; }
.panel.full { aspect-ratio: 16 / 9; }
.panel .bubble.pos {
  left: var(--x); top: var(--y); right: auto; bottom: auto; width: var(--w); max-width: none;
  font-size: clamp(11px, 3.9cqi, 20px); padding: .45em .7em .5em; border-radius: .9em; border-width: 2px;
}
.panel .bubble.pos .who { font-size: .62em; margin-bottom: .2em; }
.bubble[class*="tail-"]::after { width: .9em; height: .9em; border-width: 0 2px 2px 0; right: auto; bottom: auto; }
.bubble.tail-b::after { left: calc(var(--t, 30%) - .45em); bottom: -.55em; top: auto; transform: rotate(45deg); }
.bubble.tail-t::after { left: calc(var(--t, 30%) - .45em); top: -.55em; transform: rotate(225deg); }
.bubble.tail-l::after { left: -.55em; top: calc(var(--t, 50%) - .45em); transform: rotate(135deg); }
.bubble.tail-r::after { left: auto; right: -.55em; top: calc(var(--t, 50%) - .45em); transform: rotate(-45deg); }

/* hero: Gia's bubble sits to the left of her head, tail at her mouth */
@media (min-width: 901px) {
  .hero-art .bubble { left: auto; right: 59%; top: -8%; width: min(14rem, 62%); max-width: none; }
  .hero-art .bubble.t-br::after { left: auto; right: -10px; bottom: auto; top: 78%; transform: rotate(-45deg); }
}
.panel.full .bubble.pos { font-size: clamp(11px, 2cqi, 22px); }

/* ── Check page hero: Scout on a glowing grid (2026-10-24) ── */
.hero-scout { min-height: 400px; align-items: center; }
.hero-scout .grid-orb {
  position: absolute; inset: 4% 4% 2% 10%; border-radius: 50%; border: 3px solid var(--line);
  box-shadow: 6px 6px 0 var(--line);
  background:
    linear-gradient(rgba(56, 189, 248, .28) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(90deg, rgba(56, 189, 248, .28) 1px, transparent 1px) 0 0 / 30px 30px,
    radial-gradient(circle at 50% 42%, #1E3A8A 0, var(--sky) 72%);
}
.hero-art.hero-scout .scout { position: relative; right: auto; top: auto; width: min(230px, 56%); margin-left: 6%; }
@media (min-width: 901px) {
  .hero-art.hero-scout .bubble { right: auto; left: -4%; top: -2%; width: min(15rem, 58%); }
  .hero-art.hero-scout .bubble.t-br::after { top: auto; bottom: -10px; right: 22%; left: auto; transform: rotate(45deg); }
}
@media (max-width: 900px) {
  .hero-scout { min-height: 0; }
  .hero-scout .grid-orb { inset: auto; right: 0; top: 50%; transform: translateY(-50%); width: 132px; height: 132px; box-shadow: 3px 3px 0 var(--line); }
  .hero-art.hero-scout .scout { grid-column: 2; grid-row: 1; width: 104px; margin: 0 0 0 14px; }
}

/* check page: a compact hero so the check box and Scout both sit in the first
   screen of a typical laptop (1366x768, 1440x900) */
.story .hero-compact { padding-block: clamp(1.4rem, 3vw, 2.4rem) clamp(2rem, 4vw, 3rem); }
.story .hero-compact .hero-grid { align-items: center; }
.story .hero-compact .hero-copy { gap: 1rem; }
.story .hero-compact h1 { font-size: clamp(2rem, 3.4vw, 2.85rem); line-height: 1.06; }
.story .hero-compact .lead { font-size: 1.02rem; line-height: 1.55; }
.story .hero-compact .hero-scout { min-height: 340px; }
@media (max-width: 900px) { .story .hero-compact .hero-scout { min-height: 0; } }
@media (min-width: 901px) {
  .story .hero-compact .hero-scout .grid-orb { inset: auto; left: 54%; top: 50%; width: min(380px, 84%); aspect-ratio: 1; transform: translate(-50%, -50%); }
}