/*
 * Intervention Hub — central stylesheet.
 * Approved design language (design/mockups). Each layout's rules are
 * scoped under its body class via native CSS nesting, so layouts cannot
 * bleed into one another. PDF templates keep inline CSS (dompdf).
 * Cache-busted by filemtime in every layout's <link>.
 */

/* ---------- design tokens (canonical; per-layout overrides in scopes) ---------- */

:root{
    --ink:#101828; --ink-2:#344054; --ink-3:#475467;
    --line:#E4E7EC; --bg:#F8FAFC; --card:#FFFFFF;
    --primary:#4338CA; --primary-strong:#3730A3; --primary-soft:#EEF2FF;
    --teal:#0E9384; --teal-soft:#E0F5F2;
    --amber:#B54708; --amber-soft:#FEF0C7;
    --red:#B42318; --red-soft:#FEE4E2;
    --grey-soft:#F2F4F7;
    --focus:#4338CA; --radius:14px;
    /* Portal shell cap. Wide enough for a 27in display to carry a full
       table row; smaller screens are unaffected by the cap. */
    --page-max:1800px;
    --shadow-sm:0 1px 2px rgba(16,24,40,.06);
    --shadow-md:0 8px 24px -8px rgba(16,24,40,.14);
    --ease:cubic-bezier(.2,.7,.3,1);
  }

:root{
  /* homepage extras */
  --indigo-deep:#312E81; --pink:#DD2590; --pink-soft:#FDF2FA;
  --teal-strong:#0A6E63; --teal-deep:#085B52; --teal-tint:#F0FDFA; --teal-line:#CCFBEF;
  --violet-deep:#6D28D9;
  --shadow-lg:0 20px 50px -16px rgba(49,46,129,.28);
}

/* ---------- global base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Every portal header is sticky. Without this, a link to an anchor, or a
   focused control the browser scrolls to, can land underneath the bar. WCAG
   2.2 calls that focus obscured. The padding keeps the target below it. */
html{scroll-padding-top:5.5rem}

/* The hidden attribute is how every toggle in the application puts a block
   away. The browser's own rule is a bare element selector, so any class that
   sets display, .form-grid and .notice among them, beat it and the block
   stayed on screen. */
[hidden]{display:none !important}

/* ---------- message channel ----------
   Global: the same envelope or handset appears in the message centre, the
   admin user record and the contact log. The icon is decorative, the word
   next to it carries the meaning. */
.channel{display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap}
.channel svg{flex:none; opacity:.7}

/* ---------- form grid helpers ----------
   Global, because every layout has a .form-grid and the reasons are the same
   in each: keep a pair of fields on one row, or give a control with long
   options the width to show them. */
/* Minimum target size, WCAG 2.5.8. Row actions and the link rows in the
   footer and the account area sat just under 24 pixels tall. */
.footer-links a,
.footer-links button,
.account .signout,
.row-remove{display:inline-flex; align-items:center; min-height:24px}
.row-remove{justify-content:center; min-width:24px}

.form-grid .row-start{grid-column-start:1}
/* A lone control in an auto-fit grid stretches to the whole row, which reads
   as a mistake on a select with three short options. narrow caps it. */
.form-grid .narrow{max-width:24rem}

.form-grid .span-2{grid-column:span 2}
@media (max-width:760px){
  .form-grid .row-start, .form-grid .span-2{grid-column:auto}
}
/* span-2 is kept for the next control that needs it. Nothing uses it today:
   the demographic fields were tried at double width and read worse than the
   fields around them. */

/* ---------- a field that failed ----------
   Two sources, one look. :user-invalid is the browser's own check and only
   applies once somebody has typed in the field or tried to submit, so an
   untouched form is never painted red on arrival. .has-error comes from the
   x-field component when the server rejected that field.

   Global rather than per layout: a field that failed looks the same to an
   admin, a client user and a learner. */
.field :is(input, select, textarea):user-invalid,
.field.has-error :is(input, select, textarea){
  border-color:var(--red) !important;
  box-shadow:0 0 0 4px rgba(180,35,24,.12);
}
.field.has-error > label{color:var(--red)}
.money:has(input:user-invalid), .has-error .money{
  border-color:var(--red) !important;
  box-shadow:0 0 0 4px rgba(180,35,24,.12);
}

/* ---------- shared motion ---------- */
@keyframes rise{to{opacity:1; transform:none}}
@keyframes pop{from{opacity:0; transform:translateY(-6px) scale(.98)}to{opacity:1; transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Top level: a @keyframes inside a nested style rule is dropped by the parser. */
@keyframes node-hit{
  0%,6%{transform:scale(1); box-shadow:0 6px 16px -8px var(--c)}
  12%{transform:scale(1.11); box-shadow:0 0 0 9px color-mix(in srgb, var(--c) 18%, transparent), 0 14px 30px -12px var(--c)}
  24%{transform:scale(1.02); box-shadow:0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent), 0 6px 16px -8px var(--c)}
  30%,100%{transform:scale(1); box-shadow:0 6px 16px -8px var(--c)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .rise{opacity:1; transform:none}
}


/* ==================== layout-admin ==================== */
body.layout-admin {
  &{
    font-family:"Google Sans Flex","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg); color:var(--ink); line-height:1.55; font-size:15.5px;
    -webkit-font-smoothing:antialiased;
  }
  .skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 10px 0; z-index:100; font-weight:600}
  .skip-link:focus{left:0}
  a{color:var(--primary)}
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}

  /* ---------- header ---------- */
  .topbar{background:var(--card); border-bottom:1px solid var(--line)}
  .topbar-inner{max-width:var(--page-max); margin:0 auto; padding:.8rem 1.5rem; display:flex; align-items:center; gap:1rem}
  .brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink)}
  .brand-mark{
    width:38px; height:38px; border-radius:11px; flex:none;
    background:conic-gradient(from 220deg, #4338CA, #7C3AED, #DD2590, #F79009, #4338CA);
    display:grid; place-items:center; color:#fff; font-weight:700; font-size:.95rem;
  }
  .brand-mark span{background:rgba(16,24,40,.25); width:30px; height:30px; border-radius:8px; display:grid; place-items:center}
  .brand-name{font-weight:700; letter-spacing:-.01em}
  .role-chip{background:var(--primary-soft); color:var(--primary-strong); font-size:.78rem; font-weight:700; padding:.18rem .6rem; border-radius:999px; letter-spacing:.02em}
  .account{margin-left:auto; display:flex; align-items:center; gap:.75rem}
  .account form{display:flex; align-items:center; gap:.75rem}
  .account .signout{
    font:inherit; font-weight:600; color:var(--ink-2); background:none; border:1px solid transparent;
    border-radius:10px; padding:.4rem .7rem; cursor:pointer;
    transition:background .18s var(--ease), border-color .18s var(--ease);
  }
  .account .signout:hover{background:var(--bg); border-color:var(--line)}
  .acc-name{display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--ink-2)}
  .nav-toggle{position:absolute; width:1px; height:1px; opacity:0}
  .burger{
    display:none; margin-left:.25rem; width:44px; height:40px; border:1px solid var(--line); border-radius:10px;
    background:var(--card); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .burger span{display:block; width:18px; height:2px; border-radius:2px; background:var(--ink-2); transition:transform .25s var(--ease), opacity .2s var(--ease)}
  #navtoggle:checked ~ .topbar .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  #navtoggle:checked ~ .topbar .burger span:nth-child(2){opacity:0}
  #navtoggle:checked ~ .topbar .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  #navtoggle:focus-visible ~ .topbar .burger{outline:3px solid var(--focus); outline-offset:2px}
  @media (max-width:760px){
    .burger{display:flex}
    .mainnav-inner{flex-direction:column; gap:0; max-height:0; overflow:hidden; padding:0 1rem; transition:max-height .35s var(--ease)}
    #navtoggle:checked ~ .mainnav .mainnav-inner{max-height:760px}
    .mainnav a{padding:.85rem .4rem; border-bottom:1px solid rgba(255,255,255,.14)}
    .mainnav a:last-child{border-bottom:none}
    .mainnav a::after{display:none}
    .acc-name{display:none}
    .role-chip{display:none}
  }
  .avatar{width:30px; height:30px; border-radius:50%; background:var(--teal-soft); color:#0A6E63; display:grid; place-items:center; font-size:.8rem; font-weight:700}

  /* ---------- nav ---------- */
  .mainnav{background:linear-gradient(90deg,#312E81 0%, #3730A3 55%, #4338CA 100%); position:sticky; top:0; z-index:50; box-shadow:0 2px 10px -4px rgba(49,46,129,.4)}
  .mainnav-inner{max-width:var(--page-max); margin:0 auto; padding:0 1.5rem; display:flex; gap:.25rem; overflow-x:auto}
  .mainnav a{
    position:relative; text-decoration:none; color:#C7D2FE; font-weight:600; font-size:.95rem;
    padding:.85rem 1rem; white-space:nowrap; transition:color .18s var(--ease);
  }
  .mainnav a::after{
    content:""; position:absolute; left:1rem; right:1rem; bottom:0; height:3px; border-radius:3px 3px 0 0;
    background:#FDB022; transform:scaleX(0); transform-origin:center; transition:transform .22s var(--ease);
  }
  .mainnav a:hover{color:#fff}
  .mainnav a:hover::after{transform:scaleX(.6)}
  .mainnav a[aria-current="page"]{color:#fff}
  .mainnav a[aria-current="page"]::after{transform:scaleX(1)}
  .mainnav a.placeholder{color:#818CF8; cursor:not-allowed}
  .mainnav a.placeholder:hover::after{transform:scaleX(0)}

  /* ---------- page ---------- */
  .page{max-width:var(--page-max); margin:0 auto; padding:2rem 1.5rem 3rem}
  .page-head{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:1.6rem}
  .page-head h1{font-size:1.55rem; letter-spacing:-.02em}
  .page-head .sub{color:var(--ink-3); font-size:.95rem; margin-top:.15rem}
  .page-actions{margin-left:auto; display:flex; gap:.6rem}
  .btn{
    display:inline-flex; align-items:center; gap:.5rem; font:inherit; font-weight:600; cursor:pointer;
    border-radius:10px; padding:.62rem 1.1rem; border:none; text-decoration:none;
    transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--primary); color:#fff}
  .btn-primary:hover{background:var(--primary-strong); box-shadow:0 6px 16px -6px rgba(67,56,202,.45); transform:translateY(-1px)}
  .btn-secondary{background:var(--card); color:var(--ink); border:1px solid var(--line)}
  .btn-secondary:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm); transform:translateY(-1px)}
  .btn-danger{background:var(--card); color:var(--red); border:1px solid var(--line)}
  .btn-danger:hover{border-color:var(--red); box-shadow:var(--shadow-sm)}
  .btn-sm{padding:.4rem .8rem; font-size:.88rem}

  /* ---------- flash ---------- */
  .flash{display:flex; align-items:center; gap:.6rem; border-radius:var(--radius); padding:.85rem 1.1rem; margin-bottom:1.4rem; font-weight:600; border:1px solid}
  .flash-success{background:var(--teal-soft); color:#0A6E63; border-color:#99E3D8}
  .flash-error{background:var(--red-soft); color:var(--red); border-color:#FDA29B}

  /* ---------- stats ---------- */
  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.6rem}
  @media (max-width:900px){ .stats{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .stats{grid-template-columns:1fr} }
  .stat{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.25rem;
    transition:box-shadow .2s var(--ease), transform .2s var(--ease);
  }
  .stat-row{display:flex; justify-content:space-between; align-items:flex-start; gap:.8rem}
  .chip{width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center}
  .chip-indigo{background:#EEF2FF; color:#3730A3}
  .chip-teal{background:#E0F5F2; color:#0A6E63}
  .chip-amber{background:#FEF0C7; color:#B54708}
  .chip-red{background:#FEE4E2; color:#B42318}
  .stat:hover{box-shadow:var(--shadow-md); transform:translateY(-2px)}
  .stat .label{color:var(--ink-3); font-size:.85rem; font-weight:600}
  .stat .value{font-size:1.65rem; font-weight:700; letter-spacing:-.02em; margin-top:.1rem}
  .stat .delta{font-size:.82rem; font-weight:600; color:#067647}
  .stat .delta.bad{color:var(--red)}

  /* ---------- panel + filters ---------- */
  .panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:1.6rem}
  .panel-head{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--line)}
  .panel-head h2{font-size:1.05rem; letter-spacing:-.01em}
  .panel-body{padding:1.25rem}
  .tabs{display:flex; gap:.25rem; flex-wrap:wrap}
  .tab{
    font:inherit; font-weight:600; font-size:.92rem; color:var(--ink-3); background:none; border:none;
    padding:.5rem .9rem; border-radius:999px; cursor:pointer; text-decoration:none;
    transition:background .18s var(--ease), color .18s var(--ease);
  }
  .tab:hover{background:var(--grey-soft); color:var(--ink)}
  .tab[aria-current="page"]{background:var(--primary-soft); color:var(--primary-strong)}
  .tab .count{font-weight:700; opacity:.65; margin-left:.3rem; font-size:.85rem}
  .search{position:relative}
  .search svg{position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--ink-3)}
  .search input{
    font:inherit; padding:.55rem .9rem .55rem 2.4rem; border-radius:10px; border:1px solid #D0D5DD;
    width:340px; max-width:100%; background:#fff;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease), width .25s var(--ease);
  }
  .search input:hover{border-color:#B8BFC9}
  .search input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}

  /* ---------- table ---------- */
  .table-wrap{overflow-x:auto}
  table{width:100%; border-collapse:collapse; font-size:.9rem}
  table.wide{min-width:1040px}
  caption{position:absolute; left:-9999px}
  thead th{
    text-align:left; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3);
    background:var(--grey-soft); padding:.7rem .55rem; border-bottom:1px solid var(--line); white-space:nowrap;
  }
  thead th:first-child, tbody td:first-child{padding-left:1.1rem}
  thead th:last-child, tbody td:last-child{padding-right:1.1rem}
  tbody td{padding:.85rem .55rem; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap}
  tbody tr{transition:background .15s var(--ease)}
  tbody tr:hover{background:#FAFBFF}
  tbody tr:last-child td{border-bottom:none}
  .ref-name{font-weight:600}
  .ref-sub{color:var(--ink-3); font-size:.84rem}
  .mono{font-variant-numeric:tabular-nums; color:var(--ink-2)}
  .empty-row td{text-align:center; color:var(--ink-3); padding:2.2rem .55rem}

  .badge{display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700; padding:.22rem .7rem; border-radius:999px}
  .badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
  .badge-teal{background:var(--teal-soft); color:#0A6E63}
  .badge-indigo{background:var(--primary-soft); color:var(--primary-strong)}
  .badge-amber{background:var(--amber-soft); color:var(--amber)}
  .badge-red{background:var(--red-soft); color:var(--red)}
  .badge-grey{background:var(--grey-soft); color:var(--ink-3)}

  .panel-foot{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:1rem 1.25rem; border-top:1px solid var(--line)}
  .pagination{margin-left:auto; display:flex; align-items:center; gap:.3rem; color:var(--ink-3); font-size:.9rem}
  .page-btn{
    display:inline-grid; place-items:center; font:inherit; font-weight:600; min-width:34px; height:34px; border-radius:8px;
    border:1px solid transparent; background:none; color:var(--ink-2); cursor:pointer; text-decoration:none;
    transition:background .18s var(--ease), border-color .18s var(--ease);
  }
  .page-btn:hover{background:var(--grey-soft)}
  .page-btn[aria-current="page"]{background:var(--primary-soft); color:var(--primary-strong); border-color:transparent}
  .page-btn.disabled{opacity:.4; pointer-events:none}

  /* ---------- forms ---------- */
  .form-section{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.4rem; margin-bottom:1.4rem}
  .form-section > h2{font-size:1.05rem; letter-spacing:-.01em; margin-bottom:.35rem}
  .form-section > .sub{color:var(--ink-3); font-size:.9rem; margin-bottom:1rem}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.4rem}
  @media (max-width:760px){ .form-grid{grid-template-columns:1fr} }
  .field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem}
  .field .hint{color:var(--ink-3); font-size:.82rem; margin-top:.3rem}
  .field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=password],
  .field input[type=date], .field input[type=number], .field input[type=file], .field select, .field textarea{
    font:inherit; width:100%; padding:.55rem .8rem; border-radius:10px; border:1px solid #D0D5DD; background:#fff;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .field textarea{min-height:7.5rem; resize:vertical}
  .field input:hover, .field select:hover, .field textarea:hover{border-color:#B8BFC9}
  .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}
  .field .error{color:var(--red); font-size:.84rem; font-weight:600; margin-top:.3rem}

  /* Checkbox rows inside a field, such as confirming a reused reference. */
  .check{display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem}
  .check input{width:18px; height:18px; margin-top:.15rem; accent-color:var(--primary); flex:none}
  .form-actions{display:flex; justify-content:flex-end; gap:.6rem; margin-bottom:1.4rem}
  .inline-fields{display:flex; gap:.6rem; align-items:center}
  .inline-fields input[type=number]{width:5.5rem}

  /* created → issued → deadline date flow on referral cards */
  .date-flow{display:inline-flex; align-items:center; gap:.45rem; flex-wrap:wrap}
  .date-flow .date-arrow{color:var(--ink-3); flex:none}

  /* report builder criteria rows (wireframe 34) */
  .criteria-rows{display:flex; flex-direction:column; gap:.7rem; margin-bottom:.9rem}
  .criteria-row{
    display:grid; grid-template-columns:1.2fr 1fr 1.6fr auto; gap:.6rem; align-items:center;
    background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:.7rem;
  }
  @media (max-width:760px){ .criteria-row{grid-template-columns:1fr} }
  .criteria-row select, .criteria-row input, .criteria-value select, .criteria-value input{
    font:inherit; width:100%; padding:.55rem .8rem; border-radius:10px; border:1px solid #D0D5DD; background:#fff;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .criteria-row select:hover, .criteria-row input:hover{border-color:#B8BFC9}
  .criteria-row select:focus, .criteria-row input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}

  /* toggle switch (wireframe teal) */
  /* `.field label{display:block}` is (0,1,1) and outranks a bare class,
     so a toggle inside a field loses its flex and renders as a stacked
     block. The second selector wins outright rather than on source
     order, because the two rules sit in a different order in each
     layout block. Every use is a <label class="toggle">. */
  .toggle, .field label.toggle{
    position:relative; display:inline-flex; align-items:center; gap:.55rem; margin:0;
    cursor:pointer; font-weight:600; font-size:.9rem;
  }
  .toggle input{position:absolute; width:1px; height:1px; opacity:0}
  .toggle .track{
    width:40px; height:22px; border-radius:999px; background:#D0D5DD; position:relative; flex:none;
    transition:background .18s var(--ease);
  }
  .toggle .track::after{
    content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff;
    box-shadow:var(--shadow-sm); transition:transform .18s var(--ease);
  }
  .toggle input:checked + .track{background:var(--teal)}
  .toggle input:checked + .track::after{transform:translateX(18px)}
  .toggle input:focus-visible + .track{outline:3px solid var(--focus); outline-offset:2px}

  /* reminder channel panels (slice 11): email and SMS side by side,
     each with its own switch, dimmed until the switch is on */
  .channel-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem}
  @media (max-width:900px){ .channel-grid{grid-template-columns:1fr} }

  .channel-panel{
    border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
    padding:1rem 1.1rem 1.1rem; transition:border-color .18s var(--ease), background .18s var(--ease);
  }
  .channel-panel:has(.switch input:checked){border-color:var(--primary)}

  .channel-head{display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem}
  .channel-head h3{font-size:.95rem; margin:0; flex:1}

  .switch, .field label.switch{position:relative; display:inline-flex; align-items:center; flex:none; cursor:pointer; margin:0}
  .switch input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
  .switch .slider{
    width:42px; height:24px; border-radius:999px; background:#D0D5DD; position:relative; flex:none;
    transition:background .18s var(--ease); pointer-events:none;
  }
  .switch .slider::after{
    content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
    background:#fff; box-shadow:var(--shadow-sm); transition:transform .18s var(--ease);
  }
  .switch input:checked + .slider{background:var(--teal)}
  .switch input:checked + .slider::after{transform:translateX(18px)}
  .switch input:focus-visible + .slider{outline:3px solid var(--focus); outline-offset:2px}

  .channel-body{transition:opacity .18s var(--ease)}
  .channel-panel:not(:has(.switch input:checked)) .channel-body{opacity:.4; pointer-events:none}

  /* contact log (slice 11) */
  .contact-log{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
  .contact-log li{border-left:2px solid var(--line); padding:.1rem 0 .1rem .8rem}
  .contact-log .cl-head{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem}
  .contact-log .cl-what{font-weight:600; font-size:.9rem}
  .contact-log .cl-channel{font-size:.8rem; color:var(--ink-2)}
  .contact-log .cl-when{font-size:.8rem; color:var(--ink-2); margin:.2rem 0 0}
  .contact-log .cl-reason{font-size:.82rem; margin:.25rem 0 0; color:var(--ink-2); font-style:italic}
  .contact-log .cl-blocked{font-size:.82rem; margin:.25rem 0 0; color:var(--red); font-weight:600}

  details.contact-log-panel > summary{
    cursor:pointer; font-size:.85rem; font-weight:600; color:var(--primary); padding:.2rem 0;
  }
  details.contact-log-panel > summary::marker{color:var(--ink-3)}
  details.contact-log-panel[open] > summary{margin-bottom:.6rem}

  .hub-toggles{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.5rem}
  /* Scoped through .hub-toggles deliberately: `.field label{display:block}`
     outranks a single class, so a bare .hub-toggle never gets its flex. */
  .hub-toggles .hub-toggle{
    display:inline-flex; align-items:center; gap:.6rem; padding:.55rem .85rem; margin:0;
    border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
    font-size:.9rem; font-weight:500; cursor:pointer;
    transition:border-color .18s var(--ease), opacity .18s var(--ease);
  }
  .hub-toggles .hub-toggle > span:last-child{line-height:1}
  .hub-toggles .hub-toggle:not(:has(input:checked)){opacity:.5}
  .hub-toggles .hub-toggle:has(input:checked){border-color:var(--primary); opacity:1}

  .merge-chips{display:flex; flex-wrap:wrap; gap:.35rem; margin:0 0 .5rem}
  .merge-chips button{
    font:inherit; font-size:.78rem; font-weight:600; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    padding:.2rem .5rem; border-radius:6px; border:1px solid var(--line); background:var(--bg-soft,#F3F4F6);
    color:var(--ink-2); cursor:pointer; transition:border-color .15s var(--ease), color .15s var(--ease);
  }
  .merge-chips button:hover{border-color:var(--primary); color:var(--primary)}
  .merge-chips button:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

  .sms-count{font-size:.82rem; color:var(--ink-2); margin:.4rem 0 0}
  .sms-count.over{color:var(--amber,#B54708); font-weight:600}

  /* hub allocation grid */
  .hub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
  @media (max-width:1000px){ .hub-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:640px){ .hub-grid{grid-template-columns:1fr} }
  .hub-card{border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; background:var(--card)}
  .hub-card h3{font-size:.95rem; margin-bottom:.55rem}
  .hub-card .cost{display:flex; align-items:center; gap:.5rem; margin-top:.7rem; font-size:.88rem; font-weight:600; color:var(--ink-2)}

  /* Money: the symbol sits inside the control's edge but outside the typing
     area, so it is still on screen once a figure is entered. */
  .money{
    display:inline-flex; align-items:stretch; overflow:hidden;
    border:1px solid #D0D5DD; border-radius:8px; background:#fff;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .money:hover{border-color:#B8BFC9}
  .money:focus-within{border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}
  .money-symbol{
    display:flex; align-items:center; padding:0 .55rem;
    background:var(--grey-soft); border-right:1px solid #D0D5DD;
    color:var(--ink-3); font-weight:600;
  }
  .money input{
    font:inherit; width:6rem; padding:.4rem .6rem; border:0; background:none;
    text-align:right; font-variant-numeric:tabular-nums;
  }
  .money input:focus{outline:none}

  /* item cards (reminders, recipients, questions) */
  .item-card{border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; margin-bottom:1rem; background:var(--card)}
  .item-card .item-head{display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem}
  .item-card .item-head h3{font-size:.98rem}
  .item-card .item-head .spacer{margin-left:auto; display:flex; gap:.5rem}

  /* CSS-only modal via :target */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(16,24,40,.55); z-index:90;
    display:none; align-items:flex-start; justify-content:center; padding:3rem 1rem; overflow-y:auto;
  }
  .modal-overlay:target{display:flex}
  .modal{
    background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-md);
    max-width:560px; width:100%; padding:1.6rem;
  }
  .modal .modal-actions{display:flex; justify-content:center; margin-top:1.3rem}
  .email-preview{border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; background:#fff}
  .email-preview .ep-brand{display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; font-weight:700}
  .email-preview h2{font-size:1.1rem; margin-bottom:.8rem}
  .email-preview .ep-body{background:#FFFBEB; border:1px solid #FDE68A; border-radius:10px; padding:1rem; white-space:pre-wrap; font-size:.92rem; margin-bottom:1rem}
  .email-preview table{font-size:.88rem}
  .email-preview td{padding:.45rem .6rem; border-bottom:1px solid var(--line)}

  /* live reminder preview (slice 11) */
  dialog.preview-modal{
    /* The reset zeroes margins, which kills the browser's own centring,
       so inset and margin are set back explicitly. */
    position:fixed; inset:0; margin:auto;
    height:fit-content; max-height:calc(100% - 4rem);
    width:calc(100% - 2rem); max-width:620px;
    border:none; border-radius:var(--radius); box-shadow:var(--shadow-md); padding:0;
    background:var(--card); color:var(--ink);
  }
  dialog.preview-modal::backdrop{background:rgba(16,24,40,.55)}
  dialog.preview-modal .preview-head{
    display:flex; align-items:center; gap:.7rem; padding:1rem 1.3rem; border-bottom:1px solid var(--line);
  }
  dialog.preview-modal .preview-head h2{font-size:1.05rem; margin:0; flex:1}
  dialog.preview-modal .preview-scroll{padding:1.3rem; max-height:70vh; overflow-y:auto}
  dialog.preview-modal .preview-foot{padding:.9rem 1.3rem; border-top:1px solid var(--line); display:flex; justify-content:flex-end}
  dialog.preview-modal .preview-note{font-size:.82rem; color:var(--ink-2); margin:.9rem 0 0}

  .sms-preview{max-width:320px; margin:0 auto; background:#EEF0F4; border-radius:22px; padding:1rem .9rem}
  .sms-preview .sms-from{font-size:.76rem; color:var(--ink-2); text-align:center; margin-bottom:.7rem; font-weight:600}
  .sms-preview .sms-bubble{
    background:#fff; border-radius:16px 16px 16px 4px; padding:.7rem .9rem; font-size:.9rem; line-height:1.45;
    white-space:pre-wrap; word-break:break-word; box-shadow:var(--shadow-sm);
  }

  footer{border-top:1px solid var(--line); background:var(--card); margin-top:3rem}
  .footer-inner{max-width:var(--page-max); margin:0 auto; padding:1.4rem 1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--ink-3); font-size:.9rem}
  .footer-links{display:flex; gap:1.4rem}
  .footer-links a{color:var(--ink-3); text-decoration:none; font-weight:500; transition:color .18s var(--ease)}
  .footer-links a:hover{color:var(--ink)}

  .rise{opacity:0; transform:translateY(12px); animation:rise .55s var(--ease) forwards}
  .rise.d1{animation-delay:.07s} .rise.d2{animation-delay:.14s}

  /* Slice 17: language tabs on the hub screen. Radio driven, no JavaScript,
     the same approach as the burger menu above. The pairs below are indexed
     rather than keyed on a language code, so adding a language in phase two
     needs no CSS. Eight covers every language on the list. */
  .lang-tabs{margin-top:.4rem}
  .lang-tabs > .lang-tab-radio{position:absolute; width:1px; height:1px; opacity:0}
  .lang-tablist{display:flex; flex-wrap:wrap; gap:.3rem; border-bottom:1px solid var(--line); margin-bottom:1.4rem}
  .lang-tab{
    display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
    padding:.6rem 1rem; border-radius:8px 8px 0 0; font-weight:600; color:var(--ink-3);
    border:1px solid transparent; border-bottom:none; margin-bottom:-1px;
    transition:color .15s var(--ease), background .15s var(--ease);
  }
  .lang-tab:hover{color:var(--primary-strong); background:var(--primary-soft)}
  .lang-tab-state{
    font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--ink-3); background:var(--grey-soft); padding:.1rem .45rem; border-radius:999px;
  }
  /* Same shape as the state pill, in the warning colour, so a tab that
     needs attention is visible without opening it. */
  .lang-tab-add{color:var(--primary); font-weight:600}
  .lang-tab-add:hover{background:var(--primary-soft)}
  .lang-tab-stale{
    font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--red); background:var(--red-soft); padding:.1rem .45rem; border-radius:999px;
  }
  .lang-tabs:has(.lang-tab-radio:focus-visible) .lang-tablist{outline:3px solid var(--focus); outline-offset:2px}
  .lang-tabpanel{display:none}
  .lang-tabpanel-head{display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem}
  .lang-tabs > .lang-tab-radio:nth-of-type(1):checked ~ .lang-tablist > .lang-tab:nth-child(1){color:var(--primary-strong); background:var(--card); border-color:var(--line); border-bottom-color:var(--card)}
  .lang-tabs > .lang-tab-radio:nth-of-type(1):checked ~ .lang-panels > .lang-tabpanel:nth-child(1){display:block}
  .lang-tabs > .lang-tab-radio:nth-of-type(2):checked ~ .lang-tablist > .lang-tab:nth-child(2){color:var(--primary-strong); background:var(--card); border-color:var(--line); border-bottom-color:var(--card)}
  .lang-tabs > .lang-tab-radio:nth-of-type(2):checked ~ .lang-panels > .lang-tabpanel:nth-child(2){display:block}
  .lang-tabs > .lang-tab-radio:nth-of-type(3):checked ~ .lang-tablist > .lang-tab:nth-child(3){color:var(--primary-strong); background:var(--card); border-color:var(--line); border-bottom-color:var(--card)}
  .lang-tabs > .lang-tab-radio:nth-of-type(3):checked ~ .lang-panels > .lang-tabpanel:nth-child(3){display:block}
  .lang-tabs > .lang-tab-radio:nth-of-type(4):checked ~ .lang-tablist > .lang-tab:nth-child(4){color:var(--primary-strong); background:var(--card); border-color:var(--line); border-bottom-color:var(--card)}
  .lang-tabs > .lang-tab-radio:nth-of-type(4):checked ~ .lang-panels > .lang-tabpanel:nth-child(4){display:block}
  .lang-tabs > .lang-tab-radio:nth-of-type(5):checked ~ .lang-tablist > .lang-tab:nth-child(5){color:var(--primary-strong); background:var(--card); border-color:var(--line); border-bottom-color:var(--card)}
  .lang-tabs > .lang-tab-radio:nth-of-type(5):checked ~ .lang-panels > .lang-tabpanel:nth-child(5){display:block}
  .lang-tabs > .lang-tab-radio:nth-of-type(6):checked ~ .lang-tablist > .lang-tab:nth-child(6){color:var(--primary-strong); background:var(--card); border-color:var(--line); border-bottom-color:var(--card)}
  .lang-tabs > .lang-tab-radio:nth-of-type(6):checked ~ .lang-panels > .lang-tabpanel:nth-child(6){display:block}
  .lang-tabs > .lang-tab-radio:nth-of-type(7):checked ~ .lang-tablist > .lang-tab:nth-child(7){color:var(--primary-strong); background:var(--card); border-color:var(--line); border-bottom-color:var(--card)}
  .lang-tabs > .lang-tab-radio:nth-of-type(7):checked ~ .lang-panels > .lang-tabpanel:nth-child(7){display:block}
  .lang-tabs > .lang-tab-radio:nth-of-type(8):checked ~ .lang-tablist > .lang-tab:nth-child(8){color:var(--primary-strong); background:var(--card); border-color:var(--line); border-bottom-color:var(--card)}
  .lang-tabs > .lang-tab-radio:nth-of-type(8):checked ~ .lang-panels > .lang-tabpanel:nth-child(8){display:block}
  .lang-tabs > .lang-tab-radio:nth-of-type(9):checked ~ .lang-tablist > .lang-tab:nth-child(9){color:var(--primary-strong); background:var(--card); border-color:var(--line); border-bottom-color:var(--card)}
  .lang-tabs > .lang-tab-radio:nth-of-type(9):checked ~ .lang-panels > .lang-tabpanel:nth-child(9){display:block}
  .lang-tabs > .lang-tab-radio:nth-of-type(10):checked ~ .lang-tablist > .lang-tab:nth-child(10){color:var(--primary-strong); background:var(--card); border-color:var(--line); border-bottom-color:var(--card)}
  .lang-tabs > .lang-tab-radio:nth-of-type(10):checked ~ .lang-panels > .lang-tabpanel:nth-child(10){display:block}
  .lang-tabs > .lang-tab-radio:nth-of-type(11):checked ~ .lang-tablist > .lang-tab:nth-child(11){color:var(--primary-strong); background:var(--card); border-color:var(--line); border-bottom-color:var(--card)}
  .lang-tabs > .lang-tab-radio:nth-of-type(11):checked ~ .lang-panels > .lang-tabpanel:nth-child(11){display:block}
  .lang-tabs > .lang-tab-radio:nth-of-type(12):checked ~ .lang-tablist > .lang-tab:nth-child(12){color:var(--primary-strong); background:var(--card); border-color:var(--line); border-bottom-color:var(--card)}
  .lang-tabs > .lang-tab-radio:nth-of-type(12):checked ~ .lang-panels > .lang-tabpanel:nth-child(12){display:block}

}

/* ==================== layout-client ==================== */
body.layout-client {
  &{
    font-family:"Google Sans Flex","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg); color:var(--ink); line-height:1.55; font-size:15.5px;
    -webkit-font-smoothing:antialiased;
  }
  .skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 10px 0; z-index:100; font-weight:600}
  .skip-link:focus{left:0}
  .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  a{color:var(--primary)}
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}

  /* ---------- header ---------- */
  .topbar{background:var(--card); border-bottom:1px solid var(--line)}
  .topbar-inner{max-width:var(--page-max); margin:0 auto; padding:.8rem 1.5rem; display:flex; align-items:center; gap:1rem}
  .brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink)}
  .brand-mark{
    width:38px; height:38px; border-radius:11px; flex:none;
    background:conic-gradient(from 220deg, #4338CA, #7C3AED, #DD2590, #F79009, #4338CA);
    display:grid; place-items:center; color:#fff; font-weight:700; font-size:.95rem;
  }
  .brand-mark span{background:rgba(16,24,40,.25); width:30px; height:30px; border-radius:8px; display:grid; place-items:center}
  .brand-name{font-weight:700; letter-spacing:-.01em}
  .role-chip{background:var(--teal-soft); color:#0A6E63; font-size:.78rem; font-weight:700; padding:.18rem .6rem; border-radius:999px; letter-spacing:.02em}
  .account{margin-left:auto; display:flex; align-items:center; gap:.75rem}
  .account form{display:flex; align-items:center; gap:.75rem}
  .account .signout{
    font:inherit; font-weight:600; color:var(--ink-2); background:none; border:1px solid transparent;
    border-radius:10px; padding:.4rem .7rem; cursor:pointer;
    transition:background .18s var(--ease), border-color .18s var(--ease);
  }
  .account .signout:hover{background:var(--bg); border-color:var(--line)}
  .acc-name{display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--ink-2)}
  .nav-toggle{position:absolute; width:1px; height:1px; opacity:0}
  .burger{
    display:none; margin-left:.25rem; width:44px; height:40px; border:1px solid var(--line); border-radius:10px;
    background:var(--card); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .burger span{display:block; width:18px; height:2px; border-radius:2px; background:var(--ink-2); transition:transform .25s var(--ease), opacity .2s var(--ease)}
  #navtoggle:checked ~ .topbar .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  #navtoggle:checked ~ .topbar .burger span:nth-child(2){opacity:0}
  #navtoggle:checked ~ .topbar .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  #navtoggle:focus-visible ~ .topbar .burger{outline:3px solid var(--focus); outline-offset:2px}
  @media (max-width:760px){
    .burger{display:flex}
    .mainnav-inner{flex-direction:column; gap:0; max-height:0; overflow:hidden; padding:0 1rem; transition:max-height .35s var(--ease)}
    #navtoggle:checked ~ .mainnav .mainnav-inner{max-height:760px}
    .mainnav a{padding:.85rem .4rem; border-bottom:1px solid rgba(255,255,255,.14)}
    .mainnav a:last-child{border-bottom:none}
    .mainnav a::after{display:none}
    .acc-name{display:none}
    .role-chip{display:none}
  }
  .avatar{width:30px; height:30px; border-radius:50%; background:var(--teal-soft); color:#0A6E63; display:grid; place-items:center; font-size:.8rem; font-weight:700}

  /* ---------- nav (managers only; plain client users have no tabs, wireframe 13) ---------- */
  .mainnav{background:linear-gradient(90deg,#312E81 0%, #3730A3 55%, #4338CA 100%); position:sticky; top:0; z-index:50; box-shadow:0 2px 10px -4px rgba(49,46,129,.4)}
  .mainnav-inner{max-width:var(--page-max); margin:0 auto; padding:0 1.5rem; display:flex; gap:.25rem; overflow-x:auto}
  .mainnav a{
    position:relative; text-decoration:none; color:#C7D2FE; font-weight:600; font-size:.95rem;
    padding:.85rem 1rem; white-space:nowrap; transition:color .18s var(--ease);
  }
  .mainnav a::after{
    content:""; position:absolute; left:1rem; right:1rem; bottom:0; height:3px; border-radius:3px 3px 0 0;
    background:#FDB022; transform:scaleX(0); transform-origin:center; transition:transform .22s var(--ease);
  }
  .mainnav a:hover{color:#fff}
  .mainnav a:hover::after{transform:scaleX(.6)}
  .mainnav a[aria-current="page"]{color:#fff}
  .mainnav a[aria-current="page"]::after{transform:scaleX(1)}

  /* ---------- page ---------- */
  .page{max-width:var(--page-max); margin:0 auto; padding:2rem 1.5rem 3rem}
  .page-head{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:1.6rem}
  .page-head h1{font-size:1.55rem; letter-spacing:-.02em}
  .page-head .sub{color:var(--ink-3); font-size:.95rem; margin-top:.15rem}
  .page-actions{margin-left:auto; display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
  .btn{
    display:inline-flex; align-items:center; gap:.5rem; font:inherit; font-weight:600; cursor:pointer;
    border-radius:10px; padding:.62rem 1.1rem; border:none; text-decoration:none;
    transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--primary); color:#fff}
  .btn-primary:hover{background:var(--primary-strong); box-shadow:0 6px 16px -6px rgba(67,56,202,.45); transform:translateY(-1px)}
  .btn-secondary{background:var(--card); color:var(--ink); border:1px solid var(--line)}
  .btn-secondary:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm); transform:translateY(-1px)}
  .btn-danger{background:var(--card); color:var(--red); border:1px solid var(--line)}
  .btn-danger:hover{border-color:var(--red); box-shadow:var(--shadow-sm)}
  .btn-sm{padding:.4rem .8rem; font-size:.88rem}
  .btn[disabled], .btn.disabled{opacity:.5; cursor:not-allowed; pointer-events:none}

  /* ---------- flash ---------- */
  .flash{display:flex; align-items:center; gap:.6rem; border-radius:var(--radius); padding:.85rem 1.1rem; margin-bottom:1.4rem; font-weight:600; border:1px solid}
  .flash-success{background:var(--teal-soft); color:#0A6E63; border-color:#99E3D8}
  .flash-error{background:var(--red-soft); color:var(--red); border-color:#FDA29B}
  .flash-warning{background:var(--amber-soft); color:var(--amber); border-color:#FEC84B}

  /* ---------- self-referral link box (wireframes 9/13) ---------- */
  .selflink{display:flex; flex-direction:column; gap:.25rem}
  .selflink .label{font-weight:600; font-size:.85rem; color:var(--ink-2)}
  .selflink-row{display:flex; gap:.4rem; align-items:center}
  .selflink-row input{
    font:inherit; font-size:.88rem; padding:.5rem .7rem; border-radius:10px; border:1px solid #D0D5DD;
    background:#fff; color:var(--ink-3); width:240px;
  }

  /* ---------- panel + filters ---------- */
  .panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:1.6rem}
  .panel-head{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--line)}
  .panel-head h2{font-size:1.05rem; letter-spacing:-.01em}
  .panel-body{padding:1.25rem}
  .tabs{display:flex; gap:.25rem; flex-wrap:wrap}
  .tab{
    font:inherit; font-weight:600; font-size:.92rem; color:var(--ink-3); background:none; border:none;
    padding:.5rem .9rem; border-radius:999px; cursor:pointer; text-decoration:none;
    transition:background .18s var(--ease), color .18s var(--ease);
  }
  .tab:hover{background:var(--grey-soft); color:var(--ink)}
  .tab[aria-current="page"]{background:var(--primary-soft); color:var(--primary-strong)}
  .tab .count{font-weight:700; opacity:.65; margin-left:.3rem; font-size:.85rem}
  .search{position:relative}
  .search svg{position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--ink-3)}
  .search input{
    font:inherit; padding:.55rem .9rem .55rem 2.4rem; border-radius:10px; border:1px solid #D0D5DD;
    width:340px; max-width:100%; background:#fff;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease), width .25s var(--ease);
  }
  .search input:hover{border-color:#B8BFC9}
  .search input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}

  /* ---------- table ---------- */
  .table-wrap{overflow-x:auto}

  /* A copy of the bulk upload header row, pinned under the navigation by
     script while the table is in view. A sticky thead cannot do this: the
     table scrolls horizontally inside .table-wrap, so a sticky row pins to
     that container rather than to the page. Sits under .mainnav, which is
     z-index 50, and takes no pointer events so the row beneath stays live. */
  .sticky-head{position:fixed; z-index:40; overflow:hidden; pointer-events:none; background:var(--grey-soft); box-shadow:0 3px 8px -5px rgba(16,24,40,.5)}
  .sticky-head table{table-layout:fixed; border-collapse:collapse}
  table{width:100%; border-collapse:collapse; font-size:.9rem}
  table.wide{min-width:1040px}
  caption{position:absolute; left:-9999px}
  thead th{
    text-align:left; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3);
    background:var(--grey-soft); padding:.7rem .55rem; border-bottom:1px solid var(--line); white-space:nowrap;
  }
  thead th:first-child, tbody td:first-child{padding-left:1.1rem}
  thead th:last-child, tbody td:last-child{padding-right:1.1rem}
  tbody td{padding:.85rem .55rem; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap}
  tbody tr{transition:background .15s var(--ease)}
  tbody tr:hover{background:#FAFBFF}
  tbody tr:last-child td{border-bottom:none}
  .ref-name{font-weight:600}
  .ref-sub{color:var(--ink-3); font-size:.84rem}
  .mono{font-variant-numeric:tabular-nums; color:var(--ink-2)}
  .empty-row td{text-align:center; color:var(--ink-3); padding:2.2rem .55rem}

  .badge{display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700; padding:.22rem .7rem; border-radius:999px}
  .badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
  .badge-teal{background:var(--teal-soft); color:#0A6E63}
  .badge-indigo{background:var(--primary-soft); color:var(--primary-strong)}
  .badge-amber{background:var(--amber-soft); color:var(--amber)}
  .badge-red{background:var(--red-soft); color:var(--red)}
  .badge-grey{background:var(--grey-soft); color:var(--ink-3)}

  /* Hover/focus explanation, e.g. on status badges. */
  .tip{position:relative; display:inline-block; cursor:help}
  .tip .badge{text-decoration:underline dotted; text-underline-offset:3px}
  .tip[data-tip]:hover::after, .tip[data-tip]:focus-visible::after{
    content:attr(data-tip); position:absolute; left:0; top:calc(100% + 5px); z-index:60;
    background:var(--card); color:var(--ink-2); border:1px solid var(--line); border-radius:10px;
    padding:.45rem .65rem; font-size:.78rem; font-weight:500; line-height:1.45;
    white-space:normal; width:max-content; max-width:300px; box-shadow:var(--shadow-md);
  }

  /* progress bar (wireframes 9/13/14) */
  .progress{display:flex; align-items:center; gap:.55rem; min-width:130px}
  .progress .bar{flex:1; height:8px; border-radius:999px; background:var(--grey-soft); overflow:hidden}
  .progress .bar span{display:block; height:100%; border-radius:999px; background:var(--teal); transition:width .3s var(--ease)}
  .progress .pct{font-size:.82rem; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums}

  .panel-foot{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:1rem 1.25rem; border-top:1px solid var(--line)}
  .pagination{margin-left:auto; display:flex; align-items:center; gap:.3rem; color:var(--ink-3); font-size:.9rem}
  .page-btn{
    display:inline-grid; place-items:center; font:inherit; font-weight:600; min-width:34px; height:34px; border-radius:8px;
    border:1px solid transparent; background:none; color:var(--ink-2); cursor:pointer; text-decoration:none;
    transition:background .18s var(--ease), border-color .18s var(--ease);
  }
  .page-btn:hover{background:var(--grey-soft)}
  .page-btn[aria-current="page"]{background:var(--primary-soft); color:var(--primary-strong); border-color:transparent}
  .page-btn.disabled{opacity:.4; pointer-events:none}

  /* ---------- forms ---------- */
  .form-section{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.4rem; margin-bottom:1.4rem}
  .form-section > h2{font-size:1.05rem; letter-spacing:-.01em; margin-bottom:.35rem}
  .form-section > .sub{color:var(--ink-3); font-size:.9rem; margin-bottom:1rem}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.4rem}
  @media (max-width:760px){ .form-grid{grid-template-columns:1fr} }
  .field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem}
  .field .hint{color:var(--ink-3); font-size:.82rem; margin-top:.3rem}
  .field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=date], .field input[type=number],
  .field input[type=password], .field input[type=file], .field select, .field textarea{
    font:inherit; width:100%; padding:.55rem .8rem; border-radius:10px; border:1px solid #D0D5DD; background:#fff;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .field textarea{min-height:7.5rem; resize:vertical}
  .field input:hover, .field select:hover, .field textarea:hover{border-color:#B8BFC9}
  .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}
  .field input[readonly]{background:var(--grey-soft); color:var(--ink-3)}
  .field .error{color:var(--red); font-size:.84rem; font-weight:600; margin-top:.3rem}

  /* Checkbox rows inside a field, such as confirming a reused reference. */
  .check{display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem}
  .check input{width:18px; height:18px; margin-top:.15rem; accent-color:var(--primary); flex:none}
  .form-actions{display:flex; justify-content:flex-end; gap:.6rem; margin-bottom:1.4rem}

  /* toggle switch (wireframe teal) */
  /* `.field label{display:block}` is (0,1,1) and outranks a bare class,
     so a toggle inside a field loses its flex and renders as a stacked
     block. The second selector wins outright rather than on source
     order, because the two rules sit in a different order in each
     layout block. Every use is a <label class="toggle">. */
  .toggle, .field label.toggle{
    position:relative; display:inline-flex; align-items:center; gap:.55rem; margin:0;
    cursor:pointer; font-weight:600; font-size:.9rem;
  }
  .toggle input{position:absolute; width:1px; height:1px; opacity:0}
  .toggle .track{
    width:40px; height:22px; border-radius:999px; background:#D0D5DD; position:relative; flex:none;
    transition:background .18s var(--ease);
  }
  .toggle .track::after{
    content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff;
    box-shadow:var(--shadow-sm); transition:transform .18s var(--ease);
  }
  .toggle input:checked + .track{background:var(--teal)}
  .toggle input:checked + .track::after{transform:translateX(18px)}
  .toggle input:focus-visible + .track{outline:3px solid var(--focus); outline-offset:2px}

  /* notice blocks inside forms (wireframe 10 warnings) */
  .notice{border-radius:10px; padding:.85rem 1rem; font-size:.9rem; font-weight:500; border:1px solid; margin:.8rem 0}
  .notice-warning{background:var(--amber-soft); border-color:#FEC84B; color:var(--amber)}
  .notice-error{background:var(--red-soft); border-color:#FDA29B; color:var(--red)}
  .notice-info{background:var(--primary-soft); border-color:#C7D2FE; color:var(--primary-strong)}

  /* repeatable hub referral blocks (wireframe 10) + referral cards (wireframe 14) */
  .item-card{border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; margin-bottom:1rem; background:var(--card)}
  .item-card .item-head{display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem}
  .item-card .item-head h3{font-size:.98rem}
  .item-card .item-head .spacer{margin-left:auto; display:flex; gap:.5rem}
  .kv{font-size:.9rem}
  .kv > div{display:flex; gap:1rem; padding:.42rem 0; border-bottom:1px solid var(--grey-soft)}
  .kv > div:last-child{border-bottom:none}
  .kv dt{flex:none; width:170px; color:var(--ink-3); font-weight:600}
  .kv dd{margin:0; min-width:0; overflow-wrap:anywhere; white-space:normal}
  .card-actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem}

  /* detail page two-column layout (wireframe 14) */
  .detail-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.4rem; align-items:start}
  @media (max-width:1000px){ .detail-grid{grid-template-columns:1fr} }
  .side-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.2rem; margin-bottom:1.4rem}
  .side-panel h2{font-size:1rem; margin-bottom:.8rem}
  .side-panel table{font-size:.84rem}
  .side-panel td, .side-panel th{padding:.5rem .4rem; white-space:normal}

  /* bulk upload steps (wireframe 11) */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.4rem}
  @media (max-width:900px){ .steps{grid-template-columns:1fr} }
  .step-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.2rem}
  .step-card h2{font-size:1rem; margin-bottom:.4rem}
  .step-card .sub{color:var(--ink-3); font-size:.9rem; margin-bottom:.9rem}

  footer{border-top:1px solid var(--line); background:var(--card); margin-top:3rem}
  .footer-inner{max-width:var(--page-max); margin:0 auto; padding:1.4rem 1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--ink-3); font-size:.9rem}
  .footer-links{display:flex; gap:1.4rem}
  .footer-links a{color:var(--ink-3); text-decoration:none; font-weight:500; transition:color .18s var(--ease)}
  .footer-links a:hover{color:var(--ink)}

  .rise{opacity:0; transform:translateY(12px); animation:rise .55s var(--ease) forwards}
  .rise.d1{animation-delay:.07s} .rise.d2{animation-delay:.14s}

/* ----- bulk upload review (page: bulk-review body class) ----- */
/* This screen carries the most columns in the portal: let it use
           nearly the full display rather than the standard page cap. */
        

        .review-table{width:100%}
        .review-table thead th, .review-table tbody td{padding:.5rem .3rem}
        .review-table thead th:first-child, .review-table tbody td:first-child{padding-left:1rem}
        .review-table thead th:last-child, .review-table tbody td:last-child{padding-right:1rem}
        .review-table tbody td{vertical-align:top}
        .review-table tbody input[type=text],
        .review-table tbody input[type=email],
        .review-table tbody input[type=tel],
        .review-table tbody input[type=date],
        .review-table tbody select{
            font:inherit; font-size:.82rem; padding:.32rem .4rem; border-radius:8px;
            border:1px solid #D0D5DD; background:#fff; width:100%; min-width:0;
            height:32px; /* one control height so the source lines align across the row */
        }
        .review-table tbody input[type=text]{min-width:5rem}
        .review-table tbody input[type=email]{min-width:8rem}
        .review-table tbody input[type=tel]{min-width:6.4rem}
        .review-table tbody input[type=date]{min-width:7.8rem}
        .review-table tbody select{min-width:5.6rem}
        .review-table tbody input:focus, .review-table tbody select:focus{
            outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(67,56,202,.14);
        }
        .review-table tbody input[type=checkbox]{width:18px; height:18px; accent-color:var(--primary); margin-top:.45rem}
        .review-table tbody input[type=checkbox]:disabled{opacity:.35; cursor:not-allowed}
        .review-table td{white-space:normal}
        .review-table .status-cell{min-width:120px}
        .row-remove{padding:.25rem .55rem; font-size:1rem; line-height:1}
        .row-created td{font-size:.85rem; color:var(--ink-2); background:#F6FEF9}
        .review-table tbody .field-error{
            border:2px solid #D92D20; background:#FEE4E2; padding:calc(.32rem - 1px) calc(.4rem - 1px);
            box-shadow:0 0 0 3px rgba(217,45,32,.28);
        }
        .review-table tbody .field-warn{
            border:2px solid #F79009; background:#FEF0C7; padding:calc(.32rem - 1px) calc(.4rem - 1px);
            box-shadow:0 0 0 3px rgba(247,144,9,.32);
        }

        /* Hub match icon: round (the square boxes are the confirm
           checkboxes), sits with the uploaded hub value. */
        .hub-source-row{display:flex; align-items:center; gap:.35rem; margin-top:.3rem}
        .hub-source-row .cell-source{margin-top:0; flex:1; min-width:0}
        .hub-match{
            flex:none; width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
            font-size:.68rem; font-weight:700; color:#fff; cursor:help;
        }
        .hub-match-exact{background:var(--teal-strong)}
        .hub-match-fuzzy{background:#DC6803}
        .hub-match-none{background:var(--red)}

        /* The value as uploaded: one line, fade + ellipsis when long,
           full value pops over everything on hover or focus. */
        .source-label, .cell-source{
            display:block; margin-top:.3rem; font-size:.74rem; line-height:1.35;
            color:#98A2B3; font-style:italic;
        }
        .cell-source{
            position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
        }
        .cell-source::before{
            content:""; position:absolute; right:0; top:0; bottom:0; width:16px;
            background:linear-gradient(90deg, transparent, var(--card)); pointer-events:none;
        }
        .cell-source:hover::after, .cell-source:focus-visible::after{
            content:attr(data-full); position:absolute; left:0; top:calc(100% + 4px); z-index:60;
            background:var(--card); color:var(--ink-2); border:1px solid var(--line); border-radius:10px;
            padding:.45rem .6rem; font-size:.78rem; font-style:normal; line-height:1.45;
            white-space:normal; width:max-content; max-width:320px; box-shadow:var(--shadow-md);
        }

        /* Review notes pop from the status badge. The badge row shares the
           control height so "Uploaded values:" aligns with the grey values. */
        .status-cell .badge-wrap{position:relative; display:flex; align-items:center; min-height:32px}
        .status-cell .badge-wrap[data-notes]{cursor:help}
        .status-cell .badge-wrap[data-notes] .badge{text-decoration:underline dotted; text-underline-offset:3px}
        .status-cell .badge-wrap[data-notes]:hover::after, .status-cell .badge-wrap[data-notes]:focus-visible::after{
            content:attr(data-notes); position:absolute; left:0; top:calc(100% + 5px); z-index:60;
            background:var(--card); color:var(--ink-2); border:1px solid var(--line); border-radius:10px;
            padding:.45rem .65rem; font-size:.78rem; font-weight:500; line-height:1.45;
            white-space:normal; width:max-content; max-width:300px; box-shadow:var(--shadow-md);
        }
&.bulk-review{--page-max:min(97vw, 1900px)}
}

/* ==================== layout-learner ==================== */
body.layout-learner {
  --radius:16px;
  --learner-max:1280px;
  --shadow-lg:0 16px 40px -12px rgba(16,24,40,.2);
  &{
    font-family:"Google Sans Flex","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg); color:var(--ink); line-height:1.55; font-size:16px;
    -webkit-font-smoothing:antialiased;
  }
  .skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 10px 0; z-index:100; font-weight:600}
  .skip-link:focus{left:0}
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}

  header{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
  .header-inner{max-width:var(--learner-max); margin:0 auto; padding:.9rem 1.5rem; display:flex; align-items:center; gap:1rem}
  .brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink)}
  .brand-mark{
    width:38px; height:38px; border-radius:11px; flex:none;
    background:conic-gradient(from 220deg, #4338CA, #7C3AED, #DD2590, #F79009, #4338CA);
    display:grid; place-items:center; color:#fff; font-weight:700; font-size:.95rem;
  }
  .brand-mark span{background:rgba(16,24,40,.25); width:30px; height:30px; border-radius:8px; display:grid; place-items:center}
  .brand-name{font-weight:700; letter-spacing:-.01em}
  .header-actions{margin-left:auto; display:flex; align-items:center; gap:.4rem}
  .header-link{text-decoration:none; color:var(--ink-2); font-weight:500; padding:.45rem .8rem; border-radius:8px; transition:background .18s var(--ease), color .18s var(--ease)}
  .header-link:hover{background:var(--bg); color:var(--ink)}
  .pill-btn{
    display:flex; align-items:center; gap:.45rem; border:1px solid var(--line); background:var(--card);
    border-radius:8px; padding:.45rem .8rem; font:inherit; font-weight:500; color:var(--ink-2); cursor:pointer;
    text-decoration:none;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .pill-btn:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm)}

  /* ---------- account menu ----------
     One control instead of three. Native <details>, so it opens on click and
     on Enter without a script; a small script closes it on Escape or a click
     elsewhere. */
  .menu{position:relative}
  .menu > summary{
    list-style:none; display:flex; align-items:center; gap:.5rem; cursor:pointer;
    border:1px solid var(--line); background:var(--card); border-radius:8px;
    padding:0 .8rem; height:38px; line-height:1; font-weight:500; color:var(--ink-2);
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .menu > summary::-webkit-details-marker{display:none}
  .menu > summary:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm)}
  .menu > summary .chev{transition:transform .2s var(--ease)}
  .menu[open] > summary .chev{transform:rotate(180deg)}
  .menu[open] > summary{border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.12)}
  .menu-panel{
    position:absolute; right:0; top:calc(100% + 8px); min-width:210px; z-index:60;
    background:var(--card); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow-lg); padding:.45rem; animation:pop .18s var(--ease);
  }
  .menu-panel :is(a, button){
    display:flex; align-items:center; gap:.6rem; width:100%;
    padding:.55rem .65rem; border-radius:8px; text-decoration:none;
    color:var(--ink-2); font:inherit; font-weight:500; text-align:start;
    background:none; border:0; cursor:pointer;
    transition:background .15s var(--ease), color .15s var(--ease);
  }
  .menu-panel :is(a, button):hover{background:var(--primary-soft); color:var(--primary-strong)}
  .menu-panel form{margin:0}

  /* ---------- language, inside the account menu ----------
     Weglot's own switcher is turned off. The language list is ours, in a
     dialog, so it opens where it is asked for and looks like the rest of the
     application. Language names stay untranslated: a person hunting for
     "Polski" should see that word. */
  .menu-meta{margin-left:auto; color:var(--ink-3); font-size:.85rem; font-weight:500}
  .lang-list{list-style:none; display:grid; gap:.25rem; margin:0; padding:0}
  .lang-list button{
    display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%;
    padding:.6rem .75rem; border:1px solid transparent; border-radius:8px;
    background:none; font:inherit; font-weight:500; color:var(--ink-2);
    text-align:start; cursor:pointer;
    transition:background .15s var(--ease), color .15s var(--ease);
  }
  .lang-list button:hover{background:var(--primary-soft); color:var(--primary-strong)}
  .lang-list button[aria-current="true"]{background:var(--primary-soft); color:var(--primary-strong); font-weight:700}
  .lang-list button[aria-current="true"]::after{content:"\2713"}

  /* Dialog, the same shape as the portals use. Scoped here because the public
     and admin layouts already use .modal for a plain overlay box. */
  dialog.modal{
    position:fixed; inset:0; margin:auto;
    border:none; padding:0; width:min(420px, calc(100vw - 3rem));
    max-height:calc(100vh - 4rem); border-radius:var(--radius);
    background:var(--card); color:var(--ink); box-shadow:var(--shadow-lg);
  }
  dialog.modal[open]{display:flex; flex-direction:column}
  dialog.modal::backdrop{background:rgba(16,24,40,.5)}
  .modal-head{
    display:flex; align-items:center; gap:1rem; flex:none;
    padding:1rem 1.25rem; border-bottom:1px solid var(--line);
  }
  .modal-head h2{font-size:1.05rem; letter-spacing:-.01em}
  .modal-close{
    margin-left:auto; flex:none; width:34px; height:34px; border-radius:9px; cursor:pointer;
    border:1px solid var(--line); background:var(--card); color:var(--ink-2);
    font:inherit; font-size:1.1rem; line-height:1;
    transition:background .18s var(--ease), border-color .18s var(--ease);
  }
  .modal-close:hover{background:var(--bg); border-color:#C7CCD4}
  .modal-body{padding:1.1rem 1.25rem 1.35rem; overflow-y:auto}
  .modal-body > p{color:var(--ink-3); font-size:.9rem; margin-bottom:1rem}

  .lang-menu{position:relative}
  .lang-menu summary{
    list-style:none; display:flex; align-items:center; gap:.45rem; cursor:pointer;
    border:1px solid var(--line); background:var(--card); border-radius:8px;
    padding:.45rem .8rem; font-weight:500; color:var(--ink-2);
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .lang-menu summary::-webkit-details-marker{display:none}
  .lang-menu summary:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm)}
  .lang-menu summary .chev{transition:transform .2s var(--ease)}
  .lang-menu[open] summary .chev{transform:rotate(180deg)}
  .lang-menu[open] summary{border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.12)}
  .lang-panel{
    position:absolute; right:0; top:calc(100% + 8px); min-width:230px; z-index:60;
    background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
    padding:.45rem; animation:pop .18s var(--ease);
  }
  
  .lang-panel .hint{font-size:.78rem; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; padding:.45rem .65rem .25rem}
  .lang-panel :is(a, button){
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.55rem .65rem; border-radius:8px; text-decoration:none; color:var(--ink-2); font-weight:500;
    transition:background .15s var(--ease), color .15s var(--ease);
  }
  .lang-panel :is(a, button):hover{background:var(--primary-soft); color:var(--primary-strong)}
  .lang-panel button{appearance:none; background:none; border:0; width:100%; font:inherit; cursor:pointer; text-align:start}
  .lang-panel :is(a, button) .native{color:var(--ink-3); font-size:.85rem; font-weight:400}
  .lang-panel :is(a, button)[aria-current="true"]{background:var(--primary-soft); color:var(--primary-strong); font-weight:700}
  .lang-panel :is(a, button)[aria-current="true"]::after{content:"\2713"; font-weight:700}

  .nav-toggle{position:absolute; width:1px; height:1px; opacity:0}
  .burger{
    display:none; margin-left:auto; width:44px; height:40px; border:1px solid var(--line); border-radius:10px;
    background:var(--card); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .burger span{display:block; width:18px; height:2px; border-radius:2px; background:var(--ink-2); transition:transform .25s var(--ease), opacity .2s var(--ease)}
  #menutoggle:checked ~ header .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  #menutoggle:checked ~ header .burger span:nth-child(2){opacity:0}
  #menutoggle:checked ~ header .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  #menutoggle:focus-visible ~ header .burger{outline:3px solid var(--focus); outline-offset:2px}
  @media (max-width:640px){
    .burger{display:flex; order:2}
    .header-inner{flex-wrap:wrap}
    .header-actions{display:none; width:100%; flex-direction:column; align-items:stretch; gap:.4rem; padding:.65rem 0 .35rem; margin-left:0; order:3}
    #menutoggle:checked ~ header .header-actions{display:flex}
    .header-link{padding:.6rem .4rem; border-radius:8px}
    .lang-menu summary{justify-content:space-between; width:100%}
    .lang-panel{position:static; min-width:0; box-shadow:none; border:none; border-left:3px solid var(--primary-soft); border-radius:0; margin:.3rem 0 0 .4rem; animation:none}
  }
  .page{max-width:var(--learner-max); margin:0 auto; padding:2.5rem 1.5rem 3.5rem}
  .greeting{margin-bottom:2rem}
  .greeting h1{font-size:1.8rem; letter-spacing:-.02em}
  .greeting p{color:var(--ink-3); margin-top:.3rem; max-width:64ch}

  .flash{display:flex; align-items:center; gap:.6rem; border-radius:12px; padding:.85rem 1.1rem; margin-bottom:1.4rem; font-weight:600; border:1px solid}
  .flash-success{background:var(--teal-soft); color:#0A6E63; border-color:#99E3D8}
  .flash-error{background:var(--red-soft); color:var(--red); border-color:#FDA29B}

  .cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:1.4rem}

  .course-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; display:flex; flex-direction:column; position:relative;
    transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  }
  .course-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#D6DAE1}

  .card-banner{height:118px; position:relative; display:flex; align-items:flex-end; padding:1rem}
  .card-banner.indigo{background:linear-gradient(120deg,#4338CA 0%,#7C3AED 90%)}
  .card-banner.teal{background:linear-gradient(120deg,#0E9384 0%,#0891B2 90%)}
  .card-banner.slate{background:linear-gradient(120deg,#334155 0%,#64748B 90%)}
  .card-banner::after{
    content:""; position:absolute; inset:0; opacity:.18;
    background:radial-gradient(120px 120px at 85% 15%, #fff 0%, transparent 70%),
               radial-gradient(90px 90px at 15% 90%, #fff 0%, transparent 65%);
  }
  .banner-chip{
    position:relative; z-index:1; background:rgba(255,255,255,.92); color:var(--ink);
    font-size:.78rem; font-weight:700; padding:.25rem .7rem; border-radius:999px;
  }

  .card-body{padding:1.25rem 1.35rem 1.35rem; display:flex; flex-direction:column; flex:1; gap:.9rem}
  .card-title-row{display:flex; align-items:flex-start; gap:.6rem}
  .card-title{font-size:1.12rem; font-weight:700; letter-spacing:-.01em; line-height:1.3}

  .meta{display:grid; gap:.35rem; font-size:.92rem}
  .meta div{display:flex; justify-content:space-between; gap:1rem}
  .meta dt{color:var(--ink-3)}
  .meta dd{font-weight:600; text-align:right}
  .meta .warn dd{color:var(--red)}

  .progress-block{margin-top:auto}
  .progress-row{display:flex; justify-content:space-between; font-size:.85rem; font-weight:600; color:var(--ink-3); margin-bottom:.4rem}
  .bar{height:8px; background:var(--grey-soft); border-radius:99px; overflow:hidden}
  .fill{height:100%; border-radius:99px; background:var(--primary); transform-origin:left; animation:grow .9s var(--ease) backwards .2s}
  .fill.done{background:var(--teal)}
  .fill.zero{background:transparent}
  

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font:inherit; font-weight:600;
    border:none; cursor:pointer; text-decoration:none; border-radius:10px; padding:.75rem 1.2rem;
    transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .btn-block{width:100%}
  .btn:active{transform:translateY(1px)}
  .btn svg{transition:transform .2s var(--ease)}
  .btn-primary{background:var(--primary); color:#fff}
  .btn-primary:hover{background:var(--primary-strong); box-shadow:0 6px 16px -6px rgba(67,56,202,.5); transform:translateY(-1px)}
  .btn-primary:hover svg{transform:translateX(3px)}
  .btn-primary[aria-disabled="true"]{background:#A5B4FC; cursor:not-allowed; box-shadow:none; transform:none}
  .btn-teal{background:var(--teal-strong); color:#fff}
  .btn-teal:hover{background:var(--teal-deep); box-shadow:0 6px 16px -6px rgba(14,147,132,.5); transform:translateY(-1px)}
  .btn-amber{background:#FDB022; color:#7A2E0E}
  .btn-amber:hover{background:#F79009; box-shadow:0 6px 16px -6px rgba(247,144,9,.5); transform:translateY(-1px)}
  .btn-secondary{background:var(--card); color:var(--ink); border:1px solid var(--line)}
  .btn-secondary:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm)}

  .status-note{display:flex; gap:.5rem; align-items:flex-start; font-size:.88rem; color:var(--ink-3); background:var(--grey-soft); border-radius:10px; padding:.7rem .85rem}
  .status-note.warn{background:var(--amber-soft); color:#7A2E0E}
  .status-note svg{flex:none; margin-top:.15rem}

  .help-band{
    margin-top:2.5rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:1.5rem 1.75rem; display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center;
  }
  .help-band h2{font-size:1.1rem; letter-spacing:-.01em}
  .help-band p{color:var(--ink-3); font-size:.95rem; max-width:56ch}
  .help-band .pill-btn{margin-left:auto}

  /* ---------- hub journey pages (wireframes 32, 51, 52, 4, 6) ---------- */
  .journey-head{display:flex; flex-wrap:wrap; gap:1.2rem; align-items:flex-start; margin-bottom:1.6rem}
  .journey-head .titles{min-width:260px; flex:1}
  .back-link{display:inline-flex; align-items:center; gap:.4rem; color:var(--primary); text-decoration:none; font-weight:600; font-size:.92rem; margin-bottom:.5rem}
  .back-link:hover{text-decoration:underline}
  .journey-head h1{font-size:1.6rem; letter-spacing:-.02em}
  .journey-head .sub{color:var(--ink-3); margin-top:.2rem; max-width:60ch}
  /* Four short facts, so it stays one tight column of label and value. The
     rows share a grid rather than each being its own flex line, which keeps
     the values aligned and lets a long organisation name wrap instead of
     squeezing. */
  .referral-box{
    background:var(--bg); border:1px solid var(--line); border-radius:12px;
    padding:.8rem 1rem; font-size:.86rem;
    display:grid; grid-template-columns:auto minmax(0, 1fr); gap:.35rem .9rem;
    align-content:start; flex:0 1 400px; min-width:260px;
  }
  .referral-box div{display:contents}
  .referral-box dt{color:var(--ink-3); white-space:nowrap}
  .referral-box dd{font-weight:600; text-align:right; overflow-wrap:anywhere; min-width:0}

  .panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.6rem}
  .declaration-text{white-space:pre-line; color:var(--ink-2); margin-bottom:1.4rem}
  .confirm-row{display:flex; align-items:flex-start; gap:.7rem; background:var(--grey-soft); border-radius:12px; padding:1rem 1.1rem; margin-bottom:1.4rem}
  .confirm-row input[type=checkbox]{width:19px; height:19px; accent-color:var(--primary); margin-top:.15rem; cursor:pointer}
  .confirm-row label{font-weight:600; cursor:pointer}
  .panel .error{color:var(--red); font-weight:600; font-size:.9rem; margin-bottom:1rem}
  .panel-actions{display:flex; justify-content:flex-end; gap:.7rem}

  /* Likert (wireframes 51/52) */
  .likert-item{border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.2rem; margin-bottom:1rem; background:var(--card)}
  .likert-item .q{font-weight:600; margin-bottom:.85rem}
  .likert-options{display:flex; flex-wrap:wrap; gap:.55rem}
  .likert-options label{
    display:inline-flex; align-items:center; gap:.45rem; border:1px solid #D0D5DD; border-radius:999px;
    padding:.5rem 1rem; font-weight:600; font-size:.9rem; color:var(--ink-2); cursor:pointer; background:var(--card);
    transition:border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
  }
  .likert-options label:hover{border-color:var(--primary)}
  .likert-options input{accent-color:var(--teal); cursor:pointer}
  .likert-options label:has(input:checked){background:var(--teal-strong); border-color:var(--teal-strong); color:#fff}
  .likert-options label:has(input:checked) input{accent-color:#fff}

  /* Course player (wireframe 4) */
  .course-frame-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden}
  .course-frame{display:block; width:100%; height:min(78vh, 860px); border:0; background:#fff}
  .save-indicator{font-size:.85rem; color:var(--ink-3); padding:.6rem 1rem; border-top:1px solid var(--line); display:flex; gap:.5rem; align-items:center}
  .save-indicator .dot{width:8px; height:8px; border-radius:50%; background:#12B76A; flex:none}
  .save-indicator.saving .dot{background:#F79009}
  .save-indicator.error .dot{background:var(--red)}

  /* Completion (wireframe 6) */
  .certificate{
    text-align:center; padding:2.6rem 1.6rem; border:1px solid var(--line); border-radius:var(--radius);
    background:linear-gradient(180deg, #FFFFFF 0%, #F5F7FF 100%); box-shadow:var(--shadow-sm);
  }
  .certificate .badge-ring{
    width:74px; height:74px; margin:0 auto 1.1rem; border-radius:50%; background:var(--teal-soft);
    display:grid; place-items:center; color:var(--teal-strong);
  }
  .certificate h1{font-size:1.7rem; letter-spacing:-.02em; margin-bottom:.4rem}
  .certificate p{color:var(--ink-3); max-width:54ch; margin:0 auto .4rem}
  .certificate .cert-meta{margin:1.2rem auto; display:inline-grid; gap:.3rem; text-align:left; font-size:.95rem}
  .certificate .cert-meta div{display:flex; gap:1.6rem; justify-content:space-between}
  .certificate .cert-meta dt{color:var(--ink-3)}
  .certificate .cert-meta dd{font-weight:700}
  .certificate .actions{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1.2rem}

  footer{border-top:1px solid var(--line); background:var(--card); margin-top:3rem}
  .footer-inner{max-width:var(--learner-max); margin:0 auto; padding:1.4rem 1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--ink-3); font-size:.9rem}
  .footer-links{display:flex; gap:1.4rem}
  .footer-links a{color:var(--ink-3); text-decoration:none; font-weight:500; transition:color .18s var(--ease)}
  .footer-links a:hover{color:var(--ink)}

  .rise{opacity:0; transform:translateY(14px); animation:rise .55s var(--ease) forwards}
  .rise.d1{animation-delay:.08s} .rise.d2{animation-delay:.16s} .rise.d3{animation-delay:.24s}

/* ----- my account (wireframe 5) ----- */
.account-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.4rem; align-items:start}
    @media (max-width:860px){ .account-grid{grid-template-columns:1fr} }
    .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.3rem}
    @media (max-width:640px){ .form-grid{grid-template-columns:1fr} }
    .field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem}
    .field input, .field select{
        font:inherit; width:100%; padding:.55rem .8rem; border-radius:10px; border:1px solid #D0D5DD; background:#fff;
    }
    .field input:focus, .field select:focus{outline:none; border-color:var(--primary, #4338CA); box-shadow:0 0 0 4px rgba(67,56,202,.14)}
    .field input[readonly]{background:#F2F4F7; color:#475467}
    .field .error{color:#B42318; font-size:.84rem; font-weight:600; margin-top:.3rem}
    .field .hint{color:#475467; font-size:.82rem; margin-top:.3rem}
    .demographics-box{background:#F2F4F7; border-radius:12px; padding:1.1rem; margin-top:1.2rem}
    .demographics-box h3{font-size:.95rem; margin-bottom:.2rem}
    .demographics-box .sub{color:#475467; font-size:.82rem; margin-bottom:.9rem}
    .retention p{color:#475467; font-size:.88rem; margin-bottom:.8rem}
    .retention table{width:100%; border-collapse:collapse; font-size:.88rem}
    .retention td{padding:.45rem .3rem; border-bottom:1px solid #E4E7EC}
}

/* ==================== layout-public ==================== */
body.layout-public {
  --page-max:880px;
  &{
    font-family:"Google Sans Flex","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg); color:var(--ink); line-height:1.55; font-size:15.5px;
    -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column;
  }
  .skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 10px 0; z-index:100; font-weight:600}
  .skip-link:focus{left:0}
  a{color:var(--primary)}
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}

  .topbar{background:var(--card); border-bottom:1px solid var(--line)}
  .topbar-inner{max-width:var(--page-max); margin:0 auto; padding:.8rem 1.5rem; display:flex; align-items:center; gap:1rem}
  .brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink)}
  .brand-mark{
    width:38px; height:38px; border-radius:11px; flex:none;
    background:conic-gradient(from 220deg, #4338CA, #7C3AED, #DD2590, #F79009, #4338CA);
    display:grid; place-items:center; color:#fff; font-weight:700; font-size:.95rem;
  }
  .brand-mark span{background:rgba(16,24,40,.25); width:30px; height:30px; border-radius:8px; display:grid; place-items:center}
  .brand-name{font-weight:700; letter-spacing:-.01em}
  .topbar .help{margin-left:auto; font-weight:600; color:var(--ink-2); text-decoration:none}
  .topbar .help:hover{color:var(--ink)}

  .page{max-width:var(--page-max); width:100%; margin:0 auto; padding:2rem 1.5rem 3rem; flex:1}

  /* hero (client-branded intro) */
  .hero{display:flex; gap:1.4rem; align-items:flex-start; margin-bottom:1.8rem}
  .hero .crest{
    flex:none; width:96px; height:96px; border-radius:var(--radius); background:var(--primary-soft);
    display:grid; place-items:center; color:var(--primary-strong); font-size:2rem; font-weight:700;
  }
  .hero h1{font-size:1.5rem; letter-spacing:-.02em; margin-bottom:.35rem}
  .hero p{color:var(--ink-3); max-width:56ch}

  /* Long-form pages: the accessibility statement, and anything else that is
     read rather than filled in. One measure, one rhythm. */
  .prose{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 2rem; max-width:76ch}
  .prose h2{font-size:1.12rem; letter-spacing:-.01em; margin:1.8rem 0 .6rem}
  .prose h2:first-child{margin-top:0}
  .prose p{margin-bottom:1rem; color:var(--ink-2)}
  .prose ul{margin:0 0 1.2rem 1.2rem; color:var(--ink-2)}
  .prose li{margin-bottom:.5rem}
  .prose a{color:var(--primary); text-decoration:underline}
  @media (max-width:640px){ .prose{padding:1.3rem 1.1rem} }

  .flash{border-radius:var(--radius); padding:.85rem 1.1rem; margin-bottom:1.4rem; font-weight:600; border:1px solid}
  .flash-success{background:var(--teal-soft); color:#0A6E63; border-color:#99E3D8}
  .flash-error{background:var(--red-soft); color:var(--red); border-color:#FDA29B}

  .form-section{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.5rem; margin-bottom:1.4rem}
  .form-section > h2{font-size:1.05rem; letter-spacing:-.01em; margin-bottom:1rem}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.4rem}
  @media (max-width:700px){ .form-grid{grid-template-columns:1fr} }
  .field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem}
  .field .hint{color:var(--ink-3); font-size:.82rem; margin-top:.3rem}
  .field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=password],
  .field input[type=date], .field select{
    font:inherit; width:100%; padding:.55rem .8rem; border-radius:10px; border:1px solid #D0D5DD; background:#fff;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .field input:hover, .field select:hover{border-color:#B8BFC9}
  .field input:focus, .field select:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}
  .field .error{color:var(--red); font-size:.84rem; font-weight:600; margin-top:.3rem}

  .demographics{background:var(--grey-soft); border-radius:var(--radius); padding:1.1rem}
  .demographics h3{font-size:.95rem; margin-bottom:.2rem}
  .demographics .sub{color:var(--ink-3); font-size:.82rem; margin-bottom:.9rem}
  .demographics .form-grid{gap:.8rem 1.2rem}

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font:inherit; font-weight:600; cursor:pointer;
    border-radius:10px; padding:.65rem 1.3rem; border:none; text-decoration:none;
    transition:background .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
  }
  .btn-primary{background:var(--primary); color:#fff}
  .btn-primary:hover{background:var(--primary-strong); box-shadow:0 6px 16px -6px rgba(67,56,202,.45); transform:translateY(-1px)}
  .btn-secondary{background:var(--card); color:var(--ink); border:1px solid var(--line)}
  .btn-secondary:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm)}

  .check{display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem}
  .check input{width:18px; height:18px; margin-top:.15rem; accent-color:var(--primary); flex:none}

  /* CSS-only modal via :target (URN explainer, wireframe 49) */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(16,24,40,.55); z-index:90;
    display:none; align-items:flex-start; justify-content:center; padding:3rem 1rem; overflow-y:auto;
  }
  .modal-overlay:target{display:flex}
  .modal{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-md); max-width:560px; width:100%; padding:1.6rem}
  .modal h2{font-size:1.15rem; margin-bottom:.7rem}
  .modal p{color:var(--ink-2); margin-bottom:.8rem}
  .modal .modal-actions{display:flex; justify-content:flex-end; margin-top:1rem}

  /* completion steps (wireframe 50) */
  .steps-list{display:flex; flex-direction:column; gap:1rem; margin:1.6rem 0}
  .step-row{display:flex; align-items:center; gap:1rem}
  .step-row .step-no{flex:none; width:64px; font-weight:700; color:var(--ink-2)}
  .step-row .step-body{
    flex:1; border-radius:10px; border:1.5px solid; padding:.8rem 1rem; font-weight:600; display:flex; align-items:center; gap:.6rem;
  }
  .step-done{background:var(--teal-soft); border-color:#99E3D8; color:#0A6E63}
  .step-next{background:var(--amber-soft); border-color:#FEC84B; color:var(--amber)}

  footer{border-top:1px solid var(--line); background:var(--card)}
  .footer-inner{max-width:var(--page-max); margin:0 auto; padding:1.4rem 1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--ink-3); font-size:.9rem}
  .footer-links{display:flex; gap:1.4rem}
  .footer-links a{color:var(--ink-3); text-decoration:none; font-weight:500}
  .footer-links a:hover{color:var(--ink)}

  .rise{opacity:0; transform:translateY(12px); animation:rise .55s var(--ease) forwards}
  .rise.d1{animation-delay:.07s}
  
  

  /* honeypot: invisible to people, present for bots */
  .leave-blank{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

  /* Slice 17: the language selector, copied from layout-learner. */
  .lang-menu{position:relative}
  .lang-menu summary{
    list-style:none; display:flex; align-items:center; gap:.45rem; cursor:pointer;
    border:1px solid var(--line); background:var(--card); border-radius:8px;
    padding:.45rem .8rem; font-weight:500; color:var(--ink-2);
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .lang-menu summary::-webkit-details-marker{display:none}
  .lang-menu summary:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm)}
  .lang-menu summary .chev{transition:transform .2s var(--ease)}
  .lang-menu[open] summary .chev{transform:rotate(180deg)}
  .lang-menu[open] summary{border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.12)}
  .lang-panel{
    position:absolute; right:0; top:calc(100% + 8px); min-width:230px; z-index:60;
    background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
    padding:.45rem; animation:pop .18s var(--ease);
  }
  
  .lang-panel .hint{font-size:.78rem; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; padding:.45rem .65rem .25rem}
  .lang-panel :is(a, button){
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.55rem .65rem; border-radius:8px; text-decoration:none; color:var(--ink-2); font-weight:500;
    transition:background .15s var(--ease), color .15s var(--ease);
  }
  .lang-panel :is(a, button):hover{background:var(--primary-soft); color:var(--primary-strong)}
  .lang-panel button{appearance:none; background:none; border:0; width:100%; font:inherit; cursor:pointer; text-align:start}
  .lang-panel :is(a, button) .native{color:var(--ink-3); font-size:.85rem; font-weight:400}
  .lang-panel :is(a, button)[aria-current="true"]{background:var(--primary-soft); color:var(--primary-strong); font-weight:700}
  .lang-panel :is(a, button)[aria-current="true"]::after{content:"\2713"; font-weight:700}
}

/* ==================== layout-home ==================== */
body.layout-home {
  --radius:16px;
  --home-max:1320px;
  --amber:#F79009;
  &{
  font-family:"Google Sans Flex","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55; font-size:16px;
  -webkit-font-smoothing:antialiased;
  }
  .skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 10px 0; z-index:100; font-weight:600}
  .skip-link:focus{left:0}
  a{color:var(--primary)}
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}

  header{background:rgba(255,255,255,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
  .header-inner{max-width:var(--home-max); margin:0 auto; padding:.85rem 1.5rem; display:flex; align-items:center; gap:1rem}
  .brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink)}
  .brand-mark{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:conic-gradient(from 220deg, #4338CA, #7C3AED, #DD2590, #F79009, #4338CA);
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:.95rem;
  }
  .brand-mark span{background:rgba(16,24,40,.25); width:30px; height:30px; border-radius:8px; display:grid; place-items:center}
  .brand-name{font-weight:700; letter-spacing:-.01em}
  .header-actions{margin-left:auto; display:flex; align-items:center; gap:.5rem}
  .header-link{text-decoration:none; color:var(--ink-2); font-weight:500; padding:.45rem .8rem; border-radius:8px; transition:background .18s var(--ease), color .18s var(--ease)}
  .header-link:hover{background:var(--primary-soft); color:var(--primary-strong)}

  .lang-menu{position:relative}
  .lang-menu summary{
  list-style:none; display:flex; align-items:center; gap:.45rem; cursor:pointer;
  border:1px solid var(--line); background:var(--card); border-radius:8px;
  padding:.45rem .8rem; font-weight:500; color:var(--ink-2);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .lang-menu summary::-webkit-details-marker{display:none}
  .lang-menu summary:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm)}
  .lang-menu summary .chev{transition:transform .2s var(--ease)}
  .lang-menu[open] summary .chev{transform:rotate(180deg)}
  .lang-menu[open] summary{border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.12)}
  .lang-panel{
  position:absolute; right:0; top:calc(100% + 8px); min-width:230px; z-index:60;
  background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
  padding:.45rem; animation:pop .18s var(--ease);
  }
  
  .lang-panel .hint{font-size:.78rem; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; padding:.45rem .65rem .25rem}
  .lang-panel :is(a, button){
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.55rem .65rem; border-radius:8px; text-decoration:none; color:var(--ink-2); font-weight:500;
  transition:background .15s var(--ease), color .15s var(--ease);
  }
  .lang-panel :is(a, button):hover{background:var(--primary-soft); color:var(--primary-strong)}
  .lang-panel button{appearance:none; background:none; border:0; width:100%; font:inherit; cursor:pointer; text-align:start}
  .lang-panel :is(a, button) .native{color:var(--ink-3); font-size:.85rem; font-weight:400}
  .lang-panel :is(a, button)[aria-current="true"]{background:var(--primary-soft); color:var(--primary-strong); font-weight:700}
  .lang-panel :is(a, button)[aria-current="true"]::after{content:"✓"; font-weight:700}

  .nav-toggle{position:absolute; width:1px; height:1px; opacity:0}
  .burger{
  display:none; margin-left:auto; width:44px; height:40px; border:1px solid var(--line); border-radius:10px;
  background:var(--card); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .burger span{display:block; width:18px; height:2px; border-radius:2px; background:var(--ink-2); transition:transform .25s var(--ease), opacity .2s var(--ease)}
  #menutoggle:checked ~ header .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  #menutoggle:checked ~ header .burger span:nth-child(2){opacity:0}
  #menutoggle:checked ~ header .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  #menutoggle:focus-visible ~ header .burger{outline:3px solid var(--focus); outline-offset:2px}
  @media (max-width:640px){
  .burger{display:flex; order:2}
  .header-inner{flex-wrap:wrap}
  .header-actions{display:none; width:100%; flex-direction:column; align-items:stretch; gap:.4rem; padding:.65rem 0 .35rem; margin-left:0; order:3}
  #menutoggle:checked ~ header .header-actions{display:flex}
  .header-link{padding:.6rem .4rem; border-radius:8px}
  .lang-menu summary{justify-content:space-between; width:100%}
  .lang-panel{position:static; min-width:0; box-shadow:none; border:none; border-left:3px solid var(--primary-soft); border-radius:0; margin:.3rem 0 0 .4rem; animation:none}
  }

  .hero-wrap{
  position:relative; overflow:hidden;
  background:
  radial-gradient(640px 420px at 8% -10%, rgba(67,56,202,.16), transparent 60%),
  radial-gradient(560px 400px at 96% 4%, rgba(221,37,144,.11), transparent 60%),
  radial-gradient(500px 380px at 60% 110%, rgba(14,147,132,.13), transparent 62%),
  linear-gradient(180deg,#FBFAFF 0%, #F6F7FE 100%);
  }
  .hero{
  max-width:var(--home-max); margin:0 auto; padding:3.6rem 1.5rem 3.4rem;
  display:grid; grid-template-columns:1.08fr .92fr; gap:3rem; align-items:start;
  }
  @media (max-width:880px){ .hero{grid-template-columns:1fr; padding-top:2.4rem} }
  .eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--teal-soft); color:var(--teal-strong); font-weight:600; font-size:.85rem;
  padding:.35rem .85rem; border-radius:999px; margin-bottom:1.1rem; border:1px solid rgba(14,147,132,.25);
  }
  h1{font-size:clamp(1.9rem, 3.4vw, 2.65rem); line-height:1.12; letter-spacing:-.025em; font-weight:700; margin-bottom:1rem}
  h1 .hl{color:var(--primary)}
  .hero p.lede{color:var(--ink-3); font-size:1.07rem; max-width:46ch; margin-bottom:1.5rem}
  .hero-points{list-style:none; display:grid; gap:.6rem; margin-bottom:1.8rem}
  .hero-points li{display:flex; gap:.65rem; align-items:flex-start; color:var(--ink-2); font-weight:500}
  .tick{flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin-top:.1rem}
  .tick.t1{background:var(--teal-soft); color:var(--teal-strong)}
  .tick.t2{background:var(--primary-soft); color:var(--primary-strong)}
  .tick.t3{background:var(--pink-soft); color:#B01B74}

  .img-slot{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid rgba(16,24,40,.07)}
  .img-slot .tag{
  position:absolute; bottom:10px; right:10px; z-index:2;
  background:rgba(16,24,40,.55); color:#fff; font-size:.7rem; font-weight:600;
  padding:.2rem .55rem; border-radius:999px; letter-spacing:.03em;
  }
  .img-slot svg{display:block; width:100%; height:auto}

  .login-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.9rem; box-shadow:var(--shadow-lg); max-width:430px; width:100%; justify-self:end;
  }
  @media (max-width:880px){ .login-card{justify-self:stretch; max-width:none} }
  .login-card h2{font-size:1.3rem; letter-spacing:-.01em; margin-bottom:.35rem}
  .login-card .sub{color:var(--ink-3); font-size:.95rem; margin-bottom:1.35rem}
  .field{margin-bottom:1.05rem}
  .field label{display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem}
  .field input{
  width:100%; font:inherit; padding:.7rem .85rem; border-radius:10px;
  border:1px solid #D0D5DD; background:#fff; color:var(--ink);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .field input:hover{border-color:#B8BFC9}
  .field input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}
  .field .error{color:#B42318; font-size:.88rem; font-weight:600; margin-top:.4rem}
  .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:600; border:none; cursor:pointer; text-decoration:none;
  border-radius:10px; padding:.78rem 1.4rem;
  transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--primary); color:#fff; width:100%}
  .btn-primary:hover{background:var(--primary-strong); box-shadow:0 6px 16px -6px rgba(67,56,202,.5); transform:translateY(-1px)}
  .btn-light{background:#fff; color:var(--indigo-deep)}
  .btn-light:hover{background:#EEF2FF; transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
  .btn-teal{background:var(--teal-strong); color:#fff}
  .btn-teal:hover{background:var(--teal-deep); transform:translateY(-1px); box-shadow:0 6px 16px -6px rgba(14,147,132,.5)}
  .forgot{display:block; text-align:center; margin-top:1rem; font-size:.92rem; font-weight:500}

  .band-client{
  background:linear-gradient(115deg, var(--indigo-deep) 0%, #4338CA 55%, #6D28D9 100%);
  color:#fff; position:relative; overflow:hidden;
  }
  .band-client::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(420px 280px at 90% -20%, rgba(221,37,144,.35), transparent 65%),
  radial-gradient(380px 300px at -5% 120%, rgba(14,147,132,.3), transparent 60%);
  }
  .band-client-inner{
  max-width:var(--home-max); margin:0 auto; padding:3.4rem 1.5rem; position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center;
  }
  @media (max-width:820px){ .band-client-inner{grid-template-columns:1fr} }
  .band-client h2{font-size:1.55rem; letter-spacing:-.015em; margin-bottom:.6rem}
  .band-client p{color:#DDD9FF; max-width:56ch; margin-bottom:1.5rem}
  .band-client .img-slot{border-color:rgba(255,255,255,.18); box-shadow:0 20px 50px -16px rgba(0,0,0,.45)}

  /* ---------- band-partner ---------- */
  .band-partner{
  background:linear-gradient(180deg, var(--teal-tint) 0%, #ECFEF8 55%, #F3FDFB 100%);
  border-top:1px solid var(--teal-line); position:relative; overflow:hidden;
  }
  .band-partner::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:radial-gradient(560px 380px at 96% -10%, rgba(67,56,202,.10), transparent 62%),
  radial-gradient(420px 320px at -6% 108%, rgba(221,37,144,.07), transparent 60%);
  }
  .band-partner-inner{max-width:var(--home-max); margin:0 auto; padding:6rem 1.5rem 6.5rem; position:relative; z-index:1}

  .partner-head{max-width:66ch; margin:0 auto; text-align:center}
  .partner-head .eyebrow{margin-bottom:1.5rem}
  .partner-head h2{font-size:clamp(1.6rem, 2.8vw, 2.2rem); letter-spacing:-.02em; margin-bottom:1.1rem}
  .partner-head p{color:var(--ink-3); font-size:1.03rem}
  .partner-head p + p{margin-top:1rem}

  .stat-list{display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; max-width:940px; margin:4.5rem auto 0; text-align:center}
  @media (max-width:640px){ .stat-list{grid-template-columns:1fr; gap:2.6rem} }
  .stat .figure{
  display:block; font-size:clamp(2.4rem, 4vw, 3.1rem); font-weight:700; letter-spacing:-.04em;
  line-height:1; font-variant-numeric:tabular-nums; color:var(--teal-strong);
  }
  .stat .label{display:block; margin-top:.75rem; color:var(--ink-3); font-size:.95rem; line-height:1.45}
  .stat:nth-child(2) .figure{color:var(--primary)}
  .stat:nth-child(3) .figure{color:var(--violet-deep)}

  .partner-block{margin-top:5.5rem; text-align:center}
  .partner-block > h3{font-size:1.25rem; letter-spacing:-.015em; margin-bottom:.6rem}
  .partner-block > .block-sub{color:var(--ink-3); margin:0 auto 3rem; max-width:62ch}

  /* ---------- model of change ---------- */
  .moc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:3.4rem; max-width:1060px; margin:0 auto}
  @media (max-width:860px){ .moc-grid{grid-template-columns:1fr; gap:3.2rem} }
  .moc{position:relative; padding:0 .5rem}
  @media (min-width:861px){
  .moc + .moc::before{content:""; position:absolute; left:-1.7rem; top:.3rem; bottom:.3rem; width:1px; background:rgba(10,110,99,.18)}
  }
  .moc .icon{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; margin:0 auto 1.3rem; background:var(--teal-soft); color:var(--teal-strong)}
  .moc:nth-child(2) .icon{background:var(--primary-soft); color:var(--primary-strong)}
  .moc:nth-child(3) .icon{background:var(--pink-soft); color:#B01B74}
  .moc h4{font-size:1.12rem; letter-spacing:-.015em; margin-bottom:.7rem}
  .moc p{color:var(--ink-3); font-size:.95rem}
  .moc p + p{margin-top:.9rem}

  /* ---------- service user journey ---------- */
  .journey{position:relative}
  .journey-track{display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; position:relative; z-index:1; list-style:none; margin:0; padding:0}
  .journey-rail{
  position:absolute; top:31px; left:10%; right:10%; height:5px; border-radius:5px; z-index:0;
  background:linear-gradient(90deg, var(--teal-strong) 0%, var(--primary) 50%, var(--violet-deep) 100%);
  }
  /* Steps two and four are samples of the rail gradient, not palette entries. */
  .jstep{text-align:center; padding:0 .5rem}
  .jstep:nth-child(1){--i:1; --c:var(--teal-strong); --c-next:#275397}
  .jstep:nth-child(2){--i:2; --c:#275397; --c-next:var(--primary)}
  .jstep:nth-child(3){--i:3; --c:var(--primary); --c-next:#5830D2}
  .jstep:nth-child(4){--i:4; --c:#5830D2; --c-next:var(--violet-deep)}
  .jstep:nth-child(5){--i:5; --c:var(--violet-deep); --c-next:var(--violet-deep)}
  .jstep .node{
  width:66px; height:66px; margin:0 auto 1.3rem; border-radius:50%;
  display:grid; place-items:center; background:var(--c); color:#fff;
  font-size:1.55rem; font-weight:700; letter-spacing:-.02em;
  box-shadow:0 6px 16px -8px var(--c); position:relative;
  animation:node-hit 6.5s var(--ease) infinite;
  animation-delay:calc(var(--i) * 1.15s - 1.15s);
  }
  .jstep h4{font-size:1rem; letter-spacing:-.01em; margin-bottom:.45rem}
  .jstep p{color:var(--ink-3); font-size:.88rem; line-height:1.45}
  @media (max-width:900px){
  .journey-track{grid-template-columns:1fr; gap:0}
  .journey-rail{display:none}
  .jstep{
  text-align:left; display:grid; grid-template-columns:66px 1fr;
  column-gap:1.2rem; row-gap:.35rem; align-content:start;
  padding:0 0 2.3rem; position:relative;
  }
  .jstep::before{content:""; position:absolute; left:31px; top:74px; bottom:2px; width:4px; background:linear-gradient(180deg, var(--c), var(--c-next)); border-radius:4px}
  .jstep:last-child::before{display:none}
  .jstep .node{margin:0; grid-column:1; grid-row:1 / span 2}
  .jstep h4{grid-column:2; align-self:center; margin-top:.5rem}
  .jstep p{grid-column:2}
  }

  /* ---------- the hubs ---------- */
  .hub-cloud{display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center}
  .hub-chip{
  background:var(--indigo-deep); border:1px solid var(--indigo-deep); border-radius:999px;
  padding:.7rem 1.35rem; font-size:1.02rem; font-weight:500; color:#fff;
  transition:background .18s var(--ease), transform .18s var(--ease);
  }
  .hub-chip:hover{background:#251F63; transform:translateY(-1px)}
  .hub-chip.more{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; font-weight:600;
  background:var(--teal-strong); border-color:var(--teal-strong); color:#fff;
  }
  .hub-chip.more:hover{background:var(--teal-deep); border-color:var(--teal-deep); gap:.7rem; transform:translateY(-1px)}

  /* ---------- closing call to action ---------- */
  .partner-cta{
  margin-top:5.5rem; border-radius:var(--radius); padding:2.8rem 2.6rem; color:#fff;
  background:linear-gradient(115deg, var(--indigo-deep) 0%, var(--primary) 60%, var(--teal) 130%);
  display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; box-shadow:var(--shadow-lg);
  }
  @media (max-width:820px){ .partner-cta{grid-template-columns:1fr; padding:1.8rem} }
  .partner-cta h3{font-size:1.35rem; letter-spacing:-.015em; margin-bottom:.4rem}
  .partner-cta p{color:#DDD9FF; max-width:56ch}
  .cta-actions{display:flex; gap:.7rem; flex-wrap:wrap}
  .btn-outline{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45)}
  .btn-outline:hover{background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-1px)}

  footer{background:#0F172A; color:#94A3B8}
  .footer-inner{
  max-width:var(--home-max); margin:0 auto; padding:1.8rem 1.5rem;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; font-size:.92rem;
  }
  .footer-links{display:flex; gap:1.4rem}
  .footer-links a{color:#94A3B8; text-decoration:none; font-weight:500; transition:color .18s var(--ease)}
  .footer-links a:hover{color:#fff}
  /* Dark footer: the global hover colour is near-black. */
  .contrast-toggle{color:#94A3B8}
  .contrast-toggle:hover{color:#fff}

  .rise{opacity:0; transform:translateY(14px); animation:rise .6s var(--ease) forwards}
  .rise.d1{animation-delay:.08s} .rise.d2{animation-delay:.16s} .rise.d3{animation-delay:.24s}
  
  .float{animation:float 7s ease-in-out infinite}
}

/* ==================== layout-client-login ==================== */
body.layout-client-login {
  &{
    font-family:"Google Sans Flex","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg); color:var(--ink); line-height:1.55; font-size:15.5px;
    min-height:100vh; display:grid; place-items:center; padding:1.5rem;
    -webkit-font-smoothing:antialiased;
  }
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}
  .card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-md); width:100%; max-width:420px; padding:2.2rem;
  }
  .brand{display:flex; align-items:center; gap:.65rem; margin-bottom:1.6rem}
  .brand-mark{
    width:42px; height:42px; border-radius:12px; flex:none;
    background:conic-gradient(from 220deg, #4338CA, #7C3AED, #DD2590, #F79009, #4338CA);
    display:grid; place-items:center; color:#fff; font-weight:700;
  }
  .brand-mark span{background:rgba(16,24,40,.25); width:33px; height:33px; border-radius:9px; display:grid; place-items:center}
  .brand-name{font-weight:700; letter-spacing:-.01em}
  h1{font-size:1.3rem; letter-spacing:-.02em; margin-bottom:.3rem}
  .sub{color:var(--ink-3); font-size:.92rem; margin-bottom:1.4rem}
  label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem}
  input{
    font:inherit; width:100%; padding:.6rem .85rem; border-radius:10px; border:1px solid #D0D5DD;
    background:#fff; margin-bottom:1rem;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  input:hover{border-color:#B8BFC9}
  input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}
  .error{color:var(--red); background:var(--red-soft); border:1px solid #FDA29B; border-radius:10px; padding:.7rem .9rem; font-size:.88rem; font-weight:600; margin-bottom:1rem}
  button{
    font:inherit; font-weight:600; width:100%; cursor:pointer; border:none; border-radius:10px;
    background:var(--primary); color:#fff; padding:.7rem 1.1rem;
    transition:background .18s var(--ease), box-shadow .18s var(--ease);
  }
  button:hover{background:var(--primary-strong); box-shadow:0 6px 16px -6px rgba(67,56,202,.45)}
}



/* ==================== layout-admin-login ==================== */
/* Deliberately dark — the inverse of the client login, so staff always
   know which door they're at. Amber is the admin accent (nav underline). */
body.layout-admin-login {
  &{
    font-family:"Google Sans Flex","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:#E0E7FF; line-height:1.55; font-size:15.5px;
    min-height:100vh; display:grid; place-items:center; padding:1.5rem;
    -webkit-font-smoothing:antialiased;
    background:
      radial-gradient(640px 420px at 12% -10%, rgba(124,58,237,.35), transparent 60%),
      radial-gradient(520px 380px at 95% 110%, rgba(14,147,132,.22), transparent 62%),
      linear-gradient(135deg, #1E1B4B 0%, #312E81 55%, #3730A3 100%);
  }
  :focus-visible{outline:3px solid #FDB022; outline-offset:2px; border-radius:6px}
  .card{
    background:rgba(255,255,255,.06); border:1px solid rgba(199,210,254,.22);
    border-radius:16px; backdrop-filter:blur(12px);
    box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
    width:100%; max-width:420px; padding:2.2rem;
  }
  .brand{display:flex; align-items:center; gap:.65rem; margin-bottom:1.6rem}
  .brand-mark{
    width:42px; height:42px; border-radius:12px; flex:none;
    background:conic-gradient(from 220deg, #4338CA, #7C3AED, #DD2590, #F79009, #4338CA);
    display:grid; place-items:center; color:#fff; font-weight:700;
  }
  .brand-mark span{background:rgba(16,24,40,.35); width:33px; height:33px; border-radius:9px; display:grid; place-items:center}
  .brand-name{font-weight:700; letter-spacing:-.01em; color:#fff}
  .admin-chip{
    margin-left:auto; background:rgba(253,176,34,.16); color:#FDB022;
    border:1px solid rgba(253,176,34,.4); font-size:.72rem; font-weight:700;
    padding:.18rem .6rem; border-radius:999px; letter-spacing:.08em;
  }
  h1{font-size:1.3rem; letter-spacing:-.02em; margin-bottom:.3rem; color:#fff}
  .sub{color:#A5B4FC; font-size:.92rem; margin-bottom:1.4rem}
  label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem; color:#C7D2FE}
  input{
    font:inherit; width:100%; padding:.6rem .85rem; border-radius:10px;
    border:1px solid rgba(199,210,254,.3); background:rgba(16,24,40,.35); color:#fff;
    margin-bottom:1rem; transition:border-color .18s, box-shadow .18s;
  }
  input:hover{border-color:rgba(199,210,254,.5)}
  input:focus{outline:none; border-color:#FDB022; box-shadow:0 0 0 4px rgba(253,176,34,.18)}
  .error{
    color:#FDA29B; background:rgba(180,35,24,.25); border:1px solid rgba(253,162,155,.4);
    border-radius:10px; padding:.7rem .9rem; font-size:.88rem; font-weight:600; margin-bottom:1rem;
  }
  button{
    font:inherit; font-weight:700; width:100%; cursor:pointer; border:none; border-radius:10px;
    background:#FDB022; color:#1E1B4B; padding:.7rem 1.1rem;
    transition:background .18s, box-shadow .18s;
  }
  button:hover{background:#FEC84B; box-shadow:0 6px 18px -6px rgba(253,176,34,.5)}
}

/* ---------- completion report sheet (both portals) ---------- */
body.layout-admin, body.layout-client {
.report-sheet{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:2rem; max-width:880px}
    .report-sheet h1{font-size:1.45rem; letter-spacing:-.02em; margin-bottom:.1rem}
    .report-sheet h2{font-size:1.05rem; margin:1.6rem 0 .6rem; padding-bottom:.3rem; border-bottom:1px solid var(--line)}
    .report-sheet .strap{color:var(--ink-3); margin-bottom:1rem}
    .report-sheet .muted{color:var(--ink-3); font-size:.85rem}
    .report-sheet table.meta{width:100%; border-collapse:collapse; font-size:.92rem}
    .report-sheet table.meta td{padding:.4rem .5rem; border-bottom:1px solid var(--grey-soft)}
    .report-sheet table.meta td.label{color:var(--ink-3); font-weight:600; width:16%}
    .report-sheet .summary-block{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:.9rem 1.1rem; margin-bottom:1.1rem}
    .report-sheet table.summary{border-collapse:collapse; margin-bottom:.4rem}
    .report-sheet table.summary td{text-align:center; padding:.3rem 1.4rem .3rem 0}
    .report-sheet .big{display:block; font-size:1.4rem; font-weight:700}
    .report-sheet .small{display:block; color:var(--ink-3); font-size:.78rem}
    .report-sheet .sentence{font-weight:700; margin:.3rem 0}
    .report-sheet .up{color:#0A6E63}
    .report-sheet .down{color:var(--red)}
    .report-sheet .likert-row{margin-bottom:.9rem}
    .report-sheet .question{font-weight:600; margin-bottom:.25rem; font-size:.92rem}
    .report-sheet table.bars{width:100%; border-collapse:collapse}
    .report-sheet td.bar-label{width:9%; color:var(--ink-3); font-size:.78rem; padding:.1rem .4rem .1rem 0}
    .report-sheet td.bar-track{width:70%; background:var(--grey-soft); border-radius:5px; padding:0}
    .report-sheet td.bar-score{width:6%; text-align:center; font-weight:700}
    .report-sheet td.change-cell{width:15%; text-align:center; vertical-align:middle}
    .report-sheet .bar{height:10px; border-radius:5px; font-size:1px}
    .report-sheet .bar-pre{background:#94A3F2}
    .report-sheet .bar-post{background:var(--teal)}
    .report-sheet .change{font-weight:700; padding:.15rem .6rem; border-radius:999px; font-size:.85rem}
    .report-sheet .change-up{background:var(--teal-soft); color:#0A6E63}
    .report-sheet .change-down{background:var(--red-soft); color:var(--red)}
    .report-sheet .change-flat{background:var(--grey-soft); color:var(--ink-3)}
    .report-sheet table.interactions{width:100%; border-collapse:collapse; font-size:.88rem}
    .report-sheet table.interactions th{text-align:left; background:var(--grey-soft); padding:.5rem .6rem; border-bottom:1px solid var(--line)}
    .report-sheet table.interactions td{padding:.5rem .6rem; border-bottom:1px solid var(--grey-soft); vertical-align:top}
    .report-sheet .report-footer{margin-top:1.6rem; padding-top:.6rem; border-top:1px solid var(--line); color:var(--ink-3); font-size:.78rem}
    .report-sheet .reflection{margin-bottom:.9rem}
    .report-sheet .reflection-q{font-weight:600; margin-bottom:.25rem; font-size:.92rem}
    .report-sheet .reflection-a{margin:0; padding:.55rem .75rem; background:var(--bg); border-left:3px solid var(--teal); border-radius:0 8px 8px 0; white-space:pre-wrap}
}
/* ---------- shared portal components (admin + client) ---------- */
body.layout-admin, body.layout-client {
.tip{position:relative; display:inline-block; cursor:help}
.tip .badge{text-decoration:underline dotted; text-underline-offset:3px}
.tip[data-tip]:hover::after, .tip[data-tip]:focus-visible::after{
    content:attr(data-tip); position:absolute; left:0; top:calc(100% + 5px); z-index:60;
    background:var(--card); color:var(--ink-2); border:1px solid var(--line); border-radius:10px;
    padding:.45rem .65rem; font-size:.78rem; font-weight:500; line-height:1.45;
    white-space:normal; width:max-content; max-width:300px; box-shadow:var(--shadow-md);
  }
.progress{display:flex; align-items:center; gap:.55rem; min-width:130px}
.progress .bar{flex:1; height:8px; border-radius:999px; background:var(--grey-soft); overflow:hidden}
.progress .bar span{display:block; height:100%; border-radius:999px; background:var(--teal); transition:width .3s var(--ease)}
.progress .pct{font-size:.82rem; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums}
/* Defined here as well as in the client scope: without it the admin
   portal renders the visually hidden action-column headings. */
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.detail-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.4rem; align-items:start}
.side-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.2rem; margin-bottom:1.4rem}
.side-panel h2{font-size:1rem; margin-bottom:.8rem}
.side-panel table{font-size:.84rem}
.side-panel td, .side-panel th{padding:.5rem .4rem; white-space:normal}
.kv{font-size:.9rem}
.kv > div{display:flex; gap:1rem; padding:.42rem 0; border-bottom:1px solid var(--grey-soft)}
.kv > div:last-child{border-bottom:none}
.kv dt{flex:none; width:170px; color:var(--ink-3); font-weight:600}
.kv dd{margin:0; min-width:0; overflow-wrap:anywhere; white-space:normal}
.notice{border-radius:10px; padding:.85rem 1rem; font-size:.9rem; font-weight:500; border:1px solid; margin:.8rem 0}
.notice-warning{background:var(--amber-soft); border-color:#FEC84B; color:var(--amber)}
.notice-error{background:var(--red-soft); border-color:#FDA29B; color:var(--red)}
.notice-info{background:var(--primary-soft); border-color:#C7D2FE; color:var(--primary-strong)}
.card-actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem}
.selflink{display:flex; flex-direction:column; gap:.25rem}
.selflink .label{font-weight:600; font-size:.85rem; color:var(--ink-2)}
.selflink-row{display:flex; gap:.4rem; align-items:center}
.selflink-row input{
    font:inherit; font-size:.88rem; padding:.5rem .7rem; border-radius:10px; border:1px solid #D0D5DD;
    background:#fff; color:var(--ink-3); width:240px;
  }
}

/* ---------- admin masthead: dark, matching the admin login ----------
   Stuart's brief: the admin portal should be visually distinct from the
   client portal at a glance. The topbar joins the nav's dark scheme with
   the amber admin accent. Appended after the scope, so it wins. */
body.layout-admin {
  .topbar{background:linear-gradient(115deg, #1E1B4B 0%, #312E81 60%, #3730A3 100%); border-bottom:1px solid rgba(199,210,254,.16)}
  .brand{color:#fff}
  .role-chip{background:rgba(253,176,34,.16); color:#FDB022; border:1px solid rgba(253,176,34,.4)}
  .acc-name{color:#C7D2FE}
  .avatar{background:rgba(255,255,255,.16); color:#fff}
  .account .signout{color:#C7D2FE}
  .account .signout:hover{background:rgba(255,255,255,.08); border-color:rgba(199,210,254,.3)}
  .burger{background:transparent; border-color:rgba(199,210,254,.3)}
  .burger span{background:#C7D2FE}
  .mainnav{box-shadow:inset 0 1px 0 rgba(199,210,254,.12), 0 2px 10px -4px rgba(49,46,129,.4)}
}

/* ---------- section tabs (admin + client) ----------
   Horizontal tab menu for record pages that carry more than one subject.
   The bar is hidden until the tab script runs, so without JavaScript every
   panel stays on the page as a stacked, headed section. */
body.layout-admin, body.layout-client {
  .tabset{margin-bottom:.2rem}
  .tabset-bar{
    display:flex; gap:.2rem; margin-bottom:1.4rem;
    overflow-x:auto; overflow-y:hidden;
    border-bottom:1px solid var(--line); scrollbar-width:none;
  }
  .tabset-bar::-webkit-scrollbar{display:none}
  .tabset-tab{
    position:relative; font:inherit; font-weight:600; font-size:.95rem; color:var(--ink-3);
    background:none; border:none; border-radius:8px 8px 0 0; padding:.75rem 1rem;
    white-space:nowrap; cursor:pointer;
    transition:color .18s var(--ease), background .18s var(--ease);
  }
  .tabset-tab::after{
    content:""; position:absolute; left:.7rem; right:.7rem; bottom:-1px; height:3px;
    border-radius:3px 3px 0 0; background:var(--primary);
    transform:scaleX(0); transform-origin:center; transition:transform .22s var(--ease);
  }
  .tabset-tab:hover{color:var(--ink); background:var(--grey-soft)}
  .tabset-tab[aria-selected="true"]{color:var(--primary-strong)}
  .tabset-tab[aria-selected="true"]::after{transform:scaleX(1)}
  .tabset-tab .count{margin-left:.35rem; font-size:.85rem; font-weight:700; opacity:.7; font-variant-numeric:tabular-nums}
  .tabset-panel:focus-visible{outline:3px solid var(--focus); outline-offset:4px; border-radius:8px}

  /* ---------- wide-screen density ----------
     At 1800px a two column form leaves most of the row empty. Forms flow
     into as many columns as fit at a 300px minimum and stop at 1300px, which
     is four columns and still a working measure. Tables, cards and logs take
     the full width. */
  .form-grid{grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); max-width:1300px}

  /* Every paginated list says the same thing in the same place, because the
     pagination partial supplies the whole bar. */
  .pagination-bar{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; width:100%}
  .pagination-count{margin:0; color:var(--ink-3); font-size:.9rem}

  /* The message detail page still uses a plain key/value ladder. It flows
     into columns on a wide screen rather than running down the left edge. */
  .kv{display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); column-gap:2.4rem}
  .kv > div{border-bottom:1px solid var(--grey-soft)}
  .kv .kv-wide{grid-column:1/-1}

  /* ---------- record cards ----------
     A white card on a white panel disappears. The card sits on the page
     ground instead, which separates it without an edge treatment. */
  .item-card{
    background:var(--primary-soft); border:1px solid #C7D2FE;
    padding:1.15rem 1.25rem; margin-bottom:1rem;
  }
  .item-card > .item-head{
    margin:0 0 1rem; padding-bottom:.8rem; border-bottom:1px solid #C7D2FE;
  }
  .item-card > .item-head h3{font-size:1.02rem; letter-spacing:-.01em}
  .item-card .form-grid, .item-card .card-groups{max-width:none}
  .item-card .field input, .item-card .field select, .item-card .field textarea{background:var(--card)}
  .item-card .progress .bar{background:#D5DBF7; box-shadow:none}

  /* ---------- grouped record detail ----------
     Fields set out as one long label/value ladder read as a list of
     unrelated facts. Group them by subject, label above value, and each
     group holds its own column. */
  .card-groups{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1.3rem 2.2rem}
  .card-group > h4{
    font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
    color:var(--primary-strong); margin-bottom:.7rem;
  }
  .card-group dl{display:grid; gap:.55rem; margin:0}
  .card-group dt{font-size:.78rem; font-weight:600; color:var(--ink-3)}
  .card-group dd{margin:0; font-size:.93rem; overflow-wrap:anywhere}
  .card-groups .group-wide{grid-column:1/-1}

  /* ---------- progress ----------
     Nothing started looks identical to nothing loaded when the track is a
     faint grey line. Zero states the fact and carries the warning colour. */
  .progress .bar{background:#E7EAEE; box-shadow:inset 0 0 0 1px rgba(16,24,40,.08)}
  .progress.is-zero .bar{background:var(--red-soft); box-shadow:inset 0 0 0 1px #FDA29B}
  .progress.is-zero .pct{color:var(--red)}
  .progress.is-done .bar span{background:var(--teal-strong)}
  .progress .state{font-size:.8rem; font-weight:600; color:var(--ink-3)}
  .progress.is-zero .state{color:var(--red)}

  /* ---------- collapsible block ----------
     Used for demographics at the foot of the details tab. Special category
     data on vulnerable people is not on screen until somebody opens it. */
  .collapse{border-top:1px solid var(--line); padding-top:.9rem}
  .collapse > summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; gap:.55rem;
    font-size:1.05rem; font-weight:700; letter-spacing:-.01em; padding:.15rem 0;
  }
  .collapse > summary::-webkit-details-marker{display:none}
  .collapse > summary::after{
    content:""; width:8px; height:8px; margin-left:.15rem;
    border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
    transform:translateY(-2px) rotate(45deg); transition:transform .2s var(--ease);
  }
  .collapse[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
  .collapse > summary:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:6px}
  .collapse-body{padding-top:1.1rem}

  /* ---------- modal ----------
     Adding a record is a decision, not a field further down the page, so it
     happens in a dialog. Native <dialog>, so the backdrop, the focus trap and
     Escape are the browser's job, not ours. */
  .modal{
    position:fixed; inset:0; margin:auto;
    border:none; padding:0; width:min(880px, calc(100vw - 3rem));
    max-height:calc(100vh - 4rem); border-radius:var(--radius);
    background:var(--card); color:var(--ink); box-shadow:var(--shadow-md);
  }
  .modal[open]{display:flex; flex-direction:column}
  .modal::backdrop{background:rgba(16,24,40,.5)}
  .modal-head{
    display:flex; align-items:center; gap:1rem; flex:none;
    padding:1rem 1.25rem; border-bottom:1px solid var(--line);
  }
  .modal-head h2{font-size:1.05rem; letter-spacing:-.01em}
  .modal-close{
    margin-left:auto; flex:none; width:34px; height:34px; border-radius:9px; cursor:pointer;
    border:1px solid var(--line); background:var(--card); color:var(--ink-2);
    font:inherit; font-size:1.1rem; line-height:1;
    transition:background .18s var(--ease), border-color .18s var(--ease);
  }
  .modal-close:hover{background:var(--bg); border-color:#C7CCD4}
  .modal-body{padding:1.4rem 1.5rem 1.5rem; overflow-y:auto}
  .modal-body > p{color:var(--ink-3); font-size:.92rem; margin-bottom:1.3rem}
  .modal-body > .notice{margin:0 0 1.3rem}
  .modal-body .form-grid{max-width:none; gap:1.25rem 1.5rem}
  .modal-body .field + .field{margin-top:1.25rem}
  .modal-body .form-actions{
    margin:1.6rem 0 0; padding-top:1.2rem; border-top:1px solid var(--line);
  }
  .modal-body > .form-actions:last-child{margin-bottom:0}
}

/* ---------- narrow screens, portal header ----------
   The brand, the account links and the menu button ran past the right edge
   below about 640 pixels, which pushed the whole page sideways. The account
   row drops to its own line instead. */
.nav-account{display:none}
@media (max-width:640px){
  /* The account controls move into the menu the button already opens, so
     the header carries the brand and the button and nothing else. */
  body.layout-admin .topbar .account > *:not(.burger),
  body.layout-client .topbar.has-nav .account > *:not(.burger){display:none}
  body.layout-client .topbar:not(.has-nav) .topbar-inner{flex-wrap:wrap; row-gap:.5rem}
  body.layout-client .topbar:not(.has-nav) .account{width:100%; margin-left:0; justify-content:flex-end}

  /* The open menu is taller than a phone screen, so it scrolls in place
     rather than running off the bottom with no way back. */
  body.layout-admin #navtoggle:checked ~ .mainnav .mainnav-inner,
  body.layout-client #navtoggle:checked ~ .mainnav .mainnav-inner{
    max-height:calc(100vh - 4.5rem);
    max-height:calc(100dvh - 4.5rem);
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  /* Same rhythm as the links above: one rule between rows, none after the
     last. The link already takes its line from .mainnav a. */
  .nav-account{display:flex; flex-direction:column}
  .nav-account a,
  .nav-account button{
    font:inherit; font-weight:600; font-size:.95rem; color:#C7D2FE; background:none;
    border:0; border-bottom:1px solid rgba(255,255,255,.14);
    padding:.85rem .4rem; text-align:left; text-decoration:none; cursor:pointer; width:100%;
  }
  .nav-account form{display:contents}
  .nav-account > *:last-child button,
  .nav-account > button:last-child,
  .nav-account > a:last-child{border-bottom:none}

  /* One rule for every row in the open menu, links and buttons alike, so the
     two cannot drift apart. */
  body.layout-admin .mainnav-inner a,
  body.layout-admin .mainnav-inner button,
  body.layout-client .mainnav-inner a,
  body.layout-client .mainnav-inner button{padding:.85rem .4rem}
  .nav-account a:hover,
  .nav-account button:hover{color:#fff}
}

/* ==================== high contrast mode ====================
   Turned on from the account menu and remembered on the device.

   This is not a nudge to the palette. Every soft tint is dropped, text goes
   to near black on white, and anything that carries meaning by colour alone
   gains an outline instead. Every text pair here is at or above 8:1, well
   past the 4.5:1 the AA rule asks for, because the people who turn this on
   are not helped by scraping a pass. */
.contrast-toggle{
  font:inherit; font-weight:500; color:inherit; background:none; border:0;
  padding:0; cursor:pointer; text-align:left;
}
.contrast-toggle:hover{color:var(--ink)}

html[data-contrast="high"]{
  --ink:#000000;
  --ink-2:#141414;
  --ink-3:#1F1F1F;
  --line:#000000;
  --line-control:#000000;
  --placeholder:#1F1F1F;
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --grey-soft:#EDEDED;
  --primary:#1B1464;
  --primary-strong:#1B1464;
  --primary-soft:#FFFFFF;
  --indigo-deep:#1B1464;
  --focus:#000000;
  --red:#8A0F08;
  --red-bright:#8A0F08;
  --red-soft:#FFFFFF;
  --amber:#6B2C00;
  --amber-soft:#FFFFFF;
  --teal:#06544B;
  --teal-strong:#06544B;
  --teal-soft:#FFFFFF;
  --teal-tint:#FFFFFF;
  --pink:#8A0F5A;
  --pink-soft:#FFFFFF;
  --shadow-sm:none;
  --shadow-md:none;
  --shadow-lg:none;
}

/* Controls. The outline is what says "this is a box you type in", so it
   goes to two pixels of black rather than a hairline of grey. */
html[data-contrast="high"] .field input,
html[data-contrast="high"] .field select,
html[data-contrast="high"] .field textarea,
html[data-contrast="high"] .search input,
html[data-contrast="high"] .money,
html[data-contrast="high"] .likert-options label,
html[data-contrast="high"] .criteria-row input,
html[data-contrast="high"] .criteria-row select,
html[data-contrast="high"] .review-table input,
html[data-contrast="high"] .review-table select{border:2px solid #000000}
html[data-contrast="high"] ::placeholder{color:#1F1F1F; opacity:1}

/* Anything that used a tint to carry a state gets a border instead, so the
   state survives on a screen that renders colour badly. */
html[data-contrast="high"] .badge,
html[data-contrast="high"] .chip,
html[data-contrast="high"] .flash,
html[data-contrast="high"] .notice,
html[data-contrast="high"] .item-card,
html[data-contrast="high"] .role-chip{background:#FFFFFF; border:2px solid currentColor}
html[data-contrast="high"] .item-card,
html[data-contrast="high"] .card,
html[data-contrast="high"] .side-panel{border:2px solid #000000; color:var(--ink)}
html[data-contrast="high"] .badge-grey,
html[data-contrast="high"] .chip-indigo,
html[data-contrast="high"] .chip-teal,
html[data-contrast="high"] .chip-amber,
html[data-contrast="high"] .chip-red{color:#000000}
html[data-contrast="high"] .badge-teal,
html[data-contrast="high"] .flash-success{color:#06544B}
html[data-contrast="high"] .badge-indigo{color:#1B1464}
html[data-contrast="high"] .badge-amber,
html[data-contrast="high"] .flash-warning{color:#6B2C00}
html[data-contrast="high"] .badge-red,
html[data-contrast="high"] .flash-error{color:#8A0F08}

/* Buttons. Solid fills, and the outlined ones get a real outline. */
html[data-contrast="high"] .btn-primary,
html[data-contrast="high"] .btn-teal{background:#1B1464; color:#FFFFFF; border:2px solid #1B1464}
html[data-contrast="high"] .btn-primary:hover,
html[data-contrast="high"] .btn-teal:hover{background:#000000; border-color:#000000; transform:none}
html[data-contrast="high"] .btn-secondary{background:#FFFFFF; color:#000000; border:2px solid #000000}
html[data-contrast="high"] .btn-danger{background:#FFFFFF; color:#8A0F08; border:2px solid #8A0F08}
html[data-contrast="high"] .btn-amber{background:#6B2C00; color:#FFFFFF; border:2px solid #6B2C00}
html[data-contrast="high"] .btn-light{background:#FFFFFF; color:#1B1464; border:2px solid #1B1464}

/* Navigation and headers. The gradient goes; one solid indigo carries white
   at 15.8:1. */
html[data-contrast="high"] .mainnav{background:#1B1464}
html[data-contrast="high"] .topbar,
html[data-contrast="high"] header{border-bottom:2px solid #000000; background:#FFFFFF; backdrop-filter:none}
html[data-contrast="high"] .mainnav a{color:#FFFFFF}
html[data-contrast="high"] .mainnav a[aria-current="page"]{background:#FFFFFF; color:#1B1464}

/* Links carry an underline, so they do not rely on colour alone. */
html[data-contrast="high"] .page a:not(.btn):not(.brand):not(.tabset-tab),
html[data-contrast="high"] .footer-links a{text-decoration:underline}

/* State that was drawn in colour alone. */
html[data-contrast="high"] .progress .bar{background:#FFFFFF; border:1px solid #000000}
html[data-contrast="high"] .progress .bar span{background:#000000}
html[data-contrast="high"] .toggle input:checked + .track,
html[data-contrast="high"] .switch input:checked + .slider{background:#06544B}
html[data-contrast="high"] .tabset-tab[aria-selected="true"]{border-bottom-width:4px}

/* Focus. Black on white, thicker, and never hidden behind a soft ring. */
html[data-contrast="high"] :focus-visible{outline:4px solid #000000; outline-offset:2px}
html[data-contrast="high"] .field input:focus,
html[data-contrast="high"] .field select:focus,
html[data-contrast="high"] .field textarea:focus{outline:4px solid #000000; outline-offset:1px; box-shadow:none}

/* Tables and dividers. */
html[data-contrast="high"] tbody td{border-bottom:1px solid #000000}
html[data-contrast="high"] thead th{color:#000000; border-bottom:2px solid #000000}

/* Scoped with body.layout-home: the band's own rules are nested under it, so a
   plain html[data-contrast] rule loses on specificity. */
html[data-contrast="high"] body.layout-home .band-partner{background:#FFFFFF; border-top:2px solid #000000}
html[data-contrast="high"] body.layout-home .band-partner::after{display:none}
html[data-contrast="high"] body.layout-home .jstep{--c:#1B1464; --c-next:#1B1464}
html[data-contrast="high"] body.layout-home .journey-rail{background:#1B1464}
html[data-contrast="high"] body.layout-home .moc + .moc::before{background:#000000}
html[data-contrast="high"] body.layout-home .moc .icon{background:#FFFFFF; border:2px solid currentColor}
html[data-contrast="high"] body.layout-home .moc:nth-child(3) .icon{color:#8A0F5A}
html[data-contrast="high"] body.layout-home .stat .figure{color:#1B1464}
html[data-contrast="high"] body.layout-home .hub-chip{background:#1B1464; border-color:#1B1464; color:#FFFFFF}
html[data-contrast="high"] body.layout-home .hub-chip.more{background:#06544B; border-color:#06544B}
html[data-contrast="high"] body.layout-home .partner-cta{background:#1B1464; box-shadow:none}
html[data-contrast="high"] body.layout-home .partner-cta p{color:#FFFFFF}