/* Aircrew Functional Health Support Scheme — shared shell
   Palette + type follow the existing public microsite (CPR_Webpages/bmiq)
   so crew see one house style across cprphysio.hk. */

:root {
  --sky-0:#0a1628; --sky-1:#10233f; --panel:#0d1a2e; --bezel:#1c2c42;
  --bezel-hi:#2a3d58; --glass:#0d1520; --ink:#e8f0f8; --ink-dim:#8fa8c4;
  --teal:#2dd4bf; --gold:#f5c66b; --red:#ef4444; --green:#4ade80;
  --line:rgba(143,168,196,.18);
  /* Sampled from the CPR Physio seal so the fallback mark matches the real logo. */
  --seal-field:#5b8296; --seal-ring:#e0cf22;
  --shell:min(1060px, 100%);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

/* Opaque ground on BOTH html and body: a page whose only background is a
   fixed gradient paints white below the fold in some engines, and light ink
   on white is an unreadable page. The gradient rides on a fixed layer instead
   of background-attachment, which avoids canvas-propagation quirks entirely. */
html { background:var(--sky-0); }

body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang HK","Noto Sans TC",sans-serif;
  background:var(--sky-0);
  color:var(--ink); line-height:1.6; overflow-x:hidden;
  position:relative; min-height:100vh;
}
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(45,212,191,.10), transparent 60%),
    linear-gradient(180deg, var(--sky-0), var(--sky-1) 55%, var(--sky-0));
}
.num { font-variant-numeric:tabular-nums; }
img { max-width:100%; display:block; }

/* ---------- top bar ---------- */
.topbar {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px;
  justify-content:space-between; padding:11px 18px;
  background:rgba(10,22,40,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; min-width:0; }
/* Sized for the round CPR Physio seal (1:1). A wider wordmark also fits —
   height is fixed and width stays auto, so either shape drops in cleanly. */
.brand-logo { height:36px; width:auto; max-width:190px; object-fit:contain; }
.brand-text { display:none; align-items:center; gap:11px; }
.brand.nologo .brand-logo { display:none; }
.brand.nologo .brand-text { display:flex; }
.brand-words { display:block; }
.brand-mark {
  width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--seal-field); color:#fff; border:2px solid var(--seal-ring);
  font-weight:900; font-size:11px; letter-spacing:.02em;
}
.brand-name { display:block; font-size:14px; font-weight:900; letter-spacing:.05em; white-space:nowrap; }
.brand-sub { display:block; font-size:9.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim); white-space:nowrap; }
.topbar nav { display:flex; align-items:center; gap:8px; }
.navlink {
  font-size:12px; font-weight:700; color:var(--ink-dim); text-decoration:none;
  padding:8px 11px; border-radius:9px; white-space:nowrap;
}
.navlink:hover, .navlink:focus-visible { color:var(--ink); background:rgba(143,168,196,.10); }
.navlink[aria-current="page"] { color:var(--teal); }
/* Three links plus a button do not fit a handset at full length, so each label
   ships long and short and the media query below swaps them. */
.nav-short { display:none; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; font-weight:800; text-decoration:none; white-space:nowrap;
  padding:11px 18px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.btn:active { transform:translateY(1px); }
.btn-gold { background:linear-gradient(180deg,#f7d98c,#e0a83f); color:#0d1a2e; border-color:rgba(58,42,8,.35); }
.btn-gold:hover { filter:brightness(1.06); }
.btn-ghost { background:rgba(13,26,46,.7); color:var(--ink); border-color:var(--bezel-hi); }
.btn-ghost:hover { border-color:var(--teal); color:var(--teal); }
.btn-sm { font-size:12px; padding:9px 14px; }
/* A button whose destination is not published yet. Rendered as a <span>, not an <a>, so
   it is genuinely inert rather than a link that silently goes nowhere when tapped. */
.btn[aria-disabled="true"] {
  opacity:.42; cursor:not-allowed; border-style:dashed;
}
.btn[aria-disabled="true"]:hover { border-color:var(--bezel-hi); color:var(--ink); }

/* ---------- layout ---------- */
main { max-width:var(--shell); margin:0 auto; padding:0 18px 20px; }
section { padding:52px 0 8px; scroll-margin-top:70px; }
.eyebrow {
  font-size:11px; font-weight:800; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
}
h1 { font-size:clamp(27px,5.2vw,46px); font-weight:900; line-height:1.2; letter-spacing:-.01em; }
h2 { font-size:clamp(20px,3.2vw,28px); font-weight:900; line-height:1.28; }
h3 { font-size:15.5px; font-weight:800; }
.lede { font-size:clamp(14.5px,1.9vw,17px); color:var(--ink-dim); max-width:64ch; margin-top:14px; }
.sec-note { font-size:13.5px; color:var(--ink-dim); margin-top:10px; max-width:66ch; }

.panel {
  background:linear-gradient(180deg, rgba(13,26,46,.94), rgba(10,22,40,.94));
  border:1px solid var(--bezel); border-radius:16px; padding:22px;
}
.panel + .panel { margin-top:14px; }
.grid { display:grid; gap:14px; }
@media (min-width:720px) {
  .cols-2 { grid-template-columns:1fr 1fr; }
  .cols-3 { grid-template-columns:repeat(3,1fr); }
  .cols-4 { grid-template-columns:repeat(4,1fr); }
}
@media (min-width:520px) and (max-width:719px) {
  .cols-3, .cols-4 { grid-template-columns:1fr 1fr; }
}

/* ---------- hero ---------- */
.hero { padding:46px 0 8px; }
.hero-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.badge {
  font-size:11.5px; font-weight:800; letter-spacing:.04em; padding:7px 13px; border-radius:999px;
  background:rgba(45,212,191,.10); color:var(--teal); border:1px solid rgba(45,212,191,.30);
}
.badge.gold { background:rgba(245,198,107,.10); color:var(--gold); border-color:rgba(245,198,107,.30); }
.hero-cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }

/* ---------- price block ---------- */
.price-hero { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; }
.price-num { font-size:clamp(38px,7vw,58px); font-weight:900; letter-spacing:-.02em; color:var(--gold); }
.price-unit { font-size:14px; font-weight:800; color:var(--ink-dim); }
.mod {
  border:1px solid var(--line); border-radius:12px; padding:14px;
  background:rgba(28,44,66,.30);
}
.mod-name { font-size:14px; font-weight:800; }
.mod-desc { font-size:12.5px; color:var(--ink-dim); margin-top:5px; }
/* A .mod may be an <a> linking to that modality's page on the main clinic site.
   Reset the inherited link look so a linked card is visually identical to a plain
   one, then let hover carry the affordance. */
a.mod { display:block; text-decoration:none; color:inherit;
  transition:border-color .18s ease, background .18s ease, transform .18s ease; }
a.mod:hover, a.mod:focus-visible {
  border-color:var(--teal); background:rgba(45,212,191,.07); transform:translateY(-2px); }
a.mod:hover .mod-more, a.mod:focus-visible .mod-more { color:var(--teal); }
.mod-more { font-size:11.5px; font-weight:800; letter-spacing:.04em;
  color:var(--bezel-hi); margin-top:9px; transition:color .18s ease; }
@media (prefers-reduced-motion: reduce) { a.mod:hover, a.mod:focus-visible { transform:none; } }

/* ---------- calculator ---------- */
.stepper { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.stepper-btn {
  width:40px; height:40px; border-radius:11px; border:1px solid var(--bezel-hi);
  background:rgba(28,44,66,.6); color:var(--ink); font-size:20px; font-weight:800; cursor:pointer;
  display:grid; place-items:center;
}
.stepper-btn:hover:not(:disabled) { border-color:var(--teal); color:var(--teal); }
.stepper-btn:disabled { opacity:.35; cursor:not-allowed; }
.stepper-val { font-size:26px; font-weight:900; min-width:2.4ch; text-align:center; }
.stepper-lab { font-size:12.5px; color:var(--ink-dim); font-weight:700; }

.calc-rows { margin-top:20px; border-top:1px solid var(--line); }
.calc-row {
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.calc-label { font-size:13.5px; }
.calc-label small { display:block; font-size:11.5px; color:var(--ink-dim); font-weight:600; margin-top:3px; }
.calc-amt { font-size:17px; font-weight:800; white-space:nowrap; }
.calc-amt.neg { color:var(--teal); }
.calc-row.total { border-bottom:none; padding-top:17px; }
.calc-row.total .calc-label { font-size:15px; font-weight:900; }
.calc-row.total .calc-amt { font-size:24px; font-weight:900; color:var(--gold); }

.bar { display:flex; height:13px; border-radius:999px; overflow:hidden; margin-top:20px; border:1px solid var(--line); }
.bar span { display:block; height:100%; }
.bar-key { display:flex; flex-wrap:wrap; gap:14px; margin-top:11px; font-size:11.5px; color:var(--ink-dim); }
.bar-key i { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:-1px; }

.notice {
  margin-top:18px; padding:14px 16px; border-radius:12px; font-size:12.5px; line-height:1.65;
  background:rgba(245,198,107,.07); border:1px solid rgba(245,198,107,.28); color:#e7d5ab;
}
.notice strong { color:var(--gold); }
/* Links inside coloured blocks inherit the UA blue otherwise, which is close to
   unreadable on the amber notice ground. */
.notice a { color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.sec-note a, .mod-desc a, .cmp p a, .fld-body p a { color:var(--teal); }

/* ---------- steps ---------- */
.step { display:flex; gap:14px; align-items:flex-start; padding:15px 0; border-bottom:1px solid var(--line); }
.step:last-child { border-bottom:none; }
.step-n {
  width:29px; height:29px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(45,212,191,.13); color:var(--teal); border:1px solid rgba(45,212,191,.35);
  font-size:13px; font-weight:900;
}
.step-body p { font-size:13px; color:var(--ink-dim); margin-top:4px; }
.step-body a { color:var(--teal); }

.outcome {
  margin-top:16px; padding:15px 17px; border-radius:12px; display:flex; gap:11px; align-items:flex-start;
  background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.30);
}
.outcome-icon { color:var(--green); font-size:16px; line-height:1.35; }
.outcome-text { font-size:13.5px; }
.outcome-text strong { color:var(--green); }

/* ---------- toggle ---------- */
.seg { display:inline-flex; padding:4px; gap:4px; border-radius:12px; background:rgba(28,44,66,.55); border:1px solid var(--bezel); }
.seg button {
  font-size:12.5px; font-weight:800; padding:9px 15px; border-radius:9px; cursor:pointer;
  background:transparent; border:none; color:var(--ink-dim);
}
.seg button[aria-selected="true"] { background:rgba(45,212,191,.16); color:var(--teal); }

.pot { margin-top:18px; }
.pot-lab { font-size:12px; font-weight:800; color:var(--ink-dim); letter-spacing:.05em; text-transform:uppercase; }
.pot-bars { display:grid; gap:9px; margin-top:11px; }
.pot-bar { display:flex; align-items:center; gap:11px; }
.pot-bar-name { font-size:12.5px; width:98px; flex:none; color:var(--ink-dim); }
.pot-bar-track { display:block; flex:1; height:11px; border-radius:999px; background:rgba(28,44,66,.75); overflow:hidden; border:1px solid var(--line); }
/* display:block is load-bearing — these are <span>s, and an inline box ignores
   both width and height, which silently renders every bar as an empty track. */
.pot-bar-fill { display:block; height:100%; border-radius:999px; }

/* ---------- compare ---------- */
.cmp { border:1px solid var(--bezel); border-radius:14px; padding:18px; background:rgba(13,26,46,.6); }
.cmp.bad { border-color:rgba(239,68,68,.32); }
.cmp.good { border-color:rgba(74,222,128,.32); }
.cmp-tag { font-size:10.5px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.cmp.bad .cmp-tag { color:var(--red); }
.cmp.good .cmp-tag { color:var(--green); }
.cmp h3 { margin:8px 0 9px; }
.cmp p { font-size:13px; color:var(--ink-dim); }
.verdict {
  margin-top:14px; padding:14px 16px; border-radius:12px; font-size:13.5px;
  background:rgba(45,212,191,.09); border:1px solid rgba(45,212,191,.30);
}
.verdict strong { color:var(--teal); }

/* ---------- checklist ---------- */
.check { display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.check:last-of-type { border-bottom:none; }
.check input { position:absolute; opacity:0; width:0; height:0; }
.check-box {
  width:23px; height:23px; flex:none; border-radius:7px; border:1.5px solid var(--bezel-hi);
  display:grid; place-items:center; font-size:13px; color:transparent; transition:all .14s ease;
}
.check input:checked + .check-box { background:var(--teal); border-color:var(--teal); color:#08131f; }
.check input:focus-visible + .check-box { outline:2px solid var(--gold); outline-offset:2px; }
.check-text { font-size:13.5px; }
.check input:checked ~ .check-text { color:var(--ink-dim); text-decoration:line-through; }
.check-progress { margin-top:16px; font-size:12.5px; font-weight:800; color:var(--ink-dim); }
.check-progress.done { color:var(--green); }

/* ---------- accordion ---------- */
.acc { border:1px solid var(--bezel); border-radius:12px; overflow:hidden; }
.acc + .acc { margin-top:9px; }
.acc summary {
  padding:15px 17px; cursor:pointer; font-size:13.5px; font-weight:700; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(13,26,46,.7);
}
.acc summary::-webkit-details-marker { display:none; }
.acc summary::after { content:"+"; color:var(--teal); font-size:19px; font-weight:800; flex:none; }
.acc[open] summary::after { content:"\2212"; }
.acc summary:hover { color:var(--teal); }
.acc-body { padding:2px 17px 17px; font-size:13px; color:var(--ink-dim); }
.acc-body p + p { margin-top:9px; }

/* ---------- in-page jump nav ---------- */
.jumps { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.jump {
  font-size:12px; font-weight:800; text-decoration:none; white-space:nowrap;
  padding:8px 14px; border-radius:999px;
  background:rgba(28,44,66,.55); border:1px solid var(--bezel); color:var(--ink-dim);
}
.jump:hover, .jump:focus-visible { border-color:var(--teal); color:var(--teal); }

/* ---------- copy rows (claim helper) ---------- */
.copyrow {
  display:flex; align-items:center; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.copyrow:last-of-type { border-bottom:none; }
.copyrow-body { flex:1; min-width:0; }
.copyrow-lab { font-size:11.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-dim); }
.copyrow-val {
  font-size:14.5px; font-weight:700; margin-top:4px;
  overflow-wrap:anywhere; user-select:all;
}
.copybtn { flex:none; min-width:78px; }
.copybtn.copied { border-color:var(--green); color:var(--green); }

/* ---------- field walkthrough ---------- */
.fld { display:flex; gap:14px; align-items:flex-start; padding:15px 0; border-bottom:1px solid var(--line); }
.fld:last-of-type { border-bottom:none; }
.fld-n {
  width:29px; height:29px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:rgba(245,198,107,.13); color:var(--gold); border:1px solid rgba(245,198,107,.35);
  font-size:12.5px; font-weight:900;
}
.fld-body { flex:1; min-width:0; }
.fld-body p { font-size:13px; color:var(--ink-dim); margin-top:4px; }

.prac-lab {
  display:block; margin-top:11px;
  font-size:10.5px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim);
}
.prac {
  display:block; width:100%; max-width:420px; margin-top:6px;
  font:inherit; font-size:14px; color:var(--ink);
  background:rgba(28,44,66,.55); border:1px solid var(--bezel-hi);
  border-radius:10px; padding:10px 12px;
}
.prac::placeholder { color:#5f7997; }
.prac:focus { outline:none; border-color:var(--teal); }

/* ---------- link card ---------- */
.linkcard {
  display:flex; align-items:center; gap:16px; text-decoration:none; color:inherit;
  border:1px solid var(--bezel); border-radius:16px; padding:20px;
  background:linear-gradient(120deg, rgba(45,212,191,.09), rgba(13,26,46,.85));
  transition:border-color .14s ease;
}
.linkcard:hover { border-color:var(--teal); }
.linkcard-body { flex:1; min-width:0; }
.linkcard-body p { font-size:13px; color:var(--ink-dim); margin-top:5px; }
.linkcard-arrow { color:var(--teal); font-size:22px; font-weight:800; flex:none; }

/* ---------- footer ---------- */
footer {
  margin-top:56px; border-top:1px solid var(--line); padding:30px 18px 44px;
  background:rgba(8,17,31,.6);
}
.foot-in { max-width:var(--shell); margin:0 auto; display:grid; gap:22px; }
@media (min-width:720px) { .foot-in { grid-template-columns:1.4fr 1fr; } }
.foot-h { font-size:11px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:9px; }
.foot-in p, .foot-in a { font-size:13px; color:var(--ink-dim); text-decoration:none; }
.foot-in a:hover { color:var(--teal); }
.foot-links { display:flex; flex-wrap:wrap; gap:14px; margin-top:9px; }
.foot-small {
  max-width:var(--shell); margin:22px auto 0; padding-top:18px; border-top:1px solid var(--line);
  font-size:11.5px; color:#6f88a4; line-height:1.7;
}

/* ---------- phones ----------
   Most crew open this on a handset between duties. The bar has to hold the
   brand, both page links and the WhatsApp button inside 375px, so the brand
   drops to its mark alone rather than letting the words wrap into the nav. */
@media (max-width:600px) {
  .topbar { padding:9px 12px; gap:6px; }
  .brand-words { display:none; }
  .brand-logo { height:30px; max-width:140px; }
  .brand-mark { width:30px; height:30px; font-size:9.5px; border-width:1.5px; }
  .topbar nav { gap:0; }
  .navlink { font-size:11.5px; padding:7px 6px; }
  .btn-sm { font-size:11.5px; padding:8px 11px; }
  .nav-long { display:none; }
  .nav-short { display:inline; }
  /* The top bar holds FOUR links plus the button and that is its ceiling: measured at
     320px, a fifth link overflows (330px of content in a 320px bar) and letting it wrap
     costs a 126px sticky header on every handset. Airline-specific pages (cx-guide.html
     and any future UO/GBA/HKA sibling) are therefore reached from in-page cards on the
     card guide and the practice run — never from here. */
  .copyrow { gap:10px; }
  .copyrow-val { font-size:13.5px; }
  .copybtn { min-width:66px; }
  section { padding:42px 0 8px; }
  .panel { padding:17px; }
  .calc-amt { font-size:15.5px; }
  .calc-row.total .calc-amt { font-size:21px; }
  .pot-bar-name { width:80px; font-size:12px; }
}