/* ===================================================================
   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: 0;
  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; }

.wt-hero h1 { max-width: 16ch; }
.wt-hero .wt-lede { max-width: 56ch; }

/* The stage shot is optional. Until it loads there is no .has-art, the
   grid stays a single block, and the hero is exactly what it was. */
.wt-hero__art { display: none; margin: 0; }

.wt-hero.has-art .wt-hero__grid {
  display: grid;
  grid-template-columns: 1.24fr 0.76fr;
  gap: 48px;
  align-items: center;
}
.wt-hero.has-art .wt-hero__art { display: block; }

/* The copy column is narrower than the full wrap, so the measure caps
   that shape the single-column hero would squeeze it. The headline drops
   a step too, which is what keeps both CTAs on one line. */
.wt-hero.has-art h1 {
  max-width: none;
  font-size: clamp(34px, 4vw, 52px);
}
.wt-hero.has-art .wt-lede { max-width: none; }

/* 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. A hero image on a phone otherwise
     pushes "Book your discovery call" off the first screen. */
  .wt-hero.has-art .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; }
}

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

.wt-week {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule-light);
}

.wt-week__num {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: var(--ember);
  color: var(--carbon-ink);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wt-week__num--bonus {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ember);
  color: var(--ember-text);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .04em;
}

.wt-week h4 { margin-bottom: .4em; }
.wt-week p { font-size: 16px; opacity: .88; margin-bottom: 10px; }

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

/* -------------------------------------------------------- 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;
  height: 26px;
  width: auto;
  /* 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;
}

/* 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%; }
}