/* ═══════════════════════════════════════════════════════════════════
   RISE Career Readiness Ecosystem — design system
   Preserves the POC identity: DM Serif/Sans/Mono · navy + gold · cream.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* ── Brand, taken from the RISE mark: navy R · teal IS · gold arrow and E ──────────
     The old palette (warm navy #232F55 + brass #B29254 + berry) is retired. This one is
     cooler and has a third hue, so surfaces move from warm-neutral to cool-neutral too —
     a warm beige border beside teal reads as dirt. */
  /* Sampled from the SUPPLIED logo file, not by eye from a screenshot — every one of my
     earlier guesses was too light: navy #16305B vs #021E4E, gold #E9A81F vs #D29A0E,
     teal #0E9AA3 vs #008C96. The real gold being darker is a gift: it clears AA as text on
     cream, which the bright one never did. */
  --navy:#021E4E;--navy-6:#1B3A6B;--ink:#00142F;--slate:#33496F;
  --teal:#008C96;--teal-lt:#3FBFC4;--teal-dp:#046B76;
  --gold:#D29A0E;--gold-lt:#EFC04A;--gold-dp:#A87A0A;
  /* Text-safe pair. Brand gold is 1.9:1 on cream — correct as a fill, and correct as text
     ON navy, but unreadable as text on a light surface. Use --gold-ink / --teal-ink there.
     _shots/contrast.mjs measures this on the rendered page rather than trusting the rule. */
  --gold-ink:#7C5A08;--teal-ink:#046B76;
  --cream:#FBFAF6;--mist:#F1F4F8;--blush:#DCEBED;--beige:#CBD6E2;--lgray:#5E6E89;
  --rose:#FDF0F3;--white:#fff;--sky:#EEF3FA;
  --berry:#B4531F;   /* no longer a brand hue — kept only as the semantic "low band" warning */
  --green:#2D6A4F;--green-lt:#52B788;
  --ai-bg:#0F0F1A;--ai-border:#2D2D4E;
  --ff-d:'DM Serif Display',Georgia,serif;
  --ff-b:'DM Sans',system-ui,sans-serif;
  --ff-m:'DM Mono',ui-monospace,monospace;
  --r:.5rem;--r2:.875rem;--r3:1.25rem;--r4:1.75rem;--r5:2.5rem;
  --sh:0 2px 20px rgba(2,30,78,.07);--sh2:0 8px 40px rgba(2,30,78,.14);
  /* The nav is position:sticky at top:0 with z-index 300, so anything else that sticks has
     to clear it or it slides underneath and gets cropped. One token, so a change to the nav
     height cannot leave a stale offset behind on a panel three hundred lines away. */
  --nav-h:64px;--stick:calc(var(--nav-h) + 1.5rem);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--ff-b);background:var(--cream);color:var(--navy);min-height:100vh;overflow-x:hidden;line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer;border:none;background:none}
a{text-decoration:none;color:inherit;cursor:pointer}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{background:var(--beige);border-radius:3px}
.hidden{display:none!important}.flex{display:flex;flex-wrap:wrap}
/* .muted rides on cream, mist and blush. --lgray clears AA on cream only (4.98 vs 4.22 on
   blush), so the scoped-per-surface version kept missing one panel; --slate passes on all
   three and is still clearly secondary against the --navy body colour. */
.muted{color:var(--slate);font-size:0.9rem}
.boot{min-height:60vh;display:flex;align-items:center;justify-content:center;color:var(--lgray);font-size:.9rem}
.w{max-width:1140px;margin:0 auto;padding:0 2rem}
/* 2rem each side leaves 326px of content on a 390px phone, which a two-button row
   overruns by a few pixels — enough to make the page scroll sideways. */
@media(max-width:480px){.w,.wn{padding:0 1.25rem}}
.wn{max-width:760px;margin:0 auto;padding:0 2rem;text-align:center}
.wrap{max-width:1140px;margin:0 auto;padding:0 2rem}
.section{padding:3rem 0}
.eyebrow{font-size:0.875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold-ink)}
.sec-t{font-family:var(--ff-d);font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.12;color:var(--navy)}
.lead{font-size:1.05rem;color:var(--slate);line-height:1.7}
.empty-state{background:#fff;border:1px solid var(--beige);border-radius:var(--r3);padding:3rem;text-align:center;max-width:520px;margin:3rem auto}
.empty-state h2{font-family:var(--ff-d);font-size:1.5rem;margin-bottom:.5rem}
.empty-state p{color:var(--slate);margin-bottom:1.5rem}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.6rem;border-radius:var(--r5);font-size:.88rem;font-weight:500;transition:all .18s;white-space:nowrap}
.btn-p{background:var(--navy);color:#fff}.btn-p:hover{background:var(--slate);transform:translateY(-1px);box-shadow:var(--sh2)}
.btn-g{background:var(--gold);color:var(--ink);font-weight:700}.btn-g:hover{background:var(--gold-lt);transform:translateY(-1px)}
.btn-o{background:transparent;color:var(--navy);border:1.5px solid var(--beige)}.btn-o:hover{border-color:var(--navy);background:var(--mist)}
.btn-w{background:#fff;color:var(--navy)}.btn-w:hover{background:var(--blush)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}.btn-ghost:hover{background:rgba(255,255,255,.22)}
.btn-sm{padding:.42rem 1rem;font-size:0.875rem}.btn-lg{padding:.95rem 2.2rem;font-size:.98rem}.btn-xl{padding:1.15rem 2.8rem;font-size:1.05rem}
.btn[disabled]{opacity:.6;cursor:default}
.btn-w-full,.btn-w.btn-lg{width:100%}

/* ═══ NAV ═══ */
.nav{position:sticky;top:0;z-index:300;background:rgba(251,250,246,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--beige);height:var(--nav-h);display:flex;align-items:center}
.nav-in{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1140px;margin:0 auto;padding:0 1.5rem;gap:1rem}
.nav-logo{display:flex;align-items:center;flex-shrink:0;cursor:pointer}

/* ═══ BRAND LOCKUP ═══
   The real logo file, not a redrawn one. It already contains the mark, the wordmark, the
   descriptor and the tagline, so there is nothing here to compose — only to size. The two source
   files differ only in the navy being recoloured to cream, because a navy mark on a navy surface
   is invisible; that was the header 哥 could not read. */
.rise-lock{display:block;height:2.6rem;width:auto;flex-shrink:0}
.rise-mark{display:block;height:2rem;width:auto;flex-shrink:0}
@media(max-width:720px){.rise-lock{height:2.2rem}}
@media(max-width:400px){.rise-lock{height:1.9rem}}
/* The footer sits on navy and has room for the full lockup at a readable size. */
.foot-logo .rise-lock{height:3rem}
.nav-links{display:flex;gap:1.4rem;align-items:center}
.nav-links a{font-size:0.9rem;color:var(--slate);transition:color .2s}.nav-links a:hover{color:var(--teal-ink)}
.nav-user{font-size:0.875rem;color:var(--slate)}.nav-user em{color:var(--teal-ink);font-style:normal;text-transform:capitalize;font-weight:600}
@media(max-width:720px){.nav-links a:not(.nav-cta){display:none}.nav-user{display:none}.rl-sub,.rl-word{display:none}}

/* ═══ HOME HERO ═══ */
.hero-home{min-height:calc(100vh - 60px);display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch}
.hero-home-l{padding:4rem 2rem 4rem max(2rem,calc((100vw - 1140px)/2 + 2rem));display:flex;flex-direction:column;justify-content:center;max-width:660px}
.hero-home-l .eyebrow{margin-bottom:1.1rem}
.hero-home-l h1{font-family:var(--ff-d);font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.08;margin-bottom:1.25rem}
.hero-home-l h1 em{font-style:italic;color:var(--teal-dp)}
.hero-home-l p{font-size:1.04rem;color:var(--slate);line-height:1.7;max-width:490px;margin-bottom:2.2rem}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem}
/* three top-level entries on one row — btn-lg's default padding overflows the hero column */
.hero-ctas.trio{gap:.7rem}
.hero-ctas.trio .btn-lg{padding:.9rem 1.45rem;font-size:.94rem}
.hero-trust{display:flex;gap:2.5rem;padding-top:1.75rem;border-top:1px solid var(--beige)}
.ht-item .tn{font-family:var(--ff-d);font-size:1.7rem;line-height:1}
.ht-item .tl{font-size:0.875rem;color:var(--slate);margin-top:.2rem}
.hero-home-r{background:var(--navy);display:flex;flex-direction:column;justify-content:center;padding:3.5rem 3rem;position:relative;overflow:hidden}
.hero-home-r::before{content:'';position:absolute;top:-100px;right:-100px;width:340px;height:340px;border-radius:50%;background:rgba(210,154,14,.07)}
.hero-cards{display:flex;flex-direction:column;gap:1rem;position:relative;z-index:1}
.hc{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);border-radius:var(--r3);padding:1.25rem 1.4rem}
.hc-lbl{font-size:0.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:.4rem;font-weight:500}
.hc-val{font-family:var(--ff-d);font-size:1.05rem;color:#fff;margin-bottom:.3rem}
.hc-sub{font-size:0.875rem;color:rgba(255,255,255,.48);line-height:1.4}
.hc-bar{margin-top:.7rem;height:4px;background:rgba(255,255,255,.1);border-radius:2px}
.hc-bar-f{height:4px;border-radius:2px;background:var(--gold)}
.hc-dims{margin-top:.6rem;display:flex;flex-direction:column;gap:.4rem}
.hc-dim{display:flex;align-items:center;gap:.6rem;font-size:0.875rem;color:rgba(255,255,255,.6)}
.hc-dt{flex:1;height:3px;background:rgba(255,255,255,.1);border-radius:2px}
.hc-df{height:3px;border-radius:2px;background:var(--gold-lt)}
@media(max-width:900px){.hero-home{grid-template-columns:1fr}.hero-home-r{display:none}.hero-home-l{padding:3rem 1.5rem}}
/* 320px is a real phone (SE). The xl CTA's 2.8rem side padding plus the column's own
   1.5rem made the button wider than the viewport — the page scrolled sideways on the
   only element anyone is meant to press. */
@media(max-width:400px){
  /* A grid item defaults to min-width:auto and refuses to shrink below its content, so the
     column sat 2px wider than the viewport however little padding it was given. */
  .hero-home,.hero-home-l{min-width:0;overflow-x:clip}
  .hero-home-l{padding:2.5rem 1.25rem}
  .btn-xl{padding:1rem 1.5rem;font-size:1rem}
  .btn-lg{padding:.85rem 1.25rem}
  .btn{max-width:100%}
}

/* ═══ PHOTOGRAPHY ═══
   One tonal system. The grade is baked into the files too, but keeping it here means a
   re-fetched or swapped frame still lands in the same key instead of shouting. */
.ph{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.06)}

/* Hero photo sits UNDER the report cards on the navy side. The scrim is asymmetric — heavy
   where the cards overlap, light on the far side — because a flat 0.9 veil across the whole
   frame is what made every candidate in the contact sheet look dead. */
.hero-home-r{position:relative}
.hero-photo{position:absolute;inset:0;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;filter:saturate(.62) contrast(1.04)}
.hero-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(2,30,78,.62) 0%,rgba(2,30,78,.88) 42%,rgba(13,31,61,.96) 100%)}
.hero-home-r .hero-cards{position:relative;z-index:2}

/* Editorial split — image one side, text the other. The archetype the site had none of. */
.ed{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3.5rem;max-width:1140px;margin:0 auto;padding:0 1.5rem}
.ed.flip .ed-media{order:2}
.ed-media{border-radius:var(--r4);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh2)}
.ed-body h2{font-family:var(--ff-d);font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.15;margin:.5rem 0 1rem}
.ed-body p{color:var(--slate);line-height:1.75;margin-bottom:1rem}
.ed-list{display:flex;flex-direction:column;gap:.85rem;margin-top:1.5rem}
.ed-item{display:flex;gap:.85rem;align-items:flex-start}
.ed-n{font-family:var(--ff-m);font-size:0.875rem;color:var(--teal-ink);flex-shrink:0;padding-top:.2rem}
.ed-t{font-size:.95rem;font-weight:600;color:var(--navy)}
.ed-d{font-size:.88rem;color:var(--slate);line-height:1.6}
@media(max-width:860px){.ed{grid-template-columns:1fr;gap:2rem}.ed.flip .ed-media{order:0}}

/* Full-bleed band — one sentence over an image, edge to edge. The breather. */
.bleed{position:relative;min-height:clamp(340px,42vw,520px);display:flex;align-items:center;overflow:hidden}
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:saturate(.6) contrast(1.05)}
.bleed::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,31,61,.92) 0%,rgba(13,31,61,.72) 48%,rgba(10,118,129,.42) 100%)}
.bleed-in{position:relative;z-index:2;max-width:1140px;margin:0 auto;padding:0 1.5rem;width:100%}
.bleed-in .eyebrow{color:var(--gold-lt)}
.bleed-in p{font-family:var(--ff-d);font-size:clamp(1.5rem,3.4vw,2.5rem);color:#fff;line-height:1.3;max-width:20ch;margin-top:.6rem}
.bleed-in .sub{font-family:var(--ff-b);font-size:.95rem;color:rgba(255,255,255,.72);max-width:46ch;margin-top:1rem;line-height:1.7}

/* Secondary-page hero: every page gets its OWN image, never one background reused sitewide. */
.page-hero{position:relative;overflow:hidden}
.page-hero img.ph{position:absolute;inset:0;object-position:50% 38%}
.page-hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,30,78,.78) 0%,rgba(13,31,61,.92) 100%)}
.page-hero .wn{position:relative;z-index:2}

/* Sign-in side panel */
.login-photo{border-radius:var(--r3);overflow:hidden;aspect-ratio:3/4;max-width:420px;width:100%;box-shadow:var(--sh2)}

/* ═══ HERO: WHAT THE FREE REPORT DELIVERS ═══
   Sits on the navy panel, so every colour here is a white-alpha, not a token. */
.deliver-hd{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;position:relative;z-index:1;margin-bottom:.15rem}
.deliver-tag{font-family:var(--ff-m);font-size:0.875rem;color:rgba(255,255,255,.4);white-space:nowrap}
.hc-sample{position:relative}
.samp-flag{position:absolute;top:1rem;right:1.25rem;font-family:var(--ff-m);font-size:0.875rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:.12rem .4rem}
.deliver-list{display:flex;flex-direction:column;position:relative;z-index:1}
.dl{display:flex;gap:.85rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.07)}
.dl:last-child{border-bottom:none}
.dl-n{font-family:var(--ff-m);font-size:0.875rem;color:var(--gold-lt);flex-shrink:0;letter-spacing:.06em}
.dl b{display:block;font-size:0.9rem;font-weight:500;color:#fff;line-height:1.35}
.dl div{font-size:0.875rem;color:rgba(255,255,255,.45);line-height:1.5}
.deliver-ft{position:relative;z-index:1;font-size:0.875rem;color:rgba(255,255,255,.4);padding-top:.4rem}
.hc-dim-w{width:118px;flex-shrink:0}

/* ═══ JOURNEY TIMELINE (four steps, start to hired) ═══ */
/* Namespaced: a bare .tl collided with .ht-item .tl in the hero and was pushing
   display:grid onto the trust labels. */
.jtl{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:1rem}
.tl-i{position:relative;padding:0 1.25rem 0 0}
.tl-mark{position:relative;height:34px;display:flex;align-items:center}
.tl-mark::after{content:'';position:absolute;left:34px;right:0;top:50%;height:1px;background:var(--beige)}
.tl-i:last-child .tl-mark::after{display:none}
.tl-dot{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--beige);color:var(--slate);display:flex;align-items:center;justify-content:center;font-family:var(--ff-m);font-size:0.875rem;flex-shrink:0;position:relative;z-index:1}
.tl-dot.active{background:var(--navy);border-color:var(--navy);color:#fff}
.tl-c{padding-top:1.1rem}
.tl-c h3{font-family:var(--ff-d);font-size:1.05rem;color:var(--navy);line-height:1.25;margin:.4rem 0 .3rem}
.tl-c p{font-size:0.875rem;color:var(--slate);line-height:1.5}
.tl-badge{display:inline-block;font-size:0.875rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:.18rem .5rem;border-radius:var(--r);background:var(--blush);color:var(--slate)}
.tl-badge.free{background:#E3F3EA;color:var(--green)}
.tl-badge.flagship{background:var(--navy);color:var(--gold-lt)}
@media(max-width:860px){
  .jtl{grid-template-columns:1fr;gap:0}
  .tl-i{display:grid;grid-template-columns:34px 1fr;gap:0 1rem;padding:0 0 1.5rem}
  .tl-mark{height:auto;align-items:flex-start}
  .tl-mark::after{left:50%;right:auto;top:34px;bottom:-1.5rem;width:1px;height:auto;transform:translateX(-50%)}
  .tl-i:last-child{padding-bottom:0}
  .tl-c{padding-top:.2rem}
}

/* ═══ WHO FUNDS RISE (dark band) ═══
   Was three emoji pills centred in a navy section, directly above a navy CTA band — the two
   merged into one huge block with a void in the middle, and on a 390px screen the pills wrapped
   2 + 1. Now a two-column panel: the claim on the left, the three funders as rows that actually
   say what each one gets. Each row carries an inline SVG icon, never an emoji. */
.divider{height:1px;background:var(--beige)}
.fund-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:start}
.fund-lead .sec-t{color:#fff;margin:.4rem 0 1rem}
.fund-lead p{color:rgba(255,255,255,.66);line-height:1.75;margin-bottom:1.75rem;max-width:38ch}
.fund-list{display:flex;flex-direction:column;gap:.25rem}
.fund-row{display:flex;gap:1.1rem;align-items:flex-start;padding:1.25rem 0;border-top:1px solid rgba(255,255,255,.13)}
.fund-row:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
.fund-ic{flex-shrink:0;width:2.4rem;height:2.4rem;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);color:var(--gold-lt)}
.fund-ic .svgic{width:1.2rem;height:1.2rem}
.fund-t{font-size:1rem;font-weight:600;color:#fff;margin-bottom:.2rem}
.fund-d{font-size:.925rem;color:rgba(255,255,255,.6);line-height:1.65}
@media(max-width:820px){
  .fund-grid{grid-template-columns:1fr;gap:2rem}
  .fund-lead p{max-width:none}
  .fund-row{padding:1.1rem 0}
}

/* ═══ SECTIONS ═══ */
.sec{padding:5rem 0}.sec-mist{background:var(--mist)}
/* An editorial block already carries its own visual margin in the photo, so two of them
   back to back paid the 5rem section padding twice: measured on /about, 80 + 80 of section
   padding plus 63 + 63 of .ed centring slack left 286px of empty page between two
   paragraphs that are only 263px tall. Paired instead, which takes 164px off /about.
   Only these sections change — a .sec with no .ed child keeps the full 5rem rhythm. */
.sec:has(> .ed){padding:3.25rem 0}
.sec:has(> .ed) + .sec:has(> .ed){padding-top:0}
.sec:has(> .w.prose){padding-bottom:3.25rem}
.sec-dark{background:var(--navy)}
/* A navy section immediately followed by a navy CTA band read as one enormous block
   with dead space in the middle. The band gets the deeper ink tone and a hairline. */
.sec-dark + .cta-band{background:var(--ink);border-top:1px solid rgba(255,255,255,.1)}
.sec-dark .eyebrow,.hero-home-r .eyebrow,.db-sb .eyebrow{color:var(--gold-lt)}
.sec-dark .sec-h .eyebrow{color:var(--gold-lt)}.sec-dark .sec-h h2{color:#fff}
.sec-h{margin-bottom:2.5rem;max-width:620px}.sec-h .eyebrow{margin-bottom:.6rem}.sec-h h2{margin:.4rem 0 .6rem}
.journey{display:flex;align-items:flex-start;gap:0;position:relative;margin-top:2.5rem}
.journey::before{content:'';position:absolute;top:28px;left:28px;right:28px;height:2px;background:var(--beige)}
.journey-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1;padding:0 .5rem}
.js-num{width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--beige);display:flex;align-items:center;justify-content:center;font-family:var(--ff-d);font-size:1.2rem;margin-bottom:1.1rem}
.js-num.active{background:var(--gold);border-color:var(--gold);color:#fff}
.journey-step h3{font-size:.9rem;font-weight:600;margin-bottom:.3rem}
.journey-step p{font-size:0.875rem;color:var(--slate);line-height:1.5}
.js-badge{display:inline-block;margin-top:.5rem;padding:.18rem .6rem;border-radius:var(--r5);font-size:0.875rem;font-weight:600;background:var(--blush);color:var(--navy)}
.js-badge.free{background:rgba(45,106,79,.12);color:var(--green)}.js-badge.flagship{background:rgba(210,154,14,.15);color:#7a5c1e}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.prod-card{background:#fff;border:1px solid var(--beige);border-radius:var(--r4);padding:2rem;position:relative;transition:all .2s}
.prod-card:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.prod-card.featured{border-color:var(--gold);background:linear-gradient(160deg,#fff 60%,var(--blush))}
.pc-tag{position:absolute;top:1.25rem;right:1.25rem;font-size:0.875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .6rem;border-radius:var(--r5)}
.pc-tag.free{background:rgba(45,106,79,.1);color:var(--green)}.pc-tag.flagship{background:rgba(210,154,14,.15);color:#7a5c1e}
.pc-icon{font-size:2rem;margin-bottom:1rem}
.prod-card h3{font-family:var(--ff-d);font-size:1.2rem;margin-bottom:.5rem}
.prod-card p{font-size:0.9rem;color:var(--slate);line-height:1.6;margin-bottom:1.1rem}
.pc-outputs{list-style:none;display:flex;flex-direction:column;gap:.3rem}
.pc-outputs li{font-size:0.875rem;color:var(--slate);display:flex;gap:.5rem}
.pc-outputs li::before{content:'✦';color:var(--gold);font-size:0.875rem;margin-top:3px}
.fc-5c{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:2.5rem}
.fc-5c-item{background:#fff;border:1px solid var(--beige);border-radius:var(--r3);padding:1.5rem;text-align:center}
.fc-5c-item .fci{font-size:1.5rem;margin-bottom:.6rem}.fc-5c-item h3{font-size:.88rem;font-weight:600;margin-bottom:.3rem}
.fc-5c-item p{font-size:0.875rem;color:var(--slate);line-height:1.45}
.cert-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem}
.cert-tier{background:#fff;border:1px solid var(--beige);border-radius:var(--r3);padding:1.5rem;text-align:center;transition:all .2s}
.cert-tier:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.ct-icon{font-size:2rem;margin-bottom:.6rem}.ct-name{font-family:var(--ff-d);font-size:1.1rem;margin-bottom:.4rem}
.ct-desc{font-size:0.875rem;color:var(--slate);line-height:1.5;margin-bottom:.6rem}.ct-score{font-family:var(--ff-m);font-size:0.875rem;color:var(--gold-ink);font-weight:500}
.cta-band{background:var(--navy);padding:5rem 0;text-align:center}
.cta-band h2{font-family:var(--ff-d);font-size:clamp(1.8rem,4vw,2.6rem);color:#fff;margin-bottom:.8rem}
.cta-band p{color:rgba(255,255,255,.55);max-width:460px;margin:0 auto 2rem}
.site-foot{background:var(--ink);color:rgba(255,255,255,.5);font-size:0.875rem;padding:2rem;text-align:center}
@media(max-width:900px){.prod-grid,.fc-5c,.cert-tiers{grid-template-columns:1fr 1fr}.journey{flex-wrap:wrap;gap:1.5rem}.journey::before{display:none}.journey-step{flex:0 0 45%}}
@media(max-width:600px){.prod-grid,.fc-5c,.cert-tiers{grid-template-columns:1fr}.hero-trust{gap:1.5rem}}

/* ═══ LOGIN ═══ */
.login-wrap{min-height:100vh;display:flex}
.login-l{width:460px;flex-shrink:0;background:var(--navy);display:flex;flex-direction:column;justify-content:center;padding:3.5rem 3rem;position:relative;overflow:hidden}
.login-l::before{content:'';position:absolute;top:-80px;right:-80px;width:260px;height:260px;border-radius:50%;background:rgba(210,154,14,.07)}
.brand-lg{font-family:var(--ff-d);font-size:1.5rem;color:#fff;position:relative}.brand-lg em{color:var(--gold-lt);font-style:italic}
.brand-sub{font-size:0.875rem;color:rgba(255,255,255,.62);margin-bottom:2.5rem}
.login-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r3);padding:1.75rem;position:relative}
.seg{display:flex;background:rgba(255,255,255,.06);border-radius:var(--r2);padding:.25rem;margin-bottom:1.5rem}
.seg-b{flex:1;padding:.5rem;border-radius:var(--r);font-size:0.9rem;color:rgba(255,255,255,.72);font-weight:500}
.seg-b.sel{background:var(--gold);color:var(--ink);font-weight:700}
.login-field{margin-bottom:1rem}
/* The other half of the dark-panel leftover. I fixed the INPUT here and left the label at 72%
   white on a white card — 1.0:1 — so "Email" and "Password" were both still invisible and the
   unfocused password field read as empty space. var(--slate) is what .acq-field label uses. */
.login-field label{color:var(--slate);font-size:0.875rem;font-weight:600;display:block;margin-bottom:.35rem}
/* Staff sign-in fields. These were styled for a dark panel — white text on 6% white — but the
   only place .login-field is used is inside .signin-card, which is background:#fff. Measured on
   a live iPhone: 1.0:1 contrast, i.e. you type and see nothing at all. Felix hit it as "no way
   to type password". Now navy on white, matching .ff below.
   font-size is 16px and must stay >=16px: iOS Safari zooms the whole page in when you focus an
   input smaller than that, which threw the password field off screen. */
.login-field input,.login-field select{width:100%;padding:.7rem 1rem;border:1.5px solid var(--beige);border-radius:var(--r2);font-size:16px;background:#fff;color:var(--navy)}
.login-field input:focus,.login-field select:focus{outline:none;border-color:var(--gold-lt)}
.login-field select option{color:#111}
.back-home{margin-top:1.5rem;font-size:0.9rem;color:rgba(255,255,255,.66);position:relative}
.login-r{gap:1.25rem;flex-direction:column;flex:1;background:var(--mist);display:flex;align-items:center;justify-content:center;padding:3rem}
.info-card{background:#fff;border:1px solid var(--beige);border-radius:var(--r3);padding:1.75rem;width:100%;max-width:420px}
.ic-eyebrow{font-size:0.875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin-bottom:.4rem}
.ic-title{font-family:var(--ff-d);font-size:1.05rem;margin-bottom:.25rem}
.ic-sub{font-size:0.875rem;color:var(--slate);margin-bottom:1rem}.ic-sub code,code{font-family:var(--ff-m);background:var(--mist);padding:.1rem .4rem;border-radius:4px;font-size:.9em}
/* Login side panel. The five-role quick-demo list went with the LMS — there is one kind of
   account now, so this answers "why sign up" instead of "which portal are you". */
/* ═══ ADMIN READ PANEL ═══ */
.adm-wrap{max-width:1140px}
.adm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.adm-head-tools,.rpt-tools{display:flex;gap:.5rem;flex-wrap:wrap}
.adm-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.kv{display:flex;justify-content:space-between;gap:1rem;font-size:0.9rem;padding:.35rem 0;border-bottom:1px solid var(--beige)}
.kv span:first-child{color:var(--slate);text-transform:capitalize}
.kv span:last-child{color:var(--navy);font-weight:500;text-align:right}
.msg-row{border-bottom:1px solid var(--beige);padding:.9rem 0}
.msg-row:last-child{border-bottom:none}
.msg-meta{font-size:0.9rem;color:var(--slate);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.35rem}
.msg-body{font-size:0.925rem;color:var(--navy);line-height:1.6;white-space:pre-wrap}
.why-list{display:flex;flex-direction:column;gap:.9rem;margin-top:1.1rem}
.why-item{padding-left:.85rem;border-left:2px solid var(--teal)}
.why-t{font-size:0.925rem;font-weight:600;color:var(--navy)}
.why-d{font-size:0.875rem;color:var(--slate);line-height:1.55;margin-top:.15rem}
.dc{display:flex;justify-content:space-between;align-items:center;padding:.55rem .85rem;background:var(--mist);border-radius:var(--r);cursor:pointer;margin-top:.4rem;transition:background .15s}
.dc:hover{background:var(--blush)}.dc-role{font-size:0.875rem;color:var(--slate);font-weight:500}.dc-cred{font-family:var(--ff-m);font-size:0.875rem;color:var(--navy)}
@media(max-width:820px){.login-l{width:100%}.login-r{display:none}}

/* ═══ FORMS ═══ */
.ff{margin-bottom:1rem}.ff label{display:block;font-size:0.875rem;font-weight:600;margin-bottom:.35rem}
/* 16px, not 0.925rem. Same iOS rule as .login-field above, and this one is the students' path:
   the assessment, intake and contact forms all use .ff/.inp, so every one of them was zooming
   the page on first tap. */
.ff input,.ff select,.inp,.ff textarea{width:100%;padding:.7rem 1rem;border:1.5px solid var(--beige);border-radius:var(--r2);font-size:16px;color:var(--navy);background:#fff;font-family:inherit}
.ff input:focus,.ff select:focus,.inp:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(210,154,14,.1)}
.inp{line-height:1.6;resize:vertical}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:600px){.fr{grid-template-columns:1fr}}
.chip-grid{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.5rem}
.chip{padding:.38rem .85rem;border-radius:var(--r5);border:1.5px solid var(--beige);background:#fff;font-size:0.875rem;color:var(--slate);cursor:pointer;user-select:none;transition:all .15s}
.chip:hover{border-color:var(--gold)}.chip.sel{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ═══ ASSESSMENT ═══ */
.assess-shell{min-height:100vh;background:var(--mist)}
/* top:0 is correct here and my earlier var(--nav-h) was wrong: BOTH shells that render
   this bar — assessment.js shell() and intake.js shell() — call App.paint(..., {bare:true}),
   so there is no nav above it. Offsetting it by the nav height left a 64px window with the
   scrolled page showing through above the bar. I had grepped app.js for "bare" and not the
   view modules, which is why I read it the wrong way round. */
.assess-topbar{background:var(--navy);padding:.8rem 1.25rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:50}
/* Exit rendered as an empty outline pill: .btn-o is navy text on a transparent background,
   and this bar IS navy. On dark it needs its own ink and border. */
.assess-topbar .btn-o{color:#fff;border-color:rgba(255,255,255,.38)}
.assess-topbar .btn-o:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}
.at-brand{font-family:var(--ff-d);color:#fff;font-size:.95rem}.at-brand em{color:var(--gold-lt);font-style:italic}
.at-prog{flex:1;display:flex;align-items:center;gap:.75rem}
.at-prog-bar{flex:1;height:5px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.at-prog-fill{height:100%;background:var(--gold);border-radius:3px;transition:width .4s;width:4%}
#aprog-lbl{font-size:0.875rem;color:rgba(255,255,255,.5);white-space:nowrap}
.assess-body{max-width:780px;margin:0 auto;padding:1.75rem 1.25rem 3rem}
.ap-tag{display:inline-block;font-size:0.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;padding:.22rem .7rem;border:1px solid rgba(210,154,14,.3);border-radius:var(--r5);margin-bottom:1rem;background:rgba(210,154,14,.06)}
.ap-title{font-family:var(--ff-d);font-size:1.5rem;margin-bottom:.3rem}
.ap-desc{font-size:0.925rem;color:var(--slate);margin-bottom:1.5rem;line-height:1.55}
/* The mid-assessment "edit your details" link — a real tester's feedback: no way back from the
   80 questions to fix something typed on Step 2. Sits above the title rather than crowding the
   Back/Next row, which already carries three elements on a dimension page. */
.ap-editlink{margin:-.35rem 0 .85rem;font-size:0.875rem}
.edit-resume-note{background:var(--mist);border-left:3px solid var(--teal);border-radius:0 var(--r) var(--r) 0;
  padding:.75rem 1rem;font-size:0.875rem;color:var(--slate);line-height:1.55;margin-bottom:1.25rem}
.edit-resume-note strong{color:var(--navy)}
.q-card{background:#fff;border:1.5px solid var(--beige);border-radius:var(--r3);padding:1.25rem;margin-bottom:.875rem;transition:border-color .2s}
.q-card.answered{border-color:rgba(210,154,14,.5)}
.q-card.unanswered-alert{border-color:var(--berry)!important;background:rgba(109,46,70,.03)}
.q-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;gap:.5rem}
.q-num{font-family:var(--ff-m);font-size:0.875rem;color:#fff;background:var(--navy);padding:.15rem .45rem;border-radius:.25rem}
.q-dim-badge{font-size:0.875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);font-weight:500;background:var(--mist);border:1px solid var(--beige);padding:.12rem .45rem;border-radius:.25rem}
.q-text{font-size:.95rem;font-weight:500;line-height:1.55;margin-bottom:1rem}
.scale-section{display:flex;flex-direction:column;gap:.4rem}
.scale-ends{display:flex;justify-content:space-between;font-size:0.875rem;color:var(--lgray)}
.scale-btns{display:grid;grid-template-columns:repeat(6,1fr);gap:.35rem}
.sb{aspect-ratio:1/1;max-height:54px;min-height:40px;border:1.5px solid var(--beige);border-radius:var(--r2);background:#fff;display:flex;align-items:center;justify-content:center;transition:all .13s}
.sb .sn{font-size:clamp(.8rem,3.5vw,.95rem);font-weight:700;color:var(--slate);pointer-events:none}
.sb:hover{border-color:var(--gold);background:var(--blush)}.sb:active{transform:scale(.94)}
.sb.sel{background:var(--navy);border-color:var(--navy);box-shadow:0 2px 6px rgba(2,30,78,.22)}.sb.sel .sn{color:#fff}
.assess-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--beige);gap:.75rem}
.pg-dots{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center;flex:1}
.pg-dot{width:7px;height:7px;border-radius:50%;background:var(--beige)}.pg-dot.done{background:var(--gold)}.pg-dot.cur{background:var(--navy);width:20px;border-radius:4px}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.5rem}
.rev-cell{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;border-radius:var(--r2);border:1.5px solid var(--beige);background:#fff;cursor:pointer}
.rev-cell.ok{border-color:rgba(45,106,79,.3);background:rgba(45,106,79,.03)}.rev-cell.miss{border-color:var(--berry);background:rgba(109,46,70,.03)}
.rc-n{font-family:var(--ff-m);font-size:0.875rem;color:#fff;background:var(--navy);width:30px;height:30px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rc-name{font-size:0.9rem;font-weight:600}.rc-count{font-size:0.875rem;color:var(--lgray)}
@media(max-width:600px){.review-grid{grid-template-columns:1fr}}

/* ═══ REPORT ═══ */
.rpt-page{background:var(--cream)}
.rpt-cover{background:var(--navy);padding:4rem 2rem 4.5rem;position:relative;overflow:hidden}
.rpt-cover::before{content:'RISE';position:absolute;right:-3rem;top:50%;transform:translateY(-50%);font-family:var(--ff-d);font-size:20vw;color:rgba(255,255,255,.02);line-height:1}
.rpt-cover-in{max-width:940px;margin:0 auto;position:relative}
.rpt-cover .eyebrow{color:var(--gold-lt);margin-bottom:1rem}
.rpt-cover h1{font-family:var(--ff-d);font-size:clamp(2rem,5vw,3rem);color:#fff;margin-bottom:.75rem}
.rpt-tagline{font-size:.95rem;color:rgba(255,255,255,.48);max-width:540px;line-height:1.6;margin-bottom:2rem}
.rpt-meta{display:flex;gap:2.5rem;flex-wrap:wrap}
.rm .rl{font-size:0.875rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:.2rem}
.rm .rv{font-size:.9rem;color:rgba(255,255,255,.8);font-weight:500}
/* Same bug as the ticket, and worse: stuck at top:0 under a 64px nav, 64 of its 94px were
   covered and the two score values sat entirely behind the nav — measured, with only the
   30px of labels below showing. The nav is translucent, so they smeared rather than
   disappearing cleanly. .adm-score-bar still forces static for the admin card embed. */
.rpt-score-bar{background:#fff;border-bottom:1px solid var(--beige);padding:1rem 0;position:sticky;top:var(--nav-h);z-index:100;overflow-x:auto}
.rsb-in{max-width:940px;margin:0 auto;padding:0 2rem;display:flex;gap:1.75rem;align-items:center}
.rsb-item{text-align:center;flex-shrink:0}.rsb-v{font-family:var(--ff-d);font-size:1.4rem}.rsb-l{font-size:0.875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lgray);margin-top:.2rem}
.rsb-div{width:1px;background:var(--beige);height:34px;flex-shrink:0}
.rpt-body{max-width:940px;margin:0 auto;padding:2.5rem 2rem 4rem}
/* The same score-bar and report-body markup, embedded inside an admin panel card instead of
   owning the whole page. `.rpt-score-bar`'s position:sticky assumes it is pinned under the
   site's own nav on a dedicated route — inside a card it would stick to the top of whatever the
   nearest scrolling context is and drift over unrelated admin content while scrolling. The width
   and side padding are dropped too: 940px + 2rem padding fought the card's own, narrower one. */
.adm-score-bar{position:static;border-bottom:none;padding:.75rem 0}
.adm-score-bar .rsb-in{max-width:none;padding:0}
.adm-report-body{max-width:none;padding:0;margin:1.25rem 0 0}
.rpt-two{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}@media(max-width:820px){.rpt-two{grid-template-columns:1fr}}
.arch-hero{background:linear-gradient(135deg,var(--navy),var(--slate));border-radius:var(--r4);padding:2.5rem;color:#fff;margin-bottom:1.1rem;position:relative;overflow:hidden}
.arch-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;border-radius:50%;background:rgba(210,154,14,.1)}
.ah-type{font-size:0.875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:.75rem;font-weight:600}
.ah-name{font-family:var(--ff-d);font-size:2rem;margin-bottom:.6rem}.ah-desc{font-size:.88rem;color:rgba(255,255,255,.62);line-height:1.7;max-width:580px}
.ah-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.875rem}
.ah-tag{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);padding:.22rem .7rem;border-radius:var(--r5);font-size:0.875rem;color:rgba(255,255,255,.7)}
.part-hdr{padding:1.4rem 2rem;background:var(--navy);border-radius:var(--r4) var(--r4) 0 0;margin-top:2.5rem}
.ph-n{font-family:var(--ff-m);font-size:0.875rem;color:var(--gold-lt);margin-bottom:.25rem}
.ph-h{font-family:var(--ff-d);font-size:1.35rem;color:#fff}.ph-s{font-size:0.875rem;color:rgba(255,255,255,.45);margin-top:.2rem}
.rpt-sec{background:#fff;border:1px solid var(--beige);border-radius:var(--r4);margin-bottom:1.1rem;overflow:hidden}
.part-hdr + .rpt-two .rpt-sec,.part-hdr + .rpt-sec{border-top-left-radius:0;border-top-right-radius:0}
.rs-hdr{padding:1.3rem 1.75rem;border-bottom:1px solid var(--beige);display:flex;align-items:center;gap:.875rem}
.rs-n{font-family:var(--ff-m);font-size:0.875rem;color:var(--gold-ink);width:26px;height:26px;border:1px solid rgba(210,154,14,.28);border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rs-l{font-size:0.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lgray);margin-bottom:.12rem}
.rs-hdr-t h3{font-family:var(--ff-d);font-size:1.05rem}
.rs-body{padding:1.5rem 1.75rem}
.bar-list{display:flex;flex-direction:column;gap:.75rem}
.bar-row{display:grid;grid-template-columns:140px 1fr 40px;align-items:center;gap:.75rem}
.bar-lbl{font-size:0.875rem;color:var(--slate)}.bar-track{height:8px;background:var(--beige);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;background:var(--navy)}.bar-fill.gold{background:var(--gold)}.bar-fill.green{background:var(--green)}.bar-fill.berry{background:var(--berry)}
.bar-val{font-size:0.875rem;font-weight:600;text-align:right}
.radar-wrap{display:flex;justify-content:center;padding:.5rem 0}
/* svg, not canvas since 2026-08-23 — see drawRadar(). A raster here is what made the
   downloaded PDF blurry, and no print setting could have rescued it. */
svg.rc{max-width:420px;width:100%;height:auto}
.fivec-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.875rem}
.fivec-cell{background:var(--mist);border-radius:var(--r2);padding:1rem;text-align:center;min-width:0}
.fc-score{font-family:var(--ff-d);font-size:1.5rem;color:var(--navy)}.fc-name{font-size:0.875rem;color:var(--slate);margin:.2rem 0 .5rem;font-weight:500}
.mxb{height:4px;background:var(--beige);border-radius:2px;overflow:hidden}.mxbf{height:100%;background:var(--gold);border-radius:2px}
.str-list{display:flex;flex-direction:column;gap:.875rem}
.str-item{display:flex;gap:1rem;padding:1rem 1.25rem;background:var(--mist);border-radius:var(--r2)}
.str-rank{width:28px;height:28px;border-radius:var(--r);background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--ff-m);font-size:0.875rem;flex-shrink:0}
.str-item h4,.growth-item h4{font-size:.88rem;font-weight:600;margin-bottom:.18rem}.str-item p,.growth-item p{font-size:0.875rem;color:var(--slate);line-height:1.5}
.growth-item{display:flex;gap:1rem;padding:1rem 1.25rem;background:rgba(109,46,70,.04);border:1px solid rgba(109,46,70,.1);border-radius:var(--r2)}
.gr-rank{width:28px;height:28px;border-radius:var(--r);background:var(--berry);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--ff-m);font-size:0.875rem;flex-shrink:0}
.comm-hero{background:var(--blush);border-radius:var(--r3);padding:1.5rem;margin-bottom:1.25rem}
.comm-hero h3{font-family:var(--ff-d);font-size:1.2rem;margin-bottom:.35rem}.comm-hero p{font-size:0.9rem;color:var(--slate);line-height:1.6}
.comm-hero .comm-blurb{color:var(--navy);font-weight:500;margin-bottom:.6rem}
/* The cover snapshot states archetype and communication style with no room to explain them —
   this points at the sections that do, right where the labels are read cold. */
.rpt-meta-hint{margin-top:1rem;font-size:0.8rem;color:rgba(255,255,255,.42)}
.mot-list{display:flex;flex-direction:column;gap:.55rem}
.mot-row{display:grid;grid-template-columns:16px 100px 1fr 38px;align-items:center;gap:.6rem}
.mot-rn{font-family:var(--ff-m);font-size:0.875rem;color:var(--lgray)}.mot-lbl{font-size:0.875rem;color:var(--slate)}
.mot-t{height:8px;background:var(--beige);border-radius:4px;overflow:hidden}.mot-f{height:100%;background:var(--gold);border-radius:4px;display:block}
.mot-val{font-size:0.875rem;font-weight:600;text-align:right}
.ind-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.ind-card{min-width:0}
.ind-card{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.1rem;background:var(--mist);border-radius:var(--r2)}
.ind-name{font-size:0.925rem;font-weight:500}.ind-pct{font-family:var(--ff-m);font-size:0.9rem;color:var(--gold-ink)}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.role-card{min-width:0}

/* ═══ THE REPORT ON A PHONE ═══
   This page was never mobile-tested, because it needs a scored assessment before it renders
   anything and so was not in the audit's route list. It is also the one page every student ends
   up on. Four grids had no breakpoint at all: the 6-item score bar reached 1107px on a 390px
   screen, and the 5C row was sliced through the third card — which is what 哥 photographed.
   Every one of these is measured by _shots/mobile.mjs at 320 and 390 now. */
@media(max-width:640px){
  /* Six scores in a nowrap flex row. Let it wrap into a tidy grid instead of running off-screen,
     and drop the hairline dividers, which only make sense in a single row. */
  .rsb-in{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem .5rem;padding:0 1.25rem}
  .rsb-div{display:none}
  .rsb-item{flex-shrink:1;min-width:0}
  .rsb-l{font-size:0.875rem;letter-spacing:.04em;line-height:1.3}
  /* Five C's at repeat(5,1fr) gave each cell ~60px. Two per row reads; five does not. */
  .fivec-row{grid-template-columns:repeat(2,1fr)}
  .ind-grid,.role-grid{grid-template-columns:1fr}
  .rpt-body{padding:1.75rem 1.25rem 3rem}
  .rpt-sec{margin-bottom:.875rem}
}
@media(max-width:380px){
  .rsb-in{grid-template-columns:repeat(2,1fr)}
  .fivec-row{grid-template-columns:1fr}
}

.role-card{background:#fff;border:1px solid var(--beige);border-radius:var(--r2);padding:.875rem 1rem}
.role-card .ri{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.rio{width:30px;height:30px;background:var(--blush);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:0.9rem;flex-shrink:0}
.rn{font-size:0.9rem;font-weight:600}.rs{font-size:0.875rem;color:var(--lgray)}.role-card p{font-size:0.875rem;color:var(--slate)}
.score-ring-wrap{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.score-ring{width:110px;height:110px;border-radius:50%;background:conic-gradient(var(--gold) 0% var(--pct,76%),var(--beige) var(--pct,76%) 100%);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.score-ring::before{content:'';position:absolute;inset:12px;border-radius:50%;background:#fff}
.sr-v{font-family:var(--ff-d);font-size:1.5rem;position:relative;z-index:1}
.sr-t h3{font-size:.95rem;font-weight:600;margin-bottom:.28rem}.sr-t p{font-size:0.9rem;color:var(--slate);line-height:1.55}
.badge{display:inline-block;margin-top:.45rem;padding:.18rem .7rem;border-radius:var(--r5);font-size:0.875rem;font-weight:600;background:var(--blush);color:var(--navy)}
.gl-tier-ptr{margin-top:.6rem;font-size:0.85rem;color:var(--slate);line-height:1.5}
.gr-shows{color:var(--navy)!important;margin-bottom:.25rem}

/* ═══ THE APPENDIX — how to read this report (glossary.js) ═══
   Same card language as Sections 1–10 so it reads as part of the Blueprint, not a legal notice
   stapled to the back. Dense on purpose: it is a reference the student comes back to, and it
   has to survive print at 14mm margins without a row splitting across pages. */
.gl-sub{padding:1rem 1.75rem 0;margin-bottom:0}
.gl-table{display:flex;flex-direction:column}
.gl-row{display:grid;grid-template-columns:190px 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid var(--beige)}
.gl-row:first-child{border-top:none;padding-top:0}
.gl-row.is-mine{background:var(--mist);margin:0 -1.75rem;padding-left:1.75rem;padding-right:1.75rem;border-top-color:transparent}
.gl-key{font-size:.9rem;font-weight:600;color:var(--navy);display:flex;flex-direction:column;gap:.15rem;align-items:flex-start}
.gl-key .gl-dot{margin-right:.4rem}
.gl-range{font-family:var(--ff-m);font-size:0.78rem;font-weight:500;color:var(--gold-ink);letter-spacing:.02em}
.gl-val p{font-size:0.875rem;color:var(--slate);line-height:1.55;margin-bottom:.3rem}.gl-val p:last-child{margin-bottom:0}
.gl-shows{color:var(--navy)!important}
.gl-from{font-size:0.8rem!important;color:var(--lgray)!important}
.gl-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--navy);vertical-align:middle}
.gl-dot.green{background:var(--green)}.gl-dot.gold{background:var(--gold)}.gl-dot.berry{background:var(--berry)}
.gl-note{margin-top:1rem;font-size:0.8rem;color:var(--lgray);line-height:1.5}
.gl-dim{padding:1.25rem 0;border-top:1px solid var(--beige)}.gl-dim:first-child{border-top:none;padding-top:0}.gl-dim:last-child{padding-bottom:0}
.gl-dim-hd{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}
.gl-dim-hd h4{font-family:var(--ff-d);font-size:1.02rem;color:var(--navy)}
.gl-mine{font-family:var(--ff-m);font-size:0.78rem;padding:.2rem .65rem;border-radius:var(--r5);background:var(--mist);color:var(--navy);white-space:nowrap}
.gl-mine.green{background:rgba(31,122,90,.1);color:var(--green)}.gl-mine.gold{background:rgba(178,146,84,.14);color:var(--gold-ink)}.gl-mine.berry{background:rgba(109,46,70,.08);color:var(--berry)}
.gl-def{font-size:0.9rem;color:var(--slate);line-height:1.6;margin-bottom:.9rem}
.gl-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.gl-level{padding:.8rem .9rem;border:1px solid var(--beige);border-radius:var(--r2);background:#fff}
.gl-level.is-mine{background:var(--mist);border-color:var(--gold)}
.gl-level-l{font-size:0.8rem;font-weight:600;color:var(--navy);margin-bottom:.35rem;display:flex;align-items:center;gap:.4rem}
.gl-level p{font-size:0.82rem;color:var(--slate);line-height:1.5}
.gl-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem;align-items:center}
.gl-chips-l{font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lgray);margin-right:.25rem}
.gl-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .6rem;border:1px solid var(--beige);border-radius:var(--r5);font-size:0.78rem;color:var(--slate);background:#fff}
.gl-chip b{font-family:var(--ff-m);font-weight:600;color:var(--navy)}
.gl-chip b.green{color:var(--green)}.gl-chip b.gold{color:var(--gold-ink)}.gl-chip b.berry{color:var(--berry)}
.gl-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.gl-tier{border:1px solid var(--beige);border-radius:var(--r3);padding:1.1rem 1.25rem;background:#fff;border-top-width:4px}
.gl-tier-bronze{border-top-color:#A5714A}.gl-tier-silver{border-top-color:#8E97A3}.gl-tier-gold{border-top-color:var(--gold)}.gl-tier-platinum{border-top-color:var(--navy)}
.gl-tier.is-mine{background:var(--mist);box-shadow:0 0 0 2px var(--gold) inset}
.gl-tier-hd{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.4rem;flex-wrap:wrap}
.gl-tier-name{font-family:var(--ff-d);font-size:1.1rem;color:var(--navy)}
.gl-tier-range{font-family:var(--ff-m);font-size:0.8rem;color:var(--gold-ink)}
.gl-tier-you{margin-left:auto;font-size:0.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--gold-ink)}
.gl-tier p.gl-tier-means{font-size:0.9rem;color:var(--navy);font-weight:500;line-height:1.5;margin-bottom:.6rem}
.gl-tier p.gl-tier-l{font-size:0.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lgray);margin:.6rem 0 .2rem;font-weight:600}
.gl-tier p{font-size:0.85rem;color:var(--slate);line-height:1.5}
.gl-bench{font-family:var(--ff-m);font-size:0.82rem;color:var(--navy);padding:.6rem .9rem;background:var(--mist);border-radius:var(--r2);margin-bottom:1rem}
.gl-sec .rs-body>p{font-size:0.9rem;color:var(--slate);line-height:1.6;margin-bottom:.7rem}
.gl-how-l{font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lgray);font-weight:600;margin:1rem 0 .4rem!important}
.gl-how{list-style:none;padding:0;margin:0 0 .5rem;display:grid;grid-template-columns:1fr 1fr;gap:.35rem .9rem}
.gl-how li{font-size:0.85rem;color:var(--slate);display:flex;gap:.6rem;align-items:baseline}
.gl-how li b{font-family:var(--ff-m);color:var(--navy);min-width:38px}
.rpt-two .gl-row{grid-template-columns:1fr;gap:.3rem}.rpt-two .gl-key{flex-direction:row;align-items:baseline;gap:.6rem}
@media(max-width:820px){.gl-levels{grid-template-columns:1fr}.gl-tiers{grid-template-columns:1fr}.gl-how{grid-template-columns:1fr}}
@media(max-width:640px){.gl-row{grid-template-columns:1fr;gap:.35rem}.gl-row.is-mine{margin:0 -1.25rem;padding-left:1.25rem;padding-right:1.25rem}.gl-sub{padding:1rem 1.25rem 0}}
.plan-tl{display:flex;flex-direction:column}
.plan-ph{display:flex;gap:1.25rem}
.ph-line{display:flex;flex-direction:column;align-items:center}
.ph-dot{width:12px;height:12px;border-radius:50%;background:var(--gold);border:3px solid var(--cream);flex-shrink:0;margin-top:4px}
.ph-conn{width:2px;flex:1;background:var(--beige);margin:4px 0;min-height:16px}.plan-ph:last-child .ph-conn{display:none}
.ph-cont{padding-bottom:1.5rem}.ph-tag{font-size:0.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;display:block;margin-bottom:.3rem}
.ph-cont h4{font-size:.9rem;font-weight:600;margin-bottom:.3rem}
.ph-signal{font-family:var(--ff-m);font-size:0.74rem;color:var(--gold-ink);margin-top:.3rem}
/* RCIRI-v1.1 (V10 Phase 0, 2026-09-22): the report parts that replaced the tier, 5C and match % */
.rsb-in:has(.rsb-note){flex-wrap:wrap;row-gap:0;justify-content:center;gap:1.25rem}
.rsb-in:has(.rsb-note) .rsb-item{flex:1 1 0;min-width:0}
.rsb-note{flex-basis:100%;text-align:center;font-size:0.75rem;letter-spacing:.06em;color:var(--lgray);margin-top:.4rem}
.rpt-quality-flag{margin-top:1rem;padding:.7rem 1rem;border-radius:var(--r2);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);font-size:0.875rem;line-height:1.5}
.ah-note{font-size:0.9rem;color:var(--slate);margin-top:.6rem;line-height:1.5}.ah-note b{color:var(--navy)}
.comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.5rem}
.comp-dim h4{font-size:0.85rem;font-weight:600;color:var(--navy);margin-bottom:.1rem}.comp-dim .gl-chips{margin-top:.45rem}
.ind-picked{font-size:0.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);margin-left:.4rem;font-weight:600}
.gr-none{font-size:1rem;font-weight:500;color:var(--navy);margin-bottom:.5rem}
.cc-list{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .9rem}
.cc-row{display:flex;align-items:center;gap:.5rem;font-size:0.875rem;color:var(--lgray);padding:.3rem 0;border-bottom:1px solid var(--beige)}
.cc-row.on{color:var(--navy)}.cc-mark{color:var(--beige);font-size:0.8rem}.cc-row.on .cc-mark{color:var(--green)}
.cc-item{flex:1}.cc-state{font-size:0.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.gl-versions li{font-size:0.78rem;font-family:var(--ff-m)}.gl-versions li b{font-family:inherit;min-width:140px}
@media(max-width:640px){.comp-grid{grid-template-columns:1fr}.cc-list{grid-template-columns:1fr}}
.ac-cta{background:linear-gradient(135deg,var(--navy),var(--teal-dp));border-radius:var(--r4);padding:3rem;color:#fff;text-align:center;margin-top:2.5rem;position:relative;overflow:hidden}
.ac-cta .eyebrow{color:rgba(255,255,255,.5);margin-bottom:1rem}.ac-cta h2{font-family:var(--ff-d);font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:.875rem}
.ac-cta p{color:rgba(255,255,255,.6);max-width:500px;margin:0 auto 2rem;line-height:1.7;font-size:.9rem}
.ac-cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
/* .btn-w.btn-lg is full-width for stacked forms; inside a CTA row it must size to content
   or it eats the whole line and pushes the secondary exit onto its own row. */
.ac-cta-btns .btn-w.btn-lg{width:auto}

/* ═══ DASHBOARD ═══ */
.db-layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.db-sb{background:var(--navy);padding:1.75rem 1.25rem;display:flex;flex-direction:column;gap:.28rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.db-slogo{font-family:var(--ff-d);color:#fff;font-size:1rem;margin-bottom:1.75rem}.db-slogo em{color:var(--gold-lt);font-style:italic}
.dbn{display:flex;align-items:center;gap:.75rem;padding:.6rem .875rem;border-radius:var(--r2);font-size:0.9rem;color:rgba(255,255,255,.5);cursor:pointer;transition:all .15s}
.dbn:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8)}.dbn.active{background:rgba(255,255,255,.1);color:#fff}
.dbn .dni{font-size:.9rem;width:18px;text-align:center}
.db-main{background:var(--mist);min-height:100vh;overflow-x:hidden}
.db-topbar{background:#fff;border-bottom:1px solid var(--beige);padding:1.2rem 2rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.db-topbar h1{font-family:var(--ff-d);font-size:1.2rem}
.db-content{padding:2rem}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.75rem}
.stat-c{background:#fff;border:1px solid var(--beige);border-radius:var(--r3);padding:1.4rem}
.stat-c .sv{font-family:var(--ff-d);font-size:1.7rem;line-height:1.1}.stat-c .sl{font-size:0.875rem;color:var(--lgray);margin-top:.22rem}.stat-c .sd{font-size:0.875rem;color:var(--gold);margin-top:.12rem;font-weight:500}
.db-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem}
.db-card{background:#fff;border:1px solid var(--beige);border-radius:var(--r3);overflow:hidden}
.db-ch{padding:1rem 1.4rem;border-bottom:1px solid var(--beige);display:flex;align-items:center;justify-content:space-between}
.db-ch h3{font-size:0.875rem;font-weight:600;color:var(--slate);text-transform:uppercase;letter-spacing:.08em}
.db-cb{padding:1.25rem 1.4rem}
.adm-bar-r{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}
.adm-bar-l{font-size:0.875rem;color:var(--slate);width:150px;flex-shrink:0}
.adm-bar-t{flex:1;height:8px;background:var(--beige);border-radius:4px;overflow:hidden}.adm-bar-f{height:100%;border-radius:4px;background:var(--navy)}
.adm-bar-v{font-size:0.875rem;font-weight:600;width:30px;text-align:right;flex-shrink:0}
.adm-tbl{width:100%;border-collapse:collapse;font-size:0.875rem}
.adm-tbl th{text-align:left;font-weight:500;color:var(--lgray);border-bottom:1px solid var(--beige);padding:.5rem .6rem .65rem;text-transform:uppercase;font-size:0.875rem;letter-spacing:.05em}
.adm-tbl td{padding:.6rem;border-bottom:1px solid var(--beige)}.adm-tbl tr:last-child td{border-bottom:none}.adm-tbl tr:hover td{background:var(--mist)}
.pill{display:inline-block;padding:.15rem .55rem;border-radius:var(--r5);font-size:0.875rem;font-weight:600;background:var(--blush);color:var(--navy)}
.pill-gold{background:rgba(210,154,14,.14);color:#7a5c1e}.pill-berry{background:rgba(109,46,70,.1);color:var(--berry)}
.pill-alert{background:#FFF1E6;color:#9A3D0E;border:1px solid rgba(154,61,14,.25);font-size:0.75rem;vertical-align:middle}
.pp-cards{display:flex;flex-direction:column;gap:.875rem}
.pp-card{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--beige);border-radius:var(--r3);padding:1.1rem 1.25rem}
.pp-card.done{border-color:rgba(45,106,79,.25);background:rgba(45,106,79,.02)}
.ppc-ic{width:44px;height:44px;border-radius:var(--r2);background:var(--mist);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.ppc-body{flex:1}.ppc-t{font-size:.9rem;font-weight:600}.ppc-s{font-size:0.875rem;color:var(--slate);margin-top:.1rem}
@media(max-width:900px){.db-layout{grid-template-columns:1fr}.db-sb{position:static;height:auto;flex-direction:row;flex-wrap:wrap;overflow-x:auto}.stat-grid{grid-template-columns:1fr 1fr}.db-grid{grid-template-columns:1fr}}

/* ═══ ASSESSMENT CENTRE ═══ */
.ac-wrap{padding-bottom:4rem}
.ac-hero-lite{text-align:center;max-width:640px;margin:2.5rem auto 2rem}
.ac-hero-lite h1{font-family:var(--ff-d);font-size:2rem;margin:.75rem 0 .6rem}.ac-hero-lite p{color:var(--slate);line-height:1.6}
.card{background:#fff;border:1px solid var(--beige);border-radius:var(--r3);overflow:hidden}.card-body{padding:1.5rem}
.ac-run{display:grid;grid-template-columns:1fr 300px;gap:1.25rem;max-width:1140px;margin:1.5rem auto;padding:0 2rem}
.job-ad-card{background:var(--ai-bg);border:1px solid var(--ai-border);border-radius:var(--r3);overflow:hidden;position:relative;margin-bottom:1rem}
.job-ad-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-lt),var(--gold))}
.jac-header{padding:1.25rem;border-bottom:1px solid var(--ai-border);display:flex;align-items:flex-start;gap:1rem}
.jac-logo{width:44px;height:44px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.jac-role{font-family:var(--ff-d);font-size:1.15rem;color:#fff}.jac-company{font-size:0.9rem;color:rgba(255,255,255,.5)}
.ai-extracted-badge{margin-left:auto;padding:.25rem .625rem;background:rgba(210,154,14,.1);border:1px solid rgba(210,154,14,.2);border-radius:var(--r5);font-size:0.875rem;color:var(--gold-lt);font-weight:600}
.jac-body{padding:1.25rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.jac-section-title{font-size:0.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);font-weight:600;margin-bottom:.5rem}
.jac-list{display:flex;flex-direction:column;gap:.3rem}
.jac-item{display:flex;gap:.5rem;font-size:0.875rem;color:rgba(255,255,255,.65);line-height:1.4}.jac-item::before{content:'→';color:var(--gold-lt);flex-shrink:0}
.act-card{background:#fff;border:1px solid var(--beige);border-radius:var(--r3);overflow:hidden;margin-bottom:.875rem}
.act-card.scored{border-color:var(--gold)}
.act-hdr{padding:.875rem 1.25rem;border-bottom:1px solid var(--beige);display:flex;align-items:center;gap:.875rem}
.act-num{width:30px;height:30px;border-radius:var(--r);background:var(--navy);color:#fff;font-size:0.9rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.act-title{font-size:.9rem;font-weight:600}.act-sub{font-size:0.875rem;color:var(--lgray);margin-top:.06rem}
.act-body{padding:1.25rem}
.act-note{background:var(--mist);border-left:3px solid var(--gold);border-radius:0 var(--r) var(--r) 0;padding:.625rem .875rem;font-size:0.875rem;color:var(--slate);margin-bottom:1rem;line-height:1.5}
.ai-feedback-box{background:rgba(210,154,14,.07);border:1px solid rgba(210,154,14,.15);border-radius:var(--r2);padding:1rem;margin-top:.75rem}
.ai-feedback-label{font-size:0.875rem;letter-spacing:.14em;text-transform:uppercase;color:#7a5c1e;margin-bottom:.4rem;font-weight:600}
.ai-feedback-text{font-size:0.9rem;color:var(--slate);line-height:1.6}
.ac-side{position:relative}
.score-panel{background:var(--navy);border-radius:var(--r3);padding:1.25rem;position:sticky;top:1.5rem}
.sp-title{font-size:0.875rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:.875rem;font-weight:600}
.sp-5c{display:flex;flex-direction:column;gap:.625rem}
.sp-item{display:flex;flex-direction:column;gap:.2rem}
.sp-label{font-size:0.875rem;color:rgba(255,255,255,.5);display:flex;justify-content:space-between}.sp-label .score{font-family:var(--ff-m);color:var(--gold-lt);font-weight:700}
.sp-bar{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}.sp-fill{height:100%;border-radius:2px;background:var(--gold-lt);transition:width .4s}
.sp-total{margin-top:1rem;padding-top:.875rem;border-top:1px solid rgba(255,255,255,.07);text-align:center}
.sp-total-val{font-family:var(--ff-d);font-size:2rem;color:#fff}.sp-total-lbl{font-size:0.875rem;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.1em}
.sp-match{margin-top:.875rem;padding:.75rem;background:rgba(210,154,14,.08);border:1px solid rgba(210,154,14,.15);border-radius:var(--r2)}
.sp-match-lbl{font-size:0.875rem;color:var(--gold-lt);margin-bottom:.3rem;font-weight:600}.sp-match-val{font-family:var(--ff-d);font-size:1.4rem;color:var(--gold-lt)}.sp-match-sub{font-size:0.875rem;color:rgba(255,255,255,.3);margin-top:.08rem}
.tag{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .65rem;border-radius:var(--r5);font-size:0.875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.tag-gold{background:rgba(210,154,14,.14);color:#7a5c1e}.tag-green{background:rgba(45,106,79,.12);color:var(--green)}
@media(max-width:900px){.ac-run{grid-template-columns:1fr}.jac-body{grid-template-columns:1fr}.score-panel{position:static}}

/* ═══ SECONDARY PAGES ═══ */
.page-hero{background:var(--navy);padding:4.5rem 0 4rem;text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:-90px;right:-60px;width:280px;height:280px;border-radius:50%;background:rgba(210,154,14,.06)}
.page-hero .eyebrow{color:var(--gold-lt);margin-bottom:1rem}
.page-hero h1{font-family:var(--ff-d);font-size:clamp(2rem,5vw,3rem);color:#fff;margin-bottom:1rem;line-height:1.1}
.page-hero h1 em{color:var(--gold-lt);font-style:italic}
.page-hero p{color:rgba(255,255,255,.6);max-width:620px;margin:0 auto;line-height:1.7;font-size:1.02rem}
.stack{display:flex;flex-direction:column;gap:0}
.opt{color:var(--lgray);font-weight:400;font-size:.875rem}

/* problem / stat callouts */
.stat-band2{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--beige);border-radius:var(--r3);overflow:hidden;margin-top:2.5rem}
.sb2-item{background:var(--navy);padding:2rem 1.5rem;text-align:center}
.sb2-item .v{font-family:var(--ff-d);font-size:2.4rem;color:var(--gold-lt);line-height:1}
.sb2-item .l{font-size:0.875rem;color:rgba(255,255,255,.55);margin-top:.5rem;line-height:1.4}
.sb2-item .src{font-size:0.875rem;color:rgba(255,255,255,.28);margin-top:.4rem}
@media(max-width:820px){.stat-band2{grid-template-columns:1fr 1fr}}
.pull-quote{font-family:var(--ff-d);font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.35;color:var(--navy);max-width:820px;margin:0 auto;text-align:center}
.pull-quote .src{display:block;font-family:var(--ff-b);font-size:0.9rem;color:var(--lgray);margin-top:1rem;font-style:normal}
.prose{max-width:720px;margin:0 auto}
.prose p{font-size:1rem;color:var(--slate);line-height:1.8;margin-bottom:1.2rem}
.prose h3{font-family:var(--ff-d);font-size:1.4rem;color:var(--navy);margin:2rem 0 .75rem}
.prose .cite{font-size:0.875rem;color:var(--lgray)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
@media(max-width:820px){.two-col{grid-template-columns:1fr;gap:1.5rem}}

/* feature/reason cards */
.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
@media(max-width:900px){.reason-grid{grid-template-columns:1fr}}
.reason-card{background:#fff;border:1px solid var(--beige);border-radius:var(--r3);padding:1.75rem}
.reason-card .ic{font-size:1.6rem;margin-bottom:.75rem}
.reason-card h3{font-family:var(--ff-d);font-size:1.15rem;margin-bottom:.5rem}
.reason-card p{font-size:0.925rem;color:var(--slate);line-height:1.65}
.timeline2{display:flex;flex-direction:column;gap:0;margin-top:1.5rem}
.tl2-item{display:flex;gap:1.25rem}
.tl2-dot{display:flex;flex-direction:column;align-items:center}
.tl2-dot .d{width:14px;height:14px;border-radius:50%;background:var(--gold);border:3px solid var(--cream);margin-top:4px;flex-shrink:0}
.tl2-dot .ln{width:2px;flex:1;background:var(--beige);min-height:14px}
.tl2-item:last-child .ln{display:none}
.tl2-body{padding-bottom:1.75rem}.tl2-body .yr{font-family:var(--ff-m);font-size:0.875rem;color:var(--gold);font-weight:600}
.tl2-body h4{font-size:.95rem;font-weight:600;margin:.15rem 0 .3rem}.tl2-body p{font-size:0.9rem;color:var(--slate);line-height:1.6}

/* method rows */
.method-list{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}
.method-row{display:flex;gap:1rem;align-items:flex-start;background:var(--mist);border-radius:var(--r2);padding:1rem 1.25rem}
.method-row .mn{font-family:var(--ff-m);font-size:0.875rem;color:#fff;background:var(--navy);border-radius:var(--r);padding:.3rem .5rem;flex-shrink:0}
.method-row h4{font-size:.88rem;font-weight:600;margin-bottom:.15rem}.method-row p{font-size:0.9rem;color:var(--slate);line-height:1.55}

/* PARTNERS / audience blocks */
.aud-block{background:#fff;border:1px solid var(--beige);border-radius:var(--r4);padding:2rem;margin-bottom:1.25rem}
.aud-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.aud-ic{width:52px;height:52px;border-radius:var(--r2);background:var(--navy);color:var(--gold-lt);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.aud-head h3{font-family:var(--ff-d);font-size:1.4rem}
.aud-head .tagl{font-size:0.9rem;color:var(--lgray)}
.aud-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:700px){.aud-cols{grid-template-columns:1fr}}
.aud-cols h5{font-size:0.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;margin-bottom:.6rem}
.aud-cols ul{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.aud-cols li{font-size:0.925rem;color:var(--slate);display:flex;gap:.5rem;line-height:1.5}
.aud-cols li::before{content:'→';color:var(--gold);flex-shrink:0}
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
@media(max-width:820px){.tier-grid{grid-template-columns:1fr}}
.tier-card{background:#fff;border:1px solid var(--beige);border-radius:var(--r3);padding:1.75rem;display:flex;flex-direction:column}
.tier-card.mid{border-color:var(--gold);background:linear-gradient(165deg,#fff 55%,var(--blush))}
.tier-card .tn{font-family:var(--ff-d);font-size:1.25rem;margin-bottom:.25rem}
.tier-card .tp{font-size:0.9rem;color:var(--lgray);margin-bottom:1rem}
.tier-card ul{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.25rem;flex:1}
.tier-card li{font-size:0.9rem;color:var(--slate);display:flex;gap:.5rem}.tier-card li::before{content:'✓';color:var(--green);font-weight:700;flex-shrink:0}
.impact-band{background:var(--navy);border-radius:var(--r4);padding:2.5rem;margin-top:2.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
@media(max-width:820px){.impact-band{grid-template-columns:1fr 1fr}}
.impact-band .iv{font-family:var(--ff-d);font-size:2rem;color:var(--gold-lt)}
.impact-band .il{font-size:0.875rem;color:rgba(255,255,255,.55);margin-top:.3rem}
.sdg-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.sdg-chip{background:var(--mist);border:1px solid var(--beige);border-radius:var(--r5);padding:.4rem 1rem;font-size:0.9rem;color:var(--slate)}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem;align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-form-wrap .fr{margin-bottom:0}
.contact-side{display:flex;flex-direction:column;gap:.875rem}
.contact-card{background:#fff;border:1px solid var(--beige);border-radius:var(--r3);padding:1.25rem 1.4rem}
.contact-card .cc-ic{font-size:1.3rem;margin-bottom:.4rem}
.contact-card h4{font-size:0.925rem;font-weight:600;margin-bottom:.2rem}
.contact-card p{font-size:0.9rem;color:var(--slate);line-height:1.5}
.contact-card a{font-size:0.9rem;color:var(--teal-ink);font-weight:600;display:inline-block;margin-top:.4rem}

/* FAQ */
.faq-group{margin-bottom:2.5rem}
.faq-group-t{font-family:var(--ff-d);font-size:1.3rem;color:var(--navy);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--beige)}
.faq-list{display:flex;flex-direction:column;gap:.6rem}
.faq-item{background:#fff;border:1px solid var(--beige);border-radius:var(--r2);padding:.25rem 1.25rem}
.faq-item summary{cursor:pointer;padding:.95rem 0;font-size:.9rem;font-weight:600;color:var(--navy);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';color:var(--gold);font-size:1.2rem;font-weight:400;flex-shrink:0}
.faq-item[open] summary::after{content:'–'}
.faq-item p{font-size:0.925rem;color:var(--slate);line-height:1.7;padding:0 0 1rem}
.support-cta{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:var(--blush);border-radius:var(--r3);padding:1.75rem 2rem;margin-top:1rem;flex-wrap:wrap}
.support-cta h3{font-family:var(--ff-d);font-size:1.2rem;margin-bottom:.2rem}

/* FOOTER */
.foot{background:var(--ink);color:rgba(255,255,255,.55);padding:3.5rem 0 0}
/* Four EQUAL nav-column tracks. This was 1.6fr 1fr 1fr 1fr sized for a brand block that sat in
   the wide first track — but four nav columns plus the brand block is five items in a four-track
   grid, so the fifth always wraps alone onto row two, landing in whichever track is first. That
   used to put the wide track under a short 3-link list and leave the three real nav columns
   uneven and cramped; reordering pages.js's footer() so the brand block is what wraps now needs
   the tracks to be even, or the mismatch just moves to a different column. */
.foot-in{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding-bottom:2.5rem}
/* Whichever row the brand block lands on, it spans the full width rather than being squeezed
   into one nav-column's track — a logo + tagline reads as a footer band, not a fifth link list. */
.foot-brand{grid-column:1/-1}
@media(max-width:820px){.foot-in{grid-template-columns:1fr 1fr}}
.foot-logo{margin-bottom:.7rem}
.foot-brand p{font-size:0.9rem;line-height:1.6;max-width:300px;margin-bottom:.75rem}
.foot-mark{font-size:0.875rem;color:rgba(255,255,255,.52)}
.foot-col h4{font-size:0.875rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:.75rem}
.foot-col a{display:block;font-size:0.9rem;color:rgba(255,255,255,.6);padding:.22rem 0}.foot-col a:hover{color:var(--gold-lt)}
.foot-legal{border-top:1px solid rgba(255,255,255,.08);padding:1.25rem 2rem;font-size:0.875rem;color:rgba(255,255,255,.52);text-align:center;max-width:1140px}

/* ═══ PRINTABLE PROPOSAL ═══ */
.proposal-page{background:var(--mist);padding:2rem 0 4rem;min-height:100vh}
.prop-actions{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;max-width:820px;margin:0 auto 1.25rem;padding:0 1rem}
.prop-doc{background:#fff;max-width:820px;margin:0 auto;border:1px solid var(--beige);border-radius:var(--r3);padding:3.5rem 3.5rem 2.5rem;box-shadow:var(--sh)}
.prop-head{border-bottom:2px solid var(--navy);padding-bottom:1.5rem;margin-bottom:2rem}
/* Proposal banner. Kept in print: this document gets handed to a board, and a page of pure
   type reads as a memo. Constrained height so it never pushes section 1 onto page two. */
/* A partnership proposal is a document, so long prose runs are correct for it — but the
   numbers ARE the argument and were buried mid-paragraph. Promoted to a band, which also gives
   the document one break instead of seven identical sections. */
.prop-stat-band{margin:0}
.prop-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin:1.5rem 0 2rem;padding:1.5rem;background:var(--mist);border-radius:var(--r3)}
.prop-stat .ps-n{font-family:var(--ff-d);font-size:1.7rem;color:var(--navy);line-height:1}
.prop-stat .ps-l{font-size:.875rem;color:var(--slate);line-height:1.5;margin-top:.35rem}
.prop-stat .ps-s{font-family:var(--ff-m);font-size:.875rem;color:var(--lgray);margin-top:.35rem}
@media(max-width:640px){.prop-stats{grid-template-columns:1fr;gap:1rem}}
@media print{.prop-stats{background:#F4F6F9;break-inside:avoid}}
.prop-banner{margin:1.5rem 0 2rem;border-radius:var(--r3);overflow:hidden;aspect-ratio:16/7;max-height:260px}
.prop-banner img{width:100%;height:100%;object-fit:cover}
@media print{.prop-banner{max-height:150px;break-inside:avoid}}
.prop-logo{font-family:var(--ff-d);font-size:1.1rem;color:var(--navy)}.prop-logo em{color:var(--gold-ink);font-style:italic}
.prop-title{font-family:var(--ff-d);font-size:2rem;color:var(--navy);margin-top:.75rem}
.prop-sub{font-size:0.9rem;color:var(--slate);margin-top:.4rem}
.prop-sec{margin-bottom:1.75rem}
.prop-sec h2{font-family:var(--ff-d);font-size:1.2rem;color:var(--navy);margin-bottom:.6rem}
.prop-sec p{font-size:.9rem;color:var(--slate);line-height:1.7;margin-bottom:.6rem}
.prop-stats,.prop-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin:.5rem 0}
.prop-stats li,.prop-list li{font-size:.88rem;color:var(--slate);line-height:1.55;padding-left:1.25rem;position:relative}
.prop-stats li::before{content:'▪';position:absolute;left:0;color:var(--gold)}
.prop-list li::before{content:'→';position:absolute;left:0;color:var(--gold)}
.prop-tbl{width:100%;border-collapse:collapse;margin-top:.5rem}
.prop-tbl th{text-align:left;vertical-align:top;width:170px;padding:.7rem .75rem;font-size:0.925rem;color:var(--navy);border-bottom:1px solid var(--beige);font-weight:700}
.prop-tbl td{padding:.7rem .75rem;font-size:0.925rem;color:var(--slate);line-height:1.55;border-bottom:1px solid var(--beige)}
.prop-foot{border-top:1px solid var(--beige);margin-top:1.5rem;padding-top:1rem;font-size:0.875rem;color:var(--lgray);line-height:1.5}
.cite{font-size:.875rem;color:var(--lgray);font-style:italic}
@media print{
  body{background:#fff}.nav,.prop-actions,#toast-host{display:none!important}
  .proposal-page{padding:0;background:#fff}.prop-doc{box-shadow:none;border:none;max-width:100%;padding:1rem 0}
}

/* ═══ ICONS (Lucide, inlined) ═══ */
.svgic{width:1em;height:1em;display:inline-block;vertical-align:-0.14em;flex-shrink:0;stroke-width:2}
/* feature/accent icons take the gold accent unless the container sets its own colour */
.pc-icon .svgic,.fci .svgic,.cc-ic .svgic,.reason-card .ic .svgic{color:var(--gold)}
.pc-icon,.fci,.cc-ic{line-height:1}
/* cert tier medals — distinct metals */
.ct-icon .svgic{color:var(--gold)}
.ct-icon .svgic.tier-bronze{color:#b0764a}
.ct-icon .svgic.tier-silver{color:#9aa3af}
.ct-icon .svgic.tier-gold{color:var(--gold)}
.ct-icon .svgic.tier-platinum{color:#7c8ac2}
/* dashboard sidebar + step cards + AC logo inherit their container colour */
.dni .svgic{width:1.05em;height:1.05em}
.ppc-ic .svgic{color:var(--navy)}
.jac-logo .svgic{color:#fff}
.dc-role .svgic{color:var(--gold);vertical-align:-0.16em}
.btn .svgic{width:1.05em;height:1.05em}

/* ═══ TOAST ═══ */
#toast-host{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:900;display:flex;flex-direction:column;gap:.5rem;align-items:center}
.toast{background:var(--navy);color:#fff;padding:.7rem 1.25rem;border-radius:var(--r5);font-size:0.9rem;box-shadow:var(--sh2);opacity:0;transform:translateY(10px);transition:all .25s}
.toast.show{opacity:1;transform:none}
.toast-warn{background:var(--berry)}.toast-info{background:var(--navy)}

/* ── Assessment Centre — structured module UI ─────────────────────── */
.ac-day-banner{background:var(--navy);color:var(--white);border-radius:10px;padding:.6rem 1rem;
  font-size:0.925rem;font-weight:600;margin:1rem 0}
.act-framework{background:var(--mist);border-left:3px solid var(--gold);border-radius:6px;
  padding:.55rem .8rem;font-size:0.9rem;color:var(--slate);margin:.5rem 0 .25rem}
.acq{border-top:1px solid var(--blush);padding:.9rem 0}
.acq:first-of-type{border-top:none}
.acq-q{font-weight:600;color:var(--ink);margin-bottom:.5rem;line-height:1.4}
.acq-n{display:inline-block;font-size:0.875rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-right:.4rem}
.acq-mins{font-size:0.875rem;color:var(--lgray);font-weight:500;margin-left:.4rem}
.acq-guide{background:var(--rose);border-radius:6px;padding:.5rem .75rem;font-size:0.9rem;
  color:var(--berry);margin-bottom:.6rem}
.acq-field{margin:.5rem 0}
.acq-field label{display:block;font-size:0.875rem;font-weight:600;color:var(--slate);margin-bottom:.25rem}
.acq-ro{font-size:0.925rem;color:var(--slate);margin:.2rem 0}
.acq-ro-l{font-weight:600;color:var(--ink)}
.acq-done .acq-q{color:var(--slate)}
.act-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--blush)}
.act-progress{font-size:0.9rem;color:var(--lgray);display:flex;gap:.6rem;align-items:center}
.ac-saved{color:var(--green);font-weight:600}
.act-locked{opacity:.72}
.intake-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 0;border-top:1px solid var(--blush)}
.intake-row:first-child{border-top:none}

/* ── Report toolbar + print-to-PDF ────────────────────────────────── */
.rpt-toolbar{display:flex;justify-content:space-between;gap:.75rem;max-width:900px;
  margin:0 auto 1rem;padding:0 1rem}
/* Said before the click, not only in a toast the print dialog then covers. */
.rpt-pdf-hint{max-width:900px;margin:-.4rem auto 1.25rem;padding:0 1rem;text-align:right;
  font-size:0.8rem;color:var(--slate)}
.rpt-pdf-hint strong{color:var(--navy)}
@media(max-width:560px){.rpt-pdf-hint{text-align:left}}
@media print{
  .no-print,.nav,.toast-host,.rpt-toolbar{display:none !important}
  .rpt-page{margin:0}
  body{background:#fff}

  /* The single most important line in this block.
     Chrome's print dialog has a "Background graphics" checkbox and it is OFF by default. With
     it off, .rpt-cover loses its navy, .arch-hero loses its panel and .ac-cta loses its
     gradient — while the white text sitting on all three prints white, on white paper. The
     cover title, the archetype name and the whole call to action came out as pale ghosts.
     That is what Christine was looking at when she said the PDF looked bad, and no amount of
     resolution would have touched it.
     print-color-adjust:exact tells the browser these colours carry meaning and must be
     printed, checkbox or no checkbox. Scoped to the report so it cannot change how any other
     page prints. */
  .rpt-page,.rpt-page *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Dead controls have no business in a document. "Back to Home" was getting a page of its own. */
  .ac-cta-btns,.ask-fab{display:none !important}
  /* Each CARD stays whole. `.rpt-two` used to be in this list too, and it is a two-column grid:
     asking a pair of cards to never split means the pair moves as a unit, so whenever the
     second one did not fit, both jumped to the next page and left the previous one half empty.
     Measured on a real printToPDF, not guessed — 11 pages with two of them all but blank. */
  .rpt-sec,.arch-hero,.cert-tier,.act-card,.rev-cell,.plan-ph,.str-item,.growth-item{break-inside:avoid}
  /* The appendix cards are taller than a page (Appendix B is eight dimensions), so they must be
     allowed to split — but only between rows, never through one. */
  .gl-sec{break-inside:auto}
  .gl-row,.gl-level,.gl-tier,.gl-bench,.gl-how{break-inside:avoid}
  /* A dimension block (`.gl-dim`) is about half a page, so keeping it whole put one dimension per
     page — 26 pages, most of them half blank. It may split between its definition, level cards
     and competency chips; the cards themselves and the heading stay whole. */
  .gl-dim{break-inside:auto}
  .gl-dim-hd,.gl-def{break-after:avoid}
  .gl-levels{break-inside:avoid}
  /* The printable width is under the 820px breakpoint, so the three level cards were stacking
     into one column and each dimension ran a full page. Side by side they read fine on A4. */
  .gl-levels{grid-template-columns:repeat(3,1fr)}
  /* A heading alone at the bottom of a page is the other half of the same problem: PART TWO
     had a page to itself, with the thing it introduces overleaf. */
  .part-hdr,.rs-hdr,.rpt-sec h3,.rs-l{break-after:avoid}
  .part-hdr{break-before:auto}
  @page{margin:14mm}
}

/* ── Sponsor SDG cards ────────────────────────────────────────────── */
.sdg-card{display:flex;gap:.85rem;align-items:center;padding:.7rem 0;border-top:1px solid var(--blush)}
.sdg-card:first-child{border-top:none}
.sdg-badge{flex:0 0 auto;width:44px;height:44px;border-radius:9px;background:var(--berry);
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.sdg-badge span{font-size:0.875rem;letter-spacing:.08em;opacity:.85}
.sdg-badge strong{font-size:1.05rem;font-weight:700}

/* ── Public login lead + nav sign-in ──────────────────────────────── */
.login-lead{margin:0 0 1.25rem}
.login-lead h2{font-family:var(--ff-d);color:#fff;font-size:1.5rem;margin:0 0 .4rem}
.login-lead p{color:var(--beige);font-size:.9rem;line-height:1.5;margin:0}
.nav-signin{cursor:pointer;font-weight:600;align-self:center}

/* ═══════════════════════════════════════════════════════════════════
   BOOKING FLOW · GOOGLE SIGN-IN · CUSTOMER SERVICE            2026-08-21
   The assessment now reads as a ticket booking, sign-in is Google's own
   button, and every page carries one way to reach a person.
   Type floor stays 0.875rem (14px) — see _shots/density.mjs.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Google button ────────────────────────────────────────────────────
   Google's mark on white with a grey hairline is the shape people have
   been trained to trust. Restyling it in brand navy and gold would have
   looked more like RISE and less like a sign-in a stranger recognises,
   which is the exact problem this replaces. */
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;width:100%;
  background:#fff;color:#1F1F1F;border:1px solid #DADCE0;border-radius:var(--r5);
  padding:.85rem 1.5rem;font-size:.95rem;font-weight:600;transition:box-shadow .18s,background .18s}
.gbtn:hover{background:#F8F9FA;box-shadow:0 1px 3px rgba(60,64,67,.3)}
.gbtn:active{background:#F1F3F4}
.gbtn:focus-visible{outline:3px solid var(--teal-lt);outline-offset:2px}
.gbtn[disabled]{opacity:.6;cursor:default}
.gbtn-ic{display:flex;align-items:center}
.gbtn.is-busy .gbtn-t::after{content:"…"}

/* ── Sign-in page ─────────────────────────────────────────────────── */
.signin-wrap{min-height:100vh;background:linear-gradient(170deg,var(--navy) 0%,#04143A 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1.25rem}
.signin-card{background:#fff;border-radius:var(--r4);padding:2.75rem 2.5rem;max-width:460px;width:100%;
  box-shadow:var(--sh2);text-align:center}
.signin-brand{display:flex;justify-content:center;margin-bottom:1.5rem}
.signin-h{font-family:var(--ff-d);font-size:1.75rem;color:var(--navy);line-height:1.2;margin-bottom:.5rem}
.signin-sub{color:var(--slate);font-size:.95rem;line-height:1.6;margin-bottom:1.75rem}
.signin-note{color:var(--lgray);font-size:0.875rem;line-height:1.5;margin-top:.85rem}
.signin-points{display:grid;gap:.85rem;margin:1.75rem 0 .5rem;text-align:left;
  border-top:1px solid var(--mist);padding-top:1.5rem}
.sp{display:flex;gap:.75rem;align-items:flex-start}
.sp-i{flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;background:var(--blush);color:var(--teal-dp);
  display:flex;align-items:center;justify-content:center}
.sp-i .svgic{width:1rem;height:1rem}
.sp b{display:block;font-size:.92rem;color:var(--navy)}
.sp span{display:block;font-size:0.875rem;color:var(--slate);line-height:1.45}
.signin-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-top:1.5rem;font-size:0.875rem;color:var(--slate)}
.signin-foot span{cursor:pointer}
.signin-foot span:hover{color:var(--navy);text-decoration:underline}
.signin-staff{color:var(--lgray)}
.staff-form{margin-top:1.25rem;border-top:1px solid var(--mist);padding-top:1.25rem;text-align:left}
.signin-legal{color:var(--beige);font-size:0.875rem;margin-top:1.5rem;text-align:center}
.signin-legal span{color:var(--gold-lt);cursor:pointer;text-decoration:underline}
@media(max-width:480px){.signin-card{padding:2rem 1.35rem}}

/* ── Stepper ──────────────────────────────────────────────────────── */
/* One column per step, counted from the steps rather than written here. This said
   repeat(4,1fr) and the flow gained a fifth on 2026-08-23 — the extra step wrapped onto a
   line of its own, which reads as "and one more thing" rather than as one journey. */
.stepper{display:grid;grid-template-columns:repeat(var(--steps,5),1fr);gap:.5rem;list-style:none;margin:1.25rem 0 2rem}
.step{display:flex;gap:.6rem;align-items:center;padding:.7rem .8rem;border-radius:var(--r2);
  background:var(--mist);border:1.5px solid transparent;min-width:0}
.step.cur{background:#fff;border-color:var(--gold);box-shadow:var(--sh)}
.step.done{background:var(--blush)}
.step-n{flex:0 0 auto;width:1.75rem;height:1.75rem;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:0.875rem;font-weight:700;background:var(--beige);color:var(--navy)}
.step.cur .step-n{background:var(--gold);color:var(--ink)}
.step.done .step-n{background:var(--teal-dp);color:#fff}
.step-b{min-width:0}
/* The label wraps for the same reason the description below it does. With five steps the
   column is ~104px, and nowrap+ellipsis turned "Your details" into "Your de…" and
   "Assessment" into "Assess…" — a truncated word in a five-word stepper reads as broken,
   not as brief. Two short lines are fine; a clipped one is not. */
.step-b b{display:block;font-size:0.875rem;color:var(--navy);line-height:1.25}
/* Wraps rather than truncates. "Google account" was rendering as "Google acco…" inside a cell with
   room to spare, and an ellipsis on a four-word stepper reads as a broken layout, not as brevity. */
.step-b i{display:block;font-style:normal;font-size:0.875rem;color:var(--slate);line-height:1.25}
/* Under 760px four labelled cells stop fitting; the numbers still carry the position, so the
   descriptions go and the row stays one line rather than wrapping into a stack of four. */
@media(max-width:760px){.step-b i{display:none}}
@media(max-width:560px){.stepper{gap:.35rem;grid-template-columns:repeat(3,1fr)}.step{flex-direction:column;text-align:center;padding:.6rem .35rem;gap:.35rem}
  .step-b b{font-size:0.875rem;white-space:normal;line-height:1.2}}

/* ── Event / booking page ─────────────────────────────────────────── */
.ev-hero{position:relative;min-height:340px;display:flex;align-items:flex-end;background:var(--navy);overflow:hidden}
.ev-hero .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.ev-hero-in{position:relative;max-width:1140px;margin:0 auto;padding:3.5rem 2rem 3rem;width:100%}
.ev-hero-in .eyebrow{color:var(--gold-lt)}
.ev-hero h1{font-family:var(--ff-d);color:#fff;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.1;margin:.5rem 0 .85rem;max-width:18ch}
.ev-hero p{color:var(--blush);font-size:1rem;line-height:1.65;max-width:60ch}
.ev-sec{padding-top:2.5rem}
.ev-grid{display:grid;grid-template-columns:1fr 360px;gap:3rem;align-items:start}
.sec-h.left{text-align:left}
.ev-h3{font-family:var(--ff-d);font-size:1.3rem;color:var(--navy);margin:2rem 0 .85rem}
/* Fixed 2x2. auto-fit fitted three across at desktop width and orphaned the fourth card
   on a row of its own, which is what it looked like. */
.ev-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1.25rem}
.ev-fact{background:#fff;border:1px solid var(--beige);border-radius:var(--r2);padding:1rem 1.1rem}
.ef-i{display:flex;color:var(--teal-dp);margin-bottom:.5rem}
.ef-i .svgic{width:1.15rem;height:1.15rem}
.ef-l{display:block;font-size:0.875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);font-weight:600}
.ef-v{display:block;font-size:.98rem;font-weight:600;color:var(--navy);margin-top:.15rem}
.ev-list{list-style:none;display:grid;gap:.6rem}
.ev-list li{display:grid;gap:.1rem;padding:.75rem 0 .75rem 1.6rem;border-bottom:1px solid var(--mist);position:relative}
.ev-list li::before{content:"";position:absolute;left:.35rem;top:1.2rem;width:.45rem;height:.45rem;border-radius:50%;background:var(--gold)}
.ev-list b{font-size:.95rem;color:var(--navy)}
.ev-list span{font-size:0.9rem;color:var(--slate)}
.ev-know{display:grid;gap:.75rem}
.ev-know p{background:var(--mist);border-left:3px solid var(--teal);border-radius:0 var(--r) var(--r) 0;
  padding:.85rem 1.1rem;font-size:.92rem;color:var(--slate);line-height:1.6}
.ev-know b{color:var(--navy)}

/* The ticket. A real stub shape — perforation and all — because the whole point of the
   metaphor is that someone recognises what they are looking at before they read it. */
/* top:1.5rem measured 24px from the VIEWPORT, not from under the nav, so 40px of the
   card — exactly the logo strip — sat behind the nav once it stuck. */
.ev-ticket{position:sticky;top:var(--stick)}

.tk{background:#fff;border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh2);border:1px solid var(--beige)}
.tk-top{background:var(--navy);padding:1.5rem 1.5rem 1.35rem;color:#fff}
.tk-brand{margin-bottom:1rem}
.tk-name{font-family:var(--ff-d);font-size:1.25rem;line-height:1.2}
.tk-meta{font-size:0.875rem;color:var(--blush);margin-top:.3rem}
.tk-perf{display:flex;justify-content:space-between;background:var(--navy);padding:0 .5rem}
.tk-perf span{width:10px;height:10px;border-radius:50%;background:var(--cream);transform:translateY(-5px)}
.tk-body{padding:1.5rem}
.tk-price{text-align:center;padding-bottom:1.1rem;border-bottom:1px dashed var(--beige)}
.tk-amt{display:block;font-family:var(--ff-d);font-size:2.2rem;color:var(--navy);line-height:1}
.tk-sub{display:block;font-size:0.875rem;color:var(--slate);margin-top:.25rem}
.tk-rows{display:grid;gap:.55rem;margin:1.1rem 0 1.35rem}
.tk-rows>div{display:flex;justify-content:space-between;gap:1rem;font-size:0.9rem}
.tk-rows dt{color:var(--slate);flex:0 0 auto}
/* Right-aligned and allowed to wrap: on a 390px phone the ticket line came out as
   "Career Blueprin", clipped by the row rather than by any rule that wanted it short. */
.tk-rows dd{color:var(--navy);font-weight:600;text-align:right;min-width:0}
.tk-who{font-size:0.875rem;color:var(--slate);text-align:center;margin:.75rem 0}
.tk-who b{color:var(--navy);word-break:break-all}
.tk-body .btn{width:100%}
.tk-body .btn+.btn,.tk-body .btn-wa{margin-top:.6rem}
.tk-help{font-size:0.875rem;color:var(--slate);text-align:center;margin-top:1rem;line-height:1.5}
.tk-help span{color:var(--teal-ink);cursor:pointer;text-decoration:underline}
/* The card is 634px tall, so on a laptop it misses fitting under the nav by about 20px,
   and dropping it to position:static to avoid that just let it scroll under the nav
   instead — the same cropped logo, by a different route. Trimming padding and the price
   size buys ~50px, which is enough to keep it stuck on every laptop height. Only below
   660px, where no amount of trimming fits a card this tall, does it scroll normally.
   This block has to sit AFTER the base .tk-* rules: a media query adds no specificity,
   so higher up the file the plain rules simply won and nothing shrank. */
@media(max-height:860px){
  .tk-top{padding:1.15rem 1.5rem 1rem}
  .tk-brand{margin-bottom:.7rem}
  .tk-body{padding:1.15rem 1.5rem 1.25rem}
  .tk-price{padding-bottom:.85rem}
  .tk-amt{font-size:1.8rem}
  .tk-rows{gap:.45rem;margin:.85rem 0 1rem}
  .tk-who{margin:.55rem 0}
  .tk-help{margin-top:.7rem}
}
@media(max-height:660px){.ev-ticket{position:static}}
@media(max-width:960px){.ev-grid{grid-template-columns:1fr;gap:2rem}
  .ev-ticket{position:static;order:-1;max-width:420px}}
@media(max-width:420px){.ev-facts{grid-template-columns:1fr}}

/* ── Assessment shell ─────────────────────────────────────────────── */
.assess-steps{max-width:900px;margin:0 auto;padding:1.5rem 1.5rem 0}
.at-step{font-size:0.9rem;font-weight:600;color:var(--gold-lt);letter-spacing:.04em}
.step-card{margin-bottom:1.25rem}
.fs-h{font-family:var(--ff-d);font-size:1.2rem;color:var(--navy);margin-bottom:.25rem}
.fs-sub{font-size:0.9rem;color:var(--slate);margin-bottom:1.1rem}
.ff-sm{max-width:140px}
.ff label em{color:var(--berry);font-style:normal;margin-left:.15rem}
.fe{display:block;min-height:0;font-size:0.875rem;color:var(--berry);margin-top:.3rem}
.ff.bad input,.ff.bad select{border-color:var(--berry);background:var(--rose)}
.cond{border-top:1px dashed var(--beige);margin-top:1.1rem;padding-top:1.1rem}
.seg-pick{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;max-width:420px}
.segp{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1rem;
  border:1.5px solid var(--beige);border-radius:var(--r2);background:#fff;color:var(--navy);
  font-size:.92rem;font-weight:600;transition:all .16s}
.segp:hover{border-color:var(--slate)}
.segp.sel{border-color:var(--gold);background:#FFFBF0;box-shadow:0 0 0 3px rgba(210,154,14,.15)}
.segp .svgic{width:1.05rem;height:1.05rem;color:var(--teal-dp)}
.q-prog{height:4px;border-radius:2px;background:var(--mist);margin-bottom:1.5rem;overflow:hidden}
/* The draft receipt. "Saved" is the only proof the answers are being kept, so it flashes on
   each one and then stands down; the count and the Start over escape stay put, because a row
   that appears and disappears under the progress bar would shift the questions on every tap. */
.d-saved-row{display:flex;align-items:center;gap:.6rem;margin:-.9rem 0 1.4rem;font-size:0.875rem;color:var(--lgray);flex-wrap:wrap}
.d-saved{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;color:var(--green);
  opacity:0;transform:translateY(2px);transition:opacity .2s,transform .2s}
.d-saved.on{opacity:1;transform:none}
.d-saved::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--green)}
.d-saved-note{flex:1 1 auto;min-width:0}
.d-restart{color:var(--teal-ink);cursor:pointer;text-decoration:underline;flex:0 0 auto}
@media(max-width:560px){.d-saved-row{gap:.4rem;font-size:.8rem}}
.q-prog-f{height:100%;background:var(--gold);border-radius:2px;transition:width .3s}

/* ── Report gate ──────────────────────────────────────────────────── */
.gate-card{background:#fff;border:1px solid var(--beige);border-radius:var(--r3);padding:2.75rem 2.25rem;
  text-align:center;max-width:480px;margin:3rem auto;box-shadow:var(--sh)}
.gate-ic{width:3.25rem;height:3.25rem;border-radius:50%;background:var(--blush);color:var(--teal-dp);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.1rem}
.gate-ic .svgic{width:1.5rem;height:1.5rem}
.gate-card h2{font-family:var(--ff-d);font-size:1.5rem;color:var(--navy);margin-bottom:.5rem;line-height:1.2}
.gate-card>p{color:var(--slate);font-size:.95rem;line-height:1.6;margin-bottom:1.5rem}
.gate-alt{font-size:0.9rem;color:var(--slate);margin-top:1.35rem;border-top:1px solid var(--mist);padding-top:1.1rem}
.gate-alt span{color:var(--teal-ink);cursor:pointer;font-weight:600}

/* ── Customer service ─────────────────────────────────────────────── */
.btn-wa{background:#25D366;color:#0A2E17;border:none;font-weight:600}
.btn-wa:hover{background:#1EBE5A}
.btn-o.btn-wa{background:transparent;color:var(--navy);border:1.5px solid var(--beige)}
.btn-o.btn-wa:hover{border-color:#25D366;background:#F0FFF6}
.btn-w.btn-wa{background:#25D366;color:#0A2E17}
.wa-ic{width:1.05rem;height:1.05rem}
.cc-lead{border-color:var(--teal)!important}
.cc-lead .btn{width:100%;margin-top:.75rem}

/* Floating helper. Sits clear of the report toolbar, and is hidden when printing along
   with the rest of the chrome. */
.ask-fab{position:fixed;right:1.25rem;bottom:1.25rem;z-index:60;display:inline-flex;align-items:center;
  gap:.55rem;padding:.8rem 1.25rem;border-radius:var(--r5);background:var(--navy);color:#fff;
  font-size:0.9rem;font-weight:600;box-shadow:var(--sh2);transition:transform .18s,background .18s}
.ask-fab:hover{transform:translateY(-2px)}
.ask-fab.is-wa{background:#25D366;color:#0A2E17}
.ask-fab.is-wa:hover{background:#1EBE5A}
.ask-fab .svgic{width:1.15rem;height:1.15rem}
/* On a phone the label costs more than it gives, and a wide pill covers the Next button of
   the assessment. Icon only, tucked above the thumb line. */
@media(max-width:560px){.ask-fab{padding:.85rem;right:.9rem;bottom:.9rem}.ask-fab .fab-t{display:none}}
@media print{.ask-fab{display:none!important}}

.cta-band-btns{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}

/* The header CTA is .btn-sm, which computes to 33px tall — under the 40px a thumb needs, and
   it is the one control on a phone that every page shows. Padding is left alone so the desktop
   header keeps its proportions; only the touch floor is raised, and only where there is touch.
   Found by _shots/journey.mjs at 390px, not by eye. */
@media(max-width:700px){
  .btn-sm{min-height:40px}
  .nav-cta{min-height:40px}
}

/* The sign-in backdrop. A real photograph rather than a flat gradient, held well behind the
   card so it never competes with the one control on the page. */
.signin-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.20;z-index:0}
.signin-wrap{position:relative}
.signin-card,.signin-legal{position:relative;z-index:1}
.ev-ed{margin:2.25rem 0 0}

/* ── Choosing a sitting, and the state of your booking ─────────────────
   Added 2026-08-23 with the real booking flow. The picker is a <label> wrapping a real radio
   rather than a div with a click handler: keyboard, screen reader and browser-native "one of
   these" behaviour all come free, and a disabled input is what makes a full sitting genuinely
   unselectable instead of merely styled that way. */
.ev-picks{display:grid;gap:.7rem;margin-top:.35rem}
.ev-pick{display:block;position:relative;border:1.5px solid var(--beige);border-radius:var(--r2);
  background:#fff;padding:1rem 1.15rem 1rem 2.85rem;cursor:pointer;transition:border-color .16s,box-shadow .16s}
.ev-pick:hover{border-color:var(--slate)}
.ev-pick.sel{border-color:var(--gold);box-shadow:0 0 0 3px rgba(210,154,14,.15);background:#FFFDF7}
.ev-pick input{position:absolute;left:1.05rem;top:1.2rem;width:1.05rem;height:1.05rem;accent-color:var(--gold)}
.ev-pick.is-full{opacity:.55;cursor:not-allowed;background:var(--mist)}
.evp-body{display:grid;gap:.28rem}
.evp-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.evp-title{font-weight:600;color:var(--navy);font-size:1rem;line-height:1.3}
.evp-seats{flex:0 0 auto;font-size:0.875rem;font-weight:600;color:var(--teal-dp)}
.evp-seats.full{color:var(--berry)}
.evp-when{font-size:0.9rem;color:var(--slate)}
.evp-sum{font-size:0.9rem;color:var(--slate);line-height:1.55}
.evp-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.15rem}
.evp-tag{font-size:0.875rem;font-weight:600;letter-spacing:.02em;padding:.18rem .55rem;border-radius:var(--r5);
  background:var(--mist);color:var(--slate)}
.evp-tag.ok{background:#EAF6EF;color:#1B6B41}
.evp-tag.warn{background:#FFF4E0;color:#8A5B00}
.ev-none{background:var(--mist);border-radius:var(--r2);padding:1.25rem;color:var(--slate);
  font-size:.95rem;display:grid;gap:.85rem;justify-items:start}
.ev-held{display:grid;gap:.2rem;margin-top:1rem;padding:.9rem 1.15rem;border-radius:var(--r2);
  border-left:3px solid var(--teal);background:var(--mist);font-size:.92rem;color:var(--slate)}
.ev-held b{color:var(--navy)}
.tk-rev{font-size:0.875rem;color:var(--slate);line-height:1.5;text-align:center;margin-bottom:.85rem}
.tk-rev:empty{display:none}
.lnk{color:var(--teal-ink);cursor:pointer;font-weight:600}

/* Consent and other genuinely-optional checkboxes. The label wraps the box so the text is a
   tap target too — on a phone the box alone is under the 40px thumb floor. */
.cbx{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem 0;cursor:pointer;
  font-size:0.9rem;color:var(--slate);line-height:1.55}
.cbx input{margin-top:.2rem;width:1.05rem;height:1.05rem;flex:0 0 auto;accent-color:var(--gold)}
.cbx b{color:var(--navy)}
.opt{font-weight:400;color:var(--slate)}

/* Booking status. One pill vocabulary shared by the profile page, the reserve step and the
   admin queue, so "pending" cannot look like two different things to the two people reading it. */
.bk-pill{display:inline-block;font-size:0.875rem;font-weight:600;padding:.2rem .6rem;border-radius:var(--r5);
  background:var(--mist);color:var(--slate);white-space:nowrap}
.bk-pill-pending{background:#FFF4E0;color:#8A5B00}
.bk-pill-confirmed{background:#EAF6EF;color:#1B6B41}
.bk-pill-rejected{background:var(--rose);color:var(--berry)}
.bk-pill-cancelled{background:var(--mist);color:var(--slate)}
.bk-list{display:grid;gap:.75rem}
.bk-card,.bk-status{border:1px solid var(--beige);border-radius:var(--r2);padding:1rem 1.15rem;background:#fff}
.bk-card.bk-pending,.bk-status.bk-pending{border-left:3px solid #D89A20}
.bk-card.bk-confirmed,.bk-status.bk-confirmed{border-left:3px solid #2E8B57}
.bk-card.bk-rejected,.bk-status.bk-rejected{border-left:3px solid var(--berry)}
.bk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.bk-title{font-weight:600;color:var(--navy)}
.bk-when{font-size:0.9rem;color:var(--slate);margin-top:.15rem}
.bk-meta{font-size:0.875rem;color:var(--slate);margin-top:.5rem}
.bk-note{margin-top:.7rem;padding:.7rem .9rem;background:var(--mist);border-radius:var(--r);
  font-size:0.9rem;color:var(--slate);line-height:1.55}
.bk-note b{color:var(--navy)}
.bk-acts{margin-top:.8rem}
.bk-blocked{margin-bottom:1rem;padding:.85rem 1.1rem;border-radius:var(--r2);
  background:#FFF4E0;color:#8A5B00;font-size:0.92rem;line-height:1.55}

/* ── Your profile ─────────────────────────────────────────────────────
   The page that did not exist until someone asked why they could not edit what they had typed. */
.pf-wrap{display:grid;gap:1.25rem}
.pf-head{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.pf-id{display:flex;gap:1rem;align-items:center}
.pf-av{width:3.5rem;height:3.5rem;border-radius:50%;object-fit:cover;border:2px solid var(--beige);flex:0 0 auto}
.pf-av-x{display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;
  font-family:var(--ff-d);font-size:1.5rem}
.pf-name{font-family:var(--ff-d);font-size:1.75rem;color:var(--navy);line-height:1.15;margin:.1rem 0}
.pf-sub{font-size:0.9rem;color:var(--slate);word-break:break-word}
.pf-acts{display:flex;gap:.6rem;flex-wrap:wrap}
.pf-card .card-body{padding:1.5rem}
.pf-save{display:flex;justify-content:flex-end;margin-top:.5rem}
@media(max-width:600px){.pf-head{align-items:flex-start}.pf-acts .btn{flex:1 1 auto}}

/* ── Admin: the review queue and the sittings editor ──────────────────── */
.stat-c.stat-alert{border-color:var(--gold);background:#FFFBF0}
.bk-filters{display:flex;flex-wrap:wrap;gap:.45rem;margin:.25rem 0 1rem}
.bk-filters .chip{font-weight:600}
.bkr td{vertical-align:top}
.bkr-sub{font-size:0.875rem;color:var(--slate);margin-top:.2rem;line-height:1.4}
.bkr-acts{white-space:nowrap}
.bkr-acts .btn{margin:0 .2rem .3rem 0}
.bkr-pending{background:#FFFDF7}
.bkr-rejected{opacity:.72}
.ev-row{border:1px solid var(--beige);border-radius:var(--r2);margin-bottom:.6rem;background:#fff}
.ev-row>summary{list-style:none;cursor:pointer;padding:.9rem 1.15rem;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:.5rem 1rem}
.ev-row>summary::-webkit-details-marker{display:none}
.evr-title{font-weight:600;color:var(--navy);flex:1 1 auto}
.evr-when{font-size:0.875rem;color:var(--slate)}
.evr-tags{display:flex;gap:.35rem;flex-wrap:wrap}
.ev-row[open]>summary{border-bottom:1px solid var(--mist)}
.ev-form{padding:1.15rem}
.ev-new>summary .evr-title{color:var(--teal-ink)}

/* ── Prerequisites + mail state in the panel ──────────────────────────── */
.ev-mail-note{margin-top:.5rem;font-size:0.875rem;color:var(--slate);line-height:1.55}
.ev-mail-note b{color:var(--berry)}
.bkr-sub.ok{color:#1B6B41}
.bkr-sub.bad{color:var(--berry)}
textarea.f-prereq{min-height:9rem;font-family:inherit}