/* Inter, self-hosted. Variable font covering 400-700, latin + latin-ext only.
   Replaces the render-blocking Google Fonts request and two external preconnects. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Fit to Fly Certificate UK, site.css
   Geometry / type scale / elevation: Kraken design system
   Colour: MedicalCert UK brand (navy #0b3d91, green #00823b)
   ========================================================= */

:root{
  /* Brand */
  --navy:#0b3d91;
  --navy-dark:#082e6e;
  --navy-deep:#062253;
  --navy-subtle:rgba(11,61,145,.10);
  --navy-tint:rgba(11,61,145,.06);

  /* Semantic */
  --orange:#ffb343;        /* CTA amber. Needs a DARK label: white on it is only 1.78:1 */
  --orange-dark:#f5a52e;   /* hover/active */
  --orange-edge:#e89412;   /* border, defines the button against a white page */
  --orange-ink:#062253;    /* label on amber, 8.65:1 */
  --green:#00823b;
  --green-dark:#02602c;
  --green-subtle:rgba(0,130,59,.14);
  --red:#d4351c;
  --red-subtle:rgba(212,53,28,.10);
  --amber-subtle:rgba(255,179,0,.14);
  --amber-dark:#7a5200;

  /* Neutral (Kraken cool scale) */
  --ink:#101114;
  --ink-2:#3a3d47;
  --muted:#686b82;
  --muted-2:#9497a9;
  --border:#dedee5;
  --border-soft:#eceef3;
  --surface:#ffffff;
  --surface-2:#f7f8fb;
  --surface-3:#f1f3f8;

  /* Elevation (Kraken: whisper-level) */
  --shadow-subtle:rgba(0,0,0,.03) 0 4px 24px;
  --shadow-micro:rgba(16,24,40,.04) 0 1px 4px;
  --shadow-lift:rgba(16,24,40,.08) 0 10px 30px;

  /* Radius (Kraken scale) */
  --r-3:3px; --r-6:6px; --r-8:8px; --r-10:10px; --r-12:12px; --r-16:16px; --r-pill:9999px;

  /* Layout */
  --max:1160px;
  --max-prose:760px;
  --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.38;
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--navy); text-underline-offset:2px}
a:hover{color:var(--navy-dark)}
:focus-visible{outline:3px solid rgba(11,61,145,.35); outline-offset:2px; border-radius:var(--r-8)}

/* ---------- Type scale (Kraken hierarchy) ---------- */
h1,h2,h3,h4{margin:0; color:var(--ink); font-weight:700}
h1{font-size:clamp(34px,5vw,48px); line-height:1.17; letter-spacing:-1px}
h2{font-size:clamp(27px,3.6vw,36px); line-height:1.22; letter-spacing:-.5px}
h3{font-size:clamp(21px,2.4vw,28px); line-height:1.29; letter-spacing:-.5px}
h4{font-size:22px; line-height:1.2; font-weight:600; letter-spacing:normal}
p{margin:0 0 16px}
.lead{font-size:18px; line-height:1.55; color:var(--muted)}
.small{font-size:14px; line-height:1.43}
.micro{font-size:12px; line-height:1.33; font-weight:500}
.eyebrow{
  font-size:12px; font-weight:700; line-height:1;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
  display:block; margin-bottom:12px;
}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 20px}
.section{padding:64px 0; border-top:1px solid var(--border-soft)}
.section--flush{border-top:0}
.section--tint{background:var(--surface-2)}

/* ---------- Section flow ----------
   sec() stacks arbitrary blocks (prose, tables, notes, FAQs, steps, compare
   columns) straight into .wrap, and none of those components carry vertical
   margins of their own, so any two adjacent blocks used to touch. Own the
   rhythm here instead of relying on each component to bring its own. */
.section > .wrap > *{margin-top:0; margin-bottom:0}
.section > .wrap > * + *{margin-top:28px}
.section > .wrap > .section__head{margin-bottom:32px}
.section > .wrap > .section__head + *{margin-top:0}
.section__head{max-width:var(--max-prose); margin-bottom:32px}
.prose{max-width:var(--max-prose)}
.prose p,.prose li{line-height:1.7; color:var(--ink-2)}
.prose h2{margin:40px 0 14px}
.prose h3{margin:32px 0 12px}
.prose ul,.prose ol{padding-left:20px; margin:0 0 16px}
.prose li{margin-bottom:8px}
.grid{display:grid; gap:20px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:768px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .section{padding:80px 0}
}

/* ---------- Buttons (Kraken: 12px radius, never pill) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 20px; border-radius:var(--r-12);
  font-size:16px; font-weight:600; line-height:1.38; text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn--primary{background:var(--navy); color:#fff}
.btn--primary:hover{background:var(--navy-dark); color:#fff}
.btn--outline{background:#fff; color:var(--navy-dark); border-color:var(--navy-dark)}
.btn--outline:hover{background:var(--navy-subtle); color:var(--navy-dark)}
.btn--subtle{background:var(--navy-subtle); color:var(--navy); padding:10px 16px}
.btn--subtle:hover{background:rgba(11,61,145,.16); color:var(--navy)}
.btn--white{background:#fff; color:var(--ink); border-radius:var(--r-10); box-shadow:var(--shadow-subtle)}
.btn--white:hover{background:var(--surface-2); color:var(--ink)}
.btn--ghost{background:rgba(148,151,169,.08); color:var(--ink)}
.btn--ghost:hover{background:rgba(148,151,169,.14); color:var(--ink)}

/* ---------------------------------------------------------
   Conversion CTA: every button pointing at the consult URL is
   amber, whichever .btn variant it uses. Targeted by href so
   non-CTA buttons ("View all guides", "Learn more") stay navy.
   Marked with .btn--cta by the page engine, so the treatment does not depend
   on the destination URL matching a pattern.
   The label is dark navy, not white: white on #ffb343 is 1.78:1.
   --------------------------------------------------------- */
.btn--cta{
  background:var(--orange); color:var(--orange-ink);
  border-color:var(--orange-edge); font-weight:700;
}
.btn--cta:hover{
  background:var(--orange-dark); color:var(--orange-ink);
  border-color:var(--orange-edge);
}
/* amber on the navy band is 5.64:1, so it needs no extra boundary */
.cta-band .btn--cta{border-color:var(--orange)}
.cta-band .btn--cta:hover{border-color:var(--orange-dark)}

.btn--lg{padding:16px 26px; font-size:17px}
.btn--block{width:100%}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:var(--r-6);
  font-size:12px; font-weight:600; line-height:1.33;
}
.badge--success{background:var(--green-subtle); color:var(--green-dark)}
.badge--neutral{background:rgba(104,107,130,.12); color:#484b5e; border-radius:var(--r-8)}
.badge--brand{background:var(--navy-subtle); color:var(--navy)}

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-16); padding:24px; box-shadow:var(--shadow-micro);
}
.card--lift{box-shadow:var(--shadow-subtle)}
.card h4{margin-bottom:8px}
.card p:last-child{margin-bottom:0}
.card__meta{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-bottom:10px}

/* ---------- Callouts ---------- */
.note{
  border-radius:var(--r-12); padding:18px 20px; font-size:15px; line-height:1.6;
  border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2);
}
.note strong{color:var(--ink)}
.note--brand{background:var(--navy-tint); border-color:rgba(11,61,145,.18)}
.note--warn{background:var(--amber-subtle); border-color:rgba(255,179,0,.35)}
.note--stop{background:var(--red-subtle); border-color:rgba(212,53,28,.25)}
.note--clinical{background:var(--green-subtle); border-color:rgba(0,130,59,.25); color:var(--green-dark)}

/* ---------- Ticks ---------- */
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ticks li{position:relative; padding-left:28px; font-size:15px; line-height:1.5; color:var(--ink-2)}
.ticks li::before{
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:var(--r-6);
  background:var(--green-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2300823b'%3E%3Cpath d='M8.1 14.3 4.3 10.5l1.4-1.4 2.4 2.4 6-6 1.4 1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
}
.ticks--cross li::before{
  background:var(--red-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23d4351c'%3E%3Cpath d='M14.7 6.7 13.3 5.3 10 8.6 6.7 5.3 5.3 6.7 8.6 10l-3.3 3.3 1.4 1.4L10 11.4l3.3 3.3 1.4-1.4L11.4 10z'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* ---------- Header (CTA-first) ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border-soft);
}
.site-header__bar{display:flex; align-items:center; gap:16px; height:68px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:0 1 auto; min-width:0}
.brand__logo{height:36px; width:auto; flex:0 0 auto}
.footer__logo{height:40px; width:auto; margin-bottom:16px}
.site-nav{display:none; margin-left:auto}
.site-nav a{
  font-size:15px; font-weight:500; color:var(--ink-2); text-decoration:none;
  padding:8px 12px; border-radius:var(--r-8);
}
.site-nav a:hover{background:var(--surface-3); color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--navy); font-weight:600}
.header-cta{display:flex; align-items:center; gap:12px; margin-left:auto}
.header-cta__meta{display:none; text-align:right; line-height:1.25}
.header-cta__price{font-size:14px; font-weight:700; color:var(--ink)}
.header-cta__note{font-size:12px; color:var(--muted-2)}
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r-10);
  background:rgba(148,151,169,.08); border:0; cursor:pointer; color:var(--ink);
}
.nav-toggle svg{width:20px; height:20px}
.mobile-nav{display:none; border-top:1px solid var(--border-soft); padding:12px 0 18px}
.mobile-nav.is-open{display:block}
.mobile-nav a{
  display:block; padding:12px 4px; font-size:16px; font-weight:500;
  color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--border-soft);
}
.mobile-nav a:last-of-type{border-bottom:0}
@media(min-width:1024px){
  .site-nav{display:flex; align-items:center; gap:2px; margin-left:24px}
  .header-cta__meta{display:block}
  .nav-toggle{display:none}
  .mobile-nav{display:none !important}
}

/* ---------- Hero ---------- */
.hero{padding:56px 0 48px; background:linear-gradient(180deg,var(--surface-2) 0%,#fff 100%)}
.hero__grid{display:grid; gap:32px; align-items:start}
@media(min-width:1024px){
  .hero{padding:72px 0 52px}
  .hero__grid{
    grid-template-columns:1.15fr .85fr; gap:48px;
    grid-template-rows:auto 1fr; align-items:start;
  }
  .hero__grid > div:first-child{grid-column:1; grid-row:1 / span 2}
  .hero__panel{grid-column:2; grid-row:1; align-self:start}
  .hero__trust{grid-column:2; grid-row:2; align-self:start; margin:14px 0 0}
}
.hero h1{margin-bottom:20px}
.hero__lead{font-size:18px; line-height:1.6; color:var(--muted); margin-bottom:28px; max-width:56ch}
.hero__tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
/* .ticks is margin:0 by default; in the hero it needs to clear the buttons */
.hero .ticks{margin:0 0 32px; gap:12px}
.hero .ticks li{font-size:16px}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:20px}
.hero__price{font-size:14px; color:var(--muted); margin:0}
.hero__panel{background:#fff; border:1px solid var(--border); border-radius:var(--r-16); padding:26px 24px; box-shadow:var(--shadow-subtle)}
.hero__panel .ticks{margin:0; gap:11px}
.hero__panel .hero__price{font-size:15px; font-weight:700; color:var(--ink); margin:0 0 2px}
.hero__panel .micro{margin:0 0 16px; color:var(--muted)}

/* ---------- Trust strip ---------- */

.trust{border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); background:#fff; padding:24px 0}
.footer__plain{color:var(--muted-2); font-size:14px; line-height:1.9}

.trust__label{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px; text-align:center}
.trust__row{display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; justify-content:center}
.stars{color:var(--orange); letter-spacing:1px; font-size:13px; line-height:1}
/* review card: same white / hairline / r-16 system as the credential badges */
.trust__item{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-16);
  padding:14px 20px; min-width:248px; box-shadow:var(--shadow-micro);
}
.trust__score{font-size:26px; font-weight:700; color:var(--navy); line-height:1; white-space:nowrap}
.trust__of{font-size:14px; font-weight:600; color:var(--muted-2); margin-left:2px}
.trust__body{display:flex; flex-direction:column; gap:3px; border-left:1px solid var(--border-soft); padding-left:14px}
.trust__name{font-size:14px; font-weight:600; color:var(--ink)}
.trust__meta{font-size:12px; color:var(--muted)}
/* inside a card (About), stack and drop the nested border so it does not double up */
.trust__row--stack{flex-direction:column; gap:10px; margin-top:4px; justify-content:flex-start}
.trust__row--stack .trust__item{min-width:0; width:100%; box-shadow:none; padding:12px 16px}

/* ---------- Tables ---------- */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--r-12)}
table{border-collapse:collapse; width:100%; min-width:640px; font-size:15px}
/* the legal fragments carry bare <table>s with no .table-scroll wrapper:
   give them the prose rhythm, and let them scroll instead of overflowing */
.prose table{margin:0 0 16px; display:block; overflow-x:auto; min-width:0}
.prose table tbody, .prose table thead{min-width:640px; display:table; width:100%}
thead th{
  background:var(--surface-3); text-align:left; padding:14px 16px;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--border);
}
tbody td{padding:14px 16px; border-bottom:1px solid var(--border-soft); vertical-align:top; line-height:1.55; color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
tbody th{padding:14px 16px; text-align:left; font-weight:600; color:var(--ink); border-bottom:1px solid var(--border-soft); white-space:nowrap}

/* ---------- Steps ---------- */
.steps{counter-reset:step; display:grid; gap:20px}
@media(min-width:1024px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:#fff; border:1px solid var(--border); border-radius:var(--r-16); padding:24px}
.step__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--r-10);
  background:var(--navy-subtle); color:var(--navy);
  font-size:14px; font-weight:700; margin-bottom:14px;
}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--border); border-radius:var(--r-16); overflow:hidden; background:#fff}
.faq details{border-bottom:1px solid var(--border-soft)}
.faq details:last-child{border-bottom:0}
.faq summary{
  list-style:none; cursor:pointer; padding:18px 52px 18px 20px; position:relative;
  font-size:16px; font-weight:600; line-height:1.45; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:20px; top:50%; width:12px; height:12px; margin-top:-6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23686b82'%3E%3Cpath d='M10 13.2 3.6 6.8 5 5.4l5 5 5-5 1.4 1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
  transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary:hover{background:var(--surface-2)}
.faq__body{padding:0 20px 20px; font-size:15px; line-height:1.7; color:var(--ink-2)}
.faq__body p:last-child{margin-bottom:0}

/* ---------- CTA band ---------- */
.cta-band{background:var(--navy); color:#fff; border-radius:var(--r-16); padding:40px 28px; text-align:center}
.cta-band h2{color:#fff; margin-bottom:14px}
.cta-band p{color:rgba(255,255,255,.82); max-width:62ch; margin:0 auto 28px}
.cta-band .btn--white{font-weight:700}
/* specificity must match `.cta-band p`, or the note loses its top margin and
   collides with the button above it */
.cta-band p.cta-band__note{font-size:13px; color:rgba(255,255,255,.65); margin:24px auto 0; max-width:62ch}
@media(min-width:768px){.cta-band{padding:56px 40px}}

/* ---------- Comparison columns ---------- */
.compare{display:grid; gap:20px}
@media(min-width:1024px){.compare{grid-template-columns:repeat(3,1fr)}}
.compare__col{background:#fff; border:1px solid var(--border); border-radius:var(--r-16); padding:24px; display:flex; flex-direction:column}
.compare__col--featured{border-color:var(--navy); box-shadow:var(--shadow-subtle)}
.compare__price{font-size:22px; font-weight:700; color:var(--navy); margin:6px 0 16px}

/* ---------- Forms ---------- */
.field{margin-bottom:18px}
.field label{display:block; font-size:14px; font-weight:600; margin-bottom:6px; color:var(--ink)}
.field input,.field textarea,.field select{
  width:100%; padding:12px 14px; font:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1px solid var(--border); border-radius:var(--r-10);
}
.field input:focus,.field textarea:focus{border-color:var(--navy); outline:none; box-shadow:0 0 0 3px rgba(11,61,145,.12)}
.field textarea{min-height:150px; resize:vertical; line-height:1.6}
.field__hint{font-size:13px; color:var(--muted-2); margin-top:6px}
.form-status{display:none; margin-top:16px; padding:14px 16px; border-radius:var(--r-10); font-size:15px; line-height:1.5}
.form-status.is-ok{display:block; background:var(--green-subtle); color:var(--green-dark)}
.form-status.is-error{display:block; background:var(--red-subtle); color:var(--red)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:13px; color:var(--muted-2); padding:18px 0 0}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--navy); text-decoration:underline}
.crumbs span{margin:0 6px}

/* ---------- Page header ---------- */
.page-head{padding:36px 0 32px; background:linear-gradient(180deg,var(--surface-2) 0%,#fff 100%)}
.page-head h1{margin-bottom:16px}
/* one measure for the whole header block: lead, byline and trust all align */
.page-head .lead{max-width:var(--max-prose); margin-bottom:0}
@media(min-width:768px){.page-head{padding:52px 0 40px}}
/* the head band already carries its own bottom padding, so the first content
   section does not need a full 80px on top of it */
.page-head + .section{border-top:0; padding-top:44px}
@media(min-width:1024px){.page-head + .section{padding-top:48px}}

.hero .byline{margin:26px 0 0}
.hero__note{margin:0 0 4px; max-width:52ch}

/* ---------- Post ---------- */
.post-card{
  display:block; background:#fff; border:1px solid var(--border); border-radius:var(--r-16);
  padding:26px; text-decoration:none; color:inherit; box-shadow:var(--shadow-micro);
  transition:box-shadow .18s ease, border-color .18s ease;
}
.post-card:hover{box-shadow:var(--shadow-lift); border-color:var(--muted-2); color:inherit}
.post-card h3{margin-bottom:10px}
.post-meta{font-size:13px; color:var(--muted-2); margin-bottom:14px}
.key-takeaways{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-16); padding:24px; margin:28px 0}
/* a block sitting first in a section already has the section padding above it;
   its own top margin would stack on top and throw the rhythm out */
.wrap > *:first-child, .prose > *:first-child{margin-top:0}
.key-takeaways h2{font-size:20px; letter-spacing:normal; margin-bottom:14px}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface-2); border-top:1px solid var(--border); padding:52px 0 32px; margin-top:0}
.footer__grid{display:grid; gap:32px}
@media(min-width:768px){.footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.footer__title{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px}
.footer__links{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer__links a{font-size:15px; color:var(--ink-2); text-decoration:none}
.footer__links a:hover{color:var(--navy); text-decoration:underline}
.footer__about{font-size:14px; line-height:1.65; color:var(--muted); max-width:44ch}
.footer__bottom{
  margin-top:36px; padding-top:22px; border-top:1px solid var(--border);
  font-size:13px; line-height:1.65; color:var(--muted-2);
}
.footer__bottom p{margin:0 0 8px}

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff;
  padding:12px 18px; border-radius:0 0 var(--r-10) 0; z-index:100; font-weight:600;
}
.skip-link:focus{left:0; color:#fff}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* ---------- Header: narrow viewports ---------- */
@media(max-width:1023px){
  .site-header__bar{gap:10px}
  .brand{overflow:hidden}
  .brand__logo{height:32px}
  .header-cta{gap:8px; flex:0 0 auto}
  .header-cta .btn{padding:10px 14px; font-size:14px}
}
@media(max-width:520px){
  .brand__logo{height:26px}
  .header-cta .btn{padding:10px 12px; font-size:14px}
}

a.trust__item{text-decoration:none}
a.trust__item:hover{border-color:var(--navy); box-shadow:var(--shadow-subtle)}
a.trust__item:hover .trust__name{text-decoration:underline}
@media (max-width:520px){
  .trust__item{width:100%; min-width:0}
}

/* ---------- Related guides (silo links) ---------- */
.related{display:grid; gap:14px; margin-top:8px}
@media(min-width:768px){.related{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.related a{
  display:block; padding:18px 20px; background:#fff; border:1px solid var(--border);
  border-radius:var(--r-12); text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-micro); transition:box-shadow .18s ease, border-color .18s ease;
}
.related a:hover{box-shadow:var(--shadow-lift); border-color:var(--muted-2); color:var(--ink)}
.related strong{display:block; font-size:16px; font-weight:600; margin-bottom:4px}
.related span{font-size:14px; color:var(--muted)}

/* ---------- Byline ---------- */
.byline{
  display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:28px 0 0; padding:8px 18px 8px 8px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-pill);
  box-shadow:var(--shadow-micro);
}
.byline__photo{
  width:40px; height:40px; flex:0 0 auto; border-radius:50%;
  background:var(--surface-3); object-fit:cover;
}
.byline__group{display:flex; flex-direction:column; gap:1px; min-width:0}
/* hairline divider between the doctor and the credential/date pair */
.byline__group--meta{
  padding-left:14px; border-left:1px solid var(--border-soft);
}
.byline__name{font-size:14px; font-weight:700; color:var(--ink); line-height:1.3}
.byline__sub{font-size:13px; color:var(--muted); line-height:1.3}
/* once it wraps, a full pill radius looks stretched: fall back to a card
   and turn the vertical divider into a horizontal rule */
@media(max-width:520px){
  .byline{
    display:flex; gap:10px 12px; padding:14px 16px;
    border-radius:var(--r-16); width:100%;
  }
  .byline__group--meta{
    padding:10px 0 0; border-left:0; flex-basis:100%;
    border-top:1px solid var(--border-soft);
  }
}

/* ---------- Hero banner ---------- */
.hero-banner{background:var(--navy); line-height:0}
.hero-banner img{width:100%; height:auto; display:block; max-width:1440px; margin:0 auto}

/* ---------- Hero panel illustration ---------- */
.hero__art{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:22px}
.hero__art img{width:100%; max-width:460px; height:auto; display:block}

/* Credential badges, hero right column, stacked under the illustration */
.hero__creds{
  display:grid; grid-template-columns:1fr; gap:2px;
  width:100%; margin:36px 0 0;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-16);
  padding:6px 8px; box-shadow:var(--shadow-subtle);
}
.hero__cred{display:flex; align-items:center; justify-content:flex-start; padding:12px 18px; position:relative}
.hero__cred img{display:block; height:46px; width:auto; max-width:100%}
/* stacked: hairline between rows */
.hero__cred + .hero__cred::before{
  content:""; position:absolute; top:0; left:12px; right:12px;
  height:1px; background:var(--border-soft);
}
@media(min-width:768px){
  .hero__creds{grid-template-columns:repeat(3,1fr); padding:8px 10px}
  /* side by side: the hairline becomes a vertical divider */
  .hero__cred + .hero__cred::before{
    top:10px; bottom:10px; left:0; right:auto;
    width:1px; height:auto; background:var(--border-soft);
  }
}
@media(max-width:767px){.hero__cred img{height:40px}}

/* ---------- Review badges (Trustpilot / Google) ---------- */
.hero__trust{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:18px 0 0}
.rev{
  background:#fff; border:1px solid var(--border); border-radius:var(--r-12);
  padding:14px 16px; box-shadow:var(--shadow-micro);
}
.rev__head{display:flex; align-items:center; gap:8px; margin-bottom:9px}
.rev__mark{display:block; flex:0 0 auto}
.rev__brand{font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.2px}
.rev__stars{display:flex; gap:3px; margin-bottom:9px}
.rev__stars--tp span{width:22px; height:22px; background:#00b67a; border-radius:2px; position:relative}
.rev__stars--tp span::after{
  content:"\2605"; position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-size:14px; line-height:1;
}
.rev__stars--tp span.is-half{background:linear-gradient(90deg,#00b67a 50%,#dcdce6 50%)}
.rev__stars--g span{color:#fbbc05; font-size:19px; line-height:1}
.rev__meta{margin:0; font-size:13px; line-height:1.4; color:var(--muted)}
.rev__meta strong{color:var(--ink); font-weight:700}
.rev__meta a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}
.rev__meta a:hover{color:var(--navy)}
.rev__sep{color:var(--border)}
@media(max-width:560px){.hero__trust{grid-template-columns:1fr}}

/* trust strip on commercial pages that use .page-head rather than a hero */


@media (max-width:980px){
  .hero__art{gap:18px}
}

.hero__ticks{margin:0 0 14px}
.hero__note{margin:0 0 22px; max-width:52ch}
@media(min-width:1024px){ .hero__art{align-items:flex-start; padding-top:8px} }

/* ---------- Cross-link box (silo disambiguation) ---------- */
.xlink{background:var(--navy-tint); border:1px solid rgba(11,61,145,.18); border-radius:var(--r-12); padding:16px 20px; margin:20px 0}
.xlink p{margin:0; font-size:15px; line-height:1.7; color:var(--ink-2)}
.xlink a{color:var(--navy); text-decoration:underline}

/* ---------------------------------------------------------------------------
   Cookie consent
   Sits above the sticky header (z-index 60) but below the skip link (100).
--------------------------------------------------------------------------- */
.consent{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:90;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-16); box-shadow:var(--shadow-lift);
  padding:20px 24px;
}
.consent[hidden]{display:none}
.consent__inner{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.consent__copy{flex:1 1 420px; min-width:0}
.consent__title{margin:0 0 4px; font-size:16px; font-weight:650; color:var(--ink)}
.consent__text{margin:0; font-size:14px; line-height:1.6; color:var(--ink-2)}
.consent__text a{color:var(--navy); text-decoration:underline}
.consent__actions{display:flex; gap:10px; flex:0 0 auto}
.consent__actions .btn{font-size:15px; padding:11px 20px; min-width:104px}

@media (max-width:640px){
  .consent{left:8px; right:8px; bottom:8px; padding:18px}
  .consent__inner{gap:16px}
  .consent__actions{width:100%}
  .consent__actions .btn{flex:1 1 0; min-width:0}
}

/* Footer control that reopens the prompt. Looks like the links beside it. */
.footer__linkbtn{
  background:none; border:0; padding:0; margin:0;
  font:inherit; font-size:15px; color:var(--ink-2);
  text-align:left; text-decoration:none; cursor:pointer;
}
.footer__linkbtn:hover{color:var(--navy); text-decoration:underline}