/* Strangey Dangey — how-to guides
   Shared chrome for /how-to and every guide under it. Base tokens and the
   Daybreak gradient come from styles.css; this file owns the guide shell.

   Designed phone-first, because that is where a parent reads this: one-handed,
   mid-interruption, hunting one specific answer. Three rules follow from that
   and explain most of what is below.

   1. Triage before prose. The index is a list of ROWS, not a grid of cards —
      all five guides fit one phone screen, so choosing costs a glance instead
      of a scroll. Rows also cannot orphan or go ragged the way a 2-up grid of
      three cards does.
   2. Every claim carries its evidence. Each row shows a crop of the screen its
      guide is about; each step shows the frame its tap produces. The page
      should never have to ASSERT that it matches the app.
   3. Motion only where motion is the point. A slider being dragged and a menu
      opening cannot be photographed; a page being scrolled can. Only the first
      two are clips.

   Assets come from handoff/screenshots via scripts/build-guide-thumbs.py and
   scripts/capture-guide-gifs.sh. Maintenance contract:
   handoff/SITE_HOW_TO_GUIDES.md. */

@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-Medium.woff2") format("woff2"), url("fonts/PlusJakartaSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-SemiBold.woff2") format("woff2"), url("fonts/PlusJakartaSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-Bold.woff2") format("woff2"), url("fonts/PlusJakartaSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-ExtraBold.woff2") format("woff2"), url("fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --clean-ink: #1E6B52;
  --sus-ink: #8A6314;
  --not-ink: #A3352C;
  --shadow-card: 0 10px 28px rgba(34,40,46,0.08), 0 0 0 1px var(--border);
  --shadow-float: 0 20px 44px rgba(34,40,46,0.14), 0 0 0 1px var(--border);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --gutter: 20px;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--bg-grad); margin: 0; }
a { color: inherit; }
a:hover { text-decoration: none; }
a:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 10px; }
/* Match the ring to the shape it is ringing. */
.guide-card:focus-visible { border-radius: 16px; }
.store-badge:focus-visible { border-radius: 14px; }

/* A linked heading must not land under the sticky bar. */
[id] { scroll-margin-top: 76px; }

::selection { background: rgba(27,133,134,0.18); }

/* Counts read as columns, not as words. */
.guide-meta { font-variant-numeric: tabular-nums; }

/* ---- Topbar: same wordmark + one door as the home page ---- */
.topbar { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
          background: color-mix(in oklab, var(--bg-top) 78%, transparent); }
.topbar-inner { max-width: 760px; margin: 0 auto;
                 padding: 8px max(var(--gutter), env(safe-area-inset-right)) 8px max(var(--gutter), env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
/* Both topbar controls carry a 44px hit box without growing the bar: the
   height moved out of the container's padding and into the controls. */
.topbar .brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 19px; text-decoration: none; }
.topbar .brand:hover { text-decoration: none; }
.nav-cta { display: inline-flex; align-items: center; min-height: 44px; font: 700 13px/1 var(--font); color: #fff; background: var(--ink);
           padding: 0 17px; border-radius: 999px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.nav-cta:hover { background: var(--signal); text-decoration: none; }

.page { max-width: 760px; margin: 0 auto;
         padding-left: max(var(--gutter), env(safe-area-inset-left));
         padding-right: max(var(--gutter), env(safe-area-inset-right)); }

/* ---- Breadcrumb. Also the back-out on a phone, so the links get tap height ---- */
.crumb { display: flex; align-items: center; gap: 7px; padding: 2px 0 0; font: 600 12.5px/1 var(--font); color: var(--ink-muted); }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-dim); text-decoration: none; }
.crumb a:hover { color: var(--signal); }

/* ---- Hero ----
   The index gets no eyebrow: the breadcrumb already said "Guides", and on a
   375px screen every repeated line pushes the first real choice further down.
   Guide pages keep theirs, because there it names the VALUE ("The 20-second
   answer"), which the breadcrumb does not. */
.guide-hero { padding: 12px 0 8px; }
.eyebrow { display: block; font: 800 10.5px/1 var(--font); letter-spacing: .13em; text-transform: uppercase; color: var(--signal); margin: 0 0 12px; }
.eyebrow.not { color: var(--not-ink); }
.eyebrow.sus { color: var(--sus-ink); }
.eyebrow.clean { color: var(--clean-ink); }
.guide-hero h1 { margin: 0 0 14px; font: 800 44px/1.02 var(--font); font-size: clamp(30px, 8.4vw, 44px); letter-spacing: -0.035em; text-wrap: balance; max-width: 620px; }
.guide-hero .lede { margin: 0; font: 500 16.5px/1.5 var(--font); color: var(--ink-dim); text-wrap: pretty; max-width: 430px; }
.guide-hero .lede b { font-weight: 700; color: var(--ink); }

/* The one-line promise under the lede. What the parent walks away with. */
.payoff { display: flex; gap: 11px; align-items: flex-start; margin: 22px 0 0; padding: 14px 16px; background: var(--surface);
          border-radius: 14px; box-shadow: var(--shadow-card); font: 600 13.5px/1.5 var(--font); color: var(--ink); text-wrap: pretty; max-width: 500px; }
.payoff svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: var(--signal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Section headings inside a guide ---- */
.block { padding: 46px 0 0; }
.h2 { margin: 0 0 10px; font: 800 30px/1.06 var(--font); font-size: clamp(25px, 6.4vw, 31px); letter-spacing: -0.032em; text-wrap: balance; max-width: 620px; }
.sub { margin: 0 0 24px; font: 500 15px/1.55 var(--font); color: var(--ink-dim); max-width: 450px; text-wrap: pretty; }

/* ---- Section hero ----
   The establishing shot: the whole screen a section is about, before the
   reader has read a word of it. It is the same phone frame the steps use, one
   size up, because a crop of a screen reads as a fragment and a cropped
   header (half a "Kiddos" title) reads as broken. Page length is the cost and
   it is worth it: the reader can tell what a section covers at a glance. */
.section-shot { margin: 2px 0 30px; }
.section-shot .phone { max-width: 272px; }
.section-shot figcaption { max-width: 300px; }

/* ---- Steps ----
   The number column costs 46px of a 375px screen and earns it: the badges plus
   the spine between them are what tell a scrolling reader they are inside a
   sequence and roughly where. Without it every step reads as a fresh section,
   and people lose their place the moment they look up from the phone. */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 36px; }
.step { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.step-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 13px/1 var(--font);
          color: var(--signal); background: rgba(27,133,134,0.13); }
/* One spine segment per step, reaching the next badge across the flex gap. */
.step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 40px; bottom: -36px; width: 2px;
                                border-radius: 1px; background: rgba(27,133,134,0.16); }
.step-body h3 { margin: 4px 0 6px; font: 800 18.5px/1.22 var(--font); letter-spacing: -0.024em; text-wrap: balance; }
.step-body p { margin: 0 0 10px; font: 500 14.5px/1.55 var(--font); color: var(--ink-dim); text-wrap: pretty; max-width: 480px; }
.step-body p:last-child { margin-bottom: 0; }
.step-body b { color: var(--ink); font-weight: 700; }

/* A literal tap target quoted from the app, so the page and the button agree. */
.tap { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px; background: rgba(27,133,134,0.10);
       color: var(--clean-ink); font: 700 13px/1.45 var(--font); white-space: nowrap; }

/* ---- Captured app frames ----
   The bezel stays. On a page about a phone app it says "this is a phone" in no
   words, which is worth more than the width it costs. It is kept thin so the
   chrome never outweighs the screen inside it. */
.shot { margin: 16px 0 0; }
.phone { width: 100%; max-width: 252px; background: var(--ink); border-radius: 36px; padding: 6px;
         box-shadow: 0 20px 40px rgba(34,40,46,0.18), 0 0 0 1px rgba(34,40,46,0.35); }
.phone img { display: block; width: 100%; height: auto; border-radius: 31px; background: var(--raised); }
.shot figcaption { margin: 11px 0 0; max-width: 290px; font: 600 12px/1.45 var(--font); color: var(--ink-muted); text-wrap: pretty; }

/* A clip is a still until it isn't: the <picture> serves the GIF only under
   `prefers-reduced-motion: no-preference`, and everyone else gets the poster
   frame — because a GIF cannot be paused and this one loops forever. The
   caption marker tells a reader the thing is moving before they wonder. */
.clip figcaption::before { content: "\25B8\00a0"; color: var(--signal); font-weight: 800; }

/* ---- Diagram: for steps that happen in iOS chrome, not in our app ----
   The share sheet is Apple's surface and changes shape by iOS version and by
   app. A screenshot of it goes stale; a diagram of it doesn't. The app's own
   ShareExtensionTutorialSheet makes the same call. */
.diagram { margin: 16px 0 0; width: 100%; max-width: 252px; aspect-ratio: 4 / 3; display: grid; place-items: center;
           background: rgba(27,133,134,0.08); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(27,133,134,0.14); }
.diagram svg { width: 66%; height: auto; }
.dg-fill { fill: var(--surface); }
.dg-line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dg-brand { fill: var(--signal); }
.dg-brand-line { fill: none; stroke: var(--signal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dg-soft { fill: rgba(34,40,46,0.13); }

/* ---- Callout: the product truth behind a step ---- */
.note { margin: 16px 0 0; padding: 15px 17px; background: var(--surface); border-radius: 15px; box-shadow: var(--shadow-card); max-width: 500px; }
.note .eyebrow { margin-bottom: 8px; }
.note p { margin: 0; font: 500 13.5px/1.55 var(--font); color: var(--ink-dim); text-wrap: pretty; }
.note p + p { margin-top: 9px; }
.note b { color: var(--ink); font-weight: 700; }

/* ---- Plain statement list (no cards, no icons) ---- */
.plain { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); max-width: 480px; }
.plain li { padding: 17px 0; border-bottom: 1px solid var(--border); }
.plain h3 { margin: 0 0 5px; font: 800 16px/1.25 var(--font); letter-spacing: -0.02em; }
.plain p { margin: 0; font: 500 14px/1.55 var(--font); color: var(--ink-dim); text-wrap: pretty; }
.plain a, .step-body > a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px;
                            color: var(--signal); font: 700 13.5px/1.3 var(--font); text-decoration: none; }
.plain a:hover, .step-body > a:hover { text-decoration: underline; }
/* Links inside running prose stay inline. They get an underline instead of a
   hit box, so they are findable without breaking the paragraph. */
.step-body p a, .note p a { color: var(--signal); font-weight: 700; text-decoration: underline;
                            text-decoration-color: rgba(27,133,134,0.35); text-underline-offset: 2px; }
.step-body p a:hover, .note p a:hover { text-decoration-color: currentColor; }

/* ---- Filter reference: one card per slider ----
   The AEO payload of the filters guide. It was rendering as a default bulleted
   list for a while: the rules were dropped in a stylesheet rewrite while the
   markup kept using them, which no test catches, so `scripts/check-orphan-css.py`
   now fails the build on a class used in HTML with no rule anywhere. */
.filters { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 520px; }
.filters li { background: var(--surface); border-radius: 16px; padding: 17px 19px; box-shadow: var(--shadow-card); }
.filters h3 { margin: 0 0 6px; font: 800 16px/1.25 var(--font); letter-spacing: -0.02em; }
.filters p { margin: 0; font: 500 13.5px/1.55 var(--font); color: var(--ink-dim); text-wrap: pretty; }
/* The parent's own sentence, in their words, under our description of it. */
.filters .says { display: block; margin-top: 9px; font: 700 13px/1.4 var(--font); color: var(--signal); }

/* ---- Guide rows ----
   One list, one column, at every width. Five rows fit a phone screen, so the
   whole set is a glance instead of a scroll, and there is no 2-up grid to
   orphan a third card or leave two in a row at different heights. The row IS
   the link, which is why there is no repeated "Read the guide" line under it.

   The tile carries a DRAWN mark, not a screenshot. A 96px crop of a dense app
   screen is a grey smudge — the text in it is 4px tall — so it reads as stock
   art and makes the whole list look templated. A mark stays legible at any
   size, is unmistakably ours, and never needs recapturing when the app is
   redesigned. The screenshots still do their job inside the guides, at a size
   where you can actually read them. */
.guides { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.guide-card { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) 30px; align-items: stretch;
              background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-card); text-decoration: none; overflow: hidden;
              transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s; }
.guide-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); text-decoration: none; }
/* Touch has no hover, so the press itself has to answer. */
.guide-card:active { transform: scale(0.985); box-shadow: var(--shadow-card); }

/* The tile runs to the card's own edge rather than floating inside a padded
   box: matching the outer radius on its left corners is what stops the row
   reading as a picture pasted onto a template. */
.guide-tile { display: grid; place-items: center; background: linear-gradient(160deg, #E4F0EC 0%, #D5E7E2 100%);
              border-right: 1px solid rgba(27,133,134,0.10); }
.guide-tile svg { width: 46px; height: 46px; fill: none; stroke: var(--signal); stroke-width: 1.7;
                  stroke-linecap: round; stroke-linejoin: round; }
.guide-tile svg .solid { fill: var(--signal); stroke: none; }
.guide-tile svg .soft { stroke: var(--signal); opacity: 0.38; }

.guide-body { padding: 16px 0 16px 16px; align-self: center; }
.guide-card .eyebrow { margin-bottom: 5px; font-size: 9.5px; }
.guide-card h3 { margin: 0 0 4px; font: 800 17px/1.2 var(--font); letter-spacing: -0.026em; text-wrap: balance; }
.guide-card p { margin: 0; font: 500 13px/1.45 var(--font); color: var(--ink-dim); text-wrap: pretty;
                 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
                 min-height: calc(2 * 1.45em); }
/* Length up front: on a phone the first question is not "what is this" but
   "is this a thirty-second thing or a ten-minute thing". */
.guide-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 20px; }
.guide-meta { font: 700 11.5px/1 var(--font); color: var(--ink-muted); }
.chev-cell { display: grid; place-items: center; }
.guide-card .chev { width: 15px; height: 15px; fill: none; stroke: var(--ink-muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* The row worth entering first. The marker rides the meta line so it can never
   orphan onto a line of its own the way it did above the title. */
.guide-card.lead { box-shadow: 0 10px 28px rgba(34,40,46,0.08), 0 0 0 1.5px rgba(27,133,134,0.38); }
.guide-card.lead .guide-tile { background: linear-gradient(160deg, #D5EBE4 0%, #C2DED7 100%); }
.pill { padding: 3px 8px; border-radius: 999px; background: rgba(27,133,134,0.14);
        color: var(--clean-ink); font: 800 9.5px/1.4 var(--font); letter-spacing: .09em; text-transform: uppercase; }

/* Under ~700px the blurb goes. The eyebrow already names the value and the
   title names the task, which is enough to choose between five things; the
   sentence is what stops all five fitting one phone screen, and a list you
   have to scroll to compare is a list you compare badly. It returns the
   moment there is room for it. */
@media (max-width: 699px) {
  .guide-card p { display: none; }
  .guide-card { grid-template-columns: 96px minmax(0, 1fr) 28px; }
  /* One floor for every row, on the row rather than on the title: five rows of
     three different heights read as a grid of accidents, which was most of
     what made the old cards look cheap. The body is centred inside it, so a
     one-line title sits balanced instead of leaving a reserved gap under it.
     The number is the height of the LONGEST row (a two-line title), measured
     with the real webfont loaded — fallback metrics are narrower and will lie
     to you about which titles wrap. */
  .guide-card { min-height: 112px; }
  .guide-card h3 { font-size: 16.5px; margin-bottom: 0; }
  /* The marker and the step count cannot share a phone-width line, and the
     marker is the one that is redundant: the row is already first in the list,
     ringed, and the lede says the list is in order. */
  .pill { display: none; }
  .guide-tile svg { width: 42px; height: 42px; }
  .guide-body { padding: 15px 0 15px 15px; }
}

/* Next steps at the foot of a guide reuse the same row, so the component a
   reader learned on the index is the one they meet again at the end. */
.next { margin-top: 16px; }

/* Narrow phones (320-374px: an SE, and Android at 360). The row survives by
   giving the tile less and the words more; without this the titles run to
   three lines and the rows go ragged again. */
@media (max-width: 374px) {
  :root { --gutter: 16px; }
  .guide-card { grid-template-columns: 80px minmax(0, 1fr) 24px; }
  .guide-tile svg { width: 36px; height: 36px; }
  .guide-body { padding: 14px 0 14px 13px; }
  .guide-card { min-height: 108px; }
  .guide-card h3 { font-size: 15px; letter-spacing: -0.032em; }
  .guide-card .eyebrow { letter-spacing: .09em; }
}

/* ---- Aside: copy beside one frame, no step number ---- */
.aside-body h3 { margin: 0 0 8px; font: 800 18.5px/1.22 var(--font); letter-spacing: -0.024em; text-wrap: balance; }
.aside-body p { margin: 0 0 10px; font: 500 14.5px/1.55 var(--font); color: var(--ink-dim); text-wrap: pretty; max-width: 480px; }
.aside-body p:last-child { margin-bottom: 0; }
.aside-body b { color: var(--ink); font-weight: 700; }

/* ---- Closing CTA ---- */
.close { padding: 56px 0 0; }
.store-badge { display: flex; width: 100%; justify-content: center; align-items: center; gap: 11px; padding: 12px 22px 12px 18px;
               background: var(--ink); color: #fff; border-radius: 14px; box-shadow: 0 14px 30px rgba(34,40,46,0.18); text-decoration: none;
               transition: transform .16s cubic-bezier(.2,.8,.2,1); }
.store-badge:hover { text-decoration: none; }
.store-badge:active { transform: scale(0.985); }
.store-badge svg { width: 24px; height: 24px; fill: #fff; flex-shrink: 0; }
.store-badge-text { display: flex; flex-direction: column; gap: 3px; }
.store-badge-eyebrow { font: 600 10.5px/1 var(--font); letter-spacing: .02em; color: rgba(255,255,255,0.75); }
.store-badge-name { font: 800 19px/1 var(--font); letter-spacing: -0.01em; }
.proof { margin: 4px 0 0; font: 600 12px/1.4 var(--font); color: var(--ink-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.proof a { display: inline-flex; align-items: center; min-height: 44px; }
.proof .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-muted); }
.proof a { color: var(--ink-dim); text-decoration: underline; text-decoration-color: rgba(34,40,46,0.25); text-underline-offset: 3px; }
.proof a:hover { color: var(--signal); text-decoration-color: currentColor; }

/* ---- Footer ---- */
.foot { padding: 48px 0 40px; font: 500 12.5px/1.5 var(--font); color: var(--ink-muted); }
.foot strong { color: var(--ink); font-weight: 700; }
.foot-links { display: flex; gap: 18px; margin-top: 2px; flex-wrap: wrap; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-dim); font-weight: 600; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }

/* ---- Desktop ----
   The layout does not change kind, only room: the frame moves beside its step
   instead of under it, and the rows get a bigger crop. Same components either
   way, so nothing has to be re-learned between devices. */
@media (min-width: 860px) {
  .topbar-inner { padding: 18px 32px; max-width: 920px; }
  .page { max-width: 920px; padding: 0 32px; }
  .guide-hero { padding-top: 18px; }
  .guide-hero h1 { font-size: 52px; }
  .guide-hero .lede { font-size: 17.5px; }
  .h2 { font-size: 33px; }

  .step { grid-template-columns: 32px minmax(0, 1fr); column-gap: 18px; }
  .step-body { display: grid; grid-template-columns: minmax(0, 1fr) 252px; column-gap: 40px; align-items: start; }
  .step-body > h3 { grid-column: 1; }
  .step-body > p, .step-body > .note { grid-column: 1; }
  .step-body > .shot { grid-column: 2; grid-row: 1 / span 20; margin-top: 2px; }
  .step-body > .diagram { grid-column: 2; grid-row: 1 / span 20; margin-top: 2px; }
  /* A step with no frame keeps its copy in the reading column. */
  .step-body.no-shot { display: block; max-width: 54ch; }

  .aside { display: grid; grid-template-columns: minmax(0, 1fr) 252px; column-gap: 40px; align-items: start; }
  .aside > .shot { margin-top: 2px; }

  .page-narrow { max-width: 740px; }
  .guides, .next { max-width: 640px; }
  .page-narrow .guides { max-width: none; }
  .guide-card { grid-template-columns: 124px minmax(0, 1fr) 34px; }
  .guide-tile svg { width: 52px; height: 52px; }
  .guide-body { padding: 18px 0 18px 20px; }
  .guide-card h3 { font-size: 18px; }

  .close, .foot { max-width: 640px; }
  .store-badge { display: inline-flex; width: auto; }
  .proof { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-card, .store-badge { transition: none; }
  .guide-card:hover, .guide-card:active, .store-badge:active { transform: none; }
}

/* ---- The mascot ----
   He is a reaction, not a decoration, so he only turns up where the page is
   doing the thing he does: rendering a judgment. His three faces already carry
   fixed meanings in the product (happy = Clean, side-eye = Sus, x-eyes = Hard
   Pass), and spending them on generic ornament would cost the app that
   vocabulary. So there are exactly three placements, and no others:

     1. The payoff card, top of every page. He replaces a checkmark — the same
        job, done by a character instead of an icon.
     2. The closing card, bottom of every page. He leans over the edge like he
        is seeing you out. One per page, the last thing you look at.
     3. The verdict list on the screening guide, where all three faces appear
        because the list IS the three verdicts.

   Add a fourth placement only when the page has a fourth judgment to make. */
.payoff-face { width: 34px; height: 34px; flex-shrink: 0; margin: -3px 0 -3px -2px; }

/* He peeks over the top edge of the closing card. The card exists mostly so
   there is an edge to peek over: the CTA used to float on the gradient with
   nothing to sit against. */
.close { position: relative; margin-top: 56px; padding: 44px 20px 26px; background: var(--surface);
         border-radius: 22px; box-shadow: var(--shadow-card); }
.close .h2 { margin-bottom: 18px; }
.signoff { position: absolute; top: -26px; left: 22px; width: 52px; height: 52px;
           filter: drop-shadow(0 6px 12px rgba(34,40,46,0.16)); }

/* The three faces, against the three words they mean. */
.verdict-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 13px; align-items: start; }
.verdict-list .face { width: 40px; height: 40px; border-radius: 11px; padding: 4px; margin-top: 1px; }
.verdict-list .face.clean { background: rgba(111,191,164,0.20); }
.verdict-list .face.sus { background: rgba(242,205,136,0.30); }
.verdict-list .face.not { background: rgba(224,121,111,0.16); }
.verdict-list img { display: block; width: 100%; height: 100%; }

@media (min-width: 860px) {
  .close { padding: 46px 32px 30px; }
  .signoff { left: 34px; }
}

/* First block under the hero sits closer: the rows are the page. */
.block.first { padding-top: 26px; }