/* ==========================================================================
   LANDING PAGE V2
   ==========================================================================

   Loaded only on /ai/, /ai-light/ and /ai-spectrum/. system.css, programme.css
   and chrome.css load underneath it exactly as they do everywhere else, so the
   component layer — the client wall, the tools strip, the session accordions,
   the FAQ, the footer — is inherited rather than rebuilt. This file changes the
   hero, adds the form, and repaints for the two non-default grounds.

   WHY THE FORM IS NOT A CARD. DESIGN.md v8 bans floating panels, cards,
   bordered boxes and rounded containers outright. What it does permit is the
   accent or a ground "as a field: full-bleed band on the grid, running to at
   least one edge". So the form is not a box sitting on the hero — it is a
   change of ground that runs off the right edge of the viewport on desktop and
   the full width on mobile. The join between the two grounds is the divider,
   which is also the only section divider the system allows.

   THE MEASUREMENT THIS FILE EXISTS TO MOVE. On the live page the first form
   input sits at 8,251px on a 375px-wide screen, which is 85.2% scroll depth.
   Clarity puts the average mobile scroll depth at 19.4%. Target here: the first
   input inside 950px, and above the fold at 1440x900.
   ========================================================================== */

/* ============================================================ SHARED TOKENS */
.lp2{
  --lp2-ground:var(--ink);
  --lp2-ink:var(--stock);
  --lp2-soft:var(--on-dark);
  --lp2-mute:var(--grey);
  --lp2-hair:var(--on-dark-rule);

  --form-ground:var(--stock);
  --form-ink:var(--ink);
  --form-soft:var(--ink-soft);
  --form-hair:var(--rule);
  --form-hair-soft:var(--rule-soft);
  --form-btn:var(--ink);
  --form-btn-ink:var(--stock);
  --accent:var(--ion);
}

/* ================================================================ 1 · HERO */
.lp2-hero{
  background:var(--lp2-ground); color:var(--lp2-ink);
  position:relative; overflow:hidden;
}

/* The dot field. One per page, opening surfaces only, never on a light ground —
   which is why it is gated on the dark variant rather than written into the
   base. */
.lp2[data-v="dark"] .lp2-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.12;
  background-image:radial-gradient(var(--stock) 1px, transparent 1.1px);
  background-size:7px 7px;
  mask-image:linear-gradient(to bottom, transparent, #000 55%, #000);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 55%, #000);
}
.lp2-hero > .wrap{position:relative; z-index:2}

.lp2-hero-grid{
  display:grid;
  grid-template-columns:1fr;
  align-items:start;
}

/* ------------------------------------------------------------- the copy half */
.lp2-copy{
  padding-block:clamp(26px,4.2vw,64px) clamp(28px,3.6vw,56px);
}
.lp2-eyebrow{color:var(--lp2-ink); display:inline-block; opacity:.9}
.lp2-rule{
  width:56px; height:3px; background:var(--accent);
  margin:clamp(14px,1.8vw,22px) 0 clamp(16px,2vw,26px);
}
/* Smaller than the live hero at every width, on purpose. 116px of headline is a
   poster; this page has to get a person to a field inside one screen. */
.lp2-h1{
  font-size:clamp(38px,5.6vw,72px); line-height:.96; letter-spacing:-.038em;
  text-wrap:balance; max-width:15ch; font-weight:500;
}
.lp2-standfirst{
  color:var(--lp2-soft);
  font-size:clamp(16.5px,1.15vw,19px); line-height:1.45;
  margin-top:clamp(14px,1.6vw,20px); max-width:44ch;
}
.lp2-facts{
  list-style:none; display:flex; flex-wrap:wrap;
  gap:calc(var(--u)*1.5) clamp(24px,3vw,48px);
  margin-top:clamp(20px,2.4vw,30px); padding-top:calc(var(--u)*2.25);
  border-top:1px solid var(--lp2-hair);
}
.lp2-facts li{display:flex; flex-direction:column; gap:calc(var(--u)*.5)}
.lp2-facts .spec{color:var(--lp2-mute)}
.lp2-facts b{
  font-weight:600; font-size:clamp(26px,2.2vw,32px);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1;
}

/* ------------------------------------------------------------- the form field
   A ground, not a box. Full bleed to the right on desktop, full width on
   mobile, no border, no radius, no shadow. */
.lp2-card{
  background:var(--form-ground); color:var(--form-ink);
  padding:clamp(24px,3vw,36px) var(--pad) clamp(28px,3.4vw,40px);
  margin-inline:calc(var(--pad) * -1);
}

/* --------------------------------------------------------------- the two rates
   Both, side by side. The live one at full size, the one you would pay by
   waiting beside it at roughly half size in grey. Never crossed out.

   A hairline now divides them. The system says "nothing drawn between them",
   and on a 1280px surface that is right — the size difference does all the
   work. At 335px the two figures sat 20px apart and read as one number broken
   in half. A rule is the smallest thing that separates them, and it is the same
   rule the section rhythm already uses. */
.lp2-rate{
  display:grid; grid-template-columns:auto auto; justify-content:start;
  align-items:end; column-gap:clamp(28px,3vw,38px); row-gap:calc(var(--u)*.75);
  padding-bottom:clamp(18px,2.2vw,24px);
  border-bottom:1px solid var(--form-hair-soft);
  margin-bottom:clamp(18px,2.2vw,24px);
}
.lp2-rate-next{position:relative}
.lp2-rate-next::before{
  content:""; position:absolute; left:calc(clamp(28px,3vw,38px) / -2);
  top:.15em; bottom:.15em; width:1px; background:var(--form-hair);
}
.lp2-rate .spec{color:var(--form-soft); display:block; margin-bottom:calc(var(--u)*.75)}
.lp2-fig{
  font-weight:600; line-height:.92; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; margin:0;
  font-size:clamp(34px,3.6vw,50px);
}
.lp2-fig sup{font-size:.42em; font-weight:500; letter-spacing:.02em; vertical-align:.9em; margin-right:.22em}
.lp2-fig--next{font-size:clamp(19px,1.7vw,25px); color:var(--form-soft); opacity:.82}
/* .8 rather than .75: on the spectrum field this label sits over the yellow end
   of the gradient, where a muted grey at .75 of a .62 alpha lands near 3:1 and
   stops being readable at 12.5px. The waiting rate is meant to read quieter than
   the live one, not to disappear. */
.lp2-rate-next .spec{opacity:.8}
.lp2-live{
  grid-column:1 / -1; display:flex; align-items:center; gap:calc(var(--u)*1.25);
  font-size:13px; font-weight:500; font-variation-settings:'wdth' 88;
  letter-spacing:.13em; text-transform:uppercase; margin-top:calc(var(--u)*1.5);
  color:var(--form-ink);
}
/* The one accent element on this surface: the indicator, 9px, square, never a
   circle and never animated. */
.lp2-live i{width:9px; height:9px; background:var(--accent); flex:0 0 auto; display:block}
.lp2-rate--single{grid-template-columns:1fr}

/* --------------------------------------------------------------- the fields */
.lp2-form{display:block}
.lp2-field{margin-bottom:clamp(12px,1.4vw,16px)}
.lp2-field label{
  display:block; color:var(--form-soft);
  margin-bottom:calc(var(--u)*.75);
}
.lp2-field .opt{text-transform:none; letter-spacing:0; font-variation-settings:'wdth' 100; opacity:.7; margin-left:.5em}
.lp2-field input,
.lp2-field select{
  width:100%; font-family:'Archivo',sans-serif; font-size:16px; /* 16px or iOS zooms on focus */
  line-height:1.3; color:var(--form-ink); background:transparent;
  border:0; border-bottom:2px solid var(--form-hair);
  border-radius:0; padding:calc(var(--u)*1.5) 0; min-height:52px;
  transition:border-color .18s var(--out);
  appearance:none; -webkit-appearance:none;
}
.lp2-field select{
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) calc(50% + 1px), calc(100% - 8px) calc(50% + 1px);
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:28px;
}
.lp2-field input:focus,
.lp2-field select:focus{outline:none; border-bottom-color:var(--accent)}
.lp2-field input::placeholder{color:var(--form-soft); opacity:.45}

.lp2-err{
  font-size:13px; color:var(--form-soft); margin-top:calc(var(--u)*.75);
  display:none;
}
.lp2-field.bad input,
.lp2-field.bad select{border-bottom-color:#C4443B}
.lp2-field.bad .lp2-err{display:block; color:#C4443B}

/* -------------------------------------------------------------- paired fields
   Company and job title share a row where there is width for it. Below 560px
   they stack, because two 12.5px labels and two inputs do not fit a 335px
   column without the labels wrapping. */
.lp2-pair{display:grid; grid-template-columns:1fr; gap:0}
@media (min-width:560px){
  .lp2-pair{grid-template-columns:1fr 1fr; column-gap:clamp(14px,1.6vw,20px)}
}

/* ------------------------------------------------------------- the one button
   WhatsApp green, on Sarosh's instruction of 31 August.

   Noting the departure rather than letting it drift: DESIGN.md v8 says "never
   the WhatsApp green ... green is a second accent". This page spends its accent
   on the rate counter, so the button is the second. It is the second knowing
   departure on this workstream, after the spectrum gradient.

   The type on it is OFF-BLACK, not white, and that part is not a preference.
   White on #25D366 is 2.1:1 and fails at any size. Off-black is 9.8:1. It also
   happens to be what the system already requires of a colour used as a ground:
   off-black type, never off-white. So the button is unmistakably WhatsApp and
   still readable in Karachi sunlight. */
/* Selector weight is load-bearing here, not fussiness. system.css ships
   `.on-dark .btn{background:var(--stock)}` at two classes, and the dark hero
   carries .on-dark, so a single-class `.lp2-submit` lost the cascade and the
   button rendered off-white. Three classes settles it on every variant without
   relying on stylesheet order. */
.lp2 .lp2-form .lp2-submit{
  width:100%; gap:calc(var(--u)*1.25);
  background:#25D366; border-color:#25D366; color:var(--ink);
  min-height:60px;
}
.lp2 .lp2-form .lp2-submit:hover,
.lp2 .lp2-form .lp2-submit:focus-visible{background:#1EBE5A; border-color:#1EBE5A; color:var(--ink)}
.lp2 .lp2-form .lp2-submit .lp2-wa{width:20px; height:20px; filter:brightness(0)}
.lp2 .lp2-form .lp2-submit[disabled]{opacity:.55}
.lp2-fine{
  font-size:13.5px; line-height:1.45; color:var(--form-soft);
  margin-top:calc(var(--u)*2);
}
.lp2-alt{font-size:14px; color:var(--form-soft); margin-top:calc(var(--u)*1.5)}
.lp2-alt a{font-weight:600; color:var(--form-ink); text-decoration:none; border-bottom:2px solid var(--accent)}

.lp2-state{
  font-size:14px; line-height:1.45; color:var(--form-soft);
  margin-bottom:calc(var(--u)*1.5);
}
.lp2-state:empty{display:none}
.lp2-state.bad{color:#C4443B}
.lp2-state a{color:var(--form-ink); font-weight:600}

/* ==================================================== 2 · DESKTOP: THE SPLIT
   At 900px and up the hero becomes two grounds meeting on a hard vertical join,
   with the form running off the right edge of the viewport. The grid is fed a
   full-bleed right column by letting the card overflow its own gutter. */
@media (min-width:900px){
  /* The grid spans the whole section and carries its own left gutter, rather
     than sitting inside .wrap and reaching back out with a negative margin.

     This is not a refactor for tidiness. The negative-margin version measured
     the gutter in `vw`, and `100vw` includes the scrollbar while the layout
     does not, so the field overhung the right edge by exactly the scrollbar
     width — 7px in Chrome, more elsewhere. body{overflow-x:hidden} hid it, which
     is worse than showing it: the overhang silently ate the field's right
     padding instead of announcing itself. A percentage resolves against the grid
     container, which is the true layout width, so it cannot drift. */
  .lp2-hero > .wrap{max-width:none; padding-inline:0}
  .lp2-hero-grid{
    grid-template-columns:
      minmax(var(--pad), calc((100% - 1280px) / 2 + var(--pad)))   /* gutter, matching every section below */
      minmax(0, 1.02fr)                                            /* the copy */
      minmax(400px, .84fr);                                        /* the field, to the edge */
    column-gap:0;
    align-items:stretch;
  }
  .lp2-copy{
    grid-column:2;
    padding-block:clamp(48px,5vw,84px);
    padding-right:clamp(36px,4.4vw,72px);
    display:flex; flex-direction:column; justify-content:center;
  }
  .lp2-card{
    grid-column:3; margin:0;
    padding:clamp(34px,3.4vw,48px) clamp(32px,3.2vw,44px);
    /* The field's own right padding, or the page gutter, whichever is larger —
       so its content ranges with the content of every section below it. */
    padding-right:max(clamp(32px,3.2vw,44px), calc((100% - 1280px) / 2 + var(--pad)));
    display:flex; flex-direction:column; justify-content:center;
  }
}

/* Very wide: stop the form field growing past a sensible measure by pushing the
   copy column wider rather than stretching the fields. */
@media (min-width:1500px){
  .lp2-hero-grid{
    grid-template-columns:
      minmax(var(--pad), calc((100% - 1280px) / 2 + var(--pad)))
      minmax(0, 1.18fr)
      minmax(420px, .72fr);
  }
}

/* ============================================== 3 · THE REST OF THE PAGE */
/* Section rhythm is inherited. These trim the vertical padding, because the
   page is being cut from 9,681px to under 6,200px and most of the excess is
   whitespace between blocks rather than content inside them. */
.lp2 .sec{padding-block:clamp(44px,5vw,84px)}
.lp2 .head{margin-bottom:clamp(24px,3vw,44px)}
.lp2 .head h2{font-size:clamp(27px,3.4vw,50px)}
.lp2 .wall{padding-block:calc(var(--u)*4)}
.lp2 .wall .spec{margin-bottom:calc(var(--u)*2.5)}
.lp2 .statement{padding-block:clamp(48px,6vw,104px)}
.lp2 .statement .line{font-size:clamp(28px,4.2vw,60px)}
.lp2 .figures{margin-top:clamp(28px,3.4vw,48px)}
.lp2 .tools{padding-block:calc(var(--u)*5)}
.lp2 .sess{padding-block:calc(var(--u)*2.25)}

/* The two halves of the day stack on mobile with nothing between them, so
   "Activation and execution" read as a continuation of "Setting the strategy"
   rather than as the second half. A rule and more air separate them. The rule is
   drawn only where they are stacked; side by side the column gap already does
   it. */
@media (max-width:880px){
  .lp2 .days{row-gap:0}
  /* The last session in a half already draws a hairline under itself, so the
     separator below landed as a second rule 28px under the first and read as a
     mistake. One rule, not two. */
  .lp2 .days > div .sess:last-child{border-bottom:0}
  /* The half's name and its subtitle sat side by side, which wrapped "Setting
     the strategy" to two lines against a two-line label. Stacked, both read in
     one pass. */
  .lp2 .dayhead{display:block}
  .lp2 .dayhead h3{margin-bottom:calc(var(--u)*.75)}
  .lp2 .days > div + div{
    margin-top:clamp(28px,4vw,40px);
    padding-top:clamp(28px,4vw,40px);
    border-top:2px solid var(--rule);
  }
  .lp2[data-v="light"] .days > div + div{border-top-color:var(--rule)}
  .lp2[data-v="spectrum"] .days > div + div{border-top-color:rgba(10,10,10,.28)}
}

.lp2-cta{margin-top:clamp(26px,3vw,40px)}
.lp2-cta--mid{justify-content:center}
/* This CTA sits directly under the statement, which is off-black, on a ground
   that is off-white. With no top padding the button butted against the join and
   read as though it were bleeding across it. It needs air on both sides of the
   ground change, not just below. */
.lp2-afterstatement{padding-block:clamp(28px,3.4vw,44px) clamp(32px,4vw,56px) !important; border-top:0}
.lp2-afterstatement .row{margin-top:0}

/* ---------------------------------------------------------------- the wall
   The marks keep their row and lose the label above it. Nothing else on the
   page needs telling that a wall of client logos is a wall of client logos. */
.lp2 .wall > .wrap{display:none}
.lp2 .wall{padding-block:calc(var(--u)*4)}

/* ------------------------------------------------------------- the trainer */
.lp2-trainer-grid{
  display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(24px,3.4vw,56px); align-items:center;
}
@media (max-width:760px){
  .lp2-trainer-grid{grid-template-columns:1fr; gap:calc(var(--u)*3); justify-items:center}
  .lp2-tcol{width:100%}
}
/* `width:100%` is load-bearing, not belt and braces. Under `justify-items:center`
   the grid item shrinks to its content, and its content is an image set to
   `width:100%` of that item — a circular definition that resolves to zero and
   renders no portrait at all. A definite width breaks the circle. */
.lp2-portrait{width:100%; max-width:260px; margin-inline:auto}
@media (min-width:761px){ .lp2-portrait{max-width:360px} }

/* The portrait's own background renders at about #040404 once the CSS filter is
   applied; the section is #0A0A0A. The photo was therefore a dark rectangle on a
   slightly lighter ground, with a visible edge.

   Matching the section to the photo would have fixed the edge and created a new
   one against the off-black footer. Feathering the photo instead makes the exact
   value irrelevant — and a mask that fades to transparency rather than to a
   colour is the one blending technique the system explicitly permits. */
.lp2-portrait img{
  width:100%; height:auto; filter:saturate(.5) contrast(1.02);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 84%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 84%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.lp2-tcol h2{font-size:clamp(26px,2.6vw,40px); margin-bottom:calc(var(--u)*.75)}
.lp2-tlabel{display:block; color:var(--grey); margin-bottom:calc(var(--u)*1.5)}
.lp2-trole{color:var(--ink-soft); margin-bottom:calc(var(--u)*2)}
.lp2-tcol p{color:var(--ink-soft); max-width:56ch; font-size:16.5px; line-height:1.5}
.lp2-tcol p + p{margin-top:.8em}
.lp2-trainer.on-dark .lp2-tcol p,
.lp2-trainer.on-dark .lp2-trole{color:var(--on-dark)}
.lp2-trainer.on-dark .lp2-tcol h2{color:var(--stock)}
.lp2-trainer .row{margin-top:calc(var(--u)*2.5)}

/* ---------------------------------------------------------- the closing ask */
.lp2-close{background:var(--ink); color:var(--stock)}
.lp2-close h2{color:var(--stock); font-size:clamp(28px,3.6vw,52px); margin-top:calc(var(--u)*2)}
.lp2-close .spec{color:var(--grey)}
.lp2-terms{
  list-style:none; max-width:560px; margin:clamp(28px,3.4vw,44px) auto 0; text-align:left;
}
.lp2-terms li{
  display:flex; justify-content:space-between; gap:20px;
  padding-block:calc(var(--u)*1.5); border-bottom:1px solid var(--on-dark-rule);
  font-size:16px;
}
.lp2-terms li span:first-child{color:var(--grey)}
.lp2-terms li span:last-child{text-align:right; font-weight:500}
.lp2-close .reach{margin-top:clamp(28px,3.4vw,44px)}

/* ==========================================================================
   4 · VARIANT B — LIGHT
   ==========================================================================
   Off-white throughout, and the hero inverts: the copy sits on off-white and
   the form is the off-black field running off the right edge.

   THE CONSTRAINT THAT SHAPES THIS WHOLE VARIANT. DESIGN.md measures Ion Blue at
   1.35 against off-white and permits it there for "rules and fields only. Never
   type, never the mark, at any size." So on this page the accent is never a
   button, never a heading, never a word. It is the rule under the eyebrow, the
   underline on a focused field, and the indicator beside the counter. Buttons
   are off-black. That is not a compromise, it is what the ratio allows.
   ========================================================================== */
.lp2[data-v="light"]{
  --lp2-ground:var(--stock);
  --lp2-ink:var(--ink);
  --lp2-soft:var(--ink-soft);
  --lp2-mute:var(--ink-soft);
  --lp2-hair:var(--rule);

  --form-ground:var(--ink);
  --form-ink:var(--stock);
  --form-soft:var(--on-dark-soft);
  --form-hair:var(--on-dark-rule);
  --form-hair-soft:rgba(242,240,236,.12);
  --form-btn:var(--stock);
  --form-btn-ink:var(--ink);
}
.lp2[data-v="light"] .lp2-eyebrow{opacity:1; color:var(--ink-soft)}
/* The submit button is WhatsApp green on every variant now, so the light page
   no longer repaints it. Off-black type on that green reads the same over the
   off-black field as it does over off-white. */
.lp2[data-v="light"] .lp2-field input,
.lp2[data-v="light"] .lp2-field select{color:var(--stock)}
.lp2[data-v="light"] .lp2-live{color:var(--stock)}
.lp2[data-v="light"] .lp2-alt a{color:var(--stock)}
.lp2[data-v="light"] .lp2-state a{color:var(--stock)}
.lp2[data-v="light"] .lp2-field.bad input{border-bottom-color:#FF8A80}
.lp2[data-v="light"] .lp2-field.bad .lp2-err,
.lp2[data-v="light"] .lp2-state.bad{color:#FF8A80}

/* Every off-black section becomes off-white or stepped, so the page reads as
   one ground with one dark field in the hero. Alternation is carried by
   off-white against stepped off-white instead. */
.lp2[data-v="light"] .wall,
.lp2[data-v="light"] .tools,
.lp2[data-v="light"] .statement,
.lp2[data-v="light"] .sec.dark,
.lp2[data-v="light"] .lp2-close{
  background:var(--stock-2); color:var(--ink);
}
/* The trainer section is deliberately NOT in that list. It stays off-black on
   every variant — Sarosh, 31 August — so the light page keeps one dark ground
   before the off-black footer. */
.lp2[data-v="light"] .lp2-trainer.dark{background:var(--ink); color:var(--stock)}
.lp2[data-v="light"] .tint{background:var(--stock)}
.lp2[data-v="light"] .statement,
.lp2[data-v="light"] .lp2-close{background:var(--stock)}
.lp2[data-v="light"] .wall,
.lp2[data-v="light"] .tools{background:var(--stock-2)}

/* Marks are knocked to off-black rather than off-white on a light ground. */
.lp2[data-v="light"] .wall img,
.lp2[data-v="light"] .tools img{filter:brightness(0); opacity:.72}

.lp2[data-v="light"] .statement .line,
.lp2[data-v="light"] .sec.dark h2,
.lp2[data-v="light"] .lp2-close h2,

.lp2[data-v="light"] .statement .after,
.lp2[data-v="light"] .sec.dark .role-n,
.lp2[data-v="light"] .fig .say,
.lp2[data-v="light"] .tools .say,

.lp2[data-v="light"] .source,
.lp2[data-v="light"] .lp2-close .spec,
.lp2[data-v="light"] .tools .spec,
.lp2[data-v="light"] .wall .spec,
.lp2[data-v="light"] .sec.dark .head .spec{color:var(--ink-soft)}
.lp2[data-v="light"] .lp2-terms li{border-bottom-color:var(--rule-soft)}
.lp2[data-v="light"] .lp2-terms li span:first-child{color:var(--ink-soft)}
/* The statement's accent clause cannot be Ion Blue here — 1.35 on off-white.
   The claim is carried by the italic alone, which the type system already
   nominates as the voice. */
.lp2[data-v="light"] .statement .hl{color:var(--ink); font-style:italic}
.lp2[data-v="light"] .fig .val.point{color:var(--ink)}
.lp2[data-v="light"] .meter{background:var(--rule-soft)}
.lp2[data-v="light"] .meter i{background:var(--ink-soft)}
/* A meter is a field, and a field may carry the accent on off-white. */
.lp2[data-v="light"] .meter.point i{background:var(--ion)}
.lp2[data-v="light"] .sec.dark .btn,
.lp2[data-v="light"] .lp2-close .btn{background:var(--ink); border-color:var(--ink); color:var(--stock)}
.lp2[data-v="light"] .sec.dark .btn:hover,
.lp2[data-v="light"] .lp2-close .btn:hover{background:transparent; color:var(--ink)}
.lp2[data-v="light"] .reach-item{color:var(--ink)}
.lp2[data-v="light"] .reach-ico{filter:brightness(0); opacity:.8}
.lp2[data-v="light"] .reach .spec,
.lp2[data-v="light"] .reach-lab{color:var(--ink-soft)}

/* ==========================================================================
   5 · VARIANT C — SPECTRUM
   ==========================================================================
   Yellow through Ion Blue, on white, with the air to carry it.

   THIS ONE KNOWINGLY DEPARTS FROM DESIGN.md v8, ON SAROSH'S DECISION OF
   31 AUGUST. Two rules give way and it is worth naming which, so nobody later
   reads this as drift: "One. Ion Blue, full chroma, never tinted, never joined
   by a second", and "No colour gradient anywhere — masks fade to transparency,
   never to a colour." The creative-studio social work already runs a yellow-to-
   blue gradient, so the divergence existed before this file; this resolves it in
   the ads' favour on this page only.

   It is not a repaint of the dark page. The ground is true white rather than
   off-white, the margins are wider, the type sits a step larger with more space
   around it, rules are hairlines rather than 2px, and the two colours are given
   different jobs rather than being mixed decoratively:

     Sun    #FFC93C   time and scarcity — the rate field, the counter, the
                      section index, anything that is running out
     Ion    #5CE1FF   structure — field underlines, rules, the meter

   Type is off-black everywhere. Neither colour is ever a text colour, because
   neither passes on white, and a gradient behind body copy is banned in every
   version of the system including this one.
   ========================================================================== */
.lp2[data-v="spectrum"]{
  --sun:#FFC93C;
  --sky:#FFFFFF;
  --lp2-ground:var(--sky);
  --lp2-ink:var(--ink);
  --lp2-soft:var(--ink-soft);
  --lp2-mute:var(--ink-soft);
  --lp2-hair:rgba(10,10,10,.12);

  --form-ground:transparent;
  --form-ink:var(--ink);
  --form-soft:rgba(10,10,10,.72);
  --form-hair:rgba(10,10,10,.28);
  --form-hair-soft:rgba(10,10,10,.14);
  --form-btn:var(--ink);
  --form-btn-ink:var(--sky);
  /* The wider gutter this variant used to set has been removed. It was a
     deliberate part of the "more air" idea, but it put the eyebrow, the headline
     and the standfirst 4px further right than on the other two, and three
     versions of one page being compared side by side have to start their copy on
     the same line. Spectrum keeps its extra air vertically, in the section
     padding below, where it costs nothing in the comparison. */
}
.lp2[data-v="spectrum"]{background:var(--sky)}

/* The field. Full bleed to the right on desktop, full width on mobile, running
   off at least one edge in both — which is the one shape the system allows a
   colour to take. */
.lp2[data-v="spectrum"] .lp2-card{
  background:linear-gradient(152deg, var(--sun) 0%, #B9E6C8 46%, var(--ion) 100%);
  position:relative;
}
/* A hairline of true white between the field and the page, so the gradient
   reads as a panel of ground rather than as a wash. */
.lp2[data-v="spectrum"] .lp2-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:rgba(10,10,10,.16);
}
@media (max-width:899px){
  .lp2[data-v="spectrum"] .lp2-card::before{left:0; right:0; bottom:auto; width:auto; height:1px}
}

.lp2[data-v="spectrum"] .lp2-rule{
  width:88px; height:6px; background:linear-gradient(90deg, var(--sun), var(--ion));
}
.lp2[data-v="spectrum"] .lp2-h1{
  font-size:clamp(40px,6vw,80px); letter-spacing:-.04em; max-width:14ch;
}
.lp2[data-v="spectrum"] .lp2-eyebrow{color:var(--ink-soft); opacity:1}
.lp2[data-v="spectrum"] .lp2-copy{padding-block:clamp(32px,5.6vw,88px)}
@media (min-width:900px){
  .lp2[data-v="spectrum"] .lp2-hero-grid{column-gap:clamp(48px,6vw,104px)}
}

/* On the gradient everything is off-black: type, rules, the button. That is the
   ground rule the system states for the accent used as a ground — "off-black
   type and the off-black mark, never off-white" — and it holds here. */
.lp2[data-v="spectrum"] .lp2-rate{border-bottom-color:rgba(10,10,10,.2)}
.lp2[data-v="spectrum"] .lp2-live i{background:var(--ink)}
.lp2[data-v="spectrum"] .lp2-field input,
.lp2[data-v="spectrum"] .lp2-field select{color:var(--ink); border-bottom-color:rgba(10,10,10,.32)}
.lp2[data-v="spectrum"] .lp2-field input:focus,
.lp2[data-v="spectrum"] .lp2-field select:focus{border-bottom-color:var(--ink)}
.lp2[data-v="spectrum"] .lp2-field input::placeholder{color:rgba(10,10,10,.4)}
.lp2[data-v="spectrum"] .lp2-more{border-top-color:rgba(10,10,10,.2)}
.lp2[data-v="spectrum"] .lp2-alt a{border-bottom-color:var(--ink)}
.lp2[data-v="spectrum"] .lp2-field.bad input{border-bottom-color:#8E1B12}
.lp2[data-v="spectrum"] .lp2-field.bad .lp2-err,
.lp2[data-v="spectrum"] .lp2-state.bad{color:#8E1B12}

/* The rest of the page: white, generous, hairlines. */
.lp2[data-v="spectrum"] .sec{padding-block:clamp(56px,7.2vw,124px); background:var(--sky)}
.lp2[data-v="spectrum"] .sec + .sec{border-top:1px solid rgba(10,10,10,.1)}
.lp2[data-v="spectrum"] .tint{background:#FAFAF8; border-top:0}
.lp2[data-v="spectrum"] .wall,
.lp2[data-v="spectrum"] .tools,
.lp2[data-v="spectrum"] .statement,
.lp2[data-v="spectrum"] .sec.dark,
.lp2[data-v="spectrum"] .lp2-close{background:var(--sky); color:var(--ink)}
/* Off-black on every variant. See the note on the light variant above. */
.lp2[data-v="spectrum"] .lp2-trainer.dark{background:var(--ink); color:var(--stock)}
/* The mark strip sits on the same warm grey the light variant uses, so it reads
   as a band rather than as marks floating on the page's own white. */
.lp2[data-v="spectrum"] .wall{background:var(--stock-2)}
.lp2[data-v="spectrum"] .wall img,
.lp2[data-v="spectrum"] .tools img{filter:brightness(0); opacity:.6}
.lp2[data-v="spectrum"] .statement .line,
.lp2[data-v="spectrum"] .sec.dark h2,
.lp2[data-v="spectrum"] .lp2-close h2,
.lp2[data-v="spectrum"] .dark h2{color:var(--ink)}
.lp2[data-v="spectrum"] .statement .after,
.lp2[data-v="spectrum"] .fig .say,
.lp2[data-v="spectrum"] .tools .say,
.lp2[data-v="spectrum"] .sec.dark .role-n,

.lp2[data-v="spectrum"] .source,
.lp2[data-v="spectrum"] .wall .spec,
.lp2[data-v="spectrum"] .tools .spec,
.lp2[data-v="spectrum"] .lp2-close .spec,
.lp2[data-v="spectrum"] .sec.dark .head .spec{color:var(--ink-soft)}
/* The statement's clause is carried by the italic, not by colour: neither Sun
   nor Ion passes as type on white at any size. */
.lp2[data-v="spectrum"] .statement .hl{color:var(--ink); font-style:italic}
.lp2[data-v="spectrum"] .fig .val{color:var(--ink)}
.lp2[data-v="spectrum"] .fig .val.point{color:var(--ink)}
.lp2[data-v="spectrum"] .meter{background:rgba(10,10,10,.08); height:14px}
.lp2[data-v="spectrum"] .meter i{background:rgba(10,10,10,.35)}
/* A meter is a field, so it may carry the pair. */
.lp2[data-v="spectrum"] .meter.point i{background:linear-gradient(90deg, var(--sun), var(--ion))}
.lp2[data-v="spectrum"] .doc{border-top-width:1px; border-top-color:rgba(10,10,10,.24)}
.lp2[data-v="spectrum"] .dayhead{border-bottom-width:1px; border-bottom-color:rgba(10,10,10,.28)}
.lp2[data-v="spectrum"] .sec.dark .btn,
.lp2[data-v="spectrum"] .lp2-close .btn{background:var(--ink); border-color:var(--ink); color:var(--sky)}
.lp2[data-v="spectrum"] .sec.dark .btn:hover,
.lp2[data-v="spectrum"] .lp2-close .btn:hover{background:transparent; color:var(--ink)}
.lp2[data-v="spectrum"] .lp2-terms li{border-bottom-color:rgba(10,10,10,.12)}
.lp2[data-v="spectrum"] .lp2-terms li span:first-child{color:var(--ink-soft)}
.lp2[data-v="spectrum"] .reach-item{color:var(--ink)}
.lp2[data-v="spectrum"] .reach-ico{filter:brightness(0); opacity:.8}
.lp2[data-v="spectrum"] .reach .spec,
.lp2[data-v="spectrum"] .reach-lab{color:var(--ink-soft)}
/* One band of colour further down, so the pair reads as a system rather than as
   a decorated hero. It runs to both edges, carries no body copy, and is the
   page's second and last field. */
.lp2[data-v="spectrum"] .tools{
  background:linear-gradient(94deg, rgba(255,201,60,.22), rgba(92,225,255,.22));
  border-top:1px solid rgba(10,10,10,.1);
}

/* ==================================================== 6 · THE MOBILE TRIM
   Section padding is the largest single component of the page's height and the
   smallest component of its content. On a screen whose average scroll depth is
   19.4% every screen of whitespace is a screen somebody stops inside. These
   are the values that take the page from 9,681px to a length worth having. */
@media (max-width:620px){
  /* ALIGNMENT, mobile only.

     The section heads were centred while every body block under them was left
     aligned. On a 1280px surface that reads as a deliberate hierarchy. On a
     335px column it reads as two decisions: centred display type breaks into
     ragged three-line rags ("Knowledge, / frameworks, and a / plan of your
     own.") and then sits over a hard-left list, and the centred buttons float
     free of everything above them.

     So on mobile everything ranges left and the buttons go full width, which
     also makes every section's CTA the same shape as the form's own submit.
     Centring returns at 620px where the measure can carry it. */
  .lp2 .mid,
  .lp2 .mid p,
  .lp2 .head.mid,
  .lp2 .sec.mid .head{text-align:left}
  .lp2 .mid h2,
  .lp2 .head .sub,
  .lp2 .lede{margin-inline:0}
  .lp2 .wall .spec{text-align:left}

  .lp2 .row.lp2-cta{justify-content:stretch}
  .lp2 .row.lp2-cta .btn{width:100%}
  /* The two numbers are the exception to the left-ranging rule above. They are
     a pair of equal options rather than a list, and centred they read as one
     block under the question they answer. */
  .lp2 .reach{text-align:center; margin-inline:auto}
  .lp2 .reach .spec{display:block; text-align:center}
  .lp2 .reach-list{justify-content:center}
  .lp2 .reach-item{align-items:center; text-align:center}

  .lp2 .sec{padding-block:38px}
  .lp2 .sec.lp2-close{padding-block:44px}
  .lp2 .statement{padding-block:44px}
  .lp2 .head{margin-bottom:22px}
  .lp2 .head h2{font-size:clamp(25px,7vw,30px)}
  .lp2 .wall{padding-block:26px}
  .lp2 .wall .spec{margin-bottom:18px}
  .lp2 .tools{padding-block:30px}
  .lp2 .figures{margin-top:26px}
  .lp2 .docs{gap:22px}
  .lp2 .roles{gap:22px}
  .lp2-cta{margin-top:22px}
  .lp2-portrait{max-width:260px}
  .lp2-trainer-grid{gap:18px}
  .lp2 .lp2-terms{margin-top:24px}
  .lp2 .lp2-terms li{padding-block:11px; font-size:15px}
}

/* ========================================================= 7 · REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  .lp2 .up{opacity:1; transform:none}
  .lp2 *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* ==================================================== 8 · THE STANDING BAR
   Scoped from the body, not from .lp2: the bar is printed after </main>, so it
   is a sibling of the .lp2 container and nothing inside it can reach the bar.

   Only the fee doubles — 17px to 34px, 15px to 30px on a small screen. The date
   and the seat count keep their size, and below 820px they are hidden anyway, so
   on the screen that matters the bar is the price and the button. */
/* The date and the seat count get the fee's treatment too. They only appear at
   820px and up — the bar drops them on a phone — so this changes the desktop
   bar only, and the hero facts row above carries the same three values at the
   same weight on mobile. */
/* One rule, not two. An earlier version of this scoped the fee with
   `:first-child`, which outranked the later rule meant to shrink it, so the fee
   stayed at 30px and overran the button. Same weight for all three values now.

   26px rather than the 30px that would be a literal doubling of 15px: at 375px
   the bar has 335px of room, the button needs 141 and the gap 20, which leaves
   174 for the fee. "PKR 46,500" sets about 151px at 26px and about 174px at
   30px — so 30px is exactly the width at which it disappears behind the button.
   26px is the largest size that fits, and it is still 1.7x what it was. */
body.fp-lp2 .standing dl > div dd{
  font-size:clamp(26px,6.6vw,34px); line-height:1; letter-spacing:-.03em;
}
body.fp-lp2 .standing dl{align-items:baseline; min-width:0; flex:1 1 auto}
body.fp-lp2 .standing dl > div dt{margin-bottom:6px}
body.fp-lp2 .standing .inner{padding-block:calc(var(--u)*1.5); gap:calc(var(--u)*2.5)}
@media (max-width:460px){
  body.fp-lp2 .standing .btn{padding-inline:10px; font-size:12px; letter-spacing:.12em}
}
/* The enlarged fee squeezed the button until "Reserve a seat" wrapped to two
   lines on a 375px screen. The button never wraps; the fee gives way instead,
   which is the right order — a two-line button reads as broken, a 26px fee does
   not. */
body.fp-lp2 .standing .btn{white-space:nowrap; flex:0 0 auto}
body.fp-lp2 .standing dl{min-width:0}
body.fp-lp2 .standing dl > div dt{margin-bottom:6px}
body.fp-lp2 .standing dl{gap:clamp(20px,3.2vw,52px)}

/* ============================================ 9 · THE TRAINER, ON EVERY GROUND
   This block sits after the variant repaints deliberately, and it is a fix for a
   real fault rather than tidying.

   The trainer section became off-black on all three variants, which meant giving
   it the `dark` class. But the light and spectrum variants already repaint
   `.sec.dark h2` to off-black, because on those pages that section used to be
   light. So the name was painted off-black on an off-black ground: contrast 1.00
   on spectrum — invisible — and 2.87 on light, which fails at any size.

   The section's ground no longer varies, so neither may its type. One source of
   truth, weighted to beat the variant rules, and never reopened per variant. */
.lp2 .lp2-trainer .lp2-tcol h2,
.lp2[data-v="light"] .lp2-trainer .lp2-tcol h2,
.lp2[data-v="spectrum"] .lp2-trainer .lp2-tcol h2{color:var(--stock)}

.lp2 .lp2-trainer .lp2-tcol p,
.lp2 .lp2-trainer .lp2-trole,
.lp2[data-v="light"] .lp2-trainer .lp2-tcol p,
.lp2[data-v="light"] .lp2-trainer .lp2-trole,
.lp2[data-v="spectrum"] .lp2-trainer .lp2-tcol p,
.lp2[data-v="spectrum"] .lp2-trainer .lp2-trole{color:var(--on-dark)}

.lp2 .lp2-trainer .lp2-tlabel,
.lp2[data-v="light"] .lp2-trainer .lp2-tlabel,
.lp2[data-v="spectrum"] .lp2-trainer .lp2-tlabel{color:var(--grey)}

.lp2 .lp2-trainer .fp,
.lp2[data-v="light"] .lp2-trainer .fp,
.lp2[data-v="spectrum"] .lp2-trainer .fp{color:var(--stock)}

/* ================================== 10 · THE SESSION LABELS, LEGIBILITY FIX
   Found by sweeping every text element on all three pages against its computed
   background, rather than by looking: "What we cover", "Demonstration" and
   "You then produce" render at 3.02:1 on the dark and light pages and 3.44:1 on
   spectrum, at 13px, where 4.5 is the floor.

   This is the brand's own rule being applied, not a deviation from it. DESIGN.md
   gives two greys and says which ground each belongs on: `--grey` #8D8A84 for
   secondary type on off-black, and `--ink-soft` #5C5A55 "on off-white only
   (6.05 on off-white)". These labels sit on a light ground and were using the
   off-black grey.

   Inherited from programme.css, so the live page has it too. */
.lp2 .sessbody .spec,
.lp2 .sess .spec{color:var(--ink-soft)}
.lp2[data-v="spectrum"] .sessbody .spec,
.lp2[data-v="spectrum"] .sess .spec{color:var(--ink-soft)}

/* ==================================================== FIELD AFFORDANCE
   The fields were underline-only: transparent ground, no border except a
   2px rule beneath. On the spectrum variant that is a 32%-black hairline on
   pure white, which reads as no field at all until it takes focus.

   On 2 September nine people started the form and none of them finished it,
   against six starts and three finishes the day before. A box with a light
   rule and an inset shadow is the smallest change that makes an empty input
   look like somewhere to type.

   background-color, not background: the select arrow is drawn with
   background-image gradients and the shorthand would wipe it. */
.lp2-field input,
.lp2-field select{
  background-color:#FCFCFB;
  border:1px solid rgba(10,10,10,.20);
  border-radius:3px;
  box-shadow:inset 0 1px 3px rgba(10,10,10,.08);
  padding-left:calc(var(--u)*1.5);
  padding-right:calc(var(--u)*1.5);
}
/* the arrow needs its lane back */
.lp2-field select{padding-right:32px}

.lp2-field input:focus,
.lp2-field select:focus{
  border-color:var(--accent);
  box-shadow:inset 0 1px 3px rgba(10,10,10,.06), 0 0 0 3px rgba(92,225,255,.28);
}
.lp2-field input::placeholder{color:rgba(10,10,10,.42); opacity:1}

.lp2-field.bad input,
.lp2-field.bad select{border-color:#C4443B; box-shadow:inset 0 1px 3px rgba(196,68,59,.12)}

/* The light variant sets --form-ground to ink, so the same treatment has to
   invert or the fields become white slabs on a dark page. */
.lp2[data-v="light"] .lp2-field input,
.lp2[data-v="light"] .lp2-field select{
  background-color:rgba(242,240,236,.06);
  border-color:rgba(242,240,236,.30);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.28);
}
.lp2[data-v="light"] .lp2-field input::placeholder{color:rgba(242,240,236,.45)}
.lp2[data-v="light"] .lp2-field input:focus,
.lp2[data-v="light"] .lp2-field select:focus{border-color:var(--accent)}

/* The underline-era rules still paint a heavier bottom edge: .32 black at rest
   and near-solid ink on focus, against .20 and accent on the other three sides.
   As an underline that was the whole design. On a box it is a mismatched line
   along the base. Even the four sides up. */
.lp2[data-v="spectrum"] .lp2-field input,
.lp2[data-v="spectrum"] .lp2-field select{border-bottom-color:rgba(10,10,10,.20)}
.lp2[data-v="spectrum"] .lp2-field input:focus,
.lp2[data-v="spectrum"] .lp2-field select:focus{border-bottom-color:var(--accent)}
.lp2[data-v="spectrum"] .lp2-field.bad input{border-bottom-color:#C4443B}
.lp2[data-v="light"] .lp2-field.bad input{border-bottom-color:#FF8A80; border-color:#FF8A80}

/* ============================================ THE CONTENTS LIST, MOBILE ONLY
   Added 2 September after Sarosh watched the behaviour: with the form in the
   hero, people reach a field immediately and conclude the page is a headline, a
   price and a form. They do not scroll at all, so the curriculum, the audience,
   the trainer and the FAQ may as well not exist.

   Hidden by default and shown only below the point where the hero grid stacks.
   Above that the copy and the form sit side by side and the page already reads
   as long, so a contents list would be noise.

   Every colour comes from the shared --lp2-* tokens rather than a literal, so
   the dark, light and spectrum variants each get the right treatment without
   three copies of this block. */
.lp2-toc{display:none}

@media (max-width:899px){
  .lp2-toc{
    display:block;
    margin-top:calc(var(--u)*3);
    padding-top:calc(var(--u)*2.5);
    border-top:1px solid var(--lp2-hair);
  }
  .lp2-toc-label{display:block; color:var(--lp2-mute); margin-bottom:calc(var(--u)*1.75)}

  /* Wrapped, never a scroller. See the note in lp2-body.php: the whole problem
     is content people cannot see. */
  .lp2-toc ul{
    list-style:none; margin:0; padding:0;
    display:flex; flex-wrap:wrap; gap:calc(var(--u)*1.25);
  }
  .lp2-toc a{
    display:inline-flex; align-items:center; gap:calc(var(--u)*.75);
    padding:calc(var(--u)*1.25) calc(var(--u)*1.75);
    border:1px solid var(--lp2-hair);
    color:var(--lp2-ink); text-decoration:none;
    font-size:14.5px; line-height:1; letter-spacing:-.01em;
    /* 44px is the minimum comfortable touch target, and these sit directly
       above a form, so a mis-tap costs an enquiry. */
    min-height:44px;
    transition:border-color .18s ease, color .18s ease;
  }
  /* The chevron is drawn rather than typed: a literal glyph renders at a
     different weight in every fallback font and drifts off the baseline. */
  .lp2-toc a::after{
    content:""; width:6px; height:6px; flex:0 0 auto;
    border-right:1.5px solid var(--accent);
    border-bottom:1.5px solid var(--accent);
    transform:translateY(-2px) rotate(45deg);
  }
  .lp2-toc a:hover,
  .lp2-toc a:focus-visible{border-color:var(--accent); color:var(--lp2-ink)}
  .lp2-toc a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
}

/* The header is bare on this page, but a heading landing hard against the top
   of the viewport reads as a mis-scroll. */
.lp2 [id]{scroll-margin-top:calc(var(--u)*3)}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* The booking chip inside the contents list.
   Filled, so the one action does not read as a sixth destination. --form-ground
   and --form-ink are the form card's own pair, which means it already matches
   the panel it sends you to on every variant, and inverts correctly against the
   dark, light and spectrum heroes without three rules. */
@media (max-width:899px){
  .lp2-toc a.lp2-toc-go{
    background:var(--form-ground);
    border-color:var(--form-ground);
    color:var(--form-ink);
    font-weight:600;
  }
  .lp2-toc a.lp2-toc-go::after{content:none}
  .lp2-toc a.lp2-toc-go:hover,
  .lp2-toc a.lp2-toc-go:focus-visible{
    background:var(--accent); border-color:var(--accent); color:var(--ink);
  }
}

/* ===================================================== FEES ON REQUEST
   The fee came off the page on 2 September: individual and corporate rates now
   differ and both are quoted in conversation.

   This keeps the rate block's job without its number. The block is what gives
   the form card its top edge and sets the rhythm against the first field, so it
   is replaced rather than removed — an empty top there reads as a broken panel.

   Sized well below .lp2-fig on purpose. That figure was deliberately loud
   because a price is the thing a buyer looks for; "on request" is an answer to
   the same question, not a headline, and setting it at the same weight would
   shout a non-answer. */
.lp2-rate--onask{display:block}
.lp2-onask{
  font-weight:600;
  font-size:clamp(24px,2.4vw,30px);
  letter-spacing:-.03em; line-height:1.05;
  color:var(--form-ink);
  margin:0 0 calc(var(--u)*1.25);
}
.lp2-rate--onask .lp2-live{margin:0}