/* The LinkedIn Chain Test — tool styles.
   Consumes Warm Tech tokens. Never re-declares :root.
   Three signal colours are added ADDITIVELY and scoped to .lct so they can
   never leak into or shadow the site palette. Each is derived from the
   existing palette and darkened only enough to read on Warm Sand. */

/* Author display rules beat the UA [hidden] rule. Nothing hid. */
[hidden] { display: none !important; }

.lct {
  --lct-red: var(--wt-ember);
  --lct-amber: #c98a2e;
  --lct-green: #5e8c5a;
  --lct-track: rgba(26, 26, 26, 0.08);
}

/* ------------------------------------------------------------- shell */
.lct-stage {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--wt-gutter);
}

.lct-progress {
  height: 3px;
  background: var(--lct-track);
  border-radius: var(--wt-radius-pill);
  overflow: hidden;
  margin-bottom: 14px;
}
.lct-progress span {
  display: block;
  height: 100%;
  background: var(--wt-ember);
  transition: width 260ms ease;
}
.lct-count {
  font-family: var(--wt-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--wt-ink-soft);
  margin-bottom: 26px;
}

/* --------------------------------------------------------- question */
.lct-step {
  animation: lct-enter 240ms ease both;
}
@keyframes lct-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lct-step { animation: none; }
  .lct-progress span { transition: none; }
}

.lct-q {
  font-family: var(--wt-display);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.2;
  margin: 0 0 8px;
}
.lct-help {
  color: var(--wt-ink-soft);
  font-size: 15px;
  margin: 0 0 24px;
}

.lct-opts { display: grid; gap: 10px; margin: 0 0 28px; }

.lct-opt {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 15px 18px;
  border: 1px solid var(--wt-line);
  border-radius: var(--wt-radius);
  background: var(--wt-card-fill);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
  font-size: 16px;
  line-height: 1.45;
}
.lct-opt:hover { border-color: rgba(26, 26, 26, 0.34); }
.lct-opt input { position: absolute; opacity: 0; pointer-events: none; }

.lct-box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid rgba(26, 26, 26, 0.32);
  background: transparent;
  position: relative;
}
.lct-opt[data-type='single'] .lct-box { border-radius: 50%; }
.lct-opt[data-type='multi'] .lct-box { border-radius: 5px; }

.lct-opt[data-checked='true'] {
  border-color: var(--wt-ember);
  background: rgba(226, 97, 30, 0.07);
}
.lct-opt[data-checked='true'] .lct-box {
  border-color: var(--wt-ember);
  background: var(--wt-ember);
}
.lct-opt[data-checked='true'] .lct-box::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 10px;
  border: solid var(--wt-ink);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.lct-actions { display: flex; gap: 12px; align-items: center; }
.lct-back {
  background: none;
  border: 0;
  padding: 8px 4px;
  font: inherit;
  font-size: 14px;
  color: var(--wt-ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----------------------------------------------------------- result */
.lct-chain {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 30px 0 8px;
}
@media (max-width: 620px) {
  .lct-chain { grid-template-columns: 1fr; }
}

.lct-link {
  border: 1px solid var(--wt-line-dark);
  border-radius: var(--wt-radius);
  padding: 16px 14px 14px;
  background: var(--wt-card-fill-dark);
  position: relative;
}
.lct-link[data-rag='red']   { border-color: var(--lct-red); }
.lct-link[data-rag='amber'] { border-color: var(--lct-amber); }
.lct-link[data-rag='green'] { border-color: var(--lct-green); }

.lct-link h4 {
  font-family: var(--wt-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 10px;
  opacity: 0.7;
}
.lct-link b {
  font-family: var(--wt-display);
  font-size: 30px;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}
.lct-link[data-rag='red'] b   { color: var(--wt-ember); }
.lct-link[data-rag='amber'] b { color: var(--wt-amber); }
.lct-link[data-rag='green'] b { color: #a8d3a4; }

.lct-bar { height: 4px; border-radius: 3px; background: rgba(250, 243, 227, 0.14); overflow: hidden; }
.lct-bar span { display: block; height: 100%; }
.lct-link[data-rag='red'] .lct-bar span   { background: var(--wt-ember); }
.lct-link[data-rag='amber'] .lct-bar span { background: var(--wt-amber); }
.lct-link[data-rag='green'] .lct-bar span { background: #a8d3a4; }

.lct-break {
  position: absolute;
  top: -9px;
  left: 14px;
  font-family: var(--wt-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--wt-ember);
  color: var(--wt-ink);
  padding: 2px 8px;
  border-radius: var(--wt-radius-pill);
}

.lct-tier {
  font-family: var(--wt-display);
  font-weight: 700;
  font-size: clamp(46px, 9vw, 84px);
  line-height: 0.95;
  margin: 0;
  color: var(--wt-ember);
}
.lct-score {
  font-family: var(--wt-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  opacity: 0.8;
  margin: 12px 0 0;
}

.lct-multiplier {
  font-family: var(--wt-display);
  font-weight: 500;
  font-size: clamp(19px, 2.6vw, 25px);
  line-height: 1.35;
  border-left: 2px solid var(--wt-ember);
  padding-left: 18px;
  margin: 34px 0 0;
}

.lct-breakdown { display: grid; gap: 16px; margin-top: 26px; }
.lct-row {
  border: 1px solid var(--wt-line);
  border-left-width: 3px;
  border-radius: var(--wt-radius);
  padding: 20px 22px;
  background: var(--wt-card-fill);
}
.lct-row[data-rag='red']   { border-left-color: var(--lct-red); }
.lct-row[data-rag='amber'] { border-left-color: var(--lct-amber); }
.lct-row[data-rag='green'] { border-left-color: var(--lct-green); }

.lct-row header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
}
.lct-row h3 { font-family: var(--wt-display); font-size: 20px; margin: 0; }
.lct-row .lct-pct { font-family: var(--wt-mono); font-size: 14px; }
.lct-row[data-rag='red'] .lct-pct   { color: var(--wt-ember-deep); }
.lct-row[data-rag='amber'] .lct-pct { color: var(--lct-amber); }
.lct-row[data-rag='green'] .lct-pct { color: var(--lct-green); }
.lct-row p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; }
.lct-row .lct-week {
  font-family: var(--wt-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--wt-ink-soft);
}

.lct-caveat {
  border: 1px solid var(--wt-line);
  border-radius: var(--wt-radius);
  padding: 20px 22px;
  margin-top: 24px;
  background: rgba(226, 97, 30, 0.05);
  font-size: 15.5px;
  line-height: 1.6;
}

/* ------------------------------------------------------------ funnel */
.lct-field { display: grid; gap: 6px; margin-bottom: 14px; }
.lct-field label { font-size: 14px; font-weight: 500; }
.lct-field input {
  font: inherit;
  padding: 13px 15px;
  border: 1px solid var(--wt-line);
  border-radius: var(--wt-radius);
  background: var(--wt-sand);
  color: var(--wt-ink);
}
.lct-field input:focus-visible { outline: 2px solid var(--wt-ember); outline-offset: 1px; }

.lct-consent {
  border: 1px solid var(--wt-line);
  border-radius: var(--wt-radius);
  padding: 16px 18px;
  margin: 18px 0;
  font-size: 14.5px;
  line-height: 1.6;
}
.lct-checks { display: grid; gap: 10px; margin: 18px 0 22px; }
.lct-check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}
.lct-check input { margin-top: 3px; accent-color: var(--wt-ember); width: 17px; height: 17px; }

.lct-note {
  font-family: var(--wt-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--wt-ink-soft);
  margin-top: 14px;
}

:focus-visible { outline: 2px solid var(--wt-ember); outline-offset: 2px; }

/* ================================================== landing page sections ==
   Built on the Warm Tech component set. Headings are plain h1/h2 so they use
   the system's clamp sizes. .wt-statement is 1.4rem and is NOT a headline. */

.lct-hero-copy { max-width: 860px; }
.lct-hero-copy h1 { margin-bottom: 22px; }
.lct-hero-copy .wt-lede { margin-bottom: 32px; }
.lct-note {
  font-family: var(--wt-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  opacity: 0.6;
  margin-top: 14px;
}

/* The tool itself stays narrow for reading, whatever the page around it does */
#lct-app { max-width: 720px; }

/* ------------------------------------------------------- the hero artefact */
.lct-hero-art {
  position: relative;
  max-width: 880px;
  margin: 64px auto 0;
  padding-right: 84px;
}
.lct-report {
  position: relative;
  background: var(--wt-sand);
  color: var(--wt-ink);
  border-radius: var(--wt-radius-lg);
  padding: 28px 32px 26px;
  transform: rotate(-0.8deg);
  box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.3);
}
.lct-report-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 15px; margin-bottom: 20px;
  border-bottom: 1px solid var(--wt-line);
}
.lct-in { width: 19px; height: 19px; flex: 0 0 auto; }
.lct-in rect { fill: var(--wt-ink); }
.lct-in path { fill: var(--wt-sand); }
.lct-report-title { font-family: var(--wt-display); font-weight: 700; font-size: 15px; }
.lct-report-meta {
  margin-left: auto; font-family: var(--wt-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--wt-ink-soft);
}

.lct-report-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lct-report-rows li {
  display: grid; grid-template-columns: 96px 1fr 42px;
  align-items: center; gap: 14px; font-size: 13px;
}
.lct-report-rows i { display: block; height: 5px; border-radius: 3px; background: rgba(26,26,26,.09); overflow: hidden; }
.lct-report-rows b { display: block; height: 100%; border-radius: 3px; }
.lct-report-rows em { font-family: var(--wt-mono); font-size: 11px; font-style: normal; text-align: right; }
.lct-report-rows li[data-rag='green'] b { background: var(--lct-green); }
.lct-report-rows li[data-rag='amber'] b { background: var(--lct-amber); }
.lct-report-rows li[data-rag='red']   b { background: var(--lct-red); }

.lct-report-verdict {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--wt-line);
  font-size: 13.5px; line-height: 1.5; color: var(--wt-ink-soft);
}
.lct-report-verdict strong { color: var(--wt-ember-deep); }

.lct-scorecard {
  position: absolute; right: 0; bottom: -30px; width: 164px;
  background: var(--wt-deep); border: 1px solid rgba(250,243,227,.2);
  border-radius: var(--wt-radius); padding: 18px 20px 16px;
  text-align: center; transform: rotate(2deg);
  box-shadow: 0 20px 46px rgba(0,0,0,.55);
}
.lct-sc-kicker, .lct-sc-foot {
  font-family: var(--wt-mono); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; opacity: .6; margin: 0;
}
.lct-sc-num {
  display: block; font-family: var(--wt-display); font-weight: 700;
  font-size: 56px; line-height: 1.02; color: var(--wt-ember);
}
.lct-sc-tier { font-family: var(--wt-display); font-weight: 700; font-size: 18px; margin: 0 0 10px; }
.lct-sc-foot { padding-top: 9px; border-top: 1px solid rgba(250,243,227,.14); }

.lct-creds { margin-top: 74px; }

/* --------------------------------------------------------------- sections */
.lct-ps { margin: 38px 0; }
.lct-ps .wt-card h3 { font-size: 1.15rem; }

.lct-case-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.lct-case-head h3 { color: var(--wt-amber); margin: 0; }

.lct-face {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 1px solid var(--wt-line-dark); display: block;
}
.lct-face--lg { width: 62px; height: 62px; }
.lct-quotes { margin-top: 34px; }
.lct-quotes .wt-card { display: flex; flex-direction: column; gap: 14px; }
.lct-quotes .wt-card p { margin: 0; }
.lct-quotes b { color: var(--wt-ember-deep); font-weight: 600; }

.lct-attrib {
  font-family: var(--wt-mono); font-size: 11px; letter-spacing: .04em;
  opacity: .72; margin: 0;
}
.wt-dark .lct-attrib { opacity: .8; }

.lct-verify { margin-top: 36px; }
.lct-verify a {
  display: inline-block; margin-right: 14px;
  text-decoration: underline; text-underline-offset: 3px;
}
.lct-verify a:hover { color: var(--wt-ember-deep); }

.lct-close h2, .lct-close .wt-lede { max-width: 620px; }

/* ----------------------------------------------------- running the test */
/* Marketing collapses. One thing on screen at a time. */
.lct-running .wt-nav__links a:not(.wt-nav__cta) { display: none; }

@media (max-width: 880px) {
  .lct-hero-art { padding-right: 0; }
  .lct-art-back { display: none; }
  .lct-report { transform: none; }
  .lct-scorecard {
    position: static; width: auto; transform: none; margin-top: 16px;
    display: flex; align-items: baseline; justify-content: center;
    gap: 14px; text-align: left;
  }
  .lct-sc-num { font-size: 36px; }
  .lct-sc-tier { margin: 0; }
  .lct-sc-foot { border: 0; padding: 0; }
  .lct-creds { margin-top: 42px; }
}
@media (max-width: 560px) {
  .lct-report { padding: 22px 20px; }
  .lct-report-rows li { grid-template-columns: 80px 1fr 38px; }
}

/* ------------------------------------------------------- authority band --
   Sits on Sand, not Deep, because the publisher and GeniusU logos are dark
   artwork. Inverting them would misrepresent someone else's brand mark. */
.lct-authority-sec { padding-block: 64px; border-bottom: 1px solid var(--wt-line); }
.lct-authority {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 44px;
  align-items: center;
}
.lct-book {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 18px 42px rgba(26,23,18,.28), 0 2px 6px rgba(26,23,18,.2);
  transform: rotate(-2deg);
}
.lct-authority-body p { font-size: 1.05rem; color: var(--wt-ink-soft); max-width: 62ch; }
.lct-authority-body b { color: var(--wt-ink); font-weight: 600; }

.lct-logos {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 30px; margin-top: 26px;
  padding-top: 22px; border-top: 1px solid var(--wt-line);
}
.lct-logos img { height: 30px; width: auto; opacity: .72; }
.lct-logos span {
  font-family: var(--wt-display); font-weight: 700; font-size: 1rem; opacity: .55;
}

@media (max-width: 700px) {
  .lct-authority { grid-template-columns: 130px 1fr; gap: 26px; align-items: start; }
  .lct-logos { gap: 20px; }
  .lct-logos img { height: 24px; }
}

/* ------------------------------------------------------------- the ticks --
   Lifted from the 2021 ScoreApp copy. Four objections dead in one line, and
   "entirely confidential" is what buys an honest answer rather than a proud
   one, which protects the data as much as the conversion. */
.lct-ticks {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.lct-ticks li {
  font-size: .95rem; color: var(--wt-sand-ghost);
  display: flex; align-items: center; gap: 9px;
}
.lct-ticks li::before {
  content: ''; flex: 0 0 auto; width: 7px; height: 12px;
  border: solid var(--wt-ember); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}

/* --------------------------------------------------- score rings + chain --
   Dent's dials are more legible than a bare chain. The chain keeps the story.
   Both, rather than one or the other. */
.lct-rings { display: block; width: 100%; height: auto; margin: 4px 0 26px; }
.lct-rings .trk { fill: none; stroke: rgba(26,26,26,.09); stroke-width: 7; }
.lct-rings .val { fill: none; stroke-width: 7; stroke-linecap: round; }
.lct-rings .ring[data-rag='green'] .val { stroke: var(--lct-green); }
.lct-rings .ring[data-rag='amber'] .val { stroke: var(--lct-amber); }
.lct-rings .ring[data-rag='red']   .val { stroke: var(--lct-red); }
.lct-rings .num {
  font-family: var(--wt-display); font-weight: 700; font-size: 21px;
  text-anchor: middle; fill: var(--wt-ink); opacity: .82;
}
.lct-rings .ring[data-rag='red'] .num { fill: var(--wt-ember-deep); opacity: 1; }
.lct-rings .lbl {
  font-family: var(--wt-mono); font-size: 8.5px; letter-spacing: .14em;
  text-anchor: middle; fill: var(--wt-ink); opacity: .45;
}
.lct-rings .ring[data-rag='red'] .lbl { fill: var(--wt-ember-deep); opacity: 1; }
.lct-rings .conn path {
  fill: none; stroke-width: 5; stroke-linecap: round; stroke: rgba(26,26,26,.18);
}
.lct-rings .conn.snapped path { stroke: var(--wt-ember); }

/* ------------------------------------------------------- the report cover -
   Warm Tech, not LinkedIn blue. Using LinkedIn's own palette and mark at
   cover scale implies an endorsement that does not exist. */
.lct-cover {
  position: absolute; z-index: 0;
  left: 0; top: 26px;
  width: 214px; aspect-ratio: 3 / 4;
  background: var(--wt-deep);
  border: 1px solid rgba(250,243,227,.14);
  border-radius: 4px 10px 10px 4px;
  padding: 26px 22px;
  display: flex; flex-direction: column;
  transform: rotate(-7deg);
  box-shadow: 0 26px 54px rgba(0,0,0,.55);
}
.lct-cover::before {
  content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 1px;
  background: rgba(250,243,227,.12);
}
.lct-cover-rule { display: block; width: 34px; height: 3px; background: var(--wt-ember); margin-bottom: 20px; }
.lct-cover-kicker {
  font-family: var(--wt-mono); font-size: 8.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--wt-amber); margin: 0 0 10px;
}
.lct-cover h4 {
  font-family: var(--wt-display); font-weight: 700; font-size: 19px;
  line-height: 1.15; color: var(--wt-sand); margin: 0;
}
.lct-cover h4 sup { font-size: 9px; vertical-align: super; }
.lct-cover-mark { width: 100%; height: auto; margin-top: auto; opacity: .9; }
.lct-cover-by {
  font-family: var(--wt-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--wt-sand-ghost); margin: 14px 0 0;
}

/* room for the cover on the left, the scorecard on the right */
.lct-hero-art { padding-left: 132px; }
.lct-report { z-index: 2; }
.lct-scorecard { z-index: 3; }

@media (max-width: 880px) {
  .lct-hero-art { padding-left: 0; }
  .lct-cover { display: none; }
  .lct-ticks { gap: 8px 18px; }
  .lct-ticks li { font-size: .88rem; }
}

/* ------------------------------------------------ hero: copy left, art right */
.lct-hero-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 56px;
  align-items: center;
}
/* The headline lives in a column now, so it needs its own ceiling. */
.lct-hero-grid h1 { font-size: clamp(2.1rem, 3.5vw, 3.05rem); }
.lct-hero-grid .wt-lede { font-size: 1.05rem; }

.lct-hero-grid .lct-hero-art {
  margin: 0;
  max-width: none;
  padding-left: 74px;
  padding-right: 48px;
}
.lct-hero-grid .lct-cover { width: 170px; top: 14px; }
.lct-hero-grid .lct-report { padding: 22px 24px 20px; }
.lct-hero-grid .lct-scorecard { width: 132px; bottom: -22px; padding: 14px 16px 12px; }
.lct-hero-grid .lct-sc-num { font-size: 42px; }
.lct-hero-grid .lct-sc-tier { font-size: 15px; }
.lct-hero-grid .lct-report-rows li { grid-template-columns: 82px 1fr 38px; font-size: 12px; }

/* Bigger partner marks. They were 30px, which is unreadable. */
.lct-logos { gap: 40px; }
.lct-logos img { height: 56px; width: auto; max-width: 150px; object-fit: contain; opacity: .85; }

@media (max-width: 980px) {
  .lct-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .lct-hero-grid h1 { font-size: clamp(2.3rem, 6vw, 3.4rem); }
  .lct-hero-grid .lct-hero-art { padding-left: 0; padding-right: 0; }
  .lct-hero-grid .lct-cover { display: none; }
  .lct-hero-grid .lct-report { padding: 26px 26px 24px; }
}
@media (max-width: 700px) {
  .lct-logos { gap: 24px; }
  .lct-logos img { height: 40px; }
}

/* -------------------------------------------------- partner marks, sized --
   All three are now genuinely transparent and cropped to their own bounds,
   so equal height would make the stacked ZebraLearn mark look half the size
   of the two wordmarks. Sized optically instead of uniformly. */
.lct-logos { gap: 44px; align-items: center; }
.lct-logos img { width: auto; opacity: .8; max-width: none; }
.lct-logos .lg-bni    { height: 54px; }   /* ratio 2.60 */
.lct-logos .lg-genius { height: 54px; }   /* ratio 2.51 */
.lct-logos .lg-zebra  { height: 84px; }   /* ratio 0.88, stacked mark */

@media (max-width: 700px) {
  .lct-logos { gap: 26px; }
  .lct-logos .lg-bni, .lct-logos .lg-genius { height: 38px; }
  .lct-logos .lg-zebra { height: 60px; }
}

/* ----------------------------------------------- authority band, revised --
   The book alone is an object. The book plus a face is a person, and people
   buy from people. The 95% line leads because it is the single most
   persuasive fact available: he sells the thing he lives on. */
.lct-authority-art { position: relative; }
.lct-authority-art .lct-book { width: 100%; }
.lct-author-face {
  position: absolute;
  left: -26px;
  bottom: -20px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--wt-sand);
  box-shadow: 0 10px 26px rgba(26,23,18,.3);
}
.lct-authority-body h3 {
  font-size: 1.5rem;
  margin: 0 0 12px;
}
.lct-stats { margin-top: 56px; }
.lct-stats .wt-stat small { max-width: 26ch; margin-inline: auto; }

/* 75% of the previous sizes — they were shouting. */
.lct-logos .lg-bni    { height: 40px; }
.lct-logos .lg-genius { height: 40px; }
.lct-logos .lg-zebra  { height: 63px; }

@media (max-width: 700px) {
  .lct-author-face { width: 74px; height: 74px; left: -14px; bottom: -14px; border-width: 3px; }
  .lct-stats { margin-top: 36px; }
  .lct-logos .lg-bni, .lct-logos .lg-genius { height: 30px; }
  .lct-logos .lg-zebra { height: 47px; }
}

/* ---------------------------------------------------------- LinkedIn mark --
   Category signal, not an endorsement. Kept monochrome and kept OFF the
   partner logo row: BNI, GeniusU and ZebraLearn are real relationships,
   LinkedIn is the platform being measured. Putting its mark among them would
   claim something that is not true. */
.lct-cover .lct-li {
  width: 28px; height: 28px; display: block; margin-bottom: 18px;
}
.lct-cover .lct-li rect { fill: var(--wt-sand); }
.lct-cover .lct-li path { fill: var(--wt-deep); }
.lct-report-head .lct-in { width: 23px; height: 23px; }

/* 200px source, so 96px display keeps it just over 2x on a retina screen.
   Upscaling a 200px asset to 800 only adds blur. */
.lct-author-face { width: 96px; height: 96px; }
@media (max-width: 700px) { .lct-author-face { width: 70px; height: 70px; } }

/* Photo beside the name, not over the book. It was covering the byline,
   which is the one piece of type on a cover that must never be obscured. */
.lct-author { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.lct-author .wt-kicker { margin-bottom: 4px; }
.lct-author-face {
  position: static;
  width: 84px; height: 84px; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--wt-line);
  box-shadow: none;
}
.lct-authority-body h3 { margin: 0; }
@media (max-width: 700px) { .lct-author-face { width: 64px; height: 64px; } }

/* ============================================== the result screen ========= */
/* The rings are drawn on Deep Ink here and on Warm Sand in the report, so the
   ink-coloured defaults need a dark-context counterpart. */
.wt-dark .lct-rings { max-width: 560px; margin: 34px 0 30px; }
.wt-dark .lct-rings .trk { stroke: rgba(250,243,227,.13); }
.wt-dark .lct-rings .num { fill: var(--wt-sand); opacity: .92; }
.wt-dark .lct-rings .lbl { fill: var(--wt-sand); opacity: .5; }
.wt-dark .lct-rings .conn path { stroke: rgba(250,243,227,.22); }
.wt-dark .lct-rings .ring[data-rag='green'] .val { stroke: #a8d3a4; }
.wt-dark .lct-rings .ring[data-rag='amber'] .val { stroke: var(--wt-amber); }
.wt-dark .lct-rings .ring[data-rag='red']   .val { stroke: var(--wt-ember); }
.wt-dark .lct-rings .ring[data-rag='red'] .num { fill: var(--wt-ember); opacity: 1; }
.wt-dark .lct-rings .ring[data-rag='red'] .lbl { fill: var(--wt-ember); opacity: 1; }
.lct-rings .brk {
  font-family: var(--wt-mono); font-size: 8px; letter-spacing: .16em;
  text-anchor: middle; fill: var(--wt-ember);
}

.lct-scoreline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; }
.lct-scoreline b { font-family: var(--wt-display); font-weight: 700; font-size: 2.4rem; color: var(--wt-amber); }
.lct-scoreline span { font-family: var(--wt-mono); font-size: .9rem; opacity: .6; }
.lct-scoreline em {
  font-family: var(--wt-mono); font-style: normal; font-size: .78rem;
  letter-spacing: .04em; opacity: .68; margin-left: 8px;
}

/* ---------------------------------------------------------- the advice --- */
.lct-advice { display: grid; gap: 18px; margin: 34px 0 40px; }

.lct-adv {
  border: 1px solid var(--wt-line);
  border-left-width: 4px;
  border-radius: var(--wt-radius);
  padding: 26px 28px;
  background: var(--wt-card-fill);
}
.lct-adv[data-rag='red']   { border-left-color: var(--lct-red); }
.lct-adv[data-rag='amber'] { border-left-color: var(--lct-amber); }
.lct-adv[data-rag='green'] { border-left-color: var(--lct-green); }
.lct-adv[data-primary='true'] {
  border-color: var(--wt-ember);
  border-left-color: var(--wt-ember);
  background: rgba(226,97,30,.05);
}

.lct-adv header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.lct-adv h3 { font-size: 1.35rem; margin: 0; display: flex; align-items: center; gap: 12px; }
.lct-badge {
  font-family: var(--wt-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; background: var(--wt-ember); color: var(--wt-ink);
  padding: 4px 10px; border-radius: var(--wt-radius-pill);
}
.lct-adv-score { font-family: var(--wt-display); font-weight: 700; font-size: 1.7rem; opacity: .5; }
.lct-adv-score small { font-size: .85rem; }
.lct-adv[data-rag='red'] .lct-adv-score { color: var(--wt-ember-deep); opacity: 1; }

.lct-adv-reading { font-size: 1.02rem; line-height: 1.6; color: var(--wt-ink-soft); margin: 0 0 18px; }

.lct-adv-do {
  border-top: 1px solid var(--wt-line);
  padding-top: 16px;
}
.lct-adv-do .wt-kicker { margin-bottom: 8px; }
.lct-adv-do p { margin: 0; font-size: 1.02rem; line-height: 1.6; font-weight: 500; }

.lct-adv .lct-week {
  font-family: var(--wt-mono); font-size: 11px; letter-spacing: .03em;
  color: var(--wt-ink-soft); margin: 16px 0 0;
  padding-top: 14px; border-top: 1px solid var(--wt-line);
}

/* ------------------------------------------------------------ AI ladder -- */
.lct-ai {
  border: 1px solid var(--wt-line);
  border-radius: var(--wt-radius-lg);
  padding: 30px 32px;
  background: rgba(26,26,26,.035);
  margin-top: 12px;
}
.lct-ai h3 { margin: 0 0 20px; font-size: 1.3rem; }
.lct-ai p { font-size: 1.02rem; line-height: 1.6; color: var(--wt-ink-soft); margin: 0 0 12px; }
.lct-ai p b { color: var(--wt-ink); font-weight: 500; }

.lct-ladder {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.lct-ladder li {
  border-top: 3px solid var(--wt-line);
  padding-top: 12px;
  display: grid; gap: 3px;
}
.lct-ladder li b {
  font-family: var(--wt-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--wt-ink-soft); font-weight: 400;
}
.lct-ladder li span { font-family: var(--wt-display); font-weight: 700; font-size: .98rem; opacity: .45; }
.lct-ladder li[aria-current='true'] { border-top-color: var(--wt-ember); }
.lct-ladder li[aria-current='true'] b { color: var(--wt-ember-deep); }
.lct-ladder li[aria-current='true'] span { opacity: 1; }

@media (max-width: 620px) {
  .lct-ladder { grid-template-columns: repeat(2, 1fr); }
  .lct-adv { padding: 22px 20px; }
  .lct-adv header { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ------------------------------------- hero artefact, corrected layering --
   The report is the hero object. Nothing may sit on top of its content.
   The cover peeks from behind at an angle; the scorecard hangs off the
   corner rather than covering the last row. */
.lct-hero-grid .lct-hero-art { padding-left: 58px; padding-right: 34px; }
.lct-hero-grid .lct-cover {
  width: 152px;
  left: -12px;
  top: 44px;
  transform: rotate(-9deg);
}
.lct-hero-grid .lct-scorecard {
  right: -34px;
  bottom: -34px;
  width: 124px;
}
/* Keep the verdict line clear of the scorecard. */
.lct-hero-grid .lct-report-verdict { padding-right: 74px; }

/* ------------------------------------------------ artefact by the close -- */
.lct-close .wt-split { align-items: center; }
.lct-close-art { position: relative; }
.lct-close-art .lct-report {
  transform: rotate(1.4deg);
  padding: 20px 22px 18px;
}
.lct-close-art .lct-report-rows li { grid-template-columns: 78px 1fr 36px; font-size: 11.5px; }
.lct-close-art .lct-rings { margin: 2px 0 18px; }

@media (max-width: 980px) {
  .lct-close .wt-split { grid-template-columns: 1fr; gap: 40px; }
  .lct-close-art { max-width: 420px; margin-inline: auto; }
}

/* ================================ hero artefact: both objects legible ==== */
/* Previous attempt buried the cover under the report so its title read as a
   fragment. Give the art column more of the grid, then set the overlap to a
   deliberate tuck rather than an accident: the report clips only the cover's
   blank right margin, never its type. */
.lct-hero-grid { grid-template-columns: .82fr 1.18fr; }

.lct-hero-grid .lct-hero-art {
  padding-left: 134px;      /* cover is 148 wide, so 14px tucks behind */
  padding-right: 26px;
}
.lct-hero-grid .lct-cover {
  width: 148px;
  left: 0;
  top: 52px;
  transform: rotate(-7deg);
}
.lct-hero-grid .lct-cover h4 { font-size: 16px; }
.lct-hero-grid .lct-cover-kicker { font-size: 8px; }

/* Scorecard hangs off the bottom edge. It must never cover a number. */
.lct-hero-grid .lct-scorecard {
  right: -16px;
  bottom: -38px;
  width: 118px;
  padding: 13px 15px 11px;
}
.lct-hero-grid .lct-sc-num { font-size: 38px; }
.lct-hero-grid .lct-sc-tier { font-size: 14px; }
.lct-hero-grid .lct-sc-kicker, .lct-hero-grid .lct-sc-foot { font-size: 8.5px; }
.lct-hero-grid .lct-report-verdict { padding-right: 0; padding-bottom: 6px; }

@media (max-width: 1080px) {
  .lct-hero-grid .lct-hero-art { padding-left: 104px; }
  .lct-hero-grid .lct-cover { width: 118px; top: 60px; }
  .lct-hero-grid .lct-cover h4 { font-size: 13px; }
}
@media (max-width: 980px) {
  .lct-hero-grid .lct-hero-art { padding-left: 0; padding-right: 0; }
}

/* ============ hero: one object, at full size, with nothing on top of it ===
   Two overlapping documents in a 460px column meant neither could be read.
   The open report carries the information, so it gets the whole column. The
   cover moved to the closing section, where it has room to be a cover. */
.lct-hero-grid { grid-template-columns: .96fr 1.04fr; }
.lct-hero-grid .lct-hero-art { padding-left: 0; padding-right: 0; margin-top: 6px; }
.lct-hero-grid .lct-report { padding: 26px 28px 24px; transform: rotate(-0.6deg); }
.lct-hero-grid .lct-report-title { font-size: 15px; }
.lct-hero-grid .lct-report-rows li { grid-template-columns: 96px 1fr 44px; font-size: 13px; }
.lct-hero-grid .lct-report-verdict { font-size: 13.5px; padding-right: 108px; }
.lct-hero-grid .lct-scorecard {
  right: -22px; bottom: -26px; width: 132px; padding: 15px 17px 13px;
}
.lct-hero-grid .lct-sc-num { font-size: 42px; }
.lct-hero-grid .lct-sc-tier { font-size: 15px; }

/* ------------------------------------------- the cover, by the closing CTA */
.lct-close-art .lct-cover {
  position: relative; left: auto; top: auto;
  width: 100%; max-width: 300px; margin-inline: auto;
  padding: 34px 30px;
  transform: rotate(-2.5deg);
}
.lct-close-art .lct-cover h4 { font-size: 25px; }
.lct-close-art .lct-cover-kicker { font-size: 10px; }
.lct-close-art .lct-cover .lct-li { width: 34px; height: 34px; }
.lct-close-art .lct-cover-rule { width: 44px; height: 4px; }
.lct-close-art .lct-cover-by { font-size: 11px; }

/* ------------------------------------------------ people, not attributions */
.lct-person { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 4px; }
.lct-person .lct-face { width: 44px; height: 44px; }
.lct-person div { display: grid; gap: 1px; }
.lct-person b { font-family: var(--wt-display); font-weight: 700; font-size: .95rem; }
.lct-person span { font-size: .82rem; color: var(--wt-ink-soft); }

/* --------------------------------------------------- partner marks, again --
   ZebraLearn is a stacked mark whose wordmark is 12% of its height, so at the
   same height as two wordmarks it reads as an abstract square. It needs real
   height, and the row needs the room to give it. */
.lct-logos { gap: 46px; margin-top: 30px; padding-top: 26px; }
.lct-logos .lg-bni    { height: 50px; }
.lct-logos .lg-genius { height: 50px; }
.lct-logos .lg-zebra  { height: 96px; }

@media (max-width: 980px) {
  .lct-hero-grid .lct-report-verdict { padding-right: 0; }
  .lct-hero-grid .lct-scorecard { right: 0; }
}
@media (max-width: 700px) {
  .lct-logos { gap: 26px; }
  .lct-logos .lg-bni, .lct-logos .lg-genius { height: 34px; }
  .lct-logos .lg-zebra { height: 64px; }
}

/* ========================================== the four Ps, with something to say */
.lct-p-card { display: flex; flex-direction: column; gap: 8px; }
.lct-p-card h3 { margin: 0; }
.lct-p-card > p { margin: 0; }
.lct-p-broken {
  margin-top: auto !important;
  padding-top: 14px;
  border-top: 1px solid var(--wt-line);
  font-size: .87rem;
  line-height: 1.5;
  color: var(--wt-ink-soft);
}
.lct-p-broken b { color: var(--wt-ember-deep); font-weight: 600; }

/* ================================================ the case block, filled out */
.lct-case {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 40px;
  align-items: start;
}
.lct-case-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--wt-radius);
  border: 1px solid var(--wt-line-dark);
}
.lct-case-body h3 { color: var(--wt-amber); margin: 0 0 4px; }
.lct-case-body .wt-case__metrics { margin: 22px 0 20px; }
@media (max-width: 760px) {
  .lct-case { grid-template-columns: 110px 1fr; gap: 22px; }
}

/* ========================================== verify, as a proper element ==== */
.lct-verify {
  margin-top: 46px;
  padding: 32px 34px;
  border: 1px solid var(--wt-line);
  border-left: 4px solid var(--wt-ember);
  border-radius: 0 var(--wt-radius) var(--wt-radius) 0;
  background: rgba(255,255,255,.35);
}
.lct-verify h3 { margin: 0 0 8px; font-size: 1.4rem; }
.lct-verify > p { margin: 0 0 22px; color: var(--wt-ink-soft); }
.lct-verify .wt-chip {
  text-decoration: none;
  transition: .16s;
}
.lct-verify .wt-chip:hover {
  border-color: var(--wt-ember);
  color: var(--wt-ember-deep);
}
.lct-verify .wt-chip::after { content: ' \2197'; opacity: .5; }

/* ================================================= what arrives =========== */
.lct-arrives { align-items: center; grid-template-columns: .8fr 1.2fr; }
.lct-arrives-art .lct-cover {
  position: relative; left: auto; top: auto;
  width: 100%; max-width: 290px; margin-inline: auto;
  padding: 34px 30px;
  transform: rotate(-3deg);
}
.lct-arrives-art .lct-cover h4 { font-size: 24px; }
.lct-arrives-art .lct-cover-kicker { font-size: 10px; }
.lct-arrives-art .lct-cover .lct-li { width: 34px; height: 34px; }
.lct-arrives-art .lct-cover-rule { width: 44px; height: 4px; }
.lct-arrives-art .lct-cover-by { font-size: 11px; }

.lct-arrives-list { margin-top: 26px; }
.lct-arrives-list li {
  border-bottom-color: var(--wt-line-dark);
  color: var(--wt-sand-ghost);
}
.lct-close { text-align: center; }
.lct-close .wt-lede { max-width: 56ch; margin-inline: auto; }

@media (max-width: 980px) {
  .lct-arrives { grid-template-columns: 1fr; gap: 40px; }
}

/* ------------------------------------------------------- booking success -- */
#lct-success h2 { margin-bottom: 14px; }
#lct-success .wt-lede { margin-bottom: 26px; max-width: 58ch; }
#lct-success .lct-note { max-width: 54ch; margin-top: 18px; line-height: 1.6; opacity: .7; }

.lct-success-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 4px; }

/* --------------------------------------------------------------- the gate --
   Sits between the last question and the score. Deliberately plain: they have
   answered eighteen questions, the only job left is not to lose them. */
#lct-gate { max-width: 620px; }
#lct-gate h2 { margin-bottom: 12px; }
#lct-gate .wt-lede { margin-bottom: 28px; }
#lct-gate .lct-consent { font-size: 13.5px; }
#lct-gate .lct-check { font-size: 14.5px; }

/* ------------------------------------------ rings on a light card --------
   The report card is a Warm Sand surface that sits INSIDE a dark section, so
   it inherits the dark ring styles above and paints cream on cream. These
   rules come later in the file and win on source order, which restores the
   ink colours wherever the rings appear inside .lct-report.

   Scoped by context rather than by container id on purpose. The result moved
   from #lct-step to #lct-result when the email gate was added, and an
   id-scoped rule silently stopped applying. Context does not move. */
.lct-report .lct-rings { max-width: none; margin: 6px 0 24px; }
.lct-report .lct-rings .trk { stroke: rgba(26, 26, 26, 0.09); }
.lct-report .lct-rings .num { fill: var(--wt-ink); opacity: .82; }
.lct-report .lct-rings .lbl { fill: var(--wt-ink); opacity: .45; }
.lct-report .lct-rings .conn path { stroke: rgba(26, 26, 26, 0.18); }
.lct-report .lct-rings .ring[data-rag='green'] .val { stroke: var(--lct-green); }
.lct-report .lct-rings .ring[data-rag='amber'] .val { stroke: var(--lct-amber); }
.lct-report .lct-rings .ring[data-rag='red']   .val { stroke: var(--lct-red); }
.lct-report .lct-rings .ring[data-rag='red'] .num { fill: var(--wt-ember-deep); opacity: 1; }
.lct-report .lct-rings .ring[data-rag='red'] .lbl { fill: var(--wt-ember-deep); opacity: 1; }

/* ------------------------------------------------------- the back control --
   Was styled ink-soft, which is dark grey. The questions render on Deep Ink,
   so it has been invisible since the day it was written. Present, clickable,
   and unseeable. Same failure as the rings: a rule that looked correct and
   applied to the wrong surface. */
.lct-back {
  font-family: var(--wt-body);
  font-size: 14px;
  padding: 10px 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: 0;
  color: var(--wt-ink-soft);
  transition: color .15s;
}
.lct-back:hover { color: var(--wt-ember-deep); }

.wt-dark .lct-back { color: var(--wt-sand-ghost); }
.wt-dark .lct-back:hover { color: var(--wt-amber); }

#lct-gate-back { display: inline-block; margin-top: 18px; }

/* Give it room next to Continue rather than hard against it. */
.lct-actions { gap: 20px; flex-wrap: wrap; }