/* ============================================================
   Mortgage Readiness Report - the vault's first tool sales page.
   Section-by-section translation of the approved Claude Design
   prototype (project/Mortgage Readiness Report.dc.html), reusing
   css/components.css and the shared shell rules in css/page.css /
   css/vault.css / css/faq.css (.hero, .hero--sub, .section, .split,
   .split--reverse, .tick-list, .faq-layout, .accordion, .cta,
   .cta--tight) wherever the visual is identical to an existing page.

   The mock browser-chrome panels ("In action" and the live demo
   widget) are deliberately NOT built from BowerVault's own design
   tokens - they're illustrating the product embedded on a fictional
   client's site ("Harlow & Finch") to sell white-labelling, so they
   use their own literal colours/Poppins font, exactly as the DC
   source does. Everything else on the page uses real tokens as usual.

   The DC source exposes demoLayout ('Centred card' | 'Split with
   points' | 'Slate frame', defaults to 'Split with points') as a
   design-tool control. Implements that default as real markup - same
   approach as every other *Layout prop on this site. */

/* ---- Hero: sector/status tag row + stat pair ------------------------ */
/* .hero__copy's own flex gap (24px, see page.css) puts the same space
   between the tag row and the h1 as between every other pair of hero
   children - too much for a small pre-heading tag that should read as
   attached to the heading below it. Pulled up with a negative margin
   rather than touching .hero__copy's shared gap. */
.tool-hero__tags { display: flex; align-items: center; gap: 12px; margin-bottom: -16px; }
.tool-hero__sector { font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.tool-hero__status { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); }
.tool-hero__stats { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 8px; }
.tool-hero__stat { display: flex; flex-direction: column; gap: 2px; }
.tool-hero__stat-value { font-family: var(--font-heading); font-weight: 400; font-size: 26px; line-height: 1.2; color: #fff; }
.tool-hero__stat-label { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: #fff; }
/* Mirrors .hero__inner's own box exactly (100% minus .hero's left/right
   padding, capped at container-lg, centered) so its left edge lines up
   with the hero copy above it at any viewport width - .hero's padding
   alone isn't enough once the viewport is wide enough for container-lg
   to bind and .hero__inner centers with extra margin beyond that
   padding (see justify-content: center on .hero). */
.tool-hero__vat-note { position: absolute; left: 50%; transform: translateX(-50%); width: calc(100% - var(--page-padding) * 2); max-width: var(--container-lg); bottom: 10px; z-index: 1; font-family: var(--font-ui); font-size: 9pt; font-style: italic; color: #fff; }

/* ---- "In action" mock browser panels --------------------------------- */
.mock-panels { width: 100%; max-width: var(--container-lg); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
/* Header-to-content spacing convention (see page.css) - .section's own
   gap (80px) is too much between the intro copy and the panels, same
   32px target as everywhere else on the site. -48px here since the base
   being pulled from is 80px (the ≤960px override below uses -32px
   against that tier's smaller 64px base - same 32px result either way). */
.mock-panels { margin-top: -48px; }
.mock-frame { display: flex; flex-direction: column; gap: 16px; }
/* White panel on a white section, which is the one case the
   no-borders brief keeps a shadow for - the design frames these with
   a 1px border and that is what it translates to. Kept very light: a
   tight contact shadow plus a wide soft one, enough to give the
   window an edge without reading as elevation. Scoped to the white
   section so it doesn't double up if this ever lands on the canvas,
   same as .email-window and .compliance-panel. */
.mock-window { height: 520px; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; }
.section--white .mock-window { box-shadow: 0 1px 2px rgba(12, 8, 1, 0.04), 0 10px 30px rgba(12, 8, 1, 0.07); }
/* The bar's own grey is what separates it from the page below it:
   it never needed the rule underneath as well. */
.mock-window__bar { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f3f4f5; }
.mock-window__dot { width: 9px; height: 9px; border-radius: 999px; background: #d6d8da; }
.mock-window__url { margin-left: 8px; padding: 4px 12px; border-radius: 999px; background: #fff; font-family: 'Poppins', system-ui, sans-serif; font-size: 11px; line-height: 1.5; color: #6b7280; }
.mock-window__body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.mock-frame__label { display: flex; flex-direction: column; gap: 4px; }
.mock-frame__label span:first-child { font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text-primary); }
.mock-frame__label span:last-child { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }

/* ---- Follow up: callout + timeline -------------------------------------
   The design's default for this section (verified by rendering
   Mortgage Readiness Report.dc.html, not by reading its sc-if
   defaults - the runtime picks a different branch than the markup's
   hint attributes suggest, which is how an earlier build ended up
   with the wrong variant here). Copy column carries a navy callout;
   the right column is a four-step timeline of one lead's first
   eighteen hours. */
.followup-callout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
  padding: 36px 38px;
  border-radius: 16px;
  background: var(--color-pickled-bluewood);
}
.followup-callout__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: pretty;
}
.followup-callout p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); text-wrap: pretty; }
.followup-callout__action { display: flex; margin-top: 8px; }

.timeline-column { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.timeline { display: flex; flex-direction: column; }
/* Rail and content as two grid tracks, so the connecting line can
   stretch the full height of whatever the step's text comes to. */
.timeline__step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 20px; }
.timeline__rail { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.timeline__dot { width: 14px; height: 14px; margin-top: 7px; border-radius: 999px; background: var(--color-pickled-bluewood); }
.timeline__line { flex: 1; width: 1px; background: rgba(12, 8, 1, 0.15); }
/* No line past the last dot - it would trail off into the caption. */
.timeline__step:last-child .timeline__line { display: none; }
.timeline__body { display: flex; flex-direction: column; gap: 6px; padding-bottom: 32px; }
.timeline__step:last-child .timeline__body { padding-bottom: 0; }
.timeline__when { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(12, 8, 1, 0.58); }
.timeline__title { font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 1.25; color: var(--text-primary); }
.timeline__body p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--text-primary); text-wrap: pretty; }

/* ---- Local sold prices --------------------------------------------------
   The report excerpt is quoted verbatim from the product team's example
   and the figures must not be changed (see the brief in the design
   handoff). The two lines under it are not decoration either: the Land
   Registry attribution is a condition of the Open Government Licence,
   required wherever any figure from that data appears, and the guidance
   line is the compliance short form. Neither may be dropped or moved
   away from the figures. */
.soldprice { width: 100%; max-width: var(--container-lg); display: flex; flex-direction: column; gap: 48px; }
.soldprice__row { display: flex; flex-wrap: wrap; gap: 56px 80px; align-items: center; }
.soldprice__copy { flex: 1 1 420px; min-width: min(100%, 300px); max-width: 520px; display: flex; flex-direction: column; gap: 16px; }
.soldprice__copy p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--text-primary); text-wrap: pretty; }
.soldprice__art { flex: 1 1 480px; min-width: min(100%, 320px); display: flex; flex-direction: column; gap: 14px; }
.soldprice__sheet {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(12, 8, 1, 0.14);
  font-family: 'Poppins', system-ui, sans-serif;
}
.soldprice__sheet * { font-family: inherit; }
.soldprice__brand { display: flex; align-items: center; gap: 12px; padding: 18px 28px; background: #2E1F63; }
.soldprice__brand span:first-child { width: 20px; height: 20px; border-radius: 6px; background: #FF6B4A; }
.soldprice__brand span:last-child { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: #fff; }
.soldprice__body { display: flex; flex-direction: column; gap: 18px; padding: 36px 34px 30px; }
.soldprice__body h3 { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.25; color: #1B1339; text-wrap: pretty; }
.soldprice__body > p { margin: 0; font-size: 18px; line-height: 1.65; color: #4A4160; text-wrap: pretty; }
.soldprice__legal { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 1px solid #E6DFF4; }
.soldprice__legal p { margin: 0; font-size: 14px; line-height: 1.5; color: #635B7E; text-wrap: pretty; }
/* Explicit column counts per breakpoint, not auto-fit: auto-fit can land
   on a width where 3 columns fit but a 4th doesn't, leaving one card
   stranded alone on its own row rather than an even 2x2. */
.soldprice__points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.soldprice__point { display: flex; flex-direction: column; gap: 6px; padding: 26px 28px; border-radius: 12px; background: rgba(12, 8, 1, 0.024); }
.soldprice__point b { font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text-primary); text-wrap: pretty; }
.soldprice__point span { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: rgba(12, 8, 1, 0.72); text-wrap: pretty; }

/* ---- Compliance panel --------------------------------------------------
   Moved here from css/features.css when the design moved the section
   off the Features page onto this one - it is about this tool's own
   FCA position, not the app's feature set. */
.compliance-panel {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px;
  border-radius: 12px;
  background: #fff;
}
.section--white .compliance-panel { box-shadow: 0 24px 60px rgba(12, 8, 1, 0.12); }
.compliance-label { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.compliance-consent { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 8px; background: var(--surface-canvas); }
.compliance-consent__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--color-pickled-bluewood);
  color: #fff;
  flex: 0 0 auto;
}
.compliance-consent__tick .icon { width: 13px; height: 13px; stroke-width: 3; }
.compliance-consent p { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--text-primary); }
.compliance-block { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(12, 8, 1, 0.15); }
.compliance-block p { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--text-primary); }
.compliance-block__note { font-family: var(--font-ui); font-size: 12px; color: var(--text-secondary); }
.compliance-pass { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 8px; background: var(--status-success-surface); }
.compliance-pass__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--status-success); flex: 0 0 auto; }
.compliance-pass span:last-child { font-family: var(--font-ui); font-size: 13px; color: var(--color-mountain-meadow-darker); }
.compliance-refs { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--text-secondary); }

/* ---- The return: ROI table --------------------------------------------
   Rows separated by single rules, which is what a table is allowed.
   The caveat block beside it is not decoration: the figures are
   explicitly unverified industry ranges, so the disclaimer travels
   with them rather than sitting in small print at the bottom. */
/* Both the aside callout and the table's header row were a 5% dark
   wash (var(--opacity-neutral-darkest-5)) - reported as reading
   anaemic, flattened against the white table/canvas section around
   them. Brand navy instead, same as the rest of the site's "state is a
   background" convention, with their own text/bar flipped to white to
   stay readable on it. */
.roi-aside { display: flex; gap: 16px; margin-top: 8px; padding: 24px 28px; border-radius: 12px; background: var(--button-primary-bg); }
.roi-aside__bar { flex: 0 0 3px; align-self: stretch; border-radius: 999px; background: #fff; }
.roi-aside p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: #fff; text-wrap: pretty; }
.roi-panel { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.roi-panel__title { font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text-primary); }
/* White on a white section, so it takes the design's own 1px-deep
   shadow rather than nothing - same white-on-white exception as the
   mock windows and the email. The navy header row below already gives
   the table's top edge a clean break from the canvas section behind
   it, but the shadow stays for the same lifted-card feel every other
   white-on-white surface on the site gets. */
.roi-table { overflow-x: auto; border-radius: 12px; background: var(--surface-card); box-shadow: 0 1px 3px rgba(12, 8, 1, 0.08); }
/* Centred both ways, every row - reported as messy with the previous
   left/baseline alignment, most visible on the header's own two-line
   "Clients from the tool a year" label sitting off-baseline against
   its single-line neighbours.
   justify-items: stretch (the grid default), not center - center
   relies on the browser shrink-wrapping each cell to its own content's
   intrinsic width before centering that smaller box in the track, and
   reported live, that was landing noticeably off to one side with
   consistently more space on one edge than the other (confirmed: the
   shrink-wrapped box itself was sized and positioned correctly for
   plain text, but every cell here using text-transform: uppercase
   measures its shrink-to-fit width against the source text before the
   transform renders it, so the box came out narrower than the
   uppercase glyphs actually drawn inside it - this is a known class of
   browser quirk with intrinsic sizing plus text-transform, not
   something specific to this table). Stretching each cell to the full
   column width sidesteps that shrink-to-fit measurement step
   entirely - text-align: center then centres the rendered glyphs
   within a box whose width is just the column's own track width,
   unaffected by any transform. */
.roi-row { display: grid; grid-template-columns: 0.9fr 1.3fr 0.9fr; gap: 16px; align-items: center; justify-items: stretch; padding: 20px 20px; border-top: 1px solid rgba(12, 8, 1, 0.08); text-align: center; }
.roi-row--head { padding: 16px 20px; border-top: 0; background: var(--button-primary-bg); }
.roi-row--head span { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
/* Faint column dividers across the header only - the data rows below
   already separate themselves from each other with .roi-row's own
   border-top, so a second divider system there would be redundant.
   A pseudo-element positioned in the row's own 16px gap, not a
   border+padding on the span itself - that first attempt widened the
   span's own box on one side only, which shifted where justify-items:
   center centred its text and threw the header text out of line with
   the data cells below it (reported live, looked "wonky"). This way
   the divider is purely visual and never touches the text's own box. */
/* height:40px, not a tight fit to one line of text: "Return on your
   £348" wraps to 2 lines at the table's real rendered width (36px tall)
   while "Profit generated" stays on 1 (18px) - both dividers still
   centre on the same point either way (each span's own 50% lands on
   the row's shared align-items: center line regardless of how many
   lines it wraps to), but a divider only as tall as one line of text
   read as oddly short and off-centre-looking next to the two-line
   column specifically, even though the maths checked out. Generously
   taller instead, so it reads as one clean column rule no matter which
   columns happen to wrap at a given width - 40px clears the row's own
   bounds (68px total, including the 16px top/bottom padding) by 14px
   on both sides at the tallest the header actually gets. */
.roi-row--head span:not(:first-child) { position: relative; }
.roi-row--head span:not(:first-child)::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: var(--opacity-white-20);
}
.roi-row__clients { display: flex; align-items: baseline; justify-content: center; gap: 10px; font-family: var(--font-body); font-size: 18px; font-weight: 600; color: var(--text-primary); }
.roi-row__clients small { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text-secondary); }
.roi-row:not(.roi-row--head) span:not(.roi-row__clients) { font-family: var(--font-body); font-size: 16px; color: var(--text-primary); }
.roi-note { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: rgba(12, 8, 1, 0.58); text-wrap: pretty; }

/* ---- Customisation: 2x2 ruled feature grid ---------------------------- */
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin-top: 8px; }
.spec-grid__item { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: var(--border-width) solid var(--border-default); }
.spec-grid__item span:first-child { font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text-primary); }
.spec-grid__item span:last-child { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }

/* ---- Live demo: split, copy left and the tool right --------------------
   0.8fr / 1.2fr, straight off the rendered design. An earlier build
   stacked this on the assumption that demoCard was the default
   branch; rendering the file shows demoSplit is what the runtime
   actually picks. */
.demo-layout { width: 100%; max-width: var(--container-lg); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.demo-layout__intro { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* .demo-embed itself now lives in components.css - a second page
   (mortgage-broker-demo.html) needed it, same reason the email/PDF
   mocks moved there (see CLAUDE.md's Features section). */


/* ---- Testimonials ------------------------------------------------------ */
.testimonial-grid { width: 100%; max-width: var(--container-lg); display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 680px)); justify-content: center; gap: 32px; }
/* Header-to-content spacing convention (see page.css) - .section's own
   gap (80px) is too much between the header and the first card, same
   32px target as everywhere else on the site. -48px here since the base
   being pulled from is 80px (the ≤960px override below uses -32px
   against that tier's smaller 64px base - same 32px result either way). */
.testimonial-grid {
  margin-top: -48px;
}
.testimonial-card { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px; border-radius: 16px; background: var(--card-bg); text-align: center; transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard); }
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(12, 8, 1, 0.1); }
.testimonial-card blockquote { margin: 0; font-family: var(--font-ui); font-size: 20px; line-height: 1.45; color: var(--text-primary); text-wrap: pretty; }
.testimonial-card figcaption { display: flex; flex-direction: column; gap: 2px; }
.testimonial-card figcaption span:first-child { font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text-primary); }
.testimonial-card figcaption span:last-child { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; color: var(--text-secondary); }

/* ---- Final CTA: centered, no card ------------------------------------- */
.tool-final-cta { max-width: 820px; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.tool-final-cta h2 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-on-dark); text-wrap: pretty; }
.tool-final-cta p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: #fff; text-wrap: pretty; }
.tool-final-cta__vat-note { margin-top: 4px; font-family: var(--font-ui); font-size: 9pt; font-style: italic; color: #fff; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  .mock-panels { grid-template-columns: 1fr; }
  /* .split itself stacks in page.css's own 960 block; these just stop
     reserving a 480px basis that the column no longer has. */
  .timeline-column,
  .roi-panel,
  .compliance-panel { flex: 1 1 auto; }
  .demo-layout { grid-template-columns: 1fr; gap: 32px; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
  .soldprice__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tablet+mobile spacing convention (see page.css's own ≤960px block):
     .section's gap is 64px here (no inline override on either section),
     too much between the header and the first card, same as Home's
     card-grid sections. */
  .testimonial-grid,
  .mock-panels {
    margin-top: -32px;
  }
  /* .hero--sub's min-height collapses to auto below 960px (vault.css),
     so there's no longer spare vertical space to bottom-anchor into:
     back to normal flow, right under the stats row. It's a sibling of
     .hero__inner now (not nested inside .hero__content, needed so the
     absolute-position version above can anchor to .hero's full height),
     so .hero's own row layout needs to wrap it onto its own full-width
     line rather than squeezing it beside .hero__inner. :has() scopes
     this to just this page's hero, not every .hero sitewide. */
  .hero:has(.tool-hero__vat-note) { flex-wrap: wrap; }
  .tool-hero__vat-note { position: static; display: block; width: 100%; max-width: none; transform: none; padding-top: 20px; }
}
@media (max-width: 640px) {
  .tool-hero__stats { gap: 16px; }
  .tool-final-cta h2 { font-size: 30px; }
  .soldprice__points { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .followup-callout { padding: 26px 24px; }
  .followup-callout__title { font-size: 24px; }
  .timeline__step { grid-template-columns: 22px minmax(0, 1fr); gap: 14px; }
  .timeline__title { font-size: 21px; }
  .compliance-panel { padding: 22px; }
}