/* =============================================================================
   video-extra.css - the clip component for the product-video cluster.
   Loaded alongside house-v2-d.css. Everything else on these pages uses house
   components. In Webflow this file is a hosted asset, linked like the theme.
   ========================================================================== */

/* ---- clip frames -------------------------------------------------------- */
.clip{margin:0;position:relative;display:flex;flex-direction:column}
.clip video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
  border-radius:10px;background:#101110}
/* caption grows so the mono meta line sits on one baseline across a row */
.clip figcaption{margin-top:.6rem;font-size:.8125rem;line-height:1.45;
  flex:1;display:flex;flex-direction:column}
.clip .ct{display:block;font-family:var(--display);font-weight:700;font-size:.8125rem;
  letter-spacing:.01em;margin-bottom:.15rem}
.clip .cm{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;
  margin-top:auto;padding-top:.3rem;font-variant-numeric:tabular-nums}
.clip .ct{color:var(--on-light)}
.clip figcaption{color:var(--on-light-mute)}
.clip .cm{color:var(--on-light-faint)}
.band--dark .clip .ct,.hero .clip .ct{color:#fff}
.band--dark .clip figcaption,.hero .clip figcaption{color:var(--on-dark-mute)}
.band--dark .clip .cm,.hero .clip .cm{color:var(--on-dark-faint)}

/* paused state: a dot in the corner, so the control is discoverable but quiet */
.clip button.tog{position:absolute;right:.5rem;top:.5rem;width:30px;height:30px;
  border-radius:50%;border:1px solid rgba(255,255,255,.34);background:rgba(10,11,10,.5);
  color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;
  backdrop-filter:blur(3px);opacity:0;transition:opacity .18s}
.clip:hover button.tog,.clip button.tog:focus-visible,.clip.is-paused button.tog{opacity:1}
/* the icon is drawn here rather than as an inline SVG per clip: 307 characters a
   clip, fifteen clips, against a 50,000-character embed */
.clip button.tog::before{content:"";width:10px;height:12px;
  background:linear-gradient(90deg,#fff 0 30%,transparent 30% 70%,#fff 70%)}
.clip.is-paused button.tog::before{background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}

/* hero strip: four formats, small */
.clipwall{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  max-width:60rem;margin:2.5rem auto 0;text-align:left}
@media (max-width:52rem){.clipwall{grid-template-columns:repeat(2,1fr);max-width:30rem}}
.clipwall--1{grid-template-columns:1fr;max-width:15rem}
.clipwall--2{grid-template-columns:repeat(2,1fr);max-width:30rem}
.clipwall--3{grid-template-columns:repeat(3,1fr);max-width:45rem}
/* the modifiers sit after the responsive rule above and match it for specificity, so
   --3 kept three columns on a phone and rendered each 9:16 clip about 100px wide. */
@media (max-width:52rem){.clipwall--3{grid-template-columns:repeat(2,1fr);max-width:30rem}}

/* ---- the measured pair (see PATTERNS.md, "Measured pair") --------------- */
.vpair{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;max-width:44rem;
  margin:0 auto;text-align:left}
@media (max-width:40rem){.vpair{grid-template-columns:1fr;max-width:20rem}}
.deltas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));
  gap:.75rem;margin-top:1.5rem}
.delta{border:1px solid var(--panel-line);border-radius:8px;padding:.8rem .9rem}
.delta .dn{display:block;font-family:var(--display);font-weight:800;font-size:1.375rem;
  color:#fff;line-height:1.1;font-variant-numeric:tabular-nums}
.delta .dk{display:block;font-size:.75rem;color:var(--on-dark-mute);margin-top:.3rem;line-height:1.35}
.delta--tight{border-color:var(--neon-deep)}
.delta--tight .dn{color:var(--neon)}
/* compact form, on a light band: the hub carries this, the showcase the full panel */
.deltas--light .delta{border-color:var(--line-light)}
.deltas--light .delta .dn{color:var(--on-light)}
.deltas--light .delta .dk{color:var(--on-light-mute)}
.deltas--light .delta--tight{border-color:var(--neon-deep)}
.deltas--light .delta--tight .dn{color:#5d7a0b}

/* ---- broken/locked pairs ------------------------------------------------ */
/* The broken take plays. The locked take is stacked over it at opacity 0 and fades
   in on hover, keyboard focus or a tap (is-peek), with the class flag swapping to
   the fix. Both videos share the .clip video box, so the fade is register-perfect. */
.clip.swap{cursor:pointer}
.clip.swap video.v-good{position:absolute;top:0;left:0;width:100%;opacity:0;
  transition:opacity .16s;pointer-events:none}
.clip.swap:hover video.v-good,.clip.swap:focus-visible video.v-good,
.clip.swap.is-peek video.v-good{opacity:1}
.clip.swap .flag{position:absolute;left:.5rem;top:.5rem;z-index:1;font-family:var(--mono);
  font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .45rem;
  border-radius:4px;background:rgba(10,11,10,.74);color:#fff;border:1px solid var(--bad);
  transition:opacity .16s;pointer-events:none}
.clip.swap .flag--good{border-color:var(--neon);color:var(--neon);opacity:0}
.clip.swap:hover .flag--bad,.clip.swap:focus-visible .flag--bad,.clip.swap.is-peek .flag--bad{opacity:0}
.clip.swap:hover .flag--good,.clip.swap:focus-visible .flag--good,.clip.swap.is-peek .flag--good{opacity:1}
.clip.swap:focus-visible{outline:2px solid var(--neon-deep);outline-offset:3px;border-radius:12px}
.clip button.tog{z-index:2}
@media (prefers-reduced-motion:reduce){.clip.swap video,.clip.swap .flag{transition:none}}

/* hub: the pair sits in a fixed column beside the two prompt panes */
.lockrow{display:grid;gap:1.1rem;margin-top:1.1rem}
/* stacked on a phone, the pair should read as a tile, not a full-width poster */
@media (max-width:52rem){.lockrow .clip{max-width:13rem}}
@media (min-width:52rem){
  .lockrow{grid-template-columns:11rem 1fr;align-items:start}
  .lockrow--solo{grid-template-columns:1fr}
  .lockrow .pair{margin-top:0}
}
.faq summary .code{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;
  color:var(--on-light-faint);margin-right:.6rem}
.faq summary .tally{font-family:var(--mono);font-size:.6875rem;letter-spacing:.03em;
  color:var(--on-light-faint);margin-left:.75rem;font-variant-numeric:tabular-nums}
@media (max-width:40rem){.faq summary .tally{display:none}}

/* ---- the wall: one tile per pair, on the house .wallgrid ----------------- */
.wtile{background:var(--card);border:1px solid var(--line-light);border-radius:var(--r);
  padding:.6rem .6rem .8rem;display:flex;flex-direction:column;gap:.55rem}
.wtile[hidden]{display:none}
.wtile .clip video{border-radius:calc(var(--r) - 6px)}
.wtile .fail{margin:0;font-size:.875rem;line-height:1.45;color:var(--on-light-mute)}
.wtile .fail b{color:#a6402c;font-family:var(--display);font-weight:700}
.wtile .wmeta{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;color:var(--on-light-faint)}
.wtile .open{font-family:var(--display);font-weight:700;font-size:.75rem;border:0;background:transparent;
  color:var(--on-light);cursor:pointer;padding:.3rem 0;min-height:44px;white-space:nowrap;
  text-decoration:underline;text-decoration-color:var(--neon-deep);text-underline-offset:.2em}

/* the tracker table overshoots its wrapper by a few pixels on a phone, which shows as a
   scroll nub under a table that has nothing to scroll to */
@media (max-width:40rem){
  .tablewrap table{width:100%;table-layout:fixed}
  .tablewrap th,.tablewrap td{overflow-wrap:anywhere}
}

/* the eighth tile: what would not break. No video, so no decode cost, and it closes the
   grid that seven pairs leave open on a four-column row. */
.wtile--held{background:transparent;border-style:dashed;justify-content:center}
.wtile--held .held-in{display:flex;flex-direction:column;gap:.5rem;padding:.4rem .3rem}
.wtile--held .held-n{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;
  color:var(--on-light);text-transform:capitalize}
.wtile--held p{margin:0;font-size:.875rem;line-height:1.45;color:var(--on-light-mute)}
.wtile--held .held-h b{color:var(--on-light);font-family:var(--display);font-weight:700}
.wtile--held .held-go a{color:var(--on-light);text-decoration:underline;
  text-decoration-color:var(--neon-deep);text-underline-offset:.2em;
  display:inline-block;min-height:44px;line-height:44px}

/* the case: reference, broken, locked, both prompts, the receipt */
dialog.case{border:0;padding:0;background:transparent;width:min(64rem,calc(100vw - 2rem));
  max-height:calc(100vh - 2rem)}
dialog.case::backdrop{background:rgba(10,11,10,.72);backdrop-filter:blur(2px)}
.case-in{background:var(--ink);color:var(--on-dark);border-radius:var(--r);position:relative;
  padding:clamp(1.1rem,3vw,1.8rem)}
.case-in .eyebrow{color:var(--neon)}
.case-x{position:absolute;right:.8rem;top:.7rem;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-dark);background:transparent;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer}
.case-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:.9rem}
.case-3 figure{margin:0}
.case-3 img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:#101110}
.case-3 video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:8px;background:#101110}
.case-3 figcaption{font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;color:var(--on-dark-mute);margin-top:.45rem}
.case-3 .c-bad{color:var(--bad)}
.case-3 .c-good{color:var(--neon)}
@media (max-width:44rem){
  .case-3{grid-template-columns:1fr 1fr}
  .case-3 figure:first-child{grid-column:1/-1;max-width:12rem;margin:0 auto}
}
.case-in .pane-p{background:var(--surface-3);border-color:var(--line-dark)}
.case-in .pane-p q,.case-in .pane-p .got b{color:var(--on-dark)}
.case-in .pane-p .got{color:var(--on-dark-mute);border-color:var(--line-dark)}
.case-in .pane-p mark{background:#5d7a0b;color:#fff}
.case-in .receipt{margin-top:1rem;border:1px solid var(--panel-line);border-radius:8px;padding:.9rem 1rem}
.case-in .fine{font-size:.8125rem;color:var(--on-dark-faint);margin:.9rem 0}
/* the hub's measured receipt sits in a dark .figure on a light band */
.figure .receipt{padding:.2rem 0 0}

/* ---- prompt pairs ------------------------------------------------------- */
.pair{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.1rem}
@media (min-width:52rem){.pair{grid-template-columns:1fr 1fr}}
.pane-p{border:1px solid var(--line-light);border-radius:10px;padding:1.1rem 1.2rem;background:var(--page-alt)}
.pane-p--bad{border-left:3px solid var(--bad)}
.pane-p--good{border-left:3px solid var(--neon-deep);background:var(--neon-tint)}
.pane-p .lab{display:block;font-family:var(--display);font-weight:700;font-size:.7rem;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:.7rem}
.pane-p--bad .lab{color:#a6402c}
.pane-p--good .lab{color:#5d7a0b}
.pane-p q{display:block;quotes:none;font-family:var(--mono);font-size:.8125rem;line-height:1.6;
  color:var(--on-light);white-space:pre-wrap}
.pane-p .got{margin-top:.85rem;padding-top:.75rem;border-top:1px dashed var(--line-light);
  font-size:.875rem;color:var(--on-light-mute)}
.pane-p .got b{color:var(--on-light);font-family:var(--display);font-weight:700}
.pane-p mark{background:#dff29a;color:var(--on-light);padding:0 .15em;border-radius:2px}
.pane-p--bad q{color:var(--on-light-mute)}

/* ---- format beat list --------------------------------------------------- */
.beats{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.4rem}
.beats li{display:grid;grid-template-columns:3.4rem 1fr;gap:.6rem;font-size:.9063rem;color:var(--on-light-mute)}
.beats .t{font-family:var(--mono);font-size:.8125rem;color:var(--on-light-faint);font-variant-numeric:tabular-nums}
.tile .risk{display:block;margin-top:.7rem;padding-top:.7rem;border-top:1px dashed var(--line-light);
  font-size:.875rem;color:var(--on-light-faint)}
.tile .risk b{display:inline;color:#a6402c;font-family:var(--body);font-weight:600;font-size:.875rem}

/* ---- data tables (funnel map, program shape) ---------------------------- */
.fun{width:100%;border-collapse:collapse;font-size:.9063rem}
.fun th,.fun td{text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--line-light);vertical-align:top}
.fun thead th{font-family:var(--display);font-weight:700;font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-light-faint)}
.fun tbody th{font-family:var(--display);font-weight:700;color:var(--on-light);white-space:nowrap}
.fun td{color:var(--on-light-mute)}
.fun tbody tr:last-child th,.fun tbody tr:last-child td{border-bottom:0}

/* ---- coverage: a range with one hero clip, versus a clip per SKU -------- */
.cov{display:grid;gap:1.4rem;margin-top:.25rem}
.cov .covrow .covlab{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;margin-bottom:.55rem;font-size:.8125rem;color:var(--on-dark-mute)}
.cov .covrow .covlab b{font-family:var(--display);font-weight:700;color:#fff;font-size:.875rem}
/* fixed 20 columns so 40 slots read as two clean rows of twenty, countable and
   identical in shape between the two blocks. Empty slots need real contrast on
   the dark band or the comparison shows nothing. */
.cov .slots{display:grid;grid-template-columns:repeat(20,1fr);gap:3px}
.cov .slots i{width:auto;height:34px}
.cov .slots i:not(.filled){background:rgba(196,202,188,.13);
  box-shadow:inset 0 0 0 1px rgba(196,202,188,.13)}
.cov .slots i.filled{background:var(--neon)}
@media (max-width:40rem){
  .cov .slots{grid-template-columns:repeat(10,1fr)}
  .cov .slots i{height:24px}
}

/* ---- format tiles carrying a clip --------------------------------------- */
/* A 9:16 clip at full tile width makes a 1000px tile, so the clip takes a fixed
   column beside the copy instead of sitting on top of it. */
.tile--fmt{display:grid;grid-template-columns:8.5rem 1fr;gap:1.15rem;align-items:start}
.tile--fmt .beats{margin-top:.7rem}
@media (max-width:44rem){
  .tile--fmt{grid-template-columns:1fr}
  .tile--fmt .clip{max-width:9.5rem}
}

/* The product-page cut is the one format that is not vertical; it gets its own
   full-width row rather than a letterboxed slot in the grid. */
.clip--wide video{aspect-ratio:16/9}
.clipwide{max-width:46rem;margin:1.6rem auto 0}

/* Two clips of the same locked format on two different catalogs. */
.clippair{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;
  max-width:36rem;margin:1.5rem 0 0}
@media (max-width:40rem){.clippair{grid-template-columns:repeat(2,1fr);max-width:20rem}}

/* draft banner, deleted before this goes into Webflow */
.draftbar{background:var(--neon);color:#0f0f0f;text-align:center;font-family:var(--display);
  font-weight:500;font-size:.8125rem;padding:.5rem 1rem}

/* ---- tap targets -------------------------------------------------------- */
/* house.css sets .related a{min-height:0} to defeat an older head patch, which
   lands the chips at 43.5px. This sheet loads after it, so the cluster carries
   its own fix instead of needing a per-page patch in Webflow page code. */
.related a{min-height:44px}

/* The clip toggle is 30px, which clears WCAG AA but not a thumb. There are
   eleven of them on the hub now, so touch pointers get a bigger one. */
@media (pointer:coarse){.clip button.tog{width:40px;height:40px}}

/* --- the eye test -------------------------------------------------------- */
.eyetest{max-width:56rem;margin:0 auto}
.et-bar{display:flex;justify-content:space-between;align-items:baseline;font:600 .7rem/1 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--on-light-faint);
  border-bottom:1px solid var(--line-light);padding-bottom:.5rem;margin-bottom:1rem}
.et-round{display:grid;gap:1rem}
.et-ref{margin:0;display:flex;gap:.75rem;align-items:center}
.et-ref img{flex:0 0 auto;width:4.5rem;height:6rem;object-fit:cover;border-radius:.3rem;
  border:1px solid var(--line-light)}
.et-ref figcaption{font-size:.8rem;color:var(--on-light-faint);margin:0}
/* the two takes sit at the tile's own width, so the test does not become a wall of video */
.et-opts{display:flex;gap:.75rem;max-width:31rem}
.et-opt{flex:1 1 0;display:block;position:relative;padding:0;background:none;
  border:2px solid var(--line-light);border-radius:.4rem;overflow:hidden;cursor:pointer;
  transition:border-color .15s}
.et-opt:hover:not(:disabled),.et-opt:focus-visible{border-color:var(--on-light-mute)}
.et-opt video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#111}
.et-opt:disabled{cursor:default}
.et-opt.is-good{border-color:var(--neon-deep)}
.et-opt.is-bad{border-color:var(--bad)}
.et-tag:empty{display:none}
.et-tag{position:absolute;left:0;right:0;bottom:0;padding:.35rem .5rem;font:600 .65rem/1.2 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(17,17,17,.84)}
.et-opt.is-good .et-tag{color:var(--neon)}
.et-opt.is-pick::before{content:"Your pick";position:absolute;top:.4rem;left:.4rem;z-index:1;
  padding:.2rem .4rem;font:600 .6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:#111;background:#fff;border-radius:.2rem}
.et-line{margin:0 0 .35rem}
.et-meta{margin:0 0 .75rem;font:.7rem/1.5 var(--mono);color:var(--on-light-faint)}
.et-done .et-verdict{font-size:1.05rem;margin:0 0 1rem}
@media (min-width:52rem){
  .et-round{grid-template-columns:12rem minmax(0,1fr);align-items:start}
  .et-ref{flex-direction:column;align-items:flex-start;gap:.5rem}
  .et-ref img{width:100%;height:auto;aspect-ratio:3/4}
  .et-reveal{grid-column:1/-1}
}