/* ============================================================
   BidConvey — "Fair Ledger" theme
   Ports the palette, type and layout rhythm of the React app onto
   the existing static pages. Loaded AFTER each page's inline
   <style>, so equal-specificity rules here win on source order.

   Content and markup are untouched — this file only restyles.
   ============================================================ */

/* ---------- 1. Tokens ------------------------------------------------
   The page CSS references these ~190 times, so remapping the values
   (while keeping the names) does most of the recolouring for free. */
:root {
  /* warm paper base, replacing the cool #F6F8FC/#FFF pairing */
  --paper:       #F5F3EE;
  --paper-2:     #ECE8DF;
  --white:       #FFFFFF;   /* now the raised "surface", not the base */
  --off-white:   #ECE8DF;   /* alternating section band */

  /* deep navy ink */
  --navy:        #33415A;
  --navy-dark:   #0E1726;
  --navy-mid:    #33415A;
  --navy-light:  #5E6A7E;
  --text-main:   #0E1726;
  --text-muted:  #5E6A7E;

  /* confident royal blue for anything interactive */
  --accent:       #1E4FD0;
  --accent-hover: #163B9E;
  --brand-soft:   rgba(30, 79, 208, .09);

  /* warm gold, replacing the orange #F5A623 */
  --gold:      #BE8A3D;
  --gold-deep: #9E7128;

  --border:    rgba(14, 23, 38, .13);
  --line-soft: rgba(14, 23, 38, .07);

  /* flatter, more editorial than the old 12/20px */
  --radius:    8px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(14, 23, 38, .10);
  --shadow-md: 0 10px 30px rgba(14, 23, 38, .10);
  --shadow-lg: 0 24px 70px rgba(14, 23, 38, .14);

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

  --wrap:       1200px;
  --gutter:     clamp(1.25rem, 5vw, 3.5rem);
  /* Roomier than the original 56px, but short of the React app's 136px:
     these pages carry far more content per section than the 3-page app. */
  --sp-section: clamp(2.5rem, 4.5vw, 4.5rem);

  /* The React hero is full-bleed with the headline as its only element, so it
     can afford 5.1rem. This hero is a two-column grid beside a photo. */
  --step-hero: clamp(2.2rem, 4.6vw, 3.75rem);
  --step-h2:   clamp(2rem, 4.1vw, 3.35rem);
  --step-h3:   clamp(1.35rem, 2.1vw, 1.85rem);
  --step-lead: clamp(1.12rem, 1.55vw, 1.4rem);
}

/* ---------- 2. Base -------------------------------------------------- */
body {
  background: var(--paper);
  color: var(--text-main);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-feature-settings: "ss01", "cv05";
  text-rendering: optimizeLegibility;
}

/* ---------- 3. Typography -------------------------------------------
   The React app's signature is a thin display face with tight
   negative tracking, in place of the old 700/800 weights. */
h1, h2, h3 {
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.06;
  color: var(--navy-dark);
}
h4, h5, h6 { font-weight: 500; letter-spacing: -.015em; }

.hero h1 {
  font-size: var(--step-hero);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.02;
  margin-bottom: 1.4rem;
}
/* keep the original tonal emphasis rather than introducing a loud accent */
.hero h1 span { font-weight: 300; color: var(--navy); }

.hero-sub,
.section-sub,
.lead {
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--navy);
  max-width: 60ch;
}

/* section headings */
.cta-box h2, .faq-head h2, .contact-card h2,
.hiw-head h2, .about-head h2, .bene-head h2, .myth-head h2 {
  font-size: var(--step-h2);
  font-weight: 300;
  letter-spacing: -.03em;
}
.about-side-card h3, .explainer-block > h3,
.principle-conclusion h3 {
  font-size: var(--step-h3);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
}

strong, b { font-weight: 600; }

/* ---------- 4. Layout rhythm ----------------------------------------
   Roomier, editorial spacing to match the React sections. */
.container { max-width: var(--wrap); padding-inline: var(--gutter); }
section    { padding-block: var(--sp-section); }
/* Top padding clears the fixed 78px bar. The bottom must also clear the
   absolutely-positioned stat strip (~82px tall plus its offset), or the CTA
   buttons run underneath it. */
.hero      { padding: clamp(5rem, 5.5vw, 6rem) 0 var(--sp-section); }
/* Only heroes that actually carry the stat strip need room reserved for it.
   why.html and agents.html have none, and were left with a large empty band. */
.hero:has(.hero-photo-badge) { padding-bottom: clamp(8.5rem, 10vw, 10rem); }

/* alternating bands pick up the warm paper-2 tone */
.principle-section,
.cta-section { background: var(--paper-2); }
/* The closing CTA card reads as beige-on-beige because the page asks for
   --off-white, which this theme remaps to the same tone as the band behind
   it. White lifts the card off the band. */
.cta-box { background: var(--white); }

/* The "Trusted by Every Participant" band on index.html was --off-white, the
   same tone the principle card asks for, so the card vanished into it. Flip
   the relationship: white band, sandy card. Scoped to #trusted — the other
   .explainer sections (why.html, conveyancers.html) keep their beige band. */
#trusted { background: var(--white); }
.myth-principle { background: var(--paper-2); }

/* ---------- 4b. Full-bleed hero --------------------------------------
   Promote the hero photo from a column beside the copy to the hero's own
   background, as in the React app. The <img> stays in the DOM (keeping its
   alt text) and is simply stretched behind the copy — no markup change.
   why.html has no .hero at all, so none of this reaches it. */
.hero {
  position: relative;
  background: var(--navy-dark);
  border-bottom: 0;
  display: flex;
  align-items: center;
  min-height: clamp(24rem, 60vh, 36rem);
}
/* Background decoration (waves, concentric circles, dot grids, plus-signs and
   diagonal hatching) is removed site-wide — see section 9. Keeping the rule
   here too because .hero is now a flex container, where a stray child would
   otherwise become a flex item. */
.hero .decor { display: none; }

/* .container and .hero-grid ship as position:relative, which would make the
   photo layer resolve inset:0 against the grid cell instead of the hero.
   Neutralising them lets the photo fill the whole section. */
.hero > .container { position: static; width: 100%; }
.hero .hero-grid   { position: static; grid-template-columns: 1fr; gap: 0; }

.hero-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* the mobile rules hide this; as a background it must stay visible or the
     reversed copy below would sit on nothing */
  display: block;
}
.hero-photo-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  animation: none;          /* heroFadeUp would offset a full-bleed layer */
}
.hero-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
/* Scrim lives inside the photo layer — above the image, below the stat strip.
   Putting it on .hero::before instead would make it a flex item. */
.hero-photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* holds density further right than before, so the widened copy column
     stays legible instead of trailing off into the bright part of the photo */
  background: linear-gradient(100deg,
    rgba(10, 17, 32, .94) 0%,
    rgba(10, 17, 32, .88) 40%,
    rgba(10, 17, 32, .60) 68%,
    rgba(10, 17, 32, .42) 100%);
}

/* copy rides above the photo layer */
.hero-grid > div:first-child { position: relative; z-index: 3; max-width: 42rem; }

.hero h1 { color: #fff; }
.hero h1 span { color: var(--gold); }
.hero-sub { color: rgba(255, 255, 255, .84); }

/* The hero now carries the full landing-page copy — a lede plus three
   titled sections — rather than a single supporting sentence. */
.hero-lede {
  font-size: clamp(1.18rem, 1.7vw, 1.5rem);
  font-weight: 500;
  color: #fff;
  margin-bottom: 1.9rem;
}
.hero-copy { color: rgba(255, 255, 255, .82); }
.hero-copy h2 {
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--gold);
  margin: 1.7rem 0 .55rem;
}
.hero-copy h2:first-child { margin-top: 0; }
.hero-copy p { margin-bottom: .8rem; line-height: 1.62; }
.hero-copy p:last-child { margin-bottom: 0; }
.hero-copy + .hero-actions { margin-top: 2rem; }
/* The body copy runs at 82% white; emphasis lifts back to full white rather
   than adding weight alone, which barely registers over the photo scrim. */
.hero-copy strong { color: #fff; font-weight: 600; }
/* "It's simple: 1, 2, 3" under the clause heading. Numerals in gold, matching
   the section headings; each <li>'s text is wrapped in a <span> because every
   child of a grid container — including bare text nodes — becomes its own
   grid item. */
.hero-steps {
  list-style: none;
  counter-reset: hero-step;
  margin: .1rem 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.hero-steps li {
  counter-increment: hero-step;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .6rem;
  align-items: baseline;
  line-height: 1.62;
}
.hero-steps li::before {
  content: counter(hero-step) ".";
  color: var(--gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* The clause CTA is a <button> (it opens a dialog, it does not navigate) while
   every other .btn-* is an <a>. Buttons do not inherit the page font. */
button.btn-primary, button.btn-ghost { font-family: inherit; }
.hero-eyebrow { color: var(--gold); }
.hero-eyebrow::before { background: var(--gold); opacity: 1; }

/* the stat strip aligns to the container rather than the raw image edges,
   and sits above the scrim inside the photo layer */
.hero-photo-badge {
  z-index: 2;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--gutter)), var(--wrap));
  bottom: clamp(1rem, 1.8vw, 1.5rem);
  padding: clamp(.75rem, 2.2vw, 1rem) clamp(.75rem, 2.5vw, 1.25rem);
  gap: clamp(.4rem, 1.5vw, .5rem);
}
/* The stats ship with white-space:nowrap on both the value and the label, so
   on a phone the third column runs outside the card instead of wrapping.
   Let each column shrink below its content width and wrap normally. */
.hpb-stat {
  flex: 1 1 0;
  min-width: 0;
}
.hpb-stat-value,
.hpb-stat-label { white-space: normal; }
.hpb-stat-value { font-size: clamp(.8rem, 2.4vw, 1rem); line-height: 1.25; }
.hpb-stat-label { font-size: clamp(.6rem, 1.8vw, .7rem); line-height: 1.3; }

/* ---------- 5. Header / nav -----------------------------------------
   React uses a single-row bar; the markup here is two stacked divs,
   so lay them out side by side from the tablet breakpoint up. */
nav[role="navigation"] {
  background: rgba(245, 243, 238, .82);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.nav-top { border-bottom: 0; padding-block: 0; }
.nav-menu { border-bottom: 0; }

/* the burger takes over at max-width:900px, so start at 901 to avoid both
   rule sets applying at exactly 900px */
@media (min-width: 901px) {
  nav[role="navigation"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 78px;
    /* Full-bleed bar with its contents aligned to the container. Constraining
       the <nav> itself would stop the background at the container edges,
       which reads as a floating slab over the dark hero. */
    padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  }
  .nav-top  { justify-content: flex-start; padding: 0; margin: 0; max-width: none; }
  .nav-menu { padding: 0; gap: 2rem; }
}

/* transparent artwork, so no blending needed — just override the inline
   height:64px so the lockup sits comfortably in the 78px bar */
.nav-logo img { height: 52px !important; width: auto; }

/* Colour only — safe at every width. The mobile drawer keeps the original
   full-width padded tap targets, so nothing here may touch its box model. */
.nav-link { color: var(--navy); font-weight: 500; transition: color .25s var(--ease); }
.nav-link:hover  { background: none; color: var(--navy-dark); }
.nav-link.active { background: none; color: var(--navy-dark); font-weight: 500; }

/* The sliding underline only makes sense on the desktop single-row bar. */
@media (min-width: 901px) {
  .nav-link {
    position: relative;
    font-size: .95rem;
    border-radius: 0;
    padding: .4rem 0;
  }
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: 0;
    height: 1.5px;
    background: var(--accent);
    transition: right .3s var(--ease);
  }
  .nav-link:hover::after,
  .nav-link.active::after { right: 0; }
}

/* ---------- 5b. Nav submenus ----------------------------------------
   Buyers, Sellers and Conveyancers each gain one child: the matching portal.
   The parent link still navigates to its own page, so this is a disclosure
   rather than a menu widget — :hover for pointers, :focus-within so it also
   opens on Tab, and no JS. The caret is the only affordance that a child
   exists, so it stays visible rather than appearing on hover. */
.nav-item { position: relative; }
.nav-caret {
  display: inline-block;
  margin-left: 4px;
  fill: currentColor;
  opacity: .5;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { opacity: 1; }

@media (min-width: 901px) {
  .nav-sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    /* The bar is 78px tall with the link centred in it, so `top: 100%` lands
       partway up the bar rather than at its edge. The padding is transparent
       and belongs to the panel, so it doubles as a hover bridge — without it
       the submenu closes the instant the pointer leaves the link. Measured:
       `top: 100%` lands at y≈53 and the bar ends at 78, so 33px drops the
       panel 8px clear of the bar. */
    padding-top: 33px;
    min-width: max(100%, 180px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s var(--ease), visibility .2s var(--ease);
  }
  .nav-item:hover .nav-sub,
  .nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; }
  .nav-item:hover .nav-caret,
  .nav-item:focus-within .nav-caret { transform: rotate(180deg); }
  .nav-sub-link {
    display: block;
    padding: .7rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-md);
    color: var(--navy);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    transition: background .2s var(--ease), color .2s var(--ease);
  }
  .nav-sub-link:hover { background: var(--paper-2); color: var(--navy-dark); }
}

/* In the burger drawer there is no pointer to hover with and no room for a
   floating panel, so the child simply sits under its parent, indented. */
@media (max-width: 900px) {
  .nav-caret { display: none; }
  .nav-sub-link {
    display: block;
    padding: 10px 14px 10px 30px;
    border-radius: 8px;
    color: var(--navy);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
  }
  .nav-sub-link:hover { background: var(--off-white); }
}

/* ---------- 6. Buttons and links ------------------------------------ */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  padding: .95rem 1.7rem;
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: .01em;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(30, 79, 208, .28);
}
.btn-ghost,
.btn-secondary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  border-radius: var(--radius);
  padding: .95rem 1.7rem;
  font-size: .94rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--navy-dark);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-ghost:hover,
.btn-secondary:hover,
.btn-outline:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---------- 7. Eyebrow labels ---------------------------------------
   React precedes these with a short gold rule. */
.section-label,
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.4rem;
  /* the eyebrow ships as a pill; React's is bare text preceded by a rule */
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
/* No leading rule or dot before eyebrows — the label stands on its own. */
.section-label::before,
.hero-eyebrow::before { content: none; }
.hero-eyebrow .dot { display: none; }

/* ---------- 7b. "How it works" — number beside the heading -----------
   The detail cards stacked the label under the number; put them on one
   line ("1 Agree") instead.

   The stepper above them used to get the same treatment, but it is now left
   as the page authors it: label under the circle, dotted connector between
   circles — the layout phones were already falling back to below 780px, and
   the one that reads as a sequence. No override here on purpose. */

/* detail cards: badge and heading on row 1, copy spanning row 2 */
.hiw-step {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .65rem;
  row-gap: .5rem;
  align-items: center;
  /* The five cards are stretched to a common height by the outer grid, and
     align-content then defaults to stretch — the spare height is shared out
     between each card's own rows. Cards with more or taller rows absorb it
     differently, which is why the headings sat at five different heights and
     the gap under them varied per card. Packing the rows to the top pins every
     heading to the same line and makes the heading-to-copy gap exactly the
     row-gap everywhere. */
  align-content: start;
  /* Row 3 holds the pill (clause opener, or a portal link) on the three cards
     that have one. Giving it 1fr hands it the slack that align-content: start
     would otherwise leave dangling below, so `align-self: end` on the pill can
     pin it to the card floor — the copy above runs to different lengths, and
     without this the three pills sit at three different heights. Cards 4 and 5
     have no row 3; the empty fr row just absorbs the same slack. */
  grid-template-rows: auto auto 1fr;
}
.hiw-step .num { grid-area: 1 / 1; margin-bottom: 0; }
.hiw-step h3   { grid-area: 1 / 2; margin-bottom: 0; }
.hiw-step p    { grid-area: 2 / 1 / 3 / 3; }

/* ---------- 8. Surfaces and cards ------------------------------------ */
.about-side-card, .bene-card, .contact-card, .cta-box,
.faq-item, .vision-box, .hiw-step, .hero-photo-badge {
  border-radius: var(--radius-lg);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
/* "Everyone benefits" cards — centre the icon, heading, copy and link.
   The card is already a flex column, so align-items handles the icon and
   link (both shrink-to-fit) and text-align handles the heading and copy. */
.bene-card { align-items: center; text-align: center; }
/* On phones the grid has no breakpoint of its own and stays two-up, which
   squeezes each card to ~140px and shatters the headings ("For Estate
   Agents" over three lines). One per row, read left-aligned. */
@media (max-width: 700px) {
  .bene-grid { grid-template-columns: 1fr; }
  .bene-card { align-items: flex-start; text-align: left; }
}

.myth-badge, .modal-badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ---------- 8b. FAQ / Myths: one dropdown per list -------------------
   The whole list now sits inside a single <details>; the items themselves
   are no longer individually collapsible. */
.faq-single {
  max-width: 820px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-single > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy-dark);
  -webkit-user-select: none;
  user-select: none;
  transition: background var(--transition);
}
.faq-single > summary::-webkit-details-marker { display: none; }
.faq-single > summary:hover { background: var(--paper-2); }
.faq-single > summary::after {           /* chevron, rotates when open */
  content: "";
  flex: 0 0 auto;
  width: .55rem;
  height: .55rem;
  margin-right: .2rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.faq-single[open] > summary::after { transform: rotate(-135deg); }
.faq-single-body { padding: 0 1.4rem 1.1rem; }

/* items lose their own card chrome and sit as a divided list */
.faq-single .faq-item {
  background: none;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.faq-single .faq-item:first-child { border-top: 0; }
.faq-single .faq-q { cursor: default; padding-bottom: .35rem; }
/* the page script still binds to .faq-q and would set an inline max-height,
   so this has to outrank an inline style */
.faq-single .faq-a {
  max-height: none !important;
  overflow: visible !important;
}
.faq-single .faq-a-inner { padding-bottom: 1.1rem; }

/* ---------- 9. Decorative SVG ----------------------------------------
   Every page carries 5-6 <svg class="decor"> backgrounds — waves, concentric
   circles, dot grids, plus-signs and diagonal hatching. Remove them all.
   This is scoped to .decor only: functional UI marks such as
   .principle-check and .fact-label::before are untouched. */
.decor { display: none !important; }

/* ---------- 9b. The BidConvey clause modal ---------------------------
   Opened from the "Agree" step on index.html and from a button under
   "How do I start the process?" on buyers.html. Defined once here; the
   pages carry no inline rules for it.

   The clause is rendered as text rather than an embedded PDF viewer,
   because the point of it is to be copy-pasted into an Offer to Purchase.
   Copy clause is the only action in the dialog.

   A native <dialog> rather than a hand-rolled overlay: the top layer, the
   backdrop, Esc-to-close and focus trapping all come for free and behave
   correctly, which a div-with-z-index does not. */
.clause-modal {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  margin: auto;
  padding: 32px;
  background: var(--white);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 90px rgba(10, 22, 38, .38);
  text-align: left;
  /* No `position` here. The UA stylesheet gives dialog:modal
     `position: fixed; inset: 0`, and that plus `margin: auto` is what centres
     it; setting `position: relative` drops it back into normal flow, where it
     lands wherever the element sits in the document. The absolutely
     positioned close button still anchors to the dialog either way. */
}
.clause-modal::backdrop {
  background: rgba(10, 16, 34, .58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.clause-modal[open] { animation: clause-in .22s ease-out; }
.clause-modal[open]::backdrop { animation: clause-fade .22s ease-out; }
@keyframes clause-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes clause-fade { from { opacity: 0; } to { opacity: 1; } }

.clause-modal .section-label { display: block; margin: 0 0 12px; padding-right: 40px; }

/* Close control, tucked into the top-right corner of the dialog. */
.clause-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.clause-close:hover { background: var(--paper-2); color: var(--navy-dark); }
.clause-close svg { width: 15px; height: 15px; fill: currentColor; }

/* The trigger on buyers.html, where there is no step card to hang off.
   .portal-link — the CTA out to buyer/seller/conveyancer.bidconvey.com — is
   listed alongside it everywhere below rather than given its own look: the two
   sit side by side in the "how it works" cards, so any divergence in size,
   padding or weight would read as a mistake. .clause-open is a <button> (it
   opens a dialog), .portal-link is an <a> (it navigates); that is the only
   difference between them. */
.clause-open,
.portal-link {
  display: inline-flex;
  align-items: center;
  /* Below 600px .hero-actions turns into a column and stretches its children,
     so the pill goes full width and the label was left-aligned against the
     flex default. The page CSS already centres .btn-primary/.btn-ghost there;
     centring here does the same for the pills and is a no-op at the widths
     where they shrink to fit. */
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  padding: 12px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy-dark);
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  /* no-op on the <button>, needed on the <a> */
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.clause-open:hover,
.portal-link:hover { background: var(--paper-2); border-color: var(--navy-mid); }
/* In the hero the pill is one of two buttons in a flex row, so it drops the
   stacked-under-copy top margin and takes .btn-ghost's metrics — the pair then
   sit at the same height and read as siblings. */
.hero-actions .clause-open,
.hero-actions .portal-link {
  margin-top: 0;
  padding: .95rem 1.7rem;
  font-size: .94rem;
}
/* Below 600px the pill is full width, and "See the BidConvey clause" is long
   enough to wrap on the narrowest viewports. Fluid rather than a step at a
   breakpoint, and derived rather than guessed:

     label width  = 12.645px per 1px of font-size (measured at weight 700 Inter)
     button width = 100vw - 40px  (2 x 20px --gutter at these widths)
     fixed chrome = 54.4px padding + 8px gap + 14px chevron = 76.4px

   so the largest font that still fits on one line is
     (100vw - 116.4) / 12.645  =  7.9vw - 9.2px
   and the -10.5px used here is that with a little slack, so a desktop window
   narrowed to this range — where a scrollbar eats ~15px the vw unit still
   counts — does not wrap either. Capped at the .94rem above, so this only
   ever takes effect below ~340px. Applied to .portal-link and the hero's two
   .btn-ghost as well: their labels are short and never need it, but all three
   buttons stack in one column here and reading at two different sizes looks
   like a bug, not a fit. Same reason the ghosts were matched to the pill's
   weight and radius above. */
@media (max-width: 600px) {
  .hero-actions .clause-open,
  .hero-actions .portal-link,
  .hero-actions .btn-ghost {
    font-size: clamp(.75rem, 7.9vw - 10.5px, .94rem);
  }
}
/* Three buttons now sit in that row and .btn-ghost ships at weight 500 against
   the pill's 700 — same face, same size, visibly different weight. Matching the
   ghosts up rather than the pill down keeps the clause button identical to its
   twins on buyers.html and in the "Agree" card. Scoped to the hero so the
   ghost buttons on the other pages are untouched. */
.hero-actions .btn-ghost {
  font-weight: 700;
  /* "For Buyers" / "For Sellers" shipped at --radius (8px) while the clause
     pill beside them is fully rounded, so the three read as two different
     kinds of control. Match them to the pill. These are the only two
     .btn-ghost on the site, but the rule stays hero-scoped like the weight
     above it so a ghost button added elsewhere keeps the flatter corner. */
  border-radius: 999px;
}
.clause-open svg,
.portal-link svg { width: 14px; height: 14px; fill: currentColor; flex: none; }

.clause-intro {
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.7;
  margin-bottom: 18px;
}
/* Numbered instructions. Counter rather than <ol> markers so the numerals
   can be badges matching the step cards above. */
.clause-steps {
  list-style: none;
  counter-reset: clause;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.clause-steps li {
  counter-increment: clause;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--navy-dark);
}
.clause-steps li::before {
  content: counter(clause);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--navy-dark);
  color: var(--white);
  font-size: .8rem;
  font-weight: 800;
}
/* The clause itself — a navy slab so it reads as the thing you lift out,
   distinct from the instructions telling you where to put it. */
.clause-text {
  background: #1A2040;
  color: #EAEEF5;
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 0 0 16px;
  font-size: 1.02rem;
  line-height: 1.75;
  font-style: italic;
}
.clause-text p { margin: 0; color: inherit; }
.clause-text .clause-url { font-style: normal; font-weight: 600; color: var(--accent); }
.clause-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.clause-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}
.clause-copy:hover { background: var(--navy-dark); }
.clause-copy svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.clause-copy.copied { background: #1F7A4D; }
.clause-hint { font-size: .82rem; color: var(--text-muted); }

@media (max-width: 560px) {
  .clause-modal { padding: 26px 20px; }
  .clause-text { padding: 18px 18px; font-size: .96rem; }
}
@media (prefers-reduced-motion: reduce) {
  .clause-copy, .clause-close, .clause-open, .portal-link { transition: none; }
  .nav-caret, .nav-sub { transition: none; }
  .clause-modal[open], .clause-modal[open]::backdrop { animation: none; }
}

/* The same opener sits in the "Agree" step card, one of five in a ~193px
   column — far too narrow for the pill at its default size. Scoped down here
   rather than given a separate look: one control, one appearance, sitting on
   its own row of the card's grid (badge/heading on row 1, copy on row 2).
   The label wraps to two lines at this width, so the pill is stretched to the
   card and its content centred, which reads as deliberate where a ragged
   shrink-to-fit box would not. */
.hiw-step .clause-open,
.hiw-step .portal-link {
  grid-area: 3 / 1 / 4 / 3;
  align-self: end;
  /* block, not inline-flex: as a flex row the chevron reserves its own column,
     which costs width the label cannot spare here. */
  display: block;
  white-space: nowrap;
  text-align: center;
  /* The label needs 176px on one line at this size; the card's content box is
     152px. The negative inline margin spends 15 of the card's 20px of padding
     so the pill sits 5px inside the card edge instead of wrapping. Tightened
     tracking buys the last few pixels — at 12px the label is small but still
     the smallest type on the card by only a hair. */
  margin: 16px -15px 0;
  padding: 9px 8px;
  font-size: .75rem;
  letter-spacing: -.03em;
  line-height: 1.4;
}
.hiw-step .clause-open svg,
.hiw-step .portal-link svg {
  display: inline;
  width: 9px;
  height: 9px;
  margin-left: 4px;
  vertical-align: -1px;
}
/* The 2- and 1-column breakpoints give the card plenty of room; drop the
   breakout and let the pill size to its label again. */
@media (max-width: 1000px) {
  .hiw-step .clause-open,
  .hiw-step .portal-link {
    width: fit-content;
    margin: 16px 0 0;
    padding: 10px 18px;
    font-size: .82rem;
    letter-spacing: normal;
  }
  .hiw-step .clause-open svg,
  .hiw-step .portal-link svg { width: 11px; height: 11px; margin-left: 6px; }
}

/* ---------- 10. Footer ----------------------------------------------
   A deep navy slab rather than a light band. #1A2040 is the original
   site's --navy-dark, restored in place of the near-black #0A1120. */
footer {
  background: #1A2040;
  border-top: 0;
  color: #EAEEF5;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer-logo-text { color: #fff; font-weight: 500; }
.footer-tagline,
.footer-bottom { color: #94A2BA; }
footer a { color: #EAEEF5; }
footer a:hover { color: #fff; }
/* The lockup is transparent flat navy, so a straight reverse to white works —
   transparent pixels stay transparent, no blend-mode workaround needed. */
.footer-logo img,
.footer-logo svg { filter: brightness(0) invert(1); }
.footer-logo img { height: 132px !important; width: auto; }

/* Contact and social live only here — the pages carry no inline rules for
   them, so there is nothing to override and nothing duplicated seven times.
   .footer-inner is already a centred flex column with a 24px gap, so each
   block only has to lay out its own contents. */
.footer-contact { text-align: center; }
.footer-contact-lead {
  color: #94A2BA;
  font-size: .85rem;
  margin-bottom: 14px;
}
.footer-contact-links,
.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
/* A list, not a <nav> — every page declares a bare `nav { position: fixed }`
   for the header, so a second <nav> anywhere pins itself to the viewport. */
.footer-social {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Both rows are the same pill: translucent white on the navy slab, so they
   lift without introducing a second colour. */
.footer-contact-link,
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #EAEEF5;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-contact-link:hover,
.footer-social a:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.footer-contact-link {
  gap: 9px;
  padding: 9px 17px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
}
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.footer-social a:hover { transform: translateY(-2px); }
.footer-contact-link svg,
.footer-social svg { fill: currentColor; flex: none; }
.footer-contact-link svg { width: 16px; height: 16px; }
.footer-social svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .footer-social a:hover { transform: none; }
}

/* ---------- 11. Focus ------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}