/* ===================================================================
   Unlock LinkedIn with AI — Claude Edition
   Titan AI brand system, Warm Tech v3 "Ember"
   =================================================================== */

:root {
  --warm-sand:   #FAF3E3;
  --carbon-ink:  #1A1A1A;
  --ember:       #E2611E;
  --ember-hover: #C94E12;
  --ember-text:  #BA4F18;
  --deep-ink:    #1A1712;
  --amber-glow:  #F8C889;

  /* product badges, pills and chips only */
  --arctic-mist: #E5F5F9;
  --sage-leaf:   #D2ECD0;
  --rose-quartz: #F3C1C0;

  --rule-light: rgba(26, 26, 26, .14);
  --rule-dark:  rgba(250, 243, 227, .16);

  --r-card:  14px;
  --r-panel: 16px;
  --r-btn:   10px;

  --wrap: 1120px;
  --gutter: 28px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--warm-sand);
  color: var(--carbon-ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(38px, 5.4vw, 62px); }
h2 { font-size: clamp(29px, 3.6vw, 42px); }
h3 { font-size: clamp(20px, 2vw, 24px); }
h4 { font-size: 19px; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

img { max-width: 100%; display: block; }

em {
  font-style: normal;
  color: var(--ember);
}

/* ------------------------------------------------- layout primitives */

.wt-section {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
}
.wt-section--tight { padding: 72px 0; }

/* Nav links jump to these, and the header is sticky, so hold the heading
   clear of it. */
.wt-section[id] { scroll-margin-top: 84px; }

.wt-wrap {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wt-dark {
  background-color: var(--deep-ink);
  color: var(--warm-sand);
}
.wt-dark em { color: var(--amber-glow); }
.wt-dark .wt-kicker { color: var(--amber-glow); }

.wt-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ember-text);
  margin: 0 0 18px;
}

.wt-lede {
  font-size: clamp(18px, 1.5vw, 20px);
  max-width: 62ch;
  opacity: .92;
}

.wt-note {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: .04em;
  opacity: .72;
}

.wt-center { text-align: center; }
.wt-center .wt-lede { margin-inline: auto; }

/* --------------------------------------------------------- the mesh
   Ember node-and-line network over Deep Ink, as used on
   scorecard.neerajshah.me. Canvas draws the network, the CSS layer
   underneath carries the warm radial glow.                          */

.wt-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.wt-mesh::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(46% 58% at 18% 28%, rgba(226, 97, 30, .26), transparent 68%),
    radial-gradient(40% 52% at 76% 18%, rgba(226, 97, 30, .16), transparent 70%),
    radial-gradient(60% 70% at 50% 108%, rgba(248, 200, 137, .10), transparent 72%);
}

.wt-mesh canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* keeps the copy legible where the glow is brightest */
.wt-mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(26, 23, 18, .82) 0%,
    rgba(26, 23, 18, .52) 42%,
    rgba(26, 23, 18, .18) 70%,
    rgba(26, 23, 18, .40) 100%
  );
}

/* ------------------------------------------------------------ header */

.wt-header {
  position: sticky;
  top: var(--sitebar-h);
  z-index: 50;
  background: var(--warm-sand);
  border-bottom: 1px solid var(--rule-light);
}

.wt-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}

.wt-wordmark {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--ember-text);
  border-bottom: 2px solid var(--ember);
  padding-bottom: 1px;
}

.wt-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}

.wt-nav a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  opacity: .82;
}
.wt-nav a:hover { opacity: 1; color: var(--ember-text); }

@media (max-width: 760px) {
  .wt-nav a:not(.wt-btn) { display: none; }
}

/* ----------------------------------------------------------- buttons */

.wt-btn {
  display: inline-block;
  background-color: var(--ember);
  color: var(--carbon-ink);          /* never white: 4.94:1 */
  border: none;
  border-radius: var(--r-btn);
  padding: 17px 34px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, color .15s ease;
}
.wt-btn:hover {
  background-color: var(--ember-hover);
  color: var(--warm-sand);
  transform: translateY(-2px);
}

.wt-btn--sm { padding: 11px 20px; font-size: 15px; }

.wt-btn--ghost {
  background: transparent;
  color: var(--carbon-ink);
  box-shadow: inset 0 0 0 2px var(--carbon-ink);
}
.wt-btn--ghost:hover {
  background: transparent;
  color: var(--ember-text);
  box-shadow: inset 0 0 0 2px var(--ember);
}
.wt-dark .wt-btn--ghost {
  color: var(--warm-sand);
  box-shadow: inset 0 0 0 2px var(--warm-sand);
}
.wt-dark .wt-btn--ghost:hover {
  color: var(--amber-glow);
  box-shadow: inset 0 0 0 2px var(--amber-glow);
}

.wt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 30px 0 18px;
}

/* The secondary conversion path. It has to be findable but must never
   compete with the ember button above it, so it takes no fill, no border
   and no Ember: on this page Ember means "book the call". */
.wt-alt-cta {
  margin-top: 18px;
  font-size: 15px;
  opacity: .76;
}
.wt-alt-cta a {
  display: inline-block;
  padding: 10px 0;                 /* 44px target without a button */
  color: var(--amber-glow);
  /* Underline the text, not the padded box: a bottom border or inset
     shadow would draw at the foot of the padding, detached from the
     words. This also survives a line break, which those do not. */
  text-decoration: underline;
  text-decoration-color: rgba(248, 200, 137, .45);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.wt-alt-cta a:hover { text-decoration-color: var(--amber-glow); }

/* Inline verification link in body copy. Reads as text until you look for
   it, which is the point: it proves the book is real without advertising
   it as an alternative to the programme. */
.wt-quiet-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(250, 243, 227, .34);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.wt-quiet-link:hover {
  color: var(--amber-glow);
  text-decoration-color: var(--amber-glow);
}

/* -------------------------------------------------------------- hero */

.wt-hero { padding: 104px 0 88px; }

/* The side column always carries the proof slider, so the hero is a two
   column layout unconditionally. The stage shot inside it stays optional:
   .has-art only reveals the photo, it no longer decides the split. */
/* Top aligned, not centred. The side column is taller than the copy, so
   centring floated the proof panel above the kicker and the two columns
   started on different lines. Both now begin on the same baseline. */
.wt-hero__grid {
  display: grid;
  grid-template-columns: 1.24fr 0.76fr;
  gap: 48px;
  align-items: start;
}

.wt-hero__side { display: grid; gap: 26px; align-content: start; }

/* LinkedIn and Claude sit beside the kicker rather than anywhere larger.
   Both are other people's marks: they say what the programme runs on, so
   they stay at kicker scale and never compete with the wordmark. */
.wt-kicker--marks {
  display: flex;
  align-items: center;
  gap: 9px;
}
.wt-mark { display: inline-flex; flex: 0 0 auto; }
.wt-mark svg,
.wt-mark img {
  display: block;
  width: 19px;
  height: 19px;
}
/* LinkedIn's mark is a filled tile and carries its own corner radius in
   the path. Claude's is a bare sunburst on transparency, so it must not
   be given a tile of its own or the pair stops matching. */
.wt-mark svg { border-radius: 4px; }
/* The kicker text is mono uppercase and the marks are not, so the row
   needs a hair of optical separation from the words. */
.wt-kicker--marks > span:last-child { margin-left: 3px; }

/* What the client walks away with. Same ember dash as the offer list, so
   the hero borrows the page's existing list language instead of adding a
   second one. */
.wt-outcomes {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 12px;
  max-width: 54ch;
}
.wt-outcomes li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.5;
  opacity: .92;
}
.wt-outcomes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 13px;
  height: 2px;
  background: var(--ember);
}

.wt-hero__art { display: none; margin: 0; }
.wt-hero.has-art .wt-hero__art { display: block; }

/* The copy column is already narrower than the wrap, so it needs no
   measure cap of its own. The headline sits a step below the global h1,
   which is what keeps both CTAs on one line. */
.wt-hero h1 { font-size: clamp(34px, 4vw, 52px); }

/* The stage shot was photographed against a blacked-out stage, so its
   ground is pure #000 while the section is Deep Ink. Framing it as a card
   would put a black rectangle with a visible outline on a warm dark
   background. Feathering the edges instead dissolves the ground into the
   section, so he emerges from the mesh rather than sitting in a box, and
   the fade at the foot covers where his dark trousers would otherwise
   stop against a hard edge. */
.wt-hero__art img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Two linear feathers intersected, rather than one radial. A radial mask
     centred on him fades the outstretched hand, which is the most alive
     part of the frame. Edge feathers leave the interior untouched and only
     soften the perimeter. The bottom fade starts early and runs long, so
     his dark trousers dissolve into the section instead of stopping at a
     line. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 66%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 66%, transparent 100%);
          mask-composite: intersect;
}

@media (max-width: 900px) {
  /* Below the CTAs, never above them. Proof and photo on a phone otherwise
     push "Book your discovery call" off the first screen. DOM order already
     puts the side column last, so collapsing the grid is the whole fix. */
  .wt-hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* Keep the portrait ratio. Cropping a 4:5 stage shot to landscape on
     phones cuts the head and the raised hand, which is the whole photo. */
  .wt-hero__art img { max-width: 320px; margin: 0 auto; }

  /* Same rule as the photo, for the same reason: three outcomes between
     the lede and the buttons costs about 200px, which is enough to push
     "Book your discovery call" off a 844px screen. On phones they move
     below the buttons instead. Everything else holds DOM order. */
  .wt-hero__copy { display: flex; flex-direction: column; }
  .wt-hero__copy > * { order: 1; }
  .wt-hero__copy .wt-outcomes { order: 2; margin-top: 24px; }
}

/* ------------------------------------------------- hero proof slider */

/* Proof sits above the fold on every property, but it sits above the
   stage shot and under the headline, so it has to stay quiet. One line
   and a name, no portrait and no display numeral: anything heavier
   competes with the h1 for the eye and the hero ends up with two
   headlines. Slides are stacked in one grid cell rather than laid side
   by side, so the panel is always as tall as its longest slide and
   rotation never shifts the page. */
.wt-proofs {
  border-radius: var(--r-card);
  border: 1px solid var(--rule-dark);
  background: rgba(250, 243, 227, .03);
  padding: 16px 18px 13px;
  max-width: 400px;
}

.wt-proofs__viewport { display: grid; }

.wt-proof {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease;
}
.wt-proof.is-current { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .wt-proof { transition: none; }
}

/* The stars are the only ember here, and they are small. That is the
   whole budget: the rating carries the accent, the line and the name
   stay in Warm Sand so the panel reads as a footnote to the headline
   rather than a second one. */
.wt-proof__stars {
  margin: 0 0 8px;
  color: var(--ember);
  font-size: 11px;
  letter-spacing: .16em;
  line-height: 1;
}

.wt-proof__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  font-style: italic;
  opacity: .92;
}

.wt-proof__by {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  opacity: .6;
}

.wt-proofs__dots {
  display: flex;
  gap: 7px;
  margin-top: 13px;
}

/* Buttons, not decoration: the slider is reachable and operable by
   keyboard, and each dot says which result it jumps to. */
.wt-proofs__dots button {
  width: 16px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: var(--rule-dark);
  cursor: pointer;
  transition: background .3s ease, width .3s ease;
}
.wt-proofs__dots button[aria-current="true"] {
  width: 22px;
  background: var(--ember);
}
.wt-proofs__dots button:focus-visible {
  outline: 2px solid var(--amber-glow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .wt-proofs__dots button { transition: none; }
}

.wt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wt-runson {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--amber-glow);
  margin-top: 26px;
}

/* --------------------------------------------------------- stat band */

.wt-statband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 64px;
  padding-top: 34px;
  border-top: 1px solid var(--rule-dark);
}
.wt-section:not(.wt-dark) .wt-statband { border-top-color: var(--rule-light); }

.wt-stat b {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--amber-glow);
}
.wt-section:not(.wt-dark) .wt-stat b { color: var(--ember-text); }

.wt-stat small {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  opacity: .78;
}

@media (max-width: 720px) {
  .wt-statband { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------- cards */

.wt-card {
  border-radius: var(--r-card);
  border: 1px solid var(--rule-light);
  padding: 30px;
  background: transparent;
  /* Column layout so a trailing block can be pinned to the foot of every
     card in the row, rather than floating wherever its own copy ends. */
  display: flex;
  flex-direction: column;
}
.wt-dark .wt-card {
  border-color: var(--rule-dark);
  background: rgba(250, 243, 227, .03);
}

.wt-card__num {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ember-text);
  margin-bottom: 14px;
}
.wt-dark .wt-card__num { color: var(--amber-glow); }

.wt-card h3 { margin-bottom: .45em; }
.wt-card p { font-size: 16px; opacity: .88; }

/* The specific, recognisable version of the problem stated above it.
   Ruled off so it reads as evidence rather than more description. */
.wt-card p.wt-card__broken {
  /* auto, not a fixed gap: the description above varies in length, so this
     block would otherwise sit at a different height in each card. */
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule-light);
  font-size: 15px;
  opacity: .8;
}
.wt-dark .wt-card__broken { border-top-color: var(--rule-dark); }
.wt-card__broken b {
  font-weight: 600;
  color: var(--ember-text);
}
.wt-dark .wt-card__broken b { color: var(--amber-glow); }

.wt-grid-2, .wt-grid-3, .wt-grid-4 {
  display: grid;
  gap: 22px;
  margin-top: 44px;
}
.wt-grid-2 { grid-template-columns: repeat(2, 1fr); }
.wt-grid-3 { grid-template-columns: repeat(3, 1fr); }
.wt-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .wt-grid-3, .wt-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .wt-grid-2, .wt-grid-3, .wt-grid-4 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- chips */

.wt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.wt-chip {
  display: inline-block;
  border-radius: 100px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--rule-light);
}
.wt-dark .wt-chip { border-color: var(--rule-dark); }
.wt-chip b { font-weight: 600; }

.wt-badge {
  display: inline-block;
  border-radius: 100px;
  padding: 7px 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--carbon-ink);
  background: var(--sage-leaf);       /* Unlock LinkedIn product badge */
}

/* ------------------------------------------------------ skills strip */

.wt-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 34px 0 26px;
}

.wt-skill {
  border-radius: 100px;
  padding: 10px 20px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: .06em;
  border: 1px solid var(--rule-dark);
  color: var(--amber-glow);
}

/* ----------------------------------------------------- the build order

   A single band split into four, each segment's width set by its week
   count, so the twelve weeks have a visible shape before any detail is
   read. Ember appears only as the rule capping each segment, which is a
   divider, not a fill: a four-segment ember bar across the page would
   spend the accent budget in one device.                              */

.wt-track {
  display: flex;
  /* Separation lives in the gap, not in item padding. Horizontal padding
     on a flex-basis:0 item is floored by the browser and skews the
     distribution, which would make the widths lie about the weeks. */
  gap: 26px;
  margin-top: 48px;
}

.wt-track__stage {
  flex-basis: 0;              /* widths come purely from flex-grow */
  min-width: 0;               /* a long word must not force a segment wider */
  border-top: 3px solid var(--ember);
  padding-top: 20px;
}

.wt-track__meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ember-text);
  margin: 0 0 8px;
}

.wt-track__stage h4 {
  font-size: 20px;
  margin-bottom: .5em;
}

.wt-track__out {
  font-size: 15px;
  line-height: 1.5;
  opacity: .8;
  margin: 0;
}

@media (max-width: 860px) {
  /* Stacked, the week counts can no longer be read from the widths, so
     the rule moves to the left edge and the meta line carries the range
     on its own. */
  .wt-track {
    flex-direction: column;
    gap: 0;
  }
  .wt-track__stage {
    border-top: none;
    border-left: 3px solid var(--ember);
    padding: 4px 0 26px 20px;
  }
  .wt-track__stage:last-child { padding-bottom: 0; }
}

/* ------------------------------------------------------ pillar weeks */

.wt-pillar { margin-top: 64px; }

.wt-pillar__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-light);
}
.wt-pillar__head .wt-kicker { margin: 0; }
.wt-pillar__head h3 { margin: 0; }

.wt-weeks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
@media (max-width: 780px) { .wt-weeks { grid-template-columns: 1fr; } }

/* Subordinate to the build order above it. These were thirteen blocks of
   equal weight, each with a 40px Ember disc, which made the middle of the
   page a long undifferentiated run and spent a lot of accent on counting.
   The band now carries the structure, so this is the detail underneath:
   denser rows, a mono numeral instead of a disc. */
.wt-week {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--rule-light);
}

.wt-week__num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ember-text);
  padding-top: 3px;
}
.wt-week__num--bonus { font-size: 10.5px; }

.wt-week h4 { font-size: 17px; margin-bottom: .35em; }
.wt-week p { font-size: 15px; line-height: 1.5; opacity: .82; margin-bottom: 8px; }

.wt-week__skill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ember-text);
}

/* ------------------------------------------------------- lead case */

.wt-case {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 44px;
  padding: 38px 0;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
}

.wt-case__portrait { text-align: center; }
.wt-face--lg { width: 116px; height: 116px; flex-basis: 116px; font-size: 30px; margin: 0 auto 16px; }

.wt-case__name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 2px;
}
.wt-case__role { font-size: 14px; opacity: .72; margin: 0 0 12px; }

.wt-case__link {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber-glow);
  text-decoration: underline;
  text-decoration-color: rgba(248, 200, 137, .4);
  text-underline-offset: 4px;
  display: inline-block;
  padding: 11px 0;                 /* keeps it a 40px target */
}
.wt-case__link:hover { text-decoration-color: var(--amber-glow); }

.wt-case__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 52px;
  margin-bottom: 26px;
}
.wt-case__metrics b {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--amber-glow);
}
.wt-case__metrics small {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  opacity: .76;
}

.wt-case__quote {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.5;
  opacity: .94;
  border-left: 3px solid var(--ember);
  padding-left: 22px;
}

@media (max-width: 780px) {
  .wt-case {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .wt-case__portrait {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
  }
  .wt-face--lg { width: 72px; height: 72px; flex-basis: 72px; font-size: 20px; margin: 0; }
  .wt-case__metrics { gap: 18px 34px; }
}

/* -------------------------------------------------------- result set */

.wt-result {
  border-radius: var(--r-card);
  border: 1px solid var(--rule-dark);
  background: rgba(250, 243, 227, .03);
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.wt-result__metric {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(23px, 2.4vw, 29px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--amber-glow);
  margin-bottom: 16px;
}

.wt-result p { font-size: 16px; opacity: .9; flex: 1; }

/* ------------------------------------------------------------ person */

.wt-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.wt-face {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 100px;
  overflow: hidden;
  background: var(--ember);
  color: var(--carbon-ink);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wt-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wt-person__name {
  font-weight: 600;
  font-size: 16px;
  display: block;
}
.wt-person__role {
  font-size: 14px;
  opacity: .74;
  display: block;
}

/* ------------------------------------------------------ founder grid */

.wt-founders {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
}
@media (max-width: 980px) { .wt-founders { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wt-founders { grid-template-columns: 1fr; } }

.wt-founder {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border-radius: var(--r-card);
  border: 1px solid var(--rule-light);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.wt-founder:hover {
  border-color: var(--ember);
  transform: translateY(-2px);
}
.wt-founder .wt-face { width: 38px; height: 38px; flex-basis: 38px; font-size: 12px; }
.wt-founder__text b { display: block; font-size: 15px; font-weight: 600; }
.wt-founder__text span { display: block; font-size: 13px; opacity: .72; line-height: 1.35; }

/* -------------------------------------------------- author + the book */

.wt-author {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .wt-author { grid-template-columns: 1fr; gap: 40px; }
}

/* The book, drawn in CSS so the section stands up with no image file.
   Drop assets/book/linkedin-growth-code.jpg in and it takes over. */
.wt-book {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 3 / 4.1;
  border-radius: 4px var(--r-card) var(--r-card) 4px;
  overflow: hidden;
  background: var(--deep-ink);
  border: 1px solid var(--rule-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px 26px;
}
.wt-book::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 22% 12%, rgba(226, 97, 30, .34), transparent 70%),
    radial-gradient(60% 50% at 92% 96%, rgba(248, 200, 137, .14), transparent 72%);
}
/* the spine */
.wt-book::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 12px;
  background: rgba(0, 0, 0, .32);
  border-right: 1px solid rgba(250, 243, 227, .10);
}
.wt-book > * { position: relative; z-index: 2; }

/* The cover art is a transparent cutout of a white book, so it floats
   straight on Deep Ink. No plinth and no blend mode: both would tint the
   white boards and cost the contrast that makes it read. */
.wt-bookwrap { max-width: 300px; }

.wt-bookwrap .wt-book__cover { display: none; }

.wt-bookwrap.has-cover .wt-book { display: none; }
.wt-bookwrap.has-cover .wt-book__cover {
  display: block;
  width: 100%;
  height: auto;
}

.wt-book__kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber-glow);
  margin: 0 0 14px;
}
.wt-book__rule {
  display: block;
  width: 42px;
  height: 3px;
  background: var(--ember);
  margin-bottom: 18px;
}
.wt-book__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--warm-sand);
  margin: 0 0 16px;
}
.wt-book__by {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(250, 243, 227, .74);
  margin: 0;
}

.wt-bookmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.wt-bookmeta span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 100px;
  border: 1px solid var(--rule-dark);
  opacity: .84;
}

.wt-authorhead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.wt-authorhead .wt-face { width: 62px; height: 62px; flex-basis: 62px; font-size: 17px; }
.wt-authorhead h2 { margin: 0; }
.wt-authorhead .wt-kicker { margin: 0 0 4px; }

/* ------------------------------------------------------- credibility */

.wt-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--rule-dark);
}

.wt-logo img { display: none; }
.wt-logo.has-img b { display: none; }
.wt-logo.has-img img {
  display: block;
  /* Fitted to a box rather than a fixed height. Matching heights would be
     mechanical equality, not optical balance: these marks have very
     different aspect ratios. */
  height: auto;
  width: auto;
  max-height: 28px;
  max-width: 104px;
  /* Flattens any supplied mark to a single light silhouette, so a dark
     logo on transparent does not vanish against Deep Ink and three
     unrelated brand palettes do not fight each other. */
  filter: brightness(0) invert(1);
  opacity: .72;
}

/* A stacked lockup goes illegible at the width of a wordmark, so it gets
   height instead. That lands all three at roughly equal optical area. */
.wt-logo--stacked.has-img img { max-height: 46px; }

/* Until a file lands, the wordmark set in type carries the row. */
.wt-logo b {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  opacity: .72;
}

.wt-logos__caption { margin-top: 16px; }

@media (max-width: 480px) {
  .wt-logos { gap: 12px 22px; }
  .wt-logo b { font-size: 15px; }
}

.wt-list-arrow {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.wt-list-arrow li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  opacity: .92;
}
.wt-list-arrow li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 14px;
  height: 2px;
  background: var(--ember);
}

/* ------------------------------------------------------- offer panel */

.wt-offer {
  border-radius: var(--r-panel);
  background: var(--deep-ink);
  color: var(--warm-sand);
  padding: 52px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 640px) { .wt-offer { padding: 34px 26px; } }

.wt-offer > * { position: relative; z-index: 1; }

.wt-price {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 40px);
  letter-spacing: -.02em;
  color: var(--amber-glow);
  margin: 14px 0 6px;
}

.wt-offer__list {
  list-style: none;
  padding: 0;
  margin: 30px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 34px;
}
@media (max-width: 760px) { .wt-offer__list { grid-template-columns: 1fr; } }

.wt-offer__list li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  opacity: .92;
}
.wt-offer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 13px;
  height: 2px;
  background: var(--ember);
}

/* --------------------------------------------------------------- FAQ */

.wt-faq { margin-top: 40px; border-top: 1px solid var(--rule-light); }

.wt-faq details {
  border-bottom: 1px solid var(--rule-light);
}
.wt-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 24px 44px 24px 0;
  position: relative;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
}
.wt-faq summary::-webkit-details-marker { display: none; }
.wt-faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  color: var(--ember-text);
}
.wt-faq details[open] summary::after { content: "\2212"; }
.wt-faq details p {
  padding: 0 44px 26px 0;
  margin: 0;
  opacity: .88;
}

/* ------------------------------------------------------------ footer */

.wt-footer {
  padding: 40px 0;
  border-top: 1px solid var(--rule-light);
  font-size: 14px;
  opacity: .74;
}
.wt-footer .wt-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
}
.wt-footer a { text-decoration: none; }
.wt-footer a:hover { color: var(--ember-text); }

/* --------------------------------------------------------- utilities */

@media (max-width: 640px) {
  .wt-section { padding: 64px 0; }
  .wt-hero { padding: 72px 0 64px; }
}

/* ------------------------------------------------ mobile refinements */

/* Keyed to the input device, not the viewport. A tablet in portrait is
   768px wide, so it keeps the full desktop nav while still being touched,
   and a width query would leave exactly that case with 24px targets. */
@media (pointer: coarse) {
  /* "Book a call" is the only nav item that survives on a phone, so it is
     the one control that has to be thumb-sized. 11px padding gave a 37px
     target; 14px gives 44. The header's own padding comes down to keep
     the sticky bar from growing in exchange. */
  .wt-header__inner { padding: 10px var(--gutter); }
  .wt-header .wt-btn--sm { padding: 14px 20px; }

  /* The wordmark is a link too, and 32px is short for a thumb. */
  .wt-wordmark { display: inline-block; padding: 6px 0; }

  /* Nav links only appear above 760px, which is a tablet, which is touch. */
  .wt-nav a:not(.wt-btn) { padding: 11px 0; }

  /* Footer links sat at 22px. Padding, not font size, does the work. */
  .wt-footer .wt-wrap { gap: 2px 26px; }
  .wt-footer a { display: inline-block; padding: 10px 0; }
}

@media (max-width: 640px) {
  /* At 30px the price broke as "₹1,50,000 + GST · or" / "USD 2,000",
     splitting the two currencies across lines. Smaller lets the phrase
     break where it means something. */
  .wt-price { font-size: clamp(25px, 6.6vw, 32px); }

  /* Mono micro-copy is fine in a line or two on a desktop measure, but a
     phone turns the same string into four lines. A little more size and
     leading keeps it readable without changing the register. */
  .wt-note { font-size: 13px; line-height: 1.7; }
  .wt-runson { font-size: 12px; line-height: 1.8; }

  /* The cover art carries its own transparent margin, so the book reads
     smaller than its box. Give it the full column on a phone. */
  .wt-bookwrap { max-width: 100%; }
}

/* ------------------------------------------- 3D tile stack (v3.1)

   "How the programme runs" splits into copy and a floating stack of the
   three tools it runs on. Ported from the CLI-deployed build, which
   carried this and was never committed.

   The tiles are optional in the same way the stage shot is: each removes
   itself when its file is missing, and an empty stack collapses rather
   than holding a 420px empty column open. */

.wt-runs__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 56px;
  align-items: center;
}
.wt-runs__copy .wt-lede { max-width: 56ch; }

.wt-stack {
  position: relative;
  min-height: 420px;
  display: block;
}
/* :has, not :empty. The whitespace between the img tags survives as text
   nodes after onerror removes them, so the stack is never truly empty. */
.wt-stack:not(:has(.wt-stack__tile)) { display: none; min-height: 0; }

.wt-stack__tile {
  position: absolute;
  width: 46%;
  /* The one place a shadow is allowed: these are rendered objects with
     real depth, and without a contact shadow they read as stickers. */
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .55));
  animation: wt-float 7s ease-in-out infinite;
}
.wt-stack__tile--1 { top: 0;   left: 14%; z-index: 3; animation-delay: 0s; }
.wt-stack__tile--2 { top: 29%; left: 40%; z-index: 2; width: 44%; animation-delay: .9s; }
.wt-stack__tile--3 { top: 58%; left: 10%; z-index: 1; width: 42%; animation-delay: 1.8s; }

@keyframes wt-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}
@media (prefers-reduced-motion: reduce) {
  .wt-stack__tile { animation: none; }
}

@media (max-width: 900px) {
  .wt-runs__grid { grid-template-columns: 1fr; gap: 34px; }
  .wt-stack { min-height: 290px; max-width: 420px; margin: 0 auto; }
}

/* ---------- CROSS-SITE BAR ----------
   This page began life as a standalone sales page on its own subdomain, so
   its own nav only moves within the page. Landing here from search left a
   visitor with no way to the rest of the site except the footer. Fixed
   height and no wrapping, because the page's own sticky nav is offset by
   exactly this height and a bar that reflowed would leave a gap or overlap.
   Scrolls sideways on narrow screens rather than growing a second row. */
:root{--sitebar-h:38px}
.sitebar{position:sticky;top:0;z-index:60;background:var(--deep-ink);
  border-bottom:1px solid var(--rule-dark,rgba(250,243,227,.16))}
.sitebar__inner{max-width:1120px;margin:0 auto;padding:0 28px;
  /* minus the 1px border, so the bar occupies exactly --sitebar-h and the
     page's own sticky nav, offset by that, meets it with no seam */
  height:calc(var(--sitebar-h) - 1px);
  display:flex;align-items:center;gap:22px;overflow-x:auto;white-space:nowrap;
  scrollbar-width:none;-ms-overflow-style:none}
.sitebar__inner::-webkit-scrollbar{display:none}
.sitebar a{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:rgba(250,243,227,.72)}
.sitebar a:hover{color:var(--ember)}
.sitebar a[aria-current="page"]{color:var(--amber-glow)}