/* ==========================================================================
   Spatial Eye - design system
   ========================================================================== */

:root {
  /* Colours follow the logo: navy #142C43, teal #167D8D, light teal #2094A4. */
  --ink:        #142C43;
  --ink-soft:   #24384D;
  --muted:      #5B6B79;
  --muted-2:    #7A8894;
  --brand:      #167D8D;
  --brand-dark: #0F6473;
  --brand-tint: #E7F3F5;
  /* The main call to action is logo navy, turning teal on hover. */
  --cta:        #142C43;
  --cta-hover:  #167D8D;
  /* Text that sits ON a brand-coloured fill. White over the logo navy and teal in
     light mode; near-black over the light teal the dark palette uses, where
     white would land at about 1.2:1 and be unreadable. */
  --on-brand:   #FFFFFF;
  --accent:     #2094A4;
  --accent-tint:#E9F5F7;
  --bg:         #FAFCFD;
  --surface:    #FFFFFF;
  --surface-2:  #F1F5F7;
  --line:       #DDE5EA;
  --line-soft:  #EBF0F3;
  --danger:     #B23B3B;

  --radius:   14px;
  --radius-s: 9px;
  --radius-l: 22px;
  --shadow-s: 0 1px 2px rgba(10,27,42,.06), 0 2px 6px rgba(10,27,42,.04);
  --shadow-m: 0 2px 6px rgba(10,27,42,.06), 0 12px 28px -12px rgba(10,27,42,.18);
  --shadow-l: 0 4px 12px rgba(10,27,42,.07), 0 28px 60px -24px rgba(10,27,42,.30);

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1140px;
  --gut: clamp(18px, 4vw, 36px);
}

/* Dark palette. Defined twice on purpose: once for the visitor who never chose
   (system preference), once for the visitor who pressed the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #EEF2F5;
    --ink-soft:   #C9D4DC;
    --muted:      #9AA9B5;
    --muted-2:    #7F8D99;
    --brand:      #43BAC6;
    --brand-dark: #63D0DA;
    --brand-tint: #0F2A31;
    --on-brand:   #06131A;
    --cta:        #43BAC6;
    --cta-hover:  #63D0DA;
    --accent:     #63D0DA;
    --accent-tint:#0F2A31;
    --bg:         #0B1219;
    --surface:    #111A22;
    --surface-2:  #16212A;
    --line:       #253440;
    --line-soft:  #1C2730;
    --shadow-s: 0 1px 2px rgba(0,0,0,.4);
    --shadow-m: 0 2px 6px rgba(0,0,0,.35), 0 12px 28px -12px rgba(0,0,0,.6);
    --shadow-l: 0 4px 12px rgba(0,0,0,.4), 0 28px 60px -24px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  --ink:        #EEF2F5;
  --ink-soft:   #C9D4DC;
  --muted:      #9AA9B5;
  --muted-2:    #7F8D99;
  --brand:      #43BAC6;
  --brand-dark: #63D0DA;
  --brand-tint: #0F2A31;
  --on-brand:   #06131A;
  --cta:        #43BAC6;
  --cta-hover:  #63D0DA;
  --accent:     #63D0DA;
  --accent-tint:#0F2A31;
  --bg:         #0B1219;
  --surface:    #111A22;
  --surface-2:  #16212A;
  --line:       #253440;
  --line-soft:  #1C2730;
  --shadow-s: 0 1px 2px rgba(0,0,0,.4);
  --shadow-m: 0 2px 6px rgba(0,0,0,.35), 0 12px 28px -12px rgba(0,0,0,.6);
  --shadow-l: 0 4px 12px rgba(0,0,0,.4), 0 28px 60px -24px rgba(0,0,0,.7);
}

/* --------------------------------------------------------------- base --- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* class display rules must not beat it */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-dark); text-underline-offset: 3px; }
a:hover { color: var(--brand); }
h1,h2,h3,h4 { line-height: 1.18; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.018em; }
h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; font-size: clamp(2.05rem, 1.35rem + 2.9vw, 3.5rem); line-height: 1.1; }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.05rem); }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.32rem); }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .45em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
strong { font-weight: 650; }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: 760px; }
.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section-tight { padding-block: clamp(2.2rem, 4vw, 3.4rem); }
.section-alt { background: var(--surface-2); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-dark); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius-s) 0; font-weight: 600;
}
.skip:focus { left: 0; }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-dark); margin: 0 0 .85rem;
}
.lede { font-size: clamp(1.05rem, 1rem + .35vw, 1.24rem); color: var(--ink-soft); line-height: 1.6; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

/* ------------------------------------------------------------ buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font: inherit; font-weight: 600; font-size: .97rem;
  padding: .78em 1.4em; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .16s, color .16s, border-color .16s, transform .12s, box-shadow .16s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--cta); color: var(--on-brand); box-shadow: var(--shadow-s); }
.btn-primary:hover { background: var(--cta-hover); color: var(--on-brand); box-shadow: var(--shadow-m); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--surface); }
.btn-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.34); }
.btn-light:hover { background: rgba(255,255,255,.24); color: #fff; }
.btn-lg { font-size: 1.02rem; padding: .92em 1.7em; }
.btn-block { width: 100%; }

.arrow { transition: transform .16s; }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 600; text-decoration: none; color: var(--brand-dark);
}
.link-arrow:hover { text-decoration: underline; }

/* ------------------------------------------------------------- header --- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.header-in { display: flex; align-items: center; gap: 1.1rem; height: 68px; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-weight: 700; letter-spacing: .055em; font-size: .99rem; margin-right: auto; }
.logo-mark { width: 30px; height: 30px; flex: none; }
.logo span.sub { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); line-height: 1; margin-top: 3px; }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a:not(.btn) {
  text-decoration: none; color: var(--ink-soft); font-weight: 550; font-size: .94rem;
  padding: .5rem .68rem; border-radius: var(--radius-s);
}
.nav a:not(.btn):hover,
.nav a:not(.btn)[aria-current="page"] { color: var(--brand-dark); background: var(--brand-tint); }
/* The CTA inside the nav is a button, not a nav link. Excluding it above keeps
   the nav link colour from overriding the button's own text colour, which left
   the mobile menu's "Get started" unreadable on its own background. */
.nav > .btn { display: none; } /* mobile-only duplicate of the header CTA */

.header-actions { display: flex; align-items: center; gap: .5rem; }

.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .88rem; font-weight: 650;
  background: transparent; border: 1.5px solid var(--line); color: var(--ink-soft);
  padding: .45rem .7rem; border-radius: 999px; cursor: pointer;
}
.lang-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 148px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-l); padding: .35rem; display: none; z-index: 20;
}
.lang-menu[data-open="true"] { display: block; }
.lang-menu a {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: .5rem .65rem; border-radius: var(--radius-s); text-decoration: none;
  color: var(--ink); font-size: .92rem;
}
.lang-menu a:hover { background: var(--surface-2); }
.lang-menu a[aria-current="true"] { color: var(--brand-dark); font-weight: 650; }
.lang-menu .code { font-size: .74rem; color: var(--muted); font-weight: 650; letter-spacing: .05em; }

.burger {
  display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--line); border-radius: var(--radius-s); cursor: pointer; color: var(--ink);
}

@media (max-width: 940px) {
  .burger { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: .6rem var(--gut) 1.1rem; gap: .1rem;
    box-shadow: var(--shadow-m);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: .72rem .6rem; font-size: 1rem; }
  .nav > .btn { display: inline-flex; margin-top: .6rem; }
  .header-actions .btn-nav-cta { display: none; }
}

/* --------------------------------------------------------------- hero --- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 460px at 88% -8%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 62%),
    radial-gradient(760px 420px at 6% 8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    var(--surface);
  border-bottom: 1px solid var(--line-soft);
}
.hero-grid {
  display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; padding-block: clamp(2.8rem, 6vw, 5.2rem);
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: .55rem; }
.hero .lede { max-width: 44ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }
.hero-points { list-style: none; padding: 0; margin: 1.9rem 0 0; display: grid; gap: .55rem; }
.hero-points li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--ink-soft); margin: 0; }
.hero-points .tick { flex: none; margin-top: 3px; color: var(--brand-dark); }

.hero-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-l); padding: clamp(1.3rem, 2.4vw, 1.9rem);
}
.hero-card h2 { font-size: 1.02rem; margin-bottom: 1.1rem; letter-spacing: 0; }
.figure-list { display: grid; gap: 0; }
.figure-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .62rem 0; border-bottom: 1px dashed var(--line);
}
.figure-row:last-child { border-bottom: 0; }
.figure-row dt { font-size: .9rem; color: var(--muted); margin: 0; }
.figure-row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.02rem; }
.figure-note { font-size: .78rem; color: var(--muted-2); margin: 1rem 0 0; }

/* -------------------------------------------------------------- cards --- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.15rem, 2vw, 1.5rem); box-shadow: var(--shadow-s);
  transition: box-shadow .18s, border-color .18s, transform .18s;
  display: flex; flex-direction: column;
}
a.card { text-decoration: none; color: inherit; }
a.card:hover { box-shadow: var(--shadow-m); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); transform: translateY(-2px); }
.card h3, .card .card-h { margin-bottom: .4rem; }
/* A card's heading takes its level from the page it sits on, so it can
   be an h2 or an h3. .card-h keeps the look identical either way. */
.card h2.card-h, .card-h { font-size: 1.06rem; line-height: 1.3;
  font-family: var(--sans); font-weight: 700; letter-spacing: 0; }
.card p { color: var(--muted); font-size: .945rem; margin-bottom: .9rem; }
.card .card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.card .price-tag { color: var(--brand-dark); font-weight: 700; white-space: nowrap; }

.icon-badge {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-dark); margin-bottom: .95rem; flex: none;
}

/* Exactly two columns, so four cards always form a 2x2 block. The auto-fit
   grids fit three across at this width, which left the fourth card orphaned. */
.value-grid {
  display: grid; gap: clamp(1rem, 2vw, 1.4rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .value-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Icon above the heading, matching the icon-badge treatment used on the service
   cards. Stated explicitly: .card already sets column, and relying on that
   inheritance made the direction easy to break by accident.
   height:100% keeps the pair in each row aligned regardless of text length. */
.value-card {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .9rem; height: 100%;
}
.value-card .value-ic {
  flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-dark);
}
.value-card h3 { font-size: 1.06rem; margin: 0 0 .35rem; }
.value-card p { margin: 0; color: var(--muted); font-size: .945rem; }

/* -------------------------------------------------------------- steps --- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; counter-reset: s; }
.steps > li {
  position: relative; padding-left: 3.4rem; counter-increment: s; margin: 0;
}
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: -2px;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-dark);
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
  border: 1.5px solid color-mix(in srgb, var(--brand) 30%, transparent);
}
.steps > li::after {
  content: ""; position: absolute; left: 1.14rem; top: 2.5rem; bottom: -1.2rem;
  width: 1.5px; background: var(--line);
}
.steps > li:last-child::after { display: none; }
.steps h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.steps p { margin: 0; color: var(--muted); font-size: .945rem; }

/* ------------------------------------------------------------ pricing --- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1.1rem; align-items: stretch; }
.plan {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.45rem; display: flex; flex-direction: column; position: relative;
}
.plan.is-featured { border-color: var(--brand); box-shadow: var(--shadow-m); }
.plan .flag {
  position: absolute; top: -11px; left: 1.45rem;
  background: var(--brand-dark); color: #fff; font-size: .7rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 999px;
}
.plan h3 { font-size: 1.08rem; margin-bottom: .15rem; }
.plan .plan-for { color: var(--muted); font-size: .875rem; margin: 0 0 1rem; }
.plan .amount { font-family: var(--serif); font-size: 2.3rem; line-height: 1; letter-spacing: -.02em; }
.plan .per { color: var(--muted); font-size: .9rem; }
.plan ul { list-style: none; padding: 0; margin: 1.2rem 0 1.4rem; display: grid; gap: .5rem; }
.plan ul li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); margin: 0; }
.plan ul .tick { flex: none; margin-top: 3px; color: var(--brand-dark); }
.plan .btn { margin-top: auto; }

/* ---------------------------------------------------------------- FAQ --- */
.faq { display: grid; gap: .55rem; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 1.15rem; transition: border-color .16s;
}
.faq details[open] { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2rem 1.05rem 0; position: relative;
  font-weight: 620; font-size: 1.01rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .1rem; top: 1.42rem;
  width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .18s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer { padding-bottom: 1.1rem; color: var(--muted); font-size: .96rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- CTA band --- */
.cta-band {
  background: linear-gradient(140deg, #142C43 0%, #17394F 55%, #167D8D 130%);
  color: #fff; border-radius: var(--radius-l); padding: clamp(2rem, 4.4vw, 3.4rem);
  text-align: center;
}
.cta-band h2 { color: #fff; font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.cta-band p { color: rgba(255,255,255,.8); max-width: 52ch; margin-inline: auto; }
.cta-band .btn-primary { background: #fff; color: #142C43; }
.cta-band .btn-primary:hover { background: #E7F3F5; color: #142C43; }
.cta-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* -------------------------------------------------------- breadcrumbs --- */
.crumbs { font-size: .84rem; color: var(--muted); padding-block: 1.1rem .2rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumbs li { margin: 0; display: flex; gap: .4rem; align-items: center; }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-dark); text-decoration: underline; }

/* --------------------------------------------------------- page header --- */
.page-head { padding-block: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 3vw, 2.2rem); }
.page-head + .section-tight { padding-top: .4rem; }
.page-head h1 { margin-bottom: .6rem; }
.page-head .lede { max-width: 58ch; }

/* -------------------------------------------------------------- prose --- */
.prose { font-size: 1.045rem; min-width: 0; }
/* Long compounds, URLs and code can still exceed a phone's width; wrap
   them rather than letting one word widen the whole page. */
.prose p, .prose li, .prose h2, .prose h3 { overflow-wrap: break-word; }
.prose > h2 { margin-top: 2.4rem; }
.prose > h3 { margin-top: 1.8rem; font-size: 1.14rem; }
.prose > ul, .prose > ol { padding-left: 1.35em; }
.prose li { color: var(--ink-soft); }
.prose a { color: var(--brand-dark); }

.callout {
  background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-s); padding: 1.05rem 1.25rem; margin: 1.7rem 0;
  font-size: .985rem;
}
.callout p:last-child { margin-bottom: 0; }

.note {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 1rem 1.15rem; font-size: .9rem; color: var(--muted);
}

/* The "information only, get in touch" line. One plain sentence under the
   content, deliberately not highlighted. */
.info-line {
  margin: 2rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line-soft);
  font-size: .88rem; line-height: 1.55; color: var(--muted);
}
.info-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.info-line a:hover { color: var(--ink-soft); }

table.data { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.data th, table.data td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
table.data th { font-weight: 650; background: var(--surface-2); }
.table-scroll { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--line); border-radius: var(--radius-s); }

/* ------------------------------------------------------------- article --- */
.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 940px) { .article-layout { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } }
.toc { position: sticky; top: 92px; font-size: .89rem; }
.toc h2 { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .7rem; }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; border-left: 2px solid var(--line); }
.toc li { margin: 0; }
.toc a { display: block; padding: .32rem .8rem; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; margin-left: -2px; }
.toc a:hover { color: var(--brand-dark); border-left-color: var(--brand); }

.post-head-inner { max-width: 47rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: .86rem; color: var(--muted); margin-bottom: 1.4rem; }
.tag {
  display: inline-block; background: var(--brand-tint); color: var(--brand-dark);
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .26rem .6rem; border-radius: 999px;
}
.post-card-meta { display: flex; gap: .7rem; align-items: center; font-size: .8rem; color: var(--muted); margin-bottom: .7rem; }

.disclaimer { margin-top: 2.5rem; }
.disclaimer h2 { font-size: .95rem; margin-bottom: .3rem; }

/* -------------------------------------------------------------- form --- */
.form-shell {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-m); padding: clamp(1.3rem, 3vw, 2.2rem);
}
.progress { margin-bottom: 1.6rem; }
.progress-bar { height: 5px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s ease; width: 25%; }
.progress-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; color: var(--muted); margin-top: .6rem; }
.progress-meta .step-name { font-weight: 650; color: var(--ink-soft); }

.fstep { display: none; }
.fstep[data-active="true"] { display: block; animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
legend { font-weight: 650; font-size: 1.08rem; padding: 0; margin-bottom: .85rem; }

.options { display: grid; gap: .55rem; }
.options.cols-2 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt label {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--radius-s);
  padding: .82rem 1rem; font-size: .96rem; background: var(--surface);
  transition: border-color .14s, background .14s;
}
.opt label:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }
.opt .box {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line); display: grid; place-items: center; transition: border-color .14s;
}
.opt input[type="checkbox"] ~ label .box { border-radius: 6px; }
.opt .box::after { content: ""; width: 9px; height: 9px; border-radius: inherit; background: transparent; transition: background .14s; }
.opt input:checked ~ label { border-color: var(--brand); background: var(--brand-tint); }
.opt input:checked ~ label .box { border-color: var(--brand); }
.opt input:checked ~ label .box::after { background: var(--brand); }
.opt input:focus-visible ~ label { outline: 3px solid var(--brand); outline-offset: 2px; }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .38rem; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-s);
  padding: .72rem .85rem;
}
.field textarea { min-height: 100px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-tint); }
.field .hint { font-size: .82rem; color: var(--muted); margin-top: .3rem; }

.consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
.consent input { margin-top: .28rem; width: 17px; height: 17px; flex: none; accent-color: var(--brand); }

.form-error { color: var(--danger); font-size: .875rem; margin-top: .55rem; display: none; }
.form-error[data-show="true"] { display: block; }

.form-nav { display: flex; gap: .7rem; justify-content: space-between; align-items: center; margin-top: 1.6rem; }
.form-nav .spacer { flex: 1; }

.estimate {
  background: var(--brand-tint); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: var(--radius-s); padding: 1rem 1.15rem; margin-bottom: 1.3rem;
}
.estimate .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--brand-dark); }
.estimate .value { font-family: var(--serif); font-size: 2rem; line-height: 1.15; margin: .2rem 0; }
.estimate .note { font-size: .8rem; color: var(--muted); margin: 0; }

.form-success { text-align: center; padding: 1.5rem 0; }
.form-success .check {
  width: 58px; height: 58px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark);
  display: grid; place-items: center; margin: 0 auto 1.1rem;
}
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ------------------------------------------------------------- footer --- */
.site-footer { background: var(--ink); color: #C8D4DC; margin-top: clamp(3rem, 6vw, 5rem); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-footer { background: #070E14; } }
:root[data-theme="dark"] .site-footer { background: #070E14; }
.site-footer a { color: #C8D4DC; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2rem;
  padding-block: clamp(2.4rem, 4vw, 3.4rem);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #7E93A2; margin-bottom: .9rem; font-weight: 700; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .92rem; }
.footer-grid li { margin: 0; }
.footer-brand .logo { color: #fff; margin-bottom: .9rem; }
.footer-brand p { font-size: .88rem; color: #93A6B4; line-height: 1.6; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.2rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-size: .84rem; color: #7E93A2;
}

/* ------------------------------------------------------------ utility --- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }
.section-head { max-width: 62ch; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.section-head.center { margin-inline: auto; }
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.pill {
  border: 1.5px solid var(--line); border-radius: 999px; padding: .4rem .85rem;
  font-size: .87rem; text-decoration: none; color: var(--ink-soft); background: var(--surface);
}
.pill:hover, .pill[aria-current="true"] { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }

.trust-row { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .88rem; color: var(--muted); }
.trust-row span { display: flex; gap: .45rem; align-items: center; }

.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.contact-list li { margin: 0; display: flex; gap: .8rem; align-items: flex-start; }
.contact-list .icon-badge { width: 36px; height: 36px; margin: 0; border-radius: 9px; }
.contact-list .k { font-size: .8rem; color: var(--muted); display: block; }
.contact-list .v { font-weight: 600; }

/* ============================================================ additions === */

/* --------------------------------------------------- header icon buttons -- */
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  background: transparent; border: 1.5px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); cursor: pointer; padding: 0;
  transition: border-color .16s, color .16s, background .16s;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--surface); }

/* The toggle shows the theme you would switch TO, not the one you are in. */
.theme-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-sun { display: none; }
  :root:not([data-theme="light"]) .theme-moon { display: block; }
}
:root[data-theme="dark"] .theme-sun { display: none; }
:root[data-theme="dark"] .theme-moon { display: block; }
:root[data-theme="light"] .theme-sun { display: block; }
:root[data-theme="light"] .theme-moon { display: none; }

/* -------------------------------------------------------------- search --- */
.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(3rem, 10vh, 7rem) var(--gut) 2rem;
}
.search-overlay[hidden] { display: none; }
.search-panel {
  width: 100%; max-width: 640px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-l); overflow: hidden;
  animation: searchIn .16s ease;
}
@keyframes searchIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.search-input-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1rem; border-bottom: 1px solid var(--line-soft); color: var(--muted);
}
.search-input-row input {
  flex: 1; font: inherit; font-size: 1.06rem; color: var(--ink);
  background: transparent; border: 0; outline: none; padding: .2rem 0;
}
.search-input-row input::-webkit-search-cancel-button { display: none; }
.search-input-row .icon-btn { width: 32px; height: 32px; border-color: transparent; }
.search-results { max-height: min(52vh, 420px); overflow-y: auto; }
.search-results:empty { display: none; }
.search-hit {
  display: block; padding: .75rem 1rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line-soft);
}
.search-hit:last-child { border-bottom: 0; }
.search-hit:hover, .search-hit[aria-selected="true"] { background: var(--brand-tint); }
.search-hit .hit-kind {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-dark);
}
.search-hit .hit-title { font-weight: 620; font-size: .98rem; margin: .12rem 0 .1rem; }
.search-hit .hit-text { font-size: .85rem; color: var(--muted); }
.search-hit mark { background: color-mix(in srgb, var(--accent) 34%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-empty { padding: 1.4rem 1rem; color: var(--muted); font-size: .93rem; }
.search-hint { margin: 0; padding: .6rem 1rem; font-size: .78rem; color: var(--muted-2); background: var(--surface-2); }

/* ---------------------------------------------------- hero client panel --- */
.client-list { list-style: none; padding: 0; margin: 0 0 .3rem; display: grid; gap: 0; }
.client-row {
  display: flex; gap: .8rem; align-items: flex-start; margin: 0;
  padding: .68rem 0; border-bottom: 1px dashed var(--line);
}
.client-row:last-child { border-bottom: 0; }
.client-ic {
  flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-dark);
}
.client-row strong { display: block; font-size: .96rem; font-weight: 620; line-height: 1.3; }
.client-note { display: block; font-size: .845rem; color: var(--muted); line-height: 1.45; margin-top: 1px; }

/* --------------------------------------------------------- recommender --- */
.rec-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start;
}
@media (max-width: 900px) { .rec-grid { grid-template-columns: 1fr; } }
.rec-form { margin-top: 1.8rem; }
.rec-q { margin-bottom: 1.5rem; }
.rec-q legend { display: flex; align-items: center; gap: .6rem; font-size: 1rem; margin-bottom: .7rem; }
.rec-num {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--ink); color: var(--bg); font-size: .78rem; font-weight: 700;
  display: grid; place-items: center;
}
.rec-q .opt label { padding: .68rem .85rem; font-size: .92rem; }
.btn-sm { font-size: .86rem; padding: .5em 1em; }

.rec-result { position: sticky; top: 88px; }
.rec-empty, .rec-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
}
.rec-empty { text-align: center; box-shadow: var(--shadow-s); }
.rec-empty .icon-badge { margin: 0 auto .9rem; }
.rec-empty p { margin: 0; font-size: .93rem; }
.rec-card { box-shadow: var(--shadow-m); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.rec-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand-dark); margin: 0 0 .35rem;
}
.rec-card h3 { margin-bottom: .1rem; }
.rec-price { margin: .35rem 0 .3rem; display: flex; align-items: baseline; gap: .35rem; }
.rec-amount { font-family: var(--serif); font-size: 2.4rem; line-height: 1; letter-spacing: -.02em; }
.rec-per { color: var(--muted); font-size: .9rem; }
.rec-for { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; }
.rec-features { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: .42rem; }
.rec-features li { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; color: var(--ink-soft); margin: 0; }
.rec-features .tick { flex: none; margin-top: 3px; color: var(--brand-dark); }
.rec-why {
  background: var(--surface-2); border-radius: var(--radius-s);
  padding: .85rem 1rem; margin-bottom: 1.1rem;
}
.rec-why h4 {
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .35rem; font-weight: 700;
}
.rec-why p { margin: 0; font-size: .89rem; color: var(--ink-soft); line-height: 1.55; }
.rec-why p + p { margin-top: .5rem; }

/* ---------------------------------- send an application straight away --- */
.rec-quick {
  margin-top: .9rem; padding: 1rem 1.05rem 1.1rem;
  background: var(--surface-2); border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
}
.rec-quick h4 { margin: 0 0 .25rem; font-size: 1.02rem; }
.rec-quick > p.small { margin: 0 0 .85rem; line-height: 1.5; }
.quick-form .field { margin-bottom: .7rem; }
.quick-form .field > label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--ink-soft); margin-bottom: .28rem;
}
.quick-form input[type="text"],
.quick-form input[type="email"],
.quick-form textarea {
  width: 100%; font: inherit; font-size: .93rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius-s); padding: .6rem .75rem;
  transition: border-color .16s, box-shadow .16s;
}
.quick-form textarea { resize: vertical; min-height: 4.6rem; line-height: 1.5; }
.quick-form input:focus, .quick-form textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint);
}
.quick-form .field.check {
  display: flex; gap: .55rem; align-items: flex-start; margin: .9rem 0 .2rem;
}
.quick-form .field.check input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; min-width: 1.05rem;
  margin: .18rem 0 0; flex: 0 0 auto; accent-color: var(--brand);
}
.quick-form .field.check label {
  flex: 1 1 auto; min-width: 0; display: block; margin: 0;
  font-size: .82rem; font-weight: 400; color: var(--ink-soft); line-height: 1.45;
}
.quick-form .btn { margin-top: .85rem; }
.quick-done { text-align: center; padding: .4rem 0 .2rem; }
.quick-done p {
  margin: .6rem 0 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.55;
}
.quick-done:focus { outline: none; }

/* -------------------------------------------------------- blog filters --- */
.pill { cursor: pointer; font: inherit; }
button.pill { background: var(--surface); }
.post-hidden { display: none; }

@media (max-width: 940px) {
  .header-actions .icon-btn { width: 36px; height: 36px; }
}

/* --------------------------------------------------------- blog search --- */
.blog-search {
  display: flex; align-items: center; gap: .7rem;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
  padding: .45rem .5rem .45rem 1rem; max-width: 520px; margin-bottom: 1rem;
  transition: border-color .16s, box-shadow .16s;
}
.blog-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.blog-search-ic { color: var(--muted); display: grid; place-items: center; }
.blog-search input {
  flex: 1; min-width: 0; font: inherit; font-size: 1rem; color: var(--ink);
  background: transparent; border: 0; outline: none; padding: .35rem 0;
}
.blog-search input::-webkit-search-cancel-button { display: none; }
.blog-search .icon-btn { width: 32px; height: 32px; border-color: transparent; }
.blog-count { font-size: .86rem; color: var(--muted); margin: 0 0 1.1rem; min-height: 1.2em; }

/* ---------------------------------------------------------- topic tags --- */
.tag-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: 2rem 0 0; }
.tag-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin-right: .2rem;
}
.topic-tag {
  font-size: .8rem; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: .25rem .7rem;
}

/* ------------------------------------------------- pricing page, tightened -- */
.price-range {
  display: inline-block; margin: .3rem 0 0;
  font-size: .95rem; color: var(--brand-dark); font-weight: 600;
  background: var(--brand-tint); border-radius: 999px; padding: .45rem 1rem;
}
.rec-form-tight { margin-top: 0; }
#recommender .rec-grid { align-items: start; }

/* ------------------------------------ optional details on the apply form --- */
.optional {
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); margin: 1.2rem 0;
  transition: border-color .16s, background .16s;
}
.optional[data-open="true"] { border-color: var(--brand); background: var(--surface); }
.optional-toggle {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; padding: .95rem 1.1rem; color: inherit;
  border-radius: var(--radius);
}
.optional-toggle:hover .optional-title { color: var(--brand-dark); }
.optional-chev {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-dark);
  transition: transform .18s;
}
.optional[data-open="true"] .optional-chev { transform: rotate(90deg); }
.optional-toggle > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.optional-title { display: block; font-weight: 650; font-size: .97rem; }
.optional-sub {
  display: block; font-size: .85rem; color: var(--muted);
  line-height: 1.45; margin-top: .15rem;
}
.optional-action {
  flex: none; font-size: .84rem; font-weight: 650; color: var(--brand-dark);
  white-space: nowrap;
}
.optional-body { padding: 0 1.1rem 1.15rem; }
.optional-body fieldset { margin-bottom: 1.15rem; }
.optional-body fieldset:last-of-type { margin-bottom: 1rem; }

@media (max-width: 560px) {
  .optional-toggle { flex-wrap: wrap; gap: .6rem .85rem; }
  .optional-action { width: 100%; padding-left: calc(30px + .85rem); }
}

/* --------------------------------------------------- apply page layout --- */
.apply-grid {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr);
  gap: clamp(1.6rem, 4vw, 3rem);
}
/* One column well before the form gets cramped: the option rows and the
   submit label both need room, and a squeezed form is worse than a long one. */
@media (max-width: 900px) {
  .apply-grid { grid-template-columns: minmax(0, 1fr); }
}
/* A long submit label must wrap rather than run past the button on a phone. */
.btn-block { white-space: normal; }

/* ------------------------------------- the offer that closes an article --- */
.post-offer {
  display: flex; gap: 1.1rem; align-items: flex-start;
  margin: 2.4rem 0; padding: 1.4rem 1.5rem;
  background: var(--brand-tint); border: 1.5px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  border-radius: var(--radius);
}
.post-offer-ic {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--surface); color: var(--brand-dark);
}
.post-offer > div { min-width: 0; }
.post-offer h2 {
  margin: 0 0 .4rem; font-family: var(--sans); font-weight: 700;
  font-size: 1.12rem; letter-spacing: -.01em;
}
.post-offer p { margin: 0 0 1rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
/* .prose a sets a link colour and outranks .btn-primary on specificity, which
   left the button label dark green on dark green. Restate it here. */
.post-offer .btn-primary,
.post-offer .btn-primary:hover { color: var(--on-brand); }
.post-offer .btn { white-space: normal; }
@media (max-width: 560px) {
  .post-offer { flex-direction: column; gap: .9rem; padding: 1.2rem; }
}

.form-error-link { color: inherit; font-weight: 650; text-decoration: underline; }


/* ------------------------------------------------- segment pages ------- */
/* Pages aimed at one market rather than one language. They open differently
   from an article or a service page because the reader is a controller or an
   owner comparing two countries, not someone browsing: the audience is named
   in the eyebrow, the numbers they came for sit in a card beside the heading,
   and the objection they are actually holding is answered before the prose. */

.seg-hero {
  background: var(--brand-tint);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  padding-block: clamp(2.2rem, 5vw, 3.6rem);
}
.seg-hero h1 { margin-bottom: .8rem; }
.seg-hero .lede { max-width: 42rem; }
.seg-hero-cta { margin-top: 1.6rem; }
.seg-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start;
}
@media (max-width: 860px) { .seg-hero-grid { grid-template-columns: minmax(0, 1fr); } }

.seg-glance { background: var(--surface); }
.seg-glance .figure-row { padding-block: .55rem; gap: .9rem; }
.seg-glance .figure-row dt { padding-right: .8rem; flex: 0 1 34%; }
.seg-glance .figure-row dd { text-align: right; flex: 1 1 auto; font-size: .98rem; }
/* These glance values are short sentences, not figures, so on a phone the
   label goes above the value instead of fighting it for the same line. */
@media (max-width: 560px) {
  .seg-glance .figure-row { display: block; }
  .seg-glance .figure-row dt { padding-right: 0; margin-bottom: .15rem; }
  .seg-glance .figure-row dd { text-align: left; font-size: .97rem; }
}

/* The one thing a reader with an existing accountant needs answered first. */
.seg-along {
  border-left: 3px solid var(--brand);
  background: var(--surface-2);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 1.3rem 1.5rem;
  max-width: 54rem;
}
.seg-along h2 { font-size: 1.2rem; margin: 0 0 .6rem; }
.seg-along p { margin: 0 0 .7rem; color: var(--ink-soft); }
.seg-along p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------- pricing plan table ---
   The quiz holds the plans in a data attribute, which no crawler and no
   answer engine can read. The same six plans are rendered as a table so the
   prices exist in the page as text, and so a visitor who only wants the
   number does not have to answer three questions first. */
.plan-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.plan-table th, .plan-table td {
  text-align: left; padding: .72rem .8rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.plan-table thead th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; white-space: nowrap;
}
.plan-table tbody th { font-weight: 700; white-space: nowrap; }
.plan-table .plan-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-table tbody tr:last-child th, .plan-table tbody tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) { .plan-table { min-width: 560px; } }

/* City pages: links to the other cities. */
.pill-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pill-list .pill { text-decoration: none; display: inline-block; }

/* Logo (October 2026): the eye-and-diamond mark with outlined lettering,
   inlined as SVG. Colours live here so the same file works in both themes. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.logo .logo-svg { display: block; height: 44px; width: auto; flex: none; }
.lg-eye, .lg-word { fill: #142C43; }
.lg-dia, .lg-sub { fill: #167D8D; }
.lg-dia2 { fill: #2094A4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lg-eye, :root:not([data-theme="light"]) .lg-word { fill: #EEF2F5; }
  :root:not([data-theme="light"]) .lg-dia { fill: #43BAC6; }
  :root:not([data-theme="light"]) .lg-dia2 { fill: #63D0DA; }
  :root:not([data-theme="light"]) .lg-sub { fill: #72CBD4; }
}
:root[data-theme="dark"] .lg-eye, :root[data-theme="dark"] .lg-word { fill: #EEF2F5; }
:root[data-theme="dark"] .lg-dia { fill: #43BAC6; }
:root[data-theme="dark"] .lg-dia2 { fill: #63D0DA; }
:root[data-theme="dark"] .lg-sub { fill: #72CBD4; }
.footer-brand .logo .logo-svg { height: 40px; }
@media (max-width: 480px) { .site-header .logo .logo-svg { height: 38px; } }
.site-header .logo { flex-shrink: 0; }
@media (max-width: 400px) { .site-header .logo .logo-svg { height: 32px; } .header-in { gap: .7rem; } }
@media (max-width: 340px) { .site-header .logo .logo-svg { height: 27px; } .header-actions { gap: .35rem; } }
/* Segment pages carry a longer navigation, so it folds into the menu
   button at 1180px instead of 940px. Same rules as the 940px block. */
@media (max-width: 1180px) {
  .nav-long .burger { display: inline-flex; }
  .nav-long .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: .6rem var(--gut) 1.1rem; gap: .1rem;
    box-shadow: var(--shadow-m);
  }
  .nav-long .nav[data-open="true"] { display: flex; }
  .nav-long .nav a { padding: .72rem .6rem; font-size: 1rem; }
  .nav-long .nav > .btn { display: inline-flex; margin-top: .6rem; }
  .nav-long .header-actions .btn-nav-cta { display: none; }
}
/* Long button labels ("Demander un devis à prix fixe") may wrap on phones
   instead of pushing the page sideways. */
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; max-width: 100%; } }

/* Hero backgrounds (October 2026): quiet navy and teal washes with fine
   ledger lines at the edges, and a ledger illustration that sits behind the
   card at the top right on wider screens. The hero element is isolated so
   the illustration can go behind the card but stay above the background. */
.hero, .seg-hero { isolation: isolate; overflow: hidden; position: relative;
  background-repeat: no-repeat; background-position: center top; background-size: 100% auto; }
.hero { background-color: #FCFDFE; background-image: url("/assets/hero/hero-home-desktop-light.570bd68c3a.svg"); border-bottom: 1px solid #DCE8ED; }
.seg-hero { background-color: #F1F7F9; background-image: url("/assets/hero/hero-country-desktop-light.02e8733f34.svg"); border-bottom: 1px solid #DCE8ED; }
@media (max-width: 760px) {
  .hero { background-image: url("/assets/hero/hero-home-phone-light.1576757f17.svg"); }
  .seg-hero { background-image: url("/assets/hero/hero-country-phone-light.19d6b5e854.svg"); }
}
.hero-card, .seg-glance { position: relative; }
@media (min-width: 901px) {
  .hero-card::before, .seg-glance::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    width: 330px; height: 330px; top: -58px; right: -124px;
    background: url("/assets/hero/ledger-light.b7fc329902.svg") no-repeat center / contain;
  }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .hero-card::before, .seg-glance::before { width: 210px; height: 210px; top: -52px; right: -18px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero { background-color: #0E1C29; background-image: url("/assets/hero/hero-home-desktop-dark.eab17b174b.svg"); border-bottom-color: #294451; }
  :root:not([data-theme="light"]) .seg-hero { background-color: #102533; background-image: url("/assets/hero/hero-country-desktop-dark.9470ef7408.svg"); border-bottom-color: #294451; }
  :root:not([data-theme="light"]) .hero-card::before, :root:not([data-theme="light"]) .seg-glance::before { background-image: url("/assets/hero/ledger-dark.3d8d9d7e5b.svg"); }
}
@media (prefers-color-scheme: dark) and (max-width: 760px) {
  :root:not([data-theme="light"]) .hero { background-image: url("/assets/hero/hero-home-phone-dark.7e97af06a1.svg"); }
  :root:not([data-theme="light"]) .seg-hero { background-image: url("/assets/hero/hero-country-phone-dark.6dce0997d6.svg"); }
}
:root[data-theme="dark"] .hero { background-color: #0E1C29; background-image: url("/assets/hero/hero-home-desktop-dark.eab17b174b.svg"); border-bottom-color: #294451; }
:root[data-theme="dark"] .seg-hero { background-color: #102533; background-image: url("/assets/hero/hero-country-desktop-dark.9470ef7408.svg"); border-bottom-color: #294451; }
:root[data-theme="dark"] .hero-card::before, :root[data-theme="dark"] .seg-glance::before { background-image: url("/assets/hero/ledger-dark.3d8d9d7e5b.svg"); }
@media (max-width: 760px) {
  :root[data-theme="dark"] .hero { background-image: url("/assets/hero/hero-home-phone-dark.7e97af06a1.svg"); }
  :root[data-theme="dark"] .seg-hero { background-image: url("/assets/hero/hero-country-phone-dark.6dce0997d6.svg"); }
}

/* --------------------------------------------------- article header art --- */
/* The article header text is narrow, which leaves the right side of a wide
   screen empty. The logo mark fills it, quietly, and only where it fits. */
.post-hero .wrap { position: relative; }
@media (min-width: 1180px) {
  .post-hero .wrap::after {
    content: ""; position: absolute; right: var(--gut); top: 50%;
    transform: translateY(-50%); width: clamp(260px, 24vw, 320px); aspect-ratio: 420 / 300;
    background: url("/assets/hero/post-mark-light.30dddb7190.svg") no-repeat center / contain;
    pointer-events: none;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .post-hero .wrap::after { background-image: url("/assets/hero/post-mark-dark.6f49738171.svg"); }
  }
  :root[data-theme="dark"] .post-hero .wrap::after { background-image: url("/assets/hero/post-mark-dark.6f49738171.svg"); }
}

/* An article with its own picture: beside the headline on a wide screen,
   below the introduction on a narrower one. The logo mark is not shown. */
.post-figure { margin: 1.4rem auto 0; max-width: 300px; }
/* The picture is a cut-out on a transparent background, shown at 75% so it
   stays quieter than the headline. */
.post-figure img {
  display: block; width: 100%; height: auto; opacity: .75;
  filter: drop-shadow(0 18px 28px rgba(20, 44, 67, .16));
}
@media (min-width: 1180px) {
  .post-hero.has-figure .wrap::after { content: none; }
  .post-hero.has-figure .wrap { display: grid; grid-template-columns: minmax(0, 47rem) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
  .post-hero.has-figure .post-figure { margin: 0; justify-self: end; width: 100%; max-width: 300px; }
}