/* ==========================================================================
   Lexi — "soft" pass. Brings the site closer to the app:
   1. light-first (hero on cream, dark reduced to two bands)
   2. orange as the action colour, the way the app's send button uses it
   3. Lora serif for text Lexi wrote; Inter stays the site's own voice
   4. the elephant given presence and motion

   Loaded last, after styles.css and lexi-ui.css. Delete this file and the
   four <video> blocks and the site is back to the previous version.
   ========================================================================== */

@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-Variable.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --soft-cream: #F9F7F2;
  --soft-ink: #191919;
  --soft-ink-2: #3A3833;
  --soft-ink-3: #5F5C52;
  --soft-line: #E3E1DC;
  --soft-orange: #F3660F;
  --soft-orange-ink: #C24E08;  /* orange as text, passes AA on cream */
  --soft-serif: "Lora", Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   1a. #engine LOST ITS DARK GROUND
   Dropping the dark band off #engine left every inline colour in it still
   written for black: white headline, white paragraphs, and a duel whose
   "Lexi" card was #F9F7F2 — the exact cream the section now is, so it
   vanished. All of it re-pointed here, keeping the duel's logic intact:
   the generic card recedes, the Lexi card is the bright one.
   ========================================================================== */

#root #engine h2 { color: var(--soft-ink) !important; }
#root #engine h2 span { color: rgba(25, 25, 25, .55) !important; }
#root #engine .wrap > div:first-child p { color: var(--soft-ink-2) !important; }
#root #engine .wrap > div:first-child p + p { color: var(--soft-ink-3) !important; }

#root #engine .g2 > .duel:first-child {
  background: #EFEDE7 !important;
  border-color: rgba(25, 25, 25, .10) !important;
}
#root #engine .g2 > .duel:first-child .mono { color: var(--soft-ink-3) !important; }
#root #engine .g2 > .duel:first-child > div:not(.mono) { color: var(--soft-ink-2) !important; }

#root #engine .g2 > .duel:last-child {
  background: #fff !important;
  border-color: rgba(25, 25, 25, .10) !important;
}

/* ==========================================================================
   1. HERO ON CREAM
   The app is a light product. A full-viewport black opening was the single
   biggest reason the site did not read as the same thing.
   ========================================================================== */

body.soft-cream-hero #root section#top {
  background: var(--soft-cream) !important;
  color: var(--soft-ink) !important;
}

/* kicker, headline, lead, sub */
body.soft-cream-hero #root section#top .hero-kicker { color: var(--soft-ink-3) !important; }
body.soft-cream-hero #root section#top .hero-h1 { color: var(--soft-ink) !important; }
body.soft-cream-hero #root section#top .hero-lead { color: var(--soft-ink) !important; }
body.soft-cream-hero #root section#top .hero-sub { color: var(--soft-ink-3) !important; }
body.soft-cream-hero #root section#top .hn-note { color: var(--soft-ink-3) !important; }

/* stats */
body.soft-cream-hero #root section#top .hn-v { color: var(--soft-ink) !important; }
body.soft-cream-hero #root section#top .hn-l { color: var(--soft-ink-3) !important; }
body.soft-cream-hero #root section#top .hn-bar { background: var(--soft-line) !important; }
body.soft-cream-hero #root section#top .hn-bar i { background: var(--soft-ink) !important; }

/* the laptop's drop shadow was tuned for a dark ground */
body.soft-cream-hero #root section#top .laptop-wrap img {
  filter: drop-shadow(rgba(60, 50, 40, .22) -18px 26px 40px) !important;
}

/* Every page runs a scroll handler that shows the white logo over its hero
   and swaps to black past it. The homepage's hero is cream now, so black is
   correct from the top — but ONLY there: the other pages still open dark, and
   forcing black site-wide would put a black logo on a black hero. Hence the
   body class rather than a blanket rule. */
body.soft-cream-hero #nav-logo-w { display: none !important; }
body.soft-cream-hero #nav-logo-b { display: block !important; }

/* ==========================================================================
   1b. THE OTHER PAGES OPENED DARK TOO
   Flipping only the homepage left the site contradicting itself: cream home,
   black Products. Every other hero uses one of five wrappers, all on #191919
   with white or translucent-white copy.

   Only known hero-copy classes are re-pointed. The product heroes contain a
   whole light mockup (ws-*, stg-*, fchrome) whose text is already dark by
   design, so no bare `span`/`p` selectors appear here — one blanket rule
   would invert those and undo the mockups Boris asked us to leave alone.
   ========================================================================== */

body.soft-cream-hero #root .cw-hero,
body.soft-cream-hero #root .hiw-hero,
body.soft-cream-hero #root .t-hero,
body.soft-cream-hero #root .os-hero,
body.soft-cream-hero #root .cs-hero,
body.soft-cream-hero #root .lg-hero {
  background: var(--soft-cream) !important;
  color: var(--soft-ink) !important;
}

/* THE GLOW WAS BEING SLICED.
   `.cwh-glow` is a 520px-tall orange bloom placed at `top:38%`. On the old
   dark heroes there was room for it; the cream heroes are shorter — on
   results the box ran to 736px inside a 533px hero with `overflow:hidden`,
   so it got cut by a hard horizontal line straight across the page. That is
   the tear. Sized in percentages of the hero instead of fixed pixels, and
   ending well above the bottom edge, so the fade always completes inside. */
body.soft-cream-hero #root .cwh-glow {
  top: 6% !important;
  height: 56% !important;
  width: min(900px, 78%) !important;
}
/* the grid overlay is drawn in translucent white — invisible on cream, and
   its own radial mask added a second edge. Nothing is lost by dropping it. */
body.soft-cream-hero #root .cwh-grid { display: none !important; }

/* the legal heroes are four elements: kicker, h1, lede, "last updated" */
body.soft-cream-hero #root .lg-hero h1 { color: var(--soft-ink) !important; }
body.soft-cream-hero #root .lg-hero .kicker,
body.soft-cream-hero #root .lg-hero p,
body.soft-cream-hero #root .lg-hero .lg-updated { color: var(--soft-ink-3) !important; }

/* headline-weight copy */
body.soft-cream-hero #root .cw-hero > .wrap h1,
body.soft-cream-hero #root .hiw-hero > .wrap h1,
body.soft-cream-hero #root .t-hero > .wrap h1,
body.soft-cream-hero #root .os-hero > .wrap h1,
body.soft-cream-hero #root .cs-hero > .wrap h1,
body.soft-cream-hero #root .cw-hero h1,
body.soft-cream-hero #root .hiw-hero h1,
body.soft-cream-hero #root .t-hero h1,
body.soft-cream-hero #root .os-hero h1,
body.soft-cream-hero #root .cs-hero h1 { color: var(--soft-ink) !important; }

/* supporting copy: kickers, ledes, subs, breadcrumbs, stat labels */
body.soft-cream-hero #root .cw-hero > .wrap .mono,
body.soft-cream-hero #root .cw-hero .sub,
body.soft-cream-hero #root .hiw-hero .lede,
body.soft-cream-hero #root .t-hero .lede,
body.soft-cream-hero #root .cs-hero .lede,
body.soft-cream-hero #root .os-hero .os-sub,
body.soft-cream-hero #root .cs-hero .cs-crumb,
body.soft-cream-hero #root .t-hero .t-crumb,
body.soft-cream-hero #root .cs-hero dt { color: var(--soft-ink-3) !important; }

body.soft-cream-hero #root .cs-hero dd,
body.soft-cream-hero #root .os-hero .wrap b { color: var(--soft-ink) !important; }

/* our-story's stat strip: <b> is the number, the sibling <span> its label.
   No mockup lives in this hero, so a scoped span selector is safe here. */
body.soft-cream-hero #root .os-hero .wrap span { color: var(--soft-ink-3) !important; }

/* the product heroes' example caption under the mockup */
body.soft-cream-hero #root .cw-hero .cw-cap { color: var(--soft-ink-3) !important; }

/* how-it-works: the pipeline animates by toggling `.on` on each station and
   sets no inline colours, so the active/inactive distinction can be kept —
   it just moves from white/42%-white to ink/40%-ink. The lit chips
   (.pipe-token, .pipe-fill) already carry dark text on white and are left be. */
body.soft-cream-hero #root .hiw-hero .wrap > p { color: var(--soft-ink-3) !important; }
body.soft-cream-hero #root .hiw-hero .stn.on .stn-h { color: var(--soft-ink) !important; }
body.soft-cream-hero #root .hiw-hero .stn:not(.on) .stn-h { color: rgba(25, 25, 25, .40) !important; }
body.soft-cream-hero #root .hiw-hero .stn:not(.on) .stn-n { color: rgba(25, 25, 25, .45) !important; }
body.soft-cream-hero #root .hiw-hero #pipe-brief,
body.soft-cream-hero #root .hiw-hero #pipe-src { color: var(--soft-ink-2) !important; }
body.soft-cream-hero #root .hiw-hero .hero-facts b { color: var(--soft-ink) !important; }
body.soft-cream-hero #root .hiw-hero .hero-facts span { color: var(--soft-ink-3) !important; }
/* The pipeline was drawn entirely in translucent white — rail, progress line,
   station boxes and their borders. All of it vanished on cream, which is why
   the diagram read as floating text with no structure. Same alpha values,
   moved to ink. */
body.soft-cream-hero #root .hiw-hero .pipe-rail { background: rgba(25, 25, 25, .14) !important; }
body.soft-cream-hero #root .hiw-hero .pipe-fill { background: var(--soft-ink) !important; }
body.soft-cream-hero #root .hiw-hero .stn-box {
  background: rgba(25, 25, 25, .035) !important;
  border-color: rgba(25, 25, 25, .12) !important;
}
body.soft-cream-hero #root .hiw-hero .stn.on .stn-box {
  background: rgba(25, 25, 25, .06) !important;
  border-color: rgba(25, 25, 25, .28) !important;
}

/* the draft line the pipeline types out */
body.soft-cream-hero #root .hiw-hero .dl b { color: var(--soft-ink) !important; }
body.soft-cream-hero #root .hiw-hero .stn-draft .dl { color: var(--soft-ink-2) !important; }

/* The trigger chips only reach these states partway through the pipeline's
   cycle, which is why the first sweep did not catch them: `.hit` chips are
   solid white with ink on them and are already right, but the pending ones
   were translucent white on translucent white. */
body.soft-cream-hero #root .hiw-hero .stn-trigs > :not(.hit) {
  color: rgba(25, 25, 25, .62) !important;
  background: rgba(25, 25, 25, .07) !important;
}

/* the ghost button was drawn for a dark ground */
body.soft-cream-hero #root .cw-hero .hbtn-ghost,
body.soft-cream-hero #root .hiw-hero .hbtn-ghost {
  color: var(--soft-ink) !important;
  border-color: rgba(25, 25, 25, .28) !important;
}
body.soft-cream-hero #root .cw-hero .hbtn-ghost:hover,
body.soft-cream-hero #root .hiw-hero .hbtn-ghost:hover {
  background: rgba(25, 25, 25, .05) !important;
  border-color: var(--soft-ink) !important;
}

/* ==========================================================================
   2. ORANGE IS THE ACTION
   In the app the send button is orange. Primary calls to action follow it.
   ========================================================================== */

#root .hbtn-solid,
#root .btn-primary,
#root .bub-btn {
  background: var(--soft-orange) !important;
  color: #fff !important;
  border-color: var(--soft-orange) !important;
}
#root .hbtn-solid:hover,
#root .btn-primary:hover,
#root .bub-btn:hover {
  background: var(--soft-orange-ink) !important;
  color: #fff !important;
}

/* secondary on cream: ink outline instead of the white-on-dark ghost */
body.soft-cream-hero #root section#top .hbtn-ghost {
  color: var(--soft-ink) !important;
  border-color: rgba(25, 25, 25, .28) !important;
}
body.soft-cream-hero #root section#top .hbtn-ghost:hover {
  background: rgba(25, 25, 25, .05) !important;
  border-color: var(--soft-ink) !important;
}

/* live / active indicators pick up the accent, as they do in the app */
#root .dot-live,
#root .sdot { background: var(--soft-orange) !important; }

/* ==========================================================================
   3. LORA = TEXT LEXI WROTE
   Inter stays the site's own voice: nav, headings, buttons, labels.
   Lora is reserved for quoted and generated copy, mirroring the app, where
   the editor body is serif and the chrome is not.
   Product mockups are deliberately left alone.
   ========================================================================== */

#root .vs-b,                       /* the Lexi column in the comparison */
#root blockquote,
#root .pq,                         /* pull quote, Boris */
#root .cs-quote,
#root .ws-sample,
#root #ws-msg,                     /* the message being scored — the app's editor */
#root #duel-lexi,                  /* Lexi's rewrite, against the generic one */
#root .vf-rule {                   /* the Voicebook rules, quoted verbatim */
  font-family: var(--soft-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
#root .pq,
#root blockquote { font-style: italic; }

/* Its own rule, not part of the list above: one selector a browser cannot
   parse invalidates the whole comma-separated list with it. */
#root #ws-msg::placeholder { font-family: var(--soft-serif) !important; }

/* ---- Lora at display size -------------------------------------------------
   Everything above is 15–19px, which is why nobody could see the serif: at
   that size a typeface change does not register as a decision.

   Every section headline on the site is built the same way — a bold sans
   statement, then a lighter <span> as its second line, at 36 or 56px. That
   span is the half that speaks in Lexi's voice ("Yours is scored in
   seconds.", "Lexi manages what they say.", "that actually work?"), so it is
   the natural place for the serif, and it turns the pairing into a system
   rather than an ornament.

   Excluded: #problem, whose span is a single emphasized word mid-sentence,
   not a second line. */
#root section h1 > span,
#root section h2 > span {
  font-family: var(--soft-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -.012em !important;
  /* the two lines sat on the headline's own 0.98 line-height, which is right
     for one typeface but too tight where a serif answers a sans — the pair
     needs to read as two beats, not one wrapped sentence */
  line-height: 1.3 !important;
}
#root #problem h2 > span { font-family: inherit !important; font-weight: 300 !important; }

/* The sans half carries the statement, so it takes the heaviest weight the
   family has. The 56px headlines were already at 900; this brings the 36px
   ones up to match, so the contrast against the serif is consistent.

   These need the long selectors. lexi-ui.css pins the pair with
   `body.v19 #root .tier-sub h2 { font-weight:700 !important }` and a matching
   span rule at 300 — both out-specify a plain `#root section h2`, so the
   short version loses silently. Matching their own hooks ties the
   specificity, and soft.css loads later, which settles it. */
body.v19 #root .tier-sub h2,
body.v19 #root .tier-chapter h2,
body #root section h2 { font-weight: 900 !important; }

body.v19 #root .tier-sub h2 > span,
body.v19 #root .tier-chapter h2 > span,
body #root section h2 > span { font-weight: 400 !important; }

/* ==========================================================================
   5. #tools WAS A FIFTH OF THE PAGE
   Three product rows, each pinned to `min-height: 972px` while their content
   runs 450–600px. The emptiness was enforced, not needed. The spine and its
   connect dots are laid out against the rail, so they follow the new height.
   ========================================================================== */
#root #tools .flow-row { min-height: 700px !important; }

/* The stage's 126px top/bottom margins are travel room for the parallax:
   the inner .fcard moves about 74px as the row crosses the viewport. 90px
   keeps 16px of clearance, so this is as far as it can be cut without the
   card reaching into the neighbouring row. */
#root #tools .flow-stage { margin-top: 90px !important; margin-bottom: 90px !important; }

/* .ws-hand was tried here and reverted: it is an uppercase, letter-spaced
   label, and a serif on tracked caps reads as a mistake. Labels stay Inter —
   that is the rule, not an exception to it. */

/* The duel is the clearest place to SHOW the rule rather than state it:
   generic output stays in Inter, Lexi's rewrite turns serif. Keep the
   weight the markup asked for — the sentence is meant to read as the
   stronger one. */
#root #duel-lexi { font-weight: 450 !important; }

/* ==========================================================================
   4. THE ELEPHANT
   It was flat decoration in a corner. Now it has one real moment and it
   moves everywhere else.

   The clips have no alpha channel — they are rendered on a solid ground —
   so a clip only works where that ground can be made to disappear:
     - the walking clip's ground is a flat rgb(246,244,240), which the video
       compositor paints as rgb(248,246,242) — one point off the page cream,
       so it needs no correction at all. Measured, not assumed: a gain filter
       that looked right on paper overshot to (251,249,244) and made the frame
       visible as a pale box.
     - the sitting clip's ground is a warm vignette, twelve points off, and
       the elephant's feet touch the frame edge, so neither a gain nor a
       feather can hide it. Those placements keep the cut-out PNG, which has
       real transparency, and get motion from `el-bob` instead.
   ========================================================================== */

.el-video {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
/* reduced motion is handled in soft.js: the clip is paused on its first
   frame, so the elephant is still there, it just stops moving. */

/* the walking elephant above the closing question, the way the app puts one
   above "Boris, što danas radimo?" */
.el-walk { display: flex; justify-content: center; margin: 0 0 26px; }

/* THE SITTING CLIP ON CREAM.
   It has no alpha and its ground is a warm vignette, so its frame edge shows
   as a box. Rather than hide the edge, this gives it nothing to contrast
   against: a halo painted in the clip's own ground colour extends past the
   frame on every side and fades out to the page over ~90px. Where the clip
   meets the halo the two colours are the same, so there is no edge to see;
   the only visible transition is the gradient, which is ours to control.
   The colour is the clip's border as the compositor paints it, measured —
   decoded (243,240,229), painted about two points brighter. */
.el-sit { --el-ground: rgb(243, 240, 231); position: relative; }
.el-sit::before {
  content: "";
  position: absolute;
  /* The halo must finish fading before the section clips it, or its own edge
     becomes the hard line — hence a tighter vertical inset than horizontal.
     The bottom is tightest: that is where the fade read as a pale smudge on
     the page. Solid out to 80% keeps the clip's own frame covered. */
  inset: -11% -19% -9%;
  background: radial-gradient(closest-side ellipse at 50% 50%,
              var(--el-ground) 0%, var(--el-ground) 80%, rgba(243, 240, 231, 0) 100%);
  z-index: 0;
  pointer-events: none;
}
/* A flat halo cannot match a vignette: the clip's ground runs from about 236
   at the top to 248 near the bottom. So the clip dissolves into the halo
   before its frame edge is reached, and the mismatch fades out with it.

   The bottom is NOT faded. It was, and that was the smudge: the fade began
   at 86% of the frame while the feet run to 97.7%, so it was dissolving the
   last ~60px of the animal, not the ground. The 12px of clip below the feet
   is the same colour as the halo behind it, so the frame edge there needs no
   mask — it has nothing to contrast against. */
.el-sit > video {
  position: relative;
  z-index: 1;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* An elephant near the top, sitting beside the scorer as if reading what you
   pasted. Below 1240px the card grows to full width and would cover it
   completely, so it steps out rather than hiding behind the card. */
@media (max-width: 1240px) { .el-score { display: none !important; } }

/* Same clip in the Voicebook corner. Below 1100px the section's own content
   reaches the edge and there is no room left for it. */
@media (max-width: 1100px) { .el-vb { display: none !important; } }

/* Results' closing block was the last near-black area on a cream site. The
   dark came from the SECTION (`#cta.tband`), not just the card inside it —
   which is why removing the card's fill alone changed nothing.

   `tband` forces every descendant white via
   `body.v19 #root section.tband h3 { color:#fff !important }`, so the
   selectors here carry both ids to out-specify it. `#cta.tband` exists only
   on this page, so nothing else is touched. With the fill gone the headline
   has to carry the section alone, hence 27px → 46px. */
body.v19 #root section#cta.tband,
body.v19 #root section#cta.tband .dd-card.is-dark {
  background: transparent !important;
  color: var(--soft-ink) !important;
}
body.v19 #root section#cta.tband h2,
body.v19 #root section#cta.tband h3 {
  color: var(--soft-ink) !important;
  font-size: clamp(30px, 3.4vw, 46px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.03em !important;
}
body.v19 #root section#cta.tband :is(p, span, li, b, strong) {
  color: var(--soft-ink-3) !important;
}
/* its button was white-on-dark */
body.v19 #root section#cta.tband :is(.btn-light, .btn.btn-light, .btn-primary) {
  background: var(--soft-orange) !important;
  color: #fff !important;
}

/* how-it-works already closes with the walking clip; this is the second one
   the page asked for. The hero is full edge to edge, so it goes in the only
   genuinely clear corner on the page: bottom right of "Every message says two
   things", below the stat cards and clear of the centred closing line. */
/* A positioned element with z-index:0 still paints above its non-positioned
   siblings' content, so at this size the animal covered the third stat card.
   Giving the section's own content a layer puts him behind it, peeking out. */
#root .wiw > .wrap { position: relative; z-index: 1; }
@media (max-width: 1200px) { .el-wiw { display: none !important; } }

/* 404: the copy already says "the elephant remembers everything else" — it
   just never showed him. The page is near-black, so this is the cut-out;
   a halo would read as a bright smudge on that ground. */
.el-404 { animation-delay: -3.4s; }
@media (max-width: 900px) { .el-404 { display: none !important; } }

/* our-story's "why the elephant?" card sits on #E3E1DC, sixteen points darker
   than the clip's ground — so the halo trick backfired there and read as a
   pale box around the animal. The card is a single flat colour, which the
   halo never was, so here the clip itself is corrected onto it instead:
   #el-card is a per-channel gain measured from the card, no halo, no mask. */
.os-ps .el-sit { width: 100%; max-width: 280px; margin: 0 auto; }
.os-ps .el-sit::before { display: none !important; }
.os-ps .el-sit > video {
  filter: url(#el-card);
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* the cut-outs breathe rather than sit dead still */
@keyframes el-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes el-bob-flip {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50%      { transform: scaleX(-1) translateY(-9px); }
}
.el-bob { animation: el-bob 6.5s ease-in-out infinite; will-change: transform; }
.el-bob--flip { transform: scaleX(-1); animation-name: el-bob-flip; }

@media (prefers-reduced-motion: reduce) {
  .el-bob, .el-bob--flip { animation: none !important; }
}

/* The cookie banner stays on the cut-out too: on the banner's near-black the
   clip's cream ground reads as a pale box. Bigger and vertically centred. */
#lx-cookie .lx-el { width: 104px; flex-shrink: 0; align-self: center; }

/* ==========================================================================
   7. THE PRODUCT PAGES
   Both of these live only on analyzer / supporter / copywriter — the classes
   appear nowhere else, so no page scoping is needed.
   ========================================================================== */

/* The app mockup's shell was a grey #DEDCD7. White reads as the real product
   and stops the mockup looking like a screenshot pasted onto the page. */
#root #ws-app { background: #fff !important; }

/* `.appframe` is the same product window drawn a second way — and it had the
   layers inverted: cream shell, white panes. `#ws-app` does it the other way
   round (white frame, beige panes) and that is the one that reads as the app.
   Same two values here, so the six pages carrying this mockup match. */
#root .appframe {
  background: #fff !important;
  border-color: rgb(236, 234, 226) !important;
}
#root .appframe .app-pane { background: rgb(247, 244, 237) !important; }

/* The closing CTA on how-it-works sat on a grey #E3E1DC card. On a cream page
   the card added a box without adding meaning — the headline, the sub and the
   two buttons already group themselves. `.cta-box` exists only on that page. */
#root .cta-box { background: transparent !important; }

/* The "Live demo" pill carried the same grey as the old shell. It is the only
   element on the page with that colour written inline, so this is exact. */
#root .cw-mockwrap span[style*="DEDCD7"] { background: #fff !important; }

/* The scrolling word strip was a near-black band cutting across a cream page.
   Transparent ground, ink words: the highlighted one solid, the rest at the
   same 42% the design already used, and the dot separators to match. */
#root .strip-dark { background: transparent !important; }

/* Losing the dark fill cost the band its structure: the strip and the client
   logos became two near-identical grey lines separated by 190px of dead
   cream, reading as two orphans rather than one run of proof. The logo
   section was carrying 120px of padding top and bottom for 86px of content —
   pulling that in groups the two together, which is the flow the colour
   block used to provide.

   The long selector is again about specificity: lexi-ui.css sets the section
   rhythm with `#root body.v19 section.rhy { padding: 120px 0 !important }`,
   so the adjacency alone loses. Adding .v19 to the chain wins it. */
#root .strip-dark { padding: 44px 0 !important; }
body.v19 #root .strip-dark + section.rhy {
  padding-top: 56px !important;
  padding-bottom: 96px !important;
}
#root .strip-dark b { color: var(--soft-ink) !important; }
#root .strip-dark i { color: rgba(25, 25, 25, .42) !important; }
#root .strip-dark em { background: rgba(25, 25, 25, .30) !important; }

/* ==========================================================================
   6. TWO PRE-EXISTING BUGS, FOUND WHILE MEASURING THE ABOVE
   Both were present before this pass — verified by running the same contrast
   scan against the previous build and getting identical counts.
   ========================================================================== */

/* a) The comparison table's ✓ was invisible on desktop. `lexi-ui.css` renders
   it as a white ::before, but only inside the mobile media query; on desktop
   the literal ✓ inherits ink and the cell's own background is also ink.
   Affected analyzer, supporter and copywriter — six marks each. */
#root .cmp-table td.yes { color: #fff !important; }

/* b) Seventeen invisible footer links on the React pages. `lexi-ui.css` line
   23 forces every .footer-link to ink with !important, which is right for the
   cream `.site-footer` the static pages use — but blog, article and
   case-study-rbi ship an inline dark footer (#0E0E0E), so their links were
   ink on near-black. Scoped to footers that are not `.site-footer`. */
#root footer:not(.site-footer) .footer-link { color: rgba(255, 255, 255, .72) !important; }
#root footer:not(.site-footer) .footer-link:hover { color: #fff !important; }

/* ==========================================================================
   BORIS — HOMEPAGE FEEDBACK
   ========================================================================== */

/* #0 — REVERTED. The headings are back on their original tracking
   (-.025em to -.038em, depending on the rule that owns them in lexi-ui.css,
   styles.css and lexi-legal.css). Nothing here overrides it any more, so the
   originals apply again untouched — they were never deleted, only outranked.
   Boris looked at zero tracking on the real pages and asked for the old one
   back. */


/* #4 — the pull-quote byline was inheriting Lora from `.pq`. It is a name and
   a role, not quoted copy, so it goes back to Inter. Upright: `cite` is
   italic by default and `.pq` adds its own italic. The uppercase tracking
   stays, per the rule above. */
#root .pq cite,
#root blockquote cite {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* --------------------------------------------------------------------------
   SECTION 2 — Borisov feedback na proizvode, results, guide i our story
   -------------------------------------------------------------------------- */

/* #1 — the orange bloom behind every hero, gone. It was a leftover from the
   dark heroes, where it read as light coming off the headline; on cream it is
   just a peach smudge. Both variants: `.cwh-glow` on the product, results,
   trust, story and case-study heroes, `.lg-glow` on the legal ones. */
#root .cwh-glow,
#root .lg-glow { display: none !important; }

/* #2 — the TRUSTED BY logo band on the three product pages. The homepage,
   how-it-works and our-story keep theirs: those bands carry their own
   sentence ("Already running this exact process."), and Boris asked only for
   the products. Told apart structurally — the product band is the only one
   whose `#logo-track` follows a `p.mono` inside the same `.wrap`, which is
   how the three pages differ from the other three. Verified by measurement,
   not by eye: the rule matches on copywriter and does not match on our-story.
   Hidden rather than deleted so `logo-track` still exists for cw-page.js,
   which appends to it without a null check. */
#root section:has(> .wrap > p.mono + #logo-track) { display: none !important; }

/* #3 — the inline link under the security paragraph had no hover at all:
   ink-coloured, no underline, nothing on pointer. Now it reads as a link
   before you touch it and confirms on hover. */
#root .ilink {
  color: var(--soft-ink) !important;
  text-decoration: underline;
  text-decoration-color: rgba(25, 25, 25, .28);
  text-underline-offset: 3px;
  transition: color .16s ease, text-decoration-color .16s ease;
}
#root .ilink:hover,
#root .ilink:focus-visible {
  color: var(--soft-orange-ink) !important;
  text-decoration-color: var(--soft-orange) !important;
}

/* #4 and #6 — results ran 250px of air between the lede and the first case
   card, and 252px between the last card and the closing elephant. Halved on
   both sides. Scoped to `body.p-results`, a marker added to that page only,
   because `.rhy` and `#top` are shared with pages Boris did not ask about. */
/* The hero's own padding is set by `body.v19 #root main > section#top.t-hero`
   at (0,2,2,3) with !important, so the first attempt at this — one class
   short — silently lost and the gap only fell 250 -> 194. Measured, not
   assumed: it is the hero's 130px bottom that survived. Matching that rule's
   shape plus `.p-results` takes it to (0,2,3,3). */
body.v19.p-results #root main > section#top.t-hero { padding-bottom: 48px !important; }
body.p-results #root #cases { padding-top: 64px !important; padding-bottom: 56px !important; }
body.p-results #root #cta { padding-top: 64px !important; }

/* #7 — the sitting elephant in the Guide hero. Hidden, not deleted: the
   markup lives inside the bundler template, and a CSS line survives a
   regeneration of that page where a hand-deleted tag would not. */
#root .man-el { display: none !important; }

/* #8 — the Rory Sutherland quote was Lora italic. Upright now.
   `.pq` is excluded explicitly. The first attempt relied on `.pq` winning on
   specificity, which was wrong: the italic rule for `.pq` carries no
   !important, so this one's !important beat it and de-italicised the homepage
   pull quote too. `:not(.pq)` is the fix — Boris pointed at the Rory quote,
   not at Boris quoting himself. */
#root blockquote:not(.pq) { font-style: normal !important; }

/* --------------------------------------------------------------------------
   LAPTOP STRAIGHTENED
   -------------------------------------------------------------------------- */

/* The mock was rotated -8deg, so every line of type on the screen sat at -8deg
   with it — screen content cannot leave the plane of the screen. The rotation
   is gone from the markup (desktop and the 900px breakpoint both).

   Straightening moved the laptop's left edge 33px inwards at the height of the
   stats, and the third stat's rule ("countries live") ran 62px underneath the
   aluminium base — measured, not guessed. The visual sat at `right:11%`; 4.5%
   of 1440 is 65px. 6.5% cleared it by 2px, which is inside the margin a
   different font render can eat, so it went to 5%: 23px of daylight at 1440,
   142px at 1600, and the right edge still 87px inside the viewport. */
body.soft-cream-hero #root section#top .hero-visual { right: 5% !important; }

/* --------------------------------------------------------------------------
   FOOTER UNIFIED ON THE THREE REACT PAGES
   -------------------------------------------------------------------------- */

/* blog, article and case-study-rbi are React pages, and their footer was JSX:
   a different component entirely — near-black instead of cream, 353px instead
   of 709px, seventeen links of which seventeen were href="#", and a product
   list naming Seeker and Booker. Swapped for a JSX port of the real
   `site-footer`.

   Two base rules the swap needed are not in any stylesheet: the fifteen static
   pages each carry their own inline copy, and these three never did, because
   their old footer had no use for them. `.foot-word` rendered at 16px in ink
   instead of 310px in cream, and `.foot-col-h` lost its mono, its tracking and
   its uppercase — measured, which is how the 488px-against-709px footer height
   gave it away.

   Values copied verbatim from the static pages' inline rule, so it does not
   matter which of the two wins a tie: the result is identical either way. */
footer.site-footer .foot-word {
  font-size: clamp(110px, 21.5vw, 340px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: .78;
  color: #F9F7F2;
  user-select: none;
}
footer.site-footer .foot-col-h {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--mut);
  margin-bottom: 16px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   H4/H5/H6 EXTRA BOLD, NOT BLACK
   -------------------------------------------------------------------------- */

/* lexi-ui.css already asks for 800 on h1–h5, but the product pages carry an
   inline `.xsell-card h4 { font-weight:900 !important }`, which is why the
   size-22 cross-sell headings on copywriter, supporter and analyzer rendered
   black while every other h4 on the site was extra bold. Measured: 800
   everywhere except those.

   `#root h4` is (0,1,0,1) against that rule's (0,0,1,1) — one id outranks one
   class — so with !important on both, this one wins. h6 is listed for
   completeness; the site does not use it anywhere. */
#root h4,
#root h5,
#root h6 { font-weight: 800 !important; }

/* --------------------------------------------------------------------------
   THE STANDING ELEPHANT — #people
   -------------------------------------------------------------------------- */

/* A third clip, full-body frontal. Measured before placing, because the file
   arrived as a 9 MB QuickTime in HEVC (`hvc1`) with an audio track: Chrome on
   this Mac decodes that, but Chrome on Windows and Firefox do not, so shipped
   as it came it would have been an invisible hole for a large share of
   visitors. Transcoded with macOS's own `avconvert` at PresetHighestQuality,
   trimmed to 5s: H.264, native 732x720, 2.1 MB — in line with the two clips
   already on the site (1.7 and 2.4 MB). PresetMediumQuality was rejected: it
   downscales to 480x472, which would be upscaled on a retina screen.

   Trimming to 5s also fixed something I had not gone looking for. The clip's
   ground is rgb(244,236,222) for the first six seconds and then shifts to
   rgb(241,234,217) — measured across eight frames during playback, because
   seeking on this file kept returning the same frame and made a frame-by-frame
   read useless. Cutting at 5s keeps the ground constant, which the halo below
   depends on. */

.el-stand { --el-ground: rgb(244, 236, 222); position: relative; }

/* The clip has no alpha at all (checked: alpha 255 across 31,003 sampled
   pixels), and its ground is 20 points off the page cream on blue — a warm
   box, far worse than the walking clip's one point. So the ground is not
   hidden, it is extended: the halo is painted in the clip's own colour and
   fades to nothing well outside the video's frame.

   The subject's margins inside the frame are 12px left, 99px right, 72px top,
   21px bottom. Only right and top have room to fade, which is why the mask
   below touches only those two. The left and bottom edges of the video stay
   hard — and invisible, because they land inside the solid part of a halo of
   exactly the same colour. */
/* The halo was tried first and rejected by looking at it: with the ground 20
   points off the page on blue, even a faded halo read as a warm rectangle
   around the elephant. Correcting the clip itself is the cleaner answer — the
   ground is lifted onto the page cream by a per-channel gain, so there is
   nothing left to hide and no halo at all. Slopes are tuned against pixels
   sampled from a screenshot, not from `drawImage`: the compositor paints a
   couple of points brighter than the canvas reports, which is what made a
   filter overshoot earlier in this build. */

.el-stand > video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: url(#el-cream);
}

/* `#people` is `position:static` in the markup, so the clip had nothing to
   anchor to. The wrap is lifted above it: a positioned element with z-index 0
   still paints over a non-positioned sibling, which is how the enlarged
   elephant covered a stat card earlier in this build. */
#root #people { position: relative; }
#root #people > .wrap { position: relative; z-index: 1; }

/* Below 1240px the quote block widens into the gutter the elephant occupies,
   so it steps out rather than sitting behind the text. */
@media (max-width: 1240px) {
  .el-stand { display: none !important; }
}

/* The scorer section is commented out, and its elephant moved down into
   #problem. #score was `position:relative; overflow:hidden`; #problem is
   static and visible, so the absolutely-positioned clip would otherwise
   anchor to the page and spill past the section. */
#root section#problem { position: relative; overflow: hidden; }

/* The giant footer address became a mailto link, and an <a> is inline — so the
   inline `text-align:center` on it had nothing to centre and the word sat left.
   Block-level puts it back in the middle. */
footer.site-footer a.foot-word { display: block; text-decoration: none; }