/* Finding visuals. Each one draws what its note's source says, nothing more.
   They play when their plate gets .is-played (on screen); reduced motion shows the final state. */

/* ---------- ideas: three tested ideas, one won (Kohavi et al.) ---------- */
.ideas { display: grid; gap: 10px; width: 100%; }
.ideas__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.idea__axis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 2px; margin-top: -2px; color: var(--ink-2); font: 700 14px/1 var(--sans); text-align: center; }
.ideas__legend { color: var(--ink-2); font-size: 14px; line-height: 1.35; }
.ideas__legend b { color: var(--ink); }
.idea {
  position: relative; display: grid; grid-template-rows: 1fr auto auto; gap: 5px; height: 112px; padding: 10px 10px 8px;
  border-radius: 12px; background: #1d1711; box-shadow: inset 0 0 0 1px rgba(246, 220, 170, .08), inset 0 1px 0 rgba(255, 240, 210, .06);
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
.idea__chart { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: end; padding: 0 2px; border-bottom: 1px solid #8f7a5c; }
.idea__bar { position: relative; display: block; border-radius: 4px 4px 0 0; transform-origin: bottom; transition: transform .9s var(--ease); background: linear-gradient(180deg, #8f7756 0%, #7d6849 100%); box-shadow: inset 0 1px 0 rgba(255, 236, 200, .28); }
.idea__bar--a { height: 22px; }
.idea--flat .idea__bar--b { height: 22px; }
.idea--worse .idea__bar--b { height: 11px; }
.idea--won .idea__bar--a { background: linear-gradient(180deg, #a68a63 0%, #8f7756 100%); }
.idea--won .idea__bar--b { height: 52px; background: linear-gradient(180deg, #fff4dc 0%, #f8dfae 28%, #ecc98f 62%, #d6ad74 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 250, .95), inset 0 0 0 1px rgba(255, 244, 220, .35), 0 0 18px 1px rgba(246, 220, 170, .42), 0 0 46px 6px rgba(226, 181, 108, .2); }
.idea--won .idea__bar--b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); background-size: 260% 100%; background-position: 120% 0; opacity: 0; }
.js .is-played .idea--won .idea__bar--b::after { animation: barShine 1.4s var(--ease) 1.9s both; }
@keyframes barShine { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -60% 0; } }
.idea__seal { position: absolute; left: 50%; top: -12px; display: grid; place-items: center; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #1a130b; box-shadow: 0 0 0 1.5px var(--gold-hi); color: var(--gold-hi); }
.idea__seal .icon { width: 13px; height: 13px; stroke-width: 3; }
.idea__tag { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.idea__tag .icon { width: 14px; height: 14px; stroke-width: 2.25; }
.idea--worse .idea__tag { color: var(--warn); }
.idea--won .idea__tag { color: var(--gold-hi); }
.idea--won { background: linear-gradient(180deg, #4a3923 0%, #2d2217 100%); box-shadow: inset 0 0 0 1.5px var(--gold-hi), inset 0 1px 0 rgba(255, 240, 210, .4), 0 18px 40px -14px rgba(226, 181, 108, .45), 0 24px 36px -16px rgba(0, 0, 0, .95); }
.js .idea__bar--b { transform: scaleY(.08); }
.js .idea__seal { opacity: 0; transform: scale(.4); transition: opacity .4s var(--ease) 1.7s, transform .6s var(--ease) 1.7s; }
.js .is-played .idea__seal { opacity: 1; transform: none; }
.js .idea__tag { opacity: 0; transition: opacity .5s var(--ease); }
.js .is-played .idea__bar--b { transform: none; }
.js .is-played .idea__tag { opacity: 1; }
.js .is-played .idea--flat .idea__bar--b, .js .is-played .idea--flat .idea__tag { transition-delay: .2s; }
.js .is-played .idea--worse .idea__bar--b, .js .is-played .idea--worse .idea__tag { transition-delay: .55s; }
.js .is-played .idea--won .idea__bar--b, .js .is-played .idea--won .idea__tag { transition-delay: .9s; }
.js .idea--won { transform: none; box-shadow: inset 0 0 0 1px rgba(246, 220, 170, .08); background: #1d1711; transition: transform .8s var(--ease) 1.4s, box-shadow .8s var(--ease) 1.4s; }
.js .is-played .idea--won { transform: translateY(-6px); background: linear-gradient(180deg, #4a3923 0%, #2d2217 100%); box-shadow: inset 0 0 0 1.5px var(--gold-hi), inset 0 1px 0 rgba(255, 240, 210, .4), 0 18px 40px -14px rgba(226, 181, 108, .45), 0 24px 36px -16px rgba(0, 0, 0, .95); }

/* ---------- meter: the 4.5:1 line (WCAG 2.2, our own two greys) ---------- */
.meter { display: grid; gap: 6px; width: 100%; }
.meter__scale { position: relative; display: block; height: 12px; border-radius: 6px; background: #2e241a; box-shadow: inset 0 0 0 1px rgba(246, 220, 170, .08); }
.meter__zone { position: absolute; top: 0; bottom: 0; left: 58.3%; right: 0; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, rgba(220, 187, 138, .38), rgba(220, 187, 138, .16)); transform-origin: left; transition: transform 1s var(--ease) .2s; }
.meter__line { position: absolute; left: 58.3%; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--gold-hi); }
.meter__mark { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #15100c; transition: left 1.1s var(--ease) .3s; }
.meter__labels { position: relative; display: block; height: 18px; margin-top: 4px; }
.meter__lab { position: absolute; bottom: 0; font: 700 14px/1 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; transition: opacity .6s .6s; }
.meter__lab--before { right: calc(100% - 47.8% + 8px); color: var(--warn); }
.meter__lab--after { left: calc(59.3% + 8px); color: var(--gold-hi); }
.js .plate:not(.is-played) .meter__lab, .js .panel:not(.is-played) .meter__lab { opacity: 0; }
.meter__mark--before { left: 47.8%; background: var(--warn); }
.meter__mark--after { left: 59.3%; background: var(--gold-hi); }
.meter__ticks { position: relative; display: flex; justify-content: space-between; color: var(--ink-2); font: 600 14px/1 var(--sans); }
.meter__aa { position: absolute; left: 58.3%; transform: translateX(-50%); color: var(--gold-hi); font-weight: 700; }
.meter__pair { display: none; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.swatch { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: #262019; }
.swatch__btn { display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; border-radius: 8px; border: 2px solid currentColor; font: 700 19px/1 var(--sans); white-space: nowrap; }
.swatch--before .swatch__btn { color: #8a7a63; }
.swatch--after .swatch__btn { color: #97866c; }
.swatch__verdict { display: none; align-items: center; gap: 5px; color: var(--ink); font: 600 14px/1 var(--sans); }
.swatch__verdict .icon { width: 16px; height: 16px; }
.swatch--before .swatch__verdict .icon { color: var(--warn); }
.swatch--after .swatch__verdict .icon { color: var(--gold-hi); }
.js .plate:not(.is-played) .meter__mark, .js .panel:not(.is-played) .meter__mark { left: 2%; }
.js .plate:not(.is-played) .meter__zone, .js .panel:not(.is-played) .meter__zone { transform: scaleX(0); }

/* ---------- answer: an AI answer that cites a store (Google Search Central) ---------- */
.answer { display: grid; gap: 6px; width: 100%; }
.answer__q { justify-self: end; max-width: 100%; padding: 6px 12px; border-radius: 14px 14px 4px 14px; background: #3a2e22; color: var(--ink); font-size: 14px; line-height: 1.3; }
.answer__a { display: grid; gap: 8px; padding: 7px 9px; border-radius: 14px 14px 14px 4px; background: rgba(14, 11, 8, .55); box-shadow: inset 0 0 0 1px rgba(246, 220, 170, .1); }
.answer__who { display: none; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.answer__who .icon { width: 18px; height: 18px; color: var(--gold-hi); }
.answer__text { color: var(--ink); font-size: 14px; line-height: 1.4; }
.answer__caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--gold-hi); opacity: 0; }
.answer__cite {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 5px 10px;
  border-radius: 10px; background: #f4ecdf; color: #1f1a14;
  box-shadow: 0 0 0 2px var(--gold-hi), 0 16px 30px -14px rgba(226, 181, 108, .35);
}
.answer__fav { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #1f1a14; color: #f4ecdf; font: 700 15px/1 var(--sans); }
.answer__site { display: grid; font-size: 14px; line-height: 1.25; color: #4f463c; }
.answer__site b { color: #1f1a14; font-size: 15px; }
.answer__cite .icon { width: 18px; height: 18px; color: #1f1a14; }
@keyframes citeGlow { 0%, 100% { box-shadow: 0 0 0 2px var(--gold-hi), 0 16px 30px -14px rgba(226, 181, 108, .35); transform: none; } 45% { box-shadow: 0 0 0 2px #f6dcaa, 0 0 0 9px rgba(246, 220, 170, .14), 0 22px 36px -12px rgba(226, 181, 108, .55); transform: translateY(-3px); } }
@keyframes caretBlink { 0%, 100% { opacity: 0; } 20%, 60% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .is-played .answer__cite { animation: citeGlow 1.8s var(--ease) .5s both; }
  .is-played .answer__caret { animation: caretBlink 1s steps(1) 3 both; }
}

/* ---------- hundred: 100 ideas at Bing, 10 to 20 lit (Kohavi et al., KDD 2014) ---------- */
.hund { display: grid; gap: 12px; width: 100%; }
.hund__grid { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 5px; }
.hund__dot { display: block; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #a68d6b; transition: background-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 45ms + .2s); }
.hund__dot--won { background: radial-gradient(circle at 35% 30%, #fbe7bf, #dcbb8a 60%, #c29b67); box-shadow: 0 0 10px rgba(226, 181, 108, .45); }
.hund__dot--maybe { box-shadow: inset 0 0 0 2px #dcbb8a; background: linear-gradient(90deg, #dcbb8a 50%, transparent 50%); }
.hund__key { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); font-size: 14px; line-height: 1.3; }
.hund__key > span { display: inline-flex; align-items: center; gap: 7px; }
.hund__key .hund__dot { width: 12px; height: 12px; transition: none; }
.js .plate:not(.is-played) .hund__grid .hund__dot--won, .js .plate:not(.is-played) .hund__grid .hund__dot--maybe { background: transparent; box-shadow: inset 0 0 0 1.5px #a68d6b; transform: scale(.7); }

/* ---------- hbars: labelled horizontal bars (Baymard; GEO benchmark) ---------- */
.hbars { display: grid; gap: 12px; width: 100%; }
.hbar { display: grid; gap: 6px; }
.hbar__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; line-height: 1.25; color: var(--ink); }
.hbar__val { flex: none; font: 700 15px/1 var(--sans); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.hbar__val--low { color: var(--warn); }
.hbar__track { position: relative; display: block; height: 10px; border-radius: 5px; background: #2e241a; }
.hbar__fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, #c9a26d, #f0d5a4); transform-origin: left; transition: transform 1.1s var(--ease); }
.hbar__fill--soft { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gold-hi); }
.hbar__short { display: none; }
.hbar__fill--low { background: var(--warn); }
.hbar:nth-child(2) .hbar__fill { transition-delay: .18s; }
.hbar:nth-child(3) .hbar__fill { transition-delay: .36s; }
.hbar__base { position: absolute; top: -4px; bottom: -4px; width: 2px; left: var(--b); background: var(--ink-2); }
.js .plate:not(.is-played) .hbar__fill { transform: scaleX(0); }

/* ---------- dots: where the decoy effect showed up (Frederick, Lee and Baskin) ---------- */
.dots { display: grid; gap: 14px; width: 100%; }
.dots__group { display: grid; gap: 8px; }
.dots__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; line-height: 1.25; color: var(--ink); }
.dots__count { flex: none; font: 700 15px/1 var(--sans); color: var(--gold-hi); }
.dots__row { display: flex; flex-wrap: wrap; gap: 6px; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #8f7a5c; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.dot--hit { border-color: var(--gold-hi); background: var(--gold-hi); }
.dot--rev { border-color: var(--warn); background: var(--warn); }
.dots__key { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2); font-size: 14px; }
.dots__key span { display: inline-flex; align-items: center; gap: 6px; }
.dots__key .dot { width: 10px; height: 10px; }
.js .plate:not(.is-played) .dots__row .dot { opacity: 0; transform: scale(.3); }
.dots__row .dot:nth-child(n+6) { transition-delay: .25s; }
.dots__row .dot:nth-child(n+14) { transition-delay: .4s; }
.dots__row .dot:nth-child(n+22) { transition-delay: .55s; }

/* ---------- claim: the struck claim, then what the source says (signature grammar) ---------- */
.claim { display: grid; gap: 10px; width: 100%; }
.claim__said { justify-self: start; font: 400 21px/1.3 var(--serif); color: var(--ink-2); }
.claim__s {
  text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--warn), var(--warn)) no-repeat 0 58% / 100% 1.5px;
  transition: background-size .9s var(--ease) .3s;
}
.js .plate:not(.is-played) .claim__s, .js .claims__item:not(.is-in) .claim__s { background-size: 0% 1.5px; }
.claim__bridge { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-hi); font-size: 14px; font-weight: 700; }
.claim__bridge .icon { width: 16px; height: 16px; }
.claim__found { font: 400 17px/1.4 var(--serif); color: var(--ink); text-wrap: pretty; transition: opacity .7s var(--ease) .9s, transform .7s var(--ease) .9s; }
.js .plate:not(.is-played) .claim__found { opacity: 0; transform: translateY(8px); }

/* ---------- peek: an A/A test watched daily (Johari, Pekelis and Walsh) ---------- */
.peek { position: relative; display: grid; gap: 6px; width: 100%; }
.peek__svg { width: 100%; height: 110px; overflow: visible; }
.peek__svg * { vector-effect: non-scaling-stroke; }
.peek__grid { stroke: #4a3c2c; stroke-width: 1; }
.peek__line95 { stroke: var(--gold-hi); stroke-width: 1.5; stroke-dasharray: 5 5; }
.peek__path { fill: none; stroke: var(--ink-2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease); }
.peek__stop { fill: var(--warn); stroke: #15100c; stroke-width: 2; transition: opacity .4s var(--ease) 1.6s, transform .5s var(--ease) 1.6s; transform-box: fill-box; transform-origin: center; }
.js .plate:not(.is-played) .peek__path { stroke-dashoffset: 600; }
.js .plate:not(.is-played) .peek__stop { opacity: 0; transform: scale(.2); }
.peek__labels { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); font-size: 14px; line-height: 1.3; }
.peek__labels b { color: var(--gold-hi); }
.peek__labels .peek__warn { color: var(--warn); font-weight: 700; }

/* ---------- target: tap target sizes drawn to scale (WCAG 2.5.8 and 2.5.5) ---------- */
.target { display: flex; align-items: flex-end; justify-content: space-around; gap: 16px; width: 100%; padding-top: 8px; }
.target__item { display: grid; justify-items: center; gap: 8px; }
.target__box { display: grid; place-items: center; border-radius: 8px; border: 2px solid var(--gold-hi); background: rgba(220, 187, 138, .14); transition: transform .8s var(--ease); }
.target__box--24 { width: 48px; height: 48px; }
.target__box--44 { width: 88px; height: 88px; }
.target__box .icon { width: 18px; height: 18px; color: var(--gold-hi); }
.target__item:nth-child(2) .target__box { transition-delay: .25s; }
.target__ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1.5px dashed var(--ink-2); transition: transform .8s var(--ease) .5s; }
.target__ring span { width: 24px; height: 24px; border-radius: 5px; background: var(--gold-hi); }
.target__lab { display: grid; justify-items: center; gap: 2px; color: var(--ink); font-size: 14px; line-height: 1.2; text-align: center; }
.target__lab b { color: var(--gold-hi); font-size: 15px; }
.js .plate:not(.is-played) .target__box, .js .plate:not(.is-played) .target__ring { transform: scale(.5); }

/* ---------- measure: line length ceiling and line height (WCAG 1.4.8) ---------- */
.measure { display: grid; gap: 10px; width: 100%; }
.measure__ruler { position: relative; height: 26px; border-bottom: 1.5px solid var(--ink-2); }
.measure__ruler::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--ink-2) 0 1px, transparent 1px 10%); }
.measure__cap { position: absolute; right: 0; bottom: 10px; color: var(--gold-hi); font: 700 14px/1 var(--sans); }
.measure__lines { display: grid; position: relative; }
.measure__line { display: block; height: 9px; border-radius: 5px; background: rgba(211, 198, 177, .45); transform-origin: left; transition: transform 1s var(--ease); }
.measure__line + .measure__line { margin-top: 6px; }
.measure__line:nth-child(2) { width: 94%; transition-delay: .12s; }
.measure__line:nth-child(3) { width: 98%; transition-delay: .24s; }
.measure__line:nth-child(4) { width: 62%; transition-delay: .36s; }
.is-played .measure__line:nth-child(2) { transform: translateY(9px); }
.is-played .measure__line:nth-child(3) { transform: translateY(18px); }
.is-played .measure__line:nth-child(4) { transform: translateY(27px); }
.measure__lines { padding-bottom: 27px; }
.measure__lh { display: flex; justify-content: space-between; color: var(--ink-2); font-size: 14px; }
.measure__lh b { color: var(--gold-hi); }
.js .plate:not(.is-played) .measure__line { transform: scaleX(.1); }

/* ---------- spacing: a fixed box clips, a growing box holds (WCAG 1.4.12) ---------- */
.spacing { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.spacing__case { display: grid; justify-items: center; gap: 10px; padding: 14px 8px 10px; border-radius: 12px; background: #1d1711; }
.spacing__btn { display: grid; place-items: center; width: 100%; max-width: 150px; padding: 0 8px; border-radius: 8px; background: linear-gradient(180deg, var(--gold-btn-a), var(--gold-btn-b)); color: var(--on-gold); font: 700 15px/1.2 var(--sans); text-align: center; letter-spacing: 0; transition: letter-spacing 1.2s var(--ease) .3s, word-spacing 1.2s var(--ease) .3s, line-height 1.2s var(--ease) .3s; }
.spacing__btn--fixed { height: 40px; overflow: hidden; }
.spacing__btn--grow { min-height: 40px; padding-block: 8px; }
.is-played .spacing__btn { letter-spacing: .12em; word-spacing: .16em; line-height: 1.5; }
.spacing__verdict { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; font-weight: 600; }
.spacing__verdict .icon { width: 16px; height: 16px; }
.spacing__verdict--bad .icon { color: var(--warn); }
.spacing__verdict--good .icon { color: var(--gold-hi); }
.spacing__name { color: var(--ink-2); font-size: 14px; }

/* ---------- suggest: two phrasings typed into autocomplete (our check) ---------- */
.suggest { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; align-items: start; }
.suggest__box { display: grid; border-radius: 12px; overflow: hidden; background: #f4ecdf; color: #1f1a14; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .9); }
.suggest__q { display: flex; align-items: center; gap: 8px; padding: 9px 10px; font-size: 14px; font-weight: 600; line-height: 1.25; border-bottom: 1px solid #8b8278; }
.suggest__q .icon { width: 15px; height: 15px; color: #4f463c; }
.suggest__list { display: grid; gap: 7px; padding: 9px 10px 11px; }
.suggest__hit { font-size: 14px; line-height: 1.3; color: #1f1a14; }
.suggest__bar { display: block; height: 7px; border-radius: 4px; background: #c9bfae; transform-origin: left; transition: transform .7s var(--ease); }
.suggest__bar:nth-child(3) { width: 82%; transition-delay: .1s; }
.suggest__bar:nth-child(4) { width: 70%; transition-delay: .2s; }
.suggest__bar:nth-child(5) { width: 88%; transition-delay: .3s; }
.suggest__none { color: #5b5249; font-size: 14px; font-style: italic; }
.suggest__hit, .suggest__none { transition: opacity .6s var(--ease) .2s; }
.js .plate:not(.is-played) .suggest__bar { transform: scaleX(0); }
.js .plate:not(.is-played) .suggest__hit, .js .plate:not(.is-played) .suggest__none { opacity: 0; }

/* ---------- canon: two addresses, one canonical (Google; Shopify) ---------- */
.canon { display: grid; gap: 8px; width: 100%; }
.canon__url { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #1d1711; color: var(--ink-2); font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.canon__url .icon { width: 16px; height: 16px; color: var(--ink-2); }
.canon__url b { color: var(--ink); font-weight: 600; }
.canon__url--main { background: #2d2217; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--gold-hi); transition: box-shadow .6s var(--ease) 1s; }
.canon__url--main .icon { color: var(--gold-hi); }
.canon__url--main b { color: var(--gold-hi); }
.canon__arrow { display: flex; align-items: center; gap: 8px; padding-left: 20px; color: var(--gold-hi); font-size: 14px; font-weight: 700; }
.canon__arrow .icon { width: 18px; height: 18px; transition: transform .8s var(--ease) .4s; }
.canon__shaft { display: block; width: 2px; height: 22px; background: var(--gold-hi); transform-origin: top; transition: transform .7s var(--ease) .2s; }
.js .plate:not(.is-played) .canon__shaft { transform: scaleY(0); }
.js .plate:not(.is-played) .canon__arrow .icon { transform: translateY(-8px); }
.js .plate:not(.is-played) .canon__url--main { box-shadow: inset 0 0 0 1px rgba(246, 220, 170, .08); }

/* ---------- store: an App Store result and its text fields (Apple Developer) ---------- */
.store { display: grid; gap: 10px; width: 100%; padding: 12px; border-radius: 14px; background: #f4ecdf; color: #1f1a14; box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .95); }
.store__head { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center; }
.store__icon { width: 46px; height: 46px; border-radius: 11px; background: linear-gradient(150deg, #e4c592, #8a6a3e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.store__fields { display: grid; gap: 5px; }
.store__field { display: grid; grid-template-columns: 74px minmax(0, 1fr) 30px; align-items: center; gap: 8px; font-size: 14px; line-height: 1.2; color: #4f463c; }
.store__field b { color: #1f1a14; font-weight: 700; }
.store__track { position: relative; display: block; height: 7px; border-radius: 4px; background: #d9cfbf; overflow: hidden; }
.store__fill { position: absolute; inset: 0; border-radius: 4px; background: #5c4320; transform-origin: left; transition: transform 1s var(--ease); }
.store__field:nth-child(2) .store__fill { transition-delay: .15s; }
.store__field:nth-child(3) .store__fill { transition-delay: .3s; }
.store__num { text-align: right; font-weight: 700; color: #1f1a14; font-variant-numeric: tabular-nums; }
.store__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.store__shot { aspect-ratio: 9 / 16; max-height: 86px; border-radius: 7px; background: linear-gradient(180deg, #e7dccb, #cfc2ad); box-shadow: inset 0 0 0 1px #b9ab94; transition: box-shadow .6s var(--ease), transform .6s var(--ease); }
.store--shots .store__shot { box-shadow: inset 0 0 0 2px #5c4320; }
.store--shots.is-played .store__shot, .is-played .store--shots .store__shot { transform: translateY(-3px); }
.store__shot:nth-child(2) { transition-delay: .15s; }
.store__shot:nth-child(3) { transition-delay: .3s; }
.store__note { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #3d342a; }
.store__note .icon { width: 15px; height: 15px; color: #5c4320; }
.js .plate:not(.is-played) .store__fill { transform: scaleX(0); }

/* ---------- swatchband: colour terms people rate (Jonauskaite et al., 30 nations) ---------- */
.band { display: grid; gap: 10px; width: 100%; }
.band__row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; }
.band__chip { height: 46px; border-radius: 7px; background: var(--c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); transform-origin: bottom; transition: transform .7s var(--ease); }
.band__chip:nth-child(n+4) { transition-delay: .1s; }
.band__chip:nth-child(n+7) { transition-delay: .2s; }
.band__chip:nth-child(n+10) { transition-delay: .3s; }
.band__stat { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); font-size: 14px; line-height: 1.3; }
.band__stat b { color: var(--gold-hi); }
.js .plate:not(.is-played) .band__chip { transform: scaleY(.15); }

@media (min-width: 640px) {
  .idea { height: 168px; }
  .answer__text { font-size: 15px; }
  .answer__who { display: inline-flex; }
  .meter__pair { display: grid; }
  .swatch__verdict { display: inline-flex; }
  .claim__said { font-size: 26px; }
  .claim__found { font-size: 19px; }
  .hbar__top { font-size: 15px; }
  .band__chip { height: 64px; }
  .store__shot { max-height: 110px; }
}
@media (min-width: 1024px) {
  .ideas__row { gap: 16px; }
  .idea__axis { gap: 10px; padding: 0 6px; font-size: 14px; }
  .ideas__legend { font-size: 15px; }
  .idea { height: 200px; padding: 18px 16px 12px; gap: 8px; }
  .idea__chart { gap: 10px; padding: 0 6px; }
  .idea__bar--a, .idea--flat .idea__bar--b { height: 52px; }
  .idea--worse .idea__bar--b { height: 28px; }
  .idea--won .idea__bar--b { height: 104px; }
  .idea__seal { top: -15px; width: 28px; height: 28px; margin-left: -14px; }
  .idea__seal .icon { width: 16px; height: 16px; }
  .idea__tag { font-size: 15px; }
  .idea__tag .icon { width: 16px; height: 16px; }
  .js .is-played .idea--won { transform: translateY(-12px); }
  .meter { gap: 8px; }
  .meter__scale { height: 16px; border-radius: 8px; }
  .meter__labels { height: 20px; margin-top: 8px; }
  .meter__mark { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
  .meter__lab, .meter__aa { font-size: 15px; }
  .meter__ticks { font-size: 14px; }
  .meter__pair { gap: 14px; margin-top: 4px; }
  .swatch { padding: 10px; border-radius: 12px; }
  .swatch__btn { min-height: 44px; padding: 0 14px; font-size: 21px; }
  .swatch__verdict { font-size: 16px; }
  .answer { gap: 10px; }
  .answer__q { font-size: 16px; padding: 10px 14px; }
  .answer__a { padding: 12px 14px; gap: 9px; }
  .answer__cite { padding: 7px 10px; grid-template-columns: 30px minmax(0, 1fr) 18px; }
  .answer__fav { width: 30px; height: 30px; }
  .answer__site { font-size: 14px; }
  .answer__site b { font-size: 16px; }
  .dot { width: 16px; height: 16px; }
  .hund__grid { gap: 7px; }
  .hund__key { font-size: 14px; }
  .spacing__btn { font-size: 16px; }
  .suggest__q { font-size: 15px; }
  .suggest__hit { font-size: 14px; }
  .canon__url { font-size: 15px; padding: 11px 14px; }
  .peek__svg { height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .is-played .idea--won .idea__bar--b::after { animation: none; }
  .js .idea__bar--b, .js .plate:not(.is-played) .meter__zone, .js .panel:not(.is-played) .meter__zone,
  .js .plate:not(.is-played) .hbar__fill, .js .plate:not(.is-played) .measure__line, .js .plate:not(.is-played) .suggest__bar,
  .js .plate:not(.is-played) .canon__shaft, .js .plate:not(.is-played) .band__chip, .js .plate:not(.is-played) .store__fill,
  .js .plate:not(.is-played) .target__box, .js .plate:not(.is-played) .target__ring, .js .plate:not(.is-played) .dots__row .dot { transform: none; opacity: 1; }
  .js .plate:not(.is-played) .hund__grid .hund__dot { transform: none; }
  .js .plate:not(.is-played) .hund__grid .hund__dot--won { background: radial-gradient(circle at 35% 30%, #fbe7bf, #dcbb8a 60%, #c29b67); box-shadow: 0 0 10px rgba(226, 181, 108, .45); }
  .js .plate:not(.is-played) .hund__grid .hund__dot--maybe { box-shadow: inset 0 0 0 2px #dcbb8a; background: linear-gradient(90deg, #dcbb8a 50%, transparent 50%); }
  .js .idea__tag, .js .idea__seal, .js .plate:not(.is-played) .claim__found, .js .plate:not(.is-played) .suggest__hit,
  .js .plate:not(.is-played) .suggest__none, .js .plate:not(.is-played) .meter__lab, .js .panel:not(.is-played) .meter__lab, .js .plate:not(.is-played) .peek__stop { opacity: 1; transform: none; }
  .js .plate:not(.is-played) .claim__s, .js .claims__item:not(.is-in) .claim__s { background-size: 100% 1.5px; }
  .js .plate:not(.is-played) .peek__path { stroke-dashoffset: 0; }
  .js .plate:not(.is-played) .meter__mark--before, .js .panel:not(.is-played) .meter__mark--before { left: 47.8%; }
  .js .plate:not(.is-played) .meter__mark--after, .js .panel:not(.is-played) .meter__mark--after { left: 59.3%; }
  .js .idea--won { transform: translateY(-8px); background: linear-gradient(180deg, #4a3923 0%, #2d2217 100%); box-shadow: inset 0 0 0 1.5px var(--gold-hi), 0 24px 36px -16px rgba(0, 0, 0, .95); }
}

/* ---------- iter7: the three tests read as an experiment readout ----------
   Faint gridlines on each chart, a shaded noise band at the control's level, an interval whisker on each
   variant (inside the band = flat, below = worse, above = won) and a "Test n" label. No invented values. */
.idea { grid-template-rows: auto 1fr auto auto; }
.idea__no { color: var(--ink-3); font: 700 14px/1 var(--sans); letter-spacing: .04em; }
.idea--won .idea__no { color: var(--gold-hi); }
.idea__chart {
  position: relative;
  background-image: linear-gradient(to bottom, rgba(246, 220, 170, .09) 1px, transparent 1px);
  background-size: 100% 33.333%; background-position: 0 0;
}
/* the noise band: centred on the top of bar A, across both bars */
.idea__bar--a::before {
  content: ""; position: absolute; left: -2px; bottom: calc(100% - 7px); width: calc(200% + 10px); height: 14px;
  border-block: 1px dashed rgba(220, 187, 138, .5); background: rgba(220, 187, 138, .1); pointer-events: none;
}
.idea--won .idea__bar--a::before, .idea--worse .idea__bar--a::before { width: calc(200% + 10px); }
/* the interval whisker on bar B */
.idea__ci { position: absolute; left: 50%; bottom: calc(100% - 6px); width: 12px; height: 12px; margin-left: -6px; border-block: 1.5px solid #c9b291; pointer-events: none; }
.idea__ci::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: #c9b291; }
.idea--won .idea__ci { bottom: calc(100% - 7px); border-color: #1a130b; }
.idea--won .idea__ci::before { background: #1a130b; }
.idea--won .idea__seal { top: -34px; }
.ideas__key { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; white-space: nowrap; }
.ideas__swatch { display: inline-block; width: 18px; height: 10px; border-block: 1px dashed rgba(220, 187, 138, .7); background: rgba(220, 187, 138, .16); }
.js .idea__ci { opacity: 0; transition: opacity .4s var(--ease); }
.js .is-played .idea__ci { opacity: 1; }
.js .is-played .idea--flat .idea__ci { transition-delay: .9s; }
.js .is-played .idea--worse .idea__ci { transition-delay: 1.2s; }
.js .is-played .idea--won .idea__ci { transition-delay: 1.5s; }
@media (min-width: 640px) {
  .idea__bar--a::before { width: calc(200% + 14px); left: -4px; height: 18px; bottom: calc(100% - 9px); }
  .idea--won .idea__bar--a::before, .idea--worse .idea__bar--a::before { width: calc(200% + 14px); }
  .idea__ci { width: 14px; height: 16px; margin-left: -7px; bottom: calc(100% - 8px); }
  .idea--won .idea__seal { top: -40px; }
}
@media (min-width: 1024px) {
  .panel .idea__no { font-size: 14px; }
  .panel .idea { grid-template-rows: auto 1fr auto auto; padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .js .idea__ci { opacity: 1; } }

/* Compact readout (hero, phones and tablets): three small panels, no legend */
.ideas--compact { gap: 0; }
.ideas--compact .ideas__legend { display: none; }
.ideas--compact .ideas__row { gap: 6px; }
.ideas--compact .idea { height: 118px; padding: 8px 6px 6px; gap: 4px; border-radius: 10px; }
.ideas--compact .idea__no { font-size: 14px; letter-spacing: 0; }
.ideas--compact .idea__axis { display: none; }
.ideas--compact .idea__chart { gap: 4px; }
.ideas--compact .idea__bar--a, .ideas--compact .idea--flat .idea__bar--b { height: 22px; }
.ideas--compact .idea--worse .idea__bar--b { height: 10px; }
.ideas--compact .idea--won .idea__bar--b { height: 46px; }
.ideas--compact .idea__bar--a::before { width: calc(200% + 8px); left: -2px; height: 12px; bottom: calc(100% - 6px); }
.ideas--compact .idea__ci { width: 10px; height: 10px; margin-left: -5px; bottom: calc(100% - 5px); }
.ideas--compact .idea__seal { display: none; }
.ideas--compact .idea__tag { font-size: 14px; gap: 3px; }
.ideas--compact .idea__tag .icon { width: 13px; height: 13px; }
.js .is-played .ideas--compact .idea--won, .js .is-played.ideas--compact .idea--won { transform: translateY(-3px); }

/* ---------- split: the Bing fact as one bar (topic page card) ---------- */
.split { display: grid; gap: 10px; width: 100%; }
.split__ends { display: flex; justify-content: space-between; color: var(--ink-2); font: 600 14px/1 var(--sans); }
.split__bar { display: flex; height: 26px; border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(220, 187, 138, .35); background: #241b13; }
.split__seg { display: block; height: 100%; transform-origin: left; transition: transform 1s var(--ease); }
.split__seg--won { width: 10%; background: linear-gradient(180deg, #fbe7bf, #dcbb8a 60%, #c29b67); box-shadow: 0 0 16px rgba(226, 181, 108, .5); }
.split__seg--maybe { width: 10%; background: repeating-linear-gradient(135deg, #dcbb8a 0 4px, #6e583c 4px 8px); }
.split__seg--not { flex: 1; background: transparent; }
.split__ticks { position: relative; height: 14px; color: var(--gold-hi); font: 700 14px/1 var(--sans); }
.split__tick { position: absolute; top: 0; transform: translateX(-50%); }
.split__tick--10 { left: 10%; }
.split__tick--20 { left: 20%; }
.split__key { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); font-size: 14px; line-height: 1.3; }
.split__key > span { display: inline-flex; align-items: center; gap: 7px; }
.split__sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.split__sw--won { background: #dcbb8a; }
.split__sw--maybe { background: repeating-linear-gradient(135deg, #dcbb8a 0 3px, #6e583c 3px 6px); }
.split__sw--not { background: #241b13; box-shadow: inset 0 0 0 1px #a68d6b; }
.js .plate:not(.is-played) .split__seg--won, .js .plate:not(.is-played) .split__seg--maybe { transform: scaleX(0); }
.js .split__seg--maybe { transition-delay: .5s; }
@media (min-width: 1024px) { .split__bar { height: 34px; } .split__key { font-size: 15px; } }

/* ---------- ring: the Bing fact as one large ring (CRO hub tile) ---------- */
.ring { display: grid; place-items: center; width: 100%; }
.ring__svg { width: 168px; height: 168px; transform: rotate(-90deg); overflow: visible; }
.ring__track { fill: none; stroke: #3a2d20; stroke-width: 12; }
.ring__won, .ring__maybe { fill: none; stroke-width: 12; stroke-linecap: butt; transition: stroke-dashoffset 1.4s var(--ease) .3s; }
.ring__won { stroke: #dcbb8a; stroke-dasharray: 10 90; filter: drop-shadow(0 0 6px rgba(226, 181, 108, .55)); }
.ring__maybe { stroke: #a68a63; stroke-dasharray: 20 80; }
.js .collage:not(.is-played) .ring__won { stroke-dashoffset: 10; }
.js .collage:not(.is-played) .ring__maybe { stroke-dashoffset: 20; }
@media (prefers-reduced-motion: reduce) { .ring__won, .ring__maybe, .split__seg { transition: none; } .js .collage .ring__won, .js .collage .ring__maybe { stroke-dashoffset: 0; } }
/* The interval whisker now marks the winner's bar; the round seal would collide with it and the tab bar */
.idea__seal { display: none !important; }
.ideas--compact .idea__tag .icon { display: none; }
.ideas--compact .idea__tag { font-size: 14px; }
.plate--split .plate__visual { align-items: center; }
.split { gap: 14px; }