
/* ---------- France page extras ---------- */
.hero-emote{margin-top:1.1rem;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.85);max-width:36rem}
.hero-wa{display:flex;flex-wrap:wrap;gap:.75rem}
.whyc--white{background:var(--background)}
@media (min-width:768px){.grid-img-left .who-img{order:-1}}
.who-img.flat img{aspect-ratio:16/10;height:auto}
.q-bold{font-weight:500;color:var(--ink)}
.costs{background:var(--background);padding:3.5rem 1.5rem 4rem}
@media (min-width:640px){.costs{padding:5rem 2.5rem 5.5rem}}
.costs-q{margin-top:1.5rem;font-size:1.05rem;line-height:1.65;color:var(--ink-soft);max-width:44rem}
.costs .safe-grid{margin-top:2rem}
@media (min-width:1024px){.costs .safe-grid{grid-template-columns:repeat(3,1fr)}}
.cost-card{background:var(--surface)}
.cost-card .safe-ico{background:var(--surface-card)}
.cost-note{margin-top:1.75rem;font-size:1rem;font-weight:500;color:var(--ink)}
.fl-updated{margin-top:.9rem;font-size:.68rem;color:var(--ink-soft)}

/* ---------- Data tables (shared by cost and comparison sections) ---------- */
.tblwrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--radius-card);background:var(--surface-card);margin-top:1.75rem}
.tbl{width:100%;min-width:38rem;border-collapse:collapse;font-size:.92rem;line-height:1.6}
.tbl th{text-align:left;font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);background:var(--surface);padding:.85rem 1.1rem;border-bottom:1px solid var(--hairline)}
.tbl td{padding:.95rem 1.1rem;border-bottom:1px solid var(--hairline);color:var(--ink);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl td b{font-weight:500}
/* ---------- Five-column footer ---------- */
@media (min-width:768px){.foot-grid{grid-template-columns:1.3fr 1fr 1.1fr 1fr 1.15fr}}
/* ---------- Generic content section ---------- */
.sec{background:var(--background);padding:3.5rem 1.5rem}
@media (min-width:640px){.sec{padding:4.5rem 2.5rem}}
.sec-inner{max-width:52rem;margin:0 auto}
.sec-inner.wide{max-width:64rem}
.sec .h2{margin-top:1rem}
.sec p.lede{margin-top:1.5rem;font-size:1.05rem;line-height:1.7;color:var(--ink-soft)}
.sec p.body{margin-top:1rem;font-size:1rem;line-height:1.75;color:var(--ink-soft)}
.sec p.body strong{font-weight:500;color:var(--ink)}
.sec p.body a,.sec li a,.facts-lede a{border-bottom:1px solid var(--ghost);transition:color .25s,border-color .25s}
.sec p.body a:hover,.sec li a:hover,.facts-lede a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.sec ul.blist{margin-top:1.25rem;padding-left:1.25rem;display:grid;gap:.65rem}
.sec ul.blist li{font-size:1rem;line-height:1.7;color:var(--ink-soft)}
.sec ul.blist li strong{font-weight:500;color:var(--ink)}
.sec ol.blist{margin-top:1.25rem;padding-left:1.35rem;display:grid;gap:.65rem}
.sec ol.blist li{font-size:1rem;line-height:1.7;color:var(--ink-soft)}
.sec ol.blist li strong{font-weight:500;color:var(--ink)}
.sec.card{background:var(--surface);border-radius:var(--radius-card-lg);margin:0 0 .75rem}
.sec .cta-row{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.9rem}
.callout{margin-top:1.5rem;border-radius:var(--radius-card);background:var(--surface);padding:1.25rem 1.5rem;font-size:.92rem;line-height:1.7;color:var(--ink-soft)}
.sec.card .callout{background:var(--surface-card)}
.callout strong{font-weight:500;color:var(--ink)}
/* ---------- Worked example letter ---------- */
.letter{margin:1.75rem 0 0;border:1px solid var(--hairline);border-radius:var(--radius-card);background:var(--surface);padding:1.75rem 1.5rem}
@media (min-width:640px){.letter{padding:2.25rem 2.5rem}}
.letter p{margin:0 0 .9rem;font-size:.95rem;line-height:1.7;color:var(--ink)}
.letter p:last-child{margin-bottom:0}


/* ---------- Inner-page hero: compact, image-only ---------- */
.hero{min-height:0;height:auto}
@media (min-width:768px){.hero{height:auto;min-height:0}}
@media (min-width:1024px) and (min-height:800px){.hero{height:auto}}
#hero-title{margin-top:.5rem}
@media (min-width:768px){#hero-title .giant{font-size:5.5vw}}
@media (min-width:1024px){#hero-title .giant{font-size:3.4rem}}
.hero-split{padding:1.5rem 1.5rem 1.25rem}
@media (min-width:640px){.hero-split{padding:1.5rem 2.5rem 1.5rem}}
@media (min-width:1024px){.hero-split{padding-top:1rem}}
.hero-sub{margin-top:.85rem}
.hero-trust{margin-top:1.25rem}
.hero-left .tp-bottom{margin-top:1.75rem}
@media (min-width:1024px){.hero-left .tp-bottom{margin-top:auto;padding-top:1.25rem}}

/* ---------- France page fine-tuning ---------- */
#reviews{background:var(--background);border-radius:var(--radius-card-lg);margin-top:.75rem}
#reviews .t-card{background:var(--surface-card)}
@media (min-width:1024px){
  .hero-split{padding:1.5rem 1.5rem 1.5rem 2.5rem}
  .enquiry{align-self:center;margin:0}
}
.final-inner{max-width:62rem}
@media (min-width:768px){.final .h2{font-size:3rem}}
/* ---------- Breadcrumb ---------- */
.crumbs{padding:1.25rem .5rem .25rem}
@media (min-width:640px){.crumbs{padding:1.5rem 1.5rem .25rem}}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--hairline)}
.crumbs a{border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.crumbs a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.crumbs [aria-current="page"]{color:var(--ink)}

/* ---------- Contrast corrections ----------
   Two-tone focus ring: --brand-light (#ff7242) alone is 2.71:1 on white and
   fails the 3:1 non-text minimum, while a single dark ring fails on the dark
   sections. The white outline carries the dark grounds (17.8:1), the burgundy
   halo carries the light ones (6.1:1), so one of the two is always visible.
   .pill.light:hover moved from --brand-light to --brand: white-on-#ff7242 was
   2.71:1 for button text, white-on-#e10018 is 4.98:1. */
:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #a8121c}
.pill.light:hover{background:var(--brand);color:#fff}


/* ===== GLOBAL-CHROME-2026-08-27: flat black footer legal area + social icons (section geometry is the theme's original) ===== */
.foot .foot-legal{border-top:1px solid rgba(255,255,255,.14);margin-top:3.2rem;padding:1.6rem 0 2rem;background:transparent}
.foot .fl-row{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;align-items:center;margin:0}
.foot .fl-row p{margin:0;font-size:.82rem;color:rgba(255,255,255,.62)}
.foot .fl-row nav{display:flex;gap:1.4rem}
.foot .fl-row nav a{font-size:.82rem;color:rgba(255,255,255,.75);transition:color .25s}
.foot .fl-row nav a:hover{color:#fff}
.foot .fl-statutory{background:transparent !important;box-shadow:none !important;border:0 !important;border-radius:0 !important;padding:0 !important;margin:1.5rem 0 0 !important;font-style:normal;font-size:.78rem;line-height:1.7;color:rgba(255,255,255,.5)}
.foot .fl-statutory strong{color:rgba(255,255,255,.8);font-weight:500}
.foot .fl-statutory a{color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:2px}
.foot .fl-statutory a:hover{color:#fff}
.foot .fl-independence{display:block;margin-top:.55rem}
.foot .fl-updated{margin-top:1.1rem;font-size:.68rem;color:rgba(255,255,255,.38)}
.f-social{display:flex;gap:.65rem;margin-top:1.15rem;padding:0;list-style:none}
.f-social a{display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;transition:background .25s,border-color .25s,color .25s}
.f-social a:hover{background:#fff;color:#181818;border-color:#fff}
.f-social a:focus-visible{outline:2px solid #FF7242;outline-offset:3px}
.f-social svg{width:1.05rem;height:1.05rem}
@media (min-width:1024px) and (max-width:1279px){.tb-nav{gap:1.1rem}.tb-nav > a,.tb-nav .nav-link{font-size:.72rem}}


/* ===== INNER-ALIGN 2026-08-27: data tables restyled to the home comparison zebra ===== */
.tblwrap{border-radius:var(--radius-card-lg)}
.tbl{border-collapse:separate;border-spacing:0}
.tbl th{padding:1rem 1.25rem}
.tbl td{padding:1rem 1.25rem;border-bottom:0}
.tbl th:nth-child(n+2),.tbl td:nth-child(n+2){border-left:1px solid var(--hairline)}
.tbl tbody tr:nth-child(even) td{background:var(--surface)}
