/* Buy To Sell Property — the whole site's stylesheet.
 *
 * The approved design canvases were fixed-width 1440px artboards with every
 * rule written inline. This file is the same design, expressed once, so that
 * it also reads properly on a 390px phone (the Mobile artboard is the guide
 * for the hero) and so that seven pages cannot drift apart.
 *
 * COLOUR RULE, from the logo canvas: green is ONLY ever a button or a positive
 * figure. Blue is brand, links and structure. Nothing else is green.
 */

:root {
  --navy:       #0a3a53;   /* the ground the site sits on            */
  --navy-deep:  #062736;   /* header, relief bands                   */
  --footer:     #041d29;   /* the footer only                        */
  --blue:       #01a1e0;   /* brand, links, structure                */
  --sky:        #3bc0f0;   /* the readable blue on navy              */
  --green:      #3fc07f;   /* buttons and good figures. Nothing else */
  --green-lift: #55cf92;   /* the same green, hovered                */
  --paper:      #f4f8fa;   /* relief sections that break up the navy */

  --ink:        #eaf3f7;
  /* Text opacities are floored at .66 so every line clears 4.5:1 on navy.
     The artboards went down to .45 for small print; the caveats are the last
     thing that should be hard to read. */
  --ink-soft:   rgba(234, 243, 247, .82);
  --ink-mid:    rgba(234, 243, 247, .75);
  --ink-quiet:  rgba(234, 243, 247, .68);

  --line:       rgba(255, 255, 255, .14);
  --line-soft:  rgba(255, 255, 255, .10);
  --panel:      rgba(255, 255, 255, .055);

  --serif: 'Inika', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --gutter: clamp(20px, 5vw, 60px);
  --measure: 1140px;      /* 1440 artboard minus its 150px margins */
  --focus: var(--sky);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
svg { display: block; }

a { color: var(--sky); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--green); color: var(--navy-deep);
  padding: 12px 18px; font-weight: 700; z-index: 50; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout ------------------------------------------------------- */

.band { padding: clamp(38px, 6vw, 66px) var(--gutter); }
.band-deep  { background: var(--navy-deep); }
.band-paper { background: var(--paper); color: var(--navy); --focus: #0a3a53; }
.band-cta   { background: linear-gradient(135deg, #0d5257 0%, #062736 100%);
              border-top: 1px solid var(--line); }
.wrap { max-width: var(--measure); margin: 0 auto; }

.stack   { display: flex; flex-direction: column; gap: 26px; }
.stack-s { display: flex; flex-direction: column; gap: 14px; }

.grid-2, .grid-3 { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1000px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- type --------------------------------------------------------- */

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; margin: 0; line-height: 1.2; }

.display   { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.16; text-wrap: balance; }
.display-s { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.16; text-wrap: balance; }
.h-sec     { font-size: clamp(26px, 3vw, 34px); }
.h-sub     { font-size: clamp(22px, 2.2vw, 30px); }

.eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sky); line-height: 1.5;
}
.label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-quiet); margin: 0;
}

.lede  { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.62; color: var(--ink-mid); max-width: 62ch; }
.body  { font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.65; color: var(--ink-soft); }
.small { font-size: 14px; line-height: 1.55; color: var(--ink-quiet); }

/* The asterisk caveat. Every section that shows a figure carries one. */
.caveat { font-size: 13.5px; line-height: 1.6; color: var(--ink-quiet); }
.band-paper .caveat { color: rgba(10, 58, 83, .78); }
.band-paper .body,
.band-paper .lede { color: rgba(10, 58, 83, .8); }

/* ---------- buttons ------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: var(--navy-deep);
  font: 700 17px/1.3 var(--sans);
  padding: 16px 32px; min-height: 48px;
  border: 0; border-radius: 8px; text-decoration: none; cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--green-lift); color: var(--navy-deep); }
.btn-block { display: flex; width: 100%; font-size: 15px; padding: 14px 18px; }
.btn-sm { padding: 12px 22px; font-size: 15px; min-height: 44px; }

.textlink { color: var(--sky); text-decoration: underline; }
.textlink:hover { color: var(--ink); }

/* ---------- header ------------------------------------------------------- */

.topbar {
  background: var(--navy-deep);
  border-bottom: 1px solid var(--line);
  padding: 14px var(--gutter);
}
.topbar-in {
  max-width: var(--measure); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 21px; line-height: 1.05; }
.brand-sub  { font-size: 9.5px; font-weight: 600; letter-spacing: .36em;
              text-transform: uppercase; color: var(--sky); padding-left: .18em; margin-top: 2px; }

.nav { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.nav a {
  color: var(--ink); text-decoration: none;
  padding: 12px 10px; min-height: 44px; display: inline-flex; align-items: center;
}
.nav a:hover { color: var(--sky); }
.nav a.is-current { border-bottom: 2px solid var(--green); }
.nav a.signin { color: var(--sky); }
.nav a.cta { color: var(--navy-deep); }

/* "Current Deals / Saved deals" — one item on the bar, two links inside it.
   The pair is laid out as a row at every width, including inside the collapsed
   menu, so the label reads the same whichever way the bar is drawn. The slash
   takes no padding of its own: the two anchors already carry theirs. */

.navtoggle {
  display: none;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); cursor: pointer; padding: 0;
}

/* THE MENU COLLAPSES AT 1080px, NOT 900px. Seven items and a bigger lockup need
   about 950px of bar; below roughly 1050 the links start wrapping onto two lines
   each and the header grows from 81px to 111px — a crowded, taller bar rather
   than a menu. Collapsing earlier keeps the type at its designed size (shrinking
   it would be the wrong fix) and every item still reachable. Only this block
   moved: the hero and the two-column rules still change at their own 900px. */
@media (max-width: 1080px) {
  .js .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-deep); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 18px;
  }
  .js .nav.is-open { display: flex; }
  .js .navtoggle { display: inline-flex; }
  .topbar { position: relative; }
  .nav a { padding: 14px 4px; }
  .nav a.cta { justify-content: center; margin-top: 8px; }
}

/* ---------- hero --------------------------------------------------------- */

.hero {
  padding: clamp(26px, 5vw, 76px) var(--gutter) clamp(30px, 5vw, 68px);
}
.hero-in {
  max-width: var(--measure); margin: 0 auto;
  display: flex; gap: clamp(24px, 4vw, 64px); align-items: center;
}
.hero-copy { flex: 1.15; display: flex; flex-direction: column; gap: 20px; }
.hero-side { flex: .85; display: flex; flex-direction: column; gap: 16px; }

.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }

@media (max-width: 900px) {
  .hero-in { flex-direction: column; align-items: stretch; }
  .hero-side { flex-direction: row; gap: 12px; }
  .hero-side .caveat { display: none; }         /* repeated below the pair */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-actions .small { text-align: center; }
}
@media (max-width: 460px) {
  .hero-side { flex-direction: row; }
  .stat { padding: 18px 16px; }
}
.hero-caveat-mobile { display: none; }
@media (max-width: 900px) { .hero-caveat-mobile { display: block; } }

.stat {
  flex: 1;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: clamp(18px, 2.4vw, 28px) clamp(16px, 2.6vw, 30px);
}
.stat-v {
  font-family: var(--serif); font-weight: 700; line-height: 1;
  font-size: clamp(27px, 3.6vw, 46px); color: var(--green);
}
.stat-v .ast { font-size: .52em; }
.stat-k { font-size: clamp(13.5px, 1.3vw, 16px); color: var(--ink-soft); margin-top: 8px; line-height: 1.4; }
.stat-v.plain { color: var(--ink); }

/* ---------- generic panels ---------------------------------------------- */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: clamp(20px, 2.2vw, 26px);
}
.card-paper {
  background: #fff; border: 1px solid rgba(10, 58, 83, .12);
  border-radius: 10px; padding: 22px 24px; color: var(--navy);
}
.card-paper.accent { border-left: 3px solid var(--green); border-radius: 8px; }
/* Card headings are Inter in the design, not Inika — the serif is reserved for
   section headings, hero copy and figures. */
.card-title { font-family: var(--sans); font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.card-body  { font-size: 15px; line-height: 1.62; color: rgba(10, 58, 83, .78); }
/* A link on a white card. The site's link blue is drawn to be read on navy and
   is far too pale on paper, so on this one component it takes the navy and
   keeps its underline — the same correction the .band-paper .body and
   .band-paper .caveat rules above make for body text. The home page's five
   "why a seller takes less" headings are the links this exists for. */
.card-paper a, .card-paper .textlink { color: var(--navy); }
.card-paper a:hover, .card-paper .textlink:hover { color: var(--navy-deep); }
.card-invert { background: var(--navy); color: var(--ink); border-radius: 8px;
               padding: 22px 24px; display: flex; align-items: center;
               font-size: 15.5px; line-height: 1.62; }

.note {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(59, 192, 240, .1); border: 1px solid rgba(59, 192, 240, .3);
  border-radius: 10px; padding: 16px 20px;
  font-size: 15px; line-height: 1.55; color: var(--ink-soft);
}
.note svg { flex: 0 0 auto; margin-top: 3px; }

.note-green {
  background: rgba(63, 192, 127, .08); border: 1px solid rgba(63, 192, 127, .3);
  border-radius: 12px; padding: 24px 26px;
}

/* ---------- how it works ------------------------------------------------- */

.step-head { display: flex; align-items: center; gap: 12px; }
.step-n {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  background: rgba(63, 192, 127, .15); border: 1px solid var(--green);
  color: var(--green); font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step-t { font-size: 19px; font-weight: 600; font-family: var(--sans); }

.ticks { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 13px; align-items: flex-start;
            font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.ticks svg { flex: 0 0 auto; margin-top: 3px; }
.ticks strong { color: var(--ink); }

.split { display: flex; gap: clamp(26px, 5vw, 70px); }
@media (max-width: 900px) { .split { flex-direction: column; } }
.split > * { flex: 1; }
.split .wide { flex: 1.25; }

/* ---------- deal cards --------------------------------------------------- */

.deals-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}

.deal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.deal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* The pill and the reason chip travel together on the left, so the reference
   stays on the right where the design puts it however many tags there are. */
.deal-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.pill {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green); background: rgba(63, 192, 127, .14);
  border-radius: 4px; padding: 5px 9px;
}
/* WHY IT IS CHEAP, IN ONE WORD. Sky and quiet, never green: green on this site
   is a button or a positive figure, and "Probate" is neither. The word is one
   of a fixed list in lib/deals.js and is never text from the database. */
.chip-reason {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sky); background: rgba(59, 192, 240, .12);
  border: 1px solid rgba(59, 192, 240, .34);
  border-radius: 4px; padding: 4px 8px; white-space: nowrap;
}
.deal-ref { font-size: 11.5px; color: var(--ink-quiet); }
.deal-t { font-family: var(--serif); font-size: 21px; font-weight: 700; line-height: 1.3; }
.deal-note { font-size: 14px; line-height: 1.55; color: var(--ink-mid); }

.figs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.fig-k { font-size: 12px; color: var(--ink-quiet); }
.fig-v { font-family: var(--serif); font-size: 20px; font-weight: 700; }
.fig-v.good { color: var(--green); }

.deal-foot { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }
.deal-foot .small { text-align: center; }

.locked {
  display: flex; align-items: center; gap: 9px;
  background: rgba(1, 161, 224, .12); border: 1px solid rgba(1, 161, 224, .35);
  border-radius: 8px; padding: 12px 14px; margin-top: auto;
  font-size: 13.5px; font-weight: 500; color: var(--sky);
}
.locked svg { flex: 0 0 auto; }

/* The empty state — the real state when nothing is on the list. */
.empty {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: clamp(24px, 3vw, 32px); max-width: 620px;
}
.empty h1, .empty h2, .empty h3 { font-size: clamp(21px, 2.4vw, 28px); line-height: 1.3; }
.empty p { font-size: 15px; line-height: 1.62; color: var(--ink-soft); margin: 10px 0 0; }
.empty .foot {
  font-size: 13.5px; line-height: 1.55; color: var(--ink-quiet);
  margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 12px;
}

/* ---------- FAQ ---------------------------------------------------------- */

.faq { display: flex; flex-direction: column; gap: 20px; max-width: 940px; }
.faq > div { border-top: 1px solid var(--line); padding-top: 18px; }
/* h3 on the home page, where the section already has an h2 over it; h2 on the
   FAQ page, where each question sits under the page's own h1. Same question,
   same look, correct heading order on both. */
.faq h2, .faq h3 { font-family: var(--sans); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.faq p { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin: 0; }

/* ---------- closing CTA -------------------------------------------------- */

.cta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
}
.cta-side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cta-side .small { max-width: 300px; }
@media (max-width: 860px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-side .btn { width: 100%; }
  .cta-side .small { max-width: none; }
}

/* ---------- register form ------------------------------------------------ */

.form-panel {
  flex: 1.1; background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  border-radius: 14px; padding: clamp(22px, 3vw, 42px);
  display: flex; flex-direction: column; gap: 22px;
}
.form-side { flex: .9; display: flex; flex-direction: column; gap: 22px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 14px; font-weight: 500; }
.field .opt { color: var(--ink-quiet); font-weight: 400; }
.field input {
  height: 50px; width: 100%;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px; color: var(--ink); padding: 0 14px;
  font: 16px/1.4 var(--sans);
}
.field input:focus { border-color: var(--sky); }
.field input::placeholder { color: rgba(234, 243, 247, .45); }
/* The contact form's message box. The same box as the fields above it, given a
   height and allowed to grow downwards only — a textarea that can be dragged
   wider breaks the column it sits in. */
.field textarea {
  width: 100%; min-height: 150px; resize: vertical;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px; color: var(--ink); padding: 12px 14px;
  font: 16px/1.5 var(--sans);
}
.field textarea:focus { border-color: var(--sky); }

fieldset { border: 0; margin: 0; padding: 0; }
legend { font-size: 14px; font-weight: 500; padding: 0; margin-bottom: 11px; }

/* The radio "pills" went with the "what are you looking for?" question they
   styled; nothing else on the site uses them. (.pill and .v-pills, on the deal
   cards and deal pages, are different rules and are untouched.) */

.consents {
  border-top: 1px solid var(--line); padding-top: 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.consent { display: flex; gap: 13px; align-items: flex-start; }
.consent input {
  width: 21px; height: 21px; flex: 0 0 auto; margin: 3px 0 0;
  accent-color: var(--green);
}
.consent label { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); cursor: pointer; }
.req { color: var(--green); font-weight: 600; }
.optional { color: var(--ink-quiet); }

/* The honest preview message. Not an error — a statement of where we are. */
.status {
  border-radius: 10px; padding: 16px 20px;
  background: rgba(59, 192, 240, .12); border: 1px solid rgba(59, 192, 240, .4);
  font-size: 15.5px; line-height: 1.6; color: var(--ink);
}
.status strong { display: block; margin-bottom: 4px; }

/* The same panel in amber when something a person typed needs fixing. Amber,
   not red: nothing has been lost and nothing is broken — one field needs
   another look. Amber is already this site's "read this before the numbers"
   colour on a deal page, and it is the only other place it appears. */
.status.err {
  background: rgba(255, 176, 32, .10); border-color: rgba(255, 202, 106, .55);
}
.status.err strong { color: #ffca6a; }

/* The honeypot. Off the side of the page and out of the tab order, so no
   person meets it and every form-filling bot does. Not display:none — some
   bots skip hidden fields, which would defeat the point. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- the account pages -------------------------------------------
   Sign in, check your email, expired link, unsubscribe, already signed in.
   One narrow column: they are one short message or one field, and a form
   stretched across 1140px reads as a mistake. */
.authwrap { max-width: 620px; }
/* The panels inside carry their own spacing, so the column only needs to stop
   a one-field form stretching across the full 1140px measure. */
.authwrap .empty p .btn, .authwrap .empty .btn { margin-top: 6px; }

/* A form that has to sit inside a line of text — "Sign out", "Remove from my
   list". The button is a POST, because a link that changes something can be
   fired by a prefetcher; it just has to READ like a link. */
.inlineform { display: inline; margin: 0; }
.linkbtn {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--sky); font: inherit; text-decoration: underline;
  text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--ink); }
/* In the navigation it has to line up with the links either side of it, which
   have their own padding and touch target. */
.navform { display: inline-flex; align-items: center; }
.nav .linkbtn { font-size: 15px; min-height: 44px; text-decoration: none; }
.nav .linkbtn:hover { text-decoration: underline; }

/* ---------- saved deals ---------------------------------------------------
   The same card as a public deal, plus the one thing that matters: whether it
   is still there. A deal that has gone stays on the list and says so. */
.saved-row .deal-note { color: var(--ink-mid); }
.saved-row.is-gone { opacity: .82; border-color: rgba(255, 202, 106, .35); }
.saved-row.is-gone .pill { color: #ffca6a; background: rgba(255, 176, 32, .14); }
.savebar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.savebar .small { margin: 0; color: var(--ink-quiet); }
/* "Save for later" sits beside the pack button on a deal page. */
.v-actions .inlineform { display: inline-flex; }

/* ---------- legal pages --------------------------------------------------
   The .banner rule went with the "Draft — pending legal review." line it
   styled: the documents are published, so the banner was removed and there is
   nothing left on the site that uses this class. Nothing else changed here. */

.prose { max-width: 70ch; }
.prose h1 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; margin-bottom: 18px; }
.prose h2 {
  font-size: clamp(21px, 2.2vw, 27px); margin: 38px 0 12px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.prose h3 { font-family: var(--sans); font-size: 18px; font-weight: 600; margin: 26px 0 10px; }
.prose p, .prose li { font-size: 16px; line-height: 1.72; color: var(--ink-soft); }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.prose blockquote {
  margin: 0 0 22px; padding: 16px 20px;
  background: var(--panel); border-left: 3px solid var(--sky); border-radius: 0 8px 8px 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
/* An unresolved drafting note. The negative margin cancels the padding so the
   highlight does not push a space in front of the next full stop. */
.prose .todo {
  background: rgba(59, 192, 240, .18); color: var(--ink);
  border-radius: 3px; padding: 1px 3px; margin: 0 -3px;
}

/* ---------- one deal: /deals/:ref/ ---------------------------------------
   The money leads and the address anchors: the verdict card carries the
   headline figure, the address, the status pills and the six-cell strip, then
   the reasoning runs down the left with the deal sheet as a side ledger on the
   right. Same tokens as the rest of the site — green is still only ever a
   button or a positive figure. */

.deal-page .stack { gap: 30px; }
.deal-t-link { color: inherit; text-decoration: none; }
.deal-t-link:hover { color: var(--sky); text-decoration: underline; }

.verdict {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: clamp(20px, 2.6vw, 28px);
}
.v-head { display: flex; justify-content: space-between; align-items: flex-start;
          gap: 20px; flex-wrap: wrap; }
.v-money { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-big {
  font-family: var(--serif); font-weight: 700; line-height: 1.04;
  font-size: clamp(34px, 5.4vw, 56px); color: var(--green);
  font-variant-numeric: tabular-nums;
}
.v-big-k { font-size: 12.5px; font-weight: 600; letter-spacing: .14em;
           text-transform: uppercase; color: var(--ink-quiet); margin-top: 4px; }
.v-supp { color: var(--ink-mid); font-size: 16px; margin-top: 6px; }
.verdict h1 { font-size: clamp(21px, 2.6vw, 28px); margin-top: 12px; line-height: 1.2; }
.v-desc { color: var(--ink-quiet); font-size: 14.5px; margin-top: 4px; }
.v-pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pill-warn { color: #ffca6a; background: rgba(255, 176, 32, .14); }

.strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
/* The cells are a flex column with the figure pushed to the bottom, so a label
   that wraps onto two lines does not drop its number below its neighbours'. */
.strip > div { background: var(--navy); padding: 14px 16px; min-width: 0;
               display: flex; flex-direction: column; }
.strip .v { margin-top: auto; }
.strip .k { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
            color: var(--ink-quiet); }
.strip .v { font-family: var(--serif); font-weight: 700; font-size: 23px;
            padding-top: 4px; font-variant-numeric: tabular-nums; }
.strip .v.good { color: var(--green); }

.v-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.refline { color: var(--ink-quiet); font-size: 13px; }

.ghost-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 22px;
  background: transparent; border: 1px solid var(--blue); border-radius: 8px;
  color: var(--sky); font: 600 15px/1.3 var(--sans); text-decoration: none;
}
.ghost-btn:hover { background: rgba(1, 161, 224, .12); color: var(--ink); }
.ghost-btn.block { display: flex; width: 100%; }

.twocol { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
          gap: 26px; align-items: start; }
.twocol .col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
@media (max-width: 900px) { .twocol { grid-template-columns: 1fr; } }

/* A note on how the figures were built — NOT a hazard warning. Amber is kept
   for the one thing that really is a hazard: a cost line nobody has priced. */
.deal-callout {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0;
  padding: 15px 18px; font-size: 15px; line-height: 1.62; color: var(--ink-soft);
}
.deal-callout b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.deal-callout.amber { border-left-color: #ffca6a; background: rgba(255, 176, 32, .07);
                      border-color: rgba(255, 176, 32, .3); border-left-width: 3px; }
.deal-callout.amber b { color: #ffca6a; }

.deal-prose { max-width: 68ch; }
.deal-prose p { font-size: 16px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 14px; }
.deal-prose p:last-child { margin-bottom: 0; }
.ticks.reasons li { border-bottom: 1px solid var(--line-soft); padding-bottom: 12px; }

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.fact { background: var(--navy); padding: 13px 16px; }
.fact .k { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
           color: var(--ink-quiet); }
.fact .v { font-weight: 600; font-size: 17px; padding-top: 3px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
        font-size: 13px; color: var(--ink-mid); }

.whynotus {
  max-width: 68ch; margin: 0; padding: 16px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  font-size: 15.5px; line-height: 1.62; color: var(--ink-soft);
}
.whynotus b { color: var(--ink); }

.endnote {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; padding: 18px 20px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  font-size: 15px; line-height: 1.6; color: var(--ink-soft);
}
.endnote b { color: var(--ink); }
.endnote .first { color: var(--ink-quiet); font-size: 13px; }
.packagain { margin: 0; font-size: 16px; }

/* ---------- the tables: the deal sheet, the comparables ------------------ */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table.sheet, table.comps { width: 100%; border-collapse: collapse; }
table.sheet { font-size: 15px; min-width: 340px; }
table.comps { font-size: 14.5px; min-width: 520px; }
table.sheet td, table.comps td, table.comps th { border: 0; }
table.sheet td { padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
                 color: var(--ink-mid); }
table.sheet td.r { text-align: right; color: var(--ink);
                   font-variant-numeric: tabular-nums; white-space: nowrap; }
table.sheet tr.sec td { background: var(--navy-deep); color: var(--ink-quiet);
  font: 600 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase;
  padding: 9px 16px; }
table.sheet tr.tot td { background: rgba(255, 255, 255, .05); color: var(--ink);
                        font-weight: 600; }
table.sheet tr.gap td.r { color: var(--ink-quiet); font-style: italic; }
table.sheet tr:last-child td, table.comps tr:last-child td { border-bottom: 0; }
table.comps th { background: var(--navy-deep); color: var(--ink-quiet);
  font: 600 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase;
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
table.comps td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
                 color: var(--ink-mid); }
table.comps .r { text-align: right; }
table.comps td b { color: var(--ink); font-weight: 600; }
.down { color: var(--green); }
.est { font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
       color: var(--ink-quiet); border: 1px solid var(--line); border-radius: 4px;
       padding: 1px 5px; margin-left: 7px; white-space: nowrap; }

.returns { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
           gap: 12px; }
.rt { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
      padding: 14px 16px; }
.rt.big { background: rgba(63, 192, 127, .10); border-color: rgba(63, 192, 127, .4); }
.rt .k { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
         color: var(--ink-quiet); }
.rt .v { font-family: var(--serif); font-weight: 700; font-size: 25px;
         padding-top: 4px; font-variant-numeric: tabular-nums; }
.rt.big .v { color: var(--green); }

/* ---------- the side ledger ---------------------------------------------- */

.ledger {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px;
}
.l-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.l-flag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #ffca6a; }
.l-note { font-size: 13px; line-height: 1.6; color: var(--ink-quiet); margin: 0; }

/* The photographs belong to the agent. This panel is what replaces them. */
.portal {
  display: block; text-decoration: none;
  background: rgba(1, 161, 224, .12); border: 1px solid rgba(1, 161, 224, .4);
  border-radius: 12px; padding: 18px 20px;
}
.portal:hover { background: rgba(1, 161, 224, .2); }
.portal-t { display: block; font: 600 17px var(--sans); color: var(--ink); }
.portal-t::after { content: " \2197"; color: var(--sky); }
.portal-m { display: block; color: var(--ink-mid); font-size: 14px; padding-top: 5px; }

/* ---------- the signed-out half ------------------------------------------ */

.locked-panel { display: flex; flex-direction: column; gap: 16px; }
.locked-panel .locked { margin-top: 0; align-self: flex-start; }
.locked-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .locked-actions { align-items: stretch; flex-direction: column; }
  .locked-actions .btn { width: 100%; }
  .v-pills { justify-content: flex-start; }
  .v-actions .btn, .v-actions .ghost-btn { width: 100%; }
}

/* ---------- footer ------------------------------------------------------- */

.sitefoot { background: var(--footer); padding: 40px var(--gutter) 36px; }
.sitefoot-in { max-width: var(--measure); margin: 0 auto;
               display: flex; flex-direction: column; gap: 24px; }
.foot-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-cols { display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; font-size: 14.5px; }
.foot-col { display: flex; flex-direction: column; gap: 4px; }
.foot-col h2 {
  font-family: var(--sans); font-weight: 600; color: var(--ink-quiet);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 5px;
}
.foot-col a, .foot-col span {
  color: var(--ink-soft); text-decoration: none;
  padding: 8px 0; min-height: 32px; display: inline-flex; align-items: center;
}
.foot-col a:hover { color: var(--ink); text-decoration: underline; }

/* The social placeholders. They sit in the footer's column row and take the
   same heading as the columns beside them, so the block reads as a deliberate
   fourth column rather than as links that failed to render. The marks are not
   links and not focusable — there is nowhere to send anybody yet — so they get
   no hover lift and no pointer. */
.foot-social { display: flex; flex-direction: column; gap: 4px; }
.foot-social h2 {
  font-family: var(--sans); font-weight: 600; color: var(--ink-quiet);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 5px;
}
.soc-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 0; }
.soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .04);
  color: var(--ink-quiet);
}
/* .soc IS A LINK NOW, so it needs to look like one under a cursor and under a
   keyboard. The colour lift is the same one the footer's text links use, so the
   row belongs to the footer rather than looking like a separate widget.
   :focus-visible inherits the site-wide ring at the top of this file — it is
   not overridden here, because a focus ring that differs per component is a
   focus ring people stop recognising. */
.soc:hover, .soc:focus-visible {
  color: var(--sky); border-color: var(--sky);
  background: rgba(1, 161, 224, .12);
}
@media (prefers-reduced-motion: no-preference) { .soc { transition: color .15s, border-color .15s, background .15s; } }

.soc-note { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-quiet); }

/* The three legal lines. On every page, including the legal pages.
   CENTRED, AND WIDER THAN THEY WERE — but capped: a 13px line running the full
   1140px measure is 160 characters, and the eye loses the start of the next one.
   860px is about 120 characters, which is wide for fine print and still
   trackable, and on a phone the cap never applies. */
.foot-legal {
  border-top: 1px solid var(--line-soft); padding-top: 20px;
  display: flex; flex-direction: column; gap: 8px; text-align: center;
}
.foot-legal p {
  margin: 0 auto; font-size: 13px; line-height: 1.6; color: var(--ink-quiet);
  max-width: 860px;
}
.foot-legal p.company { color: var(--ink-mid); margin-top: 4px; }
/* The last line on the page, and the quietest thing on it. */
.foot-legal p.copyright { font-size: 12.5px; color: var(--ink-quiet); margin-top: 6px; }

/* "Cookie choices" sits in the Legal column with the three policy links, and it
   is a form button rather than a link because pressing it changes something.
   It has to READ as the links either side of it, so it borrows .linkbtn — the
   same component "Sign out" uses in the navigation — and takes the column's own
   spacing and touch target. */
.foot-col .foot-cookieform { display: block; }
.foot-col .linkbtn {
  font: inherit; color: var(--ink-soft); text-decoration: none;
  padding: 8px 0; min-height: 32px; display: inline-flex; align-items: center;
}
.foot-col .linkbtn:hover { color: var(--ink); text-decoration: underline; }

/* ---------- the cookie notice --------------------------------------------
   STICKY, NOT FIXED, AND LAST IN THE DOCUMENT. It floats at the foot of the
   window while there is page below it and then SETTLES UNDER THE FOOTER when
   you reach the bottom — so it is never the thing standing on top of the three
   legal lines. A fixed bar would cover them for as long as it went unanswered.

   It is an ordinary element in the flow: no overlay, nothing inert behind it,
   no focus moved on load and none trapped. Somebody who ignores it keeps the
   whole site, and the tab order runs through it to the end of the page.

   ACCEPT AND REJECT ARE THE SAME COMPONENT IN EQUAL COLUMNS. Two .ghost-btn in
   a grid of minmax(0, 1fr): identical width by construction, identical height
   because grid items stretch, identical weight and colour because it is one
   class. That is what makes the consent valid, so it is a layout guarantee
   rather than two padding values somebody has to keep in step. */
.cookiebar {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--navy-deep);
  border-top: 1px solid var(--line);
  padding: 16px var(--gutter);
}
.cookiebar-in {
  max-width: var(--measure); margin: 0 auto;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
}
.cookiebar-copy { min-width: 0; }
.cookiebar-p { margin: 0; max-width: 78ch; }
.cookiebar-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin: 0; flex: 0 0 auto; width: min(340px, 100%);
}

/* Stacked below the copy on a phone, and still two equal columns: side by side,
   one click each, at every width. */
@media (max-width: 820px) {
  .cookiebar-in { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookiebar-actions { width: 100%; }
}

/* The same two buttons again on the Cookie Policy page, in the site's existing
   .card, set to the width of the prose above them. Changing your mind is the
   same one-click pair as giving the answer in the first place. */
.cookie-choices { max-width: 70ch; }
.cookie-choices p { margin: 0; }
.cookie-choices .cookiebar-actions { margin-top: 16px; }

/* =========================================================================
   THE HOME PAGE — the approved "Option B" board, expressed once.

   Everything below is the home page and only the home page, in the order the
   page renders: the strapline, the deal grid (lead deal + free-account panel +
   the compact two-up), what an account opens, why a seller takes less, how the
   list gets made, and the two-column questions.

   THE ONE RULE THIS BLOCK OBEYS ALONGSIDE THE REST: green is only ever a
   button or a positive figure. The step numbers, the tick glyphs and the rules
   over the reason boxes are all brand blue.
   ========================================================================= */

/* ---------- the strapline ------------------------------------------------ */

.lead-hero { padding: clamp(22px, 3.2vw, 46px) var(--gutter) clamp(16px, 2vw, 30px); }
.lead-hero-in {
  max-width: var(--measure); margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
}
.lead-hero-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* 41px on the 1440 board, 27px on the 390 one. */
.lead-h1 { font-size: clamp(26px, 2.9vw, 42px); line-height: 1.22; text-wrap: balance; max-width: 880px; }
.lead-sub { font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; color: var(--ink-mid); margin: 0; max-width: 62ch; }
/* The claim line sits directly under the sub-line, at the same size but in the
   full ink so the range reads as the point rather than as more small print. Its
   asterisk is set smaller than the figure it marks, exactly as .stat-v and
   .fig-v-big do. The caveat under it is the standing one, tightened up so the
   two read as one block rather than as a separate paragraph. */
.lead-claim { font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; color: var(--ink);
              margin: 0; max-width: 62ch; }
/* Smaller than the figure it marks, like every asterisk on the site — but this
   one sits on body text rather than on a 34px display figure, so .52em would
   land at 8px and stop being readable as an asterisk at all. */
.lead-claim .ast { font-size: .8em; }
.lead-caveat { margin: -4px 0 0; max-width: 62ch; }

.lead-count { flex: 0 0 auto; max-width: 300px; text-align: right;
              display: flex; flex-direction: column; gap: 7px; }
.lead-count-n { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lead-count-v { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 3.1vw, 34px); line-height: 1; }
.lead-count-k { font-size: 14px; color: var(--ink-mid); line-height: 1.5; }
.lead-note {
  margin: 6px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-quiet); line-height: 1.8;
  border-top: 1px solid var(--line); padding-top: 10px;
}
/* On a phone the count and the note become one row under the strapline, which
   is the mobile board — and keeps the first deal card that much higher. */
@media (max-width: 760px) {
  .lead-hero-in { flex-direction: column; align-items: stretch; gap: 12px; }
  .lead-count { max-width: none; text-align: left; flex-direction: row;
                align-items: flex-end; justify-content: space-between; gap: 14px;
                border-top: 1px solid var(--line); padding-top: 12px; }
  .lead-count-n { flex-direction: row; align-items: baseline; gap: 9px; }
  .lead-count-k { line-height: 1.4; }
  .lead-note { margin: 0; border-top: 0; padding-top: 0; text-align: right;
               font-size: 10px; letter-spacing: .12em; line-height: 1.6; }
}

/* ---------- the deal grid ------------------------------------------------
   One grid, three columns: the lead deal spans two, the free-account panel
   takes the third, and the compact cards fill the rows underneath. At 1000px
   it drops to two columns with the lead and the panel each full width, which
   is exactly the phone layout: lead, panel, then two-up. */

.band-list { padding-top: clamp(6px, 1vw, 12px); }

.deal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.deal-grid > * { min-width: 0; }
.deal-lead, .deal-lead-slot { grid-column: span 2; }
.deal-lead-slot .empty { height: 100%; max-width: none; }

@media (max-width: 1000px) {
  .deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deal-lead, .deal-lead-slot, .joinpanel { grid-column: span 2; }
}
@media (max-width: 560px) { .deal-grid { gap: 12px; } }

/* The lead deal: the money leads, and it is the first thing under the
   strapline. Sizes are the board's — 46px on 1440, 32px on 390. */
.deal-lead { padding: clamp(18px, 2.4vw, 32px); gap: clamp(13px, 1.4vw, 18px); }
.deal-t-lead { font-size: clamp(21px, 2.2vw, 30px); }
.figs-lead {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px clamp(20px, 3vw, 44px);
  border-top: 1px solid var(--line); padding-top: clamp(14px, 1.6vw, 20px);
}
.fig-v-big {
  font-family: var(--serif); font-weight: 700; line-height: 1.06; color: var(--green);
  font-size: clamp(30px, 3.4vw, 46px); font-variant-numeric: tabular-nums;
}
.fig-v-big .ast { font-size: .52em; }
.figs-lead-side { display: flex; gap: clamp(18px, 2.4vw, 30px); padding-bottom: 6px; }
/* The paragraph's own margin is cancelled on both home-page cards: inside a
   flex column it does not collapse, so it lands on top of the card's gap and
   opens a hole the board does not have. The deals-page card is untouched. */
.deal-note-lead, .deal-mini .deal-note { margin: 0; }
.deal-note-lead { font-size: clamp(14px, 1.2vw, 15px); color: var(--ink-soft); }
.deal-foot-lead { flex-direction: row; align-items: center; gap: 20px; flex-wrap: wrap; }
.deal-foot-lead .small { text-align: left; margin: 0; }
@media (max-width: 560px) {
  .figs-lead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .figs-lead-side { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: 14px; padding-bottom: 0; }
  .deal-foot-lead { flex-direction: column; align-items: stretch; gap: 10px; }
  .deal-foot-lead .btn { width: 100%; }
  .deal-foot-lead .small { text-align: center; }
}

/* The compact card, in its two sizes.

   ON A WIDE SCREEN it is simply the site's standard deal card — which is what
   the 1440 board draws in the rows under the lead deal — so it inherits .deal
   and .figs and needs almost nothing here.

   BELOW 1000px the grid goes two-up and a card is about 160px wide. Every size
   in it changes, the four figures stack (headline pair large, asking price and
   our value as label-left / figure-right rows), and the long green button gives
   way to the underlined link the 390 board uses. Both actions are in the
   markup and one is always hidden, because the two say different things and
   text is not something CSS should be inventing. */
.at-narrow { display: none; }
@media (max-width: 1000px) {
  .at-wide { display: none; }
  .at-narrow { display: flex; }

  .deal-mini { padding: 13px 12px; gap: 10px; }
  .deal-mini .deal-top { flex-direction: column; align-items: flex-start; gap: 5px; }
  .deal-mini .deal-tags { gap: 5px; }
  .deal-mini .pill { font-size: 9.5px; letter-spacing: .04em; padding: 5px 6px; line-height: 1.3; }
  /* At 160px the two tags stack rather than being squeezed; the chip may wrap
     its own words on the longest of the seven ("Motivated seller"). */
  .deal-mini .chip-reason {
    font-size: 9.5px; letter-spacing: .03em; padding: 4px 6px; line-height: 1.3;
    white-space: normal;
  }
  .deal-mini .deal-ref { font-size: 10px; }
  .deal-mini .deal-t { font-size: 15.5px; line-height: 1.3; }
  .deal-mini .deal-note { font-size: 12px; line-height: 1.5; }
  .figs-mini { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
  .figs-mini .fig-k { font-size: 10.5px; line-height: 1.3; }
  .figs-mini .mfig .fig-v { font-size: 22px; line-height: 1.1; }
  .figs-mini .mfig .fig-v.sm { font-size: 17px; line-height: 1.15; }
  .figs-mini .mrow { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
  .figs-mini .mrow .fig-k { min-width: 0; }
  .figs-mini .fig-v.xs { font-size: 13px; white-space: nowrap; }
}
/* The narrow card's action. It keeps the 44px target the board gives it. */
.minicta {
  align-items: center; min-height: 44px; margin-top: auto;
  border-top: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 600;
  color: var(--sky); text-decoration: underline; text-underline-offset: 3px; line-height: 1.4;
}

/* The free-account panel beside the lead deal. */
.joinpanel {
  background: linear-gradient(160deg, #0d5257 0%, #062736 100%);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px;
  padding: clamp(20px, 2.2vw, 28px);
  display: flex; flex-direction: column; gap: 13px;
}
.joinpanel-k { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .18em;
               text-transform: uppercase; color: var(--sky); line-height: 1.5; }
.joinpanel-t { font-size: clamp(20px, 1.9vw, 25px); line-height: 1.28; }
.joinpanel-b { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.joinpanel-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.joinpanel-foot .small { text-align: center; margin: 0; }

/* ---------- what an account opens ---------------------------------------- */

/* The eyebrow's sky blue is drawn to be read on navy and is far too pale on
   paper. Same correction the body and caveat rules make above. */
.band-paper .eyebrow { color: var(--blue); }

.opens-head { display: flex; align-items: flex-end; justify-content: space-between;
              gap: clamp(24px, 4vw, 60px); flex-wrap: wrap; }
.opens-price { flex: 0 0 auto; text-align: right; }
.opens-price-v { margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1;
                 font-size: clamp(28px, 3.2vw, 44px); color: var(--navy); }
.opens-price-k { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(10, 58, 83, .7); }
@media (max-width: 760px) {
  .opens-head { align-items: flex-start; }
  .opens-price { text-align: left; display: flex; align-items: baseline; gap: 14px;
                 border-top: 1px solid rgba(10, 58, 83, .14);
                 border-bottom: 1px solid rgba(10, 58, 83, .14); padding: 16px 0; width: 100%; }
  .opens-price-v { flex: 0 0 auto; }
  .opens-price-k { margin: 0; }
}

.opens-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; align-items: stretch; }
@media (max-width: 900px) { .opens-grid { grid-template-columns: 1fr; } }
.opens-card { display: flex; flex-direction: column; gap: 13px; padding: clamp(20px, 2.2vw, 30px); }
/* The navy card on the paper band. It restores the focus ring the band swapped
   for a dark one, because on this card a dark ring would be invisible. */
.card-dark { background: var(--navy); color: var(--ink); border-radius: 12px; --focus: var(--sky); }
.card-dark .btn { color: var(--navy-deep); }
.opens-k { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
           text-transform: uppercase; color: rgba(10, 58, 83, .55); line-height: 1.5; }
.opens-k.sky { color: var(--sky); }
.opens-t { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.3; }
.opens-list { margin: 0; padding: 0; list-style: none;
              display: flex; flex-direction: column; gap: 10px;
              font-size: 14.5px; line-height: 1.55; color: rgba(10, 58, 83, .78); }
.opens-foot { margin: auto 0 0; border-top: 1px solid rgba(10, 58, 83, .12); padding-top: 13px;
              font-size: 14px; line-height: 1.5; color: rgba(10, 58, 83, .6); }
.ticks.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }
@media (max-width: 700px) { .ticks.two { grid-template-columns: 1fr; } }
.card-dark .ticks li { font-size: 14.5px; }
.opens-cta { margin-top: auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
             border-top: 1px solid var(--line); padding-top: 16px; }
.opens-cta .small { margin: 0; }
@media (max-width: 560px) {
  .opens-cta { flex-direction: column; align-items: stretch; }
  .opens-cta .btn { width: 100%; }
  .opens-cta .small { text-align: center; }
}

/* ---------- why a seller takes less -------------------------------------- */

.reasons-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; }
@media (max-width: 900px) { .reasons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .reasons-grid { grid-template-columns: 1fr; gap: 20px; } }
.reason-box { display: flex; flex-direction: column; gap: 9px;
              border-top: 2px solid var(--sky); padding-top: 14px; }
.reason-t { font-family: var(--sans); font-size: 17px; font-weight: 700; }
.reason-b { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-mid); }

/* ---------- how the list gets made --------------------------------------- */

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .grid-4 { grid-template-columns: 1fr; gap: 22px; } }
/* A step number is neither a button nor a figure, so it is blue. */
.step-n.sky { background: rgba(59, 192, 240, .14); border-color: var(--sky); color: var(--sky); }

/* The two "who is doing the looking" panels. */
.card-t-dark { font-family: var(--sans); font-size: 16.5px; font-weight: 700;
               color: var(--ink); margin-bottom: 5px; }

/* ---------- the questions, two up ---------------------------------------- */

.faq.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: 22px 50px; max-width: none; }
@media (max-width: 820px) { .faq.two { grid-template-columns: 1fr; gap: 20px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}