/* ═══════════════════════════════════════════════════════════════
   AJL — Aspire Journey Learning · WARM TEMPLATE
   Symbols instead of photography. Readability first:
   18px body, 1.72 leading, a 60-character measure, and one
   plain-language idea per section.

   SINGLE THEME, DELIBERATELY. This design is a warm cream world
   with navy and gold in it. There is no dark variant — a cream
   page that flips to dark brown is a different design, not the
   same one at night. Every colour is painted explicitly so the
   page holds whatever theme the visitor's browser is set to.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* warm paper */
  --cream:#FAF6EE;
  --cream-2:#F2EADC;
  --surface:#FFFFFF;
  --line:#E6DCCA;
  --line-soft:#F0E8DA;

  /* ink — warm, never pure black */
  --ink:#1D2530;
  --muted:#6F6656;
  --on-brand:#FFFFFF;

  /* brand */
  --navy:#00447C;
  --navy-soft:#0E5C9E;
  --gold:#E5A100;
  --gold-lt:#F6BF41;
  --gold-deep:#8A5F00;
  --gold-pale:#FBEFD2;

  /* status */
  --ok:#0F6E56;
  --warn:#9A6000;
  --hot:#B5342A;

  --shadow-sm:0 1px 2px rgba(60,44,20,.05), 0 6px 16px -10px rgba(60,44,20,.18);
  --shadow:0 2px 4px rgba(60,44,20,.06), 0 18px 40px -20px rgba(60,44,20,.28);

  --tint:12%;   /* how much category hue sits in a tinted panel */
  --lift:0%;    /* how far a hue lifts toward white for text */

  --r:16px;
  --maxw:1160px;
}
/* ─────────────  BASE  ───────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:18px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:Fraunces, Georgia, serif;
  font-weight:600; font-optical-sizing:auto;
  letter-spacing:-.012em; line-height:1.08;
  text-wrap:balance; margin:0;
}
h4,h5{font-family:"Public Sans",sans-serif; font-weight:700; letter-spacing:-.01em; line-height:1.3; margin:0}
.mono,.eyebrow,.num,.fee,.code{
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric:tabular-nums;
}
a{color:inherit}
p{margin:0; max-width:62ch}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:14px; top:14px; z-index:200; background:var(--gold); color:#2A1D00; padding:11px 18px; border-radius:9px; font-weight:700}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:28px}
.narrow{max-width:760px}
section{padding-block:clamp(64px,8vw,116px)}
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 18px; display:block;
}
.lede{font-size:21px; line-height:1.66; color:var(--muted); max-width:58ch}
.sec-head{margin-bottom:clamp(38px,5vw,60px)}
.sec-head h2{font-size:clamp(28px,3.9vw,44px); margin-bottom:18px; max-width:20ch}

/* ─────────────  SYMBOLS  ───────────── */
.sym{display:block; flex-shrink:0}
.symbox{
  display:grid; place-items:center; flex-shrink:0;
  width:64px; height:64px; border-radius:18px;
  background:color-mix(in srgb, var(--c, var(--gold)) var(--tint), var(--surface));
  color:color-mix(in srgb, var(--c, var(--gold-deep)), #fff var(--lift));
  border:1px solid color-mix(in srgb, var(--c, var(--gold)) 22%, transparent);
}
.symbox.sm{width:48px; height:48px; border-radius:14px}
.symbox.lg{width:80px; height:80px; border-radius:22px}

/* ─────────────  HEADER  ───────────── */
header.site{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line-soft);
}
.bar{display:flex; align-items:center; gap:22px; height:80px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0}
.mark{
  width:44px; height:44px; background:#fff; border-radius:12px;
  display:grid; place-items:center; padding:5px; flex-shrink:0;
  box-shadow:0 0 0 1px var(--line);
}
.mark svg{display:block; width:100%; height:auto}
.brand-tx b{display:block; font-family:Fraunces,serif; font-weight:600; font-size:20px; line-height:1.1}
.brand-tx span{display:block; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
nav.main{display:flex; gap:4px; margin-left:auto; align-items:center}
nav.main a{
  font-weight:600; font-size:16px; text-decoration:none; color:var(--ink);
  opacity:.75; padding:9px 15px; border-radius:10px; white-space:nowrap;
}
nav.main a:hover{opacity:1; background:var(--cream-2)}
nav.main a[aria-current="page"]{opacity:1; background:var(--cream-2); color:var(--navy)}
@media (max-width:1040px){ nav.main{display:none} .bar{gap:14px; height:70px} }
.mnav{display:none; border-top:1px solid var(--line-soft); background:var(--cream-2); overflow-x:auto}
.mnav ul{display:flex; gap:2px; list-style:none; margin:0; padding:9px 28px}
.mnav a{font-weight:600; font-size:15px; text-decoration:none; color:var(--muted); padding:8px 14px; border-radius:9px; white-space:nowrap; display:block}
.mnav a[aria-current="page"]{background:var(--navy); color:var(--on-brand)}
@media (max-width:1040px){ .mnav{display:block} }

/* ─────────────  BUTTONS  ───────────── */
.btn{
  font-weight:700; font-size:17px; text-decoration:none; cursor:pointer;
  padding:16px 28px; border-radius:12px; border:2px solid transparent;
  display:inline-flex; align-items:center; gap:10px; line-height:1.2;
  transition:transform .14s ease, background .18s ease, border-color .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold); color:#2A1D00; border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-lt); border-color:var(--gold-lt)}
.btn-navy{background:var(--navy); color:var(--on-brand); border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-soft); border-color:var(--navy-soft)}
.btn-line{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-line:hover{border-color:var(--ink)}
.btn .sym{width:19px; height:19px}

/* ─────────────  HERO  ───────────── */
.hero{padding-block:clamp(52px,7vw,96px) clamp(56px,7vw,100px); position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(36px,5vw,72px); align-items:center}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr; gap:40px} }
.pill{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:9px 18px; margin-bottom:26px;
  font-size:14px; font-weight:600; color:var(--muted);
}
.pill .sym{width:17px; height:17px; color:var(--ok)}
.hero h1{font-size:clamp(36px,5.6vw,62px); margin-bottom:24px; max-width:15ch}
.hero h1 .hl{
  background:linear-gradient(transparent 62%, var(--gold-lt) 62%, var(--gold-lt) 94%, transparent 94%);
  padding-inline:2px;
}
.hero-sub{font-size:21px; line-height:1.64; color:var(--muted); max-width:46ch; margin-bottom:34px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}

/* ─────────────  CALCULATOR  ───────────── */
.calc{background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); overflow:hidden}
.calc-hd{padding:26px 28px 20px; border-bottom:1px solid var(--line-soft)}
.calc-hd h3{font-size:23px; margin-bottom:8px}
.calc-hd p{font-size:16px; color:var(--muted); line-height:1.6}
.calc-bd{padding:24px 28px; display:flex; flex-direction:column; gap:20px}
.flab{display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:9px}
.inp{display:flex; align-items:center; border:2px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden}
.inp:focus-within{border-color:var(--gold)}
.inp .pfx{padding:0 14px; font-family:"JetBrains Mono",monospace; font-size:14px; color:var(--muted); background:var(--cream-2); align-self:stretch; display:flex; align-items:center; border-right:1px solid var(--line)}
.inp input{border:0; background:transparent; padding:14px 15px; width:100%; outline:none; font-family:"JetBrains Mono",monospace; font-size:19px; font-weight:500}
.rates{display:flex; gap:10px}
.rate{flex:1}
.rate input{position:absolute; opacity:0; pointer-events:none}
.rate span{display:block; text-align:center; padding:12px 8px; border:2px solid var(--line); border-radius:12px; cursor:pointer; font-size:14px; font-weight:600; color:var(--muted); line-height:1.4}
.rate input:checked + span{border-color:var(--gold); background:var(--gold-pale); color:var(--gold-deep)}
.rate input:focus-visible + span{outline:3px solid var(--gold); outline-offset:3px}
.calc-out{background:#00447C; color:#FFFFFF; padding:26px 28px 28px}
.calc-out .olab{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#A9CCE8; display:block; margin-bottom:8px}
.calc-big{font-family:"JetBrains Mono",monospace; font-weight:700; font-size:clamp(34px,5vw,46px); line-height:1.05; color:var(--gold-lt)}
.calc-note{font-size:15px; color:#BBD6EC; margin-top:10px; line-height:1.6; max-width:none}
.calc-split{display:flex; gap:26px; flex-wrap:wrap; margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.18)}
.calc-split div b{display:block; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:24px; color:#fff; line-height:1.15}
.calc-split div span{font-size:14px; color:#A9CCE8}
.calc-fine{font-size:13.5px; color:var(--muted); padding:16px 28px 22px; line-height:1.6; background:var(--cream-2); max-width:none}
.calc-fine a{color:var(--navy)}

/* ─────────────  BIG READABLE POINTS  ───────────── */
.points{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(28px,4vw,52px)}
.point .symbox{margin-bottom:22px}
.point h3{font-size:25px; margin-bottom:12px}
.point p{font-size:17.5px; color:var(--muted); line-height:1.68}

/* ─────────────  STEPS  ───────────── */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:26px}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px; position:relative}
.step .symbox{margin-bottom:20px}
.step-n{
  position:absolute; top:26px; right:26px;
  font-family:"JetBrains Mono",monospace; font-size:13px; font-weight:700;
  color:var(--muted); opacity:.6;
}
.step h4{font-size:20px; margin-bottom:10px}
.step p{font-size:16.5px; color:var(--muted); line-height:1.66}
.step-who{
  display:inline-block; margin-top:16px; font-size:13px; font-weight:700;
  padding:5px 12px; border-radius:99px; letter-spacing:.02em;
}
.who-you{background:var(--gold-pale); color:var(--gold-deep)}
.who-us{background:color-mix(in srgb, var(--ok) 14%, var(--surface)); color:var(--ok)}

/* ─────────────  CATEGORY TILES  ───────────── */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
.tile{
  display:flex; align-items:center; gap:16px; padding:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  text-decoration:none; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tile:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--c) 45%,transparent); box-shadow:var(--shadow-sm)}
.tile b{display:block; font-size:16.5px; font-weight:700; line-height:1.32}
.tile span{font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--muted)}

/* ─────────────  COURSE LIST  ───────────── */
.runs{display:flex; flex-direction:column; gap:12px}
.run{
  display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 24px;
}
.run:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.run-date{
  text-align:center; min-width:72px; padding-right:20px; border-right:1px solid var(--line-soft);
}
.run-date small{display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:3px}
.run-date b{display:block; font-family:"JetBrains Mono",monospace; font-size:19px; font-weight:700; line-height:1.15}
.run-date span{font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.run-main h4{font-size:19px; margin-bottom:6px}
.run-meta{display:flex; gap:8px 16px; flex-wrap:wrap; align-items:center; font-size:14.5px; color:var(--muted)}
.run-meta .cat{display:inline-flex; align-items:center; gap:7px; font-weight:600; color:color-mix(in srgb,var(--c),#fff var(--lift))}
.run-meta .cat .sym{width:16px; height:16px}
.run-side{display:flex; flex-direction:column; align-items:flex-end; gap:9px; text-align:right}
.run-fee{font-family:"JetBrains Mono",monospace; font-weight:700; font-size:18px}
.run-fee small{display:block; font-family:"Public Sans",sans-serif; font-size:12.5px; font-weight:400; color:var(--muted)}
.st{font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:7px}
.st i{width:8px; height:8px; border-radius:50%}
.st-open{color:var(--ok)} .st-open i{background:var(--ok)}
.st-fast{color:var(--warn)} .st-fast i{background:var(--warn)}
.st-wait{color:var(--hot)} .st-wait i{background:var(--hot)}

/* the month's lead topic, and a course whose price is not published yet */
.run.is-anchor{border-color:color-mix(in srgb,var(--gold) 55%,transparent); background:var(--gold-pale)}
.anchor-tag{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
  color:var(--gold-deep); background:#fff; border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  border-radius:999px; padding:3px 10px 3px 8px;
}
.anchor-tag .sym{width:13px; height:13px}
.run-meta .code{font-size:12.5px; letter-spacing:.03em; opacity:.72}
.run-fee.no-fee{font-family:"Public Sans",sans-serif; font-size:15px; color:var(--navy)}
@media (max-width:760px){
  .run{grid-template-columns:1fr; gap:14px}
  .run-date{display:flex; gap:8px; align-items:baseline; text-align:left; border-right:0; padding-right:0; border-bottom:1px solid var(--line-soft); padding-bottom:12px}
  .run-side{align-items:flex-start; text-align:left}
}
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px}
.chip{
  font-size:14.5px; font-weight:600; padding:10px 18px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer;
}
.chip:hover{border-color:var(--gold); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--on-brand)}

/* ─────────────  CATALOGUE  ───────────── */
.search{
  display:flex; align-items:center; gap:12px; border:2px solid var(--line);
  border-radius:14px; background:var(--surface); padding:0 18px; max-width:460px; margin-bottom:28px;
}
.search:focus-within{border-color:var(--gold)}
.search .sym{width:20px; height:20px; color:var(--muted)}
.search input{border:0; background:transparent; outline:none; padding:15px 0; width:100%; font-size:17px}
.cats{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:18px; align-items:start}
.cat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.cat-hd{display:flex; align-items:center; gap:16px; padding:22px; cursor:pointer; list-style:none}
.cat-hd::-webkit-details-marker{display:none}
.cat-hd::marker{content:""}
.cat-t{flex:1; min-width:0}
.cat-t b{display:block; font-size:17px; font-weight:700; line-height:1.3}
.cat-t span{font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--muted)}
.chev{width:18px; height:18px; color:var(--muted); transition:transform .2s ease}
.cat[open] .chev{transform:rotate(180deg)}
.cat ul{list-style:none; margin:0; padding:0 22px 22px}
.cat li{display:flex; gap:12px; align-items:baseline; padding:10px 0; border-top:1px solid var(--line-soft); font-size:16px; line-height:1.5}
.cat li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--c); flex-shrink:0; transform:translateY(-2px)}
.cat li .d{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--muted); flex-shrink:0}
.cat.is-new{border-color:color-mix(in srgb,var(--c) 50%,transparent)}

/* ─────────────  BANDS  ───────────── */
.band-cream{background:var(--cream-2)}
.band-navy{background:#00447C; color:#FFFFFF}
.band-navy h2,.band-navy h3{color:#fff}
.band-navy .lede,.band-navy p{color:#C4DBEF}
.band-navy .eyebrow{color:var(--gold-lt)}
.band-gold{background:var(--gold-pale)}

.cta-in{display:flex; gap:28px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.cta-in h2{font-size:clamp(26px,3.4vw,38px); max-width:18ch}

/* ─────────────  TEAM BUILDING  ───────────── */
.tb-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
.tb-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px}
.tb-item .symbox{margin-bottom:18px}
.tb-item h4{font-size:19px; margin-bottom:9px}
.tb-item p{font-size:16px; color:var(--muted); line-height:1.62}
.tb-dur{display:inline-block; margin-top:14px; font-family:"JetBrains Mono",monospace; font-size:12.5px; font-weight:700; color:var(--gold-deep); background:var(--gold-pale); padding:4px 11px; border-radius:99px}

/* ─────────────  ABOUT / FORM / FAQ  ───────────── */
.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,68px); align-items:start}
@media (max-width:880px){ .two{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px}
.avatar{
  width:72px; height:72px; border-radius:50%; background:var(--navy); color:var(--on-brand);
  display:grid; place-items:center; font-family:Fraunces,serif; font-weight:600; font-size:26px; margin-bottom:20px;
}
.dl{margin:20px 0 0; padding-top:18px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:12px}
.dl div{display:flex; justify-content:space-between; gap:16px; font-size:15.5px}
.dl dt{color:var(--muted)} .dl dd{margin:0; font-family:"JetBrains Mono",monospace; font-size:14px; text-align:right}
.contacts{display:flex; flex-direction:column; gap:20px; margin-top:32px}
.ci{display:flex; gap:16px; align-items:flex-start}
.ci .symbox{width:46px; height:46px; border-radius:13px}
.ci .symbox .sym{width:21px; height:21px}
.ci b{display:block; font-size:18px; line-height:1.4}
.ci a{color:var(--ink); text-decoration:none; border-bottom:2px solid color-mix(in srgb,var(--gold) 55%,transparent)}
.ci a:hover{border-color:var(--gold)}
.ci span{font-size:15px; color:var(--muted); display:block}
.form{display:flex; flex-direction:column; gap:18px}
.form input,.form select,.form textarea{
  width:100%; border:2px solid var(--line); border-radius:12px; padding:14px 16px;
  background:var(--surface); outline:none; font-size:17px; font-family:inherit;
}
.form textarea{resize:vertical; min-height:100px; line-height:1.6}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold)}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:560px){ .f2{grid-template-columns:1fr} }
.wa{
  background:#25D366; color:#062E13; border:0; border-radius:12px; padding:18px;
  font-weight:800; font-size:18px; cursor:pointer; text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:11px;
}
.wa:hover{background:#3BE07A}
.faq{display:flex; flex-direction:column; gap:12px; max-width:820px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:14px}
.faq summary{padding:20px 24px; cursor:pointer; font-weight:700; font-size:18px; display:flex; gap:14px; align-items:center; list-style:none; line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::after{content:"+"; margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:22px; color:var(--gold-deep); flex-shrink:0}
.faq details[open] summary::after{content:"\2013"}
.faq p{padding:0 24px 22px; font-size:16.5px; color:var(--muted); line-height:1.68; max-width:none}

.notice{
  background:var(--gold-pale); border:1px dashed color-mix(in srgb,var(--gold) 55%,transparent);
  border-radius:14px; padding:18px 22px; display:flex; gap:14px; align-items:flex-start;
  font-size:16px; line-height:1.62;
}
.notice .sym{width:20px; height:20px; color:var(--gold-deep); margin-top:3px}
.notice b{font-weight:700}
.notice p{max-width:none}

/* ─────────────  FOOTER  ───────────── */
footer.site{background:var(--ink); color:#B5AC9C; padding-block:56px 32px; font-size:16px}
.f-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.12)}
@media (max-width:780px){ .f-grid{grid-template-columns:1fr; gap:30px} }
.f-grid h5{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 16px}
.f-links{display:flex; flex-direction:column; gap:11px}
.f-links a{text-decoration:none; color:#B5AC9C}
.f-links a:hover{color:var(--gold-lt)}
.f-brand{display:flex; gap:14px; align-items:center; margin-bottom:18px}
.f-brand b{display:block; font-family:Fraunces,serif; font-weight:600; font-size:20px; color:#fff}
.f-brand > span > span{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.f-bot{padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px}
footer.site p{max-width:38ch; line-height:1.7}

/* ═══ ROLE BUNDLES ═══════════════════════════════════════════════
   Four tiers of staff on one theme. The card borrows its accent
   from the lead subject; each line borrows its own.
   ═══════════════════════════════════════════════════════════════ */
.bundles{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:18px}
.bundle{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 26px 20px; display:flex; flex-direction:column; gap:18px;
  border-top:3px solid var(--c);
}
.bundle-hd{display:flex; gap:14px; align-items:flex-start}
.bundle-hd h4{font-size:21px; margin-bottom:5px}
.bundle-hd p{font-size:15.5px; color:var(--muted); line-height:1.6}
.bundle-list{list-style:none; display:flex; flex-direction:column; gap:0; margin:0; padding:0; counter-reset:b}
.bundle-list li{
  display:grid; grid-template-columns:132px 1fr; gap:14px; align-items:baseline;
  padding:11px 0; border-top:1px solid var(--line-soft); font-size:15px;
}
.bundle-list .tier{
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); line-height:1.4;
}
.bundle-list .who{display:inline-flex; gap:9px; align-items:baseline; line-height:1.5}
.bundle-list .who .sym{width:15px; height:15px; flex:none; color:var(--c); transform:translateY(2px)}
.bundle-ft{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft);
  display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.bundle-ft .mono{font-size:12.5px; color:var(--muted)}
@media (max-width:560px){
  .bundle-list li{grid-template-columns:1fr; gap:4px}
}

/* ═══ CLAIMING FACTS ═════════════════════════════════════════════ */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.fact{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px;
}
.fact b{display:block; font-size:17px; margin-bottom:6px}
.fact p{font-size:15.5px; color:var(--muted); line-height:1.6}