/* -- Reset ----------------------------------------------------------------- */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

  /* -- Design Tokens --------------------------------------------------------- */
  :root{
    --bg:#f8f5ef;
    --bg-alt:#f2ece0;
    --surface:#ffffff;
    --primary:#b8922a;
    --primary-dark:#9a7820;
    --accent:#d4af37;
    --ink:#0d1a2d;
    --ink-mid:#2d3f52;
    --ink-muted:#5a6e83;
    --ink-faint:#8a9ab5;
    --border:rgba(13,26,45,0.08);
    --border-mid:rgba(13,26,45,0.12);
    --font-head:'Playfair Display',Georgia,serif;
    --font-body:'EB Garamond',Georgia,serif;
    --font-mono:'IBM Plex Mono',monospace;
    --btn-radius:2px;
    --card-radius:2px;
    --nav-h:64px;
  }

  /* -- Base ------------------------------------------------------------------ */
  body{
    font-family:var(--font-body);
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-size:17px;
    line-height:1.75;
    padding-top:var(--nav-h);
    overflow-x:hidden;
  }

  a{color:var(--primary);text-decoration:none;transition:color 0.15s}
  a:hover{color:var(--primary-dark);text-decoration:underline}

  /* -- Accessibility --------------------------------------------------------- */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
  :focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px}

  /* -- Navigation ----------------------------------------------------------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    height:var(--nav-h);
    background:rgba(248,245,239,0.95);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
    transition:box-shadow 0.25s,border-color 0.25s;
  }
  nav.nav-scrolled{
    box-shadow:0 2px 20px rgba(13,26,45,0.07);
    border-bottom-color:var(--border-mid);
  }
  .nav-inner{
    max-width:1200px;margin:0 auto;padding:0 32px;
    height:100%;display:flex;align-items:center;justify-content:space-between;
  }
  .logo{
    text-decoration:none;display:inline-flex;align-items:center;gap:12px;
    flex-shrink:0;
  }
  .logo:hover{text-decoration:none}
  .logo-icon{flex-shrink:0}
  .logo-text{display:flex;flex-direction:column;gap:0;line-height:1}
  .logo-name{
    font-family:var(--font-mono);font-size:13.5px;font-weight:500;
    color:var(--ink);letter-spacing:-0.01em;line-height:1.2;
  }
  .logo-e{color:var(--primary)}
  .logo-pty-sub{
    font-family:var(--font-mono);font-size:8px;color:#526070;
    letter-spacing:0.14em;text-transform:uppercase;margin-top:2px;
  }
  .nav-links{
    display:flex;align-items:center;gap:24px;list-style:none;
  }
  .nav-links a{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.07em;
    text-transform:uppercase;color:var(--ink-muted);text-decoration:none;
    transition:color 0.15s;padding:4px 0;
  }
  .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);text-decoration:none}
  .nav-cta{
    color:var(--ink)!important;border-bottom:1.5px solid var(--primary);
    padding-bottom:2px!important;font-weight:500!important;
  }
  .nav-cta:hover{color:var(--primary)!important;text-decoration:none!important}

  /* -- Mobile Nav ------------------------------------------------------------ */
  .nav-hamburger{
    display:none;flex-direction:column;justify-content:center;gap:5px;
    background:none;border:none;cursor:pointer;padding:8px 4px;
    width:36px;height:36px;
  }
  .nav-hamburger span{
    display:block;width:22px;height:1.5px;background:var(--ink);
    border-radius:2px;transition:all 0.22s cubic-bezier(0.4,0,0.2,1);
    transform-origin:center;
  }
  .nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
  .nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  /* -- Main Layout ----------------------------------------------------------- */
  main{max-width:1200px;margin:0 auto;padding:64px 32px 96px}
  .pg-section:not(.pg-section--hero){max-width:820px}

  /* -- Headings -------------------------------------------------------------- */
  h1{
    font-family:var(--font-head);font-size:clamp(1.8rem,4vw,2.5rem);
    font-weight:700;line-height:1.2;color:var(--ink);margin-bottom:28px;
    letter-spacing:-0.025em;
  }
  h2{
    font-family:var(--font-head);font-size:clamp(1.25rem,2.5vw,1.6rem);
    font-weight:600;color:var(--ink);margin-bottom:14px;letter-spacing:-0.015em;
  }
  h3{
    font-family:var(--font-head);font-size:1.15rem;font-weight:600;
    color:var(--ink);margin-bottom:10px;
  }
  p{color:var(--ink-mid);line-height:1.85;margin-bottom:16px;font-size:1.0625rem}
  ul,ol{padding-left:20px;margin-bottom:16px}
  li{color:var(--ink-mid);line-height:1.8;margin-bottom:6px}

  /* -- Hero Section (institutional) ------------------------------------------- */
  .pg-section--hero{
    position:relative;background:var(--bg);
    width:100vw;left:50%;transform:translateX(-50%);
    padding-top:88px;padding-bottom:60px;
    padding-left:max(32px,calc((100vw - 1200px) / 2 + 32px));
    padding-right:max(32px,calc((100vw - 1200px) / 2 + 32px));
    box-sizing:border-box;margin-bottom:0;border:none;border-radius:0;
    text-align:left;color:var(--ink);overflow:hidden;
  }
  .pg-section--hero::before{
    content:'';position:absolute;inset:0;
    background-image:radial-gradient(circle at 1px 1px, rgba(13,26,45,0.06) 1px, transparent 0);
    background-size:24px 24px;
    -webkit-mask-image:linear-gradient(180deg, black 0%, transparent 72%);
    mask-image:linear-gradient(180deg, black 0%, transparent 72%);
    pointer-events:none;z-index:0;
  }
  .pg-section--hero::after{
    content:'';position:absolute;right:-120px;top:-160px;
    width:560px;height:560px;border-radius:50%;
    background:radial-gradient(circle, rgba(212,175,55,0.16) 0%, transparent 68%);
    pointer-events:none;z-index:0;
  }
  .pg-hero-eyebrow,.pg-hero-h1,.pg-hero-italic,.pg-hero-desc,
  .pg-hero-stats,.btn,.pg-hero-cta-row,.pg-verify{position:relative;z-index:1}

  .pg-hero-eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.18em;
    text-transform:uppercase;color:var(--ink-muted);margin-bottom:26px;
  }
  .pg-hero-eyebrow::before{content:'';width:28px;height:1px;background:var(--primary);flex-shrink:0}

  /* nameplate */
  .pg-hero-h1{
    font-family:var(--font-head);font-weight:600;
    font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:1.03;letter-spacing:-0.02em;
    color:var(--ink);margin:0 0 20px;
  }
  /* lede (was the giant italic - now a clean positioning line) */
  .pg-hero-italic{
    font-family:var(--font-body);font-weight:400;font-style:normal;
    font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.55;
    color:var(--ink-mid);max-width:600px;margin:0 0 34px;letter-spacing:0;
  }
  .pg-hero-italic em{font-style:normal;color:inherit}
  .pg-hero-desc{
    font-family:var(--font-mono);font-size:12px;line-height:1.8;
    color:var(--ink-muted);max-width:520px;margin:0 0 28px;
  }
  .pg-hero-cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:52px}

  /* -- Registry stat-bar (institutional centrepiece) ------------------------- */
  .pg-hero-stats{
    display:grid;grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--ink);border-bottom:1px solid var(--border);
    background:linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
    position:relative;z-index:1;margin-top:0;
  }
  .pg-hero-stat{padding:22px 28px 24px;border-left:1px solid var(--border);border-right:none}
  .pg-hero-stat:first-child{border-left:0;padding-left:0}
  .stat-label{
    font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
    letter-spacing:0.16em;color:var(--ink-faint);margin-bottom:9px;display:block;
  }
  .stat-value{font-size:17px;font-weight:500;color:var(--ink);line-height:1.25;letter-spacing:0}
  .stat-value--mono{font-family:var(--font-mono);font-size:15px;font-weight:500;letter-spacing:0.01em}
  .stat-value--countries{font-size:17px;font-weight:500}
  .stat-dot{
    display:inline-block;width:7px;height:7px;border-radius:50%;background:rgb(46,125,82);
    margin-right:8px;vertical-align:middle;box-shadow:0 0 0 3px rgba(46,125,82,0.15);
  }
  .stat-note{font-family:var(--font-mono);font-size:9px;color:var(--ink-faint);margin-top:5px;display:block}

  /* -- Verification chips ---------------------------------------------------- */
  .pg-verify{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:24px 0 0}
  .pg-verify-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint)}
  .pg-chip{
    display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12px;
    color:var(--ink-mid);text-decoration:none;padding:7px 14px;border:1px solid var(--border-mid);
    border-radius:2px;background:var(--surface);transition:all .18s;
  }
  .pg-chip:hover{border-color:var(--primary);color:var(--ink)}
  .pg-chip-tick{color:rgb(46,125,82);font-weight:600}

  @media(max-width:760px){
    .pg-hero-stats{grid-template-columns:repeat(2,1fr)}
    .pg-hero-stat{border-left:1px solid var(--border);padding:18px 18px 20px}
    .pg-hero-stat:nth-child(odd){border-left:0;padding-left:0}
  }

  /* -- Trust Strip ----------------------------------------------------------- */
  .trust-strip{
    display:flex;align-items:center;gap:0;
    border:1px solid var(--border-mid);border-radius:var(--card-radius);
    overflow:hidden;margin-bottom:40px;
    background:var(--surface);
    position:relative;z-index:1;
  }
  .trust-item{
    display:flex;align-items:center;gap:8px;
    padding:12px 20px;
    border-right:1px solid var(--border);
    flex-shrink:0;
  }
  .trust-item:last-child{border-right:none}
  .trust-dot{
    width:6px;height:6px;border-radius:50%;
    background:#22c55e;flex-shrink:0;
  }
  .trust-item-label{
    font-family:var(--font-mono);font-size:10px;
    letter-spacing:0.06em;color:var(--ink-muted);
  }
  .trust-item-val{
    font-family:var(--font-mono);font-size:10px;font-weight:500;
    color:var(--ink);
  }

  /* -- Verify Link ----------------------------------------------------------- */
  .verify-link{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;
    color:var(--primary);text-decoration:none;
    border-bottom:1px solid rgba(184,146,42,0.3);padding-bottom:1px;
    transition:color 0.15s,border-color 0.15s;
  }
  .verify-link:hover{color:var(--primary-dark);border-color:var(--primary-dark);text-decoration:none}

  /* -- Bird Content Sections ------------------------------------------------- */
  .pg-section{margin-bottom:56px;padding-bottom:56px;border-bottom:1px solid var(--border)}
  .pg-section:last-of-type{border-bottom:none}
  .subheading{font-size:1.05rem;color:var(--primary);font-weight:500;margin-bottom:16px}

  /* -- Entity / Identity Block ----------------------------------------------- */
  .entity-block{
    background:var(--surface);
    border:1px solid var(--border-mid);
    border-radius:var(--card-radius);
    padding:28px 32px;
    margin-bottom:32px;
  }
  .entity-block-row{
    display:flex;align-items:baseline;gap:12px;
    padding:8px 0;border-bottom:1px solid var(--border);
  }
  .entity-block-row:last-child{border-bottom:none}
  .entity-key{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--ink-faint);width:140px;flex-shrink:0;
  }
  .entity-val{font-size:14px;color:var(--ink);font-weight:500}
  .entity-val a{color:var(--primary)}

  /* -- Buttons --------------------------------------------------------------- */
  .btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:11px 24px;border-radius:var(--btn-radius);
    font-family:var(--font-body);font-size:0.9375rem;font-weight:600;
    text-decoration:none;cursor:pointer;border:1.5px solid transparent;
    transition:background 0.15s,color 0.15s,border-color 0.15s,box-shadow 0.15s;
    white-space:nowrap;
  }
  .pg-cta{
    background:var(--primary);color:#ffffff;
    border-color:var(--primary);
    box-shadow:0 1px 4px rgba(184,146,42,0.2);
  }
  .pg-cta:hover{
    background:var(--primary-dark);border-color:var(--primary-dark);
    color:#ffffff;text-decoration:none;
    box-shadow:0 3px 12px rgba(184,146,42,0.28);
  }
  .pg-cta-ghost{
    background:transparent;color:var(--ink-mid);
    border-color:var(--border-mid);
  }
  .pg-cta-ghost:hover{
    background:var(--bg-alt);color:var(--ink);
    border-color:rgba(13,26,45,0.2);text-decoration:none;
  }

  /* -- FAQ ------------------------------------------------------------------- */
  .pg-faq{margin:16px 0}
  .pg-faq dt{
    font-family:var(--font-head);font-weight:600;color:var(--ink);
    margin-top:28px;margin-bottom:8px;font-size:1.05rem;
  }
  .pg-faq dd{
    margin-left:0;color:var(--ink-mid);line-height:1.85;
    padding-left:18px;border-left:2px solid var(--primary);
  }

  /* -- Footer --------------------------------------------------------------- */
  footer{
    background:#0d1a2d;
    padding:64px 0 40px;
  }
  .footer-inner{max-width:1200px;margin:0 auto;padding:0 32px}

  /* Brand column */
  .footer-brand{margin-bottom:48px}
  .footer-logo-link{
    display:inline-flex;align-items:center;gap:10px;text-decoration:none;
    margin-bottom:20px;
  }
  .footer-logo-link:hover{text-decoration:none}
  .footer-logo-name{
    font-family:var(--font-mono);font-size:15px;font-weight:500;
    color:#ffffff;letter-spacing:-0.01em;
  }
  .footer-logo-e{color:#d4af37}
  .footer-desc{
    font-size:13px;color:rgba(255,255,255,0.55);line-height:1.75;
    max-width:380px;margin-bottom:20px;
  }
  .footer-badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .footer-abn{
    display:inline-flex;align-items:center;gap:8px;
    padding:5px 12px;border:1px solid rgba(255,255,255,0.1);
    border-radius:4px;
  }
  .footer-abn-label{
    font-size:8px;font-weight:700;letter-spacing:0.12em;
    text-transform:uppercase;color:rgba(255,255,255,0.55);
    font-family:var(--font-mono);
  }
  .footer-abn-val{font-size:12px;color:rgba(255,255,255,0.52);font-family:var(--font-mono)}
  .footer-asic-link{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;
    color:#d4af37;text-decoration:none;opacity:0.8;
    transition:opacity 0.15s;
  }
  .footer-asic-link:hover{opacity:1;text-decoration:none;color:#d4af37}

  /* 3-column link grid */
  .footer-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
    padding-bottom:40px;
    border-bottom:1px solid rgba(255,255,255,0.06);
    margin-bottom:28px;
  }
  .footer-col-h{
    font-size:9px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
    color:rgba(255,255,255,0.6);margin-bottom:18px;
    font-family:var(--font-mono);
  }
  .footer-col ul{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:9px}
  .footer-col a{
    font-size:13px;color:rgba(255,255,255,0.48);text-decoration:none;
    transition:color 0.15s;
  }
  .footer-col a:hover{color:#ffffff;text-decoration:none}

  /* Bottom bar */
  .footer-bottom{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .footer-copy{font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5}
  .footer-verify{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.07em;
    color:rgba(255,255,255,0.55);text-decoration:none;
    display:flex;align-items:center;gap:7px;
    transition:color 0.15s;white-space:nowrap;
    border:none;
  }
  .footer-verify::before{
    content:'';display:inline-block;width:6px;height:6px;
    border-radius:50%;background:#22c55e;flex-shrink:0;
  }
  .footer-verify:hover{color:rgba(255,255,255,0.8);text-decoration:none}

  /* -- Responsive ------------------------------------------------------------ */
  @media(max-width:900px){
    .footer-grid{grid-template-columns:1fr 1fr}
    .footer-grid .footer-col:last-child{grid-column:span 2}
  }

  @media(max-width:767px){
    .nav-inner{padding:0 20px}
    .nav-hamburger{display:flex}
    .nav-links{
      display:none;position:absolute;top:var(--nav-h);left:0;right:0;
      background:#f8f5ef;border-bottom:1px solid var(--border-mid);
      flex-direction:column;gap:0;padding:8px 20px 16px;
      box-shadow:0 8px 24px rgba(13,26,45,0.08);
    }
    .nav-links.nav-open{display:flex}
    .nav-links li{padding:11px 0;border-bottom:1px solid var(--border)}
    .nav-links li:last-child{border-bottom:none}
    .nav-links a{font-size:11px;letter-spacing:0.1em}
    .nav-cta{border-bottom:none!important;color:var(--primary)!important}

    main{padding:40px 20px 64px}
    h1{font-size:1.75rem}
    h2{font-size:1.25rem}
    .pg-section--hero{padding:48px 20px 36px}
    .pg-hero-stats{
      grid-template-columns:1fr;border-top:none;
      border-left:3px solid var(--primary);padding-left:20px;margin-top:32px;
    }
    .pg-hero-stat{
      padding:12px 0;border-right:none;
      border-bottom:1px solid var(--border);
    }
    .pg-hero-stat:last-child{border-bottom:none}
    .stat-value{font-size:26px}
    .trust-strip{flex-direction:column;border-radius:0}
    .trust-item{width:100%;border-right:none;border-bottom:1px solid var(--border)}
    .trust-item:last-child{border-bottom:none}
    .pg-hero-cta-row{flex-direction:column;align-items:flex-start}

    .footer-inner{padding:0 20px}
    .footer-grid{grid-template-columns:1fr;gap:28px}
    .footer-grid .footer-col:last-child{grid-column:auto}
    .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  }

  /* -- Contact form ---------------------------------------------------------- */
  .pg-hp{position:absolute !important;left:-9999px !important;top:-9999px !important;width:1px;height:1px;overflow:hidden}
  .pg-form{max-width:560px;margin-top:8px}
  .pg-field{margin-bottom:18px;display:flex;flex-direction:column}
  .pg-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px}
  .pg-input,.pg-textarea{font-family:var(--font-body);font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--border-mid);border-radius:var(--btn-radius);padding:12px 14px;width:100%;box-sizing:border-box;transition:border-color .15s}
  .pg-input:focus,.pg-textarea:focus{outline:none;border-color:var(--primary)}
  .pg-textarea{resize:vertical;min-height:120px;line-height:1.6}
  .cf-turnstile{margin:4px 0 18px}
  .pg-form-error{font-family:var(--font-mono);font-size:13px;color:rgb(176,0,32);margin:0 0 14px}
  .pg-form-submit{cursor:pointer;border:none}
  .pg-form-submit:disabled{opacity:0.6;cursor:default}


/* -- STEP 1 (2026-09-25): the split hero, figures, method list and the pass-mark scorecard.
   Moved from BLITZ template 8 into the SHARED layout so every door renders the same blocks
   Mother emits. Colours are the theme variables, not a palette. -- */
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:1.15rem 0 0;font-size:.92rem;color:var(--ink-muted)}
.hero-trust .pill{display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .7rem;border-radius:999px;background:rgba(51,70,92,.08);font-weight:700;font-size:.82rem;color:var(--ink)}
.hero-trust .pill i{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(190,18,60,.25)}
/* 1. DARK - the front-door face, for the pages that carry the niche's head terms */
.content-hero--dark{background:var(--slate-deep);border-bottom-color:rgba(255,255,255,.08)}
.content-hero--dark::before{background:radial-gradient(42rem 20rem at 100% 0%,rgba(190,18,60,.22),transparent 62%),repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 30px)}
.content-hero--dark h1{color:var(--surface)}
.content-hero--dark .lead{color:rgba(255,255,255,.78)}
.hero--dark .hero-trust,.content-hero--dark .hero-trust{color:rgba(255,255,255,.6)}
.hero--dark .hero-trust .pill,.content-hero--dark .hero-trust .pill{background:rgba(255,255,255,.1);color:var(--surface)}
/* the landing hero is dark by design, so its badges take the dark treatment without a modifier */
.hero .hero-trust{color:rgba(255,255,255,.62);margin-bottom:1.35rem}
.hero .hero-trust .pill{background:rgba(255,255,255,.1);color:var(--surface)}
.content-hero--dark .hero-cta-wrap a:not(.btn-primary){color:var(--surface)}
.content-hero--dark .btn-ghost,.content-hero--dark .btn-outline{color:var(--surface);border-color:rgba(255,255,255,.42)}
.content-hero--dark .btn-ghost:hover,.content-hero--dark .btn-outline:hover{color:var(--surface);border-color:var(--surface);background:rgba(255,255,255,.07)}
/* the copy column is ONE grid child however much the hero carries inside it */
.content-hero--split .hero-copy{min-width:0}
.content-hero--split .hero-figure svg.hero-art{display:block;width:100%;height:auto}
.content-hero--split .hero-figure{margin:2rem 0 0;border-radius:1rem;border:1px solid var(--border);background:var(--surface);overflow:hidden;box-shadow:0 20px 45px -25px rgba(16,24,40,.45)}
.content-hero--split .hero-figure img{display:block;width:100%;height:auto}
.content-hero--split .hero-figure figcaption{padding:.9rem 1.1rem;font-size:.92rem;line-height:1.5;color:var(--ink-muted);border-top:1px solid var(--border);margin:0}
.content-hero--split .hero-figure figcaption b{color:var(--ink)}
/* 3. RULE - the headline plus the numbers the page exists to explain */
.content-hero--rule .hero-facts{display:grid;gap:.7rem;margin:1.5rem 0 0;grid-template-columns:1fr}
.content-hero--rule .hero-fact{padding:.8rem 1rem;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:0 .6rem .6rem 0;background:rgba(255,255,255,.72)}
.content-hero--rule .hero-fact b{display:block;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.content-hero--rule .hero-fact span{display:block;font-size:.85rem;color:var(--ink-muted);margin-top:.15rem}
/* 4. COMPACT - a utility page carries less air than a landing page */
.content-hero--compact{padding:2.4rem 0 2rem}
.content-hero--compact h1{font-size:clamp(1.8rem,3.4vw,2.5rem)}
.content-hero--compact .lead{font-size:1.08rem}
.content-region .cr-figure{margin:1.75rem auto .25rem;max-width:30rem}
.content-region .cr-figure svg{display:block;width:100%;height:auto}
.content-region .cr-figure--wide{max-width:46rem}
.content-region .cr-figure--tight{max-width:18rem}
.content-region .cr-figure figcaption{margin:.7rem 0 0;font-size:.85rem;color:var(--ink-muted);text-align:center;line-height:1.5}
.content-region .cr-illus-band{margin:1.75rem 0 .5rem;padding:1.6rem 1.5rem 1.25rem;background:var(--slate-soft);border:1px solid var(--border);border-radius:var(--radius-lg)}
.content-region .cr-illus-band svg{display:block;width:100%;height:auto;max-width:40rem;margin:0 auto}
.content-region .cr-illus-band figcaption{margin:1rem auto 0;max-width:40rem;font-size:.86rem;color:var(--ink-muted);text-align:center;line-height:1.55}
/* two-section split */
.content-region .cr-split{display:grid;gap:1px;margin:1.75rem 0 .5rem;background:var(--border-mid);border:1px solid var(--border-mid);border-radius:var(--radius-lg);overflow:hidden}
.content-region .cr-split-col{background:var(--surface);padding:1.4rem 1.5rem}
.content-region .cr-split-top{display:flex;align-items:center;gap:.9rem;margin:0 0 1.15rem}
.content-region .cr-split-n{font-size:2.9rem;font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--head);font-variant-numeric:tabular-nums}
.content-region .cr-split-col--rs .cr-split-n{color:var(--accent)}
.content-region .cr-split-l{font-weight:800;color:var(--head);font-size:1.05rem;letter-spacing:-.01em;line-height:1.2}
.content-region .cr-split-l small{display:block;font-weight:600;font-size:.8rem;color:var(--ink-muted);letter-spacing:0;margin-top:.2rem}
.content-region .cr-split-topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem .9rem}
.content-region .cr-split-topics li{display:flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600;color:var(--head);margin:0}
.content-region .cr-split-topics svg{flex:none;width:1.5rem;height:1.5rem}
/* method row */
.content-region .cr-method{list-style:none;margin:1.6rem 0 .5rem;padding:0;display:grid;gap:1.1rem}
.content-region .cr-method li{display:flex;gap:.9rem;align-items:flex-start;margin:0}
.content-region .cr-method .cr-m-ic{flex:none;width:2.9rem;height:2.9rem;border-radius:.7rem;background:var(--accent-soft);display:grid;place-items:center}
.content-region .cr-method .cr-m-ic svg{width:1.55rem;height:1.55rem}
.content-region .cr-method h3{margin:.15rem 0 .3rem;font-size:1.02rem}
.content-region .cr-method p{margin:0;font-size:.95rem;color:var(--ink-muted);line-height:1.55}
/* --- in-content launch CTA row --- */
.cr-cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:1.4rem 0 .4rem}
/* ==================================================================
   THE FIGURE SYSTEM  (2026-09-23)
   Append near the END of the site stylesheet, after the
   "FIGURES ALIGN TO THE COLUMN" block it supersedes.

   THE RULE: a figure BLOCK is the reading column. Always. The art
   inside it may be any size; the block never is.

   Why this replaces the left-anchor fix. That fix was right about the
   fault (four figures centred at four different left edges = nothing
   lines up) and it fixed alignment by anchoring each figure left at its
   own natural width. Alignment came back and DEAD SPACE arrived with
   it: in a 912px column a 480px figure leaves 432px of nothing, a
   352px figure leaves 560px, a 240px figure leaves 672px. Both faults
   have ONE cause - the ART was deciding the BLOCK width. So the block
   stops asking. It takes the column, every time, and the left edge is
   the text's left edge because it is the same edge.

   Three treatments, one job each:
     1 PLATE  (default .cr-figure) - framed art at full column width.
       For art drawn 16:9 to 2:1. Zero dead space by construction.
     2 BAND   (.cr-illus-band) - the plate on a soft ground, for art
       that wants air around it. Also full column.
     3 STAGE  (.cr-figure--stage, and legacy --tight) - the deliberate
       treatment for art that is GENUINELY small: a full-column soft
       panel with the art held left at a cap and the caption set
       beside it. A small drawing then reads as presented, not
       stranded, and the block still starts at the text's left edge.

   No page needs CSS of its own for any of this. Page-authored
   style="max-width:..." on a figure is the bug, not the fix - strip
   it; these rules cannot out-rank an inline style and must not try
   (no !important anywhere in this file).
   ================================================================== */

/* ---- 1. THE PLATE: the default ----------------------------------- */
.content-region .cr-figure{
  margin:2rem 0 .5rem;
  max-width:none;
  width:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  overflow:hidden;
}
/* the legacy width modifier stops setting a width - the column sets it */
.content-region .cr-figure--wide{max-width:none}
.content-region .cr-figure>svg,
.content-region .cr-figure>img{
  display:block;
  width:100%;
  height:auto;
  border-radius:0;          /* the plate does the clipping */
}
.content-region .cr-figure>figcaption{
  margin:0;
  padding:.8rem 1.15rem .85rem;
  border-top:1px solid var(--border);
  background:var(--surface);
  color:var(--ink-muted);
  font-size:.85rem;
  line-height:1.55;
  text-align:left;
}
.content-region .cr-figure>figcaption strong,
.content-region .cr-figure>figcaption b{color:var(--head)}
/* ---- 2. THE BAND: the plate on a soft ground ---------------------- */
/* Already full-column and already working. Kept, and made explicit so
   it can never fall back to a 40rem art cap inside a 57rem column. */
.content-region .cr-illus-band{
  margin:2rem 0 .5rem;
  max-width:none;
  padding:1.75rem 1.75rem 1.35rem;
  background:var(--slate-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.content-region .cr-illus-band>svg,
.content-region .cr-illus-band>img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  margin:0;
}
.content-region .cr-illus-band>figcaption{
  margin:1rem 0 0;
  max-width:44rem;
  padding:0;
  border-top:0;
  background:none;
  color:var(--ink-muted);
  font-size:.86rem;
  line-height:1.55;
  text-align:left;
}
/* ---- 3. THE STAGE: for art that is genuinely small ---------------- */
/* Art left at a cap, caption beside it. The panel is the column, so the
   small drawing sits ON something instead of floating in white space. */
.content-region .cr-figure--stage,
.content-region .cr-figure--tight{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:1.25rem;
  margin:2rem 0 .5rem;
  max-width:none;
  padding:1.6rem 1.75rem;
  background:var(--slate-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:visible;
}
.content-region .cr-figure--stage>svg,
.content-region .cr-figure--stage>img,
.content-region .cr-figure--tight>svg,
.content-region .cr-figure--tight>img{
  display:block;
  width:100%;
  max-width:20rem;
  height:auto;
  margin:0;
  border-radius:0;
}
.content-region .cr-figure--stage>figcaption,
.content-region .cr-figure--tight>figcaption{
  margin:0;
  padding:0;
  border-top:0;
  background:none;
  color:var(--ink-muted);
  font-size:.95rem;
  line-height:1.6;
  text-align:left;
}
/* ---- 4. RHYTHM: a figure that opens a section sits closer to it --- */
.content-region .pg-section>h2+.cr-figure,
.content-region .pg-section>h2+.cr-illus-band{margin-top:1.25rem}
/* ---- 5. SMALL SCREENS: tighter frames, smaller staged art ---------- */
@media(max-width:40rem){
.content-region .cr-figure,
  .content-region .cr-illus-band,
  .content-region .cr-figure--stage,
  .content-region .cr-figure--tight{margin:1.5rem 0 .35rem}
.content-region .cr-figure>figcaption{padding:.7rem .9rem .75rem}
.content-region .cr-illus-band{padding:1.1rem 1.1rem .95rem}
.content-region .cr-figure--stage,
  .content-region .cr-figure--tight{padding:1.15rem 1.15rem 1.25rem}
.content-region .cr-figure--stage>svg,
  .content-region .cr-figure--stage>img,
  .content-region .cr-figure--tight>svg,
  .content-region .cr-figure--tight>img{max-width:14rem}
.content-region .cr-figure--stage>figcaption,
  .content-region .cr-figure--tight>figcaption{font-size:.88rem}
}


/* ==================================================================
   THE GOAL BAND - "what passing takes, and how to get there"
   A page's second section: the threshold a test is marked against,
   drawn to scale, and the route to it.

   Names no page and no niche. Any door with a two-gate exam mark
   reskins this for free: every colour comes from the design's own
   custom properties (hex fallbacks only, so a door that has not set
   a var still renders). Nothing is force-overridden. No fixed pixel widths.

   Motif follows the house: the THRESHOLD (crimson rule, crimson
   numerals) and hairlines, not boxes inside boxes.
   Palette in use: --head var(--h1), --muted var(--muted), --accent var(--accent),
   --slate-soft var(--soft), --border var(--border), --border-mid var(--border), white.
   ================================================================== */

.goal-band{
	background:var(--surface,var(--surface));
	border-bottom:1px solid var(--border,var(--border));
	padding:4.25rem 0 3.5rem;
}
.goal-band .goal-head{max-width:48rem;margin:0 0 2.25rem}
/* ---------- THE GOAL: two gates, side by side ---------- */
.goal-gates{display:grid;grid-template-columns:1fr;gap:1rem}
.goal-gate{
	display:flex;
	flex-direction:column;
	margin:0;
	padding:1.5rem 1.5rem 1.4rem;
	background:var(--slate-soft,var(--soft));
	border:1px solid var(--border,var(--border));
	border-radius:var(--radius-lg,1rem);
}
.goal-gate-k{
	margin:0;
	font-size:.7rem;
	font-weight:800;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--muted,var(--muted));
}
.goal-gate-n{
	margin:.4rem 0 0;
	font-size:1.25rem;
	font-weight:800;
	line-height:1.2;
	letter-spacing:-.015em;
	color:var(--head,var(--h1));
}
/* the pass mark itself: the number is the point of the card */
.goal-mark{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .65rem;margin:1.05rem 0 1.3rem}
.goal-mark-k{
	flex:0 0 100%;
	margin-bottom:.3rem;
	font-size:.7rem;
	font-weight:800;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--accent,var(--accent));
}
.goal-mark-v{
	font-size:clamp(2.75rem,5.5vw,3.75rem);
	font-weight:800;
	line-height:.88;
	letter-spacing:-.045em;
	color:var(--head,var(--h1));
	font-variant-numeric:tabular-nums;
}
/* --gk carries the default treatment and needs no rule; both modifiers exist so a
   door can re-colour either gate without touching the markup. */
.goal-gate--rs .goal-mark-v{color:var(--accent,var(--accent))}
.goal-mark-u{font-size:1rem;font-weight:700;color:var(--muted,var(--muted))}
/* the scorecard. ONE question = ONE cell, always 15 to a row, so the
   two gates read at the same scale and road safety honestly takes two
   rows to the general-knowledge one. Filled = must be right; hollow =
   the margin you have. Never colour alone: the shapes differ, the
   legend counts them, and the track carries its own aria-label. */
.goal-track{
	--goal-gap:4px;
	display:grid;
	grid-template-columns:repeat(15,1fr);
	column-gap:var(--goal-gap);
	row-gap:.9rem;
	margin:0;
}
.goal-cell{
	aspect-ratio:1;
	border-radius:3px;
	background:var(--head,var(--h1));
}
.goal-cell--spare{
	background:var(--surface,var(--surface));
	box-shadow:inset 0 0 0 2px var(--muted,var(--muted));
}
/* the pass mark, drawn where it falls: a crimson rule in the gap
   before the first question you are allowed to get wrong. */
.goal-cell--edge{position:relative}
.goal-cell--edge::before{
	content:"";
	position:absolute;
	top:-.35rem;
	bottom:-.35rem;
	left:calc((var(--goal-gap) / -2) - 1.5px);
	width:3px;
	border-radius:2px;
	background:var(--accent,var(--accent));
}
.goal-legend{
	display:flex;
	flex-wrap:wrap;
	gap:.4rem 1.35rem;
	margin:auto 0 0;          /* pins to the foot of the card, so both cards agree */
	padding-top:1.15rem;
	font-size:.85rem;
	font-weight:700;
	line-height:1.4;
	color:var(--head,var(--h1));
}
.goal-key-item{display:inline-flex;align-items:center;gap:.5rem}
.goal-key{
	flex:none;
	width:.7rem;
	height:.7rem;
	border-radius:2px;
	background:var(--head,var(--h1));
}
.goal-key--spare{
	background:var(--surface,var(--surface));
	box-shadow:inset 0 0 0 1.5px var(--muted,var(--muted));
}
/* ---------- the consequence of two separate marks ---------- */
.goal-both{
	max-width:54rem;
	margin:1.6rem 0 0;
	padding:.1rem 0 .1rem 1.25rem;
	border-left:3px solid var(--accent,var(--accent));
}
.goal-both-h{
	margin:0 0 .4rem;
	font-size:1.2rem;
	font-weight:800;
	line-height:1.3;
	letter-spacing:-.015em;
	color:var(--head,var(--h1));
}
.goal-both-p{margin:0;font-size:1.02rem;line-height:1.68;color:var(--ink,var(--ink))}
.goal-both-p b{color:var(--head,var(--h1));font-weight:800}
/* ---------- THE ROUTE ---------- */
.goal-path{margin:3.25rem 0 0}
.goal-path-h{
	margin:0 0 .4rem;
	font-size:clamp(1.35rem,2.4vw,1.75rem);
	font-weight:800;
	line-height:1.15;
	letter-spacing:-.025em;
	color:var(--head,var(--h1));
}
.goal-path-l{margin:0;max-width:44rem;font-size:1.05rem;line-height:1.6;color:var(--muted,var(--muted))}
.goal-steps{
	list-style:none;
	margin:1.5rem 0 0;
	padding:0;
	display:grid;
	grid-template-columns:1fr;
	gap:0;
	border-top:1px solid var(--border-mid,var(--border));
}
.goal-step{
	display:flex;
	gap:1.1rem;
	align-items:flex-start;
	margin:0;
	padding:1.45rem 0;
	border-bottom:1px solid var(--border-mid,var(--border));
}
.goal-step-n{
	flex:none;
	min-width:1.8rem;
	font-size:2rem;
	font-weight:800;
	line-height:.95;
	letter-spacing:-.045em;
	color:var(--accent,var(--accent));
	font-variant-numeric:tabular-nums;
}
.goal-step-b{min-width:0}
.goal-step-t{
	margin:.12rem 0 .4rem;
	font-size:1.08rem;
	font-weight:800;
	line-height:1.3;
	letter-spacing:-.015em;
	color:var(--head,var(--h1));
}
.goal-step-b p{margin:0;font-size:.98rem;line-height:1.62;color:var(--muted,var(--muted))}
/* ---------- the action ---------- */
.goal-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:2.4rem 0 0}
.goal-note{margin:1rem 0 0;font-size:.9rem;line-height:1.55;color:var(--muted,var(--muted))}
/* gates: side by side once there is room for two */
@media(min-width:48rem){
	.goal-gates{grid-template-columns:1fr 1fr;gap:1.25rem}
}
/* steps: two columns, hairline between them (the house pattern) */
@media(min-width:40rem) and (max-width:71.99rem){
	.goal-steps{grid-template-columns:1fr 1fr}
	.goal-step:nth-child(odd){padding-right:2rem;border-right:1px solid var(--border-mid,var(--border))}
	.goal-step:nth-child(even){padding-left:2rem}
}
/* steps: four across, the number stacked over its line */
@media(min-width:72rem){
	.goal-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
	.goal-step{flex-direction:column;gap:.55rem;padding:1.7rem 1.6rem 1.7rem 0}
	.goal-step+.goal-step{padding-left:1.6rem;border-left:1px solid var(--border-mid,var(--border))}
	.goal-step:last-child{padding-right:0}
	.goal-step-n{font-size:2.4rem}
	.goal-gate{padding:1.75rem 1.75rem 1.5rem}
}
@media(max-width:39.99rem){
	.goal-band{padding:3rem 0 2.75rem}
	.goal-band .goal-head{margin-bottom:1.75rem}
	.goal-gate{padding:1.25rem 1.15rem 1.2rem}
	.goal-track{--goal-gap:3px}
	.goal-cell{border-radius:2px}
	.goal-cell--spare{box-shadow:inset 0 0 0 1.5px var(--muted,var(--muted))}
	.goal-cell--edge::before{top:-.25rem;bottom:-.25rem;width:2px;left:calc((var(--goal-gap) / -2) - 1px)}
	.goal-both{padding-left:1rem}
	.goal-path{margin-top:2.5rem}
	.goal-cta{margin-top:2rem;gap:.6rem}
	.goal-cta .btn{width:100%;justify-content:center}
}
/* the hover lift on the primary is the site's; nothing here animates */
@media(prefers-reduced-motion:reduce){
	.goal-band *{transition:none}
}


/* ---- what used to be inline on the page ---------------------------- */
.cr-cta--center{justify-content:center;margin-top:1.6rem}
@media(min-width:60rem){
.content-hero--split .wrap{max-width:var(--wrap);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:center}
.content-hero--split .hero-figure{margin:0}
}
@media(min-width:40rem){
.content-hero--rule .hero-facts{grid-template-columns:repeat(3,minmax(0,1fr));max-width:44rem}
.content-region .cr-split{grid-template-columns:1fr 1fr}
}
@media(min-width:48rem){
.content-region .cr-method{grid-template-columns:repeat(3,1fr)}
.content-region .cr-method li{flex-direction:column}
.content-region .cr-figure--stage,
  .content-region .cr-figure--tight{
    /* a FIXED first track, not minmax(0,20rem): a content-sized track would
       shrink to the art's intrinsic width and the stage would wander again */
    grid-template-columns:20rem minmax(0,1fr);
    gap:2rem;
  }
}

/* classes the Mother renderer emits that the BLITZ template never needed: gate counts other than
   two, a gate sub-line, and the per-gate topic list */
.goal-gates--n1{grid-template-columns:1fr}
.goal-gates--n3{grid-template-columns:repeat(3,1fr)}
.goal-gates--n4{grid-template-columns:repeat(2,1fr)}
.goal-gate-s{margin:.1rem 0 .6rem;color:var(--muted);font-size:.95rem}
.goal-topics{list-style:none;margin:.9rem 0 0;padding:.8rem 0 0;border-top:1px solid var(--border);display:grid;gap:.45rem}
.goal-topics li{display:flex;align-items:center;gap:.55rem;font-size:.95rem;color:var(--ink)}
.goal-topics .cr-card-chip{width:1.5rem;height:1.5rem;flex:0 0 1.5rem}
@media(max-width:40rem){.goal-gates--n3,.goal-gates--n4{grid-template-columns:1fr}}