/* ============================================================
   SESSION STYLES, /test-drive-fairchild
   Two layouts share variables/tokens from test-drive.css + styles.css
   ============================================================ */

/* Derived tokens resolve against the themed body, not :root, so they inherit
   the coffee palette. */
body{
  --s-rule: rgba(231,235,242,0.14);
  --s-rule-strong: rgba(231,235,242,0.28);
  --s-paper: var(--paper);
  --s-paper-2: var(--paper-2);
  --s-ink: var(--ink);
  --s-ink-2: var(--ink-2);
  --s-accent: var(--accent);
}

/* ---------- Slim session nav ---------- */
.session-nav{
  background: var(--s-paper);
  border-bottom: 1px solid var(--s-rule);
  position: sticky; top: 0; z-index: 40;
}
.session-nav .nav-inner{padding:14px 40px;display:flex;align-items:center;gap:24px}
.session-nav .nav-logo{flex:0 0 auto}
/* Smaller than the site nav’s 54px, the room is the subject here,
   not the brand. */
.session-nav .nav-logo img{height:38px;width:auto;display:block}
.session-nav-mid{
  flex:1; display:flex; align-items:center; gap:12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--s-ink-2);
}
.sn-kicker{color: var(--s-accent)}
.sn-sep{opacity:.4}
.sn-title{color: var(--s-ink); letter-spacing: 0.18em}
/* margin-left keeps the exit on the right whether or not the room
   carries a middle block. */
.session-nav-right{flex:0 0 auto; margin-left:auto}
.session-exit{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--s-ink); text-decoration: none; padding: 8px 14px;
  border: 1px solid var(--s-rule-strong); transition: all .2s;
}
.session-exit:hover{background: var(--s-ink); color: var(--s-paper)}

/* At phone width the logo and a full-width exit do not fit inside the 40px
   gutters, and the room scrolled sideways. Everything tightens rather than
   the label being cut. */
@media(max-width:640px){
  .session-nav .nav-inner{padding:12px 20px; gap:12px}
  .session-nav .nav-logo img{height:30px}
  .session-exit{padding:7px 10px; font-size:9.5px; letter-spacing:0.14em}
}

/* ============================================================
   OPTION A, COURTROOM DOCKET
   ============================================================ */
.session-a{background: var(--s-paper-2); min-height: calc(100vh - 68px)}

/* Case strip */
.case-strip{
  background: var(--s-paper); color: var(--s-ink);
  border-bottom: 1px solid var(--s-rule);
}
.cs-inner{
  max-width: 1600px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1.4fr 2fr 1.1fr; gap: 40px;
  padding: 18px 40px;
}
.cs-kicker{
  display:block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--s-ink-2); margin-bottom: 4px;
}
.cs-val{
  font-family: var(--serif, 'Instrument Serif'); font-size: 18px; color: var(--s-ink);
}

/* Docket grid */
.docket{
  max-width: 1600px; margin: 0 auto;
  display: grid; grid-template-columns: 320px 1fr 320px; gap: 28px;
  padding: 32px 40px 80px;
}
.rail-kicker{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--s-accent); display: block;
}
.rail-kicker.light{color: var(--accent)}

/* Left rail: topics */
.docket-left{
  background: var(--s-paper); border: 1px solid var(--s-ink);
  padding: 22px 22px 18px; position: sticky; top: 88px; align-self: start;
  max-height: calc(100vh - 108px); overflow: auto;
}
.rail-head{margin-bottom: 18px}
.rail-head h2{
  font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.1;
  margin: 6px 0 8px; color: var(--s-ink);
}
.rail-head h2 em{color: var(--s-accent); font-weight: 500}
.rail-note{
  font-family: var(--serif);  font-size: 13px; color: var(--s-ink-2); margin: 0;}

.topic-list{list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--s-rule)}
.topic{border-bottom: 1px solid var(--s-rule)}
.topic-btn{
  display: grid; grid-template-columns: 28px 1fr 20px; gap: 10px; align-items: baseline;
  width: 100%; background: transparent; border: 0; padding: 12px 4px;
  font-family: inherit; color: inherit; cursor: pointer; text-align: left;
  transition: background .2s;
}
.topic-btn:hover{background: rgba(126,155,200,0.06)}
.topic-roman{
  font-family: var(--serif);  font-size: 15px; color: var(--s-accent);}
.topic-title{
  font-family: var(--serif); font-size: 15px; color: var(--s-ink); line-height: 1.3;
}
.topic-chev{
  font-family: var(--mono); font-size: 14px; color: var(--s-ink-2); text-align: right;
  transition: transform .3s;
}
.topic.open .topic-chev{transform: rotate(45deg); color: var(--s-accent)}
/* Animating to a fixed max-height clipped anything longer than it, the
   oral-argument grounds run several sentences and lost their last lines.
   Grid rows animate to the content’s own height, whatever that is. */
.topic-body{
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  padding: 0 4px 0 42px;
  transition: grid-template-rows .35s ease, padding .25s ease;
}
.topic-body > *{min-height: 0}
.topic.open .topic-body{grid-template-rows: 1fr; padding: 0 4px 14px 42px}
.topic-body p{
  font-family: var(--serif);  font-size: 13.5px; line-height: 1.55;
  color: var(--s-ink-2); margin: 0;}
.rail-back{
  display: block; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--s-rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--s-ink); text-decoration: none;
}
.rail-back:hover{color: var(--s-accent)}

/* Center: bench */
.docket-center{display: flex; flex-direction: column; gap: 24px}
.bench-head{
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--s-rule);
}
.bh-kicker{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--s-accent);
}
.bh-rule{flex: 1; height: 1px; background: var(--s-rule)}
.bh-status{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--s-ink-2);
}
.bh-status .dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--s-ink-2); display: inline-block;
}
.bh-status .dot.live{background: var(--s-accent); box-shadow: 0 0 0 4px rgba(126,155,200,0.25); animation: pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow: 0 0 0 8px rgba(126,155,200,0.05)}}
.bh-status.muted{opacity: .6}

.bench-frame{
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  background: var(--s-ink); border: 1px solid var(--s-ink);
}
.bench-video{width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.95)}
.bench-frame .film-stamp{
  position: absolute; top: 16px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase; color: #fff; opacity: .85;
  background: rgba(0,0,0,0.4); padding: 6px 12px; border: 1px solid rgba(255,255,255,0.25);
  z-index: 2;
}
.bench-frame .film-stamp.tl{left: 16px}
.bench-frame .film-stamp.tr{right: 16px}
.bench-nameplate{
  position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2;
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: end;
  color: #fff;
}
.np-roman{font-family: var(--serif);  font-size: 56px; line-height: .9; color: var(--accent)}
.np-title{
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-bottom: 2px;
}
.bench-nameplate h3{
  font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1; margin: 0;
  color: #fff;
}
.bench-nameplate h3 em{color: var(--accent)}
.np-sub{
  display: block; margin-top: 4px;
  font-family: var(--serif);  font-size: 14px; color: rgba(255,255,255,0.7);}

/* Control bar */
.ctrl-bar{
  display: grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: center;
  padding: 18px 20px; background: var(--s-paper); border: 1px solid var(--s-ink);
}
.ctrl-primary{
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--s-ink); color: var(--s-paper); border: 0;
  padding: 14px 22px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: all .2s;
}
.ctrl-primary:hover:not(:disabled){background: var(--s-accent)}
.ctrl-primary:disabled{opacity: .45; cursor: not-allowed}
.cp-dot{width: 8px; height: 8px; background: var(--accent); border-radius: 50%; display: inline-block}
.ctrl-secondary{
  background: transparent; color: var(--s-ink); border: 1px solid var(--s-ink);
  padding: 14px 20px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: all .2s;
}
.ctrl-secondary:hover:not(:disabled){background: var(--s-ink); color: var(--s-paper)}
.ctrl-secondary:disabled{opacity: .35; cursor: not-allowed}

.ctrl-clock{
  justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding-left: 22px; border-left: 1px solid var(--s-rule); margin-left: 10px;
}
.clock-face{
  font-family: var(--serif); font-size: 38px; line-height: 1; color: var(--s-ink);
  letter-spacing: 0.02em; font-feature-settings: "tnum" 1;
}
.clock-face .colon{color: var(--s-accent); margin: 0 2px}
.clock-label{
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--s-ink-2);
}

/* Time is up. The clock stops here; the room stays open until the exchange
   on the record lands, so this has to be impossible to miss, otherwise the
   session looks like it simply forgot to end. See TestDrive.grace. */
.ctrl-clock.is-up .clock-face{color: #c96b6b}
.ctrl-clock.is-up .clock-label{color: #c96b6b; opacity: 1}
.ctrl-clock.is-up{animation: clockAlarm 1.1s ease-in-out 3}
@keyframes clockAlarm{0%,100%{opacity: 1}50%{opacity: .45}}

/* Right rail */
.docket-right{
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 88px; align-self: start;
}
.coach-card, .progress-card{
  background: var(--s-paper); border: 1px solid var(--s-ink); padding: 22px 22px 20px;
}
.coach-card h3{
  font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.2;
  margin: 10px 0 10px; color: var(--s-ink);
}
.coach-card p{
  font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--s-ink-2); margin: 0;
}
.progress-card{padding-bottom: 18px}
.prog-row{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px dashed var(--s-rule);
  font-family: var(--mono); font-size: 11px;
}
.prog-row:last-of-type{border-bottom: 0}
.prog-k{letter-spacing: 0.2em; text-transform: uppercase; color: var(--s-ink-2)}
.prog-v{color: var(--s-ink); font-family: var(--serif); font-size: 14px;}
.prog-v .muted{color: var(--s-ink-2); opacity: .6}
.prog-bar{
  height: 3px; background: var(--s-rule); margin: 12px 0 8px; overflow: hidden;
}
.prog-fill{display: block; height: 100%; background: var(--s-accent); transition: width .4s ease}
.prog-foot{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--s-ink-2); opacity: .8;
}
.legal-fineprint{
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--s-ink-2); opacity: .55; line-height: 1.6; padding: 4px 4px;
}

/* ============================================================
   OPTION B, DEPOSITION ROOM
   ============================================================ */
.session-b{
  display: grid; grid-template-columns: 380px 1fr;
  min-height: calc(100vh - 68px); background: var(--paper);
}

/* Left: counsel's clipboard (dark panel) */
.depo-left{background: var(--paper-2); border-right: 1px solid rgba(231,235,242,0.12); color: var(--ink)}
.depo-left-inner{
  padding: 32px 28px 24px; display: flex; flex-direction: column; height: 100%;
}
.clip-head{margin-bottom: 18px}
.clip-head h2{
  font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.05;
  margin: 8px 0 10px; color: var(--ink);
}
.clip-head h2 em{color: var(--accent); font-weight: 500}
.clip-theme{
  font-family: var(--serif);  font-size: 14px; color: var(--ink-2); margin: 0;
  padding-bottom: 14px; border-bottom: 1px solid rgba(231,235,242,0.12);}
.clip-list{
  list-style: none; padding: 0; margin: 0; flex: 1;
  overflow: auto; max-height: calc(100vh - 340px);
}
.clip-item{border-bottom: 1px dashed rgba(231,235,242,0.12)}
.clip-btn{
  display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: baseline;
  width: 100%; background: transparent; border: 0; padding: 14px 4px;
  font-family: inherit; color: inherit; cursor: pointer; text-align: left;
  transition: all .2s;
}
.clip-btn:hover{background: rgba(126,155,200,0.07)}
.clip-num{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--accent); padding-top: 2px;
}
.clip-q{
  font-family: var(--serif); font-size: 14.5px; line-height: 1.4; color: var(--ink);
  transition: color .2s;
}
.clip-item.asked .clip-q{color: var(--ink-2); text-decoration: line-through; text-decoration-color: rgba(126,155,200,0.45)}
.clip-item.asked .clip-num{color: var(--ink-2)}
.clip-foot{
  padding-top: 18px; margin-top: 14px; border-top: 1px solid rgba(231,235,242,0.12);
  display: flex; flex-direction: column; gap: 22px;
}
.clip-back{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
}
.clip-back:hover{color: var(--accent)}
.clip-sig{display: flex; flex-direction: column; gap: 4px}
.sig-line{display: block; height: 1px; background: var(--ink-2); width: 60%}
.sig-label{
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-2);
}

/* Right: deposition stage */
.depo-right{
  position: relative; overflow: hidden; background: #0c1220;
}
.depo-video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) contrast(1.02);
}
.depo-scrim{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 25%, transparent 60%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}

.depo-stamp-tl, .depo-stamp-tr{
  position: absolute; top: 28px; color: #fff; z-index: 4;
  display: flex; flex-direction: column; gap: 4px;
}
.depo-stamp-tl{left: 28px}
.depo-stamp-tr{right: 28px; text-align: right}
.ds-kicker{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent);
}
.ds-name{
  font-family: var(--serif);  font-size: 16px; color: rgba(255,255,255,0.9);}

/* Typographic clock (right-center, floating) */
.depo-clock{
  position: absolute; top: 72px; right: 28px; z-index: 3;
  font-family: var(--serif); color: #fff; text-align: right;
  line-height: .85;
}
.depo-clock .dc-m, .depo-clock .dc-s{font-size: 72px; font-feature-settings: "tnum" 1}
.depo-clock .dc-colon{font-size: 72px; color: var(--depo-accent, var(--accent)); margin: 0 2px}
.depo-clock .dc-label{
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* Witness plate (bottom-left) */
.depo-plate{
  position: absolute; left: 36px; bottom: 120px; z-index: 3;
  max-width: min(420px, calc(100% - 380px));
  display: grid; grid-template-columns: 68px 1fr; gap: 16px; align-items: end;
  color: #fff; max-width: 520px;
}
.dp-roman{font-family: var(--serif);  font-size: 68px; line-height: .9; color: var(--accent)}
.dp-kicker{
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); margin-bottom: 2px;
}
.depo-plate h3{
  font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.05; margin: 0;
  color: #fff;
}
.depo-plate h3 em{color: var(--accent)}
.dp-cred{
  display: block; margin-top: 4px;
  font-family: var(--serif);  font-size: 13px; color: rgba(255,255,255,0.7);}

/* Controls (bottom-center) */
.depo-controls{
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; z-index: 4;
  display: flex; gap: 14px;
}
.ctrl-primary.dark{
  background: var(--accent); color: var(--paper); padding: 16px 28px;
}
.ctrl-primary.dark:hover:not(:disabled){background: var(--accent)}
.ctrl-primary.dark .cp-dot{background: var(--s-accent)}
.ctrl-secondary.light{
  background: transparent; color: var(--ink); border-color: rgba(231,235,242,0.55); padding: 16px 22px;
}
.ctrl-secondary.light:hover:not(:disabled){background: rgba(231,235,242,0.08); color: #fff}

/* Status chip */
.depo-status{
  position: absolute; top: 28px; right: 28px; z-index: 3;
  transform: translateY(76px);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.15);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.depo-status .dot{
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); display: inline-block;
}
.depo-status .dot.live{background: var(--accent); box-shadow: 0 0 0 4px rgba(126,155,200,0.28); animation: pulse 1.8s ease-in-out infinite}

/* Coaching strip (right edge, below clock) */
.depo-coach{
  position: absolute; right: 28px; bottom: 40px; z-index: 3;
  max-width: 300px; padding: 18px 20px;
  background: rgba(10,7,6,0.7); border: 1px solid rgba(126,155,200,0.35); color: var(--ink);
  backdrop-filter: blur(6px);
}
.depo-coach h4{
  font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.15; margin: 8px 0 8px;
  color: #fff;
}
.depo-coach p{
  font-family: var(--serif);  font-size: 13.5px; line-height: 1.5;
  color: rgba(231,235,242,0.85); margin: 0;}

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks-panel{
  position: fixed; right: 20px; bottom: 20px; width: 320px; z-index: 200;
  background: var(--s-ink); color: var(--s-paper); border: 1px solid #000;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.tweaks-head{
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid rgba(231,235,242,0.15);
}
.tweaks-head .rail-kicker{color: var(--accent)}
.tweaks-close{
  background: transparent; border: 0; color: var(--s-paper); cursor: pointer; font-size: 22px;
  width: 28px; height: 28px; line-height: 1;
}
.tweaks-body{padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 16px}
.tweak-row label{
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(231,235,242,0.6);
}
.seg{display: flex; flex-wrap: wrap; gap: 6px}
.seg.vertical{flex-direction: column}
.seg button{
  background: transparent; border: 1px solid rgba(231,235,242,0.25); color: var(--s-paper);
  padding: 8px 12px; cursor: pointer; text-align: left;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  transition: all .2s;
}
.seg button:hover{border-color: var(--accent); color: var(--accent)}
.seg button.on{background: var(--accent); color: var(--s-ink); border-color: var(--accent)}

/* Color swatch segments (accent / room tone) */
.seg.color-seg{flex-wrap: wrap; gap: 8px}
.seg.color-seg button{
  padding: 4px; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(231,235,242,0.25);
  background: transparent;
}
.seg.color-seg button:hover{border-color: rgba(231,235,242,0.6)}
.seg.color-seg button.on{
  border-color: var(--accent); background: transparent;
  box-shadow: 0 0 0 2px rgba(126,155,200,0.35);
}
.seg.color-seg .sw{
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.2);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px){
  .docket{grid-template-columns: 280px 1fr 280px; gap: 20px}
  .cs-inner{grid-template-columns: 1fr 1.2fr 1.5fr; gap: 24px}
  .cs-inner .cs-right{display: none}
  .depo-clock{top: 64px}
  .depo-clock .dc-m, .depo-clock .dc-s, .depo-clock .dc-colon{font-size: 60px}
  .depo-plate{max-width: min(360px, calc(100% - 340px))}
  .depo-plate h3{font-size: 26px}
  .depo-coach{max-width: 260px}
}
@media (max-width: 1024px){
  .docket{grid-template-columns: 1fr; gap: 24px}
  .docket-left, .docket-right{position: static; max-height: none}
  /* Stack deposition room: left column, then right column flows normally */
  .session-b{grid-template-columns: 1fr}
  .depo-left{border-right: 0; border-bottom: 1px solid var(--depo-panel-rule, rgba(231,235,242,0.12))}
  .depo-right{display: flex; flex-direction: column; min-height: auto}
  .depo-video{position: static; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover}
  .depo-scrim{display: none}
  .depo-stamp-tl, .depo-stamp-tr, .depo-clock, .depo-plate, .depo-controls, .depo-coach, .depo-status{
    position: static; margin: 0;
  }
  .depo-stamp-tl, .depo-stamp-tr{
    display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;
    padding: 14px 20px; background: var(--depo-panel, var(--paper-2));
    border-bottom: 1px solid var(--depo-panel-rule, rgba(231,235,242,0.12));
  }
  .depo-stamp-tr{display: none}
  .depo-clock{
    text-align: left; padding: 20px 20px 12px;
    background: var(--depo-panel, var(--paper-2));
  }
  .depo-clock .dc-m, .depo-clock .dc-s, .depo-clock .dc-colon{font-size: 56px}
  .depo-plate{
    max-width: none; padding: 20px 20px; grid-template-columns: 60px 1fr;
    background: var(--depo-panel, var(--paper-2));
  }
  .depo-plate h3{font-size: 26px}
  .depo-coach{
    max-width: none; margin: 0 20px 20px; padding: 18px 20px;
  }
  .depo-controls{padding: 0 20px 16px; justify-content: flex-start}
  .depo-status{padding: 12px 20px 24px}
}
@media (max-width: 720px){
  .session-b{grid-template-columns: 1fr}
  .depo-left{border-right: 0; border-bottom: 1px solid rgba(231,235,242,0.12)}
  .cs-inner{grid-template-columns: 1fr; gap: 12px; padding: 14px 20px}
  .ctrl-bar{grid-template-columns: 1fr; gap: 10px}
  .ctrl-clock{justify-self: start; padding-left: 0; border-left: 0; margin-left: 0; padding-top: 12px; border-top: 1px solid var(--s-rule); width: 100%}
  .bench-nameplate h3{font-size: 24px}
  .depo-coach{display: none}
}


/* ==================================================================
   THE POST-SESSION REPORT
   Shared by every test-drive room: the wait, the memo, the seat swap.
   The markup that uses these is built by /test-drive/report.js.
   ================================================================== */
/* ---------- The report ----------
   Unlike the voir dire reveal, this cannot be computed here: the
   backend reads the transcript back and writes it, which takes about
   eighty-five seconds. So the wait is designed rather than spinnered,
   and the one question worth asking of somebody who is already
   waiting lives inside it. The report is never gated on answering. */
.report{display:none;padding:56px 0 12px;border-top:1px solid var(--s-rule);margin-top:40px}
.report.is-on{display:block}
.report-inner{max-width:1180px;margin:0 auto;padding:0 24px}
.report-head{max-width:820px;margin-bottom:36px}
.report-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,5vw,52px);line-height:1.06;letter-spacing:-0.02em;
  color:var(--s-ink);margin:10px 0 0;
}
.report-head h2 em{color:var(--s-accent);font-style:italic}
/* Headlines come back anywhere from one short line to a full paragraph.
   Display type at 52px turns 180 characters into five lines and most of
   a screen, so the scale steps down by length. */
.report-head h2[data-len="medium"]{font-size:clamp(27px,3.6vw,38px);line-height:1.16}
.report-head h2[data-len="long"]{font-size:clamp(23px,2.8vw,30px);line-height:1.3;letter-spacing:-0.01em}
.report-sub{font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--s-ink-2);margin:12px 0 0}
/* Sets the register before the first line of the memo does it for
   us. Without this the third person reads as a mistake. */
.report-frame{font-family:var(--serif);font-size:15.5px;line-height:1.62;color:var(--s-ink-2);
  margin:14px 0 0;max-width:700px;padding-left:14px;border-left:2px solid var(--s-rule)}

/* The wait phase used to carry a ticking step list narrating the report
   being assembled. It went out with the on-screen report, along with the
   rpPulse keyframe that only it used. */
.rp-capture{max-width:520px;padding:24px 26px;border:1px solid var(--s-rule);border-left:2px solid var(--s-accent)}
.rp-capture h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;margin:0 0 6px;color:var(--s-ink)}
.rp-capture h3 em{color:var(--s-accent);font-style:italic}
.rp-capture p{font-family:var(--serif);font-size:15px;line-height:1.6;color:var(--s-ink-2);margin:0 0 16px}
.rp-form{display:flex;gap:8px;flex-wrap:wrap}
.rp-form input{
  flex:1 1 240px;min-width:0;padding:11px 13px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.04em;
  color:var(--s-ink);background:transparent;border:1px solid var(--s-rule);
}
.rp-form input:focus{outline:none;border-color:var(--s-accent)}
.rp-form input:disabled{opacity:.5}
.rp-form button{
  padding:11px 18px;cursor:pointer;
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--s-paper);background:var(--s-ink);border:1px solid var(--s-ink);
}
.rp-form button:disabled{opacity:.45;cursor:default}
.rp-note{font-family:var(--mono);font-size:8.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--s-ink-2);opacity:.8;margin:12px 0 0;line-height:1.7}
.rp-note.is-bad{color:#8c4a4a;opacity:1}

/* Phone. Three things go wrong here and the first is the one that counts:
   iOS Safari zooms the page when a focused input is under 16px, and this
   field is the only thing the screen asks for, so tapping it threw the
   layout every time. The others are ordinary. A 40px input and a 37px
   button are both under the 44px touch minimum, and the button wrapped to
   a ragged 137px under a full-width field instead of stacking with it.

   Note the flex override. The base rule is flex:1 1 240px, and once the
   form turns into a column that 240px is a basis along the vertical axis,
   which makes the input 240px tall. Covers both forms, the one in the
   wait and the one on the certificate. */
@media(max-width:640px){
  .report-inner{padding:0 20px}
  .report-sub{font-size:15px;line-height:1.6}
  .rp-capture{padding:20px 18px}
  .rp-form{flex-direction:column;gap:10px}
  .rp-form input{flex:0 0 auto;width:100%;font-size:16px;min-height:44px}
  .rp-form button{width:100%;min-height:44px}
}

.rp-sharpest{margin-top:34px;padding:26px 28px;border:1px solid var(--s-rule);
  border-left:2px solid var(--s-accent);max-width:900px}
.rp-sharpest .rp-k{font-family:var(--mono);font-size:9px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--s-ink-2);display:block;margin-bottom:6px}
.rp-sharpest .rp-q{font-family:var(--serif);font-size:20px;line-height:1.4;color:var(--s-ink);margin:0 0 18px}
.rp-sharpest .rp-a{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5;
  color:var(--s-ink-2);margin:0 0 18px}
.rp-sharpest .rp-why{font-family:var(--serif);font-size:15.5px;line-height:1.6;color:var(--s-ink);margin:0}
/* ---------- the offer ----------
   With the preview out, the address is the only thing this demo asks
   for, so this is the screen rather than a footnote under a report.
   Set as a certificate of service: counsel is naming where to accept
   delivery of something already theirs, not filling in a form. */
.rp-gate{margin-top:8px;max-width:820px}
.rp-offer{
  padding:34px 36px;border:1px solid var(--s-rule);
  border-left:2px solid var(--s-accent);background:var(--s-paper);
}
.rp-offer-k{
  display:block;margin-bottom:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.26em;text-transform:uppercase;
  color:var(--s-accent);
}
/* Large enough to hold the screen on its own. The seat swap below is
   pulled down to match, because two headlines competing at a single
   conversion point is how the cheaper one wins. */
.rp-offer h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-0.02em;
  color:var(--s-ink);margin:0 0 16px;max-width:16ch;
}
.rp-offer h2 em{color:var(--s-accent);font-style:italic}
.rp-offer-body{
  font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--s-ink-2);
  margin:0 0 26px;max-width:56ch;
}
.rp-offer-body:empty{display:none}
/* The service line. The field under it is the blank on the certificate. */
.rp-serve-k{
  display:block;margin-bottom:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--s-ink-2);
}
.rp-offer .rp-form input{min-width:280px}
.rp-offer .rp-note{max-width:56ch}
/* ---------- The number ----------
   All that survives of the scorecard on this page. The rest is
   sealed and mailed as a PDF. */
.rp-verdictline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.rp-score{display:flex;align-items:baseline;gap:3px;font-family:var(--serif);color:var(--s-ink)}
.rp-score b{font-size:46px;font-weight:400;line-height:1;color:var(--band, var(--s-ink))}
.rp-score i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--s-ink-2)}

/* The number is the first thing read, so it says which kind of day it was
   before the verdict sentence gets a chance to. */
.rp-verdictline.is-poor{--band:#c96b6b}
.rp-verdictline.is-fair{--band:#c9a961}
.rp-verdictline.is-strong{--band:#7fae7f}.rp-verdict{font-family:var(--serif);font-size:16.5px;line-height:1.55;color:var(--s-ink-2);
  margin:16px 0 0;max-width:820px}

/* ---------- The seat swap ----------
   Built from existing tokens only. The headline is the largest type
   on the page on purpose: it is the moment the demo stops being one
   exercise and becomes a set. */
.swap{margin-top:44px;padding-top:36px;border-top:1px solid var(--s-rule)}
.swap-stamp{
  font-family:var(--mono);font-size:9px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--s-ink-2);margin:10px 0 0;
}
.swap-setup{
  font-family:var(--serif);font-size:clamp(19px,2vw,24px);line-height:1.4;
  color:var(--s-ink-2);margin:30px 0 6px;max-width:900px;
}
/* Was clamp(46px,7vw,104px). With the report gone from between them,
   the next room was outrunning the only ask on the page four to one on
   type size, and two peer choices at one conversion point means the
   cheaper one wins. Still the second largest thing here, just second. */
.swap-turn{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4vw,48px);line-height:1.0;letter-spacing:-0.02em;
  color:var(--s-ink);margin:0;max-width:18ch;
}
.swap-turn em{color:var(--s-accent);font-style:italic}

.swap-cta{
  display:inline-flex;align-items:center;gap:28px;margin-top:38px;
  padding:22px 34px;text-decoration:none;
  background:var(--s-ink);border:1px solid var(--s-ink);
  transition:background .25s ease,border-color .25s ease,gap .25s ease;
}
.swap-cta:hover{background:var(--s-accent);border-color:var(--s-accent);gap:40px}
.swap-cta .sc-seat{
  font-family:var(--mono);font-size:9px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--s-paper);opacity:.7;display:block;margin-bottom:6px;
}
.swap-cta .sc-label{font-family:var(--serif);font-size:26px;line-height:1;color:var(--s-paper)}
.swap-cta .sc-arrow{font-family:var(--serif);font-size:26px;color:var(--s-paper);line-height:1}

/* The report and the full set are still reachable, just no longer
   the loudest thing on the screen. */
.swap-links{display:flex;flex-wrap:wrap;gap:26px;margin:30px 0 0}
.swap-links a{
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--s-ink-2);text-decoration:none;border-bottom:1px solid var(--s-rule);padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease;
}
.swap-links a:hover{color:var(--s-accent);border-color:var(--s-accent)}
@media(max-width:640px){
  .swap-cta{gap:20px;padding:18px 22px}
  .swap-cta:hover{gap:26px}
}


/* Sits between the section kicker and the frame, so the room says what
   is about to happen before the face does. */
.room-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3.2vw,44px);line-height:1.06;letter-spacing:-0.02em;
  color:var(--s-ink);margin:0 0 4px;max-width:20ch;
}
.room-title em{color:var(--s-accent);font-style:italic}

/* ==================================================================
   LIVE COACHING
   Shared by every room. The markup is built by /test-drive/room.js.
   ================================================================== */
/* ---------- Live coaching ----------
   The static tip is the resting state; this is the same panel with a
   question box on it. Streams, and that is the point, the first
   words land in about a second against ninety for the report. */
.coach-live{margin-top:18px;padding-top:16px;border-top:1px solid var(--s-rule)}
.coach-form{display:flex;gap:6px}
.coach-form input{flex:1 1 auto;min-width:0;padding:9px 11px;
  font-family:var(--mono);font-size:11px;color:var(--s-ink);background:transparent;
  border:1px solid var(--s-rule)}
.coach-form input:focus{outline:none;border-color:var(--s-accent)}
.coach-form button{padding:9px 13px;cursor:pointer;font-family:var(--mono);font-size:8.5px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--s-paper);background:var(--s-ink);
  border:1px solid var(--s-ink)}
.coach-form button:disabled{opacity:.45;cursor:default}
.coach-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.coach-chips button{cursor:pointer;padding:4px 8px;background:transparent;
  font-family:var(--mono);font-size:8px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--s-ink-2);border:1px solid var(--s-rule)}
.coach-chips button:hover{color:var(--s-ink);border-color:var(--s-accent)}
/* "What do I say?" leads in every room. A visitor who is simply lost
   shouldn't have to compose a sentence to get help, so it takes the whole
   first row and reads as the way in rather than as one option of five. */
.coach-chips button.chip-open{
  flex:1 0 100%;padding:6px 9px;margin-bottom:2px;text-align:left;
  color:var(--s-accent);border-color:var(--s-accent);letter-spacing:0.18em;
}
.coach-chips button.chip-open:hover{background:rgba(126,155,200,0.1);color:var(--s-ink)}
.coach-out{margin-top:14px}
.coach-say{font-family:var(--serif);font-size:15.5px;line-height:1.55;color:var(--s-ink);
  margin:0;padding-left:12px;border-left:2px solid var(--s-accent);white-space:pre-wrap}
.coach-why{font-family:var(--serif);font-size:13.5px;line-height:1.6;color:var(--s-ink-2);
  margin:10px 0 0;white-space:pre-wrap}
.coach-out.is-bad .coach-say{border-left-color:#8c4a4a;color:#8c4a4a}
.coach-cursor::after{content:"▍";color:var(--s-accent);animation:cBlink 1s step-end infinite}
@keyframes cBlink{50%{opacity:0}}

/* Phone. The panel had 250px of a 375px screen to work in, because the
   nesting spent 124px on padding before any content: .docket kept its
   desktop 40px gutter (the 1280 and 1024 queries only ever restated the
   columns and the gap) and .coach-card added 22px inside that. Both come
   down here, which hands the panel 85px back.

   Then the same three faults as the report form, and they matter more in
   this one: it is used mid-session with a live video running. The input
   was 11px, so focusing it zoomed the page on iOS at the worst possible
   moment. Input and button were 34px against a 44px touch minimum.

   The chips are the real interaction, tap a question rather than type
   one, and they were 20px tall. At 44px five of them cost about 130px
   more height than before. That is the deliberate trade: a mis-tap
   during a live session is worse than a longer panel. */
@media(max-width:640px){
  /* The two control buttons sat at 42 and 44px because .ctrl-primary
     has border:0 and .ctrl-secondary has a 1px border, on identical
     padding and type. The primary action was both the smaller of the
     pair and the one under the 44px minimum. Two pixels, no reflow.
     rail-back is the way out of a room and sat at 28px; it lives in
     the scrolling rail, so height there costs nothing sticky. */
  .ctrl-primary{min-height:44px}
  .rail-back{min-height:44px;display:flex;align-items:center}
  .docket{padding-left:20px;padding-right:20px}
  .coach-card, .progress-card{padding-left:16px;padding-right:16px}
  .coach-form input{font-size:16px;min-height:44px}
  .coach-form button{min-height:44px;padding-left:16px;padding-right:16px}
  .coach-chips button{min-height:44px;font-size:9.5px;padding:10px 12px}
  .coach-chips button.chip-open{padding:10px 12px}
}

/* Name field. Counsel uses no name when it is absent, which is right, 
   better than the invented one it used to reach for. */
.ctrl-name{display:flex;flex-direction:column;gap:3px;margin-right:4px}
.ctrl-name span{font-family:var(--mono);font-size:8px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--s-ink-2)}
.ctrl-name input{width:150px;padding:7px 9px;font-family:var(--mono);font-size:11px;
  color:var(--s-ink);background:transparent;border:1px solid var(--s-rule)}
.ctrl-name input:focus{outline:none;border-color:var(--s-accent)}
.ctrl-name input:disabled{opacity:.5}
/* Phone. Sits here rather than in the 640px block further up, because
   .ctrl-name input is declared above at the same specificity and a copy
   higher in the file loses on source order: min-height took, width and
   font-size silently did not. 11px type is the one that matters, since
   iOS zooms the page when a field under 16px is focused, and this one is
   focused just before being sworn. The fixed 150px also left most of a
   292px row unused. */
@media(max-width:640px){
  .ctrl-name input{width:100%;font-size:16px;min-height:44px}
}

/* The record rows no longer expand: ws/room serves the six sworn
   lines but carries no per-line note, so there is nothing behind a
   chevron. Same row layout, minus the affordance. */
.topic-btn.is-static{cursor:default}
.topic-btn.is-static:hover{background:transparent}

/* Counsel pick, before the room goes live. Three across, same card
   treatment as /stand and /judge. */
.td-counsel{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:1400px){.td-counsel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.td-counsel{grid-template-columns:1fr}}
.pick-error{
  font-family:var(--serif);font-size:17px;line-height:1.6;color:#c96b6b;
  padding:26px 0;margin:0;
}

/* ==================================================================
   THE RETURN FEED
   Shared. Markup is built by /test-drive/room.js.
   ================================================================== */
/* A video call shows you your own face. These rooms do the same, so
   you see yourself the way the person across from you does. Video
   only: the avatar SDK owns the microphone, and taking audio here as
   well can pull the device out from under it. */
.selfview{
  position:absolute;right:14px;bottom:14px;z-index:6;
  width:26%;min-width:132px;max-width:236px;aspect-ratio:4/3;
  border:1px solid rgba(231,235,242,0.28);
  background:#05080f;overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,0.45);
}
.selfview video{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Mirror it, people expect a mirror when they see themselves. */
  transform:scaleX(-1);
  opacity:0;transition:opacity .4s ease;
}
.selfview.is-on video{opacity:1}
.selfview .sv-label{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  font-family:var(--mono);font-size:8.5px;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(231,235,242,0.9);background:linear-gradient(to top, rgba(5,8,15,0.85), transparent);
  padding:12px 8px 6px;text-align:center;
}
.selfview .sv-placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  /* Top padding clears the 44px toggle. This centres in the whole tile,
     and on a phone the tile is about 114x86, so "Camera off" was
     landing under the button plate: the states where the placeholder
     is the only thing on screen were the ones it obscured. */
  text-align:center;padding:54px 10px 10px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(231,235,242,0.5);line-height:1.6;
}
.selfview.is-on .sv-placeholder{display:none}
.selfview.is-denied{border-color:rgba(201,107,107,0.5)}
.selfview.is-denied .sv-placeholder{color:rgba(201,107,107,0.85)}
/* Camera toggle. Top-right of the tile, which is the one corner the label
   and the placeholder both leave alone. 44px square everywhere rather than
   scaled down for desktop, because it overlays a video and a near-miss
   here turns the camera off by accident. */
.selfview .sv-toggle{
  position:absolute;top:0;right:0;z-index:3;
  width:44px;height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,8,15,0.55);border:0;cursor:pointer;
  color:rgba(231,235,242,0.9);transition:background .2s ease,color .2s ease;
}
.selfview .sv-toggle:hover:not(:disabled){background:rgba(5,8,15,0.8);color:#fff}
.selfview .sv-toggle:focus-visible{outline:2px solid var(--s-accent);outline-offset:-2px}
.selfview .sv-toggle:disabled{opacity:.35;cursor:not-allowed}
.selfview .sv-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
/* Off reads red rather than merely dimmer, so the state is legible at a
   glance on a small tile. */
.selfview .sv-toggle.is-off{color:#c96b6b}
.selfview .sv-toggle .sv-slash{stroke:currentColor}
@media(max-width:720px){
  .selfview{width:34%;min-width:104px;right:10px;bottom:10px}
}

/* ---- the preview ------------------------------------------------------
   What comes back instead of the scorecard: the number, how it landed,
   the one exchange shown whole, and the category held back. */
.rp-outcome{margin-top:30px;padding:22px 26px;border:1px solid var(--s-rule);
  border-left:2px solid var(--s-accent);max-width:820px}
.rp-outcome .rp-k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--s-ink-2);margin-bottom:10px}
.rp-outcome-line{font-family:var(--serif);font-size:26px;line-height:1.2;color:var(--s-ink);margin:0}
.rp-outcome-line b{font-weight:400}
.rp-outcome-line span{color:var(--s-ink-2)}
.rp-outcome-sum{font-family:var(--serif);font-size:15.5px;line-height:1.6;
  color:var(--s-ink-2);margin:10px 0 0}
.rp-outcome-sum:empty{display:none}

.rp-payoff-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin-bottom:10px}
.rp-payoff-at{font-family:var(--mono);font-size:9px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--s-ink-2)}
.rp-payoff-top .rp-k{margin:0}

/* The hook. It sits directly on the form because the unexplained number
   is what earns the address, not the list of what is missing. */
.rp-sting{margin-top:34px;padding:26px 28px;border:1px solid var(--s-accent);
  background:rgba(126,155,200,0.05);max-width:820px}
.rp-sting .rp-k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--s-accent);margin-bottom:12px}
.rp-sting-line{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.rp-sting-name{font-family:var(--serif);font-size:30px;line-height:1.1;color:var(--s-ink)}
.rp-sting-score{font-family:var(--serif);font-size:46px;line-height:1;
  color:var(--band, var(--s-ink))}
.rp-sting-score.is-poor{--band:#8c4a4a}
.rp-sting-score.is-fair{--band:#8a7433}
.rp-sting-score.is-strong{--band:#4d6b4d}
.rp-sting-note{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.55;
  color:var(--s-ink-2);margin:14px 0 0}
.rp-sting.is-bare .rp-k,.rp-sting.is-bare .rp-sting-line,.rp-sting.is-bare .rp-sting-note{display:none}

.rp-withheld{list-style:none;margin:18px 0 0;padding:18px 0 0;
  border-top:1px solid var(--s-rule);display:flex;flex-wrap:wrap;gap:8px 28px}
.rp-withheld:empty{display:none}
.rp-withheld li{font-family:var(--mono);font-size:9.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--s-ink-2)}
.rp-withheld b{font-family:var(--serif);font-size:17px;letter-spacing:0;
  color:var(--s-ink);margin-right:6px}

@media(max-width:720px){
  .rp-offer{padding:24px 20px}
  .rp-offer .rp-form input{min-width:0}
  .rp-sting{padding:22px 20px}
  .rp-sting-name{font-size:24px}
  .rp-sting-score{font-size:38px}
  .rp-outcome{padding:18px 20px}
  .rp-outcome-line{font-size:21px}
}