/* /thumbnail-tester, page layout ONLY.
   Ported from the approved reference build (public/_show-plan/bold/v3.html
   and its revision thumb-v4.html).

   Everything shared now comes from public/css/abstracts/foundation.css,
   which is in the global bundle: type, ink and paper surfaces, the light
   indigo accent, buttons, section rhythm, the sticky bar, the answer
   sheet, the two-sided panel, the comparison table, the questions block,
   the quiet link list and the closing band. This file holds ONLY the
   things that exist nowhere else on the site.

   Every class here is prefixed `tt-` so it cannot collide with any of the
   other 241 page stylesheets. Nothing in here restates a `.fnd-*` rule.

   NO FIXED HEIGHTS. min-height plus a stretching grid, always.
   Decisions and their reasons: .claude/plans/design-decisions-locked.md */

/* Every <img> in this page carries width and height attributes so the
   browser reserves the correct box before the file arrives, which is
   what keeps layout shift at zero. Those attributes are presentational
   hints for the USED height, and because none of the rules below set a
   height, the attribute beat `aspect-ratio` and every image rendered at
   its literal attribute height. With object-fit:cover that silently
   CROPPED them: the hero thumbnails lost the text off both sides and
   every mechanical check still passed, because a cropped image is a
   perfectly valid box. height:auto hands sizing back to aspect-ratio.
   Keep the attributes AND keep this rule. */
.fnd img { height: auto; }
/* The page background, on the body, because the foundation wrapper only
   covers the content between the shared header and footer. */
.tt-page { background: #FAF8F5; }

/* ==================================================================
   1  THE PLAYABLE PICK (hero)
   Two across at EVERY width. Stacking them on a phone gives the first
   option the whole screen first and quietly biases the vote, which is
   fatal on a page whose entire subject is a fair comparison.
   ================================================================== */
.tt-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 900px; margin: 0 auto; }
@media (min-width: 620px) { .tt-pick { gap: 22px; } }
.tt-opt { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; text-align: left; display: block; width: 100%; color: inherit; -webkit-tap-highlight-color: transparent; }
.tt-shot { display: block; position: relative; border-radius: var(--fnd-r-sm); overflow: hidden; background: #000; box-shadow: 0 14px 34px rgba(0,0,0,.5); transition: transform 180ms cubic-bezier(.22,1,.36,1); }
@media (min-width: 620px) { .tt-shot { border-radius: var(--fnd-r); } }
.tt-opt:hover .tt-shot { transform: translateY(-4px); }
.tt-opt:focus-visible .tt-shot { outline: 3px solid var(--fnd-accent); outline-offset: 3px; }
.tt-shot img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.tt-hint { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; margin-top: 6px; font-weight: 600; font-size: 14px; }
@media (min-width: 620px) { .tt-hint { font-size: 15px; gap: 8px; } }
.tt-hint i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); font-size: 12px; font-weight: 700; flex: 0 0 auto; }
/* The hint and the result swap in the SAME slot, so choosing does not
   shove the page down. An earlier version reserved both and left ~45px
   of dead air under every thumbnail before anyone had done anything. */
.tt-res { display: none; margin-top: 6px; opacity: 0; transform: translateY(6px); transition: opacity 320ms ease, transform 320ms cubic-bezier(.22,1,.36,1); }
.is-done .tt-res { display: block; opacity: 1; transform: none; }
.is-done .tt-hint { display: none; }
.is-done .tt-opt { cursor: default; }
.tt-bar { display: block; height: 7px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.tt-bar i { display: block; height: 100%; border-radius: 999px; background: rgba(255,255,255,.5); width: 0; transition: width 900ms cubic-bezier(.22,1,.36,1) 120ms; }
.tt-opt--win .tt-bar i { background: var(--fnd-accent); }
.tt-resrow { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 8px; min-height: 28px; flex-wrap: wrap; }
.tt-pct { font-family: var(--fnd-display-font); font-weight: 800; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
@media (min-width: 620px) { .tt-pct { font-size: 26px; } }
.tt-opt--win .tt-pct { color: var(--fnd-accent); }
.tt-reslab { font-size: 14px; color: var(--fnd-on-ink-soft); }
.tt-you { position: absolute; top: 7px; left: 7px; background: #fff; color: var(--fnd-ink); font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; opacity: 0; transform: scale(.85); transition: opacity 240ms ease, transform 240ms cubic-bezier(.22,1,.36,1); }
@media (min-width: 620px) { .tt-you { font-size: 13px; padding: 5px 11px; top: 10px; left: 10px; } }
.tt-opt--you .tt-you { opacity: 1; transform: none; }
/* The verdict does NOT reserve space: doing so left a large dead gap
   above the button before the visitor had played. */
.tt-verdict { text-align: center; margin: 0 auto; max-width: 46ch; font-size: 16.5px; line-height: 1.55; opacity: 0; transition: opacity 340ms ease 420ms; color: var(--fnd-on-ink-soft); }
.is-done .tt-verdict { margin-top: 24px; opacity: 1; }
.tt-verdict b { font-weight: 700; color: #fff; }
.tt-aftercta { text-align: center; margin: 26px 0 0; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.tt-scale { text-align: center; margin: 34px auto 0; font-size: var(--fnd-t-meta); color: var(--fnd-on-ink-faint); max-width: 52ch; }
.tt-scale b { color: rgba(255,255,255,.8); font-weight: 600; }

/* ==================================================================
   2  RESULT CARD
   ================================================================== */
.tt-duo { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 940px) { .tt-duo { grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } }
.tt-card { background: var(--fnd-card); border: 1px solid var(--fnd-rule); border-radius: var(--fnd-r); overflow: hidden; box-shadow: 0 2px 4px rgba(20,16,26,.03); }
.tt-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--fnd-rule); }
.tt-card-t { font-family: var(--fnd-display-font); font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.tt-card-t::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fnd-accent); }
.tt-card-m { font-size: 14px; color: var(--fnd-text-faint); }
/* States the verdict in words. It used to show 216 and 102 and leave the
   reader to do the subtraction. */
.tt-card-verdict { border-top: 1px solid var(--fnd-rule); padding: 15px 18px; font-size: var(--fnd-t-sm); color: var(--fnd-text-soft); line-height: 1.5; margin: 0; }
.tt-card-verdict b { color: var(--fnd-text); font-weight: 600; }
.tt-card-mail { display: flex; align-items: center; gap: 9px; background: var(--fnd-paper-2); padding: 12px 18px; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); margin: 0; }
.tt-card-mail::before { content: ""; flex: 0 0 auto; width: 17px; height: 11px; border: 1.5px solid var(--fnd-text-faint); border-radius: 2px; background: linear-gradient(135deg, transparent 44%, var(--fnd-text-faint) 45%, var(--fnd-text-faint) 53%, transparent 54%); }
.tt-card-body { padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tt-col span.tt-sh { position: relative; display: block; border-radius: var(--fnd-r-sm); overflow: hidden; line-height: 0; }
.tt-col img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
/* Reads as second, not as damaged. Was 45% opacity plus desaturation. */
.tt-col--lost img { opacity: .66; }
.tt-col .tt-tick { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; background: var(--fnd-accent) center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316141A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.tt-foot { display: flex; align-items: baseline; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.tt-num { font-family: var(--fnd-display-font); font-weight: 800; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; margin: 0; }
.tt-col--won .tt-num { color: var(--fnd-accent-deep); }
.tt-col--lost .tt-num { color: var(--fnd-text-faint); }
.tt-lab { font-size: 14px; color: var(--fnd-text-faint); margin: 0; }

/* ==================================================================
   3  PROOF WALL
   A stranger's real question is "does anybody actually use this", and a
   sentence cannot answer that. The answer is volume you can see. Tiles
   are deliberately small: at this size you read "hundreds of settled
   arguments", not the detail of any one image.
   ================================================================== */
.tt-proof { position: relative; overflow: hidden; background: var(--fnd-ink); color: var(--fnd-on-ink); }
.tt-wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 5px; padding: 5px; opacity: .62; pointer-events: none; align-content: start; }
.tt-wall span { position: relative; display: block; border-radius: 4px; overflow: hidden; line-height: 0; }
.tt-wall img { width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .85; }
.tt-veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 52% at 50% 46%, rgba(18,16,22,.95) 0%, rgba(18,16,22,.78) 52%, rgba(18,16,22,.18) 100%), linear-gradient(to bottom, var(--fnd-ink) 0%, rgba(18,16,22,0) 16%, rgba(18,16,22,0) 84%, var(--fnd-ink) 100%); }
.tt-proof-in { position: relative; padding-top: 82px; padding-bottom: 82px; text-align: center; }
@media (min-width: 768px) { .tt-proof-in { padding-top: 110px; padding-bottom: 110px; } }
.tt-proof-say { font-size: var(--fnd-t-lede); color: var(--fnd-on-ink-soft); max-width: 46ch; margin: 0 auto; line-height: 1.6; }
.tt-proof-say b { color: #fff; font-weight: 600; }
.tt-proof-key { display: inline-flex; align-items: center; gap: 9px; margin-top: var(--fnd-s5); font-size: var(--fnd-t-meta); color: var(--fnd-on-ink-faint); }

/* ==================================================================
   4  THE CROWD (inside the two-sided panel)
   The argument IS the asymmetry, so the picture has to carry it. On the
   left, nobody. On the right, one dot per creator. Six tidy dots against
   six tidy dots made the two sides look equivalent.
   NO fixed height: it was clipping the crowd at 228 of 318 while the
   label promised one dot per creator, which is a small lie told by a CSS
   value. Every dot shows, at every width.
   ================================================================== */
.tt-who { margin: 20px 0 22px; }
.tt-who-none { display: flex; align-items: center; justify-content: center; min-height: 112px; border: 1.5px dashed #D9D2C9; border-radius: 10px; font-size: 15px; color: var(--fnd-text-faint); padding: 14px; text-align: center; }
.tt-crowd { display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; }
.tt-crowd i { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); }
.tt-crowd i.tt-win { background: var(--fnd-accent); }
.tt-crowd-l { font-size: 14px; color: var(--fnd-on-ink-faint); margin: 10px 0 0; }
.tt-crowd-l b { color: var(--fnd-accent); font-weight: 600; }

/* ==================================================================
   5  TRUE SIZE
   ================================================================== */
.tt-ts { margin-top: var(--fnd-s6); background: var(--fnd-card); border: 1px solid var(--fnd-rule); border-radius: var(--fnd-r); padding: 24px var(--fnd-s4); }
@media (min-width: 768px) { .tt-ts { padding: var(--fnd-s6); } }
.tt-cmp { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s5); align-items: end; }
@media (min-width: 820px) { .tt-cmp { grid-template-columns: minmax(0,1fr) 210px; gap: var(--fnd-s7); } }
.tt-tslab { font-size: var(--fnd-t-meta); color: var(--fnd-text-faint); margin: 10px 0 0; line-height: 1.45; }
.tt-tslab b { display: block; font-family: var(--fnd-display-font); font-weight: 700; color: var(--fnd-text); font-size: var(--fnd-t-sm); margin-bottom: 2px; }
.tt-big img, .tt-small img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--fnd-r-sm); }
.tt-small { max-width: 210px; }
.tt-tstxt { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--fnd-rule); font-size: 16px; color: var(--fnd-text-soft); line-height: 1.65; max-width: 64ch; }
.tt-tstxt b { color: var(--fnd-text); font-weight: 600; }
.tt-strip { display: flex; gap: 8px; margin-top: 24px; overflow: hidden; border-radius: var(--fnd-r-sm); }
.tt-strip img { width: 150px; flex: 0 0 auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }
.tt-strip .tt-me { outline: 3px solid var(--fnd-accent); outline-offset: -3px; }

/* ==================================================================
   6  THE ONE WAY DOOR
   Two dot grids that differed only in colour were not an argument, they
   were the same picture painted twice. The honest point is not that
   testing gets you more clicks, which we have never measured and must
   never invent. It is that publishing is a one way door.
   ================================================================== */
.tt-door { margin-top: var(--fnd-s6); border: 1px solid var(--fnd-rule); border-radius: var(--fnd-r); overflow: hidden; background: var(--fnd-card); display: grid; grid-template-columns: 1fr; }
@media (min-width: 860px) { .tt-door { grid-template-columns: 1fr auto 1fr; } }
.tt-side { padding: var(--fnd-s5) 24px; }
.tt-side--after { background: var(--fnd-ink); color: #fff; }
.tt-when { font-family: var(--fnd-display-font); font-weight: 700; font-size: 17px; margin: 0 0 4px; }
.tt-dsub { font-size: var(--fnd-t-meta); color: var(--fnd-text-faint); margin: 0 0 var(--fnd-s4); }
.tt-side--after .tt-dsub { color: var(--fnd-on-ink-faint); }
.tt-dp { font-size: var(--fnd-t-sm); line-height: 1.6; color: var(--fnd-text-soft); margin: 16px 0 0; }
.tt-side--after .tt-dp { color: rgba(255,255,255,.76); }
.tt-dp b { color: var(--fnd-text); font-weight: 600; }
.tt-side--after .tt-dp b { color: #fff; }
.tt-swap { display: flex; align-items: center; gap: 10px; }
.tt-swap img { width: 100%; border-radius: 7px; aspect-ratio: 16/9; object-fit: cover; }
.tt-swap span { flex: 1 1 0; min-width: 0; display: block; line-height: 0; }
.tt-swap em { flex: 0 0 auto; font-style: normal; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--fnd-rule); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--fnd-text-faint); }
.tt-line { display: none; position: relative; background: var(--fnd-rule); width: 1px; }
@media (min-width: 860px) { .tt-line { display: block; } }
.tt-line span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(180deg); writing-mode: vertical-rl; background: var(--fnd-card); padding: 12px 3px; font-family: var(--fnd-display-font); font-weight: 700; font-size: var(--fnd-t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--fnd-text); white-space: nowrap; }
.tt-line-m { display: flex; align-items: center; gap: 12px; padding: 0 24px 4px; }
@media (min-width: 860px) { .tt-line-m { display: none; } }
.tt-line-m i { flex: 1 1 auto; height: 1px; background: var(--fnd-rule); }
.tt-line-m b { font-family: var(--fnd-display-font); font-size: var(--fnd-t-micro); letter-spacing: .06em; text-transform: uppercase; }
/* Every dot is identical and they fade left to right. An earlier version
   marked one in seven, which silently claimed a click rate we have never
   measured. A picture can fabricate a statistic as easily as a sentence. */
.tt-arrivals { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.tt-arrivals i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #fff; }

/* ==================================================================
   7  WHAT EACH KIND HANDS YOU
   Four definitions were four paragraphs to parse to learn one thing.
   Each now SHOWS its output at the same size: a result, a file readout,
   a score dial, a picture. You see the difference before you read.
   ================================================================== */
.tt-kinds { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s5); margin-top: 32px; }
@media (min-width: 620px)  { .tt-kinds { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (min-width: 1000px) { .tt-kinds { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.tt-kind { min-width: 0; }
.tt-kbox { min-height: 142px; border: 1px solid var(--fnd-rule); border-radius: var(--fnd-r-sm); background: var(--fnd-card); padding: 13px; display: flex; flex-direction: column; justify-content: center; margin-bottom: var(--fnd-s3); }
.tt-kind--ours .tt-kbox { border-color: var(--fnd-ink); box-shadow: 0 3px 0 0 var(--fnd-accent); }
.tt-kname { font-family: var(--fnd-display-font); font-weight: 700; font-size: 16.5px; margin: 0 0 10px; min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tt-kus { font-family: var(--fnd-body-font); font-size: 12.5px; font-weight: 600; color: var(--fnd-accent-deep); background: var(--fnd-accent-soft); border-radius: 999px; padding: 3px 9px; }
.tt-kgives { font-family: var(--fnd-display-font); font-weight: 800; font-size: 15px; color: var(--fnd-text-faint); margin: 0 0 6px; }
.tt-kind--ours .tt-kgives { color: var(--fnd-text); }
.tt-kd { font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); line-height: 1.55; margin: 0; }
.tt-kres { display: flex; gap: 6px; }
.tt-kres span { flex: 1 1 0; position: relative; line-height: 0; border-radius: 4px; overflow: hidden; }
.tt-kres img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.tt-kres .tt-lose img { opacity: .5; }
.tt-kres .tt-won::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--fnd-accent) center / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316141A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.tt-kresn { display: flex; justify-content: space-between; font-family: var(--fnd-display-font); font-weight: 800; font-size: 15px; margin-top: 9px; }
.tt-kresn b:first-child { color: var(--fnd-accent-deep); }
.tt-kresn b:last-child { color: var(--fnd-text-faint); font-weight: 700; }
.tt-kfile { font-size: 13.5px; color: var(--fnd-text-soft); }
.tt-kfile div { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--fnd-rule); }
.tt-kfile div:last-child { border-bottom: 0; }
.tt-kfile b { color: var(--fnd-text); font-weight: 600; }
.tt-kscore { text-align: center; }
.tt-kscore-n { font-family: var(--fnd-display-font); font-weight: 800; font-size: 44px; line-height: 1; color: var(--fnd-text-faint); letter-spacing: -.03em; }
.tt-kscore-n small { font-size: 18px; }
.tt-kscore-b { height: 6px; border-radius: 999px; background: var(--fnd-rule); margin: 12px 6px 8px; position: relative; overflow: hidden; }
.tt-kscore-b i { position: absolute; left: 0; top: 0; bottom: 0; width: 74%; background: #CFC7BC; border-radius: 999px; }
.tt-kscore-l { font-size: 12.5px; color: var(--fnd-text-faint); margin: 0; }
.tt-kpic { position: relative; line-height: 0; }
.tt-kpic img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--fnd-r-xs); }
.tt-kpic::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: var(--fnd-r-xs); background: rgba(22,20,26,.78) center / 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0 4-4m-4 4-4-4M4 19h16'/%3E%3C/svg%3E"); }

/* ==================================================================
   8  THE THREE MOMENTS
   Each shows what is actually on your screen at that moment, built from
   motifs this page already uses: the sign-in pill, the two thumbnails,
   the crowd of dots, the tick. Reusing the page's own vocabulary is what
   stops a section reading as though somebody else designed it.
   Three, not four: four narrow columns squeezed both the type and the
   pictures until the pictures were decoration.
   ================================================================== */
.tt-steps { list-style: none; margin: var(--fnd-s6) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--fnd-s6); }
@media (min-width: 880px) { .tt-steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.tt-step { min-width: 0; }
.tt-vis { min-height: 156px; border: 1px solid var(--fnd-rule); border-radius: var(--fnd-r-sm); background: var(--fnd-card); padding: 16px; display: flex; flex-direction: column; justify-content: center; margin-bottom: 18px; position: relative; }
.tt-vis--signin { align-items: center; text-align: center; }
.tt-note { display: block; font-size: var(--fnd-t-micro); color: var(--fnd-text-faint); margin: var(--fnd-s3) 0 0; line-height: 1.4; }
.tt-sh2 { display: block; font-family: var(--fnd-display-font); font-weight: 700; font-size: 17px; margin: 0 0 5px; line-height: 1.25; text-wrap: balance; }
.tt-sd { display: block; font-size: 15px; color: var(--fnd-text-soft); line-height: 1.6; margin: 0; }
.tt-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--fnd-rule); border-radius: 999px; padding: 12px 18px; background: var(--fnd-card); font-size: 15px; font-weight: 600; }
.tt-pill svg { width: 15px; height: 15px; flex: 0 0 auto; }
.tt-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tt-slots span { line-height: 0; border-radius: var(--fnd-r-xs); overflow: hidden; display: block; }
.tt-slots img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
/* The "+" is a real affordance, not decoration, so it uses the text
   token rather than a one-off grey that failed contrast. */
.tt-slots .tt-empty { aspect-ratio: 16/9; border: 1.5px dashed #D5CDC3; border-radius: var(--fnd-r-xs); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--fnd-text-faint); line-height: 1; }
.tt-ans2 { display: flex; gap: 8px; align-items: flex-start; }
.tt-ans2 span { flex: 1 1 0; position: relative; line-height: 0; border-radius: var(--fnd-r-xs); overflow: hidden; display: block; }
.tt-ans2 img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.tt-ans2 .tt-lose img { opacity: .5; }
.tt-ans2 .tt-won::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--fnd-accent) center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316141A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.tt-ans2n { display: flex; justify-content: space-between; font-family: var(--fnd-display-font); font-weight: 800; font-size: 16px; margin-top: 10px; }
.tt-ans2n b:first-child { color: var(--fnd-accent-deep); }
.tt-ans2n b:last-child { color: var(--fnd-text-faint); font-weight: 700; }

/* ==================================================================
   9  CLOSING BAND DEVICE
   Two empty slots above "your test, waiting": it shows the thing the
   visitor is about to do rather than describing it again.
   ================================================================== */
.tt-closeslots { display: flex; gap: var(--fnd-s3); justify-content: center; margin: 0 auto var(--fnd-s5); max-width: 470px; }
.tt-cs { flex: 1 1 0; aspect-ratio: 16/9; border: 2px dashed rgba(255,255,255,.28); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: rgba(255,255,255,.45); line-height: 1; }

/* ==================================================================
   PHONE REFINEMENTS
   The layout above is mobile-first (min-width breakpoints), so this
   block is not where the page becomes responsive. It is where the
   things that only matter on a small screen get tuned.

   The min-height values above exist to keep a ROW of cards even on
   desktop. Once the cards stack there is no row to even up, so the
   same values just add dead space above and below short content.
   ================================================================== */
@media (max-width: 767px) {
  /* Stacked, so nothing needs to match a neighbour's height. */
  .tt-kbox { min-height: 0; }
  .tt-vis  { min-height: 0; }

  /* Desktop padding is roughly a third too generous on a 375px screen. */
  .tt-card-body { padding: 14px; gap: 10px; }
  .tt-ts        { padding: 18px 16px; }
  .tt-side      { padding: 20px 18px; }

  /* At 150px only two and a bit tiles fit, which reads as a cut-off
     row rather than a feed. Narrower shows the row it is meant to. */
  .tt-strip img { width: 112px; }

  /* The wall tiles are decorative; at this width smaller means more of
     them, which is the whole point of the picture. */
  .tt-wall { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; }
}

/* ==================================================================
   ROW ALIGNMENT WITHOUT FIXED HEIGHTS
   The three how-to cards shared a card height but their VISUAL boxes did
   not (156 / 197 / 156), so the headings landed 41px apart and the row
   read as broken. Same fault at 15px across the four-kinds row, in the
   one section whose whole purpose is a verdict column you read straight
   down. Subgrid lines every row up across the columns and still lets each
   box size to its own content, which is why it beats a fixed height.
   ================================================================== */
@media (min-width: 880px) {
  .tt-steps { grid-template-rows: auto auto auto; }
  .tt-step  { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
}
@media (min-width: 1000px) {
  .tt-kinds { grid-template-rows: auto auto auto auto; }
  .tt-kind  { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
}

/* On a phone the "too big" and "real size" images came out 300px against
   205px, about 1.46x, so the reader saw two nearly identical pictures and
   the whole argument evaporated. Desktop is 3.3x. This restores it. */
@media (max-width: 767px) {
  .tt-small { max-width: 124px; }
}

/* The proof wall collapsed at 375: 170 tiles needed 34 implicit rows
   inside a 435px absolute box, so each row squeezed to 9px and showed a
   horizontal slice of its image while rows overlapped by 30px. On screen
   it read as grey smears under a caption pointing at thumbnails.
   max-content lets every row take its image's natural height and the
   section's own overflow:hidden clips the excess, which is exactly what
   desktop was already doing by accident. */
.tt-wall { grid-auto-rows: max-content; }

/* ==================================================================
   CLOSING BAND, stronger device
   The two slots were 470px wide and thin, and the whole band read as
   spare rather than deliberate. They now match the SHAPE AND SCALE of
   the hero's two-up pick, so the closer visually rhymes with the way
   the page opened. That is the page's own vocabulary, which is the
   thing that stops a section looking like somebody else designed it.
   Still one heading, one line, one button: the band did not gain a
   second idea, only a clearer picture of the one it had.
   ================================================================== */
.tt-closeslots { max-width: 660px; gap: 18px; margin-bottom: 30px; }
.tt-cs {
  border: 2px dashed rgba(255,255,255,.30);
  border-radius: var(--fnd-r);
  font-size: 0;                      /* the "+" is drawn, not typed */
  position: relative;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(143,135,255,.10) 0%, transparent 62%),
    rgba(255,255,255,.02);
  transition: border-color 200ms ease, background 200ms ease;
}
/* Drawn plus, so it is optically centred and scales cleanly. */
.tt-cs::before,
.tt-cs::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: rgba(255,255,255,.42); border-radius: 2px;
}
.tt-cs::before { width: 26px; height: 2px;  transform: translate(-50%, -50%); }
.tt-cs::after  { width: 2px;  height: 26px; transform: translate(-50%, -50%); }
.fnd-closer:hover .tt-cs { border-color: rgba(143,135,255,.5); }

/* The label sits closer to the slots it describes than to the heading, so
   the two read as one object rather than three stacked lines. */
.fnd-closer .fnd-closer-tag { margin-top: -14px; }

@media (max-width: 767px) {
  .tt-closeslots { max-width: 100%; gap: 12px; margin-bottom: 24px; }
  .tt-cs::before { width: 20px; }
  .tt-cs::after  { height: 20px; }
}