/* ==========================================================================
   Pawprint v4 — die-cut sticker sheet

   The page is a cutting mat: a warm grey board with a faint dot grid. Every
   interactive object is a sticker printed on white stock, outlined in ink,
   and lifted by a hard offset shadow — never a blurred one. That single
   recipe (white stock, ink edge, hard lift) is what makes the button, the
   archetype cards, the result card and the chips read as one set of objects
   rather than four unrelated components.

   Type: still no web fonts — the CN network would block Google Fonts and
   blow the LCP budget. Three roles, three faces that ship with the OS:
     display  Arial Black / Segoe UI Black   (poster voice, uppercase)
     body     system sans                    (prose, never uppercase)
     utility  system monospace               (every number, tag, domain)
   ========================================================================== */

:root {
  --board: #E9E5DE;
  --board-2: #E0DBD2;
  --dot: #D5CEC2;

  --sticker: #FFFFFF;
  --ink: #12100E;
  --ink-2: #4A443E;
  /* Board-relative contrast: #6F6860 measured 4.37:1 on --board, just under
     the 4.5:1 AA floor for body text. #665F55 clears it at 5.02:1 on the
     board and 6.30:1 on white stock, so the same token serves both. */
  --muted: #665F55;
  /* --faint is text, not decoration: it paints the pet-name placeholder and
     the domain line on the share card, both on white stock. #8E877E measured
     3.55:1 there, under the 4.5:1 floor. #7A736A clears it at 4.68:1 and
     still sits a step lighter than --muted, so the hierarchy holds. */
  --faint: #7A736A;

  --cut: #BFB6A8;
  --line: #D8D2C8;

  --accent: #8A3930;
  --accent-ink: #FFF6F2;

  --display: "Arial Black", "Segoe UI Black", "Helvetica Neue", Impact,
             "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --gutter: 22px;
  --max: 720px;
  --radius: 18px;
  --header-h: 57px;
  --sticky-h: 0px;

  --edge: 2px;   /* sticker outline weight */
  --lift: 4px;   /* hard offset shadow — printed, never blurred */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--board);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 20px 20px;
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

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

button { font: inherit; color: inherit; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* The utility voice: numbers, tags, domains, counts. Kept short so it never
   has to set a sentence — monospace prose reads as a code sample. */
.eyebrow,
.tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Route changes move focus to <main> so screen readers land in the new view.
   That target is a container, not a control: an outline around the whole page
   would read as a bug. */
main:focus { outline: none; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  background: color-mix(in srgb, var(--board) 86%, transparent);
  backdrop-filter: saturate(1.1) blur(14px);
  -webkit-backdrop-filter: saturate(1.1) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--board) 94%, transparent);
}

.site-header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -.02em;
}
.brand svg { width: 16px; height: 16px; }

.species-switch {
  display: inline-flex;
  padding: 2px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--sticker);
}
.species-switch button {
  position: relative;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: background .16s, color .16s;
}
/* The pill stays 27px tall so the header keeps its 57px, but the tap area is
   grown to 44px by an invisible box that overflows it. Vertical only: the two
   buttons sit side by side, so widening them would make the neighbours'
   targets overlap. No layout is affected — the box is inside the header.
   Gated on any-pointer so a mouse never hovers a target it isn't over. */
@media (any-pointer: coarse) {
  .species-switch button::after,
  .lang-switch::after {
    content: '';
    position: absolute;
    inset: -9px 0;
  }
}
.species-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--sticker);
}

.header-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Language toggle. Small and quiet — it is a preference, not a step in the
   quiz flow. 44px min width keeps it a legal tap target. */
.lang-switch {
  position: relative;
  border: 1.5px solid var(--ink);
  background: var(--sticker);
  border-radius: 999px;
  min-width: 44px;
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
  cursor: pointer;
  transition: background .16s, color .16s;
}
.lang-switch:hover,
.lang-switch:focus-visible {
  background: var(--ink);
  color: var(--sticker);
}

/* ------------------------------------------------------------- CJK reset */

/* The display face falls back to a CJK sans for hanzi: negative tracking
   makes them crowd, uppercase is meaningless, and the tight poster leading
   that works for Latin caps is too tight for full-width glyphs. */
html[lang="zh-Hans"] body { letter-spacing: 0; }
html[lang="zh-Hans"] .hero h1 { letter-spacing: -.005em; line-height: 1.16; }
html[lang="zh-Hans"] .tagline { letter-spacing: -.005em; line-height: 1.32; }
html[lang="zh-Hans"] .eyebrow,
html[lang="zh-Hans"] .tag,
html[lang="zh-Hans"] .section-head h2,
html[lang="zh-Hans"] .result-section h2,
html[lang="zh-Hans"] .concern dt { text-transform: none; letter-spacing: .04em; }
html[lang="zh-Hans"] .species-switch button,
html[lang="zh-Hans"] .lang-switch { text-transform: none; letter-spacing: 0; }
html[lang="zh-Hans"] .h-punch { letter-spacing: 0; }

/* ------------------------------------------------------------------- S1 */

.hero {
  padding-block: 18px 34px;
}

/* The die-cut line. Used exactly once on the page — around the hero sheet —
   so it reads as a real die line and not as a decorative border style. */
.sheet {
  border: 2px dashed var(--cut);
  border-radius: 26px;
  padding: 9px;
}

.hero-plate {
  position: relative;
  border-radius: 18px;
  background: var(--plate, var(--ink));
  color: #fff;
  padding: 22px 20px 26px;
  overflow: hidden;
}

.hero-eyebrow {
  color: rgba(255,255,255,.66);
}

.hero h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(27px, 8.4vw, 58px);
  line-height: .98;
  letter-spacing: -.035em;
  margin: 14px 0 0;
}
.hero h1 span { display: block; }
/* The setup is spoken; the punchline is shouted. Two sizes, two weights of
   the same voice, so the sentence reads as a setup and a verdict. */
.h-setup {
  font-size: .64em;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.82);
}
.h-punch {
  font-size: 1em;
  margin-top: .1em;
  text-transform: uppercase;
  letter-spacing: -.03em;
}

.hero .sub {
  font-size: 15.5px;
  line-height: 1.45;
  color: rgba(255,255,255,.8);
  margin: 14px 0 0;
  max-width: 34ch;
}

/* Three of the eight suspects, peeled off the plate and stuck over its edge.
   Each is the same SVG the card and the wall use, so the first thing a
   visitor sees is drawn in the same hand as everything below. Decorative —
   the wall repeats all of them with names attached. */
.hero-pets {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: -30px 0 18px;
  position: relative;
  z-index: 2;
}
.hero-pet {
  display: block;
  line-height: 0;
  padding: 5px;
  background: var(--sticker);
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--ink);
}
.hero-pet:nth-child(1) { transform: rotate(-7deg) translateY(5px); }
.hero-pet:nth-child(3) { transform: rotate(8deg) translateY(7px); }
.hero-pet.is-mid {
  transform: rotate(2deg) translateY(-4px);
  z-index: 3;
  margin-inline: -13px;
}
.hero-pet svg { display: block; border-radius: 50%; }

/* The sticker button. White stock, ink edge, hard lift — the one component
   the whole page is built around, so it lives here and is reused verbatim
   for the hero CTA, the sticky CTA, the footer CTA and the match link. */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 58px;
  padding: 0 12px 0 20px;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--sticker);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 var(--lift) 0 var(--ink);
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn-primary:active {
  transform: translateY(var(--lift));
  box-shadow: 0 0 0 var(--ink);
}
.btn-primary .arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--sticker);
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
}

.hero .btn-primary { margin-top: 0; }

.cost {
  margin: 13px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cost span + span::before { content: " · "; }
.cost span { display: inline; }

/* ------------------------------------------------------------------- S2 */

/* clip, not hidden: hidden would turn this into a vertical scroll container */
.section { padding-block: 54px; overflow-x: clip; }
.section--tight { padding-block: 40px; }

.section-head { margin-bottom: 22px; }
.section-head h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(20px, 5.6vw, 30px);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0 0 7px;
}
.section-head p {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
}
.section-head.left { text-align: left; }

/* archetype wall — S2, the conversion engine.
   The art stays full-bleed; the name and the line sit on a white plate
   printed across the bottom, so each card reads as a photo with a label
   stuck on it rather than a caption floating on a dark gradient. */
.wall {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding: 8px var(--gutter) 22px;
  /* bleed both edges so cards run edge to edge; the section clips the box so
     the document does not gain a horizontal scrollbar at 390px */
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wall::-webkit-scrollbar { display: none; }

.wall-card {
  flex: 0 0 74vw;
  max-width: 296px;
  aspect-ratio: 4 / 3;
  scroll-snap-align: center;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  padding: 0;
  display: block;
  border: var(--edge) solid var(--ink);
  background: var(--sticker);
  box-shadow: 0 4px 0 var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .12s ease;
}
/* A sheet of hand-stuck stickers is never perfectly level. */
.wall-card:nth-child(odd) { transform: rotate(-.9deg); }
.wall-card:nth-child(even) { transform: rotate(.9deg); }
.wall-card:active {
  transform: translateY(4px) rotate(0deg);
  box-shadow: 0 0 0 var(--ink);
}

.wall-card .art {
  position: absolute;
  inset: 0;
}
.wall-card .art svg { width: 100%; height: 100%; }
.wall-card .art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,0) 34%);
}

.wall-no {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--sticker);
  border: 1.5px solid var(--ink);
  color: var(--ink);
}

.wall-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  padding: 8px 12px 10px;
  background: var(--sticker);
  border-top: var(--edge) solid var(--ink);
}
.wall-title {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: 14px;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.wall-line {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  margin-top: 3px;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 0;
}
.dots i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--cut);
  transition: background .2s, transform .2s;
}
.dots i.on { background: var(--ink); transform: scale(1.1); }

/* ------------------------------------------------------------------- S3 */

/* Crop marks, drawn as eight hairlines. This is the only place on the page
   that pretends to be a printing artefact; the card it frames is meant to be
   screenshot and it should look like something that came off a press. */
.sample-frame {
  position: relative;
  padding: 15px;
}
.sample-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--cut), var(--cut)) left 0 top 8px / 11px 1.5px no-repeat,
    linear-gradient(var(--cut), var(--cut)) left 8px top 0 / 1.5px 11px no-repeat,
    linear-gradient(var(--cut), var(--cut)) right 0 top 8px / 11px 1.5px no-repeat,
    linear-gradient(var(--cut), var(--cut)) right 8px top 0 / 1.5px 11px no-repeat,
    linear-gradient(var(--cut), var(--cut)) left 0 bottom 8px / 11px 1.5px no-repeat,
    linear-gradient(var(--cut), var(--cut)) left 8px bottom 0 / 1.5px 11px no-repeat,
    linear-gradient(var(--cut), var(--cut)) right 0 bottom 8px / 11px 1.5px no-repeat,
    linear-gradient(var(--cut), var(--cut)) right 8px bottom 0 / 1.5px 11px no-repeat;
}

.sample {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: var(--edge) solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  background: var(--sticker);
}
.sample .card-shell { border-radius: 14px; border: 0; box-shadow: none; }

.sample-caption {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.traits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.traits li {
  border: 1.5px solid var(--ink);
  background: var(--sticker);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}

.excerpt {
  position: relative;
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-height: 5.1em;
  overflow: hidden;
}
.excerpt::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* only the tail of the last line should fade — a tall gradient erased the
     whole second sentence */
  height: 1.3em;
  background: linear-gradient(to bottom, rgba(233,229,222,0), var(--board) 72%);
}

/* ------------------------------------------------------------------- S4 */

.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-block: 15px;
  border-top: 1.5px solid var(--line);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.steps li:last-child { border-bottom: 1.5px solid var(--line); }
/* Order carries meaning here: answer, then get, then send. Numbering the
   steps is information, not decoration. */
.step-no {
  flex: 0 0 auto;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--sticker);
  border: 1.5px solid var(--ink);
  color: var(--ink);
}

/* ------------------------------------------------------------------- S5 */

.concerns { margin: 0; padding: 0; }
.concern {
  padding-block: 17px;
  border-top: 1.5px solid var(--line);
}
.concern:last-of-type { border-bottom: 1.5px solid var(--line); }
.concern dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 7px;
}
.concern dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}

/* ------------------------------------------------------------------- S6 */

.footer-cta { padding-block: 6px 36px; }

.site-footer {
  /* The sticky CTA (58px button + hard lift + safe area) sits over the last
     footer lines at full scroll, so reserve its height here. */
  padding-block: 0 calc(46px + 96px + env(safe-area-inset-bottom));
  font-size: 13px;
  color: var(--muted);
}
.site-footer .links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.site-footer .links a { text-decoration: none; color: var(--muted); }
.site-footer .links a:hover { color: var(--ink); }
.site-footer .links a + a::before { content: "·"; margin-right: 8px; color: var(--cut); }
.site-footer p { margin: 0; max-width: 44ch; line-height: 1.55; }

/* ------------------------------------------------------- sticky CTA (1.8) */

.cta-sticky {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--board) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1.5px solid var(--line);
  transform: translateY(100%);
  transition: transform .25s ease;
  pointer-events: none;
}
.cta-sticky.visible { transform: translateY(0); pointer-events: auto; }
.cta-sticky .btn-primary { height: 58px; max-width: var(--max); margin: 0 auto; }

/* ================================================================== QUIZ */

.quiz-shell {
  min-height: calc(100dvh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  padding-block: 20px 34px;
}

/* Ten segments, not a bar: the count is the information, so show the ticks
   and let the visitor read "three left" without doing arithmetic. */
.progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.ticks {
  display: flex;
  gap: 4px;
  flex: 1;
}
.ticks i {
  flex: 1;
  height: 6px;
  border-radius: 2px;
  background: var(--board-2);
  border: 1.5px solid var(--cut);
}
.ticks i.on {
  background: var(--ink);
  border-color: var(--ink);
}
.progress .count {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: .02em;
}

.q-step {
  animation: rise .26s ease both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .q-step { animation: none; }
}

.q-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.q-text {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(23px, 6.6vw, 36px);
  line-height: 1.04;
  letter-spacing: -.03em;
  margin: 0 0 24px;
}

.options { display: grid; gap: 11px; }

.option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  border: var(--edge) solid var(--ink);
  border-radius: 14px;
  background: var(--sticker);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .1s ease, box-shadow .1s ease, background .14s, color .14s;
}
.option:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--ink);
}
.option .key {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 7px;
  border: 1.5px solid currentColor;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: .55;
}
.option[aria-checked="true"] {
  background: var(--ink);
  color: var(--sticker);
}
.option[aria-checked="true"] .key { opacity: 1; }
.option:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.quiz-nav {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.link-btn {
  border: 0;
  background: none;
  padding: 12px 2px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--cut);
  text-decoration-thickness: 1.5px;
}
.link-btn[disabled] { opacity: .35; cursor: default; }

/* ================================================================ RESULT */

.result { padding-block: 18px 90px; overflow-wrap: anywhere; }

.result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
/* The card arrives before the type name, so this line is the only thing
   labelling it. Sentence case at 15px reads as a title; the default 11px
   uppercase letter-spaced eyebrow read as a caption. At 320px "Miso · The
   Independent Contractor" runs right up to Share, so the label flexes and
   wraps and the button never shrinks. */
.result-head .eyebrow {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--ui);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  font-weight: 500;
}
.result-head .icon-btn { flex: 0 0 auto; }
.icon-btn {
  border: 1.5px solid var(--ink);
  background: var(--sticker);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .1s ease, box-shadow .1s ease;
}
.icon-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }

/* ① tagline — the screenshot block */
.tagline-block {
  position: relative;
  padding: 4px 0 28px;
  border-bottom: 1.5px solid var(--line);
  margin-bottom: 24px;
}
.tagline {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(23px, 6.4vw, 31px);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0;
  max-width: 20ch;
}
.tagline::selection { background: #FDE68A; color: var(--ink); }

/* ⓪ optional pet name — sits above the tagline so the name is set before
   the screenshot block is read. Native input, no custom chrome. */
.pet-field {
  display: block;
  margin-bottom: 18px;
}
.pet-field span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 7px;
}
.pet-field input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px;
  padding: 11px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--sticker);
  color: var(--ink);
  /* iOS zooms the page when a focused input is under 16px; keep 16px. */
}
.pet-field input::placeholder { color: var(--faint); }
.pet-field input:focus {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.copy-hint {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Desktop has no long-press gesture, so the touch hints read as broken
   instructions there. Hide them where hover exists. */
@media (hover: hover) and (pointer: fine) {
  .copy-hint, .longpress-hint { display: none; }
  .tagline-block { padding-bottom: 16px; }
}

/* ② card preview — the sticker itself: white stock, ink edge, hard lift. */
.card-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--sticker);
  border: var(--edge) solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  user-select: none;
  -webkit-user-select: none;
}
.card-shell svg { width: 100%; height: 100%; }

.longpress-hint {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ③ actions */
/* The gap above the primary button lives here, not only on the hint. On
   desktop .longpress-hint is display:none, so a hint-only margin left the
   share button pressed against the bottom edge of the card — measured 0px. */
.actions { display: grid; gap: 10px; margin-top: 34px; margin-bottom: 34px; }

.btn-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 58px;
  border-radius: 999px;
  border: var(--edge) solid var(--ink);
  background: var(--ink);
  color: var(--sticker);
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 var(--lift) 0 var(--ink-2);
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn-share:active { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--ink-2); }

/* The label promises Instagram but the OS sheet is what actually opens; this
   line closes that gap. Sits tight under the button so it reads as a
   caption, not as a fourth action. */
.share-hint {
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  /* --faint measures under 3:1 on the board — fine for a decoration, not for
     an instruction the visitor has to read. --muted clears 4.5:1. */
  color: var(--muted);
  text-align: center;
}
.actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-ghost {
  height: 50px;
  border-radius: 999px;
  border: var(--edge) solid var(--ink);
  background: var(--sticker);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn-ghost:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }

/* ④ content */
.type-name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(28px, 8.4vw, 44px);
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.type-name + .pet-name {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--muted);
}
.type-name + .pet-name b { color: var(--ink); font-weight: 700; }

.result-paragraph {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 0 0 6px;
}

.result-section { padding-block: 32px; border-top: 1.5px solid var(--line); }
.result-section h2 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 18px;
}

.means { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.means li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.means li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--ink);
  margin-top: 9px;
}

/* ⑥ match entry */
.match-box {
  padding: 22px 20px 22px;
  border: var(--edge) solid var(--ink);
  border-radius: 18px;
  background: var(--sticker);
  box-shadow: 0 4px 0 var(--ink);
}
.match-box p {
  font-family: var(--display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0 0 18px;
  max-width: 22ch;
}
.match-box p span { display: block; color: var(--muted); }

/* ⑦ feedback */
.feedback-q {
  font-size: 15.5px;
  margin: 0 0 14px;
  color: var(--ink-2);
}
.feedback-btns { display: flex; gap: 10px; }
.feedback-btns .btn-ghost { flex: 1; height: 48px; }
.feedback-followup { margin-top: 18px; animation: rise .24s ease both; }
.feedback-followup p { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.5px solid var(--ink);
  background: var(--sticker);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--ink);
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--sticker); }

.thanks { font-size: 14px; color: var(--muted); margin: 0; }

/* ⑧ method */
details.method {
  border-top: 1.5px solid var(--line);
  padding-top: 20px;
}
details.method summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
details.method summary::-webkit-details-marker { display: none; }
details.method summary::after {
  content: "+";
  font-size: 15px;
  color: var(--ink);
}
details.method[open] summary::after { content: "−"; }
details.method p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 14px 0 0;
  max-width: 46ch;
}

/* ⑨ restart. An <a>, so it takes the ghost shape without a button element;
   the ghost weight keeps it from competing with Share. */
.restart {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1.5px solid var(--line);
}
.restart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding-inline: 16px;
  text-decoration: none;
  text-align: center;
  line-height: 1.3;
}

/* share variant switcher */
.variants {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.variants::-webkit-scrollbar { display: none; }
.variants button {
  border: 1.5px solid var(--ink);
  background: var(--sticker);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.variants button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--sticker);
  font-weight: 500;
}
.share-preview {
  border: 2px dashed var(--cut);
  border-radius: 14px;
  padding: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--board-2);
}

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translate(-50%, 14px);
  background: var(--ink);
  color: var(--sticker);
  font-size: 13.5px;
  line-height: 1.4;
  padding: 11px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 90;
  max-width: calc(100vw - 40px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* consent banner (assets/js/consent.js) — only rendered for EU/EEA visitors
   who have not chosen yet, so it must not assume any other element exists. */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  background: var(--ink);
  color: var(--sticker);
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: 0 -8px 24px rgba(18,16,14,.22);
}
.consent p { margin: 0; flex: 1 1 220px; max-width: 46ch; }
.consent-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.consent button {
  border: 1.5px solid rgba(255,255,255,.36);
  background: transparent;
  color: var(--sticker);
  border-radius: 999px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.consent button[data-consent="granted"] {
  background: var(--sticker);
  border-color: var(--sticker);
  color: var(--ink);
}
.consent button:focus-visible { outline: 3px solid var(--sticker); outline-offset: 2px; }

/* The banner and the landing sticky CTA would stack into 180px of a phone
   screen. The banner is the one that needs an answer, so it wins. */
html.consent-open .cta-sticky { display: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- desktop */

@media (min-width: 780px) {
  :root { --gutter: 34px; --max: 760px; }
  .hero h1 { font-size: 56px; }
  .h-setup { font-size: .58em; }
  .section { padding-block: 72px; }
  .wall-card { flex-basis: 288px; }
  .result { padding-block: 32px 110px; }
  .card-shell { max-width: 420px; margin-inline: auto; }
  .longpress-hint { text-align: center; }
}