/* ═══════════════════════════════════════════════════════════════════
   YOUTUBE SEO

   Loads on top of product-opt.css and collection-opt.css, which between them
   carry the shared mock chrome: .po-sec, .po-two, .po-copy, .po-num, .po-do,
   .mk, .pox-row, .mk-tag, .mk-note, the .flow workflow, the .co-flow4 problem
   steps, .co-tree, .co-aside, .co-readers and .faq. Only what is new to this
   page is here, so the six deep dives cannot drift apart visually.

   WHAT THIS PAGE DRAWS. A search result row, over and over, at four sizes. The
   argument is that a PLAYLIST is a result in its own right, so the mock that
   makes it is a result list with a playlist sitting in it, carrying a stacked
   thumbnail and a video count. Those two details are the whole difference, so
   the result row is the component everything else is built from.

   No attempt is made to draw a video. Thumbnails are tonal fills with a play
   triangle, which is what CSS can do cleanly at 34px and at 160px. Nothing
   below 10px anywhere: the earlier pages proved sub-10px type reads as blurry
   no matter what the device pixel ratio is doing.

   Accent: the service's own red (#FF6B6B in inc/services.php). Red is too light
   for text on white, so --yt-ink carries the readable version.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --yt:#FF6B6B;
  --yt-soft:rgba(255,107,107,.11);
  --yt-line:rgba(255,107,107,.34);
  --yt-ink:#C0392F;
  --yt-t1:linear-gradient(150deg,#3E4A63,#1A2130);
  --yt-t2:linear-gradient(150deg,#5C4252,#241A22);
  --yt-t3:linear-gradient(150deg,#41564C,#1A241F);
  --yt-t4:linear-gradient(150deg,#5A4A34,#241D14);
  --yt-t5:linear-gradient(150deg,#463C5E,#1D1926);
}

.w50{width:50%}.w70{width:70%}.w85{width:85%}

.yt-hero .po-h1 .grad-text{display:inline;margin-top:0}
.yt-hero::before{
  background:
    radial-gradient(820px 420px at 8% -10%,rgba(124,108,255,.22),transparent 62%),
    radial-gradient(640px 400px at 96% 106%,rgba(255,107,107,.18),transparent 60%);
}

/* ══════════ SHARED SMALL PARTS ══════════ */
.yt-lab{
  display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.yt-tag{background:var(--yt-soft);color:var(--yt-ink);border:1px solid var(--yt-line)}
.yt-pill{
  font-size:10px;padding:2px 8px;border-radius:99px;margin-left:6px;vertical-align:middle;
  background:var(--yt-soft);color:var(--yt-ink);border:1px solid var(--yt-line);font-weight:500;
}
.yt-count-lab,.yt-count{font-family:'IBM Plex Mono',monospace}
.yt-n{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  color:var(--yt-ink);background:var(--yt-soft);border:1px solid var(--yt-line);border-radius:6px;
  height:20px;min-width:26px;display:grid;place-items:center;flex:none;
}
.yt-chip{
  display:inline-flex;align-items:center;font-size:10.5px;padding:3px 9px;border-radius:99px;
  background:var(--paper-3);border:1px solid var(--line-2);color:var(--ink-3);
}
.yt-chip.on{background:var(--yt-soft);border-color:var(--yt-line);color:var(--yt-ink);font-weight:600}
.yt-sum.mono{
  display:block;margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);
  font-size:11px;color:var(--ink-3);
}
.yt-svc-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:20px;
  font-size:13.5px;font-weight:600;color:var(--yt-ink);
  border-bottom:1px solid var(--yt-line);padding-bottom:2px;
  transition:border-color .18s ease,gap .18s ease;
}
.yt-svc-link:hover{border-bottom-color:var(--yt);gap:10px}

/* ══════════ THE THUMBNAIL ══════════
   16:9 tonal fill, a play triangle, and optionally a duration or a video
   count. The stacked variant is what tells a viewer it is a playlist. */
.yt-thumb{
  position:relative;display:block;flex:none;width:112px;aspect-ratio:16/9;
  border-radius:8px;overflow:hidden;background:var(--yt-t1);
  box-shadow:0 1px 2px rgba(16,20,40,.12);
}
.yt-thumb.t1{background:var(--yt-t1)}
.yt-thumb.t2{background:var(--yt-t2)}
.yt-thumb.t3{background:var(--yt-t3)}
.yt-thumb.t4{background:var(--yt-t4)}
.yt-thumb.t5{background:var(--yt-t5)}
.yt-thumb.sm{width:78px}
.yt-thumb.xs{width:52px;border-radius:6px}
.yt-thumb.empty{
  background:#EFF1F7;border:1px dashed var(--line);display:grid;place-items:center;box-shadow:none;
}
.yt-thumb.empty em{font-style:normal;font-size:13px;color:#C9D0E0;font-weight:300}
.yt-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:0;height:0;border-style:solid;border-width:5px 0 5px 9px;
  border-color:transparent transparent transparent rgba(255,255,255,.94);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.yt-dur{
  position:absolute;right:4px;bottom:4px;z-index:3;font-style:normal;
  font-size:10px;color:#fff;background:rgba(0,0,0,.76);border-radius:4px;padding:1px 5px;
}
/* The stack. A playlist has to read as more than one video at a glance, so two
   sheets peek out above the thumbnail.

   Two traps avoided here. The modifier is namespaced rather than a bare
   `.stack`, which already means the rotating 3D card stack in product-opt.css:
   the bare version inherited a 44deg rotation and a permanent float animation.
   And the sheets are box-shadows, not pseudo-elements on a negative z-index.
   A z-index:-1 child paints before every in-flow block background in its
   stacking context, so it would have gone behind the white .pox-row card and
   never been seen. A shadow follows the border radius, needs no extra element,
   and is not clipped by the overflow:hidden the count panel relies on. */
.yt-thumb.yt-stk{
  box-shadow:
    0 -3px 0 -1px #C3CBDC,
    0 -6px 0 -2px #DFE4EE,
    0 1px 2px rgba(16,20,40,.12);
}
.yt-thumb.yt-stk .yt-count{
  position:absolute;right:0;top:0;bottom:0;width:46%;z-index:4;
  background:rgba(0,0,0,.72);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:13px;font-weight:700;color:#fff;font-style:normal;
}
.yt-thumb.yt-stk .yt-count span{font-size:10px;font-weight:400;opacity:.85}
.yt-thumb.yt-stk.xs .yt-count{font-size:11px;width:52%}

/* ══════════ ONE RESULT ROW ══════════ */
.yt-row{
  position:relative;display:flex;gap:11px;align-items:flex-start;
  padding:10px;border-radius:11px;background:#fff;border:1px solid transparent;
}
.yt-row.win{background:var(--yt-soft);border-color:var(--yt-line);flex-direction:column;gap:0}
.yt-row.sm{padding:0;background:transparent;border:0}
.yt-row-main{display:flex;gap:11px;align-items:flex-start;width:100%;min-width:0}
.yt-row-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.yt-title{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3;letter-spacing:-.01em}
.yt-cut{color:var(--ink-3);font-weight:400}
.yt-meta{font-size:10px;color:var(--ink-3)}
.yt-next{
  display:flex;align-items:center;gap:6px;
  font-size:10.5px;color:var(--yt-ink);background:#fff;
  border:1px solid var(--yt-line);border-radius:8px;padding:5px 9px;
}
.yt-next i{font-style:normal;font-size:10px}

/* The three tags name the parts of a result, and they sit in the flow directly
   above the part they name. They were absolutely positioned against the nearest
   positioned ancestor to begin with, which put all three on top of the
   thumbnail: .yt-row-body and .yt-next were both position:relative, so "the
   title" and "what plays next" resolved against the wrong box entirely. In
   flow there is nothing to resolve against and nothing to overlap. */
.yt-field-tag{
  display:inline-flex;align-self:flex-start;white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:linear-gradient(150deg,#FF8E8E,#D64A40);
  border-radius:99px;padding:3px 9px;
  box-shadow:0 3px 10px rgba(192,57,47,.3);
}
.yt-field-tag.t-pl{margin-bottom:9px}
.yt-field-tag.t-nx{margin-top:4px}

/* ══════════ HERO STAGE ══════════ */
.yt-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.yt-serp{position:relative;padding-left:34px}
.yt-bar{
  display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:99px;padding:9px 15px;color:var(--ink-3);margin-bottom:12px;
  box-shadow:0 1px 3px rgba(16,20,40,.07);
}
.yt-bar svg{width:13px;height:13px;flex:none}
.yt-bar span{font-size:12px;color:var(--ink-2);flex:1}
.yt-bar em{font-style:normal;font-size:10px;color:var(--ink-3);white-space:nowrap}
.yt-results{
  background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:8px;
  display:flex;flex-direction:column;gap:4px;
  box-shadow:0 1px 2px rgba(16,20,40,.04),0 18px 40px -28px rgba(16,20,40,.4);
}

.yt-layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0}
.yt-layer{
  display:flex;flex-direction:column;padding:13px 14px;border-radius:12px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  border-left:2px solid var(--yt);
}
.yt-layer-lab{
  display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--night-ink-2);
}
.yt-layer p{font-size:12px;line-height:1.55;color:var(--night-ink-2);margin:7px 0 0}
.yt-layer p b{color:#fff;font-weight:600}

.yt-index{padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.yt-index .yt-lab{color:var(--night-ink-2);margin-bottom:10px}
.yt-index-chips{display:flex;flex-wrap:wrap;gap:6px}
.yt-index-chips a{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--night-ink-2);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:99px;padding:4px 11px 4px 5px;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.yt-index-chips a b{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:#FF9E9E;
  background:rgba(255,107,107,.2);border-radius:99px;padding:2px 6px;
}
.yt-index-chips a:hover{background:rgba(255,107,107,.16);border-color:var(--yt-line);color:#fff}

/* ══════════ WORKFLOW EXAMPLES ══════════ */
.flow-stages .fstage{display:flex;flex-direction:column}
.fstage .fs-d{margin-bottom:11px}
.yt-eg{margin-top:auto;padding-top:11px;border-top:1px dashed var(--line-2)}
.yt-eg-lab{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.yt-eg-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.yt-eg-chip,.yt-eg-kw,.yt-eg-pl{font-size:10.5px;padding:4px 9px;border-radius:7px;line-height:1.3}
.yt-eg-chip{background:var(--paper-3);border:1px solid var(--line-2);color:var(--ink-2)}
.yt-eg-more{font-size:10px;color:var(--ink-3)}
.yt-eg-kw{font-family:'IBM Plex Mono',monospace;background:var(--paper-3);border:1px solid var(--line-2);color:var(--ink)}
.yt-eg-pl{background:var(--yt-soft);border:1px solid var(--yt-line);color:var(--yt-ink);font-weight:600}
.yt-eg-type{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.04em;
  padding:3px 7px;border-radius:99px;background:#fff;border:1px solid var(--line-2);color:var(--ink-3);
}
.yt-eg-type.target{background:rgba(14,122,91,.1);border-color:rgba(14,122,91,.3);color:#0E7A5B}
.yt-eg-type.open{background:var(--yt-soft);border-color:var(--yt-line);color:var(--yt-ink)}

/* ══════════ THE THREE SURFACES ══════════ */
.yt-surf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.yt-surf{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:17px 16px 15px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,20,40,.04),0 16px 34px -22px rgba(16,20,40,.34);
}
.yt-surf::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--violet),var(--yt) 62%,rgba(255,107,107,0));
}
.yt-surf-head{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.yt-surf-n{
  width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:#fff;
  background:linear-gradient(150deg,var(--violet),var(--yt));
}
.yt-surf-head h3{font-size:14.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0}
.yt-surf-flag{margin-left:auto;flex:none;font-size:10px;letter-spacing:.04em;color:#0E7A5B;white-space:nowrap}
.yt-surf-flag::after{content:' \2713'}
.yt-surf-note{
  font-size:11.5px;line-height:1.5;color:var(--ink-3);
  margin:13px 0 0;padding-top:12px;border-top:1px dashed var(--line-2);
}
.yt-surf .yt-surf-note{margin-top:auto}

.yt-mini-bar{
  display:flex;align-items:center;gap:7px;background:var(--paper-3);border-radius:99px;
  padding:6px 11px;color:var(--ink-3);margin-bottom:9px;font-size:10.5px;
}
.yt-mini-bar svg{width:12px;height:12px;flex:none}
.yt-mini-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.yt-mini-list li{
  display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:9px;
  background:#F4F6FB;border:1px solid transparent;
}
.yt-mini-list li.win{background:var(--yt-soft);border-color:var(--yt-line)}
.yt-mini-list b{display:block;font-size:11.5px;font-weight:600;color:var(--ink);line-height:1.3}
.yt-mini-list em{display:block;font-style:normal;font-size:10px;color:var(--ink-3)}

.yt-next-vis{display:flex;flex-direction:column;gap:5px}
.yt-next-row{display:flex;gap:8px;align-items:center;padding:7px 9px;border-radius:9px;background:#F4F6FB}
.yt-next-row b{display:block;font-size:11.5px;font-weight:600;color:var(--ink);line-height:1.3}
.yt-next-row em{display:block;font-style:normal;font-size:10px;color:var(--ink-3)}
.yt-next-row.now{background:var(--paper-3);border:1px solid var(--line-2)}
.yt-next-row.mine{background:rgba(14,122,91,.09);border:1px solid rgba(14,122,91,.28)}
.yt-next-row.mine em{color:#0E7A5B}
.yt-next-row.theirs{background:#FFF1F4;border:1px dashed #FFD2DE}
.yt-next-row.theirs em{color:#C2453F}
.yt-next-arrow{text-align:center;color:var(--ink-3);font-size:13px;line-height:1}

.yt-ai{
  position:relative;padding:12px 13px 12px 33px;border-radius:12px;
  background:linear-gradient(140deg,rgba(124,108,255,.09),rgba(255,107,107,.07));
  border:1px solid var(--yt-line);
}
.yt-ai-spark{position:absolute;left:11px;top:12px;color:var(--violet);display:block}
.yt-ai-spark svg{width:14px;height:14px;display:block}
.yt-ai p{font-size:11.5px;line-height:1.55;color:var(--ink-2);margin:0 0 10px}
.yt-ai-src{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line-2);border-radius:9px;padding:6px 8px}
.yt-ai-src b{display:block;font-size:11px;font-weight:600;color:var(--ink);line-height:1.3}
.yt-ai-src em{display:block;font-style:normal;font-size:10px;color:var(--yt-ink);font-weight:600}

/* ══════════ DEMAND ══════════ */
.yt-demand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:940px;margin:0 auto}
.yt-stat{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-sm);
}
.yt-stat b{
  display:block;font-family:Unbounded,Inter,sans-serif;font-size:clamp(40px,5vw,58px);
  font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--yt-ink);margin-bottom:14px;
}
.yt-stat p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.yt-stat cite{font-style:normal;font-size:12px;color:var(--ink-3);font-family:'IBM Plex Mono',monospace}
.yt-stat cite a{color:var(--yt-ink);text-decoration:underline;text-decoration-color:var(--yt-line);text-underline-offset:3px}
.yt-stat cite a:hover{text-decoration-color:var(--yt)}
.yt-stat-note{grid-column:1 / -1;background:var(--night-2);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,24px)}
.yt-stat-note .yt-lab{color:var(--night-ink-2);margin-bottom:9px}
.yt-stat-note p{font-size:15px;line-height:1.6;color:#fff;margin:0}

/* ══════════ THE PROBLEM ══════════ */
.yt-one-vis{display:flex;align-items:center;gap:9px;padding:12px 14px;flex-wrap:wrap}
.yt-one-vis span.mono{font-size:10.5px;color:var(--ink-3)}
.yt-pile-vis{display:flex;flex-wrap:wrap;gap:4px;padding:12px 14px}
.yt-pile-vis i{width:30px;height:18px;border-radius:3px;background:#D7DCE8;display:block}
.yt-pile-vis span{width:100%;font-size:10px;color:var(--ink-3);margin-top:5px}
.yt-bar-vis{padding:16px 14px}
.yt-bar-vis u{
  display:block;height:9px;border-radius:99px;text-decoration:none;width:var(--w);
  background:linear-gradient(90deg,var(--violet),var(--yt));
}
.yt-bar-vis span{display:block;font-size:10.5px;color:var(--ink-3);margin-top:7px}

/* ══════════ 01 · THE MAP ══════════ */
.yt-tree .l1{display:flex;align-items:center;flex-wrap:wrap}
.yt-tree .l2{display:flex;align-items:baseline;flex-wrap:wrap}
.yt-count{font-size:10.5px;color:var(--ink-3);margin-left:6px;font-weight:400}
.yt-gate{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:12px}
.yt-gate li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;align-items:start}
.yt-gate li i{width:14px;height:14px;border-radius:50%;margin-top:2px;display:block}
.yt-gate li.ok i{background:#E6F7F0;border:1px solid #C6EBDC;box-shadow:inset 0 0 0 3px #0E7A5B}
.yt-gate li.no i{background:#FFE9EF;border:1px solid #FFD2DE;box-shadow:inset 0 0 0 3px #C2453F}
.yt-gate li span{display:block;font-size:12.5px;color:var(--ink)}
.yt-gate li em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:1px;grid-column:2}
.yt-gate li.no span{color:var(--ink-3);text-decoration:line-through;text-decoration-color:#C2453F}
.yt-gate li.no em{color:#C2453F}

/* ══════════ THE SIX TYPES ══════════ */
.yt-type{
  font-family:'IBM Plex Mono',monospace;font-size:10px;text-align:center;
  border-radius:99px;padding:3px 0;font-weight:600;
}
.yt-type.t-broad{background:#EEF0F8;color:#5A6484;border:1px solid var(--line-2)}
.yt-type.t-modifier{background:rgba(124,108,255,.11);color:#5B4CD6;border:1px solid rgba(124,108,255,.3)}
.yt-type.t-howto{background:var(--yt-soft);color:var(--yt-ink);border:1px solid var(--yt-line)}
.yt-type.t-problem{background:rgba(232,178,58,.15);color:#8A6412;border:1px solid rgba(232,178,58,.4)}
.yt-type.t-comparison{background:rgba(34,193,220,.13);color:#0E7490;border:1px solid rgba(34,193,220,.32)}
.yt-type.t-showcase{background:rgba(255,92,138,.12);color:#B0244F;border:1px solid rgba(255,92,138,.34)}

/* ══════════ 02 · THE BANK ══════════ */
.yt-bank-head,.yt-bank-row{
  display:grid;grid-template-columns:96px minmax(0,1fr) 72px 58px;gap:10px;align-items:center;
}
.yt-bank-head{
  padding-bottom:9px;border-bottom:1px solid var(--line-2);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.yt-bank-row{padding:9px 0;border-bottom:1px solid var(--line-2)}
.yt-bank-row:last-of-type{border-bottom:0}
.yt-bank-row.cited{background:linear-gradient(90deg,var(--yt-soft),transparent 70%)}
.yt-bank-kw{font-size:12.5px;color:var(--ink);font-weight:500}
.yt-bank-vol{font-size:11px;color:var(--ink);text-align:right}
.yt-bank-ai{text-align:right}
.yt-bank-ai em{
  font-style:normal;font-size:10px;letter-spacing:.04em;color:var(--yt-ink);
  background:var(--yt-soft);border:1px solid var(--yt-line);border-radius:6px;padding:2px 6px;
}
.yt-bank-ai u{display:inline-block;width:14px;height:2px;background:var(--line);text-decoration:none}
.yt-bank-foot,.yt-cov-foot{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.yt-bank-foot p,.yt-cov-foot p{font-size:12.5px;line-height:1.55;color:var(--ink-3);margin:6px 0 0}

/* ══════════ 03 · THE PLAYLIST PLAN ══════════ */
.yt-pl-list,.yt-intent{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.yt-pl-list li{
  display:grid;grid-template-columns:52px minmax(0,1fr) 72px 54px;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line-2);
}
.yt-pl-list li:last-child{border-bottom:0}
.yt-pl-t{font-size:12.5px;font-weight:500;color:var(--ink)}
.yt-pl-bar{height:7px;border-radius:99px;background:var(--paper-3);overflow:hidden}
.yt-pl-bar u{display:block;height:100%;width:var(--w);border-radius:99px;text-decoration:none;background:linear-gradient(90deg,var(--violet),var(--yt))}
.yt-pl-list li.done .yt-pl-bar u{background:#0E7A5B}
.yt-pl-list li.empty .yt-pl-bar u{background:#D7DCE8}
.yt-pl-n{font-size:10.5px;color:var(--ink-3);text-align:right}
.yt-pl-list li.done .yt-pl-n{color:#0E7A5B;font-weight:600}
.yt-pl-sep{margin-top:16px}
.yt-intent li{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:start;
  padding:9px 0;border-bottom:1px solid var(--line-2);
}
.yt-intent li:last-child{border-bottom:0}
.yt-intent-b b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3}
.yt-intent-b em{display:block;font-style:normal;font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.45}

/* ══════════ 04 · THE TARGET ══════════ */
.yt-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.yt-tier{
  padding:11px 10px;border-radius:11px;background:#F6F7FB;border:1px solid var(--line-2);text-align:center;
}
.yt-tier.on{background:var(--yt-soft);border-color:var(--yt-line)}
.yt-tier-r{display:block;font-size:10px;color:var(--ink-3);margin-bottom:5px}
.yt-tier b{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.yt-tier.on b{color:var(--yt-ink)}
.yt-sum{padding-top:12px;border-top:1px dashed var(--line)}
.yt-sum ul{list-style:none;margin:8px 0 0;padding:0}
.yt-sum li{display:flex;justify-content:space-between;gap:10px;font-size:11px;padding:4px 0;color:var(--ink-2)}
.yt-sum li em{font-style:normal;color:var(--ink);font-weight:600}
.yt-sum li.more{color:var(--ink-3)}
/* .mk prefix: product-opt.css sets .pox-row p{font-size:14px}, which outranks a
   single class. Without it this line and the two below rendered at 14px. */
.mk .yt-sum-total{
  margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--ink-3);
}
.yt-sum-total b{color:var(--yt-ink)}

/* ══════════ 05 · TITLES ══════════ */
.yt-two .pox-row{display:flex;flex-direction:column}
.mk .yt-ranks{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:11px 0 0;
  font-size:12.5px;color:var(--ink-3);
}
.yt-ranks .yt-lab{display:inline;color:var(--ink-3)}
.yt-ranks em{
  font-style:normal;color:var(--yt-ink);background:var(--yt-soft);
  border:1px solid var(--yt-line);border-radius:6px;padding:2px 7px;font-size:11.5px;font-weight:600;
}
.yt-ranks.bad-verdict{color:#C2453F}
.yt-vol{font-size:10.5px;color:var(--ink-3)}

/* ══════════ 06 · DESCRIPTIONS ══════════ */
.yt-desc-mock{
  position:relative;background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:13px 14px;
}
.yt-desc-text{display:block;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.yt-desc-text.dim{color:var(--ink-3)}
.yt-desc-text b{color:var(--ink);font-weight:600}
.yt-fold{
  display:block;margin:9px 0;border-bottom:1px dashed var(--line);position:relative;
}
.yt-fold::after{
  content:'…more';position:absolute;right:0;top:-8px;
  font-size:10px;color:var(--ink-3);background:#fff;padding:0 6px;
}
.yt-desc-below{display:block;font-size:10.5px;line-height:1.7;color:var(--ink-3)}
.yt-desc-picked{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px}
.yt-desc-picked .yt-lab{margin-right:2px}

/* ══════════ 07 · WHAT AI QUOTES ══════════ */
.yt-cited{list-style:none;margin:0;padding:0}
.yt-cited li{
  display:grid;grid-template-columns:96px 62px minmax(0,1fr) 62px;gap:9px 10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line-2);
}
.yt-cited li:last-child{border-bottom:0}
.yt-cited li.yes{background:linear-gradient(90deg,var(--yt-soft),transparent 72%)}
.yt-cited-n{font-size:10.5px;color:var(--ink-3)}
.yt-cited-eg{font-size:11px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yt-cited-v{
  font-size:10px;letter-spacing:.04em;text-transform:uppercase;text-align:right;color:var(--ink-3);
}
.yt-cited li.yes .yt-cited-v{color:var(--yt-ink);font-weight:600}
.yt-cited-why{grid-column:2 / -1;font-size:11px;line-height:1.45;color:var(--ink-3);margin-top:-2px}

/* ══════════ 08 · COVERAGE ══════════ */
.yt-cov-head,.yt-cov-list li{
  display:grid;grid-template-columns:52px minmax(0,1fr) 62px 62px;gap:11px;align-items:center;
}
.yt-cov-head{
  padding-bottom:9px;border-bottom:1px solid var(--line-2);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.yt-cov-head span:first-child{grid-column:1 / 3}
.yt-cov-head span:nth-child(2){text-align:right}
.yt-cov-list{list-style:none;display:flex;flex-direction:column;margin:0;padding:0}
.yt-cov-list li{position:relative;padding:9px 0;border-bottom:1px solid var(--line-2)}
.yt-cov-list li:last-child{border-bottom:0}
.yt-cov-kw{font-size:12px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis}
.yt-cov-list li.open .yt-cov-kw{color:var(--ink-3)}
.yt-cov-vol{font-size:11px;color:var(--ink);text-align:right}
.yt-cov-list li.open .yt-cov-vol{color:var(--ink-3)}
.yt-cov-state{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);text-align:right}
.yt-cov-list li.done .yt-cov-state{color:#0E7A5B}
.yt-cov-list li.next{background:var(--yt-soft);border-radius:7px;box-shadow:0 0 0 5px var(--yt-soft)}
.yt-cov-list li.next .yt-thumb{outline:1.5px dashed var(--yt-line);outline-offset:1px}
.yt-cov-flag{
  position:absolute;right:6px;top:-7px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--yt-ink);background:#fff;border:1px solid var(--yt-line);border-radius:5px;padding:1px 6px;
}

/* ══════════ THE CLOSING TABLE ══════════ */
.yt-shift{
  max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(18px,2.6vw,28px);box-shadow:var(--shadow-sm);
}
.yt-shift-same{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:13px 15px;border-radius:13px;margin-bottom:22px;
  background:linear-gradient(120deg,rgba(124,108,255,.08),rgba(255,107,107,.08));
  border:1px solid var(--yt-line);
}
.yt-shift-same .yt-lab{color:var(--yt-ink);margin-right:3px}
.yt-shift-same b{
  font-size:12.5px;font-weight:600;color:var(--ink);background:#fff;
  border:1px solid var(--yt-line);border-radius:99px;padding:5px 12px;
}
.yt-shift-head,.yt-shift-row{
  display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,178px) 18px minmax(0,178px);
  gap:12px;align-items:center;
}
.yt-shift-head{padding-bottom:11px;border-bottom:1px solid var(--line-2)}
.yt-shift-head span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.yt-shift-head .h-c{text-align:center}
.yt-shift-row{
  padding:11px 0;border-bottom:1px solid var(--line-2);color:inherit;
  border-radius:10px;transition:background .18s ease;
}
.yt-shift-row:last-of-type{border-bottom:0}
a.yt-shift-row:hover{background:rgba(255,107,107,.055)}
a.yt-shift-row:hover .yt-shift-what{color:var(--yt-ink)}
.yt-shift-row .yt-n{margin-left:4px}
.yt-shift-what{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.35;transition:color .18s ease}
.yt-shift-b,.yt-shift-a{text-align:center;font-size:12px;line-height:1.4;border-radius:9px;padding:7px 10px}
.yt-shift-b{color:var(--ink-3);background:#F6F7FB;border:1px dashed var(--line-2)}
.yt-shift-a{color:var(--yt-ink);background:var(--yt-soft);border:1px solid var(--yt-line);font-weight:600}
.yt-shift-arrow{text-align:center;color:var(--yt);font-size:14px;line-height:1}
.yt-shift-note{
  font-size:12.5px;line-height:1.6;color:var(--ink-3);
  margin:18px 0 0;padding-top:15px;border-top:1px dashed var(--line);
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1100px){
  .yt-surf-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .yt-surf .yt-surf-note{margin-top:12px}
}
@media (max-width:1000px){
  .yt-layers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .yt-demand{grid-template-columns:1fr}
  .yt-tiers{grid-template-columns:1fr}
}
@media (max-width:820px){
  .yt-shift-head{display:none}
  .yt-shift-row{grid-template-columns:30px minmax(0,1fr) 16px minmax(0,1fr);gap:9px 10px;padding:13px 0}
  .yt-shift-what{grid-column:2 / -1}
  .yt-shift-b{grid-column:2;text-align:left}
  .yt-shift-arrow{grid-column:3;font-size:12px}
  .yt-shift-a{grid-column:4;text-align:left}
}
@media (max-width:700px){
  .yt-layers{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .yt-serp{padding-left:26px}
  .yt-bank-head,.yt-bank-row{grid-template-columns:86px minmax(0,1fr) 62px;gap:8px}
  .yt-bank-head span:last-child,.yt-bank-ai{display:none}
  .yt-cited li{grid-template-columns:86px minmax(0,1fr) 58px}
  .yt-cited-n{display:none}
  /* The example term is the reason the row exists, so it wraps here rather
     than truncating: at this width the ellipsis ate half of every one. */
  .yt-cited-eg{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
  .yt-cov-head,.yt-cov-list li{grid-template-columns:44px minmax(0,1fr) 58px;gap:9px}
  .yt-cov-head span:last-child,.yt-cov-state{display:none}
  .yt-pl-list li{grid-template-columns:44px minmax(0,1fr) 50px;gap:8px}
  .yt-pl-bar{display:none}
  .yt-intent li{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .yt-shift-same{gap:7px;padding:11px 12px}
  .yt-shift-same b{font-size:11.5px;padding:4px 10px}
  .yt-shift-row{grid-template-columns:26px minmax(0,1fr) 14px minmax(0,1fr);gap:8px}
  .yt-shift-what{font-size:12.5px}
  .yt-shift-b,.yt-shift-a{font-size:10.5px;padding:6px 7px}
  .yt-serp{padding-left:0}
}