:root{
    --navy-950:#070B14;
    --navy-900:#0D1526;
    --navy-850:#101A30;
    --navy-800:#141F38;
    --navy-700:#1E2C4D;
    --navy-600:#2C3F68;
    --navy-line:#24314F;
    --gold-500:#D4AF6A;
    --gold-400:#E0C083;
    --gold-300:#F0DBA8;
    --gold-glow:rgba(212,175,106,.35);
    --ivory-100:#F6F3EC;
    --ivory-200:#EDE8DC;
    --slate-400:#8C97AE;
    --slate-500:#8794AC;
    --emerald-400:#3FCB8C;
    --emerald-glow:rgba(63,203,140,.18);
    --rose-400:#F2707A;
    --rose-glow:rgba(242,112,122,.18);
    --radius-lg:22px;
    --radius-md:14px;
    --radius-sm:9px;
    --font-display:'Space Grotesk','Space Grotesk Fallback','Inter', system-ui, sans-serif;
    --font-body:'Inter', system-ui, -apple-system, sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:
      radial-gradient(1100px 620px at 12% -10%, rgba(212,175,106,.10), transparent 60%),
      radial-gradient(900px 700px at 100% 0%, rgba(44,63,104,.35), transparent 55%),
      var(--navy-950);
    color:var(--ivory-100);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }
  h1,h2,h3,h4{font-family:var(--font-display); margin:0; letter-spacing:-.01em;}
  p{margin:0;}
  .num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;}
  a{color:inherit;}
  ::selection{background:var(--gold-glow); color:var(--ivory-100);}
  :focus-visible{outline:2px solid var(--gold-400); outline-offset:3px;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  .hidden{display:none !important;}

  /* The top nav's markup + CSS live in the SHARED component
     (js/nav-component.js + css/nav-component.css) - the same header
     every page renders. The inline copy that used to live here is what
     made the homepage's nav diverge from the rest of the site (different
     padding, breakpoint and wrap behaviour = the "buttons not locked in"
     defect). Do not re-add nav styles here. */
  /* Metrics (padding/border-radius/font-size/font-weight) now come from
     the canonical .btn in css/shared-ui.css; only the hover-transition
     polish, unique to this page and admin.html, stays local. */
  .btn{transition:transform .15s ease, box-shadow .15s ease;}
  .btn-gold{background:linear-gradient(180deg, var(--gold-400), var(--gold-500)); color:#1A1305; box-shadow:0 6px 20px -6px var(--gold-glow);}
  .btn-gold:hover{transform:translateY(-1px); box-shadow:0 10px 26px -6px var(--gold-glow);}
  .btn-ghost{background:transparent; border:1px solid var(--navy-600); color:var(--ivory-100);}
  .btn-ghost:hover{border-color:var(--gold-500);}
  .btn:disabled{opacity:.55; cursor:not-allowed; transform:none !important;}

  /* Deal Score badge - server-computed classification shown with every
     result (Strong / Stacks up / Weak / Check inputs). */
  .deal-score{display:inline-block; margin-top:12px; padding:5px 14px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;}
  .deal-score-strong{background:var(--emerald-glow); color:var(--emerald-400); border:1px solid var(--emerald-400);}
  .deal-score-ok{background:rgba(212,175,106,.12); color:var(--gold-300); border:1px solid var(--gold-500);}
  .deal-score-weak{background:var(--rose-glow); color:var(--rose-400); border:1px solid var(--rose-400);}
  .deal-score-implausible{background:var(--rose-glow); color:var(--rose-400); border:1px dashed var(--rose-400);}
  .deal-score-incomplete{background:rgba(138,150,172,.12); color:var(--slate-400); border:1px dashed var(--slate-400);}
  .deal-score-reasons{font-size:12.5px; color:var(--slate-400); margin-top:8px; line-height:1.5;}

  .hero{padding:76px 0 56px;}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; color:var(--gold-300);
    padding:7px 14px; border:1px solid var(--navy-600); border-radius:999px; margin-bottom:20px;
  }
  .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--gold-500); box-shadow:0 0 10px var(--gold-500);}
  .hero h1{font-size:clamp(34px, 4.6vw, 54px); line-height:1.06; font-weight:700;}
  .hero h1 em{font-style:normal; color:var(--gold-400);}
  .hero p.lede{margin-top:20px; font-size:18px; color:var(--slate-400); max-width:46ch;}
  .hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
  .hero-stats{display:flex; gap:32px; margin-top:44px;}
  .hero-stats div b{display:block; font-family:var(--font-display); font-size:22px;}
  .hero-stats div span{font-size:12.5px; color:var(--slate-500);}

  .ticker-card{
    position:relative; border-radius:var(--radius-lg); padding:2px;
    background:linear-gradient(160deg, var(--gold-500), transparent 40%, var(--navy-600) 90%);
  }
  .ticker-inner{
    background:linear-gradient(180deg, var(--navy-850), var(--navy-900));
    border-radius:calc(var(--radius-lg) - 2px);
    padding:28px; min-height:300px; position:relative; overflow:hidden;
  }
  .ticker-label{font-size:12px; color:var(--slate-500); text-transform:uppercase; letter-spacing:.09em; display:flex; justify-content:space-between; align-items:center;}
  .ticker-live{display:inline-flex; align-items:center; gap:6px; color:var(--emerald-400);}
  .ticker-live i{width:6px; height:6px; border-radius:50%; background:var(--emerald-400); box-shadow:0 0 8px var(--emerald-400); animation:pulse 1.6s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
  .ticker-strategy{font-family:var(--font-display); font-size:24px; font-weight:600; margin-top:18px;}
  .ticker-row{display:flex; justify-content:space-between; align-items:baseline; margin-top:26px; padding-top:18px; border-top:1px solid var(--navy-line);}
  .ticker-row + .ticker-row{border-top:none; margin-top:14px; padding-top:0;}
  .ticker-row .l{color:var(--slate-400); font-size:13.5px;}
  .ticker-row .v{font-family:var(--font-display); font-size:19px;}
  .v.pos{color:var(--emerald-400);}
  .v.neg{color:var(--rose-400);}
  .ticker-dots{display:flex; gap:6px; margin-top:26px;}
  .ticker-dots span{width:20px; height:3px; border-radius:2px; background:var(--navy-600); transition:background .3s;}
  .ticker-dots span.on{background:var(--gold-500);}
  @media (prefers-reduced-motion: reduce){ .ticker-live i{animation:none;} }

  .section{padding:64px 0;}
  .section-head{max-width:640px; margin-bottom:40px;}
  .section-head .eyebrow{margin-bottom:14px;}
  .section-head h2, .section-head h1{font-size:clamp(26px,3vw,36px);}
  .section-head p{color:var(--slate-400); margin-top:12px; font-size:16px;}

  .auth-card{
    max-width:440px; margin:0 auto; background:var(--navy-900); border:1px solid var(--navy-line);
    border-radius:var(--radius-lg); padding:34px;
  }
  .auth-toggle{display:flex; border:1px solid var(--navy-600); border-radius:999px; padding:4px; margin-bottom:26px;}
  .auth-toggle button{
    flex:1; background:none; border:none; padding:9px; border-radius:999px; color:var(--slate-400);
    font-family:var(--font-body); font-weight:600; font-size:13.5px; cursor:pointer;
  }
  .auth-toggle button.active{background:var(--gold-500); color:#1A1305;}
  .auth-field{margin-bottom:14px;}
  .auth-field label{display:block; font-size:13px; color:var(--slate-400); margin-bottom:6px;}
  .auth-field input{
    width:100%; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--navy-600);
    background:var(--navy-800); color:var(--ivory-100); font-family:var(--font-body); font-size:14.5px;
  }
  .auth-field input:focus{border-color:var(--gold-500); outline:none;}
  .auth-field select{
    width:100%; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--navy-600);
    background:var(--navy-800); color:var(--ivory-100); font-family:var(--font-body); font-size:14.5px;
  }
  .auth-field select:focus{border-color:var(--gold-500); outline:none;}
  .password-input{position:relative;}
  .password-input input{padding-right:46px;}
  .password-toggle{position:absolute; right:1px; top:1px; bottom:1px; width:44px; display:grid; place-items:center; border:0; border-radius:0 8px 8px 0; background:transparent; color:var(--slate-400); cursor:pointer;}
  .password-toggle:hover{color:var(--gold-500);}
  .password-toggle:focus-visible{outline:2px solid var(--gold-500); outline-offset:-3px;}
  .password-toggle svg{width:20px; height:20px; pointer-events:none;}
  .password-toggle .eye-closed{display:none;}
  .password-toggle[aria-pressed="true"] .eye-open{display:none;}
  .password-toggle[aria-pressed="true"] .eye-closed{display:block;}
  .auth-error{color:var(--rose-400); font-size:13px; margin-top:4px; margin-bottom:10px; min-height:1em;}
  /* The authenticator step (showAuthenticatorStep): only the headline and its own form are left on screen. */
  .dash-hero[data-step="authenticator"] > :not(.label):not(#authHeadline):not(#totpForm){display:none !important;}
  .auth-note{font-size:12px; color:var(--slate-500); margin-top:16px; text-align:center;}
  /* The in-form question for a Functional tool the visitor has not allowed
     (reCAPTCHA, a provider's sign-in): one sentence and one button, in the
     place the tool would appear. See refreshFunctionalGates(). The button
     is outlined, not gold, so "Create account" stays the one gold button
     in the form; the gold edge shows when it is pressed before answering. */
  .fn-gate{margin:0 0 14px; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--navy-600); background:var(--navy-800); font-size:13px; line-height:1.5; color:var(--slate-400);}
  .fn-gate:focus{outline:none;}
  .fn-gate p{margin:0 0 10px;}
  .fn-gate.fn-gate-busy p{margin:0;}
  .fn-gate .fn-gate-btn{width:100%; padding:9px 16px; border:1px solid var(--gold-500); background:transparent; color:var(--gold-300);}
  .fn-gate .fn-gate-btn:hover{background:rgba(212,175,106,.10);}
  .fn-gate.fn-gate-nudge{border-color:var(--gold-500);}
  .fn-gate + .g-recaptcha:empty{margin-bottom:0 !important;} /* beats its inline margin while it holds nothing */
  /* The one sentence shown IN PLACE OF the forgot-password form while an
     emailed code cannot reach anybody (paintEmailCodeState). */
  .auth-closed{margin:0 0 14px; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--navy-600); background:var(--navy-800); font-size:13.5px; line-height:1.5; color:var(--ivory-100);}
  /* One plain line ABOVE the sign-up fields, not in place of them: quieter
     than .auth-closed on purpose, because nothing is being refused. */
  .auth-deferred{margin:0 0 14px; font-size:13px; line-height:1.55; color:var(--slate-400);}
  #socialDivider.divider-off{display:none !important;} /* its "or" would lead to that sentence, not to a form */
  /* The password rule under a new-password box, a success line, and the
     small text buttons of the reset steps (AUTH-02, AUTH-06). */
  .auth-hint{margin:6px 0 0; font-size:12.5px; line-height:1.4; color:var(--slate-400);}
  .auth-terms{margin:0 0 12px; font-size:12px; line-height:1.5; color:var(--slate-400);}
  .auth-terms a{color:var(--gold-300); text-decoration:underline;}
  .auth-hint.auth-hint-bad{color:var(--rose-400);}
  .auth-field input[aria-invalid="true"]{border-color:var(--rose-400);}
  .auth-success{margin:0 0 14px; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid rgba(63,203,140,.45); background:rgba(63,203,140,.08); color:var(--emerald-400); font-size:13px; line-height:1.5;}
  .auth-info{color:var(--emerald-400); font-size:13px; line-height:1.5; margin:0 0 10px;}
  .auth-info:empty, #socialSignInError:empty{display:none;}
  .auth-links{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 18px; margin-top:12px;}
  .auth-link{background:none; border:0; padding:0; font-family:var(--font-body); font-size:12.5px; color:var(--slate-400); text-decoration:underline; cursor:pointer;}
  .auth-link:hover{color:var(--ivory-100);}
  .auth-link:focus-visible{outline:2px solid var(--gold-500); outline-offset:2px; border-radius:3px;}
  .auth-link:disabled{opacity:.55; cursor:default; text-decoration:none;}

  .strategy-tabs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px;}
  .strategy-tab{
    display:flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
    border:1px solid var(--navy-600); background:var(--navy-900); color:var(--slate-400);
    font-size:14px; font-weight:600; cursor:pointer; transition:all .18s;
  }
  .strategy-tab svg{width:16px; height:16px; opacity:.75;}
  .strategy-tab:hover{border-color:var(--gold-500); color:var(--ivory-100);}
  .strategy-tab.active{background:linear-gradient(180deg, var(--gold-400), var(--gold-500)); color:#1A1305; border-color:transparent;}
  .strategy-tab.active svg{opacity:1;}

  /* Same pill language as .strategy-tab above, sized for a tighter row of
     short option labels rather than icon+label strategy tabs. */
  .chip-row{display:flex; flex-wrap:wrap; gap:9px;}
  .chip{
    padding:9px 16px; border-radius:999px; border:1px solid var(--navy-600);
    background:var(--navy-900); color:var(--slate-400); font-family:var(--font-body);
    font-size:13px; font-weight:600; cursor:pointer; transition:all .18s;
  }
  .chip:hover{border-color:var(--gold-500); color:var(--ivory-100);}
  .chip.chip-active{background:linear-gradient(180deg, var(--gold-400), var(--gold-500)); color:#1A1305; border-color:transparent;}

  .calc-grid{display:grid; grid-template-columns:1.5fr .7fr; gap:28px; align-items:start;}
  @media (max-width:980px){ .calc-grid{grid-template-columns:1fr;} }
  /* THE CALCULATOR'S PLACE, HELD BEFORE ITS FORM IS DRAWN (QA SP-10). The strategy form and the results column are
     drawn by this page's script, so until then the grid is empty and everything below it (stamp duty, the report form,
     the footer) sits too high and jumps down when the form appears. These are a little under the height of the
     SHORTEST strategy form measured on 10 Oct 2026 (753px wide, 1381px on a phone), so the space is always filled and
     never leaves a gap under a short form. CSS only: no calculator code is involved. */
  #calculator .calc-grid{min-height:720px;}
  @media (max-width:980px){ #calculator .calc-grid{min-height:1300px;} }
  .sdlt-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start;}
  .sdlt-grid .section-head{margin-bottom:0;}
  @media (max-width:980px){ .sdlt-grid{grid-template-columns:1fr;} }
  /* PHONE-WIDTH GUARD for the calculator layout.
     A grid item's default min-width is `auto`, which resolves to its
     content's min-content width - so a single child that cannot shrink
     (a long unbroken address, an input's intrinsic size, a wide table)
     makes the TRACK wider than the phone and the whole PAGE scrolls
     sideways, however narrow the viewport gets. #formColumn and .panel
     are named because they are what the overflow reports pointed at.
     Measured with a full-tree scan at 342, 360 and 375px, signed in and
     out, on all twelve strategies: document.scrollWidth equals
     innerWidth. This keeps that true as the panels gain content; it is
     inert while nothing inside is too wide to fit. */
  .calc-grid > *, .sdlt-grid > *, .field-grid > *, .metric-grid > *{min-width:0;}
  .panel{
    background:var(--navy-900); border:1px solid var(--navy-line); border-radius:var(--radius-lg);
    padding:28px;
    /* Only bites on a word that would otherwise overflow its box, so
       ordinary copy is unaffected. */
    min-width:0; overflow-wrap:break-word;
  }
  .panel + .panel{margin-top:22px;}
  /* #priceCheckPanel sits between Money Up Front and Financing but isn't
     itself a .panel, so the sibling-spacing rule above never matches on
     either side of it - it rendered flush against both neighbours. */
  #priceCheckPanel{margin-top:22px;}
  #priceCheckPanel + .panel{margin-top:22px;}
  .panel h3{font-size:15px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold-300); margin-bottom:18px; display:flex; justify-content:space-between; align-items:center;}
  .panel h3 .hint{font-size:11.5px; text-transform:none; letter-spacing:0; color:var(--slate-500); font-weight:400; font-family:var(--font-body);}
  .field-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media (max-width:520px){ .field-grid{grid-template-columns:1fr;} }
  /* OCCUPANCY ROW. Nine steps side by side need roughly 900px of DASHBOARD
     (nine cells of about 89px for a ten-character value such as
     GBP 12,345.67 at 13px, eight gaps and the hero's padding), but beside the
     form the dashboard is far narrower:
     290px at a 1009px viewport. With repeat(9, 1fr) each track's minimum was
     its text's width, so the row stayed 621px wide inside a 236px box and the
     whole page scrolled to 1324px (measured 16 Sep 2026; 1389px with other
     figures). The decision is therefore made on the dashboard's own width
     (a size container, see .dash-sticky), not the viewport's: nine across
     only where they fit, three by three everywhere else. minmax(0, 1fr) lets
     a track shrink below its text, and a value may wrap as a last resort
     rather than ever widen the page. */
  .occupancy-grid{display:grid; grid-template-columns:repeat(9, minmax(0, 1fr)); gap:6px;}
  .occupancy-grid > *{min-width:0; overflow-wrap:anywhere;}
  .occupancy-grid .occ-cell{text-align:center; padding:10px 4px; border-radius:8px;}
  .occupancy-grid .occ-label{font-size:11px; color:var(--slate-400);}
  .occupancy-grid .occ-value{font-size:13px; font-weight:600;}
  /* In the narrow column a cell is about 73px: tighter padding and a figure
     that scales with the dashboard keep a ten-character value (up to
     GBP 99,999.99 a month) on one line at a 290px dashboard. */
  @container dashboard (max-width: 899px){
    .occupancy-grid{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px;}
    .occupancy-grid .occ-cell{padding:8px 2px;}
    .occupancy-grid .occ-value{font-size:clamp(10.5px, 3.85cqi, 13px);}
  }
  @media (max-width:600px){ .occupancy-grid{grid-template-columns:repeat(3, minmax(0, 1fr));} }
  .field label{display:block; font-size:13px; color:var(--slate-400); margin-bottom:7px;}
  .field-input{position:relative;}
  .field-input .prefix{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--slate-500); font-size:14px; pointer-events:none;}
  .field-input .suffix{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--slate-500); font-size:14px; pointer-events:none;}
  .field input, .field select{
    width:100%; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--navy-600);
    background:var(--navy-800); color:var(--ivory-100); font-family:var(--font-body); font-size:14.5px;
    transition:border-color .15s;
  }
  .field input.has-prefix{padding-left:26px;}
  .field input.has-suffix{padding-right:68px;}
  /* Same prefix-inside-the-box treatment as .field-input .prefix above,
     for the one field (Stamp Duty's Purchase Price) still using its own
     markup instead of the shared fieldHtml() renderer. */
  .input-with-unit{position:relative;}
  .input-with-unit .unit-prefix{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--slate-500); font-size:14px; pointer-events:none;}
  .input-with-unit input{padding-left:26px;}
  .field input:focus, .field select:focus{border-color:var(--gold-500); outline:none;}
  /* Hide browser native up/down number spin buttons ONLY on fields with unit suffixes (e.g. Project Timeline 'months') to prevent overlap */
  .field input.has-suffix::-webkit-outer-spin-button,
  .field input.has-suffix::-webkit-inner-spin-button,
  .input-with-unit input::-webkit-outer-spin-button,
  .input-with-unit input::-webkit-inner-spin-button,
  input[data-field="projectTimelineMonths"]::-webkit-outer-spin-button,
  input[data-field="projectTimelineMonths"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .field input.has-suffix,
  input[data-field="projectTimelineMonths"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  /* A size container so what sits inside can respond to the DASHBOARD's
     width, which is not the viewport's: beside the form it is a third of it.
     inline-size containment also means the column's width never depends on
     its content, so nothing in here can stretch the calc-grid track. */
  .dash-sticky{position:sticky; top:96px; container:dashboard / inline-size;}
  .calc-auto-note{margin:0 0 10px; font-size:12.5px; color:var(--slate-400); line-height:1.5;}
  .dash-hero{
    background:linear-gradient(160deg, var(--navy-800), var(--navy-900));
    border:1px solid var(--navy-line); border-radius:var(--radius-lg); padding:26px;
  }
  .dash-hero .label{font-size:12.5px; color:var(--slate-400); text-transform:uppercase; letter-spacing:.07em;}
  /* 40px wherever the dashboard has room; smaller in a narrow column so a
     seven-figure or negative figure (about 13 characters) still fits a 290px
     dashboard. Wrapping is the last resort, never a wider page. */
  .dash-hero .big{font-family:var(--font-display); font-size:clamp(26px, 13cqi, 40px); margin-top:8px; overflow-wrap:anywhere;}
  .dash-hero .sub{font-size:13.5px; color:var(--slate-500); margin-top:6px;}
  .metric-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px;}
  .metric-card{background:var(--navy-800); border:1px solid var(--navy-line); border-radius:var(--radius-md); padding:16px;}

  .sdlt-card{
    max-width:560px; background:var(--navy-900); border:1px solid var(--navy-line);
    border-radius:var(--radius-lg); padding:28px;
  }
  /* COMPANY CHECK (CO-01): the full content width, not the 560px stamp
     duty card, which left the right half of the page empty. */
  #companyCheck .sdlt-card{max-width:none;}
  .ch-search{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:14px; align-items:end;}
  .ch-search .field{margin:0; min-width:0;}
  .ch-search .btn{white-space:nowrap; padding-left:28px; padding-right:28px;}
  #chResult:not(:empty){margin-top:22px;}
  .ch-matches{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;}
  .ch-pick{display:block; width:100%; min-width:0; text-align:left; background:var(--navy-800); border:1px solid var(--navy-line); border-radius:10px; padding:12px 14px; cursor:pointer; color:var(--ivory-100); font:inherit; overflow-wrap:anywhere;}
  .ch-pick:hover, .ch-pick:focus-visible{border-color:var(--gold-500);}
  .ch-people{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; margin-top:16px;}
  .ch-people > *{min-width:0; overflow-wrap:anywhere;}
  .ch-heading{font-size:12.5px; color:var(--slate-400); text-transform:uppercase; letter-spacing:.05em;}
  @media (max-width:640px){
    .ch-search{grid-template-columns:1fr;}
    .ch-search .btn{width:100%;}
    .ch-matches, .ch-people{grid-template-columns:1fr;}
  }
  .sdlt-result-hero{
    background:linear-gradient(160deg, var(--navy-800), var(--navy-900));
    border:1px solid var(--gold-500); border-radius:var(--radius-lg); padding:24px; text-align:center;
  }
  .sdlt-result-hero .label{font-size:12px; color:var(--slate-400); text-transform:uppercase; letter-spacing:.07em;}
  .sdlt-result-hero .value{font-family:var(--font-display); font-size:44px; color:var(--gold-300); margin-top:8px;}
  .sdlt-result-hero .sub{font-size:13px; color:var(--slate-500); margin-top:8px;}
  .metric-card .label{font-size:12px; color:var(--slate-500);}
  /* Beside the form each card has about 77px for its figure, and a fixed 20px
     put a ten-character value such as GBP 58,500.00 19px outside its card; a
     bigger figure pushed the page wider (HMO strategies at 1009px, measured 16
     Sep 2026). The size follows the dashboard's width (15px at a 290px
     dashboard, 20px from about 385px), and a figure longer than even that
     wraps inside its card instead of widening the page. */
  .metric-card .value{font-family:var(--font-display); font-size:clamp(14px, 5.2cqi, 20px); margin-top:6px; overflow-wrap:anywhere;}
  .metric-card .value.na{color:var(--slate-500); font-size:15px;}
  .metric-card .hint{font-size:11px; line-height:1.4; color:var(--slate-500); margin-top:5px;}
  /* CALC-01: the Loan Amount card put a six-figure sum (GBP 150,000.00)
     on every mortgaged strategy, and at 15px it broke across two lines
     mid-number in the narrow results column. Tighter padding and a figure
     scaled to the column keep eleven to thirteen characters on one line. */
  @container dashboard (max-width: 420px){
    #dashboard .metric-card{padding:12px;}
    #dashboard .metric-card .value{font-size:clamp(11.5px, 4.3cqi, 20px);}
  }

  /* Saved deals table - a real <table>, styled: rounded card wrapper,
     roomy row padding, a hover highlight per row, and a pill-styled
     strategy cell, instead of the browser's bare default table look. */
  .deals-table-wrap{background:var(--navy-900); border:1px solid var(--navy-line); border-radius:var(--radius-lg); overflow-x:auto;}
  .deals-table{width:100%; min-width:640px; border-collapse:collapse; font-size:13.5px;}
  .deals-table thead th{
    text-align:left; padding:14px 18px; color:var(--slate-400); font-size:11.5px; text-transform:uppercase;
    letter-spacing:.05em; font-weight:600; border-bottom:1px solid var(--navy-line); white-space:nowrap;
  }
  .deals-table thead th.num, .deals-table td.num{text-align:right;}
  .deals-table tbody td{padding:16px 18px; color:var(--ivory-100); border-bottom:1px solid var(--navy-line); vertical-align:middle;}
  .deals-table tbody tr:last-child td{border-bottom:none;}
  .deals-table tbody tr{transition:background .15s;}
  .deals-table tbody tr:hover{background:var(--navy-800);}
  .deals-table .deal-name{font-weight:600;}
  .deals-table .strategy-pill{display:inline-block; padding:3px 11px; border-radius:999px; background:var(--navy-800); border:1px solid var(--navy-line); color:var(--gold-300); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;}
  .deals-table .row-delete{padding:6px 14px; font-size:12px; font-weight:600; background:transparent; border:1px solid var(--rose-400); color:var(--rose-400); border-radius:999px; cursor:pointer; font-family:var(--font-body);}
  .deals-table .row-delete:hover{background:rgba(242,112,122,.1);}
  .deals-table .deal-error{color:var(--rose-400);}
  /* MY DEALS LAYOUT (J-06, 10 Oct 2026). Three screens, one list.
     LAPTOP: the table stays, but the row's buttons WRAP inside their cell (they were one unbroken line, wider than
     the cell, so the last ones were cut off and the table scrolled sideways with no sign that it could), and the
     table's edges fade where more is hidden, so a sideways scroll announces itself.
     PHONE: each deal is a card, its figures labelled, and its actions tucked into one Actions menu, because a
     table row of seven columns and five buttons does not fit a hand. Edit is still one tap away (SAVE-05). */
  .deals-table-wrap{position:relative; background:
    linear-gradient(to right, var(--navy-900) 30%, rgba(13,21,38,0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--navy-900) 30%, rgba(13,21,38,0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) right center / 14px 100% no-repeat scroll,
    var(--navy-900);}
  .sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
  .deals-table .deal-actions-cell{min-width:230px; max-width:300px;}
  .deals-table .deal-actions{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end;}
  .deals-table .deal-actions .btn{padding:5px 12px; font-size:12.5px; margin:0;}
  .deals-table .deal-menu-btn{display:none;}
  .deals-table .deal-rename{cursor:pointer;}
  /* The name the deal is saved under, asked for next to the Save button (J-05). */
  .deal-name-field{margin-top:16px;}
  .deal-name-field label{display:block; font-size:12.5px; color:var(--slate-400); margin-bottom:5px;}
  .deal-name-field input{width:100%; padding:10px 13px; border-radius:9px; border:1px solid var(--navy-600); background:var(--navy-800); color:var(--ivory-100); font-family:var(--font-body); font-size:14px;}
  .deal-name-field .hint{display:block; margin-top:5px; font-size:12px; color:var(--slate-500);}
  @media (max-width:640px){
    .deals-table-wrap{background:none; border:none; overflow:visible;}
    .deals-table{min-width:0; display:block;}
    .deals-table thead{display:none;}
    .deals-table tbody{display:block;}
    .deals-table tbody tr{display:block; background:var(--navy-900); border:1px solid var(--navy-line); border-radius:14px; padding:14px 16px; margin-bottom:14px;}
    .deals-table tbody tr:hover{background:var(--navy-900);}
    .deals-table tbody td{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 0; border-bottom:none; text-align:right;}
    .deals-table tbody td::before{content:attr(data-label); color:var(--slate-500); font-size:12px; text-transform:uppercase; letter-spacing:.04em; text-align:left; flex:none;}
    .deals-table tbody td.deal-name{display:block; text-align:left; font-size:15.5px; padding:0 0 8px;}
    .deals-table tbody td.deal-name::before{content:none;}
    .deals-table tbody td[data-label=""]::before{content:none;}
    .deals-table tbody td.report-cell{display:block; min-width:0; text-align:left;}
    .deals-table tbody td.report-cell::before{display:block; margin-bottom:6px;}
    .deals-table tbody td.deal-error, .deals-table tbody td[colspan]{display:block; text-align:left;}
    .deals-table tbody td.deal-actions-cell{display:block; position:relative; min-width:0; max-width:none; text-align:left; padding-top:10px;}
    .deals-table .deal-menu-btn{display:inline-flex; align-items:center; gap:8px; width:100%; justify-content:center; padding:10px 14px; font-size:13.5px;}
    .deals-table .deal-actions{display:none; flex-direction:column; flex-wrap:nowrap; gap:6px; margin-top:8px; padding:8px; border:1px solid var(--navy-line); border-radius:12px; background:var(--navy-800);}
    .deals-table .deal-actions.open{display:flex;}
    .deals-table .deal-actions .btn, .deals-table .deal-actions .row-delete{width:100%; text-align:left; padding:11px 14px; font-size:14px;}
    .deals-table .deal-fold{display:none !important;}
    .deals-table .deal-col-strategy, .deals-table .deal-col-return, .deals-table .deal-col-report{display:flex;}
    .deals-table tbody td.deal-col-report{display:block;}
    .deals-table tbody td.compliance-status{display:block; text-align:left;}
    .deals-table tbody td.compliance-status::before{display:block; margin-bottom:4px;}
  }
  /* MY DEALS FITS ITS BOX (DEF_169, 22 Oct 2026). The list's sideways scroll came back below about 1,300px: seven
     columns, the report buttons given 240px and the actions 230px, inside a 640px-minimum table. Measured on the
     list's own box (a container query), so the sidebar counts:
     - 1,200px and wider: the full table, the table itself given no minimum width;
     - 800px to 1,200px (a laptop): four columns. The strategy sits under the deal's name, the return under the profit, and the
       View, Download and Send buttons above the row's actions (the same buttons, drawn there instead);
     - under 800px (a tablet, a laptop at 1,024px with the sidebar open): the phone's cards, one deal each, figures
       labelled, actions in one Actions menu. */
  /* The Admin page's Team and Roles tables are lines on a phone, not a table wider than the screen (DEF_ADMIN_137 check). */
  @media (max-width:640px){
    #ownerDashboard .deals-table-wrap table, #ownerDashboard .deals-table-wrap tbody, #ownerDashboard .deals-table-wrap tr, #ownerDashboard .deals-table-wrap td{display:block; width:100%;}
    #ownerDashboard .deals-table-wrap thead{display:none;}
    #ownerDashboard .deals-table-wrap tr{padding:8px 0;}
    #ownerDashboard .deals-table-wrap td{padding:3px 8px !important; text-align:left !important; white-space:normal !important; overflow-wrap:anywhere;}
  }
  #myDealsContent{container-type:inline-size;}
  #myDealsContent .deals-table{min-width:0;}
  .deals-table .deal-fold{display:none;}
  .deals-table .deal-fold .strategy-pill{white-space:normal;}
  .deals-table .deal-fold-report .report-actions{justify-content:flex-end; margin-bottom:8px;}
  @container (max-width: 1199px){
    .deals-table .deal-col-strategy, .deals-table .deal-col-return, .deals-table .deal-col-report{display:none;}
    .deals-table .deal-fold{display:block; margin-top:6px; font-weight:400;}
    .deals-table thead th, .deals-table tbody td{padding-left:12px; padding-right:12px;}
    .deals-table td.report-cell{min-width:0;}
    .deals-table .deal-actions-cell{min-width:0; max-width:none; width:34%;}
  }
  @container (max-width: 799px){
    #myDealsContent .deals-table-wrap{background:none; border:none; overflow:visible;}
    .deals-table{min-width:0; display:block;}
    .deals-table thead{display:none;}
    .deals-table tbody{display:block;}
    .deals-table tbody tr{display:block; background:var(--navy-900); border:1px solid var(--navy-line); border-radius:14px; padding:14px 16px; margin-bottom:14px;}
    .deals-table tbody tr:hover{background:var(--navy-900);}
    .deals-table tbody td{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 0; border-bottom:none; text-align:right;}
    .deals-table tbody td::before{content:attr(data-label); color:var(--slate-500); font-size:12px; text-transform:uppercase; letter-spacing:.04em; text-align:left; flex:none;}
    .deals-table tbody td.deal-name{display:block; text-align:left; font-size:15.5px; padding:0 0 8px;}
    .deals-table tbody td.deal-name::before{content:none;}
    .deals-table tbody td[data-label=""]::before{content:none;}
    .deals-table tbody td.report-cell{display:block; min-width:0; text-align:left;}
    .deals-table tbody td.report-cell::before{display:block; margin-bottom:6px;}
    .deals-table tbody td.deal-error, .deals-table tbody td[colspan]{display:block; text-align:left;}
    .deals-table tbody td.deal-actions-cell{display:block; position:relative; min-width:0; max-width:none; text-align:left; padding-top:10px;}
    .deals-table .deal-menu-btn{display:inline-flex; align-items:center; gap:8px; width:100%; justify-content:center; padding:10px 14px; font-size:13.5px;}
    .deals-table .deal-actions{display:none; flex-direction:column; flex-wrap:nowrap; gap:6px; margin-top:8px; padding:8px; border:1px solid var(--navy-line); border-radius:12px; background:var(--navy-800);}
    .deals-table .deal-actions.open{display:flex;}
    .deals-table .deal-actions .btn, .deals-table .deal-actions .row-delete{width:100%; text-align:left; padding:11px 14px; font-size:14px;}
    .deals-table .deal-fold{display:none !important;}
    .deals-table .deal-col-strategy, .deals-table .deal-col-return, .deals-table .deal-col-report{display:flex;}
    .deals-table tbody td.deal-col-report{display:block;}
    .deals-table tbody td.compliance-status{display:block; text-align:left;}
    .deals-table tbody td.compliance-status::before{display:block; margin-bottom:4px;}
    .deals-table .deal-actions-cell{width:auto;}
    .deals-table .deal-fold-report{display:none !important;}
  }

  .badge{display:inline-block; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; margin-top:8px;}
  .badge.pass{background:var(--emerald-glow); color:var(--emerald-400);}
  .badge.fail{background:var(--rose-glow); color:var(--rose-400);}
  .callout{margin-top:16px; padding:14px 16px; border-radius:var(--radius-md); background:rgba(212,175,106,.08); border:1px solid rgba(212,175,106,.25); font-size:13.5px; color:var(--gold-300);}
  /* stretch, not center (r8, 28 Oct 2026): when "Create a free account" wraps on a narrow results column, See plans
     grows to the same height with its label in the middle, instead of a shorter pill floating beside a taller one. */
  .dash-actions{display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; margin-top:18px;}
  /* DEF_172: Create account + See plans share one height and label centre (ghost has a border; gold gets a matching transparent one so the text does not sit higher). */
  .dash-actions .btn{flex:1; padding:11px 16px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; text-align:center; box-sizing:border-box; line-height:1.25; border-width:1px; border-style:solid; text-decoration:none;}
  .dash-actions .btn-gold{border-color:transparent;}
  .dash-actions .btn-ghost{border-color:var(--navy-600);}
  #saveStatus{font-size:13px; margin-top:10px; min-height:1em;}

  .lead-panel{background:linear-gradient(160deg, var(--navy-800), var(--navy-900)); border:1px solid var(--navy-line); border-radius:var(--radius-lg); padding:34px;}
  .lead-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px;}
  @media (max-width:640px){ .lead-grid{grid-template-columns:1fr;} }

  /* The cookie choice is NOT styled here any more. It is the shared bar in
     js/site-footer.js (15 Sep 2026), the one consent UI on every page;
     the centred pop-up that used to live here blocked the whole page. */
  #authModal{position:fixed; inset:0; z-index:1050; background:rgba(4,7,14,.78); display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto;}
  #authModal.hidden{display:none;}
  /* The modal itself scrolls independently (overflow-y:auto above), but
     without this the page underneath stayed scrollable too - on a page
     taller than the viewport (nearly always, here) that left the browser's
     own scrollbar sitting there behind the overlay, doing nothing useful
     since the modal blocks all clicks to the page anyway. */
  body.modal-open{overflow:hidden;}
  .auth-modal-card{position:relative; background:var(--navy-900); border:1px solid var(--navy-line); border-radius:18px; padding:30px 26px 26px; max-width:430px; width:100%; box-shadow:0 24px 70px rgba(0,0,0,.55); max-height:92vh; overflow-y:auto;}
  /* authPromptHTML()'s root .dash-hero carries its own background/border/
     padding - right at home as the calculator's standalone side panel,
     but doubled up with .auth-modal-card here it rendered as a bordered
     box nested inside another bordered box, with padding stacked twice.
     Flattened to a single card when it's inside the modal. */
  .auth-modal-card .dash-hero{background:none; border:none; padding:0;}
  .auth-modal-close{position:absolute; top:12px; right:14px; width:32px; height:32px; display:grid; place-items:center; background:none; border:none; color:var(--slate-400); font-size:24px; line-height:1; cursor:pointer; border-radius:50%; transition:background .15s, color .15s;}
  .auth-modal-close:hover{color:var(--ivory-100); background:var(--navy-800);}
  /* C2 (30 Oct 2026): on a phone the pop-up's 20px and 26px side padding left
     about 268px at 360px wide, so the Google button (384px) and the reCAPTCHA
     box (304px) ran past the card's edge. Under 480px the card fills the
     screen less 8px a side and keeps 16px inside: 312px at 360px, which both
     fit (renderGoogleButton draws Google's at the width there is). */
  @media (max-width:479px){
    #authModal{padding:8px;}
    .auth-modal-card{max-width:none; padding:24px 16px 18px; border-radius:14px; max-height:calc(100dvh - 16px);}
    .auth-modal-close{top:8px; right:8px;}
  }
  /* Our own "Continue with Google" (startGoogleSignIn), drawn in Google's
     own colours so it reads as the same button Google's script then draws. */
  .google-own-btn{width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; margin-bottom:10px; min-height:44px; border-radius:9px; border:1px solid #dadce0; background:#fff; color:#3c4043; font-family:var(--font-body); font-size:14.5px; font-weight:600; cursor:pointer;}
  .google-own-btn:hover{background:#f7f8f8;}
  .google-own-btn:disabled{cursor:progress; opacity:.75;}
  .google-own-btn:focus-visible{outline:2px solid var(--gold-500); outline-offset:2px;}

  /* Generic in-app confirmation popup - same overlay/card language as
     #authModal above, used in place of the browser's own confirm() dialog
     wherever a "are you sure?" is needed. */
  #confirmModal{position:fixed; inset:0; z-index:1200; background:rgba(4,7,14,.72); display:flex; align-items:center; justify-content:center; padding:20px;}
  #confirmModal.hidden{display:none;}
  .confirm-modal-card{background:var(--navy-900); border:1px solid var(--navy-line); border-radius:18px; padding:28px 26px; max-width:380px; width:100%; box-shadow:0 24px 70px rgba(0,0,0,.55); text-align:center;}
  .confirm-modal-card p{font-size:14.5px; color:var(--ivory-100); line-height:1.5; margin-bottom:22px;}
  .confirm-modal-actions{display:flex; gap:10px;}
  .confirm-modal-actions .btn{flex:1;}

  /* showFormModal() - the share-link dialog on My Deals and the owner
     console's forms. It builds <div class="overlay"><div class="modal-card">
     but NOTHING styled those classes, so the "dialog" was a static,
     unstyled block appended after the footer - some 3,900px below the
     table the person had just clicked in. That is the whole of DEF_083 /
     DEF_093 ("Share is clickable but does nothing"): the link was created
     and shown, just off-screen. Same overlay/card language as the modals
     above so it reads as one family. */
  #adminFormModal.overlay{position:fixed; inset:0; z-index:1200; background:rgba(4,7,14,.72); display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto;}
  #adminFormModal .modal-card{position:relative; background:var(--navy-900); border:1px solid var(--navy-line); border-radius:18px; padding:28px 26px 24px; width:100%; box-shadow:0 24px 70px rgba(0,0,0,.55); max-height:92vh; overflow-y:auto;}
  #adminFormModal .modal-close{position:absolute; top:12px; right:14px; width:32px; height:32px; display:grid; place-items:center; background:none; border:none; color:var(--slate-400); font-size:24px; line-height:1; cursor:pointer; border-radius:50%; transition:background .15s, color .15s;}
  #adminFormModal .modal-close:hover{color:var(--ivory-100); background:var(--navy-800);}

  /* THE REPORT VIEWER (owner's instruction, 9 Sep 2026). "View" opens the
     report to READ, in the browser, saving nothing - so it needs far more
     room than the form modal and its own rules rather than a "wide"
     variant of one built for four input fields. The PDF is shown from a
     blob URL in an iframe: opening a new tab after an awaited fetch is
     what popup blockers exist to stop, and a blocked tab looks exactly
     like a broken button. */
  #reportViewerModal.overlay, #reportPreviewModal.overlay{position:fixed; inset:0; z-index:1200; background:rgba(4,7,14,.82); display:flex; align-items:center; justify-content:center; padding:18px;}
  #reportViewerModal .viewer-card, #reportPreviewModal .viewer-card{position:relative; display:flex; flex-direction:column; background:var(--navy-900); border:1px solid var(--navy-line); border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.55); width:min(1000px, 100%); height:min(92vh, 100%); overflow:hidden;}
  #reportViewerModal .viewer-head, #reportPreviewModal .viewer-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--navy-line);}
  #reportViewerModal .viewer-title, #reportPreviewModal .viewer-title{font-family:var(--font-display); font-size:16px; margin:0; flex:1 1 220px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  #reportViewerModal iframe, #reportPreviewModal iframe{flex:1; width:100%; border:0; background:var(--navy-800);}
  #reportViewerModal .viewer-foot, #reportPreviewModal .viewer-foot{padding:9px 18px; font-size:12px; color:var(--slate-500); border-top:1px solid var(--navy-line);}
  @media (max-width:640px){ #reportViewerModal.overlay, #reportPreviewModal.overlay{padding:0;} #reportViewerModal .viewer-card, #reportPreviewModal .viewer-card{border-radius:0; height:100%;} }

  /* The three report buttons on a deal row. The cell is given enough room
     for one line of them: without the min-width the column collapses to
     the width of "REPORT" and stacks View above Download above Send,
     which triples the height of every row. The table wrapper already
     scrolls sideways, so widening the column costs nothing. Wrapping is
     kept as the last resort on a genuinely narrow screen. */
  .deals-table td.report-cell{min-width:240px;}
  .deals-table .report-actions{display:flex; flex-wrap:wrap; gap:6px;}
  .deals-table .report-actions .btn{padding:5px 11px; font-size:12.5px; white-space:nowrap;}
  #adminFormModal label{display:block; font-size:13px; color:var(--slate-400); margin:10px 0 6px;}
  #adminFormModal input:not([type="checkbox"]), #adminFormModal select, #adminFormModal textarea{width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--navy-600); background:var(--navy-800); color:var(--ivory-100); font-family:var(--font-body); font-size:14px;}

  /* Percentage inputs carry min/max and an inline message (DEF_DA_054):
     a 250% deposit or a -5% fee used to be accepted silently and only
     surfaced as a server refusal in the results panel. */
  .field input[aria-invalid="true"]{border-color:var(--rose-400);}
  .field-msg{font-size:12px; color:var(--rose-400); margin-top:6px; line-height:1.4; min-height:0;}
  .field-msg:empty{display:none;}
  .field-msg.adjusted{color:var(--gold-300);}
  .field-hint{font-size:11.5px; color:var(--slate-500); margin-top:5px; line-height:1.45;}
  .stamp-duty-used{border-color:rgba(138,150,172,.35); background:var(--navy-800); color:var(--ivory-100);}
  .stamp-duty-used .sd-basis{color:var(--slate-400); margin-top:4px; font-size:12.5px; line-height:1.5;}
  .stamp-duty-used .sd-note{color:var(--slate-400); margin-top:6px; font-size:12.5px; line-height:1.5;}
  .stamp-duty-used .sd-warn{color:var(--rose-400); margin-top:8px; font-size:12.5px; line-height:1.5; font-weight:600;}

  /* COUNCIL TAX helper (council-tax track): sits under the Council Tax
     field and only fills it. The wrapper spans the grid row so the helper
     does not leave an empty cell beside the field (the same reason the
     Bank of England strip widens Mortgage Rate). */
  .ct-wrap{grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px;}
  @media (max-width:520px){ .ct-wrap{grid-template-columns:1fr;} }
  .ct-helper{grid-column:1/-1; border:1px dashed var(--navy-600); border-radius:var(--radius-sm); padding:10px 12px;}
  .ct-helper .ct-lead{font-size:12.5px; color:var(--slate-400); margin-bottom:8px; line-height:1.4;}
  .ct-helper .ct-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
  .ct-helper input, .ct-helper select{padding:8px 10px; border-radius:var(--radius-sm); border:1px solid var(--navy-600); background:var(--navy-800); color:var(--ivory-100); font-family:var(--font-body); font-size:13.5px; min-width:0;}
  .ct-helper input[data-ct="postcode"]{width:9.5em;}
  .ct-helper input[data-ct="capitalValue"]{width:9em;}
  .ct-helper .btn{padding:8px 16px; font-size:13px;}
  .ct-helper .ct-link{background:none; border:0; padding:0; margin-top:8px; font-family:var(--font-body); font-size:12px; color:var(--slate-400); text-decoration:underline; cursor:pointer;}
  .ct-helper .ct-link:hover{color:var(--ivory-100);}
  .ct-caption{font-size:12.5px; color:var(--slate-400); margin-top:8px; line-height:1.45;}
  .ct-caption:empty{display:none;}
  .ct-caption .ct-main{color:var(--ivory-100);}
  .ct-caption .ct-small{display:block; color:var(--slate-500); font-size:11px; margin-top:4px;}
  .ct-caption.ct-error{color:var(--rose-400);}
  /* The serviced-accommodation rating note, and the "no parish council
     here" choice; the checkbox must not inherit the text inputs' padding. */
  .ct-helper .ct-sa{font-size:11.5px; color:var(--slate-500);}
  .ct-caption .ct-noparish{display:flex; gap:8px; align-items:flex-start; margin-top:6px; color:var(--ivory-100); cursor:pointer;}
  .ct-caption .ct-noparish input{padding:0; margin:2px 0 0; width:auto; flex:none; accent-color:var(--gold-500);}

  /* Mobile app download prompt - phones only, shown once per 30 days. */
  /* The app download bar: one slim line at the bottom, never over the hero or a form (see initAppPrompt). */
  #appDownloadPrompt{position:fixed; left:0; right:0; bottom:0; z-index:900; height:56px; box-sizing:border-box; display:flex; align-items:center; gap:10px; padding:0 8px 0 16px; background:var(--navy-900); border-top:1px solid var(--navy-line);}
  #appDownloadPrompt.hidden{display:none;}
  .app-bar-text{flex:1; min-width:0; font-size:13px; color:var(--ivory-100); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .app-bar-get{flex-shrink:0; display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:10px; background:var(--gold-500); color:var(--navy-950); font-size:13px; font-weight:700; text-decoration:none;}
  .app-prompt-later{flex-shrink:0; width:44px; height:44px; background:none; border:none; color:var(--slate-400); font-size:26px; line-height:1; cursor:pointer;}
  body.has-app-bar{padding-bottom:64px;}

  /* Mobile friendliness - one consolidated block. */
  @media (max-width:760px){
    .wrap{padding-left:16px; padding-right:16px;}
    .section{padding:44px 0;}
    .hero{padding:44px 0 36px;}
    h1{font-size:30px;}
    h2, .section-head h1{font-size:23px;}
    .lede{font-size:15px;}
    .hero-stats > div b{font-size:20px;}
    .dash-sticky{position:static;}
    .sdlt-card{padding:18px;}
    .panel{padding:16px;}
    /* Verified via automated overflow scan: input's default flex min-width
       (browser intrinsic content size, not 0) refused to shrink enough for
       the "Subscribe" button beside it, pushing the button past the
       viewport edge and forcing the whole page to scroll sideways at
       narrow widths. Stack them instead of shrinking them. */
    #newsletterForm{flex-wrap:wrap;}
    #newsletterForm input, #newsletterForm button{flex:1 1 100%;}
  }
  .check-row{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--slate-400); margin-top:10px;}
  #leadStatus{margin-top:16px; font-size:13.5px;}
  .badge.pro{display:inline-block; background:rgba(212,175,106,.15); border:1px solid var(--gold-500); color:var(--gold-300); font-size:10.5px; font-weight:700; letter-spacing:.06em; padding:2px 10px; border-radius:999px; vertical-align:middle;}

  .blog-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:18px;}
  .blog-card{background:var(--navy-900); border:1px solid var(--navy-line); border-radius:var(--radius-lg); padding:22px; display:flex; flex-direction:column; gap:10px;}
  .blog-card .source-row{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--slate-500); text-transform:uppercase; letter-spacing:.05em;}
  .blog-card h3{font-size:17px; line-height:1.35; font-weight:600;}
  .blog-card .blurb{font-size:13.5px; color:var(--slate-400); line-height:1.5; flex:1;}
  .blog-card a.read-more{font-size:13px; color:var(--gold-300); text-decoration:none; font-weight:600; margin-top:auto;}
  .blog-card a.read-more:hover{text-decoration:underline;}
  .blog-empty{color:var(--slate-500); text-align:center; padding:40px 0; grid-column:1/-1;}

  /* Phone text floor: nothing smaller than 12px (4 Nov 2026). Desktop sizes are unchanged. */
  @media (max-width:768px){
    .panel h3 .hint, .metric-card .hint, .occupancy-grid .occ-label, .deals-table th, .badge, .field-hint,
    .ct-caption .ct-small, .ct-helper .ct-sa{font-size:12px;}
  }