/* ============================================================
   BidConvey — the "lp" design system.

   A port of bidconvey-site's globals.css + components/landing/landing.css
   onto the seven hand-maintained static pages. See REDESIGN-PLAN.md.

   ------------------------------------------------------------
   THE SCOPE GATE — read before editing.

   Every token in this file lives on `.lp`, NOT on `:root`. That is
   what makes the migration safe one page at a time: a page that has
   not been migrated has no `.lp` element, so nothing here reaches it.

   It is not merely tidiness. assets/theme.css defines
       --accent: #1E4FD0   (royal blue, used for every button)
   and the reference design defines
       --accent: #BE8A3D   (gold, used once per screen)
   Same name, opposite meanings. Putting these tokens on :root would
   repaint every unmigrated page's buttons gold. Hence `.lp`.

   (--ease and --paper also collide, but hold identical values in both
   files, so they are harmless either way.)

   Load order per page:  inline <style>  ->  theme.css  ->  lp.css

   `.lp-*` class names are unique to this file and appear on no legacy
   page, so those selectors are inherently gated and are left
   unprefixed — which keeps this file diffable against the reference.
   Only the tokens, the reset and the base element rules need `.lp`.
   ------------------------------------------------------------

   Fonts are loaded by each page's <link>: Inter 300-700 and
   Manrope 700;800. Manrope is the display face and is applied only
   through .lp-display, never through a tag.

   Grammar: square geometry, hairline rules, tracked uppercase
   micro-labels, tabular figures. Gold appears once per screen and
   only on a figure that matters.
   ============================================================ */

/* ============================================================
   1. TOKENS  (scoped — see the gate note above)
   ============================================================ */
.lp{
  /* --- from globals.css --- */
  --paper:#F5F3EE;
  --paper-2:#ECE8DF;
  --surface:#FFFFFF;
  --ink:#0E1726;
  --ink-2:#33415A;
  --muted:#5E6A7E;
  --line:rgba(14,23,38,.13);
  --line-soft:rgba(14,23,38,.07);
  --brand:#1E4FD0;
  --brand-deep:#163B9E;
  --brand-soft:rgba(30,79,208,.09);
  --accent:#BE8A3D;          /* GOLD here. Blue in theme.css. See the gate note. */
  --accent-deep:#9E7128;

  --ease:cubic-bezier(.22,.61,.36,1);

  /* --- from landing.css --- */
  --lp-logo:#3A4159;         /* sampled from the wordmark */
  --lp-ink:#2B3149;          /* headings, ledger figures */
  --lp-ink-2:#4C5470;        /* body copy */
  --lp-ink-deep:#171C2C;     /* the dark tile, the scrim, the footer */
  --lp-ghost:#AEB4C4;
  --lp-muted:#767D91;
  --lp-hair:rgba(58,65,89,.16);
  --lp-hair-soft:rgba(58,65,89,.09);
  --lp-header-h:88px;
  --lp-card-w:440px;

  --font-display:"Manrope","Inter",system-ui,sans-serif;
}

/* ============================================================
   2. RESET + BASE  (scoped)

   The migrated pages have their inline <style> deleted, which takes
   the old `*{margin:0;padding:0}` with it. Without these rules the
   browser defaults come back — so this is load-bearing, not tidying.
   `.lp` (0,1,0) outranks theme.css's `body` (0,0,1) on specificity,
   so load order does not matter here.
   ============================================================ */
/* ------------------------------------------------------------
   USE :where() FOR EVERY SCOPED ELEMENT RULE. This is not style.

   The reference writes these as bare element selectors — `h1 {}`,
   `img {}` — which score (0,0,1), so any component class such as
   .lp-h1 (0,1,0) beats them. Scoping them naively as `.lp h1` scores
   (0,1,1) and INVERTS that: the reset then beats every component
   class in the file.

   That is not theoretical. It shipped for about ten minutes and gave
   us `.lp h1 { color: var(--lp-ink) }` overriding `.lp-h1 {
   color:#fff }` — an ink-blue headline on a dark photograph — and
   `.lp img { height:auto }` overriding `.lp-header__logo {
   height:42px }`, which blew the header lockup up to full size.

   `:where(.lp)` contributes zero specificity, so these stay at
   (0,0,1) exactly as the reference intends.
   ------------------------------------------------------------ */
.lp,.lp *,.lp *::before,.lp *::after{box-sizing:border-box;}
:where(.lp) h1,:where(.lp) h2,:where(.lp) h3,:where(.lp) h4,
:where(.lp) p,:where(.lp) figure,:where(.lp) blockquote,
:where(.lp) dl,:where(.lp) dd,:where(.lp) ul,:where(.lp) ol{margin:0;}
:where(.lp) ul,:where(.lp) ol{padding:0;list-style:none;}
:where(.lp) img{display:block;max-width:100%;height:auto;}
:where(.lp) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:where(.lp) a{color:inherit;text-decoration:none;}
:where(.lp) :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px;}

.lp{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.68;
  color:var(--lp-ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv05";
  overflow-x:hidden;
}
/* Weight is carried by .lp-display, never by the tag. */
:where(.lp) h1,:where(.lp) h2,:where(.lp) h3{
  font-weight:400;line-height:1.05;letter-spacing:-.025em;color:var(--lp-ink);
}
:where(.lp) strong{font-weight:600;}
.lp .tnum{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;}

.lp-wrap{
  max-width:1440px;margin-inline:auto;
  padding-inline:clamp(1.25rem,4.4vw,4rem);
}
.lp-display{font-family:var(--font-display);font-weight:800;}

/* screen-reader only, for captions the design hides */
.lp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* ============================================================
   3. HEADER — over the photo, white bar once scrolled
   ============================================================ */
.lp-header{
  position:fixed;inset:0 0 auto 0;z-index:88;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),
             box-shadow .35s var(--ease);
}
/* keeps the white lockup legible where the photo is bright top-right */
.lp-header::before{
  content:"";position:absolute;inset:0 0 auto 0;height:170px;z-index:-1;
  background:linear-gradient(180deg,rgba(23,28,44,.5) 0%,rgba(23,28,44,.22) 55%,rgba(23,28,44,0) 100%);
  transition:opacity .35s var(--ease);
}
.lp-header.solid::before{opacity:0;}
/* A header that is solid from first paint has no photograph to sit over, so it
   drops the scrim entirely rather than fading it out. */
.lp-header.is-static::before{display:none;}

.lp-header__bar{
  height:var(--lp-header-h);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.lp-header__brand{position:relative;display:inline-flex;align-items:center;}
/* Native asset is 600x412 (assets/logo-lockup*.png) — only ever downscaled.
   The two lockups are stacked and cross-faded, so they MUST be the same
   artwork at the same dimensions or the swap visibly wobbles; both are
   generated from the same source for exactly that reason.

   51px, not 42px. The canvas carries 40px of transparent padding on every
   side (artwork is 80.6% of the canvas height), so 51px renders the mark at
   ~41px — the size it was before — while keeping it off the edge of its own
   box. The previous assets were cropped flush to the artwork, which put the
   chevron's apex hard against the top of the header and read as if the logo
   had been sliced off by the edge of the screen. */
.lp-header__logo{height:51px;width:auto;transition:opacity .35s var(--ease);}
.lp-header__logo--dark{position:absolute;inset:0 auto auto 0;opacity:0;}
.lp-header.solid .lp-header__logo--light{opacity:0;}
.lp-header.solid .lp-header__logo--dark{opacity:1;}

.lp-header.solid{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--lp-hair);
}

/* ---------------- Nav ----------------
   Presence without weight: 11px tracked caps at 72% opacity, no button, no
   fill, a 1px underline only on the page you are on. Next to a 20px solid
   blue CTA it never competes. */
.lp-nav{
  display:flex;align-items:center;
  gap:clamp(.9rem,2vw,1.9rem);
  margin-left:auto;
}
.lp-nav__link{
  position:relative;padding:.35rem 0;
  font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.lp-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
.lp-nav__link:hover{color:#fff;}
.lp-nav__link:hover::after{transform:scaleX(1);}
.lp-nav__link.is-current{color:#fff;}
.lp-nav__link.is-current::after{transform:scaleX(1);}
/* the hairline that separates the roles from the utility links */
.lp-nav__rule{
  width:1px;height:14px;background:rgba(255,255,255,.28);flex:0 0 auto;
  transition:background .3s var(--ease);
}
.lp-header.solid .lp-nav__link{color:var(--lp-muted);}
.lp-header.solid .lp-nav__link:hover,
.lp-header.solid .lp-nav__link.is-current{color:var(--lp-ink);}
.lp-header.solid .lp-nav__rule{background:var(--lp-hair);}

/* ============================================================
   3b. NAV SUBMENUS  (D19 — client decision C1)

   NOT IN THE REFERENCE. bidconvey-site's nav is a flat row with no
   dropdown at all, by explicit design intent. The client kept the
   three portal dropdowns, so this component is authored in the
   reference's grammar rather than carried over from theme.css §5b.
   Do not "fix" it back to a flat nav. See REDESIGN-PLAN.md §5a, §11.

   One appearance, not two: the panel is ALWAYS slate. A white panel
   would need to be legible both over the hero photograph and over the
   scrolled white bar — two states to maintain. Slate works over both
   and echoes .lp-navpanel, so the site gains one idiom, not a special
   case.

   Structure matters as much as the styling. The caret is its own
   <button> SIBLING of the link, not a glyph inside it. With the caret
   inside the <a>, the first tap on a touch device follows the link and
   the submenu can never be opened — which is how it behaves today.
   ============================================================ */
.lp-nav__item{position:relative;display:flex;align-items:center;gap:.35rem;}

/* Bridge the gap between the nav item and the panel it opens.
   The panel sits .65rem below the item, and that gap is OUTSIDE .lp-nav__item —
   so moving the cursor from "Buyers" down towards "Buyer Portal" fired
   mouseleave and shut the menu before it could be reached. The dropdown was
   present and correct in the markup and still effectively unusable.
   This invisible strip makes the hover region continuous. */
.lp-nav__item::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:.75rem;
  display:none;
}
.lp-nav__item:hover::after,
.lp-nav__item:focus-within::after{display:block;}

.lp-nav__caret{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;
  color:rgba(255,255,255,.9);
  transition:color .3s var(--ease),transform .3s var(--ease);
}
/* 11px, not 9px: at 9px in a 20px box this read as a speck and people simply
   did not see there was a menu to open. */
.lp-nav__caret svg{display:block;width:11px;height:11px;fill:currentColor;}
.lp-nav__caret:hover{color:#fff;}
.lp-nav__caret[aria-expanded="true"]{transform:rotate(180deg);color:#fff;}
/* the whole item reacts, so hovering the word "Buyers" shows the caret is live
   even before the panel opens */
.lp-nav__item:hover .lp-nav__caret{color:#fff;}
.lp-header.solid .lp-nav__item:hover .lp-nav__caret{color:var(--lp-ink);}
.lp-header.solid .lp-nav__caret{color:var(--lp-muted);}
.lp-header.solid .lp-nav__caret:hover,
.lp-header.solid .lp-nav__caret[aria-expanded="true"]{color:var(--lp-ink);}

.lp-nav__sub{
  position:absolute;top:calc(100% + .65rem);left:0;z-index:5;
  min-width:13rem;
  background:var(--lp-ink-deep);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 54px -22px rgba(12,16,28,.6);
  padding:.35rem 0;
}
.lp-nav__sub[hidden]{display:none;}
.lp-nav__sublink{
  display:block;padding:.7rem 1.1rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  white-space:nowrap;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.lp-nav__sublink:hover,
.lp-nav__sublink:focus-visible{color:#fff;background:rgba(255,255,255,.06);}

/* ---------------- Mobile menu button ---------------- */
.lp-menubtn{
  display:none;margin-left:auto;padding:.5rem 0;
  font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.86);
  transition:color .3s var(--ease);
}
.lp-header.solid .lp-menubtn{color:var(--lp-ink);}

/* ---------------- Full-screen menu panel ----------------
   position:fixed, so opening it moves nothing in the document. */
.lp-navpanel{
  position:fixed;inset:0;z-index:78;
  background:var(--lp-ink-deep);
  display:flex;flex-direction:column;justify-content:center;
  overflow-y:auto;
  animation:lp-navpanel-in .28s var(--ease) both;
}
.lp-navpanel[hidden]{display:none;}
@keyframes lp-navpanel-in{from{opacity:0;}to{opacity:1;}}
.lp-navpanel__inner{
  width:100%;padding-block:clamp(5rem,14vh,7rem) clamp(2rem,6vh,3rem);
  display:flex;flex-direction:column;min-height:100%;justify-content:space-between;
}
.lp-navpanel__list{margin:auto 0;}
/* Type matches the reference exactly. This panel carries seven rows plus three
   portal sub-rows where the reference carries five, so it does not fit a short
   phone — but that is a SPACING problem and is solved as one, in the
   max-height query below. Shrinking the display face to make room was the
   wrong trade: it put the one visible deviation from the target type scale in
   the most prominent piece of mobile navigation on the site. */
.lp-navpanel__link{
  display:flex;align-items:baseline;gap:1.1rem;
  padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.35rem,7vw,1.9rem);letter-spacing:-.03em;line-height:1.1;
  color:rgba(255,255,255,.66);
  transition:color .25s var(--ease);
}
.lp-navpanel__link:hover,
.lp-navpanel__link.is-current{color:#fff;}
.lp-navpanel__link.is-current .lp-navpanel__n{color:var(--accent);}
.lp-navpanel__n{
  font-size:.6875rem;letter-spacing:.1em;color:rgba(255,255,255,.34);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}
/* the portal links, indented under their role row. No hover involved: on the
   widths this panel exists at there is no pointer to hover with. */
.lp-navpanel__sub{margin:0;padding:0;}
.lp-navpanel__sublink{
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem 0 .7rem 2.35rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  transition:color .25s var(--ease);
}
.lp-navpanel__sublink::before{
  content:"";width:12px;height:1px;background:var(--accent);flex:0 0 auto;
}
.lp-navpanel__sublink:hover{color:#fff;}
.lp-navpanel__foot{
  display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap;
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);
}
.lp-navpanel__legal,
.lp-navpanel__close{
  font-size:.6875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.58);
  transition:color .25s var(--ease);
}
.lp-navpanel__legal:hover,
.lp-navpanel__close:hover{color:#fff;}
.lp-navpanel__close{margin-left:auto;color:var(--accent);}

/* The header stays ABOVE the open panel so its toggle — now reading "Close" —
   is still under the thumb that opened it. While the panel is open the bar
   drops its solid state, or a scrolled white bar would sit on the slate. */
.lp-header.is-navopen{
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:transparent;box-shadow:none;
}
.lp-header.is-navopen::before{opacity:0;}
.lp-header.is-navopen .lp-header__logo--light{opacity:1;}
.lp-header.is-navopen .lp-header__logo--dark{opacity:0;}
.lp-header.is-navopen .lp-menubtn{color:var(--accent);}

/* Short viewports: tighten the panel's own spacing so all seven rows and the
   three portal sub-rows reach the Close control without scrolling. Type is
   untouched — it stays at the reference scale. Measured at 320x568, the
   smallest screen still in real use. */
@media (max-height:700px){
  .lp-navpanel__inner{padding-block:clamp(3.75rem,9vh,5rem) clamp(1.25rem,3vh,2rem);}
  .lp-navpanel__link{padding:.5rem 0;}
  .lp-navpanel__sublink{padding-top:.45rem;padding-bottom:.45rem;}
  .lp-navpanel__foot{padding-top:1rem;}
}

@media (max-width:768px){
  .lp-nav{display:none;}
  .lp-menubtn{display:block;}
}
@media (min-width:769px){
  .lp-navpanel{display:none;}
}
/* Between 769 and ~1080 the roles plus the utility links need to breathe. */
@media (min-width:769px) and (max-width:1080px){
  .lp-nav{gap:.85rem;}
  .lp-nav__link{font-size:.625rem;letter-spacing:.12em;}
}

/* ============================================================
   4. HERO
   ============================================================ */
/* sits above the section below so an overflowing card paints over it */
.lp-hero{position:relative;z-index:2;}

.lp-hero__band{
  position:relative;isolation:isolate;
  min-height:92vh;
  display:flex;align-items:center;
  padding-top:var(--lp-header-h);
  overflow:hidden;
}
.lp-hero__media{position:absolute;inset:0;z-index:0;}
.lp-hero__media picture,
.lp-hero__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%;}

.lp-hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(23,28,44,.86) 0%,
    rgba(23,28,44,.8) 40%,
    rgba(23,28,44,.78) 58%,
    rgba(23,28,44,.14) 71%,
    rgba(23,28,44,.04) 100%);
}
/* dithers the scrim so a flat plaster wall does not band */
.lp-hero__grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
.lp-hero__inner{position:relative;z-index:3;width:100%;}
.lp-hero__copy{
  max-width:50rem;
  padding-block:clamp(2.5rem,6vh,4.5rem);
}

.lp-eyebrow{
  display:block;
  font-size:.6875rem;font-weight:700;letter-spacing:.4em;text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.5rem;
}
.lp-eyebrow--ink{color:var(--lp-muted);}

.lp-h1{
  font-size:clamp(2.5rem,4.9vw,4.5rem);
  line-height:.98;
  letter-spacing:-.04em;
  margin:0 0 1.85rem;
  color:#fff;
}
.lp-h1 .ghost{
  display:block;
  color:rgba(255,255,255,.6);
  font-weight:700;font-style:italic;
  letter-spacing:-.035em;
}

.lp-sub{
  font-size:clamp(1.02rem,1.28vw,1.15rem);
  line-height:1.68;
  color:rgba(255,255,255,.8);
  max-width:32.5rem;
  margin:0 0 2.4rem;
}

.lp-actions{display:flex;align-items:center;gap:clamp(1.5rem,3vw,2.75rem);flex-wrap:wrap;}

/* the guardrail line — says plainly what BidConvey can and cannot move */
.lp-guard{
  display:flex;flex-wrap:wrap;
  margin:2.6rem 0 0;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.16);
  max-width:40rem;
  font-size:.6875rem;letter-spacing:.04em;line-height:1.75;
  color:rgba(255,255,255,.55);
}
/* the middot trails its own item, so a wrapped line never starts with one */
.lp-guard span:not(:last-child)::after{content:"\00B7";margin:0 .65em;opacity:.65;}

/* ---------------- Hero stat strip ----------------
   index.html's old .hero-photo-badge carried three value/label PAIRS
   (Fair / By design ...). .lp-guard is a run of middot-separated clauses and
   would flatten those into six unrelated fragments, so the pairing gets its
   own row: Manrope value over a tracked label, on the same hairline the
   guardrail uses. Same grammar, no invented words. */
.lp-hero__stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,3vw,2.5rem);
  margin:2.6rem 0 0;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.16);
  max-width:40rem;
}
.lp-hero__stat{display:block;}
.lp-hero__statv{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:-.025em;line-height:1.1;
  color:var(--accent);
}
.lp-hero__statl{
  display:block;margin-top:.45rem;
  font-size:.5625rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* Below 560px the three-column strip stops working: the columns are ~71px at
   320, "Transparent" needs 96px and overflows, and the labels wrap unevenly —
   "BY DESIGN" on one line, "BY DEFAULT" and "BY PRINCIPLE" on two — which is
   what makes the row look raggedly spaced on a phone.

   So it becomes what it actually is at that width: three rows. Value left,
   label right, on one baseline, separated by the same hairline the rest of the
   site uses. Reads as a list rather than a broken grid, and costs less
   vertical space in the hero than stacking value over label would. */
@media (max-width:560px){
  .lp-hero__stats{
    display:block;
    margin-top:2rem;padding-top:1.1rem;
  }
  .lp-hero__stat{
    display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    padding:.6rem 0;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .lp-hero__stat:last-child{border-bottom:0;padding-bottom:0;}
  .lp-hero__statv{font-size:1rem;}
  .lp-hero__statl{margin-top:0;text-align:right;flex:0 0 auto;}
}

/* ---------------- Split hero (role pages) ----------------
   Same band, scrim, grain and type as the buyer hero; the right-hand column
   carries a document card instead of the ledger. */
.lp-hero--split .lp-hero__band{min-height:100vh;}
/* A four-word headline can take 72px. Full sentences run to five and six lines
   and push the guardrail below the fold. Same face, one step down the scale. */
.lp-hero--split .lp-h1{
  font-size:clamp(2rem,3.15vw,2.95rem);
  line-height:1.04;
  letter-spacing:-.036em;
  margin-bottom:1.55rem;
}
.lp-hero--split .lp-h1 .ghost{letter-spacing:-.032em;}
.lp-hero--split .lp-sub{max-width:31rem;margin-bottom:2.15rem;}
.lp-hero--split .lp-guard{margin-top:2.2rem;padding-top:1.3rem;max-width:34rem;}
.lp-hero__inner--split{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--lp-card-w);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.lp-hero__inner--split .lp-hero__copy{max-width:44rem;}
/* The split hero's copy column is narrower and no line runs as far right, so
   holding the scrim dense to 58% only darkens the subject for nothing. Same
   colour, same 100deg rake, break moved ~14% earlier. */
.lp-hero--split .lp-hero__scrim{
  background:linear-gradient(100deg,
    rgba(23,28,44,.9) 0%,
    rgba(23,28,44,.86) 30%,
    rgba(23,28,44,.8) 44%,
    rgba(23,28,44,.22) 60%,
    rgba(23,28,44,.06) 100%);
}
.lp-hero__card{position:relative;}

/* ---------------- Index hero ----------------
   Carries no card, so the copy can use the full measure. */
.lp-hero--index .lp-hero__band{min-height:94vh;}
.lp-hero--index .lp-hero__copy{max-width:46rem;}
.lp-hero--index .lp-h1{font-size:clamp(2.4rem,4.4vw,4rem);line-height:1.0;}
.lp-hero--index .lp-h1 .ghost{display:inline;}
.lp-hero--index .lp-sub{max-width:36rem;}
.lp-hero--index .lp-guard{max-width:44rem;}

/* ---------------- Page hero (no photograph) ----------------
   A stock image on a utility page is the first thing that makes a site look
   generic. Paper ground, hairline. */
.lp-pagehero{
  background:var(--paper);
  padding-top:calc(var(--lp-header-h) + clamp(3.5rem,7vw,6rem));
  padding-bottom:clamp(3rem,6vw,5rem);
  border-bottom:1px solid var(--lp-hair);
}
.lp-h1--page{
  color:var(--lp-ink);
  font-size:clamp(2.2rem,3.9vw,3.5rem);
  line-height:1.02;max-width:20ch;
}
.lp-h1--page .ghost{color:var(--lp-ghost);display:inline;}
.lp-pagehero__sub{
  margin:1.6rem 0 0;max-width:38rem;
  font-size:1.0313rem;line-height:1.7;color:var(--lp-ink-2);
}

/* ============================================================
   5. BUTTONS AND LINKS
   ============================================================ */
.lp-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:20px 40px;border-radius:0;
  background:var(--brand);color:#fff;
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.lp-btn:hover{background:var(--brand-deep);transform:translateY(-1px);
  box-shadow:0 18px 40px -16px rgba(30,79,208,.75);}
.lp-btn--sm{padding:15px 26px;font-size:.625rem;letter-spacing:.18em;}
.lp-btn[disabled]{
  background:var(--lp-hair);color:var(--lp-muted);cursor:not-allowed;
  box-shadow:none;transform:none;
}
.lp-btn[disabled]:hover{background:var(--lp-hair);transform:none;box-shadow:none;}

.lp-tlink{
  display:inline-flex;align-items:center;gap:.8em;
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.lp-tlink b{font-weight:700;color:#fff;}
.lp-tlink .arw{transition:transform .3s var(--ease);color:#fff;}
.lp-tlink:hover .arw{transform:translateX(5px);}
.lp-tlink--ink{color:var(--lp-muted);}
.lp-tlink--ink b{color:var(--lp-ink);}
.lp-tlink--ink .arw{color:var(--brand);}

.lp-opt{
  font-size:.5625rem;letter-spacing:.18em;color:var(--lp-ghost);
  margin-left:.6em;font-weight:700;
}

/* ============================================================
   6. SECTIONS

   Rhythm: white / paper / slate slabs, alternating, with the
   photograph bands carrying the same scrim treatment as the hero.
   ============================================================ */
.lp-sec{
  position:relative;
  padding-block:clamp(4.25rem,7.6vw,7.5rem);
}
.lp-sec--white{background:var(--surface);color:var(--lp-ink);}
.lp-sec--paper{background:var(--paper);color:var(--lp-ink);}
.lp-sec--slate{background:var(--lp-ink-deep);color:#fff;}

/* ---------------- Section heads ----------------
   The editorial label gutter: the tracked label sits in its own column with a
   short rule, and the heading starts at the content column — so every section
   on the site lines up on the same two axes.

   NOTE: the reference declares .lp-sec__head twice and relies on the later
   rule overriding the earlier. Merged here into its effective final form. */
.lp-sec__head{
  display:grid;
  grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
  max-width:none;
  margin-bottom:clamp(2.5rem,4.4vw,4rem);
}
.lp-gutter{padding-top:.45rem;}
.lp-gutter--wide{padding-top:.45rem;}
.lp-sec__headmain{max-width:52rem;}
.lp-sec__head .lp-kicker{margin-bottom:0;}

.lp-kicker{
  display:inline-flex;align-items:center;gap:.8em;
  font-size:.6875rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:var(--lp-muted);margin:0 0 1.4rem;
}
.lp-kicker::before{content:"";width:22px;height:1px;background:var(--accent);}
.lp-sec--slate .lp-kicker{color:rgba(255,255,255,.6);}

.lp-h2{
  font-size:clamp(2rem,3.5vw,3.15rem);
  line-height:1.02;letter-spacing:-.038em;margin:0;
  color:var(--lp-ink);
}
.lp-sec--slate .lp-h2{color:#fff;}
.lp-h2 .ghost{
  color:var(--lp-ghost);font-weight:700;font-style:italic;letter-spacing:-.033em;
}
.lp-sec--slate .lp-h2 .ghost{color:rgba(255,255,255,.5);}

.lp-h3{
  font-size:clamp(1.25rem,1.85vw,1.6rem);
  line-height:1.12;letter-spacing:-.03em;margin:0 0 .9rem;color:var(--lp-ink);
}
.lp-sec--slate .lp-h3{color:#fff;}

.lp-sec__intro{
  margin:1.35rem 0 0;max-width:40rem;
  font-size:1.0313rem;line-height:1.7;color:var(--lp-ink-2);
}
.lp-sec--slate .lp-sec__intro{color:rgba(255,255,255,.72);}

/* The label gutter is a page-width device. Where a head already sits inside a
   narrower column it collapses to one column rather than splitting 14rem off a
   column that is only 30rem wide to begin with. */
.lp-cta__copy .lp-sec__head,
.lp-arg__head .lp-sec__head,
.lp-proof__copy .lp-sec__head{
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
}
.lp-cta__copy .lp-gutter,
.lp-arg__head .lp-gutter,
.lp-proof__copy .lp-gutter{padding-top:0;}

/* ---------------- Gutter-led sections ----------------
   The reference's dominant device: label AND heading in the narrow left
   column, the list occupying the whole content column beside them. It is what
   stops a long run of rows reading as a table. */
.lp-listgrid{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4.5rem);
  align-items:start;
}
.lp-sec__head--gutter{
  display:block;margin-bottom:0;position:sticky;top:calc(var(--lp-header-h) + 2rem);
}
.lp-gutter__h{
  margin:1.1rem 0 0;
  font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.16;letter-spacing:-.028em;
}
.lp-gutter__intro{
  margin:.9rem 0 0;
  font-size:.8125rem;line-height:1.65;color:var(--lp-muted);
}
.lp-sec--slate .lp-gutter__intro{color:rgba(255,255,255,.55);}
.lp-listgrid .lp-steps__list,
.lp-listgrid .lp-facts__list{margin-top:0;}
/* the fact ledger goes single-column inside the narrower content column */
.lp-listgrid .lp-facts__list{grid-template-columns:minmax(0,1fr);}
.lp-listgrid .lp-steps__note{grid-column:2;}

/* ============================================================
   7. LIST SHAPES
   ============================================================ */

/* ---------------- Five-step process ----------------
   A numbered ledger, not five boxes. */
.lp-steps__list{margin:0;padding:0;border-top:1px solid var(--lp-hair);}
.lp-sec--slate .lp-steps__list{border-top-color:rgba(255,255,255,.18);}
.lp-steps__row{
  display:grid;
  grid-template-columns:4.5rem minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem);align-items:baseline;
  padding:1.5rem 0;border-bottom:1px solid var(--lp-hair-soft);
  transition:background .3s var(--ease);
}
.lp-sec--slate .lp-steps__row{border-bottom-color:rgba(255,255,255,.1);}
.lp-steps__n{
  font-family:var(--font-display);font-weight:800;
  font-size:.75rem;letter-spacing:.12em;color:var(--lp-ghost);
  font-variant-numeric:tabular-nums;
}
.lp-sec--slate .lp-steps__n{color:rgba(255,255,255,.42);}
/* Numerals in the brand blue on light ground, gold on slate: one accent per
   ground, and the index is the only coloured thing in the row. */
.lp-steps__n.idx{color:var(--brand);}
.lp-sec--slate .lp-steps__n.idx{color:var(--accent);}
.lp-steps__t{
  font-family:var(--font-display);font-weight:800;
  font-size:1.0625rem;letter-spacing:-.025em;line-height:1.25;color:var(--lp-ink);
}
.lp-sec--slate .lp-steps__t{color:#fff;}
.lp-steps__d{font-size:.9063rem;line-height:1.68;color:var(--lp-ink-2);}
.lp-sec--slate .lp-steps__d{color:rgba(255,255,255,.68);}
.lp-steps__note{
  margin:1.75rem 0 0;max-width:44rem;
  font-size:.8125rem;line-height:1.7;color:var(--lp-muted);
}
.lp-sec--slate .lp-steps__note{color:rgba(255,255,255,.5);}
/* A row may carry an action (a portal link, a clause opener). display:block is
   load-bearing: this is a <span> inside the description cell, and left inline
   the margin-top silently does nothing and the action butts straight against
   the end of the sentence. */
.lp-steps__act{display:block;margin-top:.85rem;}

/* ---------------- What changes / what does not ---------------- */
.lp-split__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,5vw,4.5rem);
  border-top:1px solid var(--lp-hair);padding-top:2.25rem;
}
.lp-sec--slate .lp-split__grid{border-top-color:rgba(255,255,255,.18);}
.lp-split__cap{
  margin:0 0 1.5rem;
  font-size:.625rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lp-muted);
}
.lp-split__col.is-second .lp-split__cap{color:var(--brand);}
.lp-sec--slate .lp-split__col.is-second .lp-split__cap{color:var(--accent);}
.lp-split__item{padding:1.1rem 0;border-bottom:1px solid var(--lp-hair-soft);}
.lp-sec--slate .lp-split__item{border-bottom-color:rgba(255,255,255,.1);}
.lp-split__item:last-child{border-bottom:0;}
.lp-split__t{
  display:block;font-size:.9375rem;font-weight:600;color:var(--lp-ink);line-height:1.35;
}
.lp-sec--slate .lp-split__t{color:#fff;}
.lp-split__d{display:block;margin:.4rem 0 0;font-size:.875rem;line-height:1.68;color:var(--lp-ink-2);}
.lp-sec--slate .lp-split__d{color:rgba(255,255,255,.66);}
.lp-split__note{
  margin-top:clamp(2rem,3.4vw,3rem);padding:1.5rem 1.75rem;
  background:var(--paper);border-left:2px solid var(--accent);
  font-size:.875rem;line-height:1.72;color:var(--lp-ink-2);max-width:52rem;
}
.lp-sec--slate .lp-split__note{background:rgba(255,255,255,.05);color:rgba(255,255,255,.74);}
.lp-split__note strong{color:var(--lp-ink);font-weight:600;}
/* the second line of a closing note, set quieter than the statement above it */
.lp-split__notecap{
  display:block;margin-bottom:.9rem;
  font-size:.625rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lp-muted);
}
.lp-split__notesub{display:block;margin-top:.5rem;font-size:.8125rem;color:var(--lp-muted);}
.lp-sec--slate .lp-split__note strong{color:#fff;}

/* ---------------- Plain fact ledger ----------------
   Used where a list is genuinely a list and boxing it up would be decoration. */
.lp-facts__list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(2rem,5vw,4.5rem);
  border-top:1px solid var(--lp-hair);
}
.lp-sec--slate .lp-facts__list{border-top-color:rgba(255,255,255,.18);}
.lp-facts__row{padding:1.35rem 0;border-bottom:1px solid var(--lp-hair-soft);}
.lp-sec--slate .lp-facts__row{border-bottom-color:rgba(255,255,255,.1);}
.lp-facts__t{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:1rem;letter-spacing:-.022em;line-height:1.3;color:var(--lp-ink);
}
.lp-sec--slate .lp-facts__t{color:#fff;}
/* display:block because this is used on a <span> as well as a <p> — inside an
   icon row the description is a <span>, and left inline it collapses to the
   width of its own text instead of filling the column (measured at 111px on a
   390px screen). */
.lp-facts__d{display:block;margin:.45rem 0 0;font-size:.875rem;line-height:1.68;color:var(--lp-ink-2);}
.lp-sec--slate .lp-facts__d{color:rgba(255,255,255,.68);}

/* ---------------- Argument opener ----------------
   States the role's actual problem before any product language appears. */
.lp-arg__grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.lp-arg__head .lp-sec__head{margin-bottom:0;}
.lp-arg__pull{
  margin:0 0 1.5rem;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,1.75vw,1.4rem);line-height:1.38;letter-spacing:-.028em;
  color:var(--lp-ink);max-width:34rem;
}
.lp-sec--slate .lp-arg__pull{color:#fff;}
.lp-arg__p{margin:0 0 1.15rem;font-size:.9688rem;line-height:1.76;color:var(--lp-ink-2);max-width:38rem;}
.lp-sec--slate .lp-arg__p{color:rgba(255,255,255,.7);}
.lp-arg__p:last-child{margin-bottom:0;}
/* the signature line that closes the principle block — gold, tracked, the one
   accent on the slab */
.lp-arg__powered{
  margin:1.75rem 0 0;padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.6875rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);
}
/* a titled sub-heading inside an argument body */
.lp-arg__h{
  margin:2.1rem 0 .75rem;
  font-family:var(--font-display);font-weight:800;
  font-size:1.0625rem;letter-spacing:-.025em;line-height:1.25;color:var(--lp-ink);
}
.lp-arg__h:first-child{margin-top:0;}
.lp-sec--slate .lp-arg__h{color:#fff;}
.lp-arg__body > .lp-arg__h + .lp-arg__p{margin-top:0;}
/* An argument body that runs page-width instead of in the right half of
   .lp-arg__grid. Held to the same 52rem measure as .lp-sec__headmain so the
   aside box does not stretch to the full 1240px wrap. */
.lp-arg__body--full{max-width:52rem;}

/* ---------------- Role cards ---------------- */
.lp-roles__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--lp-hair);
}
.lp-roles__item{border-bottom:1px solid var(--lp-hair-soft);}
.lp-roles__item:nth-child(even){border-left:1px solid var(--lp-hair-soft);}
.lp-roles__item:nth-last-child(-n+2){border-bottom:0;}

/* A whole-card link, so the target is the card and not just the CTA line. */
.lp-rolecard{
  display:block;position:relative;height:100%;
  padding:2.25rem clamp(1.5rem,3vw,2.75rem) 2.25rem 0;
  transition:background .3s var(--ease);
}
.lp-roles__item:nth-child(even) .lp-rolecard{padding-left:clamp(1.5rem,3vw,2.75rem);}
.lp-rolecard::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--brand);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .4s var(--ease);
}
.lp-rolecard:hover::after,.lp-rolecard:focus-visible::after{transform:scaleX(1);}
.lp-rolecard__n{
  display:block;
  font-family:var(--font-display);font-weight:800;
  font-size:.6875rem;letter-spacing:.12em;color:var(--lp-ghost);
  font-variant-numeric:tabular-nums;margin-bottom:1.1rem;
}
.lp-rolecard__eyebrow{
  display:block;margin-bottom:.85rem;
  font-size:.625rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--lp-muted);
}
.lp-rolecard__title{
  display:block;margin-bottom:.85rem;
  font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.2;letter-spacing:-.03em;
  color:var(--lp-ink);
}
.lp-rolecard__line{
  display:block;max-width:34rem;
  font-size:.875rem;line-height:1.7;color:var(--lp-ink-2);
}
.lp-rolecard__cta{
  display:inline-flex;align-items:center;gap:.7em;margin-top:1.5rem;
  font-size:.625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand);
}
.lp-rolecard__cta .arw{transition:transform .3s var(--ease);}
.lp-rolecard:hover .lp-rolecard__cta .arw{transform:translateX(5px);}

/* ============================================================
   7b. ICON GLYPHS  (D18 — client decision C4)

   NOT IN THE REFERENCE. bidconvey-site has no icon vocabulary at all;
   its lists are numerals and hairlines. The client kept the three
   existing glyph sets (.bene-icon, .nofee-check, .principle-check), so
   one is authored here. Do not "fix" these rows back to bare text.
   See REDESIGN-PLAN.md §5a, §11.

   Rules that keep the glyphs from fighting the system:
     - containers go square. A 12px-radius tinted box or a filled
       circle reads as imported next to this geometry — the reference
       has exactly one round element in 1,738 lines, a radio input.
     - colour is --lp-ink-2. NOT brand blue, which is reserved for
       things you can click (a non-interactive tick in the CTA colour
       dilutes the one control that matters), and NOT gold, which is
       spent once per screen on a figure.
   ============================================================ */
.lp-ico{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--lp-ink-2);
}
.lp-ico svg{display:block;width:100%;height:100%;}
.lp-sec--slate .lp-ico{color:rgba(255,255,255,.7);}

/* the small inline tick used in list rows */
.lp-ico--tick{width:18px;height:18px;margin-top:.15rem;}

/* the larger boxed glyph used on role cards: hairline square, no fill */
.lp-ico--box{
  width:46px;height:46px;
  border:1px solid var(--lp-hair);
  margin-bottom:1.35rem;
}
.lp-ico--box svg{width:24px;height:24px;}
.lp-sec--slate .lp-ico--box{border-color:rgba(255,255,255,.2);}

/* Icon variants of the hairline row shapes. These add a leading column; the
   base shapes are single-column text rows. */
.lp-facts__row--icon,
.lp-split__item--icon{
  display:grid;grid-template-columns:1.75rem minmax(0,1fr);
  gap:.9rem;align-items:start;
}
/* the row's text block spans nothing special — it simply sits in column 2 */
.lp-facts__row--icon > .lp-ico,
.lp-split__item--icon > .lp-ico{grid-row:1;}

/* ============================================================
   8. PROOF BAND / CTA BAND / PHOTO INTERVAL
   ============================================================ */
.lp-proof{position:relative;isolation:isolate;padding-block:clamp(4.5rem,8vw,8rem);color:#fff;}
.lp-proof__media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.lp-proof__media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;}
.lp-proof__scrim{
  position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(23,28,44,.94) 0%,
    rgba(23,28,44,.88) 46%,
    rgba(23,28,44,.62) 70%,
    rgba(23,28,44,.4) 100%);
}
.lp-proof__inner{position:relative;z-index:2;}
.lp-proof__copy{max-width:44rem;}
.lp-proof__copy .lp-kicker{color:rgba(255,255,255,.62);}
.lp-proof__copy .lp-h2{color:#fff;}
.lp-proof__copy .lp-h2 .ghost{color:rgba(255,255,255,.52);}
.lp-proof__list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(2rem,5vw,4.5rem);
  border-top:1px solid rgba(255,255,255,.2);max-width:62rem;
}
.lp-proof__row{padding:1.35rem 0;border-bottom:1px solid rgba(255,255,255,.11);}
.lp-proof__t{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:1rem;letter-spacing:-.02em;color:#fff;line-height:1.3;
}
.lp-proof__d{display:block;margin:.45rem 0 0;font-size:.875rem;line-height:1.66;color:rgba(255,255,255,.68);}
.lp-proof__note{
  margin:2rem 0 0;max-width:46rem;
  font-size:.75rem;line-height:1.7;color:rgba(255,255,255,.5);
}

/* ---------------- Dark CTA band ----------------
   Every page closes on slate before the footer, so the rhythm resolves the
   same way whichever page you are on. */
.lp-band{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--lp-ink-deep);color:#fff;
  padding-block:clamp(4rem,7.5vw,7rem);
}
.lp-band__media{position:absolute;inset:0;z-index:0;}
.lp-band__media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;}
.lp-band__scrim{
  position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(23,28,44,.95) 0%,
    rgba(23,28,44,.9) 44%,
    rgba(23,28,44,.66) 72%,
    rgba(23,28,44,.46) 100%);
}
.lp-band__inner{position:relative;z-index:2;}
.lp-band__grid{
  display:grid;
  grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:start;
}
.lp-band .lp-kicker{color:rgba(255,255,255,.62);}
.lp-band .lp-h2{color:#fff;}
.lp-band .lp-h2 .ghost{color:rgba(255,255,255,.5);}
.lp-band .lp-sec__intro{color:rgba(255,255,255,.72);max-width:38rem;}
.lp-band__main{max-width:48rem;}
.lp-band__actions{margin-top:clamp(1.75rem,3vw,2.5rem);}

/* ---------------- Photographic interval ----------------
   No copy, no CTA, no scrim heavy enough to read text through. Its whole job
   is to break the run of slabs and let the eye rest. */
.lp-interval{position:relative;overflow:hidden;background:var(--lp-ink-deep);}
.lp-interval--tall{height:clamp(20rem,42vw,34rem);}
.lp-interval--short{height:clamp(14rem,26vw,22rem);}
.lp-interval img{width:100%;height:100%;object-fit:cover;}
.lp-interval__tint{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,28,44,.34) 0%,rgba(23,28,44,.14) 40%,rgba(23,28,44,.4) 100%);
}

/* ============================================================
   9. DOCUMENT CARD + GOLD TOTAL + LEDGER
   ============================================================ */
.lp-doccard{
  position:relative;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.5);
  padding:1.5rem 1.75rem 0;
  box-shadow:0 48px 96px -34px rgba(12,16,28,.55),
             0 12px 32px -18px rgba(12,16,28,.34);
}
.lp-doccard .lp-ledger__cap{padding-bottom:.7rem;}
.lp-doccard__list{margin:0;padding:0;}
.lp-doccard__row{
  display:flex;gap:1.1rem;align-items:baseline;
  padding:.95rem 0;border-bottom:1px solid var(--lp-hair-soft);
}
.lp-doccard__row:last-child{border-bottom:0;}
/* Declared as the tracked label it is: these indices are "01".."05" on most
   cards but may be "A" / "B" / "—" elsewhere, so the tracking and casing have
   to be explicit rather than implied by digits. */
.lp-doccard__n{
  font-family:var(--font-display);font-weight:800;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lp-ghost);
  font-variant-numeric:tabular-nums;flex:0 0 auto;padding-top:.15rem;
}
.lp-doccard__main{display:block;}
.lp-doccard__t{
  display:block;font-size:.875rem;font-weight:600;color:var(--lp-ink);line-height:1.35;
}
.lp-doccard__d{
  display:block;margin-top:.25rem;
  font-size:.75rem;line-height:1.55;color:var(--lp-ink-2);
}
.lp-doccard__note{margin-top:1rem;}
/* Must be at least (tile height - its 34px overhang) or the tile rides up over
   the note above it: 104 - 34 = 70px, plus a little air. */
.lp-doccard__well{min-height:4.75rem;}

.lp-ledger__cap{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--lp-hair);
  font-size:.5625rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lp-muted);
}
.lp-ledger__tag{
  display:block;margin-top:.3rem;
  font-size:.5625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lp-muted);
}
.lp-ledger__amt{
  font-family:var(--font-display);
  font-size:.9375rem;font-weight:700;letter-spacing:-.015em;color:var(--lp-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:.05rem;
}
.lp-card__note{
  margin:.8rem 0 0;padding-top:.8rem;
  border-top:1px solid var(--lp-hair-soft);
  font-size:.625rem;line-height:1.7;color:var(--lp-muted);
  text-align:right;
}

/* the one number that matters — the only gold on the page */
.lp-total{
  position:absolute;left:-40px;bottom:-34px;
  background:var(--lp-ink-deep);
  min-width:300px;min-height:120px;
  padding:1.65rem 2.15rem;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 30px 60px -28px rgba(12,16,28,.55);
}
.lp-total__fig{
  font-family:var(--font-display);
  font-weight:800;font-size:clamp(2rem,2.9vw,2.6rem);
  letter-spacing:-.038em;line-height:1;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.lp-total__lab{
  margin-top:.65rem;
  font-size:.5625rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.56);
}
.lp-total--doc{min-width:260px;min-height:104px;padding:1.35rem 1.9rem;}
.lp-total--doc .lp-total__fig{font-size:clamp(1.7rem,2.3vw,2.15rem);}
/* A total tile that sits in normal flow rather than lapping a card.
   min-width:0 is required: the base .lp-total carries min-width:300px for the
   overlapping variant, which plus its 2.15rem side padding overflows a 320px
   screen and pushes the whole document sideways. */
.lp-total--flow{position:static;margin:0;min-width:0;max-width:100%;}
@media (max-width:420px){
  .lp-total--flow{padding:1.3rem 1.4rem;min-height:0;}
}

/* ---------------- Full ledger rows (money) ---------------- */
.lp-fledger + .lp-fledger{margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--lp-hair);}
.lp-fledger__row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1rem 0;border-bottom:1px solid var(--lp-hair-soft);
}
.lp-fledger__main{max-width:34rem;}
.lp-fledger__name{
  display:block;font-size:.9375rem;font-weight:600;color:var(--lp-ink);line-height:1.3;
}
.lp-fledger__row .lp-ledger__tag{margin-top:.35rem;}
.lp-fledger__note{
  margin:.5rem 0 0;font-size:.75rem;line-height:1.6;color:var(--lp-muted);max-width:32rem;
}
/* Subtotal rows ("You save", "Total Payable") read at the SAME size as the
   rows they total — 15px, sentence case. They were 10px tracked caps, which
   made the two most important numbers in the ledger the smallest text in it.
   The heavier top rule still marks them as subtotals, so nothing is lost by
   dropping the uppercase treatment; at 15px, .24em tracking is unreadable
   anyway. */
.lp-fledger__sub{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:.35rem;padding-top:.9rem;border-top:1px solid var(--lp-ink);
  font-size:.9375rem;font-weight:700;letter-spacing:-.01em;
  color:var(--lp-ink);
}
/* The pricing notes, likewise, at the ledger's own size rather than 12px.
   Renamed from .lp-calc__disc: the calculator that named it is no longer on
   the site, and a class should say what it is. */
.lp-pricenote{
  margin:1.6rem 0 0;padding-top:1.25rem;border-top:1px solid var(--lp-hair-soft);
  font-size:.9375rem;line-height:1.72;color:var(--lp-ink-2);
}
.lp-pricenote strong{color:var(--lp-ink);font-weight:600;}

/* The worked-example card on the buyers pricing section. This used to borrow
   .lp-calc__out from the calculator; the calculator has been removed, so the
   card carries its own name rather than a vestige of a component that is no
   longer on the site. */
.lp-pricecard{
  background:var(--surface);border:1px solid var(--lp-hair);
  padding:clamp(1.5rem,2.4vw,2.25rem);
}

/* a paper sidebar */
.lp-aside{background:var(--paper);padding:clamp(1.5rem,2.2vw,2rem);}
.lp-aside__cap{
  display:block;margin-bottom:1rem;
  font-size:.5625rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--lp-muted);
}
.lp-aside__body{margin:0 0 1.35rem;font-size:.875rem;line-height:1.68;color:var(--lp-ink-2);}
/* An aside that follows a list in the same column rather than sitting beside
   it — needs its own air, or it reads as one more row of the ledger above. */
.lp-aside--under{margin-top:clamp(2rem,3.4vw,3rem);}
.lp-aside__list{margin-top:1.25rem;border-top:1px solid var(--lp-hair);}
/* inside a paper aside the hairlines need to read against the paper, not white */
.lp-aside__list .lp-split__item{border-bottom-color:var(--lp-hair);}
.lp-aside__list .lp-split__item:last-child{border-bottom:0;padding-bottom:0;}

/* ---------------- The clause block ---------------- */
.lp-clause{background:var(--lp-ink-deep);color:#fff;padding:clamp(1.5rem,2.2vw,2rem);}
.lp-clause .lp-aside__cap{color:rgba(255,255,255,.55);}
.lp-clause__box{
  margin:0;padding:1.15rem 1.25rem;
  background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.28);
  font-family:"Inter",ui-monospace,monospace;
  font-size:.75rem;line-height:1.7;letter-spacing:.02em;
  color:var(--accent);white-space:pre-wrap;
}
/* The clause box on a LIGHT ground (inside the dialog). The slate version
   above is white-on-dark with gold text; on paper that inverts to ink on a
   paper ground with the gold kept only on the dashed rule, so the one gold
   moment in the dialog is the border rather than the body text. */
.lp-clause__box--light{
  background:var(--paper);border-color:var(--accent);
  color:var(--lp-ink);white-space:normal;
}
.lp-clause__box--light p{margin:0;font-size:.8125rem;line-height:1.75;}
.lp-clause__url{font-weight:600;color:var(--brand);}

.lp-clause__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;margin-top:1.35rem;}
.lp-clause__foot .lp-tlink--ink{color:rgba(255,255,255,.62);}
.lp-clause__foot .lp-tlink--ink b{color:#fff;}
.lp-clause__foot .lp-tlink--ink .arw{color:var(--accent);}

/* ============================================================
   10. FAQ
   ============================================================ */
.lp-faq__list{border-top:1px solid var(--lp-hair);max-width:60rem;}
.lp-faq__item{border-bottom:1px solid var(--lp-hair-soft);}
.lp-faq__item details summary{list-style:none;cursor:pointer;}
.lp-faq__item details summary::-webkit-details-marker{display:none;}
.lp-faq__q{
  display:grid;grid-template-columns:3.25rem minmax(0,1fr) 1.5rem;
  gap:1rem;align-items:baseline;padding:1.35rem 0;
}
.lp-faq__q:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.lp-faq__num{
  font-family:var(--font-display);font-weight:800;
  font-size:.6875rem;letter-spacing:.12em;color:var(--lp-ghost);
  font-variant-numeric:tabular-nums;
}
.lp-faq__qtext{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1rem,1.4vw,1.1rem);letter-spacing:-.022em;line-height:1.35;
  color:var(--lp-ink);
}
.lp-faq__sign{position:relative;width:14px;height:14px;justify-self:end;align-self:center;}
.lp-faq__sign::before,.lp-faq__sign::after{
  content:"";position:absolute;background:var(--lp-muted);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.lp-faq__sign::before{left:0;right:0;top:6px;height:1px;}
.lp-faq__sign::after{top:0;bottom:0;left:6px;width:1px;}
.lp-faq__item details[open] .lp-faq__sign::after{transform:scaleY(0);opacity:0;}
.lp-faq__a{padding:0 1.5rem 1.6rem 4.25rem;}
.lp-faq__a p{margin:0;font-size:.9375rem;line-height:1.75;color:var(--lp-ink-2);max-width:46rem;}
/* The myth/fact pair keeps its two tracked labels. The claim is set muted and
   the correction carries the brand blue — the fact is the payload of the row,
   so it is the half that gets the accent. */
.lp-faq__lab{
  display:inline-block;margin-right:.7em;
  font-size:.5625rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lp-ghost);
}
.lp-faq__lab--fact{color:var(--brand);}

/* the contact block that closes a FAQ section */
.lp-faq__contact{
  margin-top:clamp(2rem,3.4vw,3rem);padding-top:1.75rem;
  border-top:1px solid var(--lp-hair);max-width:60rem;
}
.lp-faq__contactlinks{margin:1.1rem 0 0;}
/* the footer's value style, re-toned for a light ground */
.lp-foot__val--ink{color:var(--lp-ink);border-bottom-color:var(--lp-hair);}
a.lp-foot__val--ink:hover{color:var(--brand);border-bottom-color:var(--brand);}
/* the gold total tile when it sits in flow inside a light card */
.lp-pricing__total{margin-top:2rem;max-width:24rem;}

/* ============================================================
   11. FORMS
   ============================================================ */
.lp-form{background:var(--surface);padding:clamp(1.75rem,2.8vw,2.75rem);color:var(--lp-ink);}
.lp-form__intro{margin-bottom:1.75rem;}
.lp-form__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.4rem clamp(1.25rem,2.4vw,2rem);
}
.lp-fieldset.is-wide{grid-column:1 / -1;}
.lp-fieldset__label{
  display:block;margin-bottom:.55rem;
  font-size:.625rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lp-muted);
}
.lp-fieldset__opt{letter-spacing:.14em;color:var(--lp-ghost);}
.lp-input{
  width:100%;display:block;
  font-family:"Inter",system-ui,sans-serif;font-size:.9375rem;font-weight:500;
  color:var(--lp-ink);background:transparent;
  border:0;border-bottom:1px solid rgba(58,65,89,.28);
  border-radius:0;padding:.5rem 0;
  transition:border-color .25s var(--ease);
  appearance:none;-webkit-appearance:none;
}
.lp-input::placeholder{color:var(--lp-ghost);font-weight:400;}
.lp-input:hover{border-bottom-color:rgba(58,65,89,.5);}
.lp-input:focus{outline:none;border-bottom-color:var(--brand);box-shadow:0 1px 0 0 var(--brand);}
.lp-input:focus-visible{outline:none;}
.lp-fieldset.has-error .lp-input{border-bottom-color:#B4341F;}
.lp-textarea{
  resize:vertical;min-height:6.5rem;line-height:1.6;
  border:1px solid rgba(58,65,89,.28);padding:.7rem .85rem;
}
.lp-textarea:focus{box-shadow:none;border-color:var(--brand);}
.lp-fieldset__hint{margin:.5rem 0 0;font-size:.6875rem;line-height:1.6;color:var(--lp-muted);}
.lp-fieldset__err{margin:.5rem 0 0;font-size:.6875rem;line-height:1.6;color:#B4341F;font-weight:500;}
.lp-form__err{
  margin:1.25rem 0 0;padding:.9rem 1rem;
  background:rgba(180,52,31,.07);border-left:2px solid #B4341F;
  font-size:.8125rem;line-height:1.6;color:#8E2818;
}
.lp-form__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;
  margin-top:1.9rem;padding-top:1.75rem;border-top:1px solid var(--lp-hair);
}
.lp-form__legal{margin:0;flex:1 1 16rem;font-size:.6875rem;line-height:1.65;color:var(--lp-muted);}
.lp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------------- Radios + checkboxes (square, hairline) ---------------- */
.lp-radio,.lp-check{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;
  align-items:start;cursor:pointer;padding:.5rem 0;
}
.lp-radio input,.lp-check input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;
}
.lp-radio__box,.lp-check__box{
  width:17px;height:17px;flex:0 0 auto;margin-top:.15rem;
  border:1px solid rgba(58,65,89,.42);background:var(--surface);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.lp-radio__box{border-radius:50%;}
.lp-radio input:checked + .lp-radio__box{
  border-color:var(--brand);background:var(--brand);
  box-shadow:inset 0 0 0 3px #fff;
}
.lp-check input:checked + .lp-check__box{
  border-color:var(--brand);background:var(--brand);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4L4.7 9 10 3.2' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size:12px 12px;background-position:center;background-repeat:no-repeat;
}
.lp-radio input:focus-visible + .lp-radio__box,
.lp-check input:focus-visible + .lp-check__box{
  outline:2px solid var(--brand);outline-offset:2px;
}
.lp-radio__text,.lp-check__text{font-size:.875rem;line-height:1.6;color:var(--lp-ink-2);}
.lp-check__req{
  display:inline-block;margin-left:.5em;
  font-size:.5625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand);
}
.lp-check.has-error .lp-check__box{border-color:#B4341F;}

/* ---------------- Final CTA + form slab ---------------- */
.lp-cta__grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2.25rem,5vw,4.5rem);align-items:start;
}
.lp-cta__copy .lp-sec__head{margin-bottom:2rem;}
.lp-cta__aside{
  padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.18);
  font-size:.875rem;line-height:1.72;color:rgba(255,255,255,.66);
}
.lp-cta__aside p{margin:0 0 .9rem;}
.lp-cta__aside p:last-child{margin-bottom:0;}
.lp-cta__aside strong{color:#fff;font-weight:600;}


/* the required marker beside a field label */
.lp-fieldset__req{color:var(--accent);margin-left:.25em;}
/* investor highlights read as a single column inside the argument body */
.lp-investors__highlights{grid-template-columns:minmax(0,1fr) !important;margin-top:1rem;}
/* The investor form's success panel, hidden until the handler swaps it in.
   The class names are `hide` / `show` because that is what the carried-over
   handler in investors.html toggles — the script is preserved verbatim so the
   form keeps working, which means the CSS adapts to it, not the reverse.
   Getting this wrong is silent: the form submits, the POST succeeds, and the
   visitor is left staring at the form they just sent. */
.lp-form--done{display:none;}
.lp-form--done.show{display:flex;}
.lp-form.hide{display:none;}
/* the submit spinner the handler toggles */
.spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:lp-spin .7s linear infinite;}
.spinner.show{display:inline-block;}
@keyframes lp-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none;}}

/* ============================================================
   11c. "BUYING A PROPERTY: EXPLAINED"

   A long explanatory guide — five numbered terms, each with prose,
   bullet lists, a plain-English restatement and sometimes a tip.

   Rendered OPEN rather than as an accordion on purpose: the FAQ
   directly beneath it is already a list of <details>, and two
   collapsible stacks in a row read as one broken component. This is
   material to be read, so it is set as an editorial ledger — index in
   the gutter, body in the measure — using the same hairlines, tracked
   labels and Manrope indices as every other list on the site.
   ============================================================ */
.lp-explain__list{border-top:1px solid var(--lp-hair);}
.lp-explain__item{
  display:grid;grid-template-columns:3.25rem minmax(0,1fr);
  gap:clamp(1rem,2.5vw,2rem);
  padding:clamp(1.75rem,3vw,2.5rem) 0;
  border-bottom:1px solid var(--lp-hair-soft);
}
.lp-explain__item:last-child{border-bottom:0;}
.lp-explain__n{
  font-family:var(--font-display);font-weight:800;
  font-size:.75rem;letter-spacing:.12em;color:var(--brand);
  font-variant-numeric:tabular-nums;padding-top:.3rem;
}
.lp-explain__t{
  display:block;margin:0 0 1.1rem;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:-.028em;line-height:1.2;
  color:var(--lp-ink);
}
/* the "What is it?" prompt — a tracked label, not a heading */
.lp-explain__q{
  display:block;margin:0 0 .6rem;
  font-size:.5625rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lp-muted);
}
.lp-explain__p{margin:0 0 1.05rem;font-size:.9375rem;line-height:1.75;color:var(--lp-ink-2);max-width:44rem;}
.lp-explain__p:last-child{margin-bottom:0;}
.lp-explain__p strong{color:var(--lp-ink);font-weight:600;}
/* a sub-heading inside a term */
.lp-explain__h{
  margin:1.6rem 0 .7rem;
  font-family:var(--font-display);font-weight:700;
  font-size:1rem;letter-spacing:-.022em;line-height:1.3;color:var(--lp-ink);
}
/* bullet lists become hairline rows, like every other list on the site */
.lp-explain__ul{margin:0 0 1.05rem;border-top:1px solid var(--lp-hair-soft);max-width:44rem;}
.lp-explain__ul li{
  padding:.7rem 0;border-bottom:1px solid var(--lp-hair-soft);
  font-size:.875rem;line-height:1.6;color:var(--lp-ink-2);
}

/* "In simple terms" — the plain-English restatement. Paper ground and the
   one gold rule in this section, because it is the line a first-time buyer
   actually takes away. */
.lp-explain__plain{
  margin:1.35rem 0;padding:1.1rem 1.35rem;
  background:var(--paper);border-left:2px solid var(--accent);max-width:44rem;
}
.lp-explain__plaincap{
  display:block;margin-bottom:.45rem;
  font-size:.5625rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lp-muted);
}
.lp-explain__plainq{
  display:block;font-family:var(--font-display);font-weight:700;font-style:italic;
  font-size:1.0625rem;letter-spacing:-.02em;line-height:1.4;color:var(--lp-ink);
}
.lp-explain__plainnote{
  display:block;margin-top:.5rem;font-size:.8125rem;line-height:1.6;color:var(--lp-muted);
}

/* Tips — hairline box, brand blue label. Deliberately NOT gold: gold is spent
   on the plain-English line above, and two accents in one row of prose reads
   as decoration rather than emphasis. */
.lp-explain__tip{
  margin:1.35rem 0;padding:1.05rem 1.25rem;
  border:1px solid var(--lp-hair);max-width:44rem;
}
.lp-explain__tipcap{
  display:block;margin-bottom:.4rem;
  font-size:.5625rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brand);
}
.lp-explain__tip p{margin:0;font-size:.875rem;line-height:1.7;color:var(--lp-ink-2);}

/* 5 quote -> seller shortlists 3 -> buyer chooses 1 */
.lp-explain__flow{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin:1.5rem 0;border-top:1px solid var(--lp-hair);max-width:44rem;
}
.lp-explain__step{
  padding:1.1rem 1.1rem 1.1rem 0;position:relative;
  border-left:1px solid var(--lp-hair-soft);padding-left:1.1rem;
}
.lp-explain__step:first-child{border-left:0;padding-left:0;}
.lp-explain__stepn{
  display:block;margin-bottom:.5rem;
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;line-height:1;
  letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;
}
.lp-explain__stept{
  display:block;font-size:.75rem;line-height:1.5;color:var(--lp-ink-2);
}

/* "What Could I Pay?" — two cost groups joined by a PLUS */
.lp-explain__pay{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:clamp(.75rem,2vw,1.5rem);
  margin:1.35rem 0;max-width:44rem;
}
.lp-explain__paybox{border:1px solid var(--lp-hair);padding:1.1rem 1.25rem;height:100%;}
.lp-explain__paycap{
  display:block;margin-bottom:.4rem;
  font-family:var(--font-display);font-weight:800;font-size:.9375rem;
  letter-spacing:-.02em;color:var(--lp-ink);
}
.lp-explain__payd{display:block;font-size:.8125rem;line-height:1.55;color:var(--lp-ink-2);}
.lp-explain__plus{
  font-size:.625rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lp-muted);text-align:center;
}

/* the closing question, set as the section's last word */
.lp-explain__close{
  margin-top:clamp(1.75rem,3vw,2.5rem);padding-top:1.5rem;
  border-top:1px solid var(--lp-hair);max-width:44rem;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:-.025em;line-height:1.45;
  color:var(--lp-ink);
}

@media (max-width:768px){
  .lp-explain__item{grid-template-columns:2.25rem minmax(0,1fr);gap:.85rem;}
  .lp-explain__flow{grid-template-columns:minmax(0,1fr);}
  .lp-explain__step{border-left:0;padding-left:0;border-bottom:1px solid var(--lp-hair-soft);}
  .lp-explain__step:last-child{border-bottom:0;}
  .lp-explain__pay{grid-template-columns:minmax(0,1fr);}
  .lp-explain__plus{text-align:left;}
  .lp-explain__p,.lp-explain__ul,.lp-explain__plain,.lp-explain__tip,
  .lp-explain__flow,.lp-explain__pay,.lp-explain__close{max-width:none;}
}

/* ============================================================
   12. STICKY MOBILE CTA

   position:fixed, so it never displaces content — no layout shift when
   it appears. The footer reserves its height permanently at mobile widths.
   ============================================================ */
.lp-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-top:1px solid var(--lp-hair);
  transform:translateY(101%);
  transition:transform .35s var(--ease);
  padding-bottom:env(safe-area-inset-bottom,0);
  display:none;
}
.lp-sticky.is-shown{transform:translateY(0);}
.lp-sticky__inner{
  display:flex;align-items:center;gap:1rem;
  padding:.75rem clamp(1.25rem,4.4vw,2rem);
}
.lp-sticky__note{
  flex:1 1 auto;min-width:0;
  font-size:.6875rem;line-height:1.4;letter-spacing:.02em;color:var(--lp-muted);
}
.lp-sticky__btn{flex:0 0 auto;padding:15px 22px;font-size:.625rem;letter-spacing:.14em;}
/* The note is omitted on this site — it would be new copy, and copy is frozen
   (see _snippets/sticky.html). When the button is the only child it should own
   the bar rather than sit small against the left edge. */
.lp-sticky__inner > .lp-sticky__btn:only-child{flex:1 1 auto;}

/* ============================================================
   13. FOOTER
   ============================================================ */
.lp-foot{background:var(--lp-ink-deep);color:rgba(255,255,255,.6);padding-block:clamp(2.75rem,4.5vw,4rem);}
.lp-foot__top{
  display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start;
  padding-bottom:1.75rem;border-bottom:1px solid rgba(255,255,255,.14);
}
/* 47px on the padded canvas renders the mark at ~38px, as before. */
.lp-foot__brand img{height:47px;width:auto;}
.lp-foot__statement{
  margin:1.35rem 0 0;max-width:32rem;
  font-size:.8125rem;line-height:1.7;color:rgba(255,255,255,.62);
}
.lp-foot__links{display:flex;gap:clamp(1.25rem,3vw,2.5rem);flex-wrap:wrap;}
.lp-foot__links a{
  font-size:.6875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);transition:color .25s var(--ease);
}
.lp-foot__links a:hover{color:#fff;}

/* the contact block: tracked caps over a hairline-underlined value */
.lp-foot__contact{margin-top:1.9rem;}
.lp-foot__cap{
  display:block;margin-bottom:.9rem;
  font-size:.5625rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.lp-foot__rows{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;}
.lp-foot__val{
  display:inline-block;
  font-family:var(--font-display);font-weight:700;
  font-size:.9375rem;letter-spacing:-.015em;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:2px;
  transition:border-color .25s var(--ease),color .25s var(--ease);
  overflow-wrap:anywhere;
}
a.lp-foot__val:hover{color:var(--accent);border-bottom-color:var(--accent);}

.lp-foot__social{display:flex;gap:1.25rem;margin-top:1.9rem;}
.lp-foot__social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.62);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.lp-foot__social svg{display:block;width:15px;height:15px;fill:currentColor;}
.lp-foot__social a:hover{color:#fff;border-color:rgba(255,255,255,.5);}

/* No border-top here. The reference separates __top from __base with a rule
   because __top carries a brand column AND a link nav; this footer has no link
   nav (adding one would be new copy), so __top's border-bottom is already the
   only rule needed. Declaring both put two hairlines ~12px apart above the
   copyright, which reads as a mistake rather than as structure. */
.lp-foot__base{
  display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;justify-content:space-between;
  padding-top:1.5rem;
  font-size:.6875rem;line-height:1.7;color:rgba(255,255,255,.4);
}
.lp-foot__base span:last-child{max-width:38rem;}

/* ============================================================
   14. THE CLAUSE DIALOG
   ============================================================ */
.lp-modal{
  border:0;padding:0;background:transparent;
  max-width:min(46rem,calc(100vw - 2rem));width:100%;
  color:var(--lp-ink);
}
.lp-modal::backdrop{background:rgba(10,17,32,.72);backdrop-filter:blur(3px);}
.lp-modal__panel{
  position:relative;
  background:var(--surface);border:1px solid var(--lp-hair);
  padding:clamp(1.75rem,3vw,2.75rem);
  box-shadow:0 48px 96px -34px rgba(12,16,28,.55);
}
.lp-modal__close{
  position:absolute;top:.75rem;right:.75rem;
  width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--lp-muted);
  transition:color .25s var(--ease),background .25s var(--ease);
}
.lp-modal__close svg{display:block;width:16px;height:16px;fill:currentColor;}
.lp-modal__close:hover{color:var(--lp-ink);background:var(--paper);}
.lp-modal__intro{margin:1.1rem 0 0;font-size:.9375rem;line-height:1.7;color:var(--lp-ink-2);}
.lp-modal__steps{margin:1.5rem 0 0;padding:0;border-top:1px solid var(--lp-hair);}
.lp-modal__steps li{
  display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:1rem;
  padding:.95rem 0;border-bottom:1px solid var(--lp-hair-soft);
  font-size:.9063rem;line-height:1.6;color:var(--lp-ink-2);
  counter-increment:lp-modal-step;
}
.lp-modal__steps{counter-reset:lp-modal-step;}
.lp-modal__steps li::before{
  content:counter(lp-modal-step,decimal-leading-zero);
  font-family:var(--font-display);font-weight:800;
  font-size:.6875rem;letter-spacing:.12em;color:var(--lp-ghost);
  font-variant-numeric:tabular-nums;padding-top:.25rem;
}
.lp-modal__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--lp-hair);
}
.lp-modal__hint{font-size:.6875rem;line-height:1.6;color:var(--lp-muted);}
.lp-copy{
  display:inline-flex;align-items:center;gap:.7em;
  padding:15px 26px;background:var(--brand);color:#fff;
  font-size:.625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  transition:background .3s var(--ease);
}
.lp-copy svg{display:block;width:14px;height:14px;fill:currentColor;}
.lp-copy:hover{background:var(--brand-deep);}
.lp-copy.copied{background:var(--accent-deep);}

/* ============================================================
   15. REVEAL  (the reduced motion layer — see REDESIGN-PLAN.md Phase 7)

   Matches the reference's GSAP curve (opacity 0->1, y 34->0,
   .95s power3.out, .09s stagger) closely enough to be
   indistinguishable, with no dependency.

   The hidden state is applied by script (html.lp-anim), not by this
   stylesheet, so with JavaScript disabled every section is present and
   legible rather than stranded at opacity 0.
   ============================================================ */
/* :where() again, and for the same reason. `html.lp-anim .lp-rv` scores
   (0,2,1) and would beat `.lp-rv.is-in` at (0,2,0) — the hidden state would
   win permanently and every revealed section would stay blank. Wrapping the
   gate in :where() drops it to (0,1,0) so the .is-in rule can take over. */
:where(html.lp-anim) .lp-rv{opacity:0;transform:translateY(34px);}
.lp-rv{
  transition:opacity .95s var(--ease),transform .95s var(--ease);
  will-change:opacity,transform;
}
.lp-rv.is-in{opacity:1;transform:none;}
:where(html.lp-anim) .lp-rv-stagger > *{opacity:0;transform:translateY(34px);}
.lp-rv-stagger > *{transition:opacity .95s var(--ease),transform .95s var(--ease);}
.lp-rv-stagger.is-in > *{opacity:1;transform:none;}
.lp-rv-stagger.is-in > *:nth-child(1){transition-delay:0s;}
.lp-rv-stagger.is-in > *:nth-child(2){transition-delay:.09s;}
.lp-rv-stagger.is-in > *:nth-child(3){transition-delay:.18s;}
.lp-rv-stagger.is-in > *:nth-child(4){transition-delay:.27s;}
.lp-rv-stagger.is-in > *:nth-child(5){transition-delay:.36s;}
.lp-rv-stagger.is-in > *:nth-child(n+6){transition-delay:.45s;}

/* anchor targets clear the fixed header */
.lp [id]{scroll-margin-top:calc(var(--lp-header-h) + 1.5rem);}

@media (prefers-reduced-motion:reduce){
  /* lp.js never adds .lp-anim under reduced motion — it marks everything
     revealed and returns — so this is belt and braces for a preference that
     changes after load. !important because the reveal rules above are scoped
     rather than gated, and a late preference change must always win. */
  .lp-rv,.lp-rv-stagger > *{opacity:1 !important;transform:none !important;transition:none;}
  .lp-sticky{transition:none;}
  .lp-navpanel{animation:none;}
  .lp *{scroll-behavior:auto !important;}
}

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .lp{--lp-card-w:420px;}
  .lp-cta__grid{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:980px){
  .lp-hero__inner--split{grid-template-columns:minmax(0,1fr);}
  .lp-hero--split .lp-hero__band{min-height:0;}
  .lp-steps__row{grid-template-columns:3rem minmax(0,1fr);row-gap:.5rem;}
  .lp-steps__d{grid-column:2;}
  .lp-split__grid{grid-template-columns:minmax(0,1fr);gap:2.5rem;}
  .lp-proof__list{grid-template-columns:minmax(0,1fr);}
  .lp-arg__grid{grid-template-columns:minmax(0,1fr);}
  .lp-facts__list{grid-template-columns:minmax(0,1fr);}
  .lp-sec__head,
  .lp-band__grid{grid-template-columns:minmax(0,1fr);gap:1rem;}
  .lp-gutter{padding-top:0;}
  .lp-listgrid{grid-template-columns:minmax(0,1fr);gap:2rem;}
  .lp-sec__head--gutter{position:static;}
  .lp-listgrid .lp-steps__note{grid-column:1;}
}

/* The root's "plainly"-style slabs use the same gutter axis as every other
   section. NOTE: the column rule lives in a min-width query, NOT unguarded —
   an unguarded declaration here would outrank the mobile collapse below and
   pin the slab to two columns on a phone. That is exactly the bug the
   reference documents. Anything width-dependent goes in a query. */
@media (min-width:981px){
  .lp-plainly__grid{grid-template-columns:minmax(0,14rem) minmax(0,1fr);}
}
.lp-plainly__grid{
  display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.lp-plainly__body p{
  margin:0 0 1.15rem;max-width:38rem;
  font-size:.9688rem;line-height:1.76;color:rgba(255,255,255,.72);
}

@media (max-width:900px){
  .lp{--lp-header-h:70px;--lp-card-w:100%;}
  .lp-sticky{display:block;}
  .lp-foot{padding-bottom:calc(clamp(2.75rem,4.5vw,4rem) + 68px);}

  /* The photo becomes a clean band at the top — the subject is fully legible —
     and the band continues as solid slate underneath, so the copy sits on
     slate rather than on their faces. */
  .lp-hero__band{
    min-height:0;padding-top:0;align-items:flex-start;
    background:var(--lp-ink-deep);
  }
  .lp-hero__media,
  .lp-hero__scrim,
  .lp-hero__grain{inset:0 0 auto 0;height:56vh;}
  .lp-hero__media img{object-position:50% 32%;}
  .lp-hero__scrim{
    background:linear-gradient(180deg,
      rgba(23,28,44,.52) 0%,
      rgba(23,28,44,.18) 20%,
      rgba(23,28,44,.5) 50%,
      rgba(23,28,44,.94) 84%,
      rgba(23,28,44,1) 100%);
  }
  .lp-hero__copy{padding-block:47vh 4.5rem;max-width:none;}

  .lp-h1{font-size:clamp(2.5rem,10.6vw,3.15rem);margin-bottom:1.1rem;letter-spacing:-.038em;}
  .lp-h1 br{display:none;}
  .lp-h1 .ghost{display:block;}
  .lp-eyebrow{margin-bottom:.9rem;font-size:.625rem;letter-spacing:.24em;}
  .lp-sub{max-width:34rem;font-size:.9688rem;line-height:1.52;margin-bottom:1.35rem;}
  .lp-actions{gap:1.25rem;}
  .lp-btn{width:100%;padding:19px 24px;}
  .lp-tlink{width:100%;justify-content:flex-start;}
  .lp-guard{margin-top:2rem;padding-top:1.25rem;max-width:none;}

  /* Split hero collapses the same way. */
  .lp-hero--split .lp-hero__band{
    padding-top:0;align-items:flex-start;background:var(--lp-ink-deep);
  }
  .lp-hero--split .lp-hero__media,
  .lp-hero--split .lp-hero__scrim,
  .lp-hero--split .lp-hero__grain{inset:0 0 auto 0;height:52vh;}
  .lp-hero--split .lp-hero__media img{object-position:var(--lp-obj-mobile,50% 32%);}
  .lp-hero--split .lp-hero__scrim{
    background:linear-gradient(180deg,
      rgba(23,28,44,.5) 0%,
      rgba(23,28,44,.16) 20%,
      rgba(23,28,44,.5) 50%,
      rgba(23,28,44,.94) 84%,
      rgba(23,28,44,1) 100%);
  }
  .lp-hero__inner--split{gap:0;}
  .lp-hero--split .lp-hero__copy{padding-block:44vh 3rem;max-width:none;}
  .lp-hero__card{padding-bottom:2.5rem;}
  .lp-doccard{padding-inline:1.4rem;}
  .lp-total--doc{position:static;margin:0 1rem -1.75rem;min-width:0;min-height:0;padding:1.2rem 1.4rem;}
  .lp-doccard__well{min-height:0;}

  .lp-hero--index .lp-hero__band{min-height:0;}
  .lp-hero--index .lp-h1 .ghost{display:block;}

  .lp-sec{padding-block:clamp(3rem,8vw,4.25rem);}
  .lp-form__grid{grid-template-columns:minmax(0,1fr);}
  .lp-faq__q{grid-template-columns:2.5rem minmax(0,1fr) 1.25rem;gap:.75rem;}
  .lp-faq__a{padding-left:3.25rem;padding-right:0;}
  .lp-form__foot .lp-btn{width:100%;}

  .lp-roles__grid{grid-template-columns:minmax(0,1fr);}
  .lp-roles__item:nth-child(even){border-left:0;}
  .lp-roles__item:nth-last-child(-n+2){border-bottom:1px solid var(--lp-hair-soft);}
  .lp-roles__item:last-child{border-bottom:0;}
  .lp-rolecard,
  .lp-roles__item:nth-child(even) .lp-rolecard{padding:1.75rem 0;}
}

@media (max-width:520px){
  .lp-form{padding-inline:1.3rem;}
  .lp-fledger__row{flex-direction:column;gap:.35rem;}
  .lp-fledger__row .lp-ledger__amt{padding-top:.25rem;}
  .lp-faq__num{display:none;}
  .lp-faq__q{grid-template-columns:minmax(0,1fr) 1.25rem;}
  .lp-faq__a{padding-left:0;}
  .lp-steps__row{grid-template-columns:2.5rem minmax(0,1fr);}
  .lp-sticky__note{display:none;}
  .lp-sticky__btn{width:100%;}
  .lp-modal__panel{padding-inline:1.3rem;}
}

/* ============================================================
   MOBILE INVARIANT — keep this block LAST in the file.

   Every editorial two-column grid collapses at 768px and below.
   It is expressed once, here, at the end, on purpose: the live bug
   this fixes was a single unguarded `grid-template-columns` appended
   after its own mobile media query, which pinned a slab to two
   columns on a phone — a 94px body column at 390px and a 24px one at
   320px, one word per line.

   Anything added below this block that sets columns without a media
   query will reintroduce that bug. Add it above, in a query.

   NOT collapsed here, because they are icon/label rows rather than
   text columns, and they are correct on a phone:
     .lp-faq__q             question + toggle glyph
     .lp-check / .lp-radio  control + label
     .lp-steps__row         index + content (description wraps to col 2)
     .lp-doccard__row       index + content
     .lp-modal__steps li    index + content
     .lp-facts__row--icon   glyph + content   (D18 — ours, same reasoning)
     .lp-split__item--icon  glyph + content   (D18 — ours, same reasoning)
   ============================================================ */
@media (max-width:768px){
  .lp-sec__head,
  .lp-sec__head--gutter,
  .lp-listgrid,
  .lp-band__grid,
  .lp-arg__grid,
  .lp-split__grid,
  .lp-facts__list,
  .lp-proof__list,
  .lp-cta__grid,
  .lp-plainly__grid,
  .lp-roles__grid,
  .lp-form__grid,
  .lp-steps__list{
    grid-template-columns:minmax(0,1fr) !important;
  }
  /* the gutter label sits above its content, not beside it */
  .lp-gutter,
  .lp-gutter--wide{padding-top:0;}
  .lp-sec__head{gap:1rem;}
  .lp-listgrid{gap:1.75rem;}
  .lp-listgrid .lp-steps__note{grid-column:1;}

  /* body copy runs the full container at phone widths */
  .lp-sec__intro,
  .lp-arg__p,
  .lp-arg__pull,
  .lp-plainly__body p,
  .lp-split__d,
  .lp-facts__d,
  .lp-proof__d,
  .lp-steps__d,
  .lp-pagehero__sub,
  .lp-faq__a p{
    max-width:none;
  }
  .lp-sec__intro,
  .lp-arg__p,
  .lp-plainly__body p{font-size:1rem;line-height:1.6;}

  /* no tracked label goes below 10px on a phone — 9px is not a size, it is
     a rumour of one */
  .lp-ledger__tag,
  .lp-total__lab,
  .lp-aside__cap,
  .lp-check__req,
  .lp-opt,
  .lp-ledger__cap,
  .lp-rolecard__eyebrow,
  .lp-rolecard__cta,
  .lp-eyebrow,
  .lp-fieldset__label,
  .lp-faq__lab,
  .lp-foot__cap,
  .lp-navpanel__n{font-size:.625rem;}

  /* tap targets */
  .lp-nav__link,
  .lp-menubtn,
  .lp-navpanel__link,
  .lp-navpanel__sublink,
  .lp-navpanel__legal,
  .lp-navpanel__close,
  .lp-faq__q,
  .lp-foot__social a{min-height:44px;}
  .lp-faq__q{align-items:center;}
  .lp-input,
  .lp-selectwrap select{min-height:44px;}
  .lp-check,
  .lp-radio{min-height:44px;align-items:center;}
  /* the sticky bar must never sit on the submit button */
  .lp-form__foot{padding-bottom:4.5rem;}
}

/* Sentence-case copy is not a label and does not get label sizes on a phone.
   These were 10-11px: the hero guardrail, the estimate caveat, the form's
   legal note and the field hints — all things a visitor is expected to
   actually read, and several of them are the disclaimers. */
@media (max-width:768px){
  .lp-guard,
  .lp-card__note,
  .lp-form__legal,
  .lp-fieldset__hint,
  .lp-fledger__note,
  .lp-modal__hint,
  .lp-foot__base,
  .lp-foot__statement{font-size:.75rem;line-height:1.7;}
}

/* ============================================================
   PHONE VERTICAL RHYTHM  (<=560px)

   Section padding above this width is the reference's, unchanged:
   .lp-sec clamp(3rem,8vw,4.25rem) and .lp-band clamp(4rem,7.5vw,7rem),
   which resolve to 48px and 64px on a 390px screen. That is 96-112px of
   dead band at every section boundary — a quarter of the viewport width,
   and it reads as a gap rather than as rhythm on a phone.

   The reference has no step below 900px, so this block is the one place
   the port deliberately runs tighter than it. Everything >=561px still
   matches the reference exactly.
   ============================================================ */
@media (max-width:560px){
  .lp-sec{padding-block:2.25rem;}
  .lp-band{padding-block:3rem;}
  .lp-proof{padding-block:3rem;}
  .lp-sec__head{margin-bottom:1.75rem;}
  .lp-aside--under{margin-top:1.75rem;}
  .lp-foot{padding-block:2.25rem;}
}