/* 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;
}

/* =========================================================
   Sports Medical 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__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.
   If the CTA URL changes site-wide, update this selector too.
   The label is dark navy, not white: white on #ffb343 is 1.78:1.
   --------------------------------------------------------- */
.btn[href*="sportsmedicalconsult"]{
  background:var(--orange); color:var(--orange-ink);
  border-color:var(--orange-edge); font-weight:700;
}
.btn[href*="sportsmedicalconsult"]: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[href*="sportsmedicalconsult"]{border-color:var(--orange)}
.cta-band .btn[href*="sportsmedicalconsult"]: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 64px}
  .hero__grid{grid-template-columns:1.15fr .85fr; gap:48px}
}
.hero h1{margin-bottom:16px}
.hero__lead{font-size:18px; line-height:1.6; color:var(--muted); margin-bottom:20px; max-width:56ch}
.hero__tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:14px}
.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:24px; box-shadow:var(--shadow-subtle)}

/* ---------- 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}
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:36px 28px; text-align:center}
.cta-band h2{color:#fff; margin-bottom:12px}
.cta-band p{color:rgba(255,255,255,.82); max-width:62ch; margin:0 auto 22px}
.cta-band .btn--white{font-weight:700}
.cta-band__note{font-size:13px; color:rgba(255,255,255,.65); margin:18px auto 0; max-width:62ch}
@media(min-width:768px){.cta-band{padding:48px 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 8px; background:linear-gradient(180deg,var(--surface-2) 0%,#fff 100%)}
.page-head h1{margin-bottom:14px}
.page-head .lead{max-width:70ch}

/* ---------- 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}
.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{
  border-left:3px solid var(--navy); background:var(--surface-2);
  padding:18px 20px; border-radius:0 var(--r-12) var(--r-12) 0; margin:28px 0;
}
.byline p{margin:0 0 6px; font-size:15px; line-height:1.6; color:var(--ink-2)}
.byline p:last-child{margin-bottom:0}
.byline .reviewer{font-size:14px; color:var(--muted); font-style:italic}

/* ---------- 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:flex; flex-direction:column; align-items:stretch;
  gap:2px; width:100%; max-width:460px;  /* matches .hero__art img */
  background:#fff; border:1px solid var(--border); border-radius:var(--r-16);
  padding:8px 10px; box-shadow:var(--shadow-subtle);
}
.hero__cred{display:flex; align-items:center; justify-content:flex-start; padding:9px 14px; position:relative}
.hero__cred + .hero__cred::before{
  content:""; position:absolute; top:0; left:12px; right:12px;
  height:1px; background:var(--border-soft);
}
.hero__cred svg{display:block; height:46px; width:auto; max-width:100%}
@media (max-width:980px){
  .hero__art{gap:18px}
  .hero__creds{max-width:420px}
  .hero__cred svg{height:40px}
}

.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}