/* #testers: "Who the testers are. And how we make them."
 * Four tester cards on base .card .lift (accent per card: --c, --ci ink, --tint). Each name is a button that opens the full
 * profile in a native modal dialog (bottom sheet on phones). Below: "Any input works", four input tiles and quality chips.
 * Motion only on reveal: trait meters fill segment by segment. The filled state is the default (no shell, no JS, reduced motion). */

/* ---------- Head: headline left, lead right ---------- */
#testers .tt-head{max-width:none;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:16px 56px;align-items:end;margin-bottom:32px}
#testers .tt-head .lead{max-width:40ch}
#testers:not(.tt-js) .tt-hint{display:none}

/* ---------- Tester cards ---------- */
#testers .tt-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
#testers .tt{display:flex;flex-direction:column;overflow:hidden}
#testers .tt-top{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 12px;align-items:center;padding:16px 20px 14px;border-bottom:1px solid var(--line-soft);
  background:radial-gradient(120% 110% at 0% 0%,var(--tint),transparent 62%),linear-gradient(180deg,#fff,#fbfcfd)}
#testers .tt-av{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#fff;border:1.5px solid var(--c);color:var(--ci);font-size:15px;font-weight:600;line-height:1}
#testers .tt-id h3{font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
#testers .tt-id p{font-size:13px;line-height:1.35;color:var(--muted)}
#testers .tt-open{appearance:none;margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit;text-align:left}
#testers.tt-js .tt-open{cursor:pointer}
#testers.tt-js .tt-open::before{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit}
#testers .tt-open:focus-visible{outline:none}
#testers .tt:has(.tt-open:focus-visible){outline:2px solid var(--blue-ink);outline-offset:3px}
#testers .tt-body{display:flex;flex-direction:column;flex:1 1 auto;padding:14px 20px 16px}
#testers .tt-m{display:grid;gap:7px}
#testers .tt-m li{display:grid;grid-template-columns:minmax(0,1fr) 68px;align-items:center;gap:10px;font-size:12.5px;line-height:1.4;color:var(--body)}
#testers .tt-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
#testers .tt-bar b{height:6px;border-radius:2px;background:#e9eef4}
#testers .tt-bar b:nth-child(2){--n:1}#testers .tt-bar b:nth-child(3){--n:2}#testers .tt-bar b:nth-child(4){--n:3}#testers .tt-bar b:nth-child(5){--n:4}
#testers .tt-bar[data-v="1"] b:nth-child(-n+1),#testers .tt-bar[data-v="2"] b:nth-child(-n+2),#testers .tt-bar[data-v="3"] b:nth-child(-n+3),
#testers .tt-bar[data-v="4"] b:nth-child(-n+4),#testers .tt-bar[data-v="5"] b:nth-child(-n+5){background:var(--c)}
#testers .tt-goal{margin:14px 0 12px;font-size:14px;font-weight:500;line-height:1.5;color:var(--ink)}
#testers .tt-goal span{display:flex;align-items:center;gap:8px;margin-bottom:2px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#testers .tt-goal span::before{content:"";width:12px;height:2px;border-radius:2px;background:var(--c)}
#testers .tt-more{display:none;align-items:center;gap:7px;margin-top:auto;padding-top:11px;border-top:1px solid var(--line-soft);font-size:13px;font-weight:500;color:var(--ci)}
#testers.tt-js .tt-more{display:flex}
#testers .tt-more svg{width:13px;height:13px;transition:translate .3s var(--ease)}
#testers .tt:hover .tt-more svg{translate:3px 0}

/* stacked sheets under each card: one of many */
#testers .tt-row > .tt{box-shadow:0 6px 0 -3px #fff,0 6px 0 -2px #e3e9f0,0 12px 0 -6px #fff,0 12px 0 -5px #e9eef4,var(--sh)}
#testers .tt-row > .tt:hover{box-shadow:0 6px 0 -3px #fff,0 6px 0 -2px #e3e9f0,0 12px 0 -6px #fff,0 12px 0 -5px #e9eef4,0 24px 46px -26px rgba(12,21,41,.26)}

/* ---------- Cohort field: the whole cohort as small avatar chips, the four examples highlighted ---------- */
#testers .tt-coh{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:center;gap:10px 24px;margin-bottom:18px}
#testers .tt-coh-t{display:flex;flex-direction:column;gap:2px}
#testers .tt-coh-t b{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--ink)}
#testers .tt-coh-t span{font-size:12.5px;line-height:1.4;color:var(--muted)}
#testers .tt-field{position:relative;display:flex;flex-wrap:wrap;gap:5px;box-sizing:content-box;height:49px;padding:8px;margin:-8px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
#testers .tt-field i,#testers .tt-tail-d i{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:#fff;
  border:1.5px solid color-mix(in srgb,var(--c) 70%,#fff);font-size:12px;font-style:normal;font-weight:600;line-height:1;color:var(--muted)}
#testers .tt-field i.is-soft{border-color:color-mix(in srgb,var(--c) 38%,#fff)}
#testers .tt-field i.is-faint{border-color:var(--line);color:var(--faint)}
#testers .tt-field i.is-hi{background:var(--c);border-color:var(--c);color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 24%,transparent)}
#testers .tt-field::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-100%);
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%)}

/* tail card: only in the swipe row (tablet and phone) */
#testers .tt-tail{display:none}
#testers .tt-tail-d{display:flex;flex-wrap:wrap;gap:4px;width:128px;margin-bottom:12px}
#testers .tt-tail b{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
#testers .tt-tail > span:last-child{font-size:13px;line-height:1.4;color:var(--muted)}

/* ---------- Any input works: heading + quality chips on one line, four input tiles ---------- */
#testers .tt-how{margin-top:36px}
#testers .tt-how-h{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}
#testers .tt-how-h h3{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
#testers .tt-how-h h3 span{color:var(--two)}
#testers .tt-chk{display:flex;flex-wrap:wrap;gap:8px}
#testers .tt-chk li{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 10px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:500;line-height:1;white-space:nowrap;color:var(--ink)}
#testers .tt-chk svg{flex:none;width:16px;height:16px;color:var(--green-ink)}
#testers .tt-in{margin-top:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#testers .tt-tile{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #e6ebf1}
#testers .tt-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--ci)}
#testers .tt-ic svg{width:22px;height:22px}
#testers .tt-tile b{display:block;font-size:15px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
#testers .tt-tile p{margin-top:2px;font-size:13px;line-height:1.45;color:var(--body)}

/* ---------- Profile dialog ---------- */
#testers .tt-dlg{width:min(900px,calc(100% - 32px));max-width:none;max-height:86vh;margin:auto;padding:0;border:0;border-radius:22px;background:#fff;color:var(--ink);
  box-shadow:0 2px 4px rgba(12,21,41,.06),0 40px 80px -30px rgba(12,21,41,.38);overflow:auto;overscroll-behavior:contain}
#testers .tt-dlg::backdrop{background:rgba(12,21,41,.22);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#testers .tt-sheet{position:relative}
#testers .tt-sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);opacity:.85}
#testers .tt-dh{display:flex;align-items:center;gap:14px;padding:22px 24px 18px;border-bottom:1px solid var(--line-soft);
  background:radial-gradient(90% 140% at 0% 0%,var(--tint),transparent 60%),#fff}
#testers .tt-dh .tt-av{width:52px;height:52px;font-size:19px}
#testers .tt-dn{flex:1 1 auto;min-width:0}
#testers .tt-dn h3{font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.025em}
#testers .tt-dn p{margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--muted)}
#testers .tt-x{appearance:none;flex:none;align-self:flex-start;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--body);cursor:pointer;transition:background-color .2s,color .2s}
#testers .tt-x:hover{background:var(--soft);color:var(--ink)}
#testers .tt-x:focus-visible{border-radius:50%}
#testers .tt-x svg{width:16px;height:16px}

/* life timeline: six milestones on one line */
#testers .tt-life{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:20px 24px 18px;border-bottom:1px solid var(--line-soft)}
#testers .tt-life::before{content:"";position:absolute;left:calc(24px + (100% - 98px) / 12);right:calc(24px + (100% - 98px) / 12);top:59px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 22%,#fff),var(--c))}
#testers .tt-life li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
#testers .tt-life em{font-size:12px;font-style:normal;font-weight:600;line-height:1.4;letter-spacing:.04em;color:var(--muted)}
#testers .tt-li{display:grid;place-items:center;width:34px;height:34px;margin-top:6px;border-radius:50%;background:#fff;border:1.5px solid color-mix(in srgb,var(--c) 55%,#fff);color:var(--ci);box-shadow:0 0 0 4px #fff}
#testers .tt-li svg{width:17px;height:17px}
#testers .tt-life li:last-child .tt-li{background:var(--c);border-color:var(--c);color:#fff}
#testers .tt-lt{margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--ink);text-wrap:balance}

#testers .tt-dlg h4,#testers .tt-q figcaption{font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#testers .tt-dg{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:20px;padding:20px 24px}
#testers .tt-q blockquote{margin:6px 0 0;padding-left:14px;border-left:3px solid var(--c)}
#testers .tt-q p{font-size:16.5px;font-weight:500;line-height:1.5;letter-spacing:-.01em;color:var(--ink)}
#testers .tt-dm{padding:12px 16px 14px;border-radius:14px;border:1px solid #e6ebf1;align-self:start}
#testers .tt-dm .tt-m{margin-top:8px}

/* profile data: five groups of compact rows */
#testers .tt-pd{margin:0 24px;padding:16px 18px 18px;border-radius:16px;background:var(--soft);border:1px solid var(--line-soft)}
#testers .tt-pd-h{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 16px}
#testers .tt-sel{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1.4;color:var(--muted)}
#testers .tt-sel svg{width:14px;height:14px}
#testers .tt-pgs{margin-top:12px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
#testers .tt-pg{min-width:0}
#testers .tt-pg h5{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.06em;color:var(--ink)}
#testers .tt-pg h5::before{content:"";width:10px;height:2px;border-radius:2px;background:var(--c)}
#testers .tt-pg dl{margin:8px 0 0;display:grid;gap:8px}
#testers .tt-pg dt{font-size:12px;line-height:1.3;color:var(--muted)}
#testers .tt-pg dd{margin:1px 0 0;font-size:13px;font-weight:500;line-height:1.35;color:var(--ink)}

/* life story in chapters: its own scroll area with a fade that says it continues */
#testers .tt-dg2{padding-bottom:24px}
#testers .tt-sw{position:relative;margin-top:8px;border:1px solid #e6ebf1;border-radius:14px;background:#fff}
#testers .tt-sc{max-height:300px;overflow:auto;overscroll-behavior:contain;padding:14px 18px 40px;border-radius:14px}
#testers .tt-sc:focus-visible{outline-offset:2px}
#testers .tt-sc h5{font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--ci)}
#testers .tt-sc p + h5{margin-top:14px}
#testers .tt-sc p{margin-top:3px;font-size:14px;line-height:1.65;color:var(--body)}
#testers .tt-sw::after{content:"";position:absolute;left:1px;right:1px;bottom:1px;height:64px;border-radius:0 0 13px 13px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0),#fff 80%);transition:opacity .3s ease}
#testers .tt-sw.is-end::after{opacity:0}
#testers .tt-dr{padding:14px 16px 16px;border-radius:16px;border:1px solid #e6ebf1;align-self:start}
#testers .tt-beats{margin-top:8px;display:grid;gap:8px;counter-reset:b}
#testers .tt-beats li{position:relative;padding-left:28px;font-size:13.5px;line-height:1.45;color:var(--ink);counter-increment:b}
#testers .tt-beats li::before{content:counter(b);position:absolute;left:0;top:0;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--ci);font-size:12px;font-weight:600;line-height:1}
#testers .tt-dr .tt-goal{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line-soft)}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  #testers .tt-bar b{transition:background-color .35s ease calc(var(--rd,0s) + .4s + var(--n,0) * .08s)}
  #testers:is(.motion *) .tt:not(.is-in) .tt-bar b{background:#e9eef4}
  #testers:is(.motion *) .tt-field i{animation:tt-pop .45s var(--ease) both;animation-delay:calc(.1s + var(--d,0) * 14ms)}
  #testers:is(.motion *) .tt-field i.is-hi{animation:tt-pop .45s var(--ease) both,tt-hi .9s ease both;animation-delay:calc(.1s + var(--d,0) * 14ms),1.3s}
  #testers:is(.motion *) .tt-field::after{animation:tt-sweep 1.7s ease-in-out .5s both}
  #testers .tt-dlg[open]{animation:tt-in .32s var(--ease)}
  #testers .tt-dlg[open]::backdrop{animation:tt-fade .32s ease}
  #testers .tt-dlg[open] .tt-life li{animation:tt-step .45s var(--ease) both;animation-delay:calc(.08s + var(--s,0) * .07s)}
  #testers .tt-life li:nth-child(2){--s:1}#testers .tt-life li:nth-child(3){--s:2}#testers .tt-life li:nth-child(4){--s:3}#testers .tt-life li:nth-child(5){--s:4}#testers .tt-life li:nth-child(6){--s:5}
}
@keyframes tt-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes tt-pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes tt-hi{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 40%,transparent)}60%{box-shadow:0 0 0 7px color-mix(in srgb,var(--c) 10%,transparent)}100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 24%,transparent)}}
@keyframes tt-sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes tt-fade{from{opacity:0}to{opacity:1}}
@keyframes tt-step{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes tt-up{from{transform:translateY(100%)}to{transform:none}}

/* ---------- Tablet and below: cards swipe, tiles 2 x 2 ---------- */
@media (max-width:860px){
  #testers .tt-pgs{grid-template-columns:repeat(3,minmax(0,1fr))}
  #testers .tt-dg{grid-template-columns:1fr}
}
@media (max-width:1080px){
  #testers .tt-head{grid-template-columns:1fr;align-items:start;gap:12px;margin-bottom:24px}
  #testers .tt-head .lead{max-width:56ch}
  #testers .tt-row{display:flex;gap:12px;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 18px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  #testers .tt-row::-webkit-scrollbar{display:none}
  #testers .tt{flex:0 0 min(280px,calc(100% - 44px));scroll-snap-align:start}
  #testers .tt-tail{display:flex;flex:0 0 200px;flex-direction:column;justify-content:center;align-items:flex-start;padding:20px;border-radius:var(--radius);
    background:var(--soft);border:1px solid #e6ebf1;scroll-snap-align:start}
  #testers .tt-how{margin-top:18px}
  #testers .tt-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Phones: short cards, chips swipe, tiles 2 x 2 stacked, dialog as a bottom sheet ---------- */
@media (max-width:640px){
  #testers .tt-head{margin-bottom:18px}
  #testers .tt-top{padding:13px 16px 11px}
  #testers .tt-body{padding:12px 16px 14px}
  #testers .tt .tt-goal{display:none}
  #testers .tt-coh{grid-template-columns:1fr;gap:8px;margin-bottom:12px}
  #testers .tt-coh-t{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
  #testers .tt-coh-t b{font-size:13.5px}
  #testers .tt-tail{flex-basis:170px}
  #testers .tt-more{margin-top:12px}
  #testers .tt-how{margin-top:12px}
  #testers .tt-how-h{gap:10px}
  #testers .tt-how-h h3{font-size:17px}
  #testers .tt-how-h h3 span{display:block}
  #testers .tt-chk{flex-wrap:nowrap;gap:6px;width:calc(100% + var(--gutter) * 2);margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);
    overflow-x:auto;scrollbar-width:none}
  #testers .tt-chk::-webkit-scrollbar{display:none}
  #testers .tt-chk li{height:30px;font-size:12.5px;padding:0 11px 0 9px}
  #testers .tt-in{margin-top:12px;gap:8px}
  #testers .tt-tile{grid-template-columns:1fr;gap:8px;padding:12px}
  #testers .tt-ic{width:32px;height:32px;border-radius:10px}
  #testers .tt-ic svg{width:18px;height:18px}
  #testers .tt-tile b{font-size:14px}
  #testers .tt-tile p{font-size:12.5px;line-height:1.4}

  #testers .tt-dlg{width:100%;max-height:88vh;max-height:88dvh;margin:auto 0 0;border-radius:20px 20px 0 0}
  #testers .tt-dh{padding:18px 16px 14px}
  #testers .tt-dh .tt-av{width:44px;height:44px;font-size:17px}
  #testers .tt-dn h3{font-size:19px}
  #testers .tt-dn p{font-size:12.5px}
  #testers .tt-life{grid-template-columns:1fr;gap:6px;padding:14px 16px}
  #testers .tt-life::before{left:calc(16px + 58px + 12px + 14px);right:auto;top:29px;bottom:29px;width:2px;height:auto;
    background:linear-gradient(180deg,color-mix(in srgb,var(--c) 22%,#fff),var(--c))}
  #testers .tt-life li{display:grid;grid-template-columns:58px 30px minmax(0,1fr);align-items:center;column-gap:12px;text-align:left}
  #testers .tt-li{width:30px;height:30px;margin:0}
  #testers .tt-li svg{width:15px;height:15px}
  #testers .tt-lt{margin:0;font-size:13px}
  #testers .tt-dg{grid-template-columns:1fr;gap:16px;padding:16px 16px 22px}
  #testers .tt-q p{font-size:15.5px}
  #testers .tt-pd{margin:0 16px;padding:14px}
  #testers .tt-pgs{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
  #testers .tt-dg2{padding-bottom:22px}
  #testers .tt-sc{max-height:260px;padding:12px 14px 36px}
  #testers .tt-sc p{font-size:13.5px}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  #testers .tt-dlg[open]{animation:tt-up .34s var(--ease)}
}

/* Traits note: an info button reveals that the shown traits are a few of many and differ by product */
#testers .tt-dm{position:relative}
#testers .tt-info{display:inline-grid;place-items:center;vertical-align:-2px;margin-left:4px;padding:2px;border:0;border-radius:50%;background:none;color:var(--faint);cursor:help;transition:color .2s}
#testers .tt-info:hover,#testers .tt-info:focus-visible{color:var(--ink)}
#testers .tt-info:focus-visible{outline:2px solid var(--blue-ink);outline-offset:1px}
#testers .tt-tip{position:absolute;z-index:2;left:12px;right:12px;top:34px;margin:0;padding:10px 12px;border-radius:10px;background:var(--ink);color:#fff;font-size:12.5px;line-height:1.45;font-weight:400;letter-spacing:0;text-transform:none;box-shadow:0 12px 28px -12px rgba(12,21,41,.5);opacity:0;visibility:hidden;translate:0 -4px;transition:opacity .18s,translate .18s,visibility .18s;pointer-events:none}
#testers .tt-dm:has(.tt-info:hover) .tt-tip,#testers .tt-dm:has(.tt-info:focus-visible) .tt-tip,#testers .tt-dm:has(.tt-info:focus) .tt-tip{opacity:1;visibility:visible;translate:0 0}