/* The site's own styles, after Bootstrap (base.html). */

/* Evergreen and mint, in place of Bootstrap's blue: links, outline buttons
   and form controls take the green. */
:root {
  --ink: #0b3a2e; --accent: #145c47; --mint: #6ee0ae;
  --bs-primary: #145c47; --bs-primary-rgb: 20, 92, 71;
  --bs-primary-bg-subtle: #e2f5ec; --bs-primary-border-subtle: #9ed6bf;
  --bs-primary-text-emphasis: #0b3a2e;
  --bs-link-color: #145c47; --bs-link-color-rgb: 20, 92, 71;
  --bs-link-hover-color: #0b3a2e; --bs-link-hover-color-rgb: 11, 58, 46;
}
.btn-outline-primary {
  --bs-btn-color: #145c47; --bs-btn-border-color: #145c47;
  --bs-btn-hover-bg: #145c47; --bs-btn-hover-border-color: #145c47;
  --bs-btn-active-bg: #0b3a2e; --bs-btn-active-border-color: #0b3a2e;
  --bs-btn-disabled-color: #145c47; --bs-btn-disabled-border-color: #145c47;
  --bs-btn-focus-shadow-rgb: 20, 92, 71;
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus, .form-control:focus, .form-select:focus {
  border-color: #8fcfb6; box-shadow: 0 0 0 .25rem rgba(20, 92, 71, .25);
}
.hero { background: linear-gradient(160deg, var(--ink) 0%, var(--accent) 70%); color: #fff; }
.hero .badge-urgent { background: var(--mint); color: var(--ink); }
/* Our badges carry whole sentences; Bootstrap's nowrap default pushed
   them past the viewport on phones. */
.badge { white-space: normal; line-height: 1.35; }
.btn-accent { background: var(--mint); color: var(--ink); font-weight: 600; }
.btn-accent:hover { background: #95eac6; color: var(--ink); }
.step-number { width: 2.5rem; height: 2.5rem; background: var(--accent); color: #fff;
               border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
               font-weight: 700; }
/* The confirmation card is centred, so its code step is too. Only there:
   the standalone /verify/ page reads left to right. */
#get-help #code-step { text-align: center; }
#get-help #code-step .d-flex { justify-content: center; }
#get-help #code-step #new-email { max-width: 16rem; }
/* Highlighted so a wrong address is noticed here, not after the code never arrives. */
.sent-to { background: #c8f2de; color: var(--ink); padding: 0 .25em; border-radius: .2em;
           -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Request form: country and number on one line. The picker is as wide as
   the chosen country where the browser can size it that way, and the
   number drops below it rather than being squeezed. */
.phone-inline { display: flex; flex-wrap: wrap; gap: .5rem; }
.phone-inline .form-select { flex: 0 0 auto; width: 12rem; max-width: 100%; margin-bottom: 0 !important; }
@supports (field-sizing: content) {
  .phone-inline .form-select { width: auto; field-sizing: content; }
}
.phone-inline .form-control { flex: 1 1 8rem; min-width: 8rem; }
/* On a phone, a little less padding keeps "Germany +49" and a full German
   number on one line; anything longer takes two. Text stays 16px so iOS
   doesn't zoom in. */
@media (max-width: 400px) {
  .phone-inline { gap: .375rem; }
  .phone-inline .form-select { padding-left: .5rem; }
  .phone-inline .form-control { padding-left: .5rem; padding-right: .5rem; }
}
/* Urgency on the request form: three boxes side by side when the form is
   wide enough for them, one per line when it isn't, whatever the screen.
   The whole box is the label, so anywhere in it picks the answer. */
#lead-form-slot { container-type: inline-size; }
.choice-boxes { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@container (min-width: 30rem) { .choice-boxes { grid-template-columns: repeat(3, 1fr); } }
/* The form's four topics (live.starts): two by two wherever two fit. */
@container (min-width: 20rem) { .choice-boxes-2x2 { grid-template-columns: repeat(2, 1fr); } }
.choice-box { display: flex; gap: .6rem; align-items: flex-start; margin: 0; padding: .75rem;
              border: 1px solid var(--bs-border-color); border-radius: .5rem; cursor: pointer;
              line-height: 1.35; background: var(--bs-body-bg); }
.choice-box .form-check-input { flex-shrink: 0; margin-top: .15em; }
.choice-box:hover { border-color: var(--bs-primary-border-subtle); }
.choice-box:has(input:checked) { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle);
                                 box-shadow: 0 0 0 1px var(--bs-primary); }
.choice-box:has(input:focus-visible) { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.change-email > summary { list-style: none; }
.change-email > summary::-webkit-details-marker { display: none; }
/* Confirming swaps in only the confirmation, so the address offer has to go
   too. Where :has() is unsupported it stays, and the server ignores it. */
#code-step:has([data-track="email_verified"]) :is(.code-sent, .change-email, .email-notice) { display: none; }

/* Reassurance line on the hero — 50% white drops to 3.3:1 at the light
   end of the gradient, below AA for 14px text; 75% holds 5.2:1. */
.hero-note { color: rgba(255, 255, 255, .75); }
/* Bootstrap's .text-secondary on .bg-dark is 3.3:1. */
.footer-note { color: #adb5bd; }

/* Radios/checkboxes: 16px controls in a 24px row are an awkward thumb
   target. Roomier rows get each option close to the 44px guideline. */
.form-check-input { width: 1.15rem; height: 1.15rem; margin-top: .7rem; }
.form-check-label { display: block; padding: .65rem 0 .65rem .25rem; }

/* Whole-card links (stretched-link) carry no link styling, so on touch
   there's nothing to reveal they lead somewhere. The arrow is the cue. */
.card-link-item { transition: transform .12s ease, box-shadow .12s ease; }
.card-link-item:hover, .card-link-item:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(11, 58, 46, .12) !important;
}
/* Must sit on the heading, not the <a> — .stretched-link's own ::after is
   what makes the whole card clickable, so overriding it breaks the link. */
.card-link-item .card-title::after {
  content: " →"; color: var(--accent); opacity: .5; font-weight: 600;
}
/* The homepage's "I want to…" cards: the icon beside the title is cue enough. */
.card-link-item.card-no-arrow .card-title::after { content: none; }
.text-accent { color: var(--accent); opacity: .5; font-weight: 600; }
/* The homepage cards' icons (partials/icon.html), beside the title. */
.card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem;
             height: 2.75rem; border-radius: .75rem; background: #e2f5ec; color: var(--accent); }
.card-icon svg { width: 1.5rem; height: 1.5rem; }

/* Long-form guide copy: looser measure than UI text, and headings that
   don't sit flush to the viewport edge when the table of contents jumps. */
.guide-body { font-size: 1.075rem; line-height: 1.75; }
.guide-body p { margin-bottom: 1.15rem; }
.guide-body li { margin-bottom: .5rem; }
.guide-body h2 { scroll-margin-top: 1.5rem; }

/* Journeys (journey/*.html): steps as pills, the video slot, the offer to
   step in, and saved-state boxes. Colours from the palette above. */
/* The stepper: one row of numbered dots on a line, whatever the width.
   The line runs mint up to the current step. */
.journey-steps { list-style: none; margin: 0; padding: 0; display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.journey-steps li { position: relative; text-align: center; }
.journey-steps li + li::before { content: ""; position: absolute; top: 1rem; left: -50%; width: 100%;
                                 height: 2px; background: rgba(255, 255, 255, .25); }
.journey-steps li.before + li::before { background: var(--mint); }
.journey-steps a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
                   gap: .4rem; color: rgba(255, 255, 255, .8); text-decoration: none; font-size: .8rem; }
.journey-dot { width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center;
               justify-content: center; font-weight: 600; background: #17483b;
               border: 2px solid rgba(255, 255, 255, .35); color: #fff; }
.journey-steps li.before .journey-dot { border-color: var(--mint); }
.journey-steps li.current .journey-dot { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.journey-steps li.current .journey-label { color: #fff; font-weight: 600; }
.journey-steps a:hover .journey-dot { border-color: var(--mint); }
.journey-steps a:hover .journey-label { color: #fff; }
.video-slot { display: flex; align-items: center; gap: 1rem; padding: 1.5rem;
              border: 2px dashed #9ed6bf; border-radius: .75rem; background: #f2faf6; color: var(--ink); }
.video-slot-play { width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent); color: #fff;
                   display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.offer-card { padding: 1.75rem; border-radius: .75rem; color: #fff;
              background: linear-gradient(160deg, var(--ink) 0%, var(--accent) 100%); }
.offer-kicker { color: var(--mint); letter-spacing: .04em; }
.offer-note { color: rgba(255, 255, 255, .8); }
.save-box { background: #f2faf6; border: 1px solid #cfeadf; border-radius: .75rem; }
.portal-link { display: flex; flex-direction: column; height: 100%; padding: .75rem 1rem;
               border: 1px solid #cfeadf; border-radius: .75rem; background: #f2faf6;
               color: var(--ink); text-decoration: none; }
.portal-link:hover { border-color: var(--accent); color: var(--ink); }
.portal-link span { font-size: .8rem; color: #5f6b66; }
/* The shortlist's map (journey/_shortlist_map.html): a pin per place, a
   number when several homes share one, paler where the pin stands in for
   a town's or postcode's centre, grey when every home on it is dropped. */
.shortlist-map-canvas { height: 320px; border-radius: .75rem; overflow: hidden; border: 1px solid #cfeadf;
                        background: #f6f6f2; }
@media (max-width: 575.98px) { .shortlist-map-canvas { height: 260px; } }
.map-pin { width: 1.75rem; height: 1.75rem; padding: 0; border-radius: 50%; border: 3px solid #fff;
           background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700; line-height: 1;
           box-shadow: 0 1px 4px rgba(11, 58, 46, .45); cursor: pointer; }
.map-pin.is-near { background: #6aa892; }
.map-pin.is-out { background: #9aa39e; }
.map-pin:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.map-card { font-size: .9rem; color: var(--ink); }
.map-card-home + .map-card-home { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid #e3ece7; }
.map-card-home.is-out strong { text-decoration: line-through; }
.map-card-links { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .2rem; }
.map-card-near { margin-top: .6rem; }
.help-callout { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem;
                border-radius: .75rem; background: #e2f5ec; color: var(--ink); }
.help-callout-mark { width: 1.75rem; height: 1.75rem; border-radius: 50%; flex-shrink: 0;
                     display: inline-flex; align-items: center; justify-content: center;
                     background: var(--accent); color: #fff; font-weight: 700; }
/* Fields side by side (journey/_field.html): a line's labels, boxes and
   notes share rows (subgrid), so the boxes line up however many lines a
   label wraps to, each label sitting on its box. One a line on a phone. */
.fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.fields > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.fields > .field > .form-label { align-self: end; }
@media (min-width: 576px) {
  .fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tone-ok { background: #e2f5ec; color: #0b3a2e; }
.tone-warn { background: #fff3cd; color: #664d03; }
.tone- { background: #eef1f0; color: #3d4a45; }
.binding { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .5rem;
           border-radius: 1rem; white-space: nowrap; }
.binding-no { background: #e2f5ec; color: #0b3a2e; }
.binding-yes { background: #fde2e1; color: #7a1d1a; }
.binding-withdraw { background: #fff3cd; color: #664d03; }
/* Switches (the address search): Bootstrap's, sized back from the roomier
   checkboxes above, in the green. */
.form-switch { display: flex; align-items: center; gap: .5rem; min-height: 0; margin: 0; padding-left: 0; }
.form-switch .form-check-input { float: none; width: 2.25rem; height: 1.25rem; margin: 0; cursor: pointer; }
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238fcfb6'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch .form-check-label { padding: 0; font-size: .875rem; cursor: pointer; }
.video-slot-sm { padding: .75rem 1rem; gap: .75rem; border-width: 1px; }
/* A step's video (journey/_video.html): a thumbnail beside its title until
   it's played, then the player, centred, portrait, never wider than a phone
   nor taller than the screen. */
.step-video-card { padding: 1rem; border-radius: .75rem; background: #f2faf6; }
.step-video-mini { display: flex; gap: 1rem; align-items: center; }
.step-video-thumb { position: relative; flex: 0 0 96px; display: block; }
.step-video-thumb::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 2.5rem; height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem; border-radius: 50%;
  background: rgba(11, 58, 46, .8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M5 3.5v9l7.5-4.5z'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
}
.step-video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.step-video-card.is-open .step-video { width: min(100%, 360px, calc(80vh * 9 / 16)); margin-inline: auto; }
/* On a hub, in the hero (journey/hub.html): the card keeps its own dark text. */
.hero .step-video-card { color: var(--ink); max-width: 32rem; }
/* Where rates are (step 4): our own sparkline of the Bundesbank figures. */
.market-box { border: 1px solid #dce9e3; border-radius: .75rem; padding: 1rem; }
.spark { display: block; width: 100%; height: 48px; color: var(--accent); }
.rates-chart-canvas { width: 100%; height: 340px; }
/* Step 4's offers: a tile per offer to fill in, a card per result, and the
   offer's colour (--offer) on its dot and its chart line. */
.loan-box { max-width: 22rem; }
.offer-tile, .result-card { border: 1px solid #dce9e3; border-radius: .75rem; padding: 1rem 1.1rem; background: #fff; }
.offer-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--offer); flex-shrink: 0; }
.offer-field { margin-bottom: .6rem; }
.offer-field label { display: block; margin-bottom: .2rem; }
.result-card.is-lowest { border-color: #9ed6bf; box-shadow: 0 0 0 1px #9ed6bf; }
.result-payment { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--ink); }
.result-payment span { font-size: .9rem; font-weight: 400; color: #5f6b66; }
.result-lines { font-size: .9rem; }
.result-lines > div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0;
                      border-top: 1px solid #eef2f0; }
.result-lines dt { font-weight: 400; color: #5f6b66; }
.result-lines dd { margin: 0; font-weight: 600; white-space: nowrap; }
.offers-chart-canvas { width: 100%; height: 300px; }
@media (max-width: 575.98px) { .rates-chart-canvas { height: 280px; } }
/* A request's case number: a reference to quote, not a name. One click
   selects it whole, to paste into an email. */
.ref-code { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .8em; user-select: all; }
.request-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .75rem 0;
               border-bottom: 1px solid var(--bs-border-color); }
.request-row:last-child { border-bottom: 0; }
.video-slot-sm .video-slot-play { width: 2.25rem; height: 2.25rem; font-size: .8rem; }

/* Who, how they're paid, how we're paid, what happens next
   (journey/_disclosure.html): label and line side by side, stacked on a
   phone. .facts-dark on the offer card's dark green. */
.facts { display: grid; gap: .4rem; }
.facts > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .75rem; }
.facts dt { font-weight: 600; color: var(--ink); }
.facts dd { margin: 0; color: #3d4a45; }
.facts-dark dt { color: var(--mint); }
.facts-dark dd { color: rgba(255, 255, 255, .9); }
@media (max-width: 575.98px) { .facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* "How it works here" and the homepage's pay sentences: a tight list. */
.pros-list { padding-left: 1.1rem; }
.tool-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.tool-chips a { padding: .3rem .75rem; border: 1px solid #cfeadf; border-radius: 999px; background: #f2faf6;
                color: var(--ink); text-decoration: none; font-size: .85rem; }
.tool-chips a:hover { border-color: var(--accent); }
/* Financial planning's check-up (journey/financial-planning/_checkup.html): the
   state pension as a share of today's pay, one bar. */
.checkup-bar { height: 1rem; border-radius: 999px; background: #e2f5ec; overflow: hidden; }
.checkup-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.checkup-gap { font-size: 1.15rem; }
/* Planning for retirement: the three pillars stacked in one bar, a key for
   each, and the pension account's box (financial-planning/_pillars.html). */
.checkup-stack { display: flex; }
.checkup-stack > span { flex: none; border-radius: 0; }
.pillar-1, .checkup-stack > .pillar-1 { background: var(--accent); }
.pillar-2, .checkup-stack > .pillar-2 { background: #3f9c7a; }
.pillar-3, .checkup-stack > .pillar-3 { background: var(--mint); }
.pillar-legend li { display: flex; align-items: center; gap: .6rem; padding: .25rem 0; }
.pillar-key { width: .9rem; height: .9rem; border-radius: 3px; flex: none; }
.pillar-account { background: #e2f5ec; border-radius: .75rem; padding: 1rem 1.25rem; }
.pros-list li { margin-bottom: .35rem; }

/* A step's guide as a flow: numbered stages on a line, each with its gist
   and its action in view and the detail a click away, so a step reads as
   things to do, not an article. */
.guide-body .flow { list-style: none; margin: 0; padding: 0; counter-reset: flow; font-size: 1rem; line-height: 1.6; }
.guide-body .flow > li { position: relative; margin: 0; padding: 0 0 2.25rem 3rem; counter-increment: flow; }
.flow > li::before { content: counter(flow); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem;
                     border-radius: 50%; background: var(--accent); color: #fff; font-weight: 600; font-size: .9rem;
                     display: flex; align-items: center; justify-content: center; }
.flow > li::after { content: ""; position: absolute; left: calc(1rem - 1px); top: 2.5rem; bottom: .5rem;
                    width: 2px; background: #cfeadf; }
.guide-body .flow > li:last-child { padding-bottom: 0; }
.flow > li:last-child::after { display: none; }
.guide-body .flow-title { font-size: 1.2rem; font-weight: 700; line-height: 2rem; margin: 0 0 .5rem; }
.guide-body .flow p { margin-bottom: .75rem; }
.guide-body .flow li li { margin-bottom: .25rem; }
.flow ul, .flow ol { padding-left: 1.2rem; margin-bottom: .75rem; }
.flow-rows { border: 1px solid #dce9e3; border-radius: .75rem; margin-bottom: .75rem; overflow: hidden; }
.flow-rows > details + details { border-top: 1px solid #dce9e3; }
.flow-rows summary { display: flex; gap: .75rem; align-items: baseline; padding: .55rem 1rem; cursor: pointer;
                     list-style: none; }
.flow-rows summary::-webkit-details-marker { display: none; }
.flow-rows summary::after { content: "+"; margin-left: auto; color: var(--accent); font-weight: 700; }
.flow-rows details[open] > summary::after { content: "−"; }
.flow-rows summary:hover { background: #f2faf6; }
.flow-rows details > :not(summary) { margin: 0 1rem .75rem; font-size: .95rem; color: #3d4a45; }
.flow-count { color: #5f6b66; font-weight: 400; }
.flow-grid { columns: 2 14rem; column-gap: 2rem; }
.flow-grid li { break-inside: avoid; }
@media (max-width: 575.98px) {
  .guide-body .flow > li { padding-left: 2.5rem; }
  .flow > li::before { width: 1.75rem; height: 1.75rem; }
  .flow > li::after { left: calc(.875rem - 1px); top: 2.25rem; }
  .guide-body .flow-title { line-height: 1.75rem; }
  .portal-link { padding: .65rem .75rem; }
}

/* Buying property's key question (journey/_path_question.html): two
   choices side by side, the page's own marked, on every width. */
.path-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.path-choice { display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.75rem;
               padding: .5rem .75rem; border: 1px solid #cfeadf; border-radius: .75rem; background: #f2faf6;
               color: var(--ink); font-weight: 600; text-align: center; text-decoration: none; }
.path-choice:hover { border-color: var(--accent); color: var(--ink); }
.path-choice.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.path-choice.is-current::before { content: "✓"; }
/* On a hub's hero (journey/hub.html) the question sits on the green: the
   page's own choice in mint, the other outlined. */
.hero .path-choices { max-width: 28rem; }
.hero .path-choice { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); color: #fff; }
.hero .path-choice:hover { border-color: var(--mint); color: #fff; }
.hero .path-choice.is-current { background: var(--mint); border-color: var(--mint); color: var(--ink); }
/* The homepage card's two paths: links above the card's own (stretched) link. */
.card-paths { position: relative; z-index: 2; }

/* The property hubs' overview (journey/<slug>/_overview.html). What comes on
   top of the price as one bar drawn to scale (journey_views.buying_costs),
   its labels beside it, never only on hover; the range of the transfer tax
   by state, and an agent's share if there is one, drawn lighter. */
.cost-bar { display: flex; height: 1.75rem; border-radius: .5rem; overflow: hidden; background: #eef2f0; }
.cost-seg { height: 100%; flex: none; display: flex; align-items: center; }
.cost-price { background: #dfe7e3; }
.cost-price-label { padding: 0 .75rem; font-size: .8rem; font-weight: 600; color: #3d4a45; white-space: nowrap; }
.cost-tax { background: var(--accent); }
.cost-tax-more { background: repeating-linear-gradient(135deg, #3f8a73 0 6px, #7fb3a3 6px 12px); }
.cost-notary { background: #6f8fbf; }
.cost-agent { background: repeating-linear-gradient(135deg, #c9a15b 0 6px, #e3cc9e 6px 12px); }
.cost-legend { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .4rem; }
@media (min-width: 768px) { .cost-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.cost-legend li { display: flex; gap: .55rem; align-items: baseline; }
.cost-key { flex: none; width: .9rem; height: .9rem; border-radius: .2rem; transform: translateY(.12rem); }
.flow-rows summary .cost-key { display: inline-block; margin-right: .5rem; }
.cost-key.cost-tax { background: linear-gradient(90deg, var(--accent) 0 50%, #7fb3a3 50% 100%); }
/* The purchase as a timeline: numbered nodes on a line, as the step pages'
   stepper draws them, down the page on a phone and across it on a wide
   screen, each with its gist and a chip to its step. */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.timeline > li { position: relative; padding: 0 0 1.5rem 3rem; }
.timeline > li::before { content: ""; position: absolute; left: calc(1rem - 1px); top: 2.25rem; bottom: .25rem;
                         width: 2px; background: #cfeadf; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li:last-child::before { display: none; }
.timeline-dot { position: absolute; z-index: 1; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%;
                display: flex; align-items: center; justify-content: center; background: var(--accent);
                color: #fff; font-weight: 600; font-size: .9rem; }
.timeline-title { font-weight: 700; line-height: 1.3; margin: .3rem 0 .2rem; }
.timeline-gist { color: #3d4a45; font-size: .95rem; margin: 0 0 .5rem; }
.timeline-chip { display: inline-flex; align-items: center; min-height: 2rem; padding: .2rem .7rem;
                 border: 1px solid #cfeadf; border-radius: 999px; background: #f2faf6; color: var(--ink);
                 font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.timeline-chip:hover { border-color: var(--accent); color: var(--ink); }
@media (min-width: 992px) {
  .timeline { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); column-gap: 1rem; }
  .timeline > li, .timeline > li:last-child { padding: 2.75rem 0 0; text-align: center;
                                              display: flex; flex-direction: column; align-items: center; }
  .timeline-chip { margin-top: auto; }
  .timeline > li::before { left: 50%; top: calc(1rem - 1px); bottom: auto; width: calc(100% + 1rem); height: 2px; }
  .timeline-dot { left: 50%; transform: translateX(-50%); }
}
.callouts { display: grid; gap: .75rem; }
@media (min-width: 768px) { .callouts { grid-template-columns: 1fr 1fr; } }
.callout { padding: 1rem 1.1rem; border: 1px solid #cfeadf; border-radius: .75rem; background: #f2faf6; }
/* Buying to let's result (journey/buy-to-let/numbers.html): its two
   figures side by side, its tables one under the other on a phone. */
.let-figures { display: grid; gap: 1rem; }
@media (min-width: 576px) { .let-figures { grid-template-columns: 1fr 1fr; } }
.let-tables { display: grid; gap: 1rem; }
@media (min-width: 768px) { .let-tables { grid-template-columns: 1fr 1fr; } }
.let-rule + .let-rule { border-top: 1px solid #dce9e3; margin-top: .75rem; padding-top: .75rem; }
/* Phones: anything to tap at least 40px tall. Buttons get taller, and a
   link-style button that stands on its own line gets room above and below;
   one inside a sentence (.align-baseline) stays as it is. */
@media (max-width: 575.98px) {
  .btn:not(.btn-lg):not(.btn-sm) { --bs-btn-padding-y: .45rem; }
  .btn-sm { --bs-btn-padding-y: .55rem; }
  .form-select-sm, .form-control-sm { min-height: 2.5rem; }
  .btn-link.p-0:not(.align-baseline) { padding-top: .6rem !important; padding-bottom: .6rem !important; }
  .tool-chips a { display: inline-flex; align-items: center; min-height: 2.5rem; }
  .navbar .link-light, footer a { display: inline-block; padding-top: .55rem; padding-bottom: .55rem; }
}


/* --- The legal pages (legal/terms.html, privacy.html, imprint.html) --- */

/* The legal pages: short numbered sections, the gist first, lists and
   tables folded where they are reference. */
.legal h2 { font-size: 1.15rem; font-weight: 700; margin: 2rem 0 .6rem; scroll-margin-top: 1rem; }
.legal h3 { font-size: 1rem; font-weight: 700; margin: 1.1rem 0 .4rem; }
.legal p, .legal li { color: #3d4a45; }
.legal li { margin-bottom: .3rem; }
.legal-gist { background: #f2faf6; border: 1px solid #dce9e3; border-radius: .75rem; padding: 1rem 1.25rem; }
.legal-gist ul { margin: 0; padding-left: 1.1rem; }
.legal-toc { columns: 2 15rem; column-gap: 2rem; padding-left: 1.3rem; margin-bottom: 0; }
.legal-toc li { margin-bottom: .15rem; }
.legal table { font-size: .92rem; }
.legal table th { font-weight: 600; color: var(--ink); }
.legal details { border: 1px solid #dce9e3; border-radius: .6rem; padding: .5rem .9rem; margin-bottom: .75rem; }
.legal details > summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.legal details[open] > summary { margin-bottom: .5rem; }
.legal-object { border-left: 4px solid var(--accent); background: #f7faf9; padding: .75rem 1rem; margin: 1rem 0; }


/* --- The notary directory (notaries/*.html) --- */

/* The notary directory (notaries/*.html): the cities as tiles, then one
   entry per notary, all alike, the request form folded under its button. */
.city-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
             grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.city-list a { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
               min-height: 2.75rem; padding: .7rem 1rem; border: 1px solid #cfeadf; border-radius: .75rem;
               background: #f2faf6; color: var(--ink); font-weight: 600; text-decoration: none; }
.city-list a:hover { border-color: var(--accent); color: var(--ink); }
.city-count { font-weight: 400; }
.notary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.notary-entry { padding: 1.25rem; border: 1px solid #dce9e3; border-radius: .75rem; background: #fff; }
.notary-entry h2 { font-size: 1.2rem; font-weight: 700; margin: 0 0 .4rem; }
.notary-entry > p { margin: 0 0 .3rem; }
.notary-ask { margin-top: .9rem; }
.notary-ask > summary { list-style: none; display: inline-block; }
.notary-ask > summary::-webkit-details-marker { display: none; }
.notary-ask[open] > summary { margin-bottom: 1rem; }


/* --- The notary request kit (notaries/request.html) --- */

.kit-mail { white-space: pre-wrap; font: inherit; background: #fff; border: 1px solid #dce9e3; border-radius: .75rem;
            padding: 1.25rem; margin: 0; }
.kit-choices .form-check { margin-bottom: .25rem; }


/* --- The mini directories (directory/listing.html) --- */

/* The mini directories (directory/listing.html): the cities as a row of
   filters, then one entry per professional, all alike. */
.city-filter { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.city-filter a { display: inline-flex; align-items: baseline; gap: .5rem; min-height: 2.75rem; padding: .6rem 1rem;
                 border: 1px solid #cfeadf; border-radius: 999px; background: #f2faf6; color: var(--ink);
                 font-weight: 600; text-decoration: none; }
.city-filter a:hover { border-color: var(--accent); color: var(--ink); }
.city-filter a[aria-current] { border-color: var(--accent); background: #fff; }
.city-count { font-weight: 400; }
.directory-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.directory-entry { padding: 1.25rem; border: 1px solid #dce9e3; border-radius: .75rem; background: #fff; }
.directory-entry h2 { font-size: 1.2rem; font-weight: 700; margin: 0 0 .4rem; }
.directory-entry > p { margin: 0 0 .3rem; }
.entry-contact { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .6rem !important; }
.entry-contact a { display: inline-block; padding: .35rem 0; overflow-wrap: anywhere; }


/* --- The adviser application (intake/apply.html, status.html) --- */

/* A licence's register box shows once the licence is ticked; a browser
   without :has() shows them all, which still works. */
.licence:has(> .form-check input:not(:checked)) .reg { display: none; }
.licence:has(> .form-check input:checked) { border-color: var(--bs-primary-border-subtle) !important;
                                            background: var(--bs-primary-bg-subtle); }
.intake .flow .form-label { margin-bottom: .25rem; }


/* --- The adviser's requests (the adviser dashboard) --- */

/* Native <details>, not Bootstrap's collapse: only Bootstrap's CSS is loaded
   on this site, no JS bundle. <details> also stays keyboard-accessible and
   works with scripting off. */
.case-group { border-top: 1px solid #e3e6ea; padding-top: 1rem; margin-bottom: 1.75rem; }
.case-group > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline;
  gap: .6rem; font-size: 1.35rem; font-weight: 700; color: var(--ink);
}
.case-group > summary::-webkit-details-marker { display: none; }
.case-group > summary::before {
  content: "\25B8"; color: #6c757d; font-size: 1rem;
  transition: transform .15s ease; display: inline-block;
}
.case-group[open] > summary::before { transform: rotate(90deg); }
.case-group > summary:hover { color: var(--accent); }
.case-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.case-group > summary .count {
  font-size: .85rem; font-weight: 600; color: #6c757d;
  background: #f1f3f5; border-radius: 999px; padding: .1rem .55rem;
}
.case-group .group-body { padding-top: .9rem; }


/* --- The adviser's outcome form (on the adviser dashboard) --- */

.outcome-form > summary { list-style: none; }
.outcome-form > summary::-webkit-details-marker { display: none; }


/* --- The private health insurance check (private_health_check.html) --- */

/* The decision and the situations as the journeys' folded rows (base.html's
   .flow and .flow-rows), white on this page's light bands. Each situation's
   verdict sits in view as a chip: green where private cover is open,
   outlined where a condition applies, grey where public insurance is
   compulsory. The words carry the verdict; the colour only helps a scan. */
#why .flow-rows, #who-can .flow-rows { background: #fff; }
#why .flow-rows summary > span, .ph-situation { min-width: 0; overflow-wrap: break-word; }
#why .flow-rows details > p, #who-can .flow-rows details > p { overflow-wrap: break-word; }
/* Who and the verdict side by side from tablets up, the verdicts in one
   column; one under the other on a phone. */
.ph-situation { flex: 1 1 auto; display: grid; gap: .35rem .75rem; align-items: center; }
@media (min-width: 768px) { .ph-situation { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ph-verdict { justify-self: start; padding: .1rem .6rem; border-radius: 1rem; font-size: .95rem;
              font-weight: 600; line-height: 1.4; color: var(--ink); }
.ph-verdict-open { background: var(--bs-primary-bg-subtle); }
.ph-verdict-if { background: #fff; box-shadow: inset 0 0 0 1px var(--bs-primary-border-subtle); }
.ph-verdict-no { background: #eef1f0; color: #3d4a45; }


/* --- Folded stages on journey steps (journey/_fold_stages.html) --- */

.flow-stage-toggle { all: unset; box-sizing: border-box; display: flex; width: 100%; gap: .75rem;
                     align-items: baseline; cursor: pointer; }
.flow-stage-toggle::after { content: "+"; margin-left: auto; color: var(--accent); font-weight: 700; }
.flow-stage-toggle[aria-expanded="true"]::after { content: "−"; }
.flow-stage-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: .25rem; }
.guide-body .flow > li.is-folded { padding-bottom: 1.25rem; }
.guide-body .flow > li.is-folded .flow-title { margin-bottom: 0; }


/* --- The insurance overview (area/insurance/_overview.html) --- */

/* Yes, it depends, no: the flow's circles carry a mark, not a number. The
   mark is decoration (its empty alt text after the slash); the heading
   says it in words. */
.cover-flow > li::before { content: "✓"; content: "✓" / ""; }
.cover-flow > li.cover-depends::before { content: "?"; content: "?" / ""; background: #fff3cd; color: #664d03; }
.cover-flow > li.cover-skip::before { content: "✕"; content: "✕" / ""; background: #eef1f0; color: #3d4a45; }
/* A long German name breaks where its parts meet (a soft hyphen in the
   markup), never widening the row; a name that fits moves down whole. */
.cover-flow summary > span { min-width: 0; overflow-wrap: anywhere; }


/* --- An area's situations as chips (partials/area_more.html) --- */

.situation-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
                   justify-content: center; gap: .5rem; }
.situation-chips li { padding: .35rem .85rem; border: 1px solid #cfeadf; border-radius: 999px;
                      background: #f2faf6; color: #3d4a45; font-size: .9rem; }


/* --- Charts (journey/investing/mistakes.html, pension/three-pillars.html,
   health-insurance/lifetime-costs.html) --- */

.fees-chart-canvas { width: 100%; height: 320px; }
/* On a phone the legend wraps above the plot (investing_fees_chart.js): room for both. */
@media (max-width: 575.98px) { .fees-chart-canvas { height: 300px; } }
.pension-chart-canvas { width: 100%; height: 300px; }
@media (max-width: 575.98px) { .pension-chart-canvas { height: 240px; } }
.health-chart-canvas { width: 100%; height: 340px; }
@media (max-width: 575.98px) { .health-chart-canvas { height: 280px; } }


/* --- Public and private side by side (journey/health-insurance/how-it-works.html) --- */

/* Two lanes in the lifetime chart's colours (health_costs_chart.js): public
   green, private gold. Each fact in short and bold, its detail beneath. From
   576px the topic sits beside its two cells; on a phone, above them. */
.vs { display: grid; gap: .5rem; }
.vs-row { display: grid; grid-template-columns: minmax(7.5rem, .7fr) 1fr 1fr; gap: .5rem; }
.vs-topic { align-self: center; font-weight: 700; color: var(--ink); }
/* The lanes' names stay in view while the rows scroll past. */
.vs-head { position: sticky; top: 0; z-index: 2; background: #fff; padding: .25rem 0; }
.vs-lane { padding: .8rem 1rem; border-radius: .75rem; font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.vs-lane span { display: block; margin-top: .15rem; font-size: .95rem; font-weight: 500; }
.vs-lane.vs-public { background: var(--accent); color: #fff; }
.vs-lane.vs-private { background: #c9a15b; color: var(--ink); }
.vs-cell { padding: .8rem 1rem; border-radius: .75rem; }
/* Who can join, what you get, what you pay: each group's name above its rows. */
.vs-group { margin-top: 1rem; color: var(--ink); }
.vs-head + .vs-group { margin-top: .5rem; }
.vs-cell strong { display: block; font-size: 1.05rem; color: var(--ink); }
.vs-more { display: block; margin-top: .2rem; color: #3d4a45; }
.vs-cell.vs-public { background: #eaf6f0; }
.vs-cell.vs-private { background: #f8f0e0; }
@media (max-width: 575.98px) {
  .vs-row { grid-template-columns: 1fr 1fr; gap: .375rem; }
  .vs-topic { grid-column: 1 / -1; margin-top: .6rem; }
  .vs-head .vs-topic { display: none; }
  .vs-lane, .vs-cell { padding: .65rem .75rem; }
  .vs-more { font-size: .95rem; }
}


/* --- Buying to let's case, drawn (journey/buy-to-let/why.html) --- */

/* Three moves joined by a line: let it, save tax every year, sell tax-free.
   Down the page on a phone; across from tablets up, each step centred under
   its mark. The last mark in mint, the payoff. */
.promise { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.promise > li { position: relative; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; align-content: start; }
.promise-mark { grid-row: 1 / span 3; position: relative; z-index: 1; display: inline-flex; align-items: center;
                justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent); color: #fff; }
.promise-mark svg { width: 1.5rem; height: 1.5rem; }
.promise > li:last-child .promise-mark { background: var(--mint); color: var(--ink); }
.promise-when { font-weight: 700; color: var(--accent); }
.promise h3 { margin: .1rem 0 .3rem; font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.promise p { margin: 0; color: #3d4a45; }
.promise > li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3rem;
                                        bottom: -1.5rem; width: 2px; background: #cfeadf; }
@media (min-width: 768px) {
  .promise { grid-template-columns: repeat(3, 1fr); }
  .promise > li { grid-template-columns: 1fr; row-gap: .4rem; justify-items: center; text-align: center; }
  .promise-mark { grid-row: auto; margin-bottom: .25rem; }
  /* From this mark's edge to the next one's, with a little air either side. */
  .promise > li:not(:last-child)::after { left: calc(50% + 2rem); right: calc(-50% + .5rem); top: calc(1.5rem - 1px);
                                          bottom: auto; width: auto; height: 2px; }
}
/* The mortgage request form (partials/request_form.html): ranges two by two
   wherever two fit, one per line on a narrow card. */
.request-card { container-type: inline-size; }
.request-card .choice-boxes { grid-template-columns: 1fr; }
@container (min-width: 22rem) { .request-card .choice-boxes { grid-template-columns: repeat(2, 1fr); } }
.request-card .choice-box { color: var(--bs-body-color); }

/* Guides (guide_request.html, guide_search_box.html): the phone bar that keeps
   the request card one tap away, and the search box. */
.guide-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1070;
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid #dce2e9;
  box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .08);
}
.guide-sticky[hidden] { display: none; }
@media print { .guide-sticky { display: none !important; } }
.guide-search { max-width: 36rem; margin-inline: auto; }
.guide-search .input-group-text svg { width: 20px; height: 20px; fill: none; stroke: #52657d; stroke-width: 1.8; stroke-linecap: round; }
.guide-search .form-control:focus { box-shadow: none; }
.guide-search .input-group:focus-within { box-shadow: 0 0 0 .25rem rgba(20, 92, 71, .2) !important; border-radius: .5rem; }