/* site-v60-experiments-c: the Experiments page, "the question first".
 * A catalogue: every experiment opens with the question it began as, set large; under the question, the real output (drawn in
 * HTML/CSS or a real image) beside one line of what we found and the action. Office hours is experiment 01 and shares the first
 * screen with the page title. Tokens come from shared/site.css (never redeclared here). Nothing runs on a timer except the caret. */

/* ── shared bits ── */
.xp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:15px;line-height:1.4;color:var(--sub)}
.xp-n{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.st{display:inline-flex;align-items:center;gap:7px;color:var(--sub)}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dim)}
.st-open::before{background:var(--teal)}
.st::after{content:none}
.xp-meta .st{margin-left:0}
.xq{font-size:clamp(32px,3.4vw,50px);line-height:1.1;letter-spacing:-.03em;font-weight:600;max-width:20em;text-wrap:balance}
.found{font-size:clamp(19px,1.5vw,22px);line-height:1.42;letter-spacing:-.01em;font-weight:500;color:var(--ink);max-width:24em;text-wrap:pretty}
.found+.body{margin-top:var(--sp-p)}
.facts{margin-top:var(--sp-p);font-size:15px;line-height:1.5;color:var(--sub)}
.xp-text .ctas{margin-top:28px}
.honest{margin-top:16px}

/* segmented choices above a drawing (click-driven state) */
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.seg-b{appearance:none;height:34px;padding:0 13px;border:1px solid var(--edge);border-radius:999px;background:transparent;color:var(--sub);font-size:13.5px;cursor:pointer;transition:background-color var(--motion-base) var(--ease-out),color var(--motion-base) var(--ease-out),border-color var(--motion-base) var(--ease-out)}
.seg-b:hover{color:var(--ink);background:var(--hover)}
.seg-b[aria-pressed="true"]{color:var(--ink);background:var(--elev);border-color:#5a5a5a}
.seg-b:focus-visible,.nav-b:focus-visible,.try-b:focus-visible{outline:2px solid var(--teal-hi);outline-offset:2px}

/* ── hero: the collection's title ── */
.sec-hero{padding-block:calc(var(--hdr) + clamp(28px,5vh,56px)) clamp(24px,3.4vh,36px)}
.xh-top{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:24px var(--col-gap);align-items:end}
.xh-top h1{max-width:14em}
.xh-top .lead{margin:0 0 6px;max-width:22em}
.xh-entry{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:32px var(--col-gap);align-items:start}

/* ── the rail: the index of all six on the first screen; sticks to the top and tracks the scroll ── */
.rail{position:sticky;top:0;z-index:30;background:var(--page);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.rail-in{display:flex;align-items:center;gap:20px;height:56px}
.rail-home{flex:none;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);padding-right:20px;border-right:1px solid var(--hair);line-height:24px}
.rail-list{flex:1;min-width:0;display:flex;justify-content:space-between;gap:4px}
.rail-list a{position:relative;display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;border-radius:8px;font-size:14.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--motion-base) var(--ease-out),background-color var(--motion-base) var(--ease-out)}
.rail-list a:hover{color:var(--ink);background:var(--hover)}
.rn{flex:none;font-size:13px;font-variant-numeric:tabular-nums;color:var(--dim)}
.rail-list a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:transparent;transition:background-color var(--motion-base) var(--ease-out)}
.rail-list a[aria-current="true"]{color:var(--ink);font-weight:500}
.rail-list a[aria-current="true"] .rn{color:var(--sub)}
.rail-list a[aria-current="true"]::before{background:var(--teal)}
.rail-pos{flex:none;font-size:14px;color:var(--sub);font-variant-numeric:tabular-nums}
[data-xp]{scroll-margin-top:56px}
.x-first{border-top:0;padding-top:clamp(28px,4vh,44px)}
.tnext{color:var(--sub)}
.tnext::after{content:"\2193"}
.tnext:hover{color:var(--ink)}
.xq-hero{font-size:clamp(28px,2.4vw,36px);margin-top:18px}
.xh-text .found{margin-top:var(--sp-lead);font-size:clamp(18px,1.3vw,20px)}
.xh-text .ctas{margin-top:24px}

/* the room: the real office hours frame (room image, the live mark, the composer, the room's suggested questions) */
.room{border:1px solid var(--edge);border-radius:12px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.room-vid{position:relative;display:block;aspect-ratio:2.35/1;background:#111}
.room-vid img{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 40%}
.room-live{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;background:rgba(26,26,26,.86);border:1px solid rgba(69,69,69,.8);font-size:13px;font-weight:500;color:var(--ink)}
.room-live i{width:7px;height:7px;border-radius:50%;background:#ef4444}
html.anim .room-live i{animation:live 2.4s var(--ease-out) infinite}
@keyframes live{50%{opacity:.35}}
.room-under{padding:14px 14px 16px;border-top:1px solid var(--border)}
.room-ask{display:flex;align-items:center;gap:12px;height:50px;padding:0 6px 0 16px;border:1px solid var(--border);border-radius:12px;background:var(--page);transition:border-color var(--motion-base) var(--ease-out)}
.room-ask:hover{border-color:#5a5a5a}
.room-ph{flex:1;min-width:0;display:flex;align-items:center;font-size:15px;color:var(--sub)}
.caret{display:inline-block;width:1.5px;height:18px;margin-left:3px;background:var(--ink)}
html.anim .caret{animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.room-send{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;background:var(--hover);color:var(--sub);transition:background-color var(--motion-base) var(--ease-out),color var(--motion-base) var(--ease-out)} /* v64: a quiet send arrow, so the page has ONE "Join the room" button */
.room-ask:hover .room-send{background:#454545;color:var(--ink)}
.room-sugg{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.room-sugg a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--edge);border-radius:999px;font-size:13.5px;color:var(--sub);transition:color var(--motion-base) var(--ease-out),background-color var(--motion-base) var(--ease-out)}
.room-sugg a:hover{color:var(--ink);background:var(--hover)}
.room-fig .cap{margin-top:var(--sp-cap)}

/* ── an experiment: question, then output beside what we found ── */
.xp-head{max-width:62rem}
.xp-head .xq{margin-top:18px}
.xp-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px var(--col-gap);align-items:center;margin-top:clamp(36px,5vh,56px)}
.xp.flip .xp-body{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.xp.flip .xp-fig{order:2}
.xp-fig{min-width:0}
.xp-fig>.cap{margin-top:var(--sp-cap)}

/* 02 the share card, drawn like the real one (header, the card, the strike line, the footer) */
.lie{padding:30px 30px 24px;border:1px solid var(--edge);border-radius:14px;background:var(--page)}
.lie-hd{display:flex;align-items:center;gap:14px}
.lie-hd img{flex:none;width:36px;height:36px;border-radius:50%}
.lie-t{font-size:18px;font-weight:500;line-height:1.25}
.lie-s{margin-top:3px;font-size:13.5px;color:var(--sub)}
.lie-card{margin-top:20px;padding:26px 26px 24px;border:1px solid var(--edge);border-radius:12px;background:var(--panel)}
.lie-h{font-size:clamp(22px,2vw,30px);line-height:1.2;letter-spacing:-.02em;font-weight:600;text-wrap:balance}
.lie-pair{margin-top:18px}
.lie-l{margin-top:12px;font-size:13.5px;color:var(--sub)}
.lie-claim,.lie-truth{margin-top:3px;font-size:17px;line-height:1.45}
.lie-claim s{color:var(--sub);text-decoration-color:var(--brand);text-decoration-thickness:2px} /* the real card's orange strike line: an identity mark inside the drawing */
.lie-ft{margin-top:18px;font-size:13px;color:var(--sub)}
html.anim .lie.swap .lie-card{animation:rise var(--motion-medium) var(--ease-out) both}

/* 03 Ask the News, drawn like the real page: the question, the share, one cell per headline */
.news{padding:24px;border:1px solid var(--edge);border-radius:14px;background:var(--panel)}
.news-q{display:flex;align-items:center;min-height:48px;padding:10px 16px;border:1px solid var(--edge);border-radius:10px;background:var(--page);font-size:16px;line-height:1.35}
.news-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:22px}
.news-big{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.news-big b{font-size:clamp(44px,4.4vw,64px);line-height:1;letter-spacing:-.035em;font-weight:600;font-variant-numeric:tabular-nums}
.news-big>span{font-size:15px;color:var(--sub)}
.news-time{font-size:13.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.news-grid{display:grid;grid-template-columns:repeat(72,minmax(0,1fr));gap:2px;margin-top:20px}
.news-grid i{display:block;aspect-ratio:1;border-radius:1.5px;background:#383838;transition:background-color var(--motion-medium) var(--ease-out)}
.news-grid i.y{background:var(--teal)}
.news-key{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--sub)}
.news-key i{width:9px;height:9px;border-radius:2px;background:var(--teal)}

/* 04 Coverage by Meaning: the real table, brand colours as the real page uses them */
.cov{padding:22px 24px 10px;border:1px solid var(--edge);border-radius:14px;background:var(--panel)}
.cov table{width:100%;border-collapse:collapse;font-size:15px}
.cov-cap{caption-side:top;text-align:left;padding-bottom:14px;font-size:13.5px;color:var(--sub)}
.cov th,.cov td{padding:12px 10px;border-top:1px solid var(--border);text-align:right;font-variant-numeric:tabular-nums;vertical-align:middle}
.cov thead th{border-top:0;font-size:14px;font-weight:600;white-space:nowrap;vertical-align:bottom}
.cov thead th small{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--sub)}
.cov thead th:first-child{font-weight:400;color:var(--sub);font-size:13.5px}
.cov th[scope="row"],.cov thead th:first-child{text-align:left;padding-left:0}
.cov th[scope="row"]{font-weight:400;line-height:1.35;color:var(--ink)}
.cov td{color:var(--sub);width:13%}
.cov td.hi{color:var(--ink);font-weight:600}
.cov tr.on th,.cov tr.on td{background:var(--elev)}
.cov tr.on th{box-shadow:-12px 0 0 var(--elev)}
.dot{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;vertical-align:1px}
.d-dd{background:#21ad8f}.d-ue{background:#f59e0b}.d-gh{background:#3b82f6} /* the real page's brand colours (data, inside the drawing) */

/* 05 the review deck, one finding per screen: kicker, giant number, completion, 20-dot picture, what to do */
.wr{padding:clamp(28px,3.4vw,44px);border:1px solid var(--edge);border-radius:14px;background:var(--deep);min-height:420px;display:flex;flex-direction:column}
.wr-k{font-size:15px;color:var(--sub)}
.wr-n{margin-top:10px;font-size:clamp(48px,5vw,76px);line-height:1;letter-spacing:-.04em;font-weight:600}
.wr-c{margin-top:12px;font-size:clamp(19px,1.6vw,23px);line-height:1.3;font-weight:500;max-width:26em;text-wrap:balance}
.wr-dots{margin-top:auto;padding-top:28px;display:grid;gap:12px}
.wr-row{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:12px}
.wr-l{font-size:13.5px;color:var(--sub)}
.dots{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:5px;max-width:420px}
.dots i{display:block;aspect-ratio:1;border-radius:50%;background:#3a3a3a;transition:background-color var(--motion-medium) var(--ease-out)}
.dots i.on{background:var(--brand)} /* the deck's "you" dots: an identity mark inside the drawing */
.dots.lead-d i.on{background:#9a9a9a}
.wr-do{margin-top:24px;padding-top:18px;border-top:1px solid var(--border);font-size:15.5px;line-height:1.5;color:var(--sub)}
.wr-do b{color:var(--ink);font-weight:600;margin-right:4px}
html.anim .wr.swap>:not(.wr-dots){animation:rise var(--motion-medium) var(--ease-out) both}
.wr-nav{display:flex;align-items:center;gap:14px;margin-top:14px}
.nav-b{appearance:none;width:40px;height:40px;border:1px solid var(--edge);border-radius:8px;background:transparent;color:var(--ink);font-size:17px;cursor:pointer;transition:background-color var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.nav-b:hover{background:var(--hover)}
.nav-b:active{transform:scale(.97)}
.wr-pos{font-size:14px;color:var(--sub);font-variant-numeric:tabular-nums}

/* 06 try.frac.tl: the tool list and the chosen tool */
.try{border:1px solid var(--edge);border-radius:14px;background:var(--page);overflow:hidden}
.try-top{display:flex;align-items:center;gap:8px;height:52px;padding:0 18px;border-bottom:1px solid var(--border);font-size:14.5px;font-weight:600}
.try-top img{border-radius:50%}
.try-top i{font-style:normal;color:var(--brand)}
.try-top em{margin-left:auto;font-style:normal;font-weight:400;font-size:13px;color:var(--sub);padding:3px 10px;border:1px solid var(--edge);border-radius:999px}
.try-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:330px}
.try-list{display:flex;flex-direction:column;gap:4px;padding:12px;border-right:1px solid var(--border);background:var(--deep)}
.try-b{appearance:none;display:block;width:100%;padding:12px 14px;border:1px solid transparent;border-radius:10px;background:transparent;text-align:left;cursor:pointer;transition:background-color var(--motion-base) var(--ease-out),border-color var(--motion-base) var(--ease-out)}
.try-b b{display:block;font-size:15px;font-weight:500;color:var(--ink)}
.try-b small{display:block;margin-top:2px;font-size:13px;color:var(--sub)}
.try-b:hover{background:var(--hover)}
.try-b[aria-pressed="true"]{background:var(--panel);border-color:var(--edge)}
.try-pane{display:flex;flex-direction:column;padding:22px 22px 18px}
.try-name{font-size:20px;font-weight:600;letter-spacing:-.015em}
.try-what{margin-top:8px;font-size:15px;line-height:1.5;color:var(--sub)}
.try-agent{margin-top:18px;padding:12px 14px;border-radius:12px;background:var(--hover)}
.try-who{display:block;font-size:12.5px;font-weight:600;color:var(--sub)}
.try-agent p{margin-top:3px;font-size:14.5px;line-height:1.45}
.try-run{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px;font-size:13.5px;color:var(--sub)}
.try-go{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:8px;background:var(--app-btn);color:var(--app-btn-ink);font-size:13.5px;font-weight:500}
html.anim .try-pane.swap>*{animation:rise var(--motion-medium) var(--ease-out) both}

/* the close sits on the page surface so it alternates with the deep section above */
.x-close{background:var(--page)}

/* ── short laptop screens: keep office hours on the first screen ── */
@media (max-height:820px) and (min-width:900px){
  .sec-hero{padding-top:calc(var(--hdr) + 24px);padding-bottom:22px}
  .xh-top h1{font-size:clamp(40px,3.8vw,54px)}
  .x-first{padding-top:24px}
  .room-vid{aspect-ratio:2.6/1}
  .room-under{padding:12px}
  .room-sugg{margin-top:10px}
}

/* ── narrow screens ── */
@media (max-width:1100px) and (min-width:900px){
  .xp-body,.xp.flip .xp-body{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .xp.flip .xp-body{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
}
@media (max-width:899px){
  .sec-hero{padding-top:calc(var(--hdr) + 20px);padding-bottom:20px}
  .xh-top,.xh-entry{grid-template-columns:minmax(0,1fr)}
  .xh-top .lead{margin:0}
  .xh-entry{gap:28px}
  .x-first{padding-top:20px}
  .rail-home{display:none}
  .rail-in{gap:10px;height:52px}
  .rail-pos{display:none}
  /* phones: six numbers, the current one with its name */
  .rail-list{justify-content:flex-start;gap:2px}
  .rail-list li{flex:none}
  .rail-list a{gap:6px;height:36px;padding:0 7px;border:1px solid transparent}
  .rail-list a::before{display:none}
  .rail-list a .rt{display:none}
  .rail-list a .rn{font-size:14px;color:var(--sub)}
  .rail-list a[aria-current="true"]{border-color:var(--edge);background:var(--panel)}
  .rail-list a[aria-current="true"] .rn{color:var(--ink)}
  .rail-list a[aria-current="true"] .rt{display:inline;overflow:hidden;text-overflow:ellipsis}
  .rail-list li:has(a[aria-current="true"]){flex:0 1 auto;min-width:0}
  [data-xp]{scroll-margin-top:52px}
  .xp-body,.xp.flip .xp-body{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px}
  .xp.flip .xp-fig{order:0}
  .xp-text{order:-1}
  .news-grid{grid-template-columns:repeat(36,minmax(0,1fr))}
  .news-grid i:nth-child(n+505){display:none}
  .try-cols{grid-template-columns:minmax(0,1fr)}
  .try-list{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--border)}
  .try-b{width:calc(50% - 2px);padding:10px 12px}
}
@media (max-width:560px){
  .room-vid{aspect-ratio:1.9/1}
  .room-vid img{object-position:42% 40%}
  .room-sugg li:nth-child(n+3){display:none}
  .news-grid{grid-template-columns:repeat(28,minmax(0,1fr))}
  .news-grid i:nth-child(n+337){display:none}
  .lie{padding:18px 16px 16px}
  .lie-card{padding:18px 16px}
  .lie-t{font-size:16px}
  .lie-claim,.lie-truth{font-size:15.5px}
  .news{padding:16px}
  .news-q{font-size:15px}
  .cov{padding:16px 14px 6px}
  .cov table{font-size:13.5px}
  .cov th,.cov td{padding:10px 5px}
  .cov thead th{font-size:12.5px;white-space:normal}
  .cov thead th small{font-size:11.5px}
  .cov td{width:16%}
  .wr{min-height:0;padding:22px 18px}
  .wr-row{grid-template-columns:1fr}
  .wr-row .wr-l{margin-bottom:-4px}
  .dots{gap:4px}
  .try-top{padding:0 14px}
  .try-pane{padding:16px 16px 14px}
  .seg{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg-b{flex:none}
}

/* 06 Answer gaps: the results window, a ranked gaps table like the one the page shows while a run is going */
.gaps{border:1px solid var(--edge);border-radius:14px;background:var(--page);overflow:hidden}
.gaps-top{display:flex;align-items:center;gap:8px;height:52px;padding:0 18px;border-bottom:1px solid var(--border);font-size:14.5px;font-weight:600}
.gaps-top img{border-radius:50%}
.gaps-top i{font-style:normal;color:var(--accent,#e94f29);font-weight:400}
.gaps-top em{margin-left:auto;font-style:normal;font-weight:400;color:var(--sub);font-size:13.5px}
.gaps-line{padding:14px 18px 0;font-size:14px;color:var(--sub)}
.gaps-line b{color:var(--ink)}
.gaps table{width:100%;border-collapse:collapse;font-size:14px;margin-top:10px}
.gaps caption{caption-side:top;text-align:left;padding:0 18px 8px;font-size:13px;color:var(--sub)}
.gaps th,.gaps td{padding:9px 10px;border-top:1px solid var(--border);text-align:left;vertical-align:top}
.gaps th:first-child,.gaps td:first-child{padding-left:18px}
.gaps th:last-child,.gaps td:last-child{padding-right:18px}
.gaps thead th{font-size:12px;font-weight:500;color:var(--sub);border-top:0}
.gaps td.n,.gaps th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.gaps td.lost{color:var(--accent,#e94f29);font-weight:600}
.gaps td.q{font-weight:600;color:var(--ink)}
.gaps td.best{color:var(--sub)}
@media (max-width:720px){.gaps table{font-size:13px}.gaps th:nth-child(3),.gaps td:nth-child(3){display:none}}

/* v69: nine entries — rail items shrink and truncate instead of overflowing; under 1300px only the current entry keeps its title */
.rail-list li{flex:1 1 0;min-width:0}
.rail-list a{max-width:100%}
.rail-list a .rt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media (max-width:1700px) and (min-width:761px){
  .rail-list{justify-content:flex-start;gap:2px}
  .rail-list li{flex:none}
  .rail-list a:not([aria-current="true"]) .rt{display:none}
}

/* v70: the bulletin figure — a real video inside the shared result chrome */
.bull-vid{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#111;border-bottom:1px solid var(--border)}

/* v72: the voice check figure — the verdict as the page tells it, in the shared result chrome */
.gaps.voice .voice-h{font-size:18px;line-height:1.3;font-weight:600;color:var(--ink);padding-top:16px}
.gaps.voice .gaps-line{font-size:14.5px;line-height:1.5}

/* v73: twelve entries — on phones the rail scrolls sideways (the v69 shrink rule had squeezed the numbers until they clipped); the script keeps the current one in view */
@media (max-width:760px){
  .rail-list{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .rail-list::-webkit-scrollbar{display:none}
  .rail-list li,.rail-list li:has(a[aria-current="true"]){flex:none;min-width:auto}
}