/* ═══════════════════════════════════════════════════════════════════
   TIKTOK 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 .serp-mock, the
   .co-flow4 problem steps, .co-tree, .co-aside, .co-cmp table, .co-lifted,
   .co-readers and .co-result. Only what is new to this page is here, so the
   three deep dives cannot drift apart visually.

   WHAT THIS PAGE DRAWS. The product page draws a watch, which works because a
   watch is concentric circles and straight hands. The equivalent object here
   would be a car, and a car in CSS is a cartoon, so this draws the material
   instead: matte film across a bare surface, under TikTok's own furniture.
   An empty dark box proves nothing about what an index can read; a bad drawing
   of a car proves less.

   Accent: the service's own teal (#22C1DC in inc/services.php).
   ═══════════════════════════════════════════════════════════════════ */

:root{--tk:#22C1DC;--tk-soft:rgba(34,193,220,.12);--tk-line:rgba(34,193,220,.34)}

.w50{width:50%}.w60{width:60%}.w70{width:70%}.w80{width:80%}

.tk-hero .po-h1 .grad-text{display:inline;margin-top:0}
.tk-hero::before{
  background:
    radial-gradient(820px 420px at 8% -10%,rgba(124,108,255,.24),transparent 62%),
    radial-gradient(620px 380px at 96% 106%,rgba(34,193,220,.16),transparent 60%);
}

/* ══════════ SHARED SMALL PARTS ══════════ */
.tk-lab{
  display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.tk-tag{background:var(--tk-soft);color:#0E7490;border:1px solid var(--tk-line)}
.tk-pill{
  font-size:10px;padding:2px 8px;border-radius:99px;margin-left:6px;vertical-align:middle;
  background:var(--tk-soft);color:#0E7490;border:1px solid var(--tk-line);font-weight:500;
}
.tk-count{font-size:10.5px;color:var(--ink-3);margin-left:6px;font-weight:400}
.tk-n{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  color:#0E7490;background:var(--tk-soft);border:1px solid var(--tk-line);border-radius:6px;
  height:20px;min-width:26px;display:grid;place-items:center;flex:none;
}
.tk-star{font-style:normal;color:#E8B23A;font-size:11px}

/* ══════════ THE VIDEO STILL: THE WORDS ON THE FRAME ══════════
   Two earlier versions drew the wrong thing. A car in CSS is a cartoon, and an
   abstract material texture is indistinguishable from a stock gradient. This
   draws the on-screen title, which is the actual subject of the page: the text
   an index reads off the frame. It is also the one thing CSS sets perfectly at
   every size, from a 34px coverage thumbnail up to the hero.

   Type scales with the frame through container query units, so one component
   covers every instance without a size variant per caller. The px value above
   each cqw line is the fallback for engines without container queries. */
.wsc{
  position:absolute;inset:0;overflow:hidden;background:#0A0D18;
  display:grid;place-items:center;
  container-type:size;
}
.wsc-bg{position:absolute;inset:0}
.wsc.tone-1 .wsc-bg{background:linear-gradient(168deg,#10485C 0%,#0B2438 44%,#060B16 100%)}
.wsc.tone-2 .wsc-bg{background:linear-gradient(168deg,#2E2360 0%,#1B1440 44%,#090714 100%)}
.wsc.tone-3 .wsc-bg{background:linear-gradient(168deg,#4A2E2A 0%,#2A1B1B 44%,#0E0909 100%)}
.wsc.tone-4 .wsc-bg{background:linear-gradient(168deg,#27405C 0%,#172433 44%,#080B12 100%)}
/* key light from above, fine scan texture, vignette. Together these stop the
   frame reading as a flat fill without adding anything a viewer has to decode. */
.wsc-fx{
  position:absolute;inset:0;
  background:
    radial-gradient(92% 58% at 50% 12%,rgba(255,255,255,.13),transparent 72%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),
    radial-gradient(122% 78% at 50% 42%,transparent 36%,rgba(0,0,0,.62) 100%);
}
/* The title. Offsets are in em so the red/cyan split scales with the type. */
.wsc-type{
  position:relative;z-index:2;margin:0;padding:0 9%;
  font-family:Inter,sans-serif;font-weight:800;font-style:normal;
  text-transform:uppercase;text-align:center;color:#fff;
  line-height:1.03;letter-spacing:-.015em;
  font-size:15px;
  font-size:13.5cqw;
  text-shadow:
    .055em 0 0 rgba(255,38,92,.92),
    -.055em 0 0 rgba(34,214,255,.92),
    0 .1em .26em rgba(0,0,0,.5);
}
.wsc.sm .wsc-type{
  padding:0 6%;
  font-size:10px;
  font-size:23cqw;
  letter-spacing:0;
}

/* ══════════ TIKTOK'S OWN FURNITURE ══════════ */
.tk-phone{
  position:relative;width:100%;max-width:232px;margin:0 auto;
  aspect-ratio:9/18.5;border-radius:22px;padding:5px;
  background:linear-gradient(160deg,#2A3050,#11142A);
  box-shadow:0 34px 70px rgba(5,7,16,.62),0 2px 6px rgba(5,7,16,.5),
             inset 0 1px 0 rgba(255,255,255,.14);
  overflow:visible;
}
/* NOT .hero: pages.css carries a bare .hero for marketing sections, and a
   .tk-phone.hero picked up its overflow:hidden, which clipped the L1/L2 tags
   off the side of the frame. Single-word modifiers on a shared stylesheet are
   a collision waiting to happen. */
.tk-phone.tk-lg{max-width:248px}
.tk-notch{
  position:absolute;left:50%;top:9px;transform:translateX(-50%);z-index:4;
  width:48px;height:5px;border-radius:99px;background:rgba(255,255,255,.22);
}
.tk-screen{
  position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;
  background:#0B0E1C;
}

.tk-tabs{
  position:absolute;top:9px;left:0;right:0;z-index:3;
  display:flex;justify-content:center;gap:14px;
  font-size:10.5px;color:rgba(255,255,255,.62);
}
.tk-tabs b{color:#fff;font-weight:700;position:relative}
.tk-tabs b::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-4px;
  width:16px;height:2px;border-radius:2px;background:#fff;
}

/* the small line under the on-screen title. The title itself is drawn by the
   scene component now, so this is only the qualifier beneath it. */
.tk-sub{
  position:absolute;left:8px;right:8px;top:calc(50% + 30px);z-index:3;text-align:center;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.74);
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}

.tk-steps-row{
  position:absolute;left:11px;right:11px;bottom:62px;z-index:3;display:flex;gap:5px;flex-wrap:wrap;
}
.tk-steps-row em{
  font-style:normal;font-size:10px;font-family:'IBM Plex Mono',monospace;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  padding:3px 7px;border-radius:99px;backdrop-filter:blur(4px);
}
.tk-mute{
  position:absolute;right:9px;top:34px;z-index:4;display:flex;align-items:center;gap:4px;
  font-size:10px;color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.16);
  padding:3px 7px;border-radius:99px;
}
.tk-mute svg{width:10px;height:10px;flex:none}

/* the action rail */
.tk-rail{
  position:absolute;right:7px;bottom:58px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:11px;
}
.tk-rail-av{
  width:26px;height:26px;border-radius:50%;border:1.5px solid #fff;
  background:linear-gradient(150deg,var(--violet),var(--tk));display:grid;place-items:center;
}
.tk-rail-av i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.85)}
.tk-rail-i{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff}
.tk-rail-i svg{width:17px;height:17px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.tk-rail-i b{font-size:10px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.tk-rail-disc{
  width:24px;height:24px;border-radius:50%;margin-top:1px;
  background:conic-gradient(from 0deg,#2B2F3E,#11131C 40%,#2B2F3E 60%,#0C0E16);
  border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;
  animation:tkSpin 5s linear infinite;
}
.tk-rail-disc i{width:7px;height:7px;border-radius:50%;background:var(--tk)}
@keyframes tkSpin{to{transform:rotate(360deg)}}

.tk-ui-bot{position:absolute;left:11px;right:44px;bottom:16px;z-index:3}
/* No rail means no column to clear, and a caption that stops 44px short of the
   edge for no visible reason reads as a bug. */
.tk-ui-bot.norail{right:11px}
.tk-ui-handle{display:block;font-size:11px;font-weight:700;color:#fff;margin-bottom:3px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.tk-ui-cap{
  display:block;font-size:10.5px;line-height:1.4;color:rgba(255,255,255,.88);
  text-shadow:0 1px 4px rgba(0,0,0,.6);margin-bottom:5px;
}
.tk-ui-cap b{color:#fff;font-weight:700}
.tk-ui-sound{
  display:flex;align-items:center;gap:5px;font-size:10px;color:rgba(255,255,255,.8);
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.tk-ui-sound svg{width:10px;height:10px;flex:none}
.tk-ui-prog{
  position:absolute;left:0;right:0;bottom:0;z-index:3;height:2.5px;background:rgba(255,255,255,.18);
}
.tk-ui-prog u{display:block;height:100%;width:34%;background:#fff;text-decoration:none}

/* ══════════ HERO STAGE ══════════
   Phone on the left, the three readable layers on the right, the eight
   elements as an anchor strip across the bottom. The tags hang off the left
   edge of the frame at fixed offsets so they stay in register with the thing
   they label; callouts that float free of their subject drift at every
   breakpoint and then have to be re-tuned per breakpoint forever. */
.tk-stage{
  display:grid;grid-template-columns:minmax(0,208px) minmax(0,1fr);
  gap:22px;align-items:stretch;
}
.tk-phone-wrap{
  display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;padding-left:13px;
}
.tk-search-chip{
  display:flex;align-items:center;gap:7px;max-width:100%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:99px;padding:6px 13px;color:#fff;
}
.tk-search-chip svg{width:12px;height:12px;flex:none;opacity:.8}
.tk-search-chip span{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the tags on the frame */
.tk-pin{
  position:absolute;left:-13px;z-index:5;
  width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:700;color:#04212B;
  background:linear-gradient(150deg,#5FE0F4,#1D93BC);
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 5px 16px rgba(34,193,220,.5),0 0 0 4px rgba(7,9,18,.85);
}
.tk-pin.p1{top:40%}
.tk-pin.p2{top:68%}

/* the spoken line, which is the third readable layer, so it carries L3 */
.tk-script{
  position:relative;width:100%;padding:10px 12px 11px;border-radius:11px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  border-left:2px solid var(--tk);
}
.tk-script .tk-layer-lab{margin-bottom:7px}
.tk-script p{font-size:11px;line-height:1.45;color:rgba(255,255,255,.9);margin:7px 0 0}
.tk-script p b{color:var(--tk)}

.tk-wave{display:flex;align-items:center;gap:3px;height:16px}
.tk-wave i{
  flex:1;min-width:2px;border-radius:99px;background:var(--tk);
  height:calc(var(--a)*100%);opacity:.85;
  animation:tkWave 1.25s ease-in-out infinite;
  animation-delay:calc(var(--d)*90ms);
}
.tk-wave i:nth-child(1){--a:.30;--d:0}.tk-wave i:nth-child(2){--a:.72;--d:1}
.tk-wave i:nth-child(3){--a:1;--d:2}.tk-wave i:nth-child(4){--a:.55;--d:3}
.tk-wave i:nth-child(5){--a:.88;--d:4}.tk-wave i:nth-child(6){--a:.40;--d:5}
.tk-wave i:nth-child(7){--a:.92;--d:6}.tk-wave i:nth-child(8){--a:.50;--d:7}
.tk-wave i:nth-child(9){--a:.78;--d:8}.tk-wave i:nth-child(10){--a:.34;--d:9}
.tk-wave i:nth-child(11){--a:.64;--d:10}.tk-wave i:nth-child(12){--a:.26;--d:11}
.tk-wave i:nth-child(13){--a:.58;--d:12}.tk-wave i:nth-child(14){--a:.36;--d:13}
@keyframes tkWave{0%,100%{transform:scaleY(.72)}50%{transform:scaleY(1)}}
.tk-wave.dim i{background:#C9D0E0;animation:none}

/* what each layer is */
.tk-layers{display:flex;flex-direction:column;gap:10px;min-width:0}
/* The cards fill the column rather than stacking at the top of it. Left to
   their natural height they sit against a 240px hole beside the taller phone,
   and spacing them out instead just moves the hole between them. */
.tk-layer{
  flex:1 1 0;display:flex;flex-direction:column;justify-content:center;
  padding:14px 15px;border-radius:12px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  border-left:2px solid var(--tk);
}
.tk-layer-lab{
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--night-ink-2);
}
.tk-layer-lab i{
  font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.02em;color:#04212B;background:var(--tk);border-radius:4px;padding:2px 5px;
}
.tk-layer p{font-size:12.5px;line-height:1.6;color:var(--night-ink-2);margin:7px 0 0}
.tk-layer p b{color:#fff;font-weight:600}

/* the contents strip: all eight elements, one line each, real anchors */
.tk-index{grid-column:1 / -1;margin-top:4px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.tk-index .tk-lab{color:var(--night-ink-2);margin-bottom:10px}
.tk-index-chips{display:flex;flex-wrap:wrap;gap:6px}
.tk-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;
}
.tk-index-chips a b{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:var(--tk);
  background:rgba(34,193,220,.16);border-radius:99px;padding:2px 6px;
}
.tk-index-chips a:hover{background:rgba(34,193,220,.14);border-color:var(--tk-line);color:#fff}

/* ══════════ THE RESULT: THREE SURFACES, NUMBERED ══════════
   The workflow used to end in two SERP mocks side by side, which showed where a
   video lands but not why one edit reaches more than one place. These are
   numbered because they are a chain: the words make the clip findable in TikTok
   search, the words are what a generated answer can quote, and the words are
   what Google reads when it builds a short videos row.

   Light cards in a light section, with the video frames inside them carrying
   the contrast. A dark panel here would fight every other mock on the page. */
.tk-surf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.tk-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);
}
.tk-surf::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--violet),var(--tk) 62%,rgba(34,193,220,0));
}
.tk-surf-head{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.tk-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(--tk));
}
.tk-surf-head h3{font-size:14.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0}
.tk-surf-flag{
  margin-left:auto;flex:none;font-size:10px;letter-spacing:.05em;color:#0E7A5B;white-space:nowrap;
}
.tk-surf-flag::after{content:' \2713'}
.tk-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);
}
.tk-surf .tk-surf-note{margin-top:auto}

/* 1 · the ranked list */
.tk-rank{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.tk-rank li{
  display:grid;grid-template-columns:20px 32px minmax(0,1fr) auto;gap:9px;align-items:center;
  padding:6px 9px;border-radius:9px;background:#F4F6FB;border:1px solid transparent;
}
.tk-rank li.win{background:rgba(34,193,220,.09);border-color:var(--tk-line)}
.tk-rank-n{font-size:10.5px;color:var(--ink-3)}
.tk-rank li.win .tk-rank-n{color:#0E7490;font-weight:600}
.tk-rank-thumb{
  position:relative;width:32px;aspect-ratio:9/13;border-radius:5px;overflow:hidden;
  background:#11162A;display:block;
}
.tk-rank-t{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-rank li.win .tk-rank-t{color:var(--ink);font-weight:600}
.tk-rank-who{font-size:10px;color:var(--ink-3);white-space:nowrap}

/* 2 · the generated answer */
.tk-ai{
  position:relative;padding:12px 13px 12px 33px;border-radius:12px;
  background:linear-gradient(140deg,rgba(124,108,255,.09),rgba(34,193,220,.07));
  border:1px solid var(--tk-line);
}
.tk-ai-spark{position:absolute;left:11px;top:12px;color:var(--violet);display:block}
.tk-ai-spark svg{width:14px;height:14px;display:block}
.tk-ai p{font-size:11.5px;line-height:1.55;color:var(--ink-2);margin:0}
.tk-ai p b{color:#0E7490;font-weight:600}
.tk-ai-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.tk-ai-chips span{
  font-size:10.5px;padding:3px 8px;border-radius:99px;
  background:#fff;border:1px solid var(--line-2);color:var(--ink-3);
}
.tk-ai-chips span.on{background:var(--tk-soft);border-color:var(--tk-line);color:#0E7490;font-weight:600}
.tk-ai-chips span.on::after{content:' \2713'}

/* 3 · the short videos row */
.tk-gv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.tk-gv-tile{display:flex;flex-direction:column;gap:5px;min-width:0}
.tk-gv-art{
  position:relative;display:block;aspect-ratio:16/11;border-radius:7px;overflow:hidden;
  background:#11162A;
}
.tk-gv-tile.win .tk-gv-art{outline:2px solid var(--tk);outline-offset:2px}
.tk-gv-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 8.5px;
  border-color:transparent transparent transparent rgba(255,255,255,.94);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.65));
}
.tk-gv-who{font-size:10px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ══════════ DEMAND: TWO SOURCED FIGURES ══════════ */
.tk-demand{
  max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px);
}
.tk-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);
}
.tk-stat b{
  display:block;font-family:'Inter Tight',Inter,sans-serif;font-size:clamp(38px,4.6vw,56px);
  line-height:1;letter-spacing:-.03em;margin-bottom:12px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.tk-stat p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.tk-stat cite{font-style:normal;font-size:12px;color:var(--ink-3);font-family:'IBM Plex Mono',monospace}
.tk-stat cite a{color:var(--violet);text-decoration:underline;text-decoration-color:rgba(124,108,255,.35);text-underline-offset:3px}
.tk-stat cite a:hover{text-decoration-color:var(--violet)}
.tk-stat-note{
  grid-column:1 / -1;background:var(--night-2);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,24px);
}
.tk-stat-note .tk-lab{color:var(--night-ink-2);margin-bottom:9px}
.tk-stat-note p{font-size:15px;line-height:1.6;color:#fff;margin:0}

/* ══════════ THE PROBLEM ══════════ */
.tk-cap-vis span{font-size:11px;color:var(--ink-3);text-align:center;line-height:1.4}
.tk-spike-vis{display:flex;align-items:flex-end;gap:5px;padding:12px 14px}
.tk-spike-vis i{
  flex:1;display:block;height:var(--h);min-height:2px;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--tk),rgba(34,193,220,.35));
}
.tk-spike-vis i:nth-child(n+4){background:#D7DCE8}

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

/* ══════════ 02 · THE BANK ══════════ */
.tk-bank-head,.tk-bank-row{
  display:grid;grid-template-columns:104px 132px minmax(0,1fr) 62px;gap:10px;align-items:center;
}
.tk-bank-head{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  padding:4px 0 9px;border-bottom:1px solid var(--line-2);
}
.tk-bank-row{padding:9px 0;border-bottom:1px solid var(--line-2)}
.tk-bank-row:last-of-type{border-bottom:0}
.tk-bank-row.star{background:linear-gradient(90deg,rgba(232,178,58,.07),transparent 60%)}
.tk-bank-type{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--ink-2)}
/* The pattern IS the content of this column, so at a readable size it wraps to
   a second line rather than being cut off mid-placeholder. */
.tk-bank-shape{
  font-size:10.5px;color:#0E7490;background:var(--tk-soft);border:1px solid var(--tk-line);
  border-radius:5px;padding:3px 6px;line-height:1.35;
}
.tk-bank-kw{font-size:12.5px;color:var(--ink);font-weight:500}
.tk-bank-bar{height:8px;border-radius:99px;background:var(--paper-3);overflow:hidden}
/* Length comes from the term's rank, never from a figure in the markup. Six
   even steps read as an order; 92% and 74% read as a measurement somebody took. */
.tk-bank-bar u{
  --r:1;display:block;height:100%;width:calc(115% - var(--r) * 15%);
  border-radius:99px;text-decoration:none;background:linear-gradient(90deg,var(--violet),var(--tk));
}
.tk-bank-foot,.tk-cov-foot{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.tk-bank-foot p,.tk-cov-foot p{font-size:12.5px;line-height:1.55;color:var(--ink-3);margin:6px 0 0}

/* ══════════ 03 · THE SPOKEN HOOK, AS A TIMELINE ══════════ */
.tk-tl{padding:2px 0}
.tk-tl-track{position:relative;height:52px;margin:12px 0 6px}
.tk-word{
  position:absolute;left:calc(var(--s) * 1%);width:calc(var(--w) * 1%);
  font-size:10px;line-height:1.35;padding:4px 8px;border-radius:7px;
  background:var(--paper-3);color:var(--ink-3);border:1px solid var(--line-2);
  overflow:hidden;
}
.tk-word:nth-of-type(1){top:0}
.tk-word:nth-of-type(2){top:27px}
.tk-word.hit{background:var(--tk-soft);border-color:var(--tk-line);color:#0E7490;font-weight:700}
.tk-word.late{background:#FFE9EF;border-color:#FFD2DE;color:#C2453F;font-weight:700}
.tk-drop{
  position:absolute;left:calc(var(--s) * 1%);top:-8px;bottom:-4px;width:0;
  border-left:1px dashed #C2453F;
}
.tk-drop em{
  position:absolute;left:5px;top:-3px;font-style:normal;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:#C2453F;white-space:nowrap;
}
.tk-tl-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-3)}

/* ══════════ 04 · TWO PHONES ══════════ */
.tk-two-phones .pox-row{display:flex;flex-direction:column;align-items:center}
.tk-two-phones .mk-note{align-self:stretch}
.tk-two-phones .tk-phone{max-width:196px}

/* ══════════ 05 · THE CAPTION ══════════ */
.tk-cap-mock{
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;
}
.tk-cap-mock .tk-ui-handle{
  color:var(--ink);text-shadow:none;font-size:12px;margin-bottom:5px;
}
.tk-cap-text{
  position:relative;font-size:12px;line-height:1.5;color:var(--ink-2);
  margin:0 0 9px;padding-bottom:10px;
}
.tk-cap-text b{color:var(--ink);background:var(--tk-soft);padding:0 4px;border-radius:4px}
.tk-fold{position:absolute;left:0;right:0;bottom:0;border-bottom:1px dashed var(--line)}
.tk-fold::after{
  content:'fold';position:absolute;right:0;bottom:-6px;
  background:var(--paper-2);padding:0 5px;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-family:'IBM Plex Mono',monospace;
}
.tk-more{color:var(--ink-3);font-size:11px}
.tk-tags{display:flex;gap:5px;flex-wrap:wrap}
.tk-tags span{
  font-size:10px;padding:3px 8px;border-radius:99px;
  background:var(--tk-soft);color:#0E7490;border:1px solid var(--tk-line);
}
.tk-tags.dim span{background:var(--paper-3);color:var(--ink-3);border-color:var(--line-2)}
.tk-cap-verdict{
  display:block;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);
  font-size:10.5px;font-family:'IBM Plex Mono',monospace;color:#0E7A5B;
}
.tk-cap-verdict.bad-verdict{color:#C2453F}

/* ══════════ 06 · FORMAT TABLE ══════════ */
.tk-cmp td:first-of-type{font-family:Inter,sans-serif;font-weight:600;color:var(--ink)}
.tk-lifted{background:var(--night-2)}

/* ══════════ 07 · WHERE THE CLICK GOES ══════════ */
.tk-path{display:flex;align-items:stretch;gap:9px;flex-wrap:wrap}
.tk-path-step{flex:1 1 148px;min-width:0;display:flex;flex-direction:column;gap:6px}
.tk-path-card{
  flex:1;background:var(--paper-2);border:1px solid var(--line-2);border-radius:10px;
  padding:10px;min-height:98px;display:flex;flex-direction:column;justify-content:center;
}
.tk-path-card.art{
  position:relative;overflow:hidden;padding:0;border:0;aspect-ratio:9/11;min-height:0;
}
.tk-path-shop{
  position:absolute;left:6px;right:6px;bottom:6px;z-index:2;
  display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  padding:4px 6px;border-radius:6px;backdrop-filter:blur(4px);
}
.tk-path-shop i{width:10px;height:10px;border-radius:3px;background:var(--tk);flex:none}
.tk-path-nocap{
  position:absolute;left:6px;bottom:6px;z-index:2;font-size:10px;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.tk-mini-search{display:flex;align-items:center;gap:6px;color:var(--ink-3)}
.tk-mini-search svg{width:12px;height:12px;flex:none}
.tk-mini-search b{font-size:11.5px;font-weight:600;color:var(--ink);line-height:1.3}
.tk-path-card.page{background:#fff;gap:6px;justify-content:flex-start}
.tk-page-url{font-size:10px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-page-h1{font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.tk-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tk-page-grid i{aspect-ratio:1;border-radius:4px;background:linear-gradient(160deg,#2A3050,#12162C)}
.tk-page-grid.dim i{background:#E2E6F0}
.tk-page-match{
  font-size:10px;font-family:'IBM Plex Mono',monospace;color:#0E7A5B;
  background:#E6F7F0;border:1px solid #C6EBDC;border-radius:5px;padding:3px 6px;margin-top:auto;
}
.tk-page-match.miss{color:#C2453F;background:#FFE9EF;border-color:#FFD2DE}
.tk-path-card.page.dead{background:#FFF8FA;border-color:rgba(255,92,138,.3)}
.tk-path-arrow{align-self:center;color:var(--ink-3);font-size:15px;flex:none}
.tk-path.short .tk-path-step{flex-basis:170px}

/* ══════════ 08 · COVERAGE ══════════ */
.tk-cov-head{
  display:grid;grid-template-columns:34px minmax(0,1fr) 74px 64px;gap:10px;align-items:center;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  padding:4px 0 9px;border-bottom:1px solid var(--line-2);
}
.tk-cov-head span:first-child{grid-column:1 / 3}
.tk-cov-list{list-style:none;display:flex;flex-direction:column}
.tk-cov-list li{
  position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 74px 64px;
  gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-2);
}
.tk-cov-list li:last-child{border-bottom:0}
.tk-cov-thumb{
  position:relative;overflow:hidden;width:34px;aspect-ratio:9/13;border-radius:5px;
  background:var(--paper-3);display:grid;place-items:center;
}
.tk-cov-thumb em{font-style:normal;font-size:13px;color:#C9D0E0;font-weight:300}
.tk-cov-kw{font-size:12.5px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis}
.tk-cov-list li.open .tk-cov-kw{color:var(--ink-3)}
.tk-cov-bar{height:7px;border-radius:99px;background:var(--paper-3);overflow:hidden}
.tk-cov-bar u{
  --r:1;display:block;height:100%;width:calc(115% - var(--r) * 15%);
  border-radius:99px;text-decoration:none;background:linear-gradient(90deg,var(--violet),var(--tk));
}
.tk-cov-list li.open .tk-cov-bar u{background:#C9D0E0}
.tk-cov-state{
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:right;
}
.tk-cov-list li.done .tk-cov-state{color:#0E7A5B}
.tk-cov-list li.next{background:rgba(34,193,220,.06);border-radius:8px;padding-left:6px;padding-right:6px;margin:0 -6px}
.tk-cov-list li.next .tk-cov-thumb{outline:1.5px dashed var(--tk-line);outline-offset:1px}
.tk-cov-flag{
  position:absolute;right:6px;top:-7px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#0E7490;background:#fff;border:1px solid var(--tk-line);border-radius:5px;padding:1px 6px;
}

/* ══════════ THE CLOSING TABLE: EIGHT DECISIONS ══════════
   Its own component rather than an override of .co-result, because the
   collection page still uses that one and a two-column metrics table is the
   right shape there. This one has a direction: a recessive before cell, an
   arrow, then the decision in the accent. Two pill columns of equal weight
   read as a list of pairs and leave the reader to work out which way to read.

   The row is a link into the section that explains it, so the summary is a
   way back into the page instead of a claim sitting on top of it. */
.tk-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);
}

/* the unchanged inputs, said once and said loudly, instead of two table rows
   that read "same" on both sides and a footnote explaining why */
.tk-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(34,193,220,.07));
  border:1px solid var(--tk-line);
}
.tk-shift-same .tk-lab{color:#0A5F72;margin-right:3px}
.tk-shift-same b{
  font-size:12.5px;font-weight:600;color:var(--ink);background:#fff;
  border:1px solid var(--tk-line);border-radius:99px;padding:5px 12px;
}

.tk-shift-head,.tk-shift-row{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) minmax(0,178px) 18px minmax(0,178px);
  gap:12px;align-items:center;
}
.tk-shift-head{padding-bottom:11px;border-bottom:1px solid var(--line-2)}
.tk-shift-head span{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.tk-shift-head .h-c{text-align:center}

.tk-shift-row{
  padding:11px 0;border-bottom:1px solid var(--line-2);color:inherit;
  border-radius:10px;transition:background .18s ease;
}
.tk-shift-row:last-of-type{border-bottom:0}
a.tk-shift-row:hover{background:rgba(34,193,220,.055)}
a.tk-shift-row:hover .tk-shift-what{color:#0A5F72}
.tk-shift-row .tk-n{margin-left:4px}
.tk-shift-what{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.35;transition:color .18s ease}

.tk-shift-b,.tk-shift-a{
  text-align:center;font-size:12px;line-height:1.4;border-radius:9px;padding:7px 10px;
}
.tk-shift-b{color:var(--ink-3);background:#F6F7FB;border:1px dashed var(--line-2)}
.tk-shift-a{
  color:#0A5F72;background:var(--tk-soft);border:1px solid var(--tk-line);font-weight:600;
}
.tk-shift-arrow{text-align:center;color:var(--tk);font-size:14px;line-height:1}

.tk-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);
}

@media (max-width:820px){
  .tk-shift-head{display:none}
  .tk-shift-row{
    grid-template-columns:30px minmax(0,1fr) 16px minmax(0,1fr);
    gap:9px 10px;padding:13px 0;
  }
  .tk-shift-what{grid-column:2 / -1}
  .tk-shift-b{grid-column:2;text-align:left}
  .tk-shift-arrow{grid-column:3;font-size:12px}
  .tk-shift-a{grid-column:4;text-align:left}
}
@media (max-width:520px){
  .tk-shift-same{gap:7px;padding:11px 12px}
  .tk-shift-same b{font-size:11.5px;padding:4px 10px}
  .tk-shift-row{grid-template-columns:26px minmax(0,1fr) 14px minmax(0,1fr);gap:8px}
  .tk-shift-what{font-size:12.5px}
  .tk-shift-b,.tk-shift-a{font-size:10.5px;padding:6px 7px}
}

/* ══════════ MOTION ══════════ */
@media (prefers-reduced-motion:reduce){
  .tk-rail-disc,.tk-wave i{animation:none!important}
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1100px){
  .tk-surf-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .tk-surf .tk-surf-note{margin-top:12px}
}
@media (max-width:1000px){
  .tk-stage{grid-template-columns:minmax(0,1fr);gap:22px}
  .tk-phone-wrap{order:1;padding-left:0;padding-top:0}
  .tk-layers{order:2}
  .tk-layer{flex:0 0 auto;padding:12px 14px}
  .tk-index{order:3}
  .tk-pin{left:auto;right:calc(50% + 102px)}
}
@media (max-width:900px){
  .tk-demand{grid-template-columns:1fr}
}
@media (max-width:520px){
  .tk-pin{right:auto;left:4px;width:22px;height:22px;font-size:10px}
  .tk-rank li{grid-template-columns:18px 28px minmax(0,1fr);gap:8px}
  .tk-rank-who{display:none}
  .tk-rank-thumb{width:28px}
}
@media (max-width:620px){
  .tk-bank-head,.tk-bank-row{grid-template-columns:78px minmax(0,1fr) 52px;gap:7px}
  .tk-bank-shape{display:none}
  .tk-bank-head span:nth-child(2){display:none}
  .tk-bank-type{font-size:11px}
  .tk-bank-kw{font-size:11.5px}
  .tk-cov-head,.tk-cov-list li{grid-template-columns:28px minmax(0,1fr) 52px;gap:8px}
  .tk-cov-head span:last-child,.tk-cov-state{display:none}
  .tk-cov-thumb{width:28px}
  .tk-path-arrow{display:none}
  .tk-word{font-size:10px}
}