/* =========================================================
   Taksha case study — page-specific components
   Extends case-study.css. tk- prefix throughout.
   ========================================================= */

:root {
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --tko: #ee6a2e;            /* taksha orange */
  --tko-soft: #fbe3d4;
  --tk-navy: #191f3d;        /* galaxy night */
  --tk-navy-2: #262c4e;
  --tk-blue: #4a7fe8;
}

/* ---------- cover ---------- */
.tk-client-logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.tk-cover-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
  margin-top: clamp(10px, 2.4svh, 26px);
}
.tk-cover-copy { display: grid; justify-items: start; gap: clamp(12px, 1.6vh, 18px); }
.tk-cover .cs-cover-title {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(42px, 6vw, 104px);
  line-height: 0.9;
}
.tk-cover-sub {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(16px, 1.6vw, 23px);
  font-weight: 500;
  line-height: 1.45;
  color: rgb(16 20 23 / 0.72);
  text-wrap: pretty;
}
.tk-cover-meta {
  display: grid;
  gap: clamp(8px, 1.2vh, 12px);
  width: 100%;
  max-width: 44ch;
  margin: clamp(2px, 1vh, 10px) 0 0;
  padding-top: clamp(12px, 2vh, 18px);
  border-top: 2px solid rgb(16 20 23 / 0.18);
}
.tk-cover-meta > div { display: grid; grid-template-columns: 8.5ch minmax(0, 1fr); gap: clamp(10px, 1.4vw, 18px); align-items: baseline; }
.tk-cover-meta dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(16 20 23 / 0.5);
}
.tk-cover-meta dd { margin: 0; font-size: clamp(13.5px, 1.15vw, 16px); font-weight: 600; line-height: 1.35; }

.tk-cover-art { display: grid; gap: clamp(10px, 1.4vw, 16px); }
.tk-slideshow {
  position: relative;
  aspect-ratio: 1500 / 749;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 9px 9px 0 var(--ink);
  overflow: hidden;
}
.tk-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  scale: 1.015;
  transition: opacity 760ms ease, scale 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tk-slideshow img.is-on { opacity: 1; scale: 1; }
.tk-cover-note {
  position: absolute;
  left: 14px;
  top: -14px;
  width: fit-content;
  max-width: calc(100% - 28px);
  white-space: nowrap;
  z-index: 3;
}
.tk-shot-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 11px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tk-slide-dots { display: flex; gap: 8px; justify-content: flex-end; }
.tk-slide-dots button {
  width: 26px;
  height: 8px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 300ms ease, width 300ms ease;
}
.tk-slide-dots button[aria-selected="true"] { background: var(--ink); width: 40px; }
@media (max-width: 980px) {
  .tk-cover-grid { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 36px); }
  .tk-cover .cs-cover-title { max-width: 20ch; }
  .tk-cover-note { right: 0; top: -14px; }
}
@media (max-width: 620px) {
  .tk-cover-note { display: none; }
}

/* ---------- figures ---------- */
.tk-fig {
  position: relative;
  margin: 0;
}
.tk-fig > img,
.tk-duo-fig > img {
  display: block;
  width: 100%;
  height: auto;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  box-shadow: 7px 7px 0 var(--ink);
}
.tk-cap {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  opacity: 0.75;
}
.tk-cap b { font-weight: 700; }
.tk-fig,
.tk-duo,
.tk-stats,
.tk-methods,
.tk-quotes,
.tk-rivals,
.tk-matrix,
.tk-personas,
.tk-sys,
.tk-loop {
  margin: clamp(26px, 4.5svh, 54px) 0;
}
.tk-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.6vw, 30px);
  align-items: start;
}
.tk-duo-fig { position: relative; margin: 0; }
@media (max-width: 860px) {
  .tk-duo { grid-template-columns: 1fr; }
}
.tk-email { max-width: 720px; }
.tk-email .tk-email-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 10px;
  background: #151515;
  border-radius: 12px 12px 0 0;
  color: #f2efe6;
}
.tk-email .tk-email-head + img { border-radius: 0 0 12px 12px; margin-top: -1px; }
.tk-email-av {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tko);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.tk-email-from { font-size: 14px; opacity: 0.95; }
.tk-email-from b { font-weight: 700; }
.tk-email-meta { margin-left: auto; font-family: var(--font-mono); font-size: 11px; opacity: 0.5; }

/* ---------- hook ---------- */
.tk-hook {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
  margin: clamp(20px, 4svh, 44px) 0;
}
.tk-hook-photos {
  display: grid;
  gap: clamp(26px, 3.4vw, 46px);
  align-content: start;
}
.tk-hook-photo {
  position: relative;
  margin: 0;
  rotate: 1.6deg;
}
.tk-hook-photo-b { rotate: -1.4deg; }
.tk-hook-photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.04);
}
.tk-hook-tag { position: absolute; right: -6px; bottom: 10px; }
@media (max-width: 860px) {
  .tk-hook { grid-template-columns: 1fr; }
  .tk-hook-photos { max-width: 420px; justify-self: center; }
}

/* ---------- chaos scene ---------- */
.tk-chaos {
  position: relative;
  height: 540svh;
  margin: clamp(40px, 8svh, 100px) 0;
}
.tk-chaos-pin {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  height: 100svh;
  padding: clamp(18px, 4svh, 44px) 0 clamp(12px, 3svh, 30px);
}
.tk-chaos-head { text-align: center; display: grid; gap: 10px; justify-items: center; }
.tk-chaos-head h3 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.tk-chaos-stage {
  position: relative;
  width: min(100%, calc(72svh * 16 / 9));
  aspect-ratio: 16 / 9;
  justify-self: center;
  align-self: center;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background:
    radial-gradient(circle, rgb(28 30 38 / 0.08) 0 1px, transparent 1.4px) 0 0 / 22px 22px,
    #fdf7ea;
  box-shadow: 7px 7px 0 var(--ink);
  overflow: hidden;
}

/* logos — same constellation as the original slide (centers in % of a 16:9 stage) */
.tk-chaos-logo {
  position: absolute;
  width: 8.6%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: #fff;
  box-shadow: 4px 4px 0 rgb(28 30 38 / 0.35);
  transition: filter 600ms ease, opacity 600ms ease, scale 600ms var(--ease-play, ease);
  animation: tk-drift 7s ease-in-out infinite;
  z-index: 3;
}
.tk-chaos-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes tk-drift {
  0%, 100% { translate: -50% -50%; }
  50% { translate: -50% calc(-50% - 10px); }
}
.l-notion { left: 17.5%; top: 22.0%; animation-delay: -1s; }
.l-jira   { left: 72.5%; top: 20.5%; animation-delay: -3s; }
.l-slack  { left: 45.5%; top: 48.0%; animation-delay: -5s; }
.l-gmail  { left: 89.0%; top: 58.5%; animation-delay: -6s; }
.l-figma  { left: 13.5%; top: 76.0%; animation-delay: -2s; }
.l-sheets { left: 65.5%; top: 84.0%; animation-delay: -4s; }

/* hand-drawn arrows, positioned exactly where they sat on the slide */
.tk-arrow {
  position: absolute;
  height: auto;
  opacity: 0;
  scale: 0.94;
  transition: opacity 520ms ease, scale 520ms var(--ease-play, ease);
  z-index: 1;
  pointer-events: none;
}
.tk-chaos.s1 .tk-arrow { opacity: 1; scale: 1; }
.a-loop1  { left: 29.7%; top: 22.6%; width: 12.5%; }
.a-up1    { left: 51.9%; top: 30.2%; width: 9.4%; }
.a-down1  { left: 76.0%; top: 27.4%; width: 8.8%; }
.a-thick1 { left: 60.4%; top: 47.2%; width: 15.4%; }
.a-squig  { left: 26.4%; top: 52.1%; width: 11.7%; }
.a-up2    { left: 17.4%; top: 39.2%; width: 4.5%; }
.a-down2  { left: 50.0%; top: 58.7%; width: 7.4%; }
.a-curve1 { left: 29.7%; top: 75.3%; width: 19.5%; }
.a-dbl    { left: 70.7%; top: 68.1%; width: 7.6%; }
.tk-chaos.s1 .a-up1    { transition-delay: 90ms; }
.tk-chaos.s1 .a-down1  { transition-delay: 180ms; }
.tk-chaos.s1 .a-thick1 { transition-delay: 270ms; }
.tk-chaos.s1 .a-squig  { transition-delay: 360ms; }
.tk-chaos.s1 .a-up2    { transition-delay: 450ms; }
.tk-chaos.s1 .a-down2  { transition-delay: 540ms; }
.tk-chaos.s1 .a-curve1 { transition-delay: 630ms; }
.tk-chaos.s1 .a-dbl    { transition-delay: 720ms; }

/* bubbles drop into the empty pockets of that constellation */
.tk-chaos-msg {
  position: absolute;
  padding: max(8px, 0.75cqw) max(10px, 1cqw);
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  box-shadow: 5px 5px 0 var(--ink);
  opacity: 0;
  translate: 0 14px;
  rotate: -0.6deg;
  transition: opacity 480ms ease, translate 480ms var(--ease-play, ease);
  z-index: 2;
}
.tk-chaos-msg span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: max(8px, 0.62cqw);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
}
.tk-chaos-msg p { margin: 0; font-size: max(11px, 0.95cqw); font-weight: 600; line-height: 1.35; }
/* balanced pinwheel: top-centre, right, left, bottom-centre — clear of every logo */
.m1 { left: 26%; top: 7.5%; width: 26%; }
.m2 { left: 71%; top: 30%; width: 26%; rotate: 0.6deg; }
.m3 { left: 4.5%; top: 45%; width: 27%; rotate: 0.6deg; }
.m4 { left: 24%; top: 78%; width: 29%; rotate: -0.6deg; }
.tk-chaos.s2 .m1,
.tk-chaos.s3 .m2,
.tk-chaos.s4 .m3,
.tk-chaos.s5 .m4 { opacity: 1; translate: 0 0; }
.tk-chaos-verdict {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -42%;
  width: min(480px, 84%);
  padding: clamp(20px, 3vw, 34px);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  box-shadow: 8px 8px 0 var(--yellow);
  opacity: 0;
  scale: 0.92;
  transition: opacity 480ms ease, scale 480ms var(--ease-play, ease), translate 480ms var(--ease-play, ease);
  z-index: 5;
}
.tk-chaos-verdict b {
  display: block;
  font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  line-height: 1.05;
}
.tk-chaos-verdict p { margin: 0; font-size: var(--cs-small); line-height: 1.5; opacity: 0.85; }
.tk-chaos.s6 .tk-chaos-verdict { opacity: 1; scale: 1; translate: -50% -50%; }
.tk-chaos.s6 .tk-chaos-msg { opacity: 0.12; }
.tk-chaos.s6 .tk-arrow { opacity: 0.28; }
.tk-chaos.s6 .tk-chaos-logo { filter: grayscale(0.6) blur(1px); opacity: 0.3; scale: 0.92; }
@media (max-width: 1100px) {
  .tk-chaos-stage { width: 100%; }
  .tk-chaos-msg { border-width: 1.5px; box-shadow: 3px 3px 0 var(--ink); padding: 6px 8px; }
  .tk-chaos-msg p { font-size: 9.5px; line-height: 1.25; }
  .tk-chaos-msg span { font-size: 7.5px; margin-bottom: 1px; }
}

/* ---------- stats bento ---------- */
.tk-stats {
  display: grid;
  grid-template-columns: 1.06fr 1.24fr 1.1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "hunt duo   onb"
    "hunt gauge exit";
  gap: clamp(12px, 1.5vw, 20px);
}
.s-hunt { grid-area: hunt; }
.s-duo { grid-area: duo; }
.s-onb { grid-area: onb; }
.s-gauges { grid-area: gauge; }
.s-exit { grid-area: exit; }

.tk-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 18px);
  padding: clamp(18px, 2.1vw, 30px);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: #fff;
  box-shadow: 6px 6px 0 var(--ink);
  opacity: 0;
  translate: 0 14px;
  transition: opacity 620ms ease, translate 720ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tk-stats.in .tk-stat { opacity: 1; translate: 0 0; }
.tk-stats.in .s-duo { transition-delay: 80ms; }
.tk-stats.in .s-onb { transition-delay: 160ms; }
.tk-stats.in .s-gauges { transition-delay: 240ms; }
.tk-stats.in .s-exit { transition-delay: 320ms; }

.tk-stat p {
  margin: 0;
  font-size: var(--cs-small);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}
.tk-stat p.mid { font-size: var(--cs-small); line-height: 1.4; }
.tk-stat p.lead { font-size: var(--cs-body); font-weight: 600; line-height: 1.22; letter-spacing: -0.012em; }
.tk-stat p em { font-style: normal; font-weight: 800; }
.tk-src {
  align-self: flex-start;
  margin-top: auto;
  padding: 5px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* cropped chart art from the original deck */
.tk-chart {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  scale: 0.96;
  transition: opacity 700ms ease 220ms, scale 900ms cubic-bezier(0.22, 1, 0.36, 1) 220ms;
}
.tk-stats.in .tk-chart { opacity: 1; scale: 1; }

.tk-chip {
  display: inline-flex;
  align-items: baseline;
  width: fit-content;
  padding: 8px 18px 12px;
  border-radius: 18px;
  font-family: "MD Nichrome Test", "Arial Narrow", Impact, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.tk-chip.pink { background: #ffe7ee; color: #f5305c; }
.tk-inline {
  display: inline-block;
  padding: 2px 10px 4px;
  border-radius: 10px;
  background: #ffe7ee;
  color: #f5305c;
  font-weight: 800;
}

/* charts grow into the free space; text stays quiet */
.s-hunt .c-donut { width: 100%; margin: auto; padding-block: clamp(8px, 1.6vh, 20px); box-sizing: content-box; }
.s-hunt { justify-content: flex-start; }
.s-duo .c-500 { width: 100%; }
.s-onb .c-bar { width: 100%; }
.s-gauges .c-gauges { width: 100%; margin: 0 auto; }
.tk-gauge-lbls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 30px);
  width: 100%;
  margin: clamp(2px, 0.8vh, 8px) auto 0;
  text-align: center;
  font-size: clamp(12px, 1.15vw, 15px);
  line-height: 1.2;
}
.s-exit .c-exit { width: 100%; margin: clamp(8px, 1.6vh, 20px) 0; }
.s-duo, .s-onb { justify-content: flex-start; }
.s-exit { justify-content: flex-start; }
.s-gauges { justify-content: center; gap: clamp(6px, 1vw, 12px); }
.tk-gauge-lbls span { font-size: clamp(11px, 1vw, 14px); }

@media (max-width: 1000px) {
  .tk-stats {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hunt duo"
      "hunt onb"
      "gauge exit";
  }
}
@media (max-width: 620px) {
  .tk-stats {
    grid-template-columns: 1fr;
    grid-template-areas: "hunt" "duo" "onb" "gauge" "exit";
  }
}

/* ---------- iceberg scene ---------- */
.tk-berg {
  position: relative;
  height: 330svh;
  margin: clamp(48px, 9svh, 110px) 0;
}
.tk-berg-pin {
  position: sticky;
  top: clamp(20px, 5svh, 56px);
  height: calc(100svh - clamp(20px, 5svh, 56px));
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: var(--paper);
  /* centered content box; the art owns the left column, the copy the right */
  --box: min(1440px, 92vw);
  --edge: calc((100vw - var(--box)) / 2);
  --artw: calc(var(--sceneh, 60svh) * 1400 / 1648);
  --imgw: max(calc(var(--box) * 0.26), var(--artw));
  --colgap: clamp(24px, 3.2vw, 72px);
  --il: var(--edge);
  --ir: calc(var(--edge) + var(--imgw));
  --textleft: calc(var(--edge) + var(--imgw) + var(--colgap));
}
.tk-berg-title {
  margin: 0;
  padding: clamp(18px, 4.5svh, 48px) var(--edge) clamp(16px, 3.5svh, 36px) var(--textleft);
  text-align: left;
  font-size: clamp(28px, 3.6vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}
.tk-berg-scene {
  position: relative;
  height: 100%;
  min-height: 0;
}
.tk-berg-grads,
.tk-berg-washes,
.tk-berg-rows {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 30.4fr 30.3fr 39.3fr;
}
.tk-berg-grads { z-index: 0; }
.tk-berg-grads span { display: block; }
.tk-berg-grads .g1 { background: linear-gradient(90deg, rgb(205 237 254) 0, rgb(205 237 254) var(--il), rgb(232 242 246) var(--ir), rgb(245 240 229) 100%); }
.tk-berg-grads .g2 { background: linear-gradient(90deg, rgb(98 169 255) 0, rgb(98 169 255) var(--il), rgb(202 225 247) var(--ir), rgb(245 240 229) 100%); }
.tk-berg-grads .g3 { background: linear-gradient(90deg, rgb(21 69 178) 0, rgb(21 69 178) var(--il), rgb(199 212 233) var(--ir), rgb(245 240 229) 100%); }

.tk-berg-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--edge);
  width: var(--imgw);
  z-index: 1;
  display: flex;
  justify-content: center;
  overflow: visible;
}
/* height-driven: the art always fills the scene so the waterline meets the band edge */
.tk-berg-art {
  flex: 0 0 auto;
  height: 100%;
  width: var(--artw);
  max-width: none;
}
.tk-berg-art img { display: block; width: 100%; height: 100%; object-fit: contain; }

.tk-berg-washes { z-index: 2; pointer-events: none; }
.tk-berg-washes span {
  display: block;
  background: var(--paper);
  opacity: 0.94;
  transition: opacity 520ms ease;
}

.tk-berg-rows { z-index: 3; }
.tk-berg-row {
  display: grid;
  align-content: center;
  gap: clamp(8px, 1.4svh, 16px);
  padding: 0 var(--edge) 0 var(--textleft);
  opacity: 0.28;
  transition: opacity 460ms ease;
}
.tk-berg-row h4 {
  margin: 0;
  font-size: clamp(19px, 2.1vw, 32px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.tk-berg-row h4 b { font-weight: 800; }
.tk-berg-row p {
  margin: 0;
  max-width: 54ch;
  font-size: var(--cs-small);
  line-height: 1.5;
  color: rgb(16 20 23 / 0.72);
}
.tk-berg.s1 .b1, .tk-berg.s2 .b2, .tk-berg.s3 .b3 { opacity: 1; }
.tk-berg.s1 .f1, .tk-berg.s2 .f2, .tk-berg.s3 .f3 { opacity: 0; }
.tk-berg.s2 .b1, .tk-berg.s3 .b1, .tk-berg.s3 .b2 { opacity: 0.3; }
.tk-berg.s2 .f1, .tk-berg.s3 .f1, .tk-berg.s3 .f2 { opacity: 0.94; }

@media (max-width: 1100px) {
  .tk-berg-pin { --box: 94vw; --imgw: max(calc(var(--box) * 0.22), var(--artw)); }
}
/* narrow: art sinks behind the copy, text takes the full column */
@media (max-width: 820px) {
  .tk-berg { height: 300svh; }
  .tk-berg-pin {
    --box: 92vw;
    --imgw: var(--box);
    --textleft: var(--edge);
    --il: calc(var(--edge) - 2vw);
    --ir: calc(var(--edge) + var(--imgw) * 0.8);
  }
  .tk-berg-img { left: 0; width: 100%; opacity: 0.34; }
  .tk-berg-title { font-size: clamp(24px, 6vw, 34px); }
  .tk-berg-row p br { display: none; }
}

/* ---------- problem + brief: the arrival beat ---------- */
.tk-brief {
  position: relative;
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin: clamp(34px, 6svh, 76px) 0 clamp(26px, 4svh, 50px);
  padding: clamp(24px, 3.4vw, 46px);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: var(--yellow);
  box-shadow: 8px 8px 0 var(--ink);
}
.tk-brief-ask { padding-top: clamp(20px, 3vw, 32px); border-top: 2.5px solid var(--ink); }
.tk-brief-tag {
  display: inline-block;
  margin-bottom: clamp(10px, 1.4vw, 16px);
  padding: 5px 13px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tk-brief p { margin: 0; font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; text-wrap: pretty; }
.tk-brief-problem p { max-width: 46ch; font-size: clamp(16px, 1.55vw, 22px); font-weight: 700; line-height: 1.32; }
.tk-brief-ask p { max-width: 30ch; font-size: clamp(22px, 2.7vw, 38px); }
.tk-brief p em { font-style: normal; text-decoration: underline 3px; text-underline-offset: 5px; }

/* transition into research */
.tk-tonext {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
  margin: clamp(26px, 5svh, 60px) 0 clamp(6px, 2svh, 20px);
}
.tk-tonext-line { flex: 1 1 auto; height: 2px; background: rgb(16 20 23 / 0.25); }
.tk-tonext-label {
  flex: 0 0 auto;
  padding: 6px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- research methods ---------- */
.tk-methods {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.6vw, 30px);
}
.tk-method-col {
  padding: clamp(24px, 3.2vw, 40px);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 6px 6px 0 var(--ink);
}
.tk-method-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--tko-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tk-method-h {
  margin: 0 0 8px;
  max-width: 22ch;
  font-family: "MD Nichrome Test", "Arial Black", sans-serif;
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.tk-method-meta {
  display: block;
  margin-bottom: clamp(18px, 2.2vw, 26px);
  padding-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 2px dashed color-mix(in oklab, var(--ink) 28%, transparent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.68;
}
.tk-method-col ul, .tk-incentives ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tk-method-col ul { gap: clamp(12px, 1.5vw, 17px); }
.tk-method-col li { padding-left: 30px; line-height: 1.42; }
.tk-method-col li::before { font-size: 1.05em; opacity: 0.85; }
.tk-method-col li, .tk-incentives li {
  position: relative;
  padding-left: 22px;
  font-size: var(--cs-small);
  line-height: 1.45;
  font-weight: 500;
}
.tk-method-col li::before, .tk-incentives li::before {
  content: "→";
  position: absolute;
  left: 0;
  font-weight: 800;
  color: var(--tko);
}
@media (max-width: 860px) {
  .tk-methods { grid-template-columns: 1fr; }
}

/* ---------- quotes ---------- */
.tk-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.8vw, 20px);
}
.tk-quote {
  margin: 0;
  padding: clamp(16px, 2.2vw, 24px);
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
  rotate: -0.5deg;
}
.tk-quote:nth-child(2n) { rotate: 0.6deg; }
.tk-quote p {
  margin: 0 0 10px;
  font-size: var(--cs-body);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.tk-quote em { font-style: normal; background: var(--yellow); padding: 0 4px; }
.tk-quote span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
@media (max-width: 720px) {
  .tk-quotes { grid-template-columns: 1fr; }
}

/* ---------- rivals ---------- */
.tk-rivals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.8vw, 20px);
}
.tk-rival {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(16px, 2.2vw, 24px);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 6px 6px 0 var(--ink);
}
.tk-rival header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tk-rival h4 { margin: 0; font-size: clamp(18px, 1.9vw, 23px); letter-spacing: -0.01em; }
.tk-rival header span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.6;
  text-align: right;
}
.tk-rival p { margin: 0; font-size: var(--cs-fine); line-height: 1.5; padding-left: 24px; position: relative; }
.tk-rival p::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
}
.tk-rival p.ok::before { content: "✓"; color: #2f9e44; }
.tk-rival p.gap::before { content: "✕"; color: #e5484d; }
.tk-rival p.gap { font-weight: 600; }
.tk-rival p.gap em { font-style: normal; background: var(--tko-soft); padding: 0 3px; }
@media (max-width: 980px) {
  .tk-rivals { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tk-rivals { grid-template-columns: 1fr; }
}

/* ---------- gap matrix ---------- */
.tk-matrix {
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: 7px 7px 0 var(--ink);
  overflow: hidden;
}
.tk-mx-row {
  display: grid;
  grid-template-columns: 2.2fr repeat(4, 1fr);
  align-items: center;
  border-bottom: 1.5px solid rgb(28 30 38 / 0.16);
}
.tk-mx-row:last-of-type { border-bottom: none; }
.tk-mx-row > span {
  padding: clamp(12px, 1.6vw, 18px) clamp(10px, 1.4vw, 18px);
  text-align: center;
  font-size: clamp(17px, 1.7vw, 22px);
}
.tk-mx-row > .tk-mx-feat {
  text-align: left;
  font-size: clamp(14px, 1.35vw, 17px);
  font-weight: 700;
  line-height: 1.28;
}
.tk-mx-row > .tk-mx-feat em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-weight: 500;
  font-size: 0.82em;
  line-height: 1.35;
  opacity: 0.6;
}
.tk-mx-row > span:not(.tk-mx-feat) { font-weight: 700; }
.tk-mx-row.head > span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--paper);
  border-bottom: 2.5px solid var(--ink);
}
.tk-mx-row > span:nth-child(5n) { background: rgb(255 214 10 / 0.22); }
.tk-mx-row.head > span.tk-mx-tk { background: var(--yellow); }
.tk-mx-row .y { color: #2f9e44; }
.tk-mx-row .y.tk { color: var(--ink); }
.tk-mx-row .h { color: #b98900; }
.tk-mx-row .n { color: rgb(28 30 38 / 0.3); }
.tk-mx-legend {
  display: flex;
  gap: 18px;
  padding: 10px 16px;
  border-top: 2.5px solid var(--ink);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tk-mx-legend i { font-style: normal; margin-right: 4px; }
.tk-mx-legend .y { color: #2f9e44; }
.tk-mx-legend .h { color: #b98900; }
.tk-mx-legend .n { color: rgb(28 30 38 / 0.4); }
.tk-mx-legend i { font-weight: 700; }
@media (max-width: 720px) {
  .tk-mx-row { grid-template-columns: 1.6fr repeat(4, 0.7fr); }
  .tk-mx-row.head > span { font-size: 9.5px; padding: 10px 4px; }
}

/* ---------- personas ---------- */
.tk-personas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.6vw, 30px);
}
.tk-persona {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: clamp(20px, 2.8vw, 32px);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: 7px 7px 0 var(--ink);
  rotate: -0.6deg;
}
.tk-persona.senior { rotate: 0.7deg; }
.tk-persona img {
  width: clamp(88px, 9vw, 128px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  object-fit: cover;
}
.tk-persona h4 { margin: 6px 0 0; font-size: clamp(20px, 2.2vw, 27px); letter-spacing: -0.01em; }
.tk-persona p { margin: 0; font-size: var(--cs-small); line-height: 1.5; }
.tk-persona-tag {
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--tko-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tk-persona.senior .tk-persona-tag { background: #d9f2d9; }
@media (max-width: 720px) {
  .tk-personas { grid-template-columns: 1fr; }
}

/* ---------- tenets / india / learnings card grids ---------- */
.tk-tenets, .tk-india, .tk-learn, .tk-future { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 1080px) {
  .tk-tenets, .tk-india, .tk-learn, .tk-future { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 620px) {
  .tk-tenets, .tk-india, .tk-learn, .tk-future { grid-template-columns: 1fr !important; }
}

/* ---------- systems map ---------- */
.tk-sys {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: clamp(22px, 3vw, 40px);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background:
    radial-gradient(circle, rgb(28 30 38 / 0.07) 0 1px, transparent 1.4px) 0 0 / 22px 22px,
    #fff;
  box-shadow: 7px 7px 0 var(--ink);
}
.tk-sys-app {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.tk-sys-app img { width: 26px; height: 26px; border-radius: 50%; }
.tk-sys-wire { width: 2.5px; height: clamp(18px, 2.6svh, 30px); background: var(--ink); }
.tk-sys-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
  width: 100%;
}
.tk-sys-pillar {
  display: grid;
  gap: 2px;
  padding: clamp(14px, 1.9vw, 22px);
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  text-align: center;
}
.tk-sys-pillar b { font-size: clamp(14.5px, 1.5vw, 19px); letter-spacing: -0.01em; }
.tk-sys-pillar span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
}
.tk-sys-brain {
  width: 100%;
  padding: clamp(12px, 1.7vw, 18px);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--ink);
  text-align: center;
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 800;
}
.tk-sys-brain small {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.tk-sys-feet {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(10px, 1.6vw, 18px);
  width: 100%;
  margin-top: clamp(18px, 2.6svh, 30px);
}
.tk-sys-foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(14px, 1.8vw, 26px);
  row-gap: 8px;
  padding: clamp(12px, 1.7vw, 18px);
  border: 2px dashed var(--ink);
  border-radius: 12px;
  background: #fff;
}
.tk-sys-foot b {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tk-sys-foot span { font-size: clamp(12px, 1.1vw, 14px); line-height: 1.35; opacity: 0.8; text-align: right; max-width: 22ch; }
.tk-sys-foot b { white-space: nowrap; }
.tk-sys-logos { display: block; position: static; grid-column: 1 / -1; grid-row: 2; width: 100%; height: auto; margin: 0; }
.tk-sys-foot.wide .tk-sys-logos { min-height: 26px; }
.tk-sys-logos--tk-noop { display: block; }
.tk-sys-foot .tk-sys-logos--cloud {
  grid-column: 1 / -1;
  position: static;
  width: auto;
  max-width: 120px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.tk-sys-feet { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; }
.tk-sys-foot { align-content: start; }

/* ---------- process spine ---------- */
.tk-spine-wrap {
  position: relative;
  margin: clamp(24px, 3.4svh, 40px) 0 clamp(30px, 4.4svh, 52px);
}
.tk-spine-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  height: 2.5px;
  background: repeating-linear-gradient(to right, var(--ink) 0 9px, transparent 9px 17px);
  opacity: 0.35;
}
.tk-spine-bracket {
  position: absolute;
  left: 0;
  width: calc(83.33% - 8px);
  top: -9px;
  height: 16px;
  border: 2.5px solid var(--ink);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  opacity: 0.55;
}
.tk-spine-bracket em {
  position: absolute;
  left: 50%;
  top: -11px;
  transform: translateX(-50%);
  padding: 0 10px;
  background: var(--paper, #fdf6e3);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tk-spine {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: spine;
}
.tk-spine li {
  position: relative;
  display: grid;
  gap: 5px;
  align-content: start;
  padding: clamp(38px, 3.4vw, 46px) clamp(12px, 1.2vw, 18px) clamp(16px, 1.6vw, 22px);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
  counter-increment: spine;
}
.tk-spine li::before {
  content: "0" counter(spine);
  position: absolute;
  top: -2.5px;
  left: clamp(12px, 1.2vw, 18px);
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border: 2.5px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: var(--yellow, #ffd60a);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tk-spine li.last { background: var(--yellow, #ffd60a); }
.tk-spine li.last::before { background: #fff; }
.tk-spine li b {
  font-family: "MD Nichrome Test", "Arial Black", sans-serif;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.02;
  letter-spacing: -0.005em;
}
.tk-spine li span { font-size: clamp(12.5px, 1.1vw, 14.5px); line-height: 1.4; opacity: 0.74; text-wrap: pretty; }

/* ---------- naming ---------- */
.tk-name {
  display: grid;
  grid-template-columns: minmax(210px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(24px, 3.4vw, 52px);
  align-items: start;
  margin: clamp(18px, 2.6svh, 30px) 0;
  padding: clamp(24px, 3.2vw, 40px);
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  background: #fff;
  box-shadow: 6px 6px 0 var(--ink);
}
.tk-name-word { display: grid; gap: 6px; }
.tk-name-word > b.tk-name-script {
  font-family: "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", system-ui, sans-serif;
  font-size: clamp(40px, 4.4vw, 66px);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}
.tk-name-word b {
  font-family: "MD Nichrome Test", "Arial Black", sans-serif;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.tk-name-word > span.tk-name-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.62;
}
.tk-name-body { display: grid; gap: 14px; }
.tk-name-body p { margin: 0; font-size: var(--cs-body); line-height: 1.55; text-wrap: pretty; }
.tk-name-body em { font-style: normal; background: var(--tko-soft); padding: 0 3px; }
@media (max-width: 900px) {
  .tk-spine { grid-template-columns: 1fr 1fr; }
  .tk-spine-rail { display: none; }
  .tk-name { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .tk-sys-pillars { grid-template-columns: 1fr 1fr; }
  .tk-sys-foot { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tk-sys-foot span { text-align: left; max-width: none; }
  .tk-sys-feet { grid-template-columns: 1fr; }
}

/* ---------- surface decision (extends cs-diagram look) ---------- */
.tk-surface {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(10px, 1.8vw, 22px);
  margin: clamp(26px, 4.5svh, 54px) 0;
}
@media (max-width: 720px) {
  .tk-surface { grid-template-columns: 1fr; }
  .tk-surface .cs-arrowmid { rotate: 90deg; justify-self: center; }
}

/* ---------- seat markers ---------- */
.tk-seat {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(48px, 9svh, 110px) 0 clamp(10px, 2svh, 20px);
  padding-top: clamp(20px, 3.4svh, 36px);
  border-top: 2.5px dashed var(--ink);
}
.tk-seat img {
  width: clamp(64px, 6.4vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.tk-seat h3 {
  margin: 6px 0 0;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}

/* ---------- pinned browser sequences ---------- */
.tk-browserpin .cs-onb-pin {
  grid-template-columns: minmax(300px, 0.72fr) 1.28fr;
  gap: clamp(20px, 3vw, 44px);
}
.tk-onb-frame {
  position: relative;
  width: 100%;
  max-width: 880px;
  aspect-ratio: 1500 / 1013;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  box-shadow: 7px 7px 0 var(--ink);
  overflow: hidden;
}
.tk-browserpin .cs-onb-gif { object-fit: contain; background: #fff; }
@media (max-width: 860px) {
  .tk-browserpin .cs-onb-pin { grid-template-columns: 1fr; }
  .tk-onb-frame { max-width: none; }
}

/* ---------- playbook loop ---------- */
.tk-loop {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 2.8vw, 34px);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: var(--tko-soft);
  box-shadow: 7px 7px 0 var(--ink);
}
.tk-loop-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tk-loop-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 1.4vw, 16px);
}
.tk-loop-node {
  flex: 1 1 140px;
  padding: clamp(12px, 1.7vw, 18px);
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
  text-align: center;
  font-weight: 800;
  font-size: clamp(13.5px, 1.35vw, 16.5px);
  line-height: 1.25;
}
.tk-loop-node.alt { background: var(--yellow); }
.tk-loop-node small { font-weight: 600; font-size: 0.8em; opacity: 0.75; }
.tk-loop-arrow { font-style: normal; font-weight: 900; font-size: clamp(16px, 1.8vw, 22px); }
.tk-loop-back {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 700;
}

/* ---------- doc/canvas + briefbot tab panels ---------- */
.tk-doccanvas, .tk-briefbot { margin: clamp(26px, 4.5svh, 54px) 0; }
.tk-doccanvas .cs-boost-panel, .tk-briefbot .cs-boost-panel { padding-top: 6px; }

/* ---------- galaxy scene ---------- */
.tk-galaxy {
  position: relative;
  height: 340svh;
  margin: clamp(30px, 6svh, 70px) calc(var(--cs-gutter) * -1);
}
.tk-galaxy-pin {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) 1.22fr;
  gap: clamp(20px, 3.4vw, 54px);
  align-items: center;
  height: 100svh;
  padding: clamp(20px, 4svh, 44px) var(--cs-gutter);
  background: var(--tk-navy);
  color: #f3efe4;
}
.tk-galaxy-copy { display: grid; gap: clamp(14px, 2.4svh, 26px); }
.tk-galaxy-step {
  padding: clamp(14px, 1.9vw, 22px) clamp(16px, 2.2vw, 26px);
  border: 2px solid rgb(243 239 228 / 0.35);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.04);
  opacity: 0.3;
  translate: 0 6px;
  transition: opacity 420ms ease, translate 420ms var(--ease-play, ease), border-color 420ms ease;
}
.tk-galaxy-step p { margin: 8px 0 0; font-size: var(--cs-small); line-height: 1.5; }
.tk-galaxy-step b { color: #ffb066; }
.tk-galaxy-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ffb066;
}
.tk-galaxy.s1 .g1, .tk-galaxy.s2 .g2, .tk-galaxy.s3 .g3 {
  opacity: 1;
  translate: 0 0;
  border-color: rgb(255 176 102 / 0.75);
}
.tk-galaxy.s2 .g1, .tk-galaxy.s3 .g1, .tk-galaxy.s3 .g2 { opacity: 0.5; }
.tk-galaxy-stage {
  position: relative;
  align-self: stretch;
  margin: clamp(16px, 3svh, 36px) 0;
  border-radius: 18px;
  background: radial-gradient(120% 120% at 50% 20%, var(--tk-navy-2), var(--tk-navy) 70%);
  border: 2px solid rgb(243 239 228 / 0.25);
  overflow: hidden;
}
.tk-galaxy-spark {
  position: absolute;
  width: 54px;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 14px rgb(255 140 60 / 0.55));
  opacity: 0;
  scale: 0.6;
  transition: opacity 600ms ease, scale 600ms var(--ease-play, ease);
}
.tk-galaxy-spark.hero {
  width: clamp(80px, 8vw, 120px);
  left: 50%;
  top: 42%;
  translate: -50% -50%;
  animation: tk-drift 5s ease-in-out infinite;
}
.tk-galaxy.s1 .tk-galaxy-spark.hero { opacity: 1; scale: 1; }
.tk-galaxy.s3 .tk-galaxy-spark.hero { opacity: 0.55; scale: 0.7; }
.c1 { left: 12%; top: 26%; } .c2 { left: 26%; top: 14%; } .c3 { left: 38%; top: 60%; }
.c4 { left: 56%; top: 44%; } .c5 { left: 72%; top: 26%; } .c6 { left: 86%; top: 40%; }
.tk-galaxy.s2 .tk-galaxy-spark:not(.hero) { opacity: 1; scale: 1; }
.tk-galaxy.s2 .tk-galaxy-spark.hero { opacity: 0.7; scale: 0.75; }
.tk-galaxy-lines {
  position: absolute;
  inset: 8% 4% auto;
  width: 92%;
  height: 64%;
}
.tk-galaxy-lines path {
  stroke: rgb(255 200 140 / 0.55);
  stroke-width: 0.45;
  stroke-dasharray: 2 2.4;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 1200ms ease;
}
.tk-galaxy.s2 .tk-galaxy-lines path { stroke-dashoffset: 0; }
.tk-galaxy-field {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
  background-image:
    radial-gradient(circle at 8% 78%, rgb(255 150 70 / 0.9) 0 2px, transparent 3.5px),
    radial-gradient(circle at 18% 88%, rgb(255 190 120 / 0.8) 0 1.6px, transparent 3px),
    radial-gradient(circle at 30% 74%, rgb(255 150 70 / 0.85) 0 2px, transparent 3.5px),
    radial-gradient(circle at 44% 86%, rgb(255 190 120 / 0.75) 0 1.6px, transparent 3px),
    radial-gradient(circle at 58% 78%, rgb(255 150 70 / 0.9) 0 2.2px, transparent 3.8px),
    radial-gradient(circle at 70% 90%, rgb(255 190 120 / 0.8) 0 1.6px, transparent 3px),
    radial-gradient(circle at 82% 76%, rgb(255 150 70 / 0.85) 0 2px, transparent 3.5px),
    radial-gradient(circle at 92% 88%, rgb(255 190 120 / 0.75) 0 1.8px, transparent 3.2px),
    radial-gradient(circle at 14% 60%, rgb(255 170 90 / 0.5) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 50% 64%, rgb(255 170 90 / 0.5) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 78% 58%, rgb(255 170 90 / 0.5) 0 1.4px, transparent 2.6px);
}
.tk-galaxy.s3 .tk-galaxy-field { opacity: 1; }
.tk-galaxy.s3 .tk-galaxy-spark:not(.hero) { opacity: 0.85; scale: 0.8; }
@media (max-width: 860px) {
  .tk-galaxy-pin { grid-template-columns: 1fr; grid-template-rows: auto 0.9fr; }
  .tk-galaxy-stage { margin-top: 0; }
}

/* ---------- incentives ---------- */
.tk-incentives {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(16px, 2vw, 22px);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--ink);
}
.tk-incentives-note {
  margin: 0;
  padding: 13px 15px;
  border: 2px dashed var(--ink);
  border-radius: 10px;
  font-size: var(--cs-small);
  line-height: 1.5;
  font-weight: 600;
}
.tk-incentives-note em { font-style: normal; background: var(--yellow); padding: 0 3px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tk-chaos-logo, .tk-galaxy-spark.hero { animation: none; }
  .tk-chaos-msg, .tk-chaos-verdict, .tk-arrow, .tk-berg-step, .tk-berg-band, .tk-berg-mark,
  .tk-galaxy-step, .tk-galaxy-spark, .tk-galaxy-lines path, .tk-galaxy-field { transition: none; }
}

/* ---------- quiet section labels (no yellow chips on this case) ---------- */
.cs-label {
  padding: 0;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: rgb(16 20 23 / 0.5);
}
.cs-label::before {
  width: 26px;
  height: 2px;
  border-radius: 0;
  background: rgb(16 20 23 / 0.35);
}
.cs-label:hover { transform: none; box-shadow: none; }
.cs-label.r { display: flex; margin: clamp(34px, 6.5svh, 78px) 0 clamp(14px, 2svh, 22px); }
.cs-label.r + .cs-para,
.cs-label.r + .cs-statement,
.cs-label.r + .cs-figure,
.cs-label.r + figure { margin-top: 0; }
.tk-seat .cs-label { margin-bottom: 10px; }
.cs-closing .cs-label { margin-bottom: 6px; }

/* =========================================================
   cover shell: exactly one viewport tall — chapter 01 never peeks
   ========================================================= */
.tk-cover {
  box-sizing: border-box;
  min-height: 100svh;
  height: 100svh;
  max-height: 100svh;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  gap: clamp(10px, 2svh, 24px);
  padding-block: clamp(72px, 15svh, 190px) clamp(20px, 3.4svh, 44px);
  overflow: clip;
}
.tk-cover .cs-cover-top { margin-bottom: 0; }

.tk-cover-grid {
  height: 100%;
  min-height: 0;
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(6px, 1svh, 14px);
  align-content: stretch;
  align-items: stretch;
}

/* copy band — same rhythm as the standard .cs-cover stack */
.tk-cover-copy {
  min-width: 0;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "pill" "title" "side";
  justify-items: start;
  align-items: start;
  row-gap: clamp(10px, 1.4svh, 18px);
  container-type: inline-size;
}
/* chip: logo-led, name only */
.tk-cover-copy > .cs-client {
  gap: 12px;
  padding: 9px 20px 9px 12px;
  font-size: clamp(15px, 1.15vw, 19px);
  letter-spacing: 0.01em;
}
.tk-cover-copy > .cs-client .tk-client-logo {
  width: clamp(26px, 2.1vw, 34px);
  height: clamp(26px, 2.1vw, 34px);
}
.tk-cover-copy > .cs-client { grid-area: pill; }
.tk-cover .cs-cover-title {
  grid-area: title;
  max-width: 100%;
  font-size: min(6.2cqi, 10svh, 122px);
  line-height: 0.88;
  letter-spacing: -0.006em;
  overflow-wrap: normal;
  hyphens: none;
}
.tk-cover .tk-cover-sub {
  grid-area: side;
  max-width: 68ch;
  margin: 0;
  font-size: clamp(15px, min(1.5vw, 2.7svh), 24px);
}
/* cue is optional in the stacked cover — the frame gets the room instead */
.tk-cover .cs-cover-cue { display: none; }

/* screen band: dots top-left, note top-right, frame below — all left-aligned with the copy */
.tk-cover-art {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 100%;
  grid-template-rows: minmax(0, 1fr);
  justify-items: start;
  padding-top: clamp(54px, 7svh, 76px);
}
.tk-frame-hold {
  /* fills the leftover hero height; width capped so the box never gets letterbox-thin */
  position: relative;
  min-height: 0;
  /* width is the only driver; ratio derives height, capped by the row's height */
  width: min(100%, calc(200cqh - 2px));
  height: auto;
  aspect-ratio: 1500 / 749;
}
.tk-frame-hold .tk-slide-dots {
  position: absolute;
  top: 0;
  left: 2px;
  z-index: 4;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-start;
  transform: translateY(-260%);
}
.tk-cover-toolbar {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tk-slide-dots { flex-direction: row; flex-wrap: nowrap; gap: 8px; justify-content: flex-start; }
.tk-cover-note-wrap {
  position: absolute;
  top: 0;
  right: clamp(10px, 1.4vw, 26px);
  z-index: 4;
  display: flex;
  transform: translateY(-52%);
}
.tk-cover-art .tk-slideshow {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.tk-cover-art .tk-slideshow img { object-fit: cover; object-position: center top; }
.tk-cover-note-wrap .tk-cover-note { max-width: none; overflow: visible; }
.tk-cover-note-wrap .tk-cover-note {
  position: static;
  left: auto;
  top: auto;
  transform: rotate(-2deg);
}

@media (max-width: 980px) {
  .tk-cover .tk-cover-sub { max-width: 46ch; font-size: clamp(14px, 2.2svh, 18px); }
  .tk-cover .cs-cover-title { font-size: min(11.5cqi, 9svh, 66px); }
}


/* ---------- story beats (ch. 04) ---------- */
.tk-beat {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(34px, 6svh, 76px) 0;
}
.tk-beat-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(16px, 2vw, 28px);
  row-gap: 6px;
  align-items: start;
  padding-bottom: clamp(12px, 1.6vw, 18px);
  border-bottom: 2.5px solid var(--ink);
}
.tk-beat-n {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: clamp(46px, 4vw, 62px);
  height: clamp(46px, 4vw, 62px);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow, #ffd60a);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700;
}
.tk-beat-time {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}
.tk-beat-head h4 {
  grid-column: 2;
  margin: 0;
  font-family: "MD Nichrome Test", "Arial Black", sans-serif;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.008em;
}
.tk-beat-head p {
  grid-column: 2;
  margin: 4px 0 0;
  max-width: 70ch;
  font-size: var(--cs-small);
  line-height: 1.5;
  text-wrap: pretty;
}
.tk-beat-shot { margin: 0; }
.tk-beat-shot > img { width: 100%; height: auto; }
@media (max-width: 640px) {
  .tk-beat-head { grid-template-columns: minmax(0, 1fr); }
  .tk-beat-n { grid-row: auto; }
  .tk-beat-time, .tk-beat-head h4, .tk-beat-head p { grid-column: 1; }
}


/* ---------- small screens: hero + beats ---------- */
@media (max-width: 760px) {
  .tk-cover {
    height: auto;
    max-height: none;
    min-height: 100svh;
    overflow: visible;
    grid-template-rows: auto;
    padding-block: clamp(18px, 3svh, 32px) clamp(20px, 3svh, 34px);
  }
  .tk-cover-grid { grid-template-rows: auto auto; }
  .tk-cover .cs-cover-title { font-size: min(11cqi, 9.5svh, 58px); }
  .tk-cover .tk-cover-sub { font-size: clamp(14px, 3.6vw, 17px); max-width: 44ch; }
  .tk-cover-copy > .cs-client { font-size: 14px; padding: 8px 16px 8px 10px; }
  .tk-cover-copy > .cs-client .tk-client-logo { width: 24px; height: 24px; }
  /* frame becomes width-driven so the whole screen stays visible */
  .tk-cover-art { padding-top: clamp(30px, 5svh, 44px); }
  .tk-frame-hold { height: auto; width: 100%; aspect-ratio: 1500 / 749; }
  .tk-frame-hold .tk-slide-dots { transform: translateY(-150%); }
  .tk-cover-note-wrap { right: 4px; }
  .tk-cover-note-wrap .tk-cover-note { font-size: 10.5px; padding: 5px 10px; }
}
@media (max-width: 560px) {
  .tk-beat { margin: clamp(26px, 5svh, 40px) 0; }
  .tk-beat-n { width: 40px; height: 40px; font-size: 14px; }
  .tk-beat-head h4 { font-size: clamp(21px, 6.2vw, 28px); }
  .tk-beat-head p { font-size: 15px; }
  .tk-spine { grid-template-columns: 1fr; }
  .tk-spine li { padding-top: 34px; }
  .tk-hook-photos { gap: 20px; }
  .tk-mx-row { grid-template-columns: 1.4fr repeat(4, 0.62fr); }
  .tk-mx-row > .tk-mx-feat { font-size: 13px; }
  .tk-mx-row > .tk-mx-feat em { font-size: 0.8em; }
  .tk-method-h { font-size: clamp(20px, 5.6vw, 26px); }
  .tk-name { padding: 20px; }
  .tk-sys-logos { min-height: 0; }
}


/* ---------- remove label dashes & seat dividers (ch.04 cleanup) ---------- */
.cs-label::before { display: none; }
.tk-seat { border-top: 0; padding-top: 0; }

/* duos: full-width by default so screens can breathe; .pair keeps crops side by side */
.tk-duo { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5svh, 60px); }
.tk-duo.pair { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5svh, 60px); }
.tk-duo .tk-cap { font-size: var(--cs-small); max-width: 78ch; }
@media (max-width: 700px) {
  .tk-duo.pair { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- hero frame: always full column width (user-set size) ---------- */
.tk-cover { height: auto; max-height: none; min-height: 100svh; overflow: visible; }
.tk-cover-art { padding-top: clamp(44px, 5.6svh, 72px); }
.tk-frame-hold { width: 100%; height: auto; aspect-ratio: 1500 / 749; }
.tk-cover-art .tk-slideshow { width: 100%; height: 100%; }


/* hero grows with its content instead of overflowing into chapter 01 */
.tk-cover { grid-template-rows: auto; align-content: start; padding-bottom: clamp(28px, 5svh, 64px); }
.tk-cover-grid { height: auto; grid-template-rows: auto auto; align-content: start; }
.tk-cover-art { height: auto; }

.tk-cover-art { grid-template-rows: auto; min-height: 0; }

.tk-cover-art { container-type: normal; }


/* ---------- readable captions + no rules above screens ---------- */
.tk-beat-head { border-bottom: 0; padding-bottom: 0; }
.cs-figure figcaption.tk-cap,
.tk-fig figcaption.tk-cap,
.tk-duo-fig figcaption.tk-cap,
.tk-cap {
  margin-top: clamp(14px, 1.8vw, 20px);
  max-width: 74ch;
  font-family: inherit;
  font-size: var(--cs-small);
  line-height: 1.5;
  letter-spacing: 0;
  opacity: 1;
  color: color-mix(in oklab, var(--ink) 82%, transparent);
  text-wrap: pretty;
}
.tk-cap::before {
  content: "";
  display: block;
  width: 26px;
  height: 2.5px;
  margin-bottom: 10px;
  background: var(--yellow, #ffd60a);
}
.tk-duo .tk-cap { font-size: var(--cs-small); }


/* ---------- design-chapter hero reveal ---------- */
.tk-hero {
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: 14px;
  margin: clamp(40px, 7svh, 90px) 0 clamp(30px, 5svh, 64px);
}
.tk-hero-rail { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: start; }
.tk-hero-badge { grid-column: 1 / -1; }
.tk-hero-line { grid-column: 1 / -1; max-width: 24ch; }
.tk-hero-facts { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tk-hero-facts { grid-template-columns: minmax(0, 1fr); } }
.tk-hero-frame { min-width: 0; }
.tk-hero-rail { display: grid; gap: 14px; padding-bottom: 6px; }
.tk-hero-badge {
  justify-self: start;
  padding: 5px 13px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tk-hero-line {
  margin: 0;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 800;
  line-height: 1.18;
  text-wrap: balance;
}
.tk-hero-facts { display: grid; gap: 9px; margin: 4px 0 0; padding: 0; list-style: none; }
.tk-hero-facts li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: clamp(14px, 1.8vw, 18px);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 5px 5px 0 var(--ink);
  font-size: clamp(15px, 1.25vw, 17.5px);
  font-weight: 600;
  line-height: 1.32;
}
.tk-hero-facts li:nth-child(2) { background: var(--tko-soft); }
.tk-hero-facts li:nth-child(3) { background: var(--yellow); }
.tk-hero-facts b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.7);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  opacity: 0.75;
}
.tk-hero-frame {
  margin: 0;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: 12px 12px 0 var(--ink);
  overflow: hidden;
}
.tk-hero-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-bottom: 2.5px solid var(--ink);
  background: var(--paper);
}
.tk-hero-chrome .tk-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: #fff;
}
.tk-hero-chrome .tk-dot:first-child { background: var(--tko); }
.tk-hero-chrome .tk-dot:nth-child(2) { background: var(--yellow); }
.tk-hero-url {
  margin-left: 10px;
  padding: 3px 12px;
  border: 1.5px solid color-mix(in oklab, var(--ink) 45%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.7;
}
.tk-hero-frame img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .tk-hero-frame { box-shadow: 6px 6px 0 var(--ink); }
}


/* focus lift: the card floats above a dimmed copy of its own screen */
.tk-beat-shot.tk-lift { position: relative; overflow: visible; }
.tk-lift .tk-lift-base { display: block; width: 100%; height: auto; filter: saturate(0.75) brightness(1.03) blur(1.5px); opacity: 0.6; }
.tk-lift .tk-lift-focus {
  border: 0;
  box-shadow: none;
  background: transparent;
  position: absolute;
  left: 12.2%;
  top: 48.4%;
  width: 47%;
  height: auto;
  border-radius: 1.8%/4.8%;
  filter: drop-shadow(0 6px 12px rgb(24 28 38 / 0.14)) drop-shadow(0 26px 46px rgb(24 28 38 / 0.2));
}


/* ---------- incentive layer (replaces dark galaxy scrub) ---------- */
.tk-spark-explain {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr);
  align-items: start;
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(22px, 4svh, 40px) 0 clamp(30px, 5svh, 56px);
}
.tk-spark-shot { margin: 0; min-width: 0; }
.tk-spark-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 8px 8px 0 var(--ink);
}
.tk-spark-shot .tk-cap { margin-top: 14px; }
.tk-spark-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.tk-spark-steps li {
  display: grid;
  gap: 6px;
  padding: clamp(14px, 1.9vw, 20px);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 5px 5px 0 var(--ink);
}
.tk-spark-steps li:nth-child(2) { background: var(--tko-soft); }
.tk-spark-steps li:nth-child(3) { background: var(--yellow); }
.tk-spark-n { font-family: var(--font-mono); font-size: 11px; opacity: 0.55; }
.tk-spark-steps h4 { margin: 0; font-size: clamp(17px, 1.7vw, 21px); font-weight: 800; }
.tk-spark-steps p { margin: 0; font-size: var(--cs-small); line-height: 1.45; }
@media (max-width: 860px) {
  .tk-spark-explain { grid-template-columns: 1fr; }
  .tk-spark-shot img { box-shadow: 5px 5px 0 var(--ink); }
}


/* ---------- galaxy art (full-bleed) ---------- */
.tk-galaxy-art { margin: clamp(24px, 4svh, 44px) 0 clamp(20px, 3svh, 32px); }
.tk-galaxy-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.tk-galaxy-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin: clamp(-6px, -1svh, 0px) 0 clamp(30px, 5svh, 56px);
}
.tk-gl-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: clamp(16px, 2vw, 22px);
  border-radius: 16px;
  background: #10142a;
  color: #f0ece2;
  overflow: hidden;
}
.tk-gl-item::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(238 106 46 / 0.34), transparent 68%);
  pointer-events: none;
}
.tk-gl-item:nth-child(2)::after { inset: -50% -20% auto auto; }
.tk-gl-item:nth-child(3)::after { width: 110%; inset: auto -40% -70% auto; background: radial-gradient(circle, rgb(255 190 90 / 0.3), transparent 66%); }
.tk-gl-n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / 0.28);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tko);
}
.tk-gl-body { display: grid; gap: 7px; align-content: start; position: relative; z-index: 1; }
.tk-gl-body h4 { margin: 0; font-size: clamp(18px, 1.8vw, 23px); font-weight: 800; letter-spacing: -0.01em; }
.tk-gl-body p { margin: 0; font-size: var(--cs-small); line-height: 1.5; color: rgb(240 236 226 / 0.76); }
.tk-gl-unit {
  justify-self: start;
  margin-top: 2px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(255 205 150 / 0.9);
}


.tk-berg-verdict { margin-top: clamp(-32px, -4svh, -12px); }

@media (max-width: 1100px) { .tk-galaxy-legend { grid-template-columns: minmax(0, 1fr); } }

@media (min-width: 860px) { .tk-cover-sub { white-space: nowrap; } }