/* ==========================================================================
   styles_modern.css
   NEW FILE, added 5 September 2026. Nothing in styles_new.css is touched.

   Loaded ONLY by pages that have opted in to the refreshed look. Every rule
   is scoped under body.mls-modern so that even if this file were loaded on
   a page by accident it cannot change anything.

   Phase 3 of MLS-Revitalisation-Plan.md. Roll out one page at a time.
   ========================================================================== */

body.mls-modern{
  --m-green:#0d7a3d; --m-green-dk:#0a5f30; --m-green-lt:#e8f5ed;
  --m-yellow:#f7c600; --m-ink:#16211c; --m-muted:#5d6b64;
  /* 06/09/26. --m-bg was #f6f8f7. SR asked whether the homepage and the signup page
     having different backgrounds was deliberate. It was not a design decision, it was
     a side effect: the homepage tint was scoped to body.mls-home so the signup page,
     already signed off, would not change. One shared variable is the right answer, so
     both pages now use the same one and the homepage override is gone.
     WHY #e2ebe6 AND NOT DARKER. White cards on it measure 1.22:1, up from 1.07:1, which
     is what stops the boxes vanishing. Going deeper keeps helping the cards and starts
     breaking the text: --m-muted on #dde8e2 is 4.45:1 and FAILS WCAG AA. So #e2ebe6 is
     not a taste choice, it is the floor. Do not darken it without re-checking muted
     text sitting directly on the page, such as .h-foot on the homepage. */
  --m-line:#dfe6e2; --m-bg:#e2ebe6; --m-radius:14px;
  --m-shadow:0 1px 2px rgba(16,32,24,.06),0 8px 24px rgba(16,32,24,.07);
  margin:0; background:var(--m-bg); color:var(--m-ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.mls-modern *{box-sizing:border-box}

/* Neutralise the legacy page frame WITHOUT editing it. The div structure is
   left exactly as it was so every include still gets the DOM it expects. */
body.mls-modern .main_page,
body.mls-modern .main_content,
body.mls-modern .content_frame,
body.mls-modern .center_center,
body.mls-modern .page_default{
  max-width:none; width:auto; margin:0; padding:0; float:none;
  background:none; border:0; min-height:0;
}

/* ONE CONTAINER WIDTH FOR THE WHOLE SITE, 6 September 2026. Was 1060px here and 1180px
   on the homepage, which SR saw straight away: "index seems to take more screen space
   than list your business". Every container is now 1180px, so the header, the search
   band and the page content line up on every page and pages match each other.
   This is now a rule in MLS-Style-Guide.md section 5. A page that needs a different
   width overrides its OWN container and its header together, never one of them. */
body.mls-modern .m-wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
/* The yellow brand bar. Added 5 September 2026 at SR's request: the live site
   frames its header in yellow and dropping it entirely made the refresh read as
   a different company. Kept to a rule at the very top so it signals the brand
   without bringing the 2005 banding back. */
body.mls-modern .m-topbar{height:5px;background:var(--m-yellow)}
body.mls-modern .m-hdr{background:#fff;border-bottom:1px solid var(--m-line)}
body.mls-modern .m-hdr .m-in{max-width:1180px;margin:0 auto;padding:13px 20px;
  display:flex;align-items:center;gap:20px}
body.mls-modern .m-brand{display:block;line-height:0}
body.mls-modern .m-brand img{height:44px;width:auto;display:block}
body.mls-modern .m-spacer{flex:1}
/* 06/09/26. Was 14px in --m-muted. Measured against the three sites SR named:
   gov.uk, BBC News and Yell all use 16px header nav links, and grey-on-white at
   14px was the smallest, faintest thing in the header. Now 15.5px in ink.
   THIS IS THE SHARED HEADER, so it changes the SIGNUP page as well as the
   homepage. That is intended: one header, one size, and the same argument
   applies to both pages. */
body.mls-modern .m-nav{display:flex;gap:19px;font-size:15.5px}
body.mls-modern .m-nav a{color:var(--m-ink);text-decoration:none;padding-bottom:3px;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
body.mls-modern .m-nav a:hover{color:var(--m-green);border-bottom-color:var(--m-yellow)}
body.mls-modern .m-cta{background:var(--m-green);color:#fff;text-decoration:none;font-weight:700;
  font-size:15px;padding:9px 16px;border-radius:9px;box-shadow:0 2px 0 var(--m-green-dk);white-space:nowrap}
body.mls-modern .m-cta:hover{background:var(--m-green-dk)}
body.mls-modern .m-searchband{background:var(--m-green);padding:14px 20px}
body.mls-modern .m-searchband .m-in{max-width:1180px;margin:0 auto;display:flex;gap:8px}
body.mls-modern .m-searchband input[type=text]{flex:1;min-width:0;border:0;border-radius:9px;
  padding:12px 14px;font-size:15px}
body.mls-modern .m-searchband input[type=submit]{border:0;border-radius:9px;padding:12px 20px;
  background:var(--m-yellow);color:#3a2c00;font-weight:800;font-size:15px;cursor:pointer}
body.mls-modern .m-proof{font-size:12.5px;color:#d8f0e2;max-width:1180px;margin:9px auto 0;padding:0 20px}
body.mls-modern .m-crumb{font-size:13px;color:var(--m-muted);padding:14px 0 0}
body.mls-modern .m-crumb a{color:var(--m-muted)}
@media(max-width:760px){
  body.mls-modern .m-nav{display:none}
  body.mls-modern .m-hdr .m-in{gap:12px}
  body.mls-modern .m-brand img{height:34px}
  body.mls-modern .m-searchband .m-in{flex-wrap:wrap}
  body.mls-modern .m-searchband input[type=submit]{width:100%}
}

/* ---------- hero + form ---------- */
body.mls-modern .m-hero{display:grid;grid-template-columns:1fr;gap:28px;padding:26px 0 8px}
@media(min-width:900px){body.mls-modern .m-hero{grid-template-columns:1.05fr .95fr;gap:44px;
  align-items:start;padding:36px 0 16px}}
body.mls-modern .m-hero h1{font-size:32px;line-height:1.15;margin:0 0 14px;letter-spacing:-.6px;
  color:var(--m-ink);border:0;padding:0;background:none}
@media(min-width:900px){body.mls-modern .m-hero h1{font-size:42px}}
body.mls-modern .m-hero h1 em{font-style:normal;color:var(--m-green)}
body.mls-modern .m-lede{font-size:18px;color:var(--m-muted);margin:0 0 22px;max-width:46ch}
/* 06/09/26. This was a pale green pill, --m-green-lt #e8f5ed, on a #f6f8f7 page. Once the
   page tint went to #e2ebe6 it was pale green on pale green and SR said the oval "doesn't
   work" any more. He is right and it is the SAME 1.05:1 fault as the homepage cards.
   White on the tint is 1.22:1, so the pill now reads as a raised chip like every other
   card on the site. The green stays where it belongs, in the figure itself. */
body.mls-modern .m-price{display:inline-flex;align-items:baseline;gap:10px;background:#fff;
  border:1px solid var(--m-line);border-radius:999px;padding:9px 18px;margin-bottom:22px;
  box-shadow:0 1px 2px rgba(16,32,24,.05),0 4px 14px rgba(16,32,24,.06)}
body.mls-modern .m-price b{font-size:24px;color:var(--m-green-dk);letter-spacing:-.5px}
body.mls-modern .m-price span{font-size:14px;color:var(--m-green-dk)}
body.mls-modern ul.m-ticks{list-style:none;margin:0 0 22px;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:8px 18px;font-size:15px}
@media(max-width:520px){body.mls-modern ul.m-ticks{grid-template-columns:1fr}}
body.mls-modern ul.m-ticks li{padding-left:26px;position:relative;color:#26332c}
body.mls-modern ul.m-ticks li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;
  border-radius:50%;background:var(--m-green);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8' fill='black'/><path d='M6.2 11.4 3.3 8.5l1.1-1.1 1.8 1.8 4.4-4.4 1.1 1.1z' fill='white'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8' fill='black'/><path d='M6.2 11.4 3.3 8.5l1.1-1.1 1.8 1.8 4.4-4.4 1.1 1.1z' fill='white'/></svg>") center/contain no-repeat}
body.mls-modern .m-chips{display:flex;flex-wrap:wrap;gap:10px}
body.mls-modern .m-chip{background:#fff;border:1px solid var(--m-line);border-radius:10px;
  padding:8px 13px;font-size:13px;color:var(--m-muted)}
body.mls-modern .m-chip b{color:var(--m-ink);font-size:15px}

body.mls-modern .m-card{background:#fff;border:1px solid var(--m-line);border-radius:var(--m-radius);
  box-shadow:var(--m-shadow);padding:26px}
@media(min-width:900px){body.mls-modern .m-card{position:sticky;top:20px;padding:30px}}
body.mls-modern .m-card h2{margin:0 0 4px;font-size:20px;letter-spacing:-.3px}
body.mls-modern .m-card .m-sub{color:var(--m-muted);font-size:14px;margin:0 0 20px}
body.mls-modern .m-field{margin-bottom:18px}
body.mls-modern .m-field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
body.mls-modern .m-field .m-opt{font-weight:400;color:var(--m-muted)}
body.mls-modern .m-field input[type=text],
body.mls-modern .m-field input[type=tel]{width:100%;padding:13px 14px;font-size:16px;
  border:1.5px solid var(--m-line);border-radius:10px;background:#fcfdfc;
  transition:border-color .15s,box-shadow .15s;max-width:none}
body.mls-modern .m-field input:focus{outline:0;border-color:var(--m-green);
  box-shadow:0 0 0 3px rgba(13,122,61,.14);background:#fff}
body.mls-modern .m-field .m-hint{font-size:13px;color:var(--m-muted);margin-top:6px}
body.mls-modern .m-err{background:#fdecec;border:1px solid #f3c2c2;color:#9d2020;
  border-radius:9px;padding:10px 13px;font-size:14px;margin-bottom:16px}
body.mls-modern .m-btn{display:block;width:100%;padding:15px 20px;border:0;border-radius:10px;
  cursor:pointer;background:var(--m-green);color:#fff;font-size:17px;font-weight:700;
  box-shadow:0 2px 0 var(--m-green-dk);transition:transform .06s,background .15s}
body.mls-modern .m-btn:hover{background:var(--m-green-dk)}
body.mls-modern .m-btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--m-green-dk)}
body.mls-modern .m-reassure{margin:14px 0 0;font-size:13px;color:var(--m-muted);text-align:center}

/* ---------- bands ---------- */
body.mls-modern .m-band{padding:34px 0}
body.mls-modern .m-band h2{font-size:24px;margin:0 0 20px;letter-spacing:-.4px;
  border:0;padding:0;background:none;color:var(--m-ink)}
body.mls-modern .m-steps{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){body.mls-modern .m-steps{grid-template-columns:repeat(3,1fr)}}
body.mls-modern .m-step{background:#fff;border:1px solid var(--m-line);
  border-radius:var(--m-radius);padding:20px}
body.mls-modern .m-step .m-n{display:inline-grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--m-green-lt);color:var(--m-green-dk);font-weight:800;
  font-size:14px;margin-bottom:11px}
body.mls-modern .m-step h3{margin:0 0 6px;font-size:16px}
body.mls-modern .m-step p{margin:0;font-size:14.5px;color:var(--m-muted)}
body.mls-modern .m-plans{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){body.mls-modern .m-plans{grid-template-columns:1fr 1fr}}
body.mls-modern .m-plan{background:#fff;border:1.5px solid var(--m-line);
  border-radius:var(--m-radius);padding:22px}
/* 06/09/26, SR: drop the yellow bar along the top and the green border, just have the
   left hand yellow bar. Same treatment as .m-honesty, which is the box he liked, so the
   two information panels on this page now match each other instead of being decorated
   two different ways.
   IT ALSO FIXES THE RULE RATHER THAN BREAKING IT. The style guide says a green border
   means "this is the one to pick", and this panel is not something you pick, it is a
   price you read. The green border belongs on a card that carries the action, which is
   the List door on the homepage. Guide section 6 updated to say exactly that. */
body.mls-modern .m-plan.m-pick{border-left:4px solid var(--m-yellow)}
body.mls-modern .m-plan .m-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--m-green-dk);background:var(--m-green-lt);
  border-radius:999px;padding:4px 10px;margin-bottom:10px}
body.mls-modern .m-plan .m-amt{font-size:30px;font-weight:800;letter-spacing:-.8px;margin:0 0 2px}
body.mls-modern .m-plan .m-per{color:var(--m-muted);font-size:14px;margin:0 0 10px}
body.mls-modern .m-plan p{margin:0;font-size:14.5px;color:var(--m-muted)}
body.mls-modern .m-honesty{background:#fff;border:1px solid var(--m-line);
  border-left:4px solid var(--m-yellow);border-radius:var(--m-radius);padding:24px}
body.mls-modern .m-honesty h2{font-size:19px;margin:0 0 10px}
body.mls-modern .m-honesty p{margin:0 0 12px;color:#33413a;font-size:15.5px}
body.mls-modern .m-honesty p:last-child{margin-bottom:0}
body.mls-modern .m-honesty a{color:var(--m-green-dk)}