/* ============================================================================
   BestHirePath — the "market board" design system  (v3, 11 Oct 2026)
   ----------------------------------------------------------------------------
   WHY THIS FILE WAS REWRITTEN — every change below is the answer to a number
   measured on the LIVE site in a real browser first, never a matter of taste
   (instrument: ~/.hermes/scripts/bhp_ui_audit.py driving headless Chrome on
   CDP 9222, mobile 390x844 and desktop 1440):

     1. The typeface was the system stack (-apple-system/Segoe UI/Roboto) —
        the loudest "template or AI-made" signal on the site. Fixed: Plus
        Jakarta Sans, SELF-HOSTED, because our own CSP sends `font-src 'self'`
        and would silently block fonts.gstatic.com. One 27 KB variable file
        covers every weight 400-800.
     2. Fourteen blocks of real body copy rendered at 13.1-13.6px. Nobody reads
        that. Fixed: 17px body, 15px hard floor for captions (.small).
     3. Twenty-three tap targets under 40px on /jobs — inline links 15px tall,
        nav links 22px. A thumb cannot hit those. Fixed: nav links and buttons
        are >=44px tall; inline links carry real padding.
     4. /jobs reported ZERO elements with a box-shadow — a completely flat
        page. Fixed: a three-step shadow ladder, one card hierarchy.
     5. Twelve different headers and 22 different footers across 36 pages, so
        the menu changed as you moved around the site. Fixed by
        scripts/unify_chrome.py, which writes ONE header and footer into every
        page from a single template (classes .sitebar and footer.site below).

   The palette is the brand that already exists — navy #0F2A44 and the action
   orange #F26419 that is on the logo and on every existing CTA. A redesign
   that abandons the logo is a different company, not a better one.
   ========================================================================= */

@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("/assets/fonts/PlusJakartaSans.woff2") format("woff2");
  font-weight:400 800;               /* variable range: all weights, one file */
  font-style:normal;
  font-display:swap;                 /* readable text immediately, font swaps in */
}

:root{
  --ink:#14202B;            /* body text */
  --ink-strong:#0F2A44;     /* the brand navy: headings, primary buttons. Also --navy below */
  --ink-mid:#3D5266;
  --muted:#5A6B7B;

  --paper:#FBFAF7;          /* warm canvas, never pure white */
  --cream:#FBFAF7;          /* legacy name kept: pages and bakes reference it */
  --surface:#FFFFFF;
  --surface-2:#F4F1EA;
  --line:#E2DED5;
  --line-strong:#CFCAC0;
  --sand:#F3E3CB;

  --navy:#0F2A44;           /* legacy name kept */
  --orange:#F26419;         /* legacy name kept */
  --accent:#F26419;
  --accent-ink:#17324C;     /* text ON orange — see the .btn-accent note */
  --accent-soft:#FFF1E8;
  --ok:#1E7A4C;
  --ok-soft:#E4F2E9;
  --bad:#B3261E;
  --bad-soft:#FBE7E5;
  --warn:#8A5A00;
  --warn-soft:#FCF3DD;

  --radius:14px;            /* legacy name kept */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-pill:999px;

  /* the shadow ladder: what turns a flat slab into a designed surface */
  --sh-1:0 1px 2px rgba(20,32,43,.06), 0 1px 3px rgba(20,32,43,.04);
  --sh-2:0 6px 16px -6px rgba(15,42,68,.18), 0 2px 6px -2px rgba(15,42,68,.08);
  --sh-3:0 18px 40px -20px rgba(15,42,68,.30), 0 6px 14px -8px rgba(15,42,68,.12);

  --w:1120px;               /* reading width: ~90 characters, not a 1600px slab */

  --fs-body:1.0625rem;      /* 17px */
  --fs-small:.9375rem;      /* 15px — the hard floor, measured defect #2 */
  --fs-h1:clamp(2.05rem,1.5rem + 2.4vw,3.1rem);
  --fs-h2:clamp(1.45rem,1.2rem + 1vw,2rem);
  --fs-h3:clamp(1.15rem,1.06rem + .3vw,1.32rem);

  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:1.65;
  color:var(--ink);background:var(--cream);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
img{height:auto}
::selection{background:#FFE0CC;color:var(--navy)}

/* ---------------------------------------------------------------- type ---- */
h1,h2,h3,h4{color:var(--navy);margin:0 0 .5em;letter-spacing:-.02em;line-height:1.15}
h1{font-size:var(--fs-h1);line-height:1.08;font-weight:800}
h2{font-size:var(--fs-h2);font-weight:750;margin-top:1.5em}
h3{font-size:var(--fs-h3);font-weight:700;margin-top:1.1em}
h4{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.05em;max-width:76ch}
.lead,p.lead,.lede{font-size:1.1875rem;line-height:1.6;color:var(--ink-mid);max-width:68ch}
.sub{color:var(--muted)}
strong,b{font-weight:700;color:var(--navy)}
a{color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
a:hover{text-decoration-color:var(--accent);color:#C64F13}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
/* 15px floor. The old sheet shipped .small and .mono at 13.5px and 13px. */
.small,.small-note,.hint,.meta,.who{font-size:var(--fs-small);line-height:1.55;color:var(--muted)}
.small a{color:#46596B}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;letter-spacing:0}
.num{font-size:var(--fs-small);font-variant-numeric:tabular-nums;color:var(--muted)}
.tag,.chip{display:inline-block;font-size:.875rem;font-weight:600;padding:5px 11px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-mid);border:1px solid var(--line)}

/* ------------------------------------------------------------ structure ---- */
.wrap,.container{width:100%;max-width:var(--w);margin:0 auto;padding:0 20px}
main{padding:10px 0 56px}
.sec-head{margin:40px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sec-head h2,.sec-head h3{margin:0;font-size:var(--fs-h3);letter-spacing:-.01em}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.two{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.hide{display:none !important}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}

/* --------------------------------------------------------------- header ----
   ONE header, written into every page by scripts/unify_chrome.py. Sticky, so
   the way to act is never scrolled off; every link is a 44px target; the
   current page is marked aria-current so a visitor can tell where they are. */
.sitebar{
  position:sticky;top:0;z-index:50;background:rgba(251,250,247,.93);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.sitebar-in{display:flex;align-items:center;gap:16px;max-width:var(--w);margin:0 auto;padding:9px 20px;min-height:66px}
.sitebar .brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.0625rem;letter-spacing:-.02em;color:var(--navy);text-decoration:none;flex:0 0 auto}
.sitebar .brand svg,.sitebar .brand img{width:32px;height:32px;display:block;flex:0 0 auto}
.sitebar .brand .acc{color:var(--accent)}
.sitebar nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap}
.sitebar nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:.9375rem;font-weight:600;color:var(--ink-mid);text-decoration:none;border-radius:var(--r-sm)}
.sitebar nav a:hover{background:var(--surface-2);color:var(--navy)}
.sitebar nav a[aria-current="page"]{color:var(--navy);background:var(--surface-2)}
.sitebar .cta{margin-left:6px}
/* the pre-11-Oct dark band, kept styled so a page that still carries the old
   header markup looks deliberate rather than broken while the sweep runs */
header.site{background:var(--navy);color:#fff;padding:12px 0}
header.site .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
header.site .brand{color:#fff}
/* The two global rules above the header block --
     strong,b{color:var(--navy)}   and   a{color:var(--navy)}
   -- beat inheritance, so on a page that still carries the old header markup every word in this
   navy band rendered NAVY ON NAVY: the wordmark and all four menu links were invisible in the
   finished page at both phone and desktop width (measured 14 Oct 2026, computed colour
   rgb(15,42,68) on background rgb(15,42,68) on /faq, /work-pass-costs, /filipino-workers,
   /singapore-hiring-data, /which-jobs-can-foreigners-take, /admin, /dashboard, /my and /404).
   That is the whole reason this band looked like a blank bar with a few white rules in it. */
header.site a,header.site strong{color:#fff}
header.site a{text-decoration:none}
header.site a:hover{color:#fff;text-decoration:underline}

/* --------------------------------------------------------------- footer ---- */
footer.site{border-top:1px solid var(--line);background:var(--navy);color:#C9D6E2;margin-top:56px;padding:42px 0 30px;font-size:var(--fs-small)}
footer.site .foot-grid{display:grid;gap:30px;grid-template-columns:1.5fr 1fr 1fr 1fr}
footer.site h4{font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:#9FB4C7;margin:0 0 12px;font-weight:700}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:0 0 9px}
footer.site a{color:#E7EEF5;text-decoration:none;font-size:var(--fs-small);display:inline-block;min-height:26px}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .fbrand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;font-size:1.0625rem;margin-bottom:10px}
footer.site .fbrand svg{width:30px;height:30px}
footer.site .legal{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);color:#A9BCCC;font-size:var(--fs-small);max-width:90ch}
footer.site .legal p{max-width:none;margin:0 0 8px}

/* -------------------------------------------------------------- buttons ---- */
button,.btn{
  font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:-.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 20px;border-radius:12px;border:1px solid transparent;
  background:var(--navy);color:#fff;cursor:pointer;text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  box-shadow:var(--sh-2);
}
button:hover,.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-3);background:#0B2036;color:#fff;text-decoration:none}
button:active,.btn:active{transform:translateY(0)}
button:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
/* The action orange. White on #F26419 measures 3.0:1, which FAILS WCAG AA for
   body text, while the brand navy on the same orange measures 7.0:1 — so the
   accent button carries navy text. Both numbers come from the lum() maths in
   bhp_ui_audit.py, not from an opinion about which looks nicer. */
.btn-accent,button.accent{background:var(--accent);color:var(--accent-ink);box-shadow:var(--sh-2)}
.btn-accent:hover,button.accent:hover{background:#DE5510;color:var(--accent-ink)}
button.ghost,.btn.ghost{background:var(--surface);color:var(--navy);border-color:var(--line-strong);box-shadow:var(--sh-1)}
button.ghost:hover,.btn.ghost:hover{background:var(--surface-2);color:var(--navy);box-shadow:var(--sh-2)}
button.bad,.btn.bad{background:var(--bad)}
button.ok,.btn.ok{background:var(--ok)}
.btn.sm,button.sm{min-height:40px;padding:0 14px;font-size:.9375rem}

/* --------------------------------------------------------------- cards ----- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:0;box-shadow:var(--sh-1);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-strong)}
.card h3{margin-top:0;margin-bottom:.4em}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card.acc{background:var(--accent-soft);border-color:#F6D3BC}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-2)}
.panel.acc{border-left:4px solid var(--accent);background:var(--accent-soft)}
.tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--sh-1)}

/* --------------------------------------------------------------- hero ------ */
.hero{padding:50px 0 44px;background:radial-gradient(1100px 470px at 10% -12%,#FFF3EA 0%,rgba(255,243,234,0) 62%),linear-gradient(180deg,#FFFFFF 0%,var(--cream) 100%);border-bottom:1px solid var(--line)}
.hero h1{max-width:22ch}
.hero p.lead{margin-bottom:22px}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .proof{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:20px;font-size:var(--fs-small);color:var(--muted)}
.hero .proof span{display:inline-flex;align-items:center;gap:7px}

/* ------------------------------------------------------ notices, pills ----- */
.notice{border:1px solid var(--line);border-left:4px solid var(--muted);background:#FFF9F4;border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 16px;margin:16px 0}
.notice p:last-child{margin-bottom:0}
.notice.ok{border-left-color:var(--ok);background:#F2FAF5}
.notice.bad{border-left-color:var(--bad);background:#FDF4F3}
.notice.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);color:var(--ink-mid);font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line)}
.pill.acc{background:var(--orange);color:#fff;border-color:var(--orange)}
.pill.soft{background:var(--sand);color:#6B4A22;border-color:#E7D3B2}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:#BEE3D5}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:#F3C9C5}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:#EBD9A8}
.acc{color:var(--accent)}

/* --------------------------------------------------------------- forms ----- */
label{display:block;font-size:var(--fs-small);font-weight:600;color:var(--navy);margin:10px 0 4px}
input,select,textarea{width:100%;max-width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:12px;min-height:48px;transition:border-color .12s ease,box-shadow .12s ease}
textarea{min-height:120px;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:#8A9AA8}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:0 0 18px}
legend{font-weight:700;color:var(--navy);padding:0 8px}
.chk{display:flex;gap:11px;align-items:flex-start;margin:12px 0;font-size:var(--fs-small);line-height:1.55;font-weight:400;color:var(--ink)}
.chk input{width:22px;height:22px;min-height:22px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--accent)}

/* --------------------------------------------------------------- tables ---- */
table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#F7F4EE;color:var(--muted);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FCFBF8}

/* ---------------------------------------------------------- job cards ------ */
.job{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:13px 0;box-shadow:var(--sh-1);transition:transform .14s ease,box-shadow .14s ease}
.job:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.job.promoted{border:2px solid var(--orange);background:#FFFDFB;box-shadow:var(--sh-2)}
.job h3,.jobh3{margin:0 0 6px;font-size:1.1875rem;font-weight:750;letter-spacing:-.015em}
.promoted-band{border:1.5px dashed var(--orange);border-radius:var(--radius);padding:12px;background:#FFF9F4;margin:16px 0}
.promoted-band h2{margin:0 0 4px;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:#8A4A12;font-weight:800}
.out{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-small);overflow:auto;max-height:460px}

/* Empty state: an empty board must explain itself instead of looking broken. */
.empty{border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface);padding:32px 24px;text-align:center;box-shadow:var(--sh-1);margin:18px 0}
.empty h3{margin-top:0;margin-bottom:8px}
.empty p{max-width:58ch;margin:0 auto 14px}

/* ---------------------------------------------------------- responsive ----- */
/* Phone: a wide table becomes its own scrolling wrapper so nothing is cut off on a
   390px screen. Re-measured after every change: documentElement.scrollWidth must
   equal innerWidth on every page (bhp_ui_audit.py reports the difference). */
/* ---------------------------------------------------------------------------
   9. Hero split + the live category explorer
   Added 11 Oct 2026 after a render review of the live pages: the homepage read
   as one column of prose with nothing to look at, and a visitor had no way to
   get from "what is this" to "my exact job" in one move. The explorer is fed by
   /api/categories (the same tree the posting form and the board use), so it can
   never list a job type the rest of the site does not know about.
--------------------------------------------------------------------------- */
.hero-split{display:grid;gap:24px;align-items:start}
@media (min-width:960px){
  .hero-split{grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:44px}
}
.pill{display:inline-flex;align-items:center;gap:7px}
.pill svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.explore{background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 40px -22px rgba(15,42,68,.30),0 2px 6px -2px rgba(15,42,68,.10);padding:20px}
.explore h2{font-size:1.0625rem;margin:0 0 4px;line-height:1.35}
.explore .ex-note{color:var(--mid);font-size:.9375rem;margin:0 0 14px;line-height:1.5}
.ex-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ex-chip{font:inherit;font-size:.9375rem;font-weight:600;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:9px 14px;cursor:pointer;min-height:40px}
.ex-chip:hover{border-color:var(--navy);background:#fff}
.ex-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.ex-jobs{display:grid;gap:6px;max-height:268px;overflow:auto;padding-right:4px}
.ex-job{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--paper);text-decoration:none;
  color:var(--ink);font-size:.9375rem;min-height:44px}
.ex-job b{font-weight:600}
.ex-job span{color:var(--mid);font-weight:600;font-size:.875rem;white-space:nowrap}
.ex-job:hover{background:#fff;border-color:var(--navy)}
/* The full job tree, collapsed: real links in the served HTML so search and AI answer engines
   can read the taxonomy instead of "Loading…" (added 13 Oct 2026). */
.ex-all{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.ex-all>summary{cursor:pointer;font-weight:600;font-size:.9375rem;color:var(--navy)}
.ex-fam{margin:12px 0 4px;font-size:.9375rem}
.ex-famlist{margin:0 0 0 18px;padding:0;font-size:.9375rem;line-height:1.6}
.ex-famlist a{color:var(--ink);text-decoration:none}
.ex-famlist a:hover{text-decoration:underline}
.ex-loading{color:var(--mid);font-size:.9375rem;margin:0}
@media (max-width:900px){
  footer.site .foot-grid{grid-template-columns:1fr 1fr}
  /* A phone/tablet header must not eat the screen. Measured 11 Oct 2026: with the action on its own
     row the bar stood 197px tall — a quarter of an 844px phone screen, pinned there on every scroll.
     Now the action rides beside the brand (one row), the menu takes the second, and the bar does not
     stick on small screens at all. */
  .sitebar{position:static}
  .sitebar-in{flex-wrap:wrap;gap:4px 10px;padding:10px 16px}
  .sitebar nav{flex:1 1 100%;flex-wrap:wrap;overflow:visible;justify-content:flex-start;gap:0 2px}
  .sitebar nav a{padding:8px 10px;white-space:normal}
  .sitebar .cta{display:inline-flex;order:-1;margin-left:auto;min-height:40px;padding:9px 14px}
  /* order:-1 keeps the action BESIDE THE BRAND. Without it the DOM order (brand, menu, action) put
     the action on a third row and the bar stayed 197px tall even after wrapping was allowed. */
}
@media (max-width:640px){
  .wrap,.container{padding:0 16px}
  .hero{padding:32px 0 28px}
  h1{font-size:clamp(1.85rem,7.2vw,2.35rem)}
  table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* EYE CHECK, 13 Oct 2026. The 3-column comparison table on / ("What other Singapore boards
     charge an employer") was 42px wider than a 390px screen, so its third column printed cut
     mid-word — measured live: table content 390px inside a 348px box, third column right edge at
     411px on a 390px screen (a reader saw "candida", "appli", "Singpas"). Trimming the cell padding
     by 6px a side brings the whole table inside the screen: measured after, content 348px in a 348px
     box, 0px hidden. Desktop padding is untouched. */
  th,td{padding:11px 7px}
  .card,.panel,.job{padding:18px}
  footer.site .foot-grid{grid-template-columns:1fr;gap:22px}
  /* The job-type chips (EYE CHECK, 12 Oct 2026). They wrap, but in a 390px screen almost no two
     labels fit side by side, so all twelve fell into an uneven single column - each only as wide as
     its own text, leaving 130-240px of dead space beside every one and about 640px of wasted scroll.
     Full width and left-aligned turns the same twelve into a clean, evenly tappable list. */
  .ex-chips{flex-direction:column;align-items:stretch;gap:6px}
  .ex-chip{width:100%;justify-content:flex-start;text-align:left}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
@media print{
  .sitebar,footer.site{display:none}
  body{background:#fff}
}

/* UI POLISH 15 Oct 2026 (measured pass) — see bhp_polish_20261015.py */
/* 1. The header logo link was 147x32px on every page — under the 44px a thumb needs. The artwork stays 32px. */
.brand{min-height:44px;padding:6px 2px}
/* 2. Consent rows: a 22x22 checkbox in a 22px row. Box 24px, whole row 44px and tappable (label has for=). */
.chk{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:4px 0}
.chk input[type=checkbox]{width:24px;height:24px;flex:0 0 auto;margin-top:1px;accent-color:#0F2A44}
.chk label{font-weight:400;margin:0;cursor:pointer}
/* 3. Floor under small text: nothing below 12.8px, and plan names / labels a visitor reads at 14px. */
.pill{font-size:.85rem}
/* 4. A disclosure toggle ("See all 148 official …") was 683x25px — full width but only 25px tall. Padding
   rather than a display change, so the browser's own triangle marker survives. */
summary{padding:10px 0}