/* =====================================================================
   ODS DIGITAL PLATFORM — Homepage mockup
   Brand tokens: change the values in :root to swap in ODS's real brand.
   ===================================================================== */
:root{
  /* --- Brand palette: derives from the per-tenant ColorTokens injected by the layout
         (--primary, --accent, --cta, …), with the ODS mockup values as fallbacks. --- */
  --ods-primary:        var(--primary, #0F4C81);
  --ods-primary-dark:   var(--primary-dark, #0A3A63);
  --ods-primary-tint:   var(--primary-tint, #E7EEF5);
  --ods-accent:         var(--accent, #1B9AAA);
  --ods-accent-dark:    var(--accent-dark, #0E7681);
  --ods-accent-tint:    var(--accent-tint, #E3F3F5);
  --ods-cta:            var(--cta, #F59E0B);
  --ods-cta-dark:       var(--cta-dark, #B7740A);
  --ods-cta-ink:        var(--cta-ink, #0A3A63);

  /* --- Neutrals --- */
  --ods-ink:            var(--ink, #1A2733);
  --ods-ink-soft:       var(--ink-soft, #56697B);
  --ods-bg:             var(--bg, #FFFFFF);
  --ods-surface:        var(--surface, #F5F8FB);
  --ods-surface-2:      var(--surface-2, #EEF3F8);
  --ods-border:         var(--border, #E1E8EF);
  --ods-success:        #0B7C57;
  --ods-error:          #B42318;

  /* --- Shape & motion --- */
  --radius:   14px;
  --radius-lg:22px;
  --radius-pill:999px;
  --shadow-sm: 0 1px 2px rgba(16,40,67,.06), 0 1px 3px rgba(16,40,67,.08);
  --shadow:    0 6px 18px rgba(16,40,67,.08), 0 2px 6px rgba(16,40,67,.06);
  --shadow-lg: 0 18px 48px rgba(16,40,67,.16);
  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--ods-ink);
  background:var(--ods-bg);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body{
  font-family:'Noto Sans Arabic','Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}
img{ max-width:100%; display:block; }
a{ color:var(--ods-accent-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ line-height:1.2; margin:0 0 .5em; color:var(--ods-ink); font-weight:700; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

/* Focus visibility (keyboard) */
:focus-visible{
  outline:3px solid var(--ods-accent-dark);   /* 5.35:1 on white — passes 1.4.11 on all surfaces */
  outline-offset:2px;
  border-radius:6px;
}

/* Skip link */
.skip-link{
  position:absolute; inset-inline-start:12px; top:-60px;
  background:var(--ods-primary); color:#fff; padding:10px 16px;
  border-radius:8px; z-index:200; transition:top .2s var(--ease); font-weight:600;
}
.skip-link:focus{ top:12px; text-decoration:none; }

/* Layout helpers */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
/* Small layout utilities — replace common inline styles. */
.u-inline{ display:inline; }
.ico-15{ width:15px; height:15px; }
.u-mt-0{ margin-top:0; }
.u-m-0{ margin:0; }
.u-mb-12{ margin:0 0 12px; }
.u-mb-18{ margin-bottom:18px; }
.u-mb-22{ margin-bottom:22px; }
.u-mt-14{ margin-top:14px; }
.u-mt-18{ margin-top:18px; }
.u-narrow{ max-width:460px; margin:24px auto; text-align:center; }
.mform.u-full{ max-width:none; }
.section{ padding-block:72px; }
.section--tint{ background:var(--ods-surface); }
.section__head{ max-width:680px; margin:0 auto 44px; text-align:center; }
.eyebrow{
  display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ods-accent-dark);
  background:var(--ods-accent-tint); padding:6px 14px; border-radius:var(--radius-pill);
  margin-bottom:14px;
}
.section__head h1, .section__head h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); margin-bottom:10px; }
.section__head p{ color:var(--ods-ink-soft); font-size:1.05rem; margin:0; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:.98rem; font-family:inherit; line-height:1;
  padding:13px 22px; border-radius:var(--radius-pill); border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space:nowrap; text-decoration:none;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--ods-primary); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--ods-primary-dark); }
.btn--cta{ background:var(--ods-cta); color:var(--ods-cta-ink); box-shadow:0 6px 16px rgba(245,158,11,.32); }
.btn--cta:hover{ background:var(--ods-cta-dark); color:#fff; }
.btn--ghost{ background:#fff; color:var(--ods-primary); border-color:var(--ods-border); }
.btn--ghost:hover{ border-color:var(--ods-primary); background:var(--ods-primary-tint); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--outline-light:hover{ background:rgba(255,255,255,.12); }
.btn--sm{ padding:10px 16px; font-size:.9rem; }
.btn--block{ width:100%; }

.icon{ width:20px; height:20px; flex:none; stroke-width:2; }
.icon--sm{ width:16px; height:16px; }

/* Placeholder marker (visible cue for assets ODS must supply) */
/* Tasteful, context-aware "sample" flags for demo content (replaces the old
   PLACEHOLDER badges). White chip + amber text so it reads as intentional. */
.sample-flag{ position:absolute; top:10px; inset-inline-end:10px; z-index:3;
  font-size:.62rem; font-weight:700; letter-spacing:.03em;
  background:#FFFFFF; color:#8A5708; border:1px solid #F3D8A0;
  padding:3px 9px; border-radius:var(--radius-pill); pointer-events:none;
  box-shadow:0 1px 3px rgba(16,40,67,.12); white-space:nowrap; }

/* =======================  TOP BAR  ======================= */
.topbar{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--ods-border); }
.topbar__inner{ display:flex; align-items:center; gap:16px; height:74px; }
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand__logo{
  width:50px; height:50px; border-radius:13px; flex:none;
  background:linear-gradient(135deg,var(--ods-primary),var(--ods-accent));
  display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-sm);
}
.brand__logo svg{ width:30px; height:30px; }
/* Photo logo: a fixed box the image is fitted inside. The image is centred and contained by default;
   branding applies a transform (translate + scale) so the admin can zoom and pan it within the box.
   overflow:hidden clips a zoomed-in image to the box. */
.brand__logo--photo{ background:transparent; box-shadow:none; padding:0; overflow:hidden; }
.brand__logo--photo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  display:block; transform-origin:center; }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__text strong{ font-size:1.02rem; color:var(--ods-primary); letter-spacing:-.01em; }
.brand__text span{ font-size:.72rem; color:var(--ods-ink-soft); font-weight:500; }

.mainnav{ margin-inline-start:auto; }
.mainnav ul{ display:flex; align-items:center; gap:2px; }
.mainnav a{
  color:var(--ods-ink); font-weight:500; font-size:.93rem; padding:9px 10px;
  border-radius:9px; display:inline-block; white-space:nowrap;
}
.mainnav a:hover{ background:var(--ods-primary-tint); color:var(--ods-primary); text-decoration:none; }

.topbar__actions{ display:flex; align-items:center; gap:10px; flex:none; }
.lang-toggle{
  display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-weight:600;
  font-size:.88rem; color:var(--ods-primary); background:var(--ods-primary-tint);
  border:1px solid transparent; padding:9px 14px; border-radius:var(--radius-pill); cursor:pointer;
  transition:background .2s var(--ease);
}
.lang-toggle:hover{ background:var(--ods-surface-2); }

.toplink{ font-weight:600; font-size:.92rem; color:var(--ods-primary); padding:9px 8px;
  border-radius:8px; white-space:nowrap; }
.toplink:hover{ color:var(--ods-primary-dark); text-decoration:none; background:var(--ods-primary-tint); }

/* Signed-in role indicator (Admin / Member / Operator) */
.rolebadge{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700;
  letter-spacing:.02em; padding:4px 10px; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
.rolebadge__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.rolebadge--admin{ color:#1D4ED8; background:#E6EEFF; border-color:#D3E0FF; }
.rolebadge--member{ color:#0E7A4B; background:#E7F6EE; border-color:#CDEBDC; }
.rolebadge--op{ color:#6D28D9; background:#F0E9FF; border-color:#E2D5FB; }
.topbar--dark .rolebadge{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.22); color:#fff; }
@media (max-width:560px){ .rolebadge{ display:none; } }

.menu-btn{ display:none; background:var(--ods-primary-tint); border:none; width:46px; height:46px;
  border-radius:11px; cursor:pointer; color:var(--ods-primary); align-items:center; justify-content:center; }
.menu-btn svg{ width:24px; height:24px; }

/* =======================  HERO  ======================= */
.hero{ position:relative; overflow:hidden; background:
   radial-gradient(1100px 520px at 88% -10%, var(--ods-accent-tint), transparent 60%),
   radial-gradient(900px 480px at -5% 110%, var(--ods-primary-tint), transparent 55%),
   #fff; }
.hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding-block:64px 72px; }
.hero__badge{
  display:inline-flex; align-items:center; gap:9px; font-size:.82rem; font-weight:600;
  color:var(--ods-primary-dark); background:#fff; border:1px solid var(--ods-border);
  padding:7px 15px; border-radius:var(--radius-pill); box-shadow:var(--shadow-sm); margin-bottom:22px;
}
.hero__badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--ods-success); flex:none; }
.hero h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:800; margin-bottom:18px; }
.hero h1 .accent{ color:var(--ods-accent-dark); }
.hero__sub{ font-size:1.16rem; color:var(--ods-ink-soft); max-width:560px; margin-bottom:30px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:22px; }
.hero__meta li{ display:flex; align-items:center; gap:9px; font-size:.92rem; color:var(--ods-ink-soft); font-weight:500; }
.hero__meta svg{ width:19px; height:19px; color:var(--ods-accent-dark); flex:none; }

/* Hero visual — a CSS/SVG "platform" composition (no photos) */
.hero__visual{ position:relative; min-height:440px; }
.hv-card{ position:absolute; background:#fff; border:1px solid var(--ods-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.hv-main{ inset-inline-start:0; top:24px; width:88%; padding:22px; z-index:2; }
.hv-main__top{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.hv-main__top .avatar{ width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,var(--ods-primary),var(--ods-accent)); display:grid; place-items:center; color:#fff; flex:none; }
.hv-main__top .avatar svg{ width:24px; height:24px; }
.hv-main__top .who strong{ display:block; font-size:.95rem; color:var(--ods-ink); }
.hv-main__top .who span{ font-size:.78rem; color:var(--ods-ink-soft); }
.hv-main__top .status{ margin-inline-start:auto; font-size:.72rem; font-weight:700; color:#0A6B4A;
  background:#DCF1E8; padding:5px 11px; border-radius:var(--radius-pill); }
.hv-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.hv-stat{ background:var(--ods-surface); border-radius:12px; padding:12px; text-align:center; }
.hv-stat strong{ display:block; font-size:1.25rem; color:var(--ods-primary); }
.hv-stat span{ font-size:.66rem; color:var(--ods-ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.hv-progress{ font-size:.78rem; color:var(--ods-ink-soft); margin-bottom:7px; display:flex; justify-content:space-between; }
.hv-bar{ height:9px; border-radius:99px; background:var(--ods-surface-2); overflow:hidden; }
.hv-bar i{ display:block; height:100%; width:72%; border-radius:99px;
  background:linear-gradient(90deg,var(--ods-accent),var(--ods-primary)); }
.hv-pill{ position:absolute; background:#fff; border:1px solid var(--ods-border); border-radius:14px;
  box-shadow:var(--shadow); padding:12px 14px; display:flex; align-items:center; gap:11px; z-index:3; }
.hv-pill svg{ width:22px; height:22px; flex:none; }
.hv-pill strong{ display:block; font-size:.84rem; color:var(--ods-ink); line-height:1.2; }
.hv-pill span{ font-size:.72rem; color:var(--ods-ink-soft); }
.hv-pill--events{ inset-inline-end:-6px; top:-8px; }
.hv-pill--events svg{ color:var(--ods-accent-dark); }
.hv-pill--cert{ inset-inline-end:-12px; bottom:74px; }
.hv-pill--cert svg{ color:var(--ods-cta-dark); }
.hv-pill--pay{ inset-inline-start:18px; bottom:6px; }
.hv-pill--pay svg{ color:var(--ods-success); }
.float{ animation:float 6s ease-in-out infinite; }
.float--2{ animation-delay:1.5s; }
.float--3{ animation-delay:.8s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* =======================  TRUST BAR  ======================= */
.trust{ background:var(--ods-primary); color:#fff; }
.trust__inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-block:42px; }
.trust__item{ text-align:center; position:relative; }
.trust__item:not(:last-child)::after{ content:""; position:absolute; inset-inline-end:-12px; top:50%;
  transform:translateY(-50%); width:1px; height:46px; background:rgba(255,255,255,.18); }
.trust__num{ font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; letter-spacing:-.02em; line-height:1; }
.trust__num .plus{ color:var(--ods-cta); }
.trust__label{ font-size:.86rem; color:rgba(255,255,255,.82); margin-top:8px; font-weight:500; }

/* =======================  CARDS (generic)  ======================= */
.grid{ display:grid; gap:24px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.card{ background:#fff; border:1px solid var(--ods-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  overflow:hidden; display:flex; flex-direction:column; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--ods-accent); }
.card__icon{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:var(--ods-accent-tint); color:var(--ods-accent-dark); margin-bottom:16px; }
.card__icon--center{ margin-inline:auto; }   /* centered variant for empty-state cards */
.card__icon svg{ width:26px; height:26px; }

/* Membership */
.mcard{ padding:30px 26px; position:relative; text-decoration:none; }
.mcard--featured{ border:2px solid var(--ods-accent); box-shadow:var(--shadow); }
.mcard__flag{ position:absolute; top:18px; inset-inline-end:18px; font-size:.68rem; font-weight:700;
  color:#fff; background:var(--ods-accent); padding:4px 11px; border-radius:var(--radius-pill); letter-spacing:.04em; }
.mcard h3{ font-size:1.3rem; margin-bottom:4px; }
.mcard__who{ color:var(--ods-ink-soft); font-size:.9rem; margin-bottom:18px; min-height:40px; }
.mcard__price{ display:flex; align-items:baseline; gap:6px; margin-bottom:6px; }
.mcard__price b{ font-size:2.1rem; color:var(--ods-primary); font-weight:800; letter-spacing:-.02em; }
.mcard__price span{ color:var(--ods-ink-soft); font-size:.9rem; }
.mcard__renew{ font-size:.82rem; color:var(--ods-accent-dark); font-weight:600; margin-bottom:18px; }

/* Membership cancellation review page */
/* Balanced card padding on all sides + one consistent 20px gap between every section. */
.cancel-card{ margin-inline:auto; padding:28px; }
.cancel-card .panel-head{ margin-bottom:20px; padding-bottom:18px; }
.cancel-summary{ margin:0 0 20px; padding:4px 16px; border:1px solid var(--ods-border);
  border-radius:12px; background:var(--ods-surface,#f5f8fb); overflow:hidden; }
.cancel-summary > div{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--ods-border); }
.cancel-summary > div:last-child{ border-bottom:0; }
.cancel-summary dt{ color:var(--ods-muted,#5b6b7a); margin:0; font-size:.9rem; }
.cancel-summary dd{ margin:0; font-weight:600; text-align:end; }
/* fee reads like an invoice total: full-width highlighted footer band.
   (needs > div specificity so the row's horizontal padding keeps the text aligned with the rows above) */
.cancel-summary > div.cancel-summary__total{ margin:4px -16px -4px; padding:14px 16px;
  background:var(--ods-primary-tint,#E7EEF5); border-top:1px solid var(--ods-border); }
.cancel-summary__total dt{ color:var(--ods-ink); font-weight:700; font-size:1rem; }
.cancel-summary__total dd{ font-size:1.35rem; font-weight:800; color:var(--ods-primary); white-space:nowrap; }
.cancel-feenote{ font-size:.8rem; margin:0 0 20px; }
.cancel-note{ display:flex; align-items:flex-start; gap:10px; line-height:1.5; }
.alert.cancel-note{ margin:0; }
.cancel-note > svg{ flex:none; width:18px; height:18px; margin-top:2px; opacity:.85; }
.cancel-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; padding-top:18px;
  border-top:1px solid var(--ods-border); }
.cancel-actions form{ margin:0; flex:1 1 190px; }
.cancel-actions > .btn{ flex:1 1 190px; }
.cancel-actions .btn{ width:100%; }
.mcard__list li{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--ods-ink);
  padding:7px 0; }
.mcard__list svg{ width:18px; height:18px; color:var(--ods-success); flex:none; margin-top:2px; }
.mcard .btn{ margin-top:20px; }
.pay-note{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px;
  font-size:.76rem; color:var(--ods-ink-soft); }
.pay-note svg{ width:15px; height:15px; color:var(--ods-success); }

/* Broadcast compose — channel checkboxes */
.broadcast-channels{ border:1px solid var(--line,#e4e9f0); border-radius:12px; padding:12px 14px; margin:6px 0 0; display:flex; gap:22px; flex-wrap:wrap; }
.broadcast-channels legend{ font-size:.78rem; color:#7A8A99; padding:0 4px; }
.broadcast-check{ display:inline-flex; align-items:center; gap:8px; font-size:.9rem; cursor:pointer; }
.broadcast-check input{ width:auto; }

/* Refund summary (finance) */
.refund-summary{ display:flex; flex-wrap:wrap; gap:10px 28px; margin:0 0 18px; padding:14px 16px;
  background:var(--surface,#f7f9fc); border:1px solid var(--line,#e4e9f0); border-radius:12px; }
.refund-summary > div{ display:flex; flex-direction:column; gap:2px; }
.refund-summary dt{ font-size:.75rem; color:#7A8A99; margin:0; }
.refund-summary dd{ margin:0; font-variant-numeric:tabular-nums; }

/* Promo-code disclosure at checkout */
.promo{ margin:0 0 12px; text-align:start; }
.promo > summary{ cursor:pointer; font-size:.82rem; color:var(--ods-primary,#0F4C81); list-style:none;
  display:inline-flex; align-items:center; gap:6px; user-select:none; }
.promo > summary::-webkit-details-marker{ display:none; }
.promo > summary::before{ content:"＋"; font-weight:700; }
.promo[open] > summary::before{ content:"－"; }
.promo__input{ margin-top:8px; width:100%; padding:9px 11px; border:1px solid #D8E0E9; border-radius:9px;
  font-size:.9rem; letter-spacing:.04em; text-transform:uppercase; }
.promo__input:focus{ outline:none; border-color:var(--ods-primary,#0F4C81); box-shadow:0 0 0 3px rgba(15,76,129,.12); }

/* Events */
.ecard{ display:flex; flex-direction:column; }
.ecard__media{ height:215px; position:relative; display:flex; align-items:flex-end; padding:12px;
  background:linear-gradient(135deg,#0b2236,#0e3a52); color:#fff; overflow:hidden; }
.ecard__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:0; display:block; }
.ecard__type{ position:relative; z-index:2; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(8,40,66,.66); padding:5px 11px; border-radius:var(--radius-pill); backdrop-filter:blur(4px); }
.ecard__body{ padding:18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.ecard__date{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ods-accent-dark);
  font-weight:600; margin-bottom:9px; }
.ecard__date svg{ width:16px; height:16px; }
.ecard h3{ font-size:1.06rem; margin-bottom:8px; }
.ecard__meta{ font-size:.84rem; color:var(--ods-ink-soft); margin-bottom:16px; display:flex; flex-direction:column; gap:5px; }
.ecard__meta span{ display:flex; align-items:center; gap:7px; }
.ecard__meta svg{ width:15px; height:15px; color:var(--ods-ink-soft); flex:none; }
.ecard .btn{ margin-top:auto; }

/* Certification band */
.cert{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.cert__list{ margin-top:24px; display:grid; gap:18px; }
.cert__item{ display:flex; gap:15px; }
.cert__item .ico{ width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:#fff; color:var(--ods-accent-dark); box-shadow:var(--shadow-sm); }
.cert__item .ico svg{ width:24px; height:24px; }
.cert__item h3{ margin:0 0 3px; font-size:1.02rem; }
.cert__item p{ margin:0; font-size:.9rem; color:var(--ods-ink-soft); }
.cert__visual{ background:#fff; border:1px solid var(--ods-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:28px; }
.cpd-ring{ display:flex; align-items:center; gap:24px; margin-bottom:22px; }
.cpd-ring svg{ width:118px; height:118px; flex:none; }
.cpd-ring .lbl strong{ font-size:1.7rem; color:var(--ods-primary); display:block; }
.cpd-ring .lbl span{ font-size:.85rem; color:var(--ods-ink-soft); }
.cpd-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0;
  border-top:1px solid var(--ods-border); font-size:.88rem; }
.cpd-row span{ color:var(--ods-ink-soft); }
.cpd-row b{ color:var(--ods-ink); }
.cpd-row .ok{ color:var(--ods-success); display:flex; align-items:center; gap:6px; font-weight:600; }
.cpd-row .ok svg{ width:16px; height:16px; }
.omsb-chip{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:.82rem;
  background:var(--ods-primary-tint); color:var(--ods-primary-dark); padding:9px 14px; border-radius:11px; font-weight:600; }
.omsb-chip svg{ width:18px; height:18px; }

/* CPD dashboard */
.cpd-hero{ position:relative; overflow:hidden; display:flex; align-items:center; gap:34px; margin-bottom:18px;
  background:linear-gradient(120deg, color-mix(in srgb, var(--ods-primary) 7%, #fff), color-mix(in srgb, var(--ods-accent) 9%, #fff));
  border:1px solid color-mix(in srgb, var(--ods-primary) 14%, #eef3f8); }
.cpd-hero::after{ content:""; position:absolute; inset-inline-end:-70px; top:-80px; width:230px; height:230px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--ods-accent) 18%, transparent), transparent 70%); }
.cpd-hero .cpd-ring{ margin:0; position:relative; z-index:1; padding:7px; border-radius:50%;
  background:#fff; box-shadow:0 12px 30px rgba(16,40,67,.13); }
.cpd-hero .cpd-ring svg{ width:140px; height:140px; flex:none; display:block; }
.cpd-dash__now{ position:relative; z-index:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.cpd-dash__eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ods-ink-soft); }
.cpd-dash__now > strong{ font-size:2.2rem; font-weight:800; color:var(--ods-primary); line-height:1.05; letter-spacing:-.02em; }
.cpd-dash__now > strong span{ font-size:.9rem; font-weight:600; color:var(--ods-ink-soft); }
.cpd-progress-row{ display:flex; align-items:center; gap:12px; max-width:380px; margin:11px 0 4px; }
.cpd-progress{ flex:1; height:9px; border-radius:999px; background:#fff; overflow:hidden; margin:0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ods-primary) 10%, transparent); }
.cpd-progress span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--ods-accent),var(--ods-primary)); transition:width .5s var(--ease); }
.cpd-progress__pct{ flex:0 0 auto; font-size:.95rem; font-weight:800; color:var(--ods-primary); letter-spacing:-.01em; }
.cpd-badge{ align-self:flex-start; margin-top:4px; font-size:.82rem; font-weight:600; color:var(--ods-ink-soft);
  background:var(--ods-surface); border:1px solid var(--ods-border); padding:6px 12px; border-radius:999px; }
.cpd-badge--ok{ color:#0E7A4B; background:#E7F6EE; border-color:transparent; }
.cpd-years{ display:flex; flex-direction:column; }
.cpd-year{ display:grid; grid-template-columns:130px 1fr 150px; align-items:center; gap:16px;
  padding:13px 6px; border-top:1px solid var(--ods-border); }
.cpd-year:first-child{ border-top:none; }
.cpd-year__yr{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:1.02rem; color:var(--ods-ink); }
.cpd-year--now .cpd-year__yr{ color:var(--ods-primary); }
.cpd-year__now{ font-size:.64rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--ods-primary); background:var(--ods-primary-tint); padding:3px 8px; border-radius:999px; }
.cpd-year__track{ height:12px; border-radius:999px; background:var(--ods-surface-2); overflow:hidden; }
.cpd-year__fill{ display:block; height:100%; min-width:6px; border-radius:999px;
  background:linear-gradient(90deg,var(--ods-accent),var(--ods-primary)); transition:width .5s var(--ease); }
.cpd-year--now .cpd-year__fill{ background:linear-gradient(90deg,var(--ods-primary),var(--ods-primary-dark)); }
.cpd-year__val{ text-align:end; white-space:nowrap; }
.cpd-year__val strong{ font-size:1.05rem; font-weight:800; color:var(--ods-primary); }
.cpd-year__val .muted{ font-size:.8rem; }
@media (max-width:560px){ .cpd-year{ grid-template-columns:78px 1fr auto; gap:11px; } }
@media (max-width:640px){ .cpd-hero{ flex-wrap:wrap; gap:18px; } }
@media (prefers-reduced-motion: reduce){ .cpd-progress span{ transition:none; } }

/* Directory */
.dir{ background:linear-gradient(135deg,var(--ods-primary),var(--ods-primary-dark)); border-radius:var(--radius-lg);
  padding:48px 44px; color:#fff; box-shadow:var(--shadow); }
.dir__head{ max-width:560px; margin-bottom:28px; }
.dir__head h2{ color:#fff; font-size:clamp(1.5rem,3vw,2.1rem); }
.dir__head p{ color:rgba(255,255,255,.82); margin:0; }
.dir__search{ display:flex; gap:10px; background:#fff; padding:9px; border-radius:var(--radius-pill);
  max-width:620px; box-shadow:var(--shadow); }
.dir__field{ display:flex; align-items:center; gap:9px; flex:1; padding-inline-start:14px; min-width:0; }
.dir__field svg{ width:20px; height:20px; color:var(--ods-ink-soft); flex:none; }
.dir__field input{ border:none; outline:none; font-family:inherit; font-size:.96rem; width:100%;
  color:var(--ods-ink); background:transparent; padding:11px 0; }
.dir__results{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
.dcard{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius);
  padding:18px; backdrop-filter:blur(6px); }
.dcard__top{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.dcard__avatar{ width:46px; height:46px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.16); color:#fff; font-weight:700; font-size:1.05rem; }
.dcard__top strong{ display:block; font-size:.96rem; color:#fff; }
.dcard__top span{ font-size:.78rem; color:rgba(255,255,255,.78); }
.dcard__row{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:rgba(255,255,255,.85); margin-top:6px; }
.dcard__row svg{ width:15px; height:15px; flex:none; color:var(--ods-cta); }
.dcard__verify{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:.74rem;
  font-weight:600; color:#bef0e1; }
.dcard__verify svg{ width:15px; height:15px; }

/* Benefits */
.bcard{ padding:24px; display:flex; gap:16px; align-items:flex-start; position:relative; }
.bcard__logo{ width:54px; height:54px; border-radius:13px; flex:none; display:grid; place-items:center;
  font-weight:800; color:#fff; font-size:1.1rem; }
.bcard h3{ font-size:1.02rem; margin-bottom:4px; }
.bcard p{ font-size:.86rem; color:var(--ods-ink-soft); margin:0 0 10px; }
.bcard .tag{ font-size:.74rem; font-weight:700; color:#8A5708; background:#FEF3DD;
  padding:4px 10px; border-radius:var(--radius-pill); }

/* News */
.ncard{ display:flex; flex-direction:column; }
.ncard__media{ height:180px; background:var(--ods-surface-2); position:relative; overflow:hidden; }
.ncard__media--photo{ background:linear-gradient(135deg,#0b2236,#0e3a52); }
.ncard__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:0; display:block; }
.ncard__media .label{ position:absolute; z-index:2; bottom:0; inset-inline-start:0; margin:12px;
  font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff;
  background:var(--ods-accent-dark); padding:4px 10px; border-radius:var(--radius-pill); }
.ncard__body{ padding:18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.ncard__date{ font-size:.78rem; color:var(--ods-ink-soft); margin-bottom:8px; }
.ncard h3{ font-size:1.04rem; margin-bottom:10px; }
.ncard__body a{ margin-top:auto; font-weight:600; font-size:.88rem; display:inline-flex; align-items:center; gap:6px; }
.ncard__body a svg{ width:16px; height:16px; }
/* Interactive lift on news cards (whole card reads as clickable). */
.ncard{ transition:transform .15s ease, box-shadow .15s ease; }
.ncard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg,0 12px 28px rgba(15,76,129,.14)); }
.ncard:hover .ncard__body a span{ text-decoration:underline; }

/* Featured news hero — the newest story spans full width above the grid. */
.feature-news{ display:grid; grid-template-columns:1.1fr 1fr; gap:0; margin-bottom:24px;
  border:1px solid var(--ods-border,#e4ecf3); border-radius:var(--radius,14px); overflow:hidden;
  background:var(--ods-surface,#fff); color:inherit; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease; }
.feature-news:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg,0 14px 34px rgba(15,76,129,.16)); }
.feature-news__media{ position:relative; min-height:280px; overflow:hidden; }
.feature-news__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.feature-news__media .label{ position:absolute; z-index:2; bottom:0; inset-inline-start:0; margin:14px;
  font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff;
  background:var(--ods-accent-dark); padding:4px 10px; border-radius:var(--radius-pill); }
.feature-news__body{ padding:30px 32px; display:flex; flex-direction:column; justify-content:center; }
.feature-news__body h2{ font-size:1.5rem; line-height:1.25; margin:6px 0 10px; }
.feature-news__body p{ color:var(--ods-ink-soft); margin:0 0 16px; }
.feature-news__cta{ font-weight:700; font-size:.9rem; color:var(--ods-primary); display:inline-flex; align-items:center; gap:7px; }
.feature-news__cta svg{ width:17px; height:17px; }
.feature-news:hover .feature-news__cta{ text-decoration:underline; }
@media (max-width:760px){ .feature-news{ grid-template-columns:1fr; } .feature-news__media{ min-height:200px; } }

/* News article (read-in-app) */
.article{ max-width:760px; margin:0 auto; }
.article__back{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.88rem;
  color:var(--ods-ink-soft); text-decoration:none; margin-bottom:18px; }
.article__back:hover{ color:var(--ods-primary); }
.article__back svg{ width:17px; height:17px; }
.article__title{ font-size:2rem; line-height:1.2; margin:8px 0 12px; }
.article__meta{ display:flex; align-items:center; gap:12px; color:var(--ods-ink-soft); font-size:.9rem; margin-bottom:22px; }
.article__hero{ height:300px; border-radius:var(--radius,14px); overflow:hidden; margin-bottom:26px; position:relative; }
.article__hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.article__lead{ font-size:1.15rem; line-height:1.6; color:var(--ods-ink); font-weight:500; margin:0 0 20px; }
.article__cta{ margin-top:28px; }
.pill--soft{ background:var(--ods-surface-2,#eef4f9); color:var(--ods-primary); font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:3px 10px; border-radius:var(--radius-pill); }
@media (max-width:560px){ .article__title{ font-size:1.55rem; } .article__hero{ height:200px; } }

/* Careers */
.careers{ display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:center; }
.jcard{ display:flex; align-items:center; gap:16px; padding:18px 20px; background:#fff;
  border:1px solid var(--ods-border); border-radius:var(--radius); margin-bottom:12px; transition:border-color .2s var(--ease); }
.jcard:hover{ border-color:var(--ods-accent); }
.jcard__ico{ width:46px; height:46px; border-radius:12px; background:var(--ods-primary-tint);
  color:var(--ods-primary); display:grid; place-items:center; flex:none; }
.jcard__ico svg{ width:23px; height:23px; }
.jcard__main{ flex:1; min-width:0; }
.jcard__main strong{ display:block; font-size:.98rem; }
.jcard__main span{ font-size:.82rem; color:var(--ods-ink-soft); display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:3px; }
.jcard__main span i{ font-style:normal; display:inline-flex; align-items:center; gap:5px; }
.jcard__main svg{ width:14px; height:14px; vertical-align:-2px; }
.jcard__type{ font-size:.72rem; font-weight:700; color:var(--ods-accent-dark);
  background:var(--ods-accent-tint); padding:5px 11px; border-radius:var(--radius-pill); flex:none; }

/* Support strip */
.support{ background:linear-gradient(135deg,var(--ods-accent-dark),var(--ods-primary)); color:#fff;
  border-radius:var(--radius-lg); padding:38px 40px; display:flex; align-items:center; gap:28px; box-shadow:var(--shadow); }
.support__ico{ width:64px; height:64px; border-radius:18px; background:rgba(255,255,255,.16);
  display:grid; place-items:center; flex:none; }
.support__ico svg{ width:32px; height:32px; }
.support__text{ flex:1; min-width:0; }
.support__text h2{ color:#fff; font-size:1.4rem; margin-bottom:5px; }
.support__text p{ color:rgba(255,255,255,.85); margin:0; }

/* =======================  FOOTER  ======================= */
.footer{ background:var(--ods-primary-dark); color:rgba(255,255,255,.78); padding-block:56px 28px; margin-top:8px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.12); }
.footer .brand__text strong{ color:#fff; }
.footer .brand__text span{ color:rgba(255,255,255,.6); }
.footer__about{ margin-top:16px; font-size:.9rem; max-width:300px; line-height:1.7; }
.footer__contact{ margin-top:18px; display:grid; gap:9px; font-size:.88rem; }
.footer__contact li{ display:flex; align-items:flex-start; gap:10px; }
.footer__contact svg{ width:17px; height:17px; color:var(--ods-accent); flex:none; margin-top:3px; }
.footer h3{ color:#fff; font-size:.95rem; margin-bottom:16px; letter-spacing:.02em; }
.footer__links li{ margin-bottom:10px; }
.footer__links a{ color:rgba(255,255,255,.74); font-size:.9rem; }
.footer__links a:hover{ color:#fff; }
.footer__social{ display:flex; gap:10px; margin-top:6px; }
.footer__social a{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.1);
  display:grid; place-items:center; color:#fff; transition:background .2s var(--ease); }
.footer__social a:hover{ background:var(--ods-accent); }
.footer__social svg{ width:19px; height:19px; }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:24px; font-size:.82rem; flex-wrap:wrap; }
.footer__powered{ display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.55); }
.footer__powered b{ color:rgba(255,255,255,.85); font-weight:600; }
.footer__powered .spark{ width:15px; height:15px; color:var(--ods-cta); }

/* =======================  NAV "MORE" DROPDOWN  ======================= */
.has-more{ position:relative; }
.more-btn{ display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-weight:500;
  font-size:.93rem; color:var(--ods-ink); background:none; border:none; cursor:pointer;
  padding:9px 10px; border-radius:9px; white-space:nowrap; }
.more-btn:hover{ background:var(--ods-primary-tint); color:var(--ods-primary); }
.more-btn .chev{ width:15px; height:15px; transition:transform .2s var(--ease); }
.more-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.more-menu{ list-style:none; margin:0; padding:8px; position:absolute; top:calc(100% + 6px); inset-inline-end:0;
  min-width:212px; background:#fff; border:1px solid var(--ods-border); border-radius:14px;
  box-shadow:var(--shadow); flex-direction:column; align-items:stretch; z-index:120; }
/* specificity must beat `.mainnav ul{display:flex}` (0,1,1) — so hide/show is scoped to .mainnav */
.mainnav .more-menu{ display:none; }
.mainnav .more-menu.is-open{ display:flex; }
.more-menu a{ display:block; padding:10px 12px; border-radius:9px; color:var(--ods-ink); font-weight:500; font-size:.92rem; white-space:nowrap; }
.more-menu a:hover{ background:var(--ods-primary-tint); color:var(--ods-primary); text-decoration:none; }
/* The desktop dropdown panel is white, so keep its links dark even on a dark topbar (avoids white-on-white).
   Beats `.topbar--dark .mainnav a` (0,2,1); the mobile is-open menu is re-whitened by a later rule. */
.topbar--dark .mainnav .more-menu a{ color:var(--ods-ink); }
.topbar--dark .mainnav .more-menu a:hover{ color:var(--ods-primary); }
/* Desktop (pointer): open on hover too — keyboard/touch still use the click handler.
   The ::after bridges the button→menu gap so the pointer can cross without closing. */
@media (hover:hover) and (min-width:1200px){
  .mainnav .has-more:hover .more-menu{ display:flex; }
  .mainnav .has-more:hover .more-btn{ background:var(--ods-primary-tint); color:var(--ods-primary); }
  .mainnav .has-more:hover .more-btn .chev{ transform:rotate(180deg); }
  .mainnav .has-more::after{ content:""; position:absolute; top:100%; inset-inline:0; height:8px; }
}

/* =======================  ABOUT THE SOCIETY  ======================= */
.about-intro{ display:grid; grid-template-columns:1.35fr .65fr; gap:34px; align-items:start; margin-bottom:50px; }
.about-intro__text p{ color:var(--ods-ink-soft); }
.about-points{ display:grid; gap:16px; margin-top:20px; }
.about-point{ display:flex; gap:14px; align-items:flex-start; }
.about-point .ico{ width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--ods-accent-tint); color:var(--ods-accent-dark); }
.about-point .ico svg{ width:22px; height:22px; }
.about-point strong{ display:block; color:var(--ods-ink); font-size:1rem; margin-bottom:2px; }
.about-point span{ color:var(--ods-ink-soft); font-size:.9rem; }
.about-facts{ background:linear-gradient(160deg,var(--ods-primary),var(--ods-primary-dark)); color:#fff;
  border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow); }
.about-facts__title{ font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin:0 0 16px; }
.about-facts dl{ margin:0; display:grid; gap:14px; }
.about-facts .fact{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.14); }
.about-facts .fact:last-child{ border-bottom:none; padding-bottom:0; }
.about-facts dt{ color:rgba(255,255,255,.82); font-size:.9rem; }
.about-facts dd{ margin:0; font-weight:800; font-size:1.12rem; }
.about-subhead{ font-size:1.3rem; margin:0 0 22px; }
.about-note{ text-align:center; font-size:.8rem; color:var(--ods-ink-soft); margin:18px 0 0; }
.bmember{ padding:24px; text-align:center; }
.bmember__avatar{ width:84px; height:84px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:1.5rem; background:linear-gradient(135deg,var(--ods-primary),var(--ods-accent)); }
.bmember h4{ font-size:1.05rem; margin:0 0 3px; }
.bmember__role{ color:var(--ods-accent-dark); font-weight:600; font-size:.88rem; margin-bottom:12px; }
.bmember__links{ display:flex; gap:8px; justify-content:center; }
.bmember__links a{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--ods-surface); color:var(--ods-ink-soft); }
.bmember__links a:hover{ background:var(--ods-primary-tint); color:var(--ods-primary); }
.bmember__links svg{ width:17px; height:17px; }
.reports-grid{ margin-top:4px; }
.rcard{ padding:22px 24px; display:flex; gap:16px; align-items:center; }
.rcard__ico{ width:52px; height:64px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--ods-primary-tint); color:var(--ods-primary); }
.rcard__ico svg{ width:26px; height:26px; }
.rcard__body{ flex:1; min-width:0; }
.rcard h3, .rcard h4{ font-size:1.05rem; margin:0 0 3px; }
.rcard__meta{ font-size:.8rem; color:var(--ods-ink-soft); margin-bottom:12px; }

/* =======================  RESEARCH & PUBLICATIONS  ======================= */
.journal{ display:grid; grid-template-columns:.42fr .58fr; gap:0; overflow:hidden; margin-bottom:46px; }
.journal__cover{ background:linear-gradient(160deg,var(--ods-primary),var(--ods-accent-dark)); color:#fff;
  padding:34px; display:flex; flex-direction:column; justify-content:center; min-height:240px; }
.journal__cover .badge{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.16); padding:5px 12px; border-radius:var(--radius-pill); align-self:flex-start; margin-bottom:18px; }
.journal__cover h2, .journal__cover h3{ color:#fff; font-size:1.5rem; margin:0 0 8px; }
.journal__cover .vol{ font-size:.9rem; color:rgba(255,255,255,.82); }
.journal__body{ padding:34px; }
.journal__body p{ color:var(--ods-ink-soft); }
.journal__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.pubcard{ padding:24px; display:flex; flex-direction:column; }
.pubcard__type{ align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 11px; border-radius:var(--radius-pill); margin-bottom:14px; }
.pubcard__type--research{ background:var(--ods-accent-tint); color:var(--ods-accent-dark); }
.pubcard__type--review{ background:var(--ods-primary-tint); color:var(--ods-primary); }
.pubcard__type--case{ background:#FEF3DD; color:#8A5708; }
.pubcard h3, .pubcard h4{ font-size:1.02rem; margin:0 0 10px; line-height:1.35; }
.pubcard__authors{ font-size:.85rem; color:var(--ods-ink-soft); margin-bottom:4px; }
.pubcard__src{ font-size:.82rem; color:var(--ods-accent-dark); font-weight:600; margin-bottom:16px; }
.pubcard a.read{ margin-top:auto; font-weight:600; font-size:.88rem; display:inline-flex; align-items:center; gap:6px; }
.pubcard a.read svg{ width:16px; height:16px; }
.cfa{ margin-top:36px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--ods-border); border-radius:var(--radius-lg); padding:24px 30px; box-shadow:var(--shadow-sm); }
.cfa__ico{ width:54px; height:54px; border-radius:14px; flex:none; display:grid; place-items:center;
  background:var(--ods-accent-tint); color:var(--ods-accent-dark); }
.cfa__ico svg{ width:28px; height:28px; }
.cfa__text{ flex:1; min-width:220px; }
.cfa__text strong{ display:block; font-size:1.1rem; color:var(--ods-ink); margin-bottom:3px; }
.cfa__text span{ color:var(--ods-ink-soft); font-size:.9rem; }

/* Auth links + logout live in the top bar on desktop; on mobile they move into the slide-down menu. */
.nav-auth{ display:none; }

/* =======================  RESPONSIVE  ======================= */
/* Topbar collapses to a hamburger below the container max-width (the full
   horizontal nav + brand + actions needs ~1240px to sit without overflow). */
@media (max-width:1199px){
  .mainnav, .topbar__actions .toplink{ display:none; }
  /* On mobile the top-bar logout is cramped/hidden — hide it and use the one inside the menu instead. */
  .topbar__actions form[action*="Logout"]{ display:none; }
  .mainnav.is-open .nav-auth{ display:flex; flex-direction:column; gap:6px; margin-top:12px;
    padding-top:14px; border-top:1px solid var(--ods-border); }
  .mainnav.is-open .nav-auth a{ padding:12px 14px; border-radius:10px; font-weight:600; color:var(--ods-primary); }
  .mainnav.is-open .nav-auth a:hover{ background:var(--ods-primary-tint); }
  .mainnav.is-open .nav-auth__logout{ margin-top:4px; }
  .mainnav.is-open .nav-auth__logout .btn{ width:100%; }
  .menu-btn{ display:inline-flex; }
  .topbar__actions{ margin-inline-start:auto; }
  .mainnav.is-open{ display:block; position:absolute; top:74px; inset-inline:0; background:#fff;
    border-bottom:1px solid var(--ods-border); box-shadow:var(--shadow); padding:14px 24px; z-index:90; }
  .mainnav.is-open ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .mainnav.is-open a{ padding:12px 14px; border-radius:10px; }
  .mainnav.is-open .mobile-cta{ display:flex; gap:10px; margin-top:12px; }
  .mainnav.is-open .mobile-cta .btn{ flex:1; }
  /* "More" flattens into the slide-down list — no nested dropdown on mobile */
  .more-btn{ display:none; }
  .mainnav .more-menu{ position:static; display:flex; min-width:0; padding:0; border:none; box-shadow:none; background:none; }
  .more-menu a{ padding:12px 14px; }
}
@media (max-width:980px){
  .about-intro{ grid-template-columns:1fr; }
  .journal{ grid-template-columns:1fr; }
  .hero__inner{ grid-template-columns:1fr; gap:36px; }
  .hero__visual{ min-height:380px; max-width:480px; }
  .cert{ grid-template-columns:1fr; gap:34px; }
  .careers{ grid-template-columns:1fr; gap:28px; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .trust__inner{ grid-template-columns:repeat(2,1fr); gap:28px 16px; }
  .trust__item:nth-child(2)::after{ display:none; }
  .dir__results{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:760px){
  .topbar__actions .btn{ display:none; }   /* hide CTA on phones; it lives in the menu */
  .grid--3{ grid-template-columns:1fr; }
  .grid--2{ grid-template-columns:1fr; }
  .section{ padding-block:54px; }
  .support{ flex-direction:column; text-align:center; }
}
@media (max-width:430px){
  .container{ padding-inline:18px; }
  .grid--4{ grid-template-columns:1fr; }
  .trust__inner{ grid-template-columns:1fr; }
  .trust__item::after{ display:none !important; }
  .hero__cta .btn{ width:100%; }
  .dir{ padding:32px 22px; }
  .dir__search{ flex-direction:column; border-radius:var(--radius-lg); }
  .dir__search .btn{ width:100%; }
  /* tighten the brand + lang toggle so topbar fits on small phones */
  .brand__text span{ display:none; }
  .brand__logo{ width:42px; height:42px; }
  .brand__text strong{ font-size:.92rem; }
  .topbar__inner{ gap:10px; }
  .lang-toggle{ padding:9px; }      /* icon-only globe (aria-label keeps it accessible) */
  #langLabel{ display:none; }
}
.mobile-cta{ display:none; }

/* RTL fine-tuning */
html[dir="rtl"] .hv-bar i{ background:linear-gradient(270deg,var(--ods-accent),var(--ods-primary)); }
html[dir="rtl"] .ecard__deco{ transform:scaleX(-1); }

/* Sample-data / placeholder captions */
.trust__note{ grid-column:1 / -1; text-align:center; font-size:.74rem; color:rgba(255,255,255,.62); margin:8px 0 0; }
.fee-note{ text-align:center; font-size:.8rem; color:var(--ods-ink-soft); margin:24px 0 0; }
.dir__sample{ font-size:.76rem; color:rgba(255,255,255,.72); margin:20px 0 2px; font-weight:500; }

/* ===== Subpage breadcrumb ===== */
.crumb{ padding-block:22px 0; }
.crumb a{ font-size:.88rem; font-weight:600; color:var(--ods-accent-dark); display:inline-flex; align-items:center; gap:7px; }
.crumb svg{ width:16px; height:16px; }
html[dir="rtl"] .crumb svg{ transform:scaleX(-1); }

/* =====================================================================
   App utilities — used by the platform's module views (membership, events,
   cpd, content, directory, admin, account). Keeps existing markup styled
   under the ported design system.
   ===================================================================== */
.muted{ color:var(--ods-ink-soft); font-size:.92rem; }
main h2{ font-size:1.5rem; margin:0 0 .6em; }
main .card h3{ margin-top:0; color:var(--ods-primary); }
main table{ border-color:var(--ods-border); }
main table th{ color:var(--ods-ink-soft); font-weight:600; }
main input, main select, main textarea{
  font:inherit; color:var(--ods-ink); background:#fff;
  border:1px solid var(--ods-border); border-radius:10px; padding:9px 11px;
}
main input:focus, main select:focus, main textarea:focus{
  outline:none; border-color:var(--ods-primary); box-shadow:0 0 0 3px var(--ods-primary-tint);
}
main button[type=submit]{ cursor:pointer; }

/* =====================================================================
   Dark top bar — scoped to .topbar--dark, added on every host EXCEPT the
   ODS tenant (which keeps the mockup's light navbar). Text flipped to light.
   ===================================================================== */
.topbar--dark{ background:var(--ods-primary-dark); border-bottom:1px solid rgba(255,255,255,.12); backdrop-filter:none; }
.topbar--dark .brand__text strong{ color:#fff; }
.topbar--dark .brand__text span{ color:rgba(255,255,255,.6); }
.topbar--dark .mainnav a{ color:rgba(255,255,255,.88); }
.topbar--dark .mainnav a:hover{ background:rgba(255,255,255,.12); color:#fff; }
.topbar--dark .lang-toggle{ color:#fff; background:rgba(255,255,255,.12); }
.topbar--dark .lang-toggle:hover{ background:rgba(255,255,255,.22); }
.topbar--dark .toplink{ color:#fff; }
.topbar--dark .toplink:hover{ color:#fff; background:rgba(255,255,255,.12); }
.topbar--dark .menu-btn{ color:#fff; background:rgba(255,255,255,.12); }

/* =====================================================================
   Nav layout polish — applies to both the light (ODS) and dark bars.
   ===================================================================== */
.topbar__inner{ gap:18px; }
.mainnav ul{ gap:6px; }
.mainnav a{ padding:9px 14px; }
.topbar__actions{ gap:8px; }
/* Icon-only language toggle in the header (aria-label keeps it accessible) so the action bar stays compact
   and never clips the Sign out button — e.g. a tenant admin on ODS also shows a role badge + Admin + Portal.
   The full "Switch language" text still appears on the auth pages (.auth-top .lang-toggle). */
.topbar__actions .lang-toggle{ gap:0; padding:9px; }
.topbar__actions .lang-toggle > span{ display:none; }
.topbar .lang-toggle svg{ width:18px; height:18px; }

/* Active page: light bar = pale-blue (mockup); dark bar = translucent white. */
.topbar .mainnav a.is-active{ background:var(--ods-primary-tint); color:var(--ods-primary); font-weight:600; }
.topbar--dark .mainnav a.is-active{ background:rgba(255,255,255,.16); color:#fff; }

/* Mobile menu panel: dark only on .topbar--dark (the light base is already styled). */
@media (max-width:1199px){
  .topbar--dark .mainnav.is-open{ background:var(--ods-primary-dark); border-top:1px solid rgba(255,255,255,.12);
    box-shadow:var(--shadow-lg); padding:14px 24px 18px; }
  .topbar--dark .mainnav.is-open a{ color:rgba(255,255,255,.92); }
  .topbar--dark .mainnav.is-open a:hover,
  .topbar--dark .mainnav.is-open a.is-active{ background:rgba(255,255,255,.14); color:#fff; }
}

/* =====================================================================
   Association (tenant) dashboard cards — operator dev switcher.
   ===================================================================== */
.t-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; }
.t-card{ background:#fff; border:1px solid var(--ods-border); border-radius:var(--radius-lg);
  padding:18px; display:flex; flex-direction:column; gap:14px; min-height:100%;
  transition:transform .16s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.t-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--ods-accent); }
.t-card__head{ display:flex; align-items:flex-start; gap:12px; }
.t-card__logo{ width:48px; height:48px; border-radius:13px; flex:none; overflow:hidden;
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:1.05rem;
  background:linear-gradient(135deg,var(--ods-primary),var(--ods-accent)); box-shadow:var(--shadow-sm); }
.t-card__logo img{ width:100%; height:100%; object-fit:cover; }
.t-card__id{ min-width:0; flex:1; }
.t-card__id h3{ margin:0; font-size:1.02rem; }
.t-card__id code{ font-size:.78rem; word-break:break-all; }
.t-badge{ flex:none; font-size:.7rem; font-weight:700; letter-spacing:.02em; padding:3px 10px;
  border-radius:var(--radius-pill); white-space:nowrap; }
.t-badge--ok{ background:#DCF1E8; color:#0B7C57; }
.t-badge--bad{ background:#FBE3E3; color:#B42318; }
.t-badge--info{ background:var(--ods-primary-tint); color:var(--ods-primary); }
.t-card__meta{ display:flex; flex-wrap:wrap; gap:18px; font-size:.84rem; color:var(--ods-ink-soft);
  border-top:1px solid var(--ods-border); padding-top:12px; }
.t-card__meta span{ display:flex; align-items:center; gap:6px; }
.t-card__meta svg{ width:15px; height:15px; flex:none; }
.t-card__meta strong{ color:var(--ods-ink); font-weight:600; }
.t-card__foot{ display:flex; align-items:center; gap:8px; margin-top:auto; }
.t-card__foot .btn{ flex:1; }
.t-kebab{ flex:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--ods-border);
  background:#fff; color:var(--ods-ink-soft); cursor:pointer; display:grid; place-items:center;
  transition:background .2s var(--ease), color .2s var(--ease); }
.t-kebab:hover{ background:var(--ods-surface); color:var(--ods-primary); }
.t-kebab svg{ width:18px; height:18px; }

/* =====================================================================
   Development tenant switcher — collapsible, subtle warning styling.
   ===================================================================== */
.dev-switcher{ max-width:980px; margin:40px auto 0; border:1px solid #F3D8A0;
  background:#FFFBF2; border-radius:var(--radius-lg); overflow:hidden; }
.dev-switcher > summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
  gap:12px; padding:16px 20px; user-select:none; }
.dev-switcher > summary::-webkit-details-marker{ display:none; }
.dev-switcher > summary:hover{ background:#FEF6E7; }
.dev-switcher__title{ display:flex; align-items:center; gap:9px; font-weight:700;
  font-size:1.02rem; color:var(--ods-ink); }
.dev-switcher__title svg{ width:18px; height:18px; color:#B7740A; flex:none; }
.dev-badge{ font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:#FEF3C7; color:#92400E; border:1px solid #F3D8A0; padding:3px 10px;
  border-radius:var(--radius-pill); white-space:nowrap; }
.dev-switcher__chev{ margin-inline-start:auto; width:20px; height:20px; color:#B7740A; flex:none;
  transition:transform .2s var(--ease); }
.dev-switcher[open] .dev-switcher__chev{ transform:rotate(180deg); }
.dev-switcher__body{ padding:6px 20px 22px; border-top:1px solid #F3D8A0; }
.dev-switcher__body > p{ margin:14px 0 18px; }

/* =====================================================================
   Empty states — friendly icon + message + actions (reusable).
   ===================================================================== */
.empty-state{ text-align:center; max-width:460px; margin:36px auto; padding:8px; }
.empty-state__icon{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  margin:0 auto 16px; background:var(--ods-primary-tint); color:var(--ods-primary); }
.empty-state__icon svg{ width:30px; height:30px; }
.empty-state h3{ margin:0 0 6px; font-size:1.2rem; }
.empty-state p{ margin:0 0 18px; }
.empty-state__actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* =====================================================================
   Visual polish pass — global refinements only (no layout changes).
   ===================================================================== */

/* Depth: subtle resting shadow so cards aren't flat (hover still lifts). */
.card, .t-card{ box-shadow:var(--shadow-sm); }

/* Smooth, consistent eased transitions on interactive chrome. */
.toplink, .lang-toggle, .mainnav a, .t-kebab, .t-badge,
.dev-switcher > summary, .empty-state__icon{
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
}

/* Typography: clearer hierarchy and rhythm. */
main h1{ letter-spacing:-.02em; }
main h2{ font-size:1.55rem; letter-spacing:-.01em; margin:0 0 .55em; }
main h3{ font-size:1.06rem; }
.muted{ line-height:1.6; }

/* Consistent radius for form controls. */
main input, main select, main textarea{ border-radius:12px; }

/* Buttons: consistent focus ring + active feel. */
.btn:focus-visible{ outline:3px solid var(--ods-accent-dark); outline-offset:2px; }
.btn:active{ transform:translateY(0); }

/* Responsive: collapse multi-column grids gracefully. */
@media (max-width:880px){ .grid--3, .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; } }

/* Tighter padding on small screens. */
@media (max-width:480px){
  .card{ padding:16px; }
  .container{ padding-inline:18px; }
}

/* =====================================================================
   Accessibility — focus contrast on dark surfaces + responsive type.
   ===================================================================== */
/* Keyboard focus must stay visible on the dark top bar (the global teal
   ring has low contrast on --primary-dark), so use a white ring there. */
.topbar--dark a:focus-visible,
.topbar--dark button:focus-visible,
.topbar--dark summary:focus-visible{ outline-color:#fff; }

/* Active nav item is also exposed to assistive tech via aria-current.
   Dark bar = translucent white; the light (ODS) bar uses the primary-tint rule above. */
.topbar--dark .mainnav a[aria-current="page"]{ background:rgba(255,255,255,.16); color:#fff; font-weight:600; }

/* Responsive (fluid) heading typography — scales down on small screens. */
main h1{ font-size:clamp(1.7rem, 1.1rem + 2.6vw, 2.5rem); }
main h2{ font-size:clamp(1.3rem, 1.05rem + 1.2vw, 1.6rem); }
main h3{ font-size:clamp(1rem, .95rem + .4vw, 1.12rem); }

/* =====================================================================
   Landing hero — open header panel (aligned to the dashboard width).
   ===================================================================== */
.landing-hero{ max-width:980px; margin:8px auto 0; text-align:center; padding:52px 24px 14px; }
.landing-hero h1{ font-size:clamp(2rem, 1.4rem + 2.8vw, 2.9rem); margin:.25em auto .35em; max-width:780px; }
.landing-hero__sub{ color:var(--ods-ink-soft); font-size:1.12rem; line-height:1.6;
  max-width:560px; margin:0 auto 28px; }
.landing-hero__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* =====================================================================
   Auth pages (login, etc.) — centered glassmorphism card on light grey.
   ===================================================================== */
.auth-body{ min-height:100vh; margin:0; color:#1A2733;
  font-family:'Segoe UI','Segoe UI Web','Segoe UI Symbol',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  /* Light gradient base + a few large, soft, low-opacity shapes (no patterns). */
  background:
    radial-gradient(1100px 620px at 8% -12%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(1000px 680px at 104% 4%, rgba(37,99,235,.08), transparent 55%),
    radial-gradient(880px 600px at 50% 118%, rgba(125,211,252,.12), transparent 60%),
    linear-gradient(180deg, #FBFCFE 0%, #F1F5FB 100%);
  background-attachment:fixed;
  display:grid; place-items:center; padding:24px; }
.auth-main{ width:100%; display:grid; place-items:center; }
.auth-top{ position:fixed; top:18px; inset-inline-end:22px; z-index:5; }
.auth-top .lang-toggle{ background:#fff; box-shadow:0 2px 10px rgba(16,40,67,.08); }
.auth-top .lang-toggle svg{ width:17px; height:17px; }

.auth-card{ width:100%; max-width:450px; padding:42px 38px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.65); border-radius:20px;
  box-shadow:0 24px 60px rgba(16,40,67,.12), 0 6px 16px rgba(16,40,67,.06); }

.auth-card__brand{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:20px; }
.auth-card__logo{ width:54px; height:54px; border-radius:15px; overflow:hidden; display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:1.15rem;
  background:linear-gradient(135deg,var(--primary,#0F4C81),var(--accent,#1B9AAA));
  box-shadow:0 6px 16px rgba(16,40,67,.16); }
.auth-card__logo img{ width:100%; height:100%; object-fit:cover; }
.auth-card__brand strong{ font-size:.95rem; color:#56697B; font-weight:600; }

.auth-card h1{ font-size:1.5rem; font-weight:700; letter-spacing:-.01em; text-align:center; margin:0 0 6px; }
.auth-card__sub{ text-align:center; color:#56697B; font-size:.95rem; margin:0 0 26px; }

.auth-field{ margin-bottom:16px; }
.auth-field label{ display:block; font-size:.85rem; font-weight:600; color:#3A4756; margin-bottom:7px; }
.auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=text]{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #E1E8EF; background:#fff;
  font:inherit; color:inherit; transition:border-color .2s ease, box-shadow .2s ease; }
.auth-card input:focus{ outline:none; border-color:var(--primary,#0F4C81);
  box-shadow:0 0 0 3px var(--primary-tint,#E7EEF5); }

.auth-remember{ display:flex; align-items:center; gap:10px; margin:6px 0 26px;
  font-size:.92rem; font-weight:500; color:#3A4756; cursor:pointer; user-select:none; }
.auth-remember span{ line-height:1; letter-spacing:.005em; }
/* Modern custom checkbox (native input styled; binding/name unchanged). */
.auth-remember input[type=checkbox]{ -webkit-appearance:none; appearance:none; margin:0; flex:0 0 auto;
  width:20px; height:20px; border:1.5px solid #CBD5E1; border-radius:6px; background:#fff; cursor:pointer;
  display:inline-grid; place-content:center;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.auth-remember input[type=checkbox]::before{ content:""; width:11px; height:11px; transform:scale(0);
  transition:transform .15s ease; box-shadow:inset 1em 1em #fff;
  clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.auth-remember input[type=checkbox]:checked{ background:#2563EB; border-color:#2563EB; }
.auth-remember input[type=checkbox]:checked::before{ transform:scale(1); }
.auth-remember:hover input[type=checkbox]{ border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.auth-remember input[type=checkbox]:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.32); }

.auth-validation:not(:empty){ color:#B42318; font-size:.88rem; margin-bottom:14px; }
.auth-note{ background:#E7F6EF; color:#0B7C57; border:1px solid #C7E9DA; border-radius:10px;
  padding:10px 14px; font-size:.9rem; margin-bottom:16px; }

.auth-links{ text-align:center; margin:18px 0 0; font-size:.9rem; color:#56697B; }
.auth-links a{ color:var(--primary,#0F4C81); font-weight:600; }

@media (max-width:480px){ .auth-card{ padding:30px 22px; border-radius:16px; } }

/* Operator login: solid professional slate logo + shield icon sizing. */
.auth-card__logo--operator{ background:var(--primary,#334155); }
.auth-card__logo svg{ width:28px; height:28px; }

/* =====================================================================
   Floating-label inputs (login email/password) — icon + animated label.
   ===================================================================== */
.auth-card .float-field{ position:relative; margin-bottom:18px; }
/* Two fields on one line (e.g. first/last name), stacking on narrow screens. */
.auth-card .float-row{ display:flex; gap:14px; }
.auth-card .float-row .float-field{ flex:1 1 0; min-width:0; }
@media (max-width:440px){ .auth-card .float-row{ flex-direction:column; gap:0; } }
/* Captcha: code image sits beside the input; refresh link below. */
.auth-card .captcha-row{ display:flex; gap:12px; align-items:flex-start; }
.auth-card .captcha-row__img{ height:52px; width:auto; flex:none; border:1px solid #E1E8EF; border-radius:10px; background:#fff; }
.auth-card .captcha-row__field{ flex:1 1 0; min-width:0; margin-bottom:8px; }
.auth-card .captcha-refresh{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:600;
  color:var(--primary,#106EBE); text-decoration:none; margin:0 0 18px; }
.auth-card .captcha-refresh svg{ width:15px; height:15px; }
.auth-card .captcha-refresh:hover{ text-decoration:underline; }
/* Post-register "check your email" confirmation card. */
.auth-card.auth-confirm{ padding-top:40px; }
.auth-confirm__icon{ width:66px; height:66px; border-radius:50%; display:grid; place-items:center; margin:0 auto 22px;
  background:var(--primary-tint,#E7EEF5); color:var(--primary,#0F4C81); }
.auth-confirm__icon svg{ width:30px; height:30px; }
.auth-confirm .auth-card__sub{ margin-bottom:20px; line-height:1.55; }
.auth-confirm__note{ display:inline-flex; align-items:center; gap:8px; margin:0 0 24px;
  font-size:.85rem; color:var(--ods-muted,#5b6b7a); }
.auth-confirm__note svg{ width:16px; height:16px; flex:none; }
.auth-card .float-field__icon{ position:absolute; inset-inline-start:15px; top:26px; transform:translateY(-50%);
  width:18px; height:18px; color:#64748B; pointer-events:none; transition:color .2s ease; }
.auth-card input.float-input{ width:100%; height:52px; padding:0 14px; padding-inline-start:44px;
  border:1px solid #E1E8EF; border-radius:12px; background:#fff; font:inherit; color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease; }
.auth-card input.float-input:focus{ outline:none; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.auth-card .float-field:focus-within .float-field__icon{ color:#2563EB; }
.auth-card .float-label{ position:absolute; inset-inline-start:44px; top:26px; transform:translateY(-50%);
  color:#56697B; font-size:1rem; font-weight:400; pointer-events:none; background:#fff; padding:0 5px;
  transition:top .18s ease, font-size .18s ease, color .18s ease, inset-inline-start .18s ease; }
.auth-card input.float-input:focus + .float-label,
.auth-card input.float-input:not(:placeholder-shown) + .float-label{
  top:0; font-size:.74rem; inset-inline-start:38px; color:#1D4ED8; font-weight:600; }

/* Show/hide password toggle (login). */
.auth-card input.float-input--pw{ padding-inline-end:48px; }
.auth-card .pw-toggle{ position:absolute; inset-inline-end:6px; top:26px; transform:translateY(-50%);
  width:38px; height:38px; border:0; background:transparent; color:#64748B; cursor:pointer;
  display:grid; place-items:center; border-radius:10px;
  transition:color .2s ease, background .2s ease; }
/* Stack both icons in the same cell and crossfade between them. */
.auth-card .pw-toggle svg{ grid-area:1 / 1; width:19px; height:19px;
  transition:opacity .22s ease, transform .22s ease; }
.auth-card .pw-toggle .pw-eye-off{ opacity:0; transform:scale(.55) rotate(-10deg); }
.auth-card .pw-toggle.is-revealed .pw-eye{ opacity:0; transform:scale(.55) rotate(10deg); }
.auth-card .pw-toggle.is-revealed .pw-eye-off{ opacity:1; transform:none; }
.auth-card .pw-toggle:hover{ color:#2563EB; background:#EFF4FF; }
.auth-card .pw-toggle:active{ transform:translateY(-50%) scale(.9); }
.auth-card .pw-toggle.is-revealed{ color:#2563EB; }
.auth-card .pw-toggle:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.32); }
@media (prefers-reduced-motion: reduce){
  .auth-card .pw-toggle svg{ transition:opacity .15s ease; }
  .auth-card .pw-toggle .pw-eye-off,
  .auth-card .pw-toggle.is-revealed .pw-eye{ transform:none; }
  .auth-card .pw-toggle:active{ transform:translateY(-50%); }
}
/* Hide the browser's native password-reveal/clear icon (Edge ::-ms-reveal, etc.)
   so only our custom toggle shows. */
.auth-card input.float-input--pw::-ms-reveal,
.auth-card input.float-input--pw::-ms-clear{ display:none; }

/* =====================================================================
   Login sign-in button — full width, blue gradient, hover scale, spinner.
   ===================================================================== */
.auth-submit{ position:relative; width:100%; height:50px; border:0; border-radius:12px;
  color:#fff; font:inherit; font-weight:600; font-size:1rem; letter-spacing:.01em; cursor:pointer;
  background:linear-gradient(135deg, #2563EB, #1D4ED8);
  box-shadow:0 10px 22px rgba(37,99,235,.32), 0 2px 6px rgba(29,78,216,.22);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.auth-submit:hover{ transform:scale(1.02); filter:brightness(.96);
  box-shadow:0 14px 28px rgba(37,99,235,.42), 0 3px 8px rgba(29,78,216,.28); }
.auth-submit:active{ transform:scale(.99); }
.auth-submit:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.35); }
/* Loading state: hide label, show a CSS-only spinner. */
.auth-submit.is-loading{ pointer-events:none; }
.auth-submit.is-loading .auth-submit__label{ visibility:hidden; }
.auth-submit.is-loading::after{ content:""; position:absolute; top:50%; left:50%;
  width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff;
  animation:auth-spin .6s linear infinite; }
@keyframes auth-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .auth-submit{ transition:none; }
  .auth-submit:hover{ transform:none; }
  .auth-submit.is-loading::after{ animation-duration:1.2s; }
}

/* Remember-me / forgot-password row + forgot link. */
.auth-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 22px; }
.auth-row .auth-remember{ margin:0; }
.auth-forgot{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  color:#1D4ED8; font-size:.9rem; font-weight:600; text-decoration:none;
  transition:color .2s ease, gap .2s ease; }
.auth-forgot svg{ width:14px; height:14px; transition:transform .2s ease; }
.auth-forgot:hover{ text-decoration:underline; }
.auth-forgot:hover svg{ transform:translateX(2px); }
[dir="rtl"] .auth-forgot svg{ transform:scaleX(-1); }
[dir="rtl"] .auth-forgot:hover svg{ transform:scaleX(-1) translateX(2px); }

/* =====================================================================
   Validation states (login) — styling only. The framework adds these
   classes server-side; validation logic is unchanged.
   ===================================================================== */
/* Error summary: red panel that shakes when it appears. */
.auth-validation.validation-summary-errors{ color:#B42318; background:#FEF2F2;
  border:1px solid #F7CFCF; border-radius:10px; padding:10px 14px 10px 12px; font-size:.88rem;
  margin-bottom:16px; animation:auth-shake .4s ease; }
.auth-validation.validation-summary-errors ul{ margin:0; padding-inline-start:18px; }
/* Invalid input: red border + red focus ring (smooth via existing transition). */
.auth-card input.input-validation-error{ border-color:#E5484D; }
.auth-card input.input-validation-error:focus{ border-color:#E5484D;
  box-shadow:0 0 0 3px rgba(229,72,77,.18); }
/* Shake the whole field (input + icon + label) and tint them red. */
.auth-card .float-field:has(input.input-validation-error){ animation:auth-shake .4s ease; }
.auth-card .float-field:has(input.input-validation-error) .float-field__icon{ color:#E5484D; }
/* Success feedback stays green (see .auth-note); valid field gets a green edge. */
.auth-card input.input-validation-valid:not(:placeholder-shown):not(:focus){ border-color:#2FA86A; }

@keyframes auth-shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); } }
@media (prefers-reduced-motion: reduce){
  .auth-validation.validation-summary-errors,
  .auth-card .float-field:has(input.input-validation-error){ animation:none; } }

/* =====================================================================
   Login entrance + interaction animations (300ms) — CSS only.
   (Button hover + input focus already animate; these add the entrance.)
   ===================================================================== */
@keyframes auth-fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes auth-slide-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* Card fades in; its soft shadow eases on hover for a subtle lift. */
.auth-card{ animation:auth-fade-in .3s ease-out both; transition:box-shadow .3s ease; }
.auth-card:hover{ box-shadow:0 30px 72px rgba(16,40,67,.16), 0 10px 22px rgba(16,40,67,.08); }

/* Inputs slide upward, lightly staggered (300ms each). */
.auth-card .float-field{ animation:auth-slide-up .3s ease-out both; animation-delay:.10s; }
.auth-card .float-field + .float-field{ animation-delay:.18s; }

@media (prefers-reduced-motion: reduce){
  .auth-card, .auth-card .float-field{ animation:none; }
  .auth-card{ transition:none; }
}

/* Accessibility — visible keyboard focus ring for links on the auth card. */
.auth-card a:focus-visible{ outline:2px solid #1D4ED8; outline-offset:3px; border-radius:4px; }

/* =====================================================================
   Microsoft Fluent design refinement (login) — CSS only. Tightens
   spacing / type / color / elevation / radius / consistency on the
   existing classes. No markup, ASP.NET controls, or IDs changed.
   Accent = Fluent communication blue #0078D4.
   ===================================================================== */

/* Surface: tighter radius + soft layered elevation + 8px-grid padding. */
.auth-card{ padding:40px 32px; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.08); }
@media (max-width:480px){ .auth-card{ padding:28px 20px; border-radius:10px; } }

/* Type ramp (Segoe): semibold title, neutral secondary text. */
.auth-card h1{ font-weight:600; letter-spacing:normal; color:#242424; margin:0 0 4px; }
.auth-card__sub{ color:#605E5C; font-size:.875rem; margin:0 0 24px; }
.auth-card__brand strong{ color:#605E5C; }

/* Spacing on the 8px grid. */
.auth-card .float-field{ margin-bottom:16px; }
.auth-row{ margin:4px 0 20px; }

/* Background: Fluent neutral base with faint accent light. */
.auth-body{ background:
  radial-gradient(1100px 620px at 8% -12%, rgba(0,120,212,.08), transparent 60%),
  radial-gradient(1000px 680px at 104% 4%, rgba(0,120,212,.06), transparent 55%),
  radial-gradient(880px 600px at 50% 118%, rgba(0,120,212,.07), transparent 60%),
  linear-gradient(180deg, #FBFBFC 0%, #F3F3F4 100%); }

/* Inputs: 6px radius, Fluent accent focus; consistent with the button. */
.auth-card input.float-input{ border-radius:6px; }
.auth-card input.float-input:focus{ border-color:#0078D4; box-shadow:0 0 0 3px rgba(0,120,212,.18); }
.auth-card .float-field__icon{ color:#605E5C; }
.auth-card .float-field:focus-within .float-field__icon{ color:#0078D4; }
.auth-card .float-label{ color:#605E5C; }
.auth-card input.float-input:focus + .float-label,
.auth-card input.float-input:not(:placeholder-shown) + .float-label{ color:#106EBE; }

/* Password toggle: Fluent accent, 6px radius. */
.auth-card .pw-toggle{ border-radius:6px; }
.auth-card .pw-toggle:hover{ color:#0078D4; background:#F3F9FD; }
.auth-card .pw-toggle.is-revealed{ color:#0078D4; }
.auth-card .pw-toggle:focus-visible{ box-shadow:0 0 0 3px rgba(0,120,212,.30); }

/* Remember-me: Fluent accent, 4px radius. */
.auth-remember input[type=checkbox]{ border-radius:4px; }
.auth-remember input[type=checkbox]:checked{ background:#0078D4; border-color:#0078D4; }
.auth-remember:hover input[type=checkbox]{ border-color:#0078D4; box-shadow:0 0 0 3px rgba(0,120,212,.12); }
.auth-remember input[type=checkbox]:focus-visible{ box-shadow:0 0 0 3px rgba(0,120,212,.32); }

/* Links: Fluent accent + matching focus ring. */
.auth-forgot{ color:#106EBE; }
.auth-card a:focus-visible{ outline-color:#0078D4; }

/* Primary button: solid Fluent blue, color-state interaction, Fluent focus ring. */
.auth-submit{ height:52px; border-radius:6px; font-weight:600;
  background:#0078D4; box-shadow:0 2px 4px rgba(0,0,0,.12); }
.auth-submit:hover{ background:#106EBE; transform:translateY(-1px); filter:none;
  box-shadow:0 4px 8px rgba(0,0,0,.14); }
.auth-submit:active{ background:#005A9E; transform:translateY(0); }
.auth-submit:focus-visible{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #0078D4; }
@media (prefers-reduced-motion: reduce){ .auth-submit:hover{ transform:none; } }

/* Keep invalid/success states authoritative (Fluent semantic colors). */
.auth-card input.input-validation-error,
.auth-card input.input-validation-error:focus{ border-color:#D13438; }
.auth-card input.input-validation-error:focus{ box-shadow:0 0 0 3px rgba(209,52,56,.20); }
.auth-card .float-field:has(input.input-validation-error) .float-field__icon{ color:#D13438; }
.auth-validation.validation-summary-errors{ background:#FDE7E9; border-color:#F1BBBE; color:#A4262C; }
.auth-note{ background:#DFF6DD; border-color:#BAD9B5; color:#0E700E; }

/* Captcha row on the auth card (forgot-password). */
.auth-captcha{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.auth-captcha img{ height:46px; width:auto; border:1px solid #E1E8EF; border-radius:6px; background:#fff; }
.auth-captcha__refresh{ font-size:.85rem; font-weight:600; color:#106EBE; text-decoration:none; white-space:nowrap; }
.auth-captcha__refresh:hover{ text-decoration:underline; }

/* =====================================================================
   Provision tenant — two-column dashboard (operator). Visual only.
   ===================================================================== */
.prov{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:24px; align-items:start; }
.prov__info{ position:sticky; top:24px; }
.prov-card{ background:#fff; border:1px solid #EAEEF3; border-radius:20px;
  box-shadow:0 10px 30px rgba(16,40,67,.06), 0 2px 8px rgba(16,40,67,.04); padding:28px; }
.prov-card + .prov-card{ margin-top:20px; }

.prov-header{ display:flex; align-items:center; gap:16px; margin:0 0 24px; }
.prov-header__icon{ flex:0 0 auto; width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(135deg, #0078D4, #005A9E); color:#fff; box-shadow:0 6px 16px rgba(0,120,212,.28); }
.prov-header__icon svg{ width:28px; height:28px; }
.prov-header h1{ margin:0 0 4px; font-size:1.6rem; letter-spacing:-.01em; color:#1A2733; }
.prov-header__sub{ margin:0; color:#56697B; font-size:.95rem; line-height:1.5; }

.prov__info h2{ font-size:1.15rem; margin:0 0 8px; letter-spacing:-.01em; }
.prov__lead{ color:#56697B; margin:0 0 22px; line-height:1.6; font-size:.95rem; }
.prov-steps{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.prov-step{ display:flex; gap:12px; align-items:flex-start; }
.prov-step__num{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background:#EAF1FF; color:#1D4ED8; font-weight:700; font-size:.85rem; }
.prov-step__txt strong{ display:block; font-size:.92rem; color:#1A2733; margin-bottom:2px; }
.prov-step__txt span{ font-size:.85rem; color:#56697B; line-height:1.45; }
.prov-note{ display:flex; gap:10px; align-items:flex-start; margin:22px 0 0; padding-top:18px;
  border-top:1px solid #EEF2F6; font-size:.85rem; color:#56697B; line-height:1.5; }
.prov-note svg{ flex:0 0 auto; width:18px; height:18px; color:#1D4ED8; margin-top:1px; }

.prov-form h2{ margin:0 0 4px; font-size:1.25rem; }
.prov-form__sub{ color:#56697B; margin:0 0 22px; font-size:.9rem; }
.prov-field{ margin-bottom:16px; }
.prov-field > label{ display:block; font-size:.85rem; font-weight:600; color:#3A4756; margin-bottom:6px; }
.prov-field input, .prov-field select{ width:100%; }
.prov-field code{ background:#F1F5F9; padding:1px 5px; border-radius:4px; font-size:.85em; }
.prov-hint{ display:block; margin-top:6px; font-size:.8rem; color:#6B7A8D; line-height:1.4; }
.prov-hide{ display:none !important; }

/* Billing model as friendly cards */
.bill-choice{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ .bill-choice{ grid-template-columns:1fr; } }
.bill-opt{ text-align:left; cursor:pointer; padding:14px 16px; border:1.5px solid #E1E7EF; border-radius:12px;
  background:#fff; display:flex; flex-direction:column; gap:4px; transition:border-color .12s, box-shadow .12s, background .12s; }
.bill-opt:hover{ border-color:#B8C6D8; }
.bill-opt.is-active{ border-color:#2563EB; background:#F5F8FF; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.bill-opt__title{ font-weight:700; color:#101E2E; font-size:.98rem; }
.bill-opt.is-active .bill-opt__title{ color:#1D4ED8; }
.bill-opt__desc{ font-size:.82rem; color:#6B7A8D; line-height:1.4; }

/* Initial-term picker */
.term-picker{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.term-chips{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.term-chip{ cursor:pointer; padding:6px 12px; border:1px solid #D8E0EA; border-radius:999px; background:#fff;
  font-size:.85rem; font-weight:600; color:#3A4756; transition:all .12s; }
.term-chip:hover{ border-color:#2563EB; color:#1D4ED8; background:#F5F8FF; }
.term-input{ width:88px; }
.term-suffix{ font-size:.85rem; color:#6B7A8D; }
.prov-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.prov-fieldset{ border:1px solid #EAEEF3; border-radius:14px; padding:18px 18px 4px; margin:8px 0 22px; }
.prov-fieldset legend{ font-size:.8rem; font-weight:600; color:#56697B; padding:0 6px; }
.prov-actions{ display:flex; align-items:center; gap:16px; margin-top:4px; }
.prov-cancel{ color:#56697B; text-decoration:none; font-weight:600; }
.prov-cancel:hover{ color:#1A2733; text-decoration:underline; }

@media (max-width:1200px){
  .prov{ grid-template-columns:1fr; }
  .prov__info, .prov__preview{ position:static; }
}
@media (max-width:900px){
  .prov-grid-2{ grid-template-columns:1fr; }
}

/* Live tenant preview (right column) — dashboard-style. */
.prov__preview{ position:sticky; top:24px; }
.prov-preview__eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#8A96A5; margin-bottom:14px; }
.prov-preview__head{ display:flex; align-items:center; gap:12px; padding-bottom:18px; margin-bottom:6px;
  border-bottom:1px solid #EEF2F6; }
.prov-preview__logo{ flex:0 0 auto; width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, #0078D4, #005A9E); color:#fff; font-weight:700; font-size:1.05rem;
  box-shadow:0 4px 12px rgba(0,120,212,.25); overflow:hidden; }
.prov-preview__logo img{ width:100%; height:100%; object-fit:cover; }
.prov-preview__name{ display:block; font-size:1rem; font-weight:700; color:#1A2733; line-height:1.2; }
.prov-preview__url{ display:block; font-size:.82rem; color:#56697B; margin-top:2px; }
.prov-preview__list{ margin:0; padding:0; }
.prov-preview__list > div{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 0; border-bottom:1px solid #F1F5F9; }
.prov-preview__list > div:last-child{ border-bottom:0; padding-bottom:0; }
.prov-preview__list dt{ font-size:.82rem; color:#56697B; }
.prov-preview__list dd{ margin:0; font-size:.88rem; font-weight:600; color:#1A2733; text-align:end; }
.prov-preview__list dd .muted{ font-weight:400; color:#8A96A5; }
.prov-preview__status{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  background:#FEF3C7; color:#92400E; font-size:.78rem; font-weight:600; }
.prov-preview__status::before{ content:""; width:6px; height:6px; border-radius:50%; background:#D97706; }

/* Provision form split into titled section cards. */
.prov-forms{ min-width:0; }
.prov-section__head{ display:flex; gap:14px; align-items:flex-start;
  margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #EEF2F6; }
.prov-section__icon{ flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; background:#EAF1FF; color:#1D4ED8; }
.prov-section__icon svg{ width:22px; height:22px; }
.prov-section__head h2{ margin:0 0 3px; font-size:1.1rem; letter-spacing:-.01em; }
.prov-section__head p{ margin:0; font-size:.85rem; color:#56697B; line-height:1.45; }
.prov-forms .prov-actions{ margin-top:20px; }

/* Provision action buttons — full-width gradient primary + secondary. */
.prov-actions{ display:grid; gap:12px; }
.prov-btn-primary{ width:100%; height:48px; border:0; border-radius:12px; color:#fff; font:inherit;
  font-size:1rem; font-weight:600; cursor:pointer;
  background:linear-gradient(135deg, #0078D4, #005A9E);
  box-shadow:0 8px 20px rgba(0,120,212,.30), 0 2px 6px rgba(0,90,158,.22);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.prov-btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.05);
  box-shadow:0 12px 26px rgba(0,120,212,.40); }
.prov-btn-primary:active{ transform:translateY(0); }
.prov-btn-primary:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(0,120,212,.35); }
.prov-btn-secondary{ width:100%; height:48px; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #D1D5DB; border-radius:12px; color:#3A4756; font:inherit; font-weight:600;
  text-decoration:none; cursor:pointer; transition:background .2s ease, border-color .2s ease; }
.prov-btn-secondary:hover{ background:#F3F4F6; border-color:#9CA3AF; }
@media (prefers-reduced-motion: reduce){ .prov-btn-primary:hover{ transform:none; } }

/* =====================================================================
   Provision validation UI — keeps ASP.NET validation; presentational.
   ===================================================================== */
.req{ color:#D13438; margin-inline-start:2px; font-weight:700; }

.prov-success{ display:flex; align-items:center; gap:10px; margin-bottom:18px;
  background:#DFF6DD; border:1px solid #BAD9B5; color:#0E700E; border-radius:12px; padding:12px 14px;
  font-size:.9rem; font-weight:500; animation:prov-vin .3s ease both; }
.prov-success svg{ flex:0 0 auto; width:18px; height:18px; }

.prov-validation{ display:flex; align-items:flex-start; gap:12px; margin-bottom:18px;
  background:#FDE7E9; border:1px solid #F1BBBE; color:#A4262C; border-radius:12px; padding:13px 15px;
  animation:prov-vin .3s ease both, prov-shake .42s ease .28s; }
.prov-validation__icon{ flex:0 0 auto; width:20px; height:20px; margin-top:1px; color:#D13438; }
.prov-validation__body strong{ display:block; font-size:.9rem; margin-bottom:2px; }
.prov-validation__list ul{ margin:4px 0 0; padding-inline-start:18px; font-size:.85rem; }
.prov-validation__list li{ margin:2px 0; }

@keyframes prov-vin{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@keyframes prov-shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }
@media (prefers-reduced-motion: reduce){ .prov-success, .prov-validation{ animation:none; } }

/* =====================================================================
   Microsoft Fluent refinement (Provision tenant) — CSS only. Unifies
   color / spacing / type / elevation / radius / consistency on existing
   classes. No markup, ASP.NET controls, or IDs changed. Accent #0078D4.
   ===================================================================== */

/* Cards: tighter radius + soft layered Fluent elevation. */
.prov-card{ border-radius:12px; border-color:#EDEBE9;
  box-shadow:0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05); }

/* Page header. */
.prov-header__icon{ border-radius:12px; }
.prov-header h1{ font-weight:600; color:#242424; }
.prov-header__sub{ color:#605E5C; }

/* Left info column — Fluent accent + neutral text. */
.prov__info h2{ font-weight:600; color:#242424; }
.prov__lead{ color:#605E5C; }
.prov-step__num{ background:#EFF6FC; color:#0078D4; border-radius:8px; }
.prov-step__txt strong{ color:#242424; }
.prov-step__txt span{ color:#605E5C; }
.prov-note{ color:#605E5C; }
.prov-note svg{ color:#0078D4; }

/* Section cards. */
.prov-section__icon{ background:#EFF6FC; color:#0078D4; border-radius:10px; }
.prov-section__head h2{ font-weight:600; color:#242424; }
.prov-section__head p{ color:#605E5C; }

/* Fields — Fluent control radius + accent focus, neutral labels. */
.prov-field > label{ color:#323130; }
.prov-forms input, .prov-forms select{ border-radius:6px; border-color:#D1D1D1; }
.prov-forms input:focus, .prov-forms select:focus{ border-color:#0078D4; box-shadow:0 0 0 3px rgba(0,120,212,.18); }
.prov-field code{ background:#F3F2F1; }

/* Validation — tighter radius (semantic colors already Fluent). */
.prov-success, .prov-validation{ border-radius:8px; }

/* Buttons — Fluent radius + cleaner elevation; keep blue gradient primary. */
.prov-btn-primary{ border-radius:6px; background:linear-gradient(135deg,#0078D4,#005A9E);
  box-shadow:0 4px 10px rgba(0,120,212,.24); }
.prov-btn-primary:hover{ box-shadow:0 6px 14px rgba(0,120,212,.30); }
.prov-btn-secondary{ border-radius:6px; border-color:#D1D1D1; color:#323130; }
.prov-btn-secondary:hover{ background:#F3F2F1; border-color:#A19F9D; }

/* Preview card. */
.prov-preview__eyebrow{ color:#8A8886; }
.prov-preview__logo{ border-radius:10px; }
.prov-preview__name{ color:#242424; }
.prov-preview__url{ color:#605E5C; }
.prov-preview__list dt{ color:#605E5C; }
.prov-preview__list dd{ color:#242424; }

/* Keep invalid inputs authoritative (Fluent error red). */
.prov-forms input.input-validation-error,
.prov-forms input.input-validation-error:focus{ border-color:#D13438; }
.prov-forms input.input-validation-error:focus{ box-shadow:0 0 0 3px rgba(209,52,56,.20); }

/* Visually-hidden utility — present for assistive tech, off-screen visually. */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* =====================================================================
   Operator dashboard — statistic cards.
   ===================================================================== */
.stat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin:18px 0 24px; }
.stat-card{ position:relative; display:flex; align-items:center; gap:16px; background:#fff; border:1px solid #EDF0F4;
  border-radius:18px; padding:20px 22px; overflow:hidden;
  box-shadow:0 6px 18px rgba(16,40,67,.06), 0 1px 3px rgba(16,40,67,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
/* faint decorative glow bleeding from the icon side */
.stat-card::after{ content:""; position:absolute; inset-inline-end:-40px; top:-40px; width:120px; height:120px;
  border-radius:50%; background:radial-gradient(circle, rgba(37,99,235,.06), transparent 70%); pointer-events:none; }
.stat-card:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(16,40,67,.13); border-color:#E2E8F0; }
.stat-card__icon{ flex:0 0 auto; width:52px; height:52px; border-radius:15px; display:grid; place-items:center; color:#fff;
  box-shadow:0 8px 16px rgba(16,40,67,.16); }
.stat-card__icon svg{ width:25px; height:25px; }
.stat-card__icon--blue{ background:linear-gradient(135deg,#5B9BFF,#2563EB); }
.stat-card__icon--green{ background:linear-gradient(135deg,#34D399,#0E9F6E); }
.stat-card__icon--purple{ background:linear-gradient(135deg,#A78BFA,#7C3AED); }
.stat-card__icon--amber{ background:linear-gradient(135deg,#FBBF24,#D97706); }
.stat-card__value{ font-size:1.85rem; font-weight:800; color:#1A2733; line-height:1.05; letter-spacing:-.01em; }
.stat-card__unit{ font-size:.9rem; font-weight:700; color:#56697B; }
.stat-card__label{ font-size:.85rem; color:#56697B; margin-top:2px; }
.stat-card__hint{ font-size:.75rem; color:#7A8A99; margin-top:3px; }
@media (max-width:980px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .stat-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .stat-card:hover{ transform:none; } }

/* Event check-in card (attendance) */
.checkin-card{ max-width:600px; margin:0 0 26px; padding:0; overflow:hidden;
  border:1px solid var(--ods-border,#e4ecf3); border-radius:16px; background:var(--ods-surface,#fff);
  box-shadow:0 10px 30px rgba(16,40,67,.06); }
.checkin-card__head{ display:flex; align-items:center; gap:15px; padding:20px 24px;
  background:linear-gradient(120deg, color-mix(in srgb, var(--ods-primary) 9%, #fff), color-mix(in srgb, var(--ods-accent) 10%, #fff));
  border-bottom:1px solid var(--ods-border,#e8eef4); }
.checkin-card__icon{ flex:0 0 auto; width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,var(--ods-accent),var(--ods-primary));
  box-shadow:0 6px 16px color-mix(in srgb, var(--ods-primary) 30%, transparent); }
.checkin-card__icon svg{ width:26px; height:26px; }
.checkin-card__head h3{ margin:0 0 3px; font-size:1.1rem; }
.checkin-card__head p{ margin:0; font-size:.85rem; color:var(--ods-ink-soft); }
.checkin-card__form{ display:flex; gap:12px; padding:22px 24px 8px; }
.checkin-field{ flex:1; display:flex; align-items:center; gap:9px; padding:0 14px;
  border:1.5px solid var(--ods-border,#dbe6ef); border-radius:11px; background:var(--ods-surface-2,#f6f9fc);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.checkin-field:focus-within{ border-color:var(--ods-primary); background:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ods-primary) 16%, transparent); }
.checkin-field__ico{ width:19px; height:19px; color:var(--ods-ink-soft); flex:0 0 auto; }
.checkin-field input{ flex:1; border:none; background:transparent; outline:none; padding:12px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em; font-size:.98rem; color:var(--ods-ink); }
.checkin-card__form .btn{ align-self:stretch; padding-inline:24px; }
.checkin-card__hint{ margin:0; padding:0 24px 20px; font-size:.78rem; color:var(--ods-ink-soft);
  display:flex; align-items:center; gap:6px; }
.checkin-card__hint svg{ width:15px; height:15px; color:var(--ods-ok,#0E9F6E); flex:0 0 auto; }
@media (max-width:480px){ .checkin-card__form{ flex-direction:column; } }

/* Module-based pricing tiers (operator provisioning) */
.plan-picker{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.plan-opt{ cursor:pointer; }
.plan-opt input{ position:absolute; opacity:0; width:0; height:0; }
.plan-opt__card{ display:flex; flex-direction:column; gap:7px; height:100%; padding:16px;
  border:1.5px solid var(--ods-border,#dbe6ef); border-radius:12px; background:var(--ods-surface,#fff);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.plan-opt:hover .plan-opt__card{ border-color:color-mix(in srgb, var(--ods-primary) 40%, #dbe6ef); }
.plan-opt input:checked + .plan-opt__card{ border-color:var(--ods-primary); background:color-mix(in srgb, var(--ods-primary) 5%, #fff);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ods-primary) 15%, transparent); }
.plan-opt input:focus-visible + .plan-opt__card{ outline:2px solid var(--ods-primary); outline-offset:2px; }
.plan-opt__top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.plan-opt__name{ font-weight:800; font-size:1.02rem; color:var(--ods-ink); }
.plan-opt__price{ font-weight:800; color:var(--ods-primary); font-size:1.05rem; white-space:nowrap; }
.plan-opt__price span{ font-size:.7rem; font-weight:700; color:var(--ods-ink-soft); }
.plan-opt__desc{ font-size:.82rem; color:var(--ods-ink-soft); line-height:1.4; }
.plan-opt__mods{ margin-top:auto; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ods-primary); background:var(--ods-primary-tint,#eef4fb); align-self:flex-start; padding:3px 9px; border-radius:999px; }
.settings-row--plan{ gap:12px; flex-wrap:wrap; background:var(--ods-surface-2,#f6f9fc); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.plan-apply{ display:flex; gap:8px; align-items:center; margin-inline-start:auto; }
.plan-apply select{ padding:8px 11px; border:1px solid var(--ods-border,#dbe6ef); border-radius:9px; background:#fff; font-size:.88rem; }
@media (max-width:640px){ .plan-picker{ grid-template-columns:1fr; } }

/* --- Admin dashboard: activity panels --- */
.dash-panels{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:4px 0 26px; }
@media (max-width:820px){ .dash-panels{ grid-template-columns:1fr; } }
.dash-panel{ padding:18px 20px; }
.dash-panel__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.dash-panel__head h2{ font-size:1.02rem; margin:0; }
.dash-panel__empty{ padding:10px 0; }
.dash-section-title{ font-size:1.05rem; margin:8px 0 12px; }

.fill-list, .pay-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.fill-row{ padding:11px 0; border-top:1px solid #EDF0F4; }
.fill-row:first-child{ border-top:0; }
.fill-row__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.fill-row__title{ font-weight:650; color:#1A2733; }
.fill-row__count{ font-variant-numeric:tabular-nums; font-weight:700; color:#33475B; white-space:nowrap; }
.fill-row__meta{ font-size:.78rem; margin-top:1px; }
.fill-bar{ margin-top:8px; height:7px; border-radius:99px; background:#EDF1F5; overflow:hidden; }
.fill-bar__fill{ display:block; height:100%; border-radius:99px; background:#1B9AAA; transition:width .3s ease; }
.fill-bar__fill.is-low{ background:#1B9AAA; }
.fill-bar__fill.is-mid{ background:#F59E0B; }
.fill-bar__fill.is-high{ background:#E5533C; }

.pay-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid #EDF0F4; }
.pay-row:first-child{ border-top:0; }
.pay-row__main{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.pay-row__desc{ font-weight:600; color:#1A2733; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pay-row__who{ font-size:.78rem; }
.pay-row__side{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; white-space:nowrap; }
.pay-row__amt{ font-weight:750; color:#0F7A4A; font-variant-numeric:tabular-nums; }
.pay-row__when{ font-size:.76rem; }

/* Operator dashboard header. */
.dash-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.dash-header h1{ margin:0 0 4px; color:var(--primary); font-size:1.6rem; font-weight:700; letter-spacing:-.01em; }
.dash-header__sub{ margin:0; color:#56697B; font-size:.95rem; line-height:1.5; max-width:62ch; }
.dash-header__action{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 20px; border-radius:12px; color:#fff; text-decoration:none; font-weight:600; font-size:.95rem;
  background:linear-gradient(135deg, #2563EB, #1D4ED8);
  box-shadow:0 8px 20px rgba(37,99,235,.30), 0 2px 6px rgba(29,78,216,.20);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.dash-header__action svg{ width:17px; height:17px; }
.dash-header__action:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 12px 26px rgba(37,99,235,.40); }
.dash-header__action:active{ transform:translateY(0); }
.dash-header__action:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.35); }
@media (max-width:560px){ .dash-header__action{ width:100%; } }
@media (prefers-reduced-motion: reduce){ .dash-header__action:hover{ transform:none; } }

/* =====================================================================
   Enterprise data table (operator dashboard) — carded, sticky header,
   zebra, hover, soft borders, responsive.
   ===================================================================== */
.data-card{ background:#fff; border:1px solid #EDF0F4; border-radius:18px; overflow:hidden;
  box-shadow:0 6px 18px rgba(16,40,67,.06), 0 1px 3px rgba(16,40,67,.05); }
.data-table-wrap{ overflow:auto; max-height:70vh; }
.data-table{ width:100%; min-width:760px; border-collapse:separate; border-spacing:0;
  font-size:.92rem; color:#1A2733; }
.data-table thead th{ position:sticky; top:0; z-index:1; background:#F7F9FC; color:#56697B;
  text-align:left; font-weight:600; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase;
  padding:13px 16px; border-bottom:1px solid #E6EAF0; white-space:nowrap; }
.data-table tbody td{ padding:14px 16px; border-bottom:1px solid #F1F4F8; vertical-align:middle; }
.data-table tbody tr:last-child td{ border-bottom:0; }
.data-table tbody tr:nth-child(even){ background:#FAFBFD; }
.data-table tbody tr:hover{ background:#EFF4FF; }
.data-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.data-table .muted{ font-size:.85rem; }
.data-table a{ color:#2563EB; font-weight:600; text-decoration:none; }
.data-table a:hover{ text-decoration:underline; }
@media (max-width:560px){ .data-table-wrap{ max-height:none; } }

/* Status pills (tenant table). */
.status-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:.78rem; font-weight:600; line-height:1.5; white-space:nowrap; }
.status-pill__dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.status-pill--green{ background:#E7F6EE; color:#0E7A4B; }
.status-pill--green .status-pill__dot{ background:#16A34A; }
.status-pill--yellow{ background:#FEF6E0; color:#92660A; }
.status-pill--yellow .status-pill__dot{ background:#D9A406; }
.status-pill--red{ background:#FDECEC; color:#B42318; }
.status-pill--red .status-pill__dot{ background:#E5484D; }
.status-pill--gray{ background:#F1F4F8; color:#56697B; }
.status-pill--gray .status-pill__dot{ background:#9CA3AF; }

/* Manage action button (tenant table) — scoped to beat the generic .data-table a. */
.data-table .btn-manage{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  border-radius:8px; background:#EAF1FF; color:#1D4ED8; border:1px solid #DCE7FB;
  font-size:.82rem; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .15s ease, box-shadow .2s ease; }
.data-table .btn-manage svg{ width:14px; height:14px; }
.data-table .btn-manage:hover{ background:#2563EB; color:#fff; border-color:#2563EB;
  text-decoration:none; transform:translateY(-1px); box-shadow:0 4px 10px rgba(37,99,235,.28); }
.data-table .btn-manage:active{ transform:translateY(0); }
.data-table .btn-manage:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.3); }
@media (prefers-reduced-motion: reduce){ .data-table .btn-manage:hover{ transform:none; } }

/* =====================================================================
   Tenant table toolbar (operator dashboard).
   ===================================================================== */
.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.toolbar__search{ position:relative; flex:1 1 240px; min-width:200px; }
.toolbar__search svg{ position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:#8A96A5; pointer-events:none; }
.toolbar__search input{ width:100%; height:40px; padding:0 12px 0 38px; border:1px solid #DCE3EC;
  border-radius:10px; background:#fff; font:inherit; color:#1A2733;
  transition:border-color .18s ease, box-shadow .18s ease; }
.toolbar__search input:focus{ outline:none; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.toolbar__select{ height:40px; padding:0 12px; border:1px solid #DCE3EC; border-radius:10px; background:#fff;
  font:inherit; color:#3A4756; cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease; }
.toolbar__select:focus{ outline:none; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.toolbar__spacer{ flex:1 1 auto; }
.toolbar__btn{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px;
  border:1px solid #DCE3EC; border-radius:10px; background:#fff; color:#3A4756; font:inherit; font-weight:600;
  font-size:.88rem; cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease; }
.toolbar__btn svg{ width:15px; height:15px; }
.toolbar__btn:hover{ background:#F3F6FA; border-color:#C3CEDC; }
.toolbar__btn--primary{ background:#2563EB; color:#fff; border-color:#2563EB; }
.toolbar__btn--primary:hover{ background:#1D4ED8; border-color:#1D4ED8; }
.toolbar-empty{ margin:14px 2px; color:#56697B; font-size:.9rem; }
@media (max-width:640px){ .toolbar__spacer{ display:none; } .toolbar > *{ flex:1 1 auto; } }

/* =====================================================================
   Tenant empty state (operator dashboard) — professional illustration card.
   ===================================================================== */
.tenant-empty{ background:#fff; border:1px solid #EDF0F4; border-radius:18px;
  box-shadow:0 6px 18px rgba(16,40,67,.06), 0 1px 3px rgba(16,40,67,.05);
  text-align:center; padding:48px 28px; max-width:560px; margin:8px auto; }
.tenant-empty__art{ width:160px; height:130px; margin:0 auto 8px; display:block; }
.error-code{ font-size:4rem; font-weight:800; line-height:1; letter-spacing:-.02em;
  color:var(--ods-primary); opacity:.16; margin-bottom:4px; }
.tenant-empty h2{ margin:0 0 8px; font-size:1.35rem; color:#1A2733; }
.tenant-empty p{ margin:0 auto 24px; color:#56697B; max-width:380px; line-height:1.55; }
.tenant-empty__cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 26px; border-radius:12px; color:#fff; text-decoration:none; font-weight:600; font-size:1rem;
  background:linear-gradient(135deg, #2563EB, #1D4ED8); box-shadow:0 8px 22px rgba(37,99,235,.32);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.tenant-empty__cta svg{ width:18px; height:18px; }
.tenant-empty__cta:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 12px 28px rgba(37,99,235,.42); }
.tenant-empty__cta:active{ transform:translateY(0); }
.tenant-empty__cta:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.35); }
@media (prefers-reduced-motion: reduce){ .tenant-empty__cta:hover{ transform:none; } }

/* =====================================================================
   Member page utilities — consistent page headers, alerts, list cards.
   ===================================================================== */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:6px 0 26px; }
.page-head .eyebrow{ display:inline-block; margin-bottom:7px; }
.page-head h1{ margin:0; }
.page-head p.lead{ margin:6px 0 0; color:var(--ods-ink-soft); max-width:60ch; }
.head-stats{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 0; margin-top:12px; }
.head-stat{ display:inline-flex; align-items:baseline; gap:6px; padding-inline:18px; font-size:.88rem; color:var(--ods-ink-soft); }
.head-stat:first-child{ padding-inline-start:0; }
.head-stat + .head-stat{ border-inline-start:1px solid var(--ods-border); }
.head-stat strong{ font-size:1.4rem; font-weight:800; color:var(--ods-primary); line-height:1; letter-spacing:-.01em; }
.alert{ border:1px solid var(--ods-border); background:var(--ods-surface); border-radius:12px; padding:12px 16px; margin:0 0 18px; }
.alert--ok{ border-color:var(--ods-success); background:var(--ods-accent-tint); color:var(--ods-ink); }
.alert--error{ border-color:var(--ods-error); color:var(--ods-error); }
.alert--info{ background:var(--ods-primary-tint); color:var(--ods-primary-dark); border-color:transparent; }
.ecard__price{ font-weight:600; color:var(--ods-ink); margin:0 0 12px; }
.ecard__body a.ttl{ color:inherit; text-decoration:none; }
.ecard__body a.ttl:hover{ color:var(--ods-primary); }
/* directory search reused on the member directory page */
.member-search{ display:flex; gap:10px; margin:0 0 22px; flex-wrap:wrap; }
.member-search input{ flex:1 1 260px; height:46px; padding:0 14px; border:1px solid var(--ods-border);
  border-radius:12px; background:#fff; font:inherit; }
.member-search input:focus{ outline:none; border-color:var(--ods-primary); box-shadow:0 0 0 3px var(--ods-primary-tint); }

/* Member / admin forms (edit forms, directory profile, etc.) */
.mform{ max-width:640px; }
.mform label{ display:block; font-weight:600; font-size:.85rem; color:var(--ods-ink); margin:0 0 7px; }
.mform p{ margin:0 0 18px; }
.mform .row{ display:flex; gap:16px; flex-wrap:wrap; }
.mform .row > *{ flex:1 1 200px; }
.mform input:not([type=checkbox]), .mform textarea, .mform select{ width:100%; min-height:46px; padding:12px 14px;
  border:1px solid var(--ods-border); border-radius:12px; background:#fff; font:inherit; color:var(--ods-ink);
  transition:border-color .16s ease, box-shadow .16s ease; }
.mform input:not([type=checkbox]):hover, .mform textarea:hover, .mform select:hover{ border-color:#C3CEDC; }
.mform input:focus, .mform textarea:focus, .mform select:focus{ outline:none; border-color:var(--ods-primary);
  box-shadow:0 0 0 3px var(--ods-primary-tint); }
.mform textarea{ min-height:100px; resize:vertical; line-height:1.5; }
.mform select{ appearance:none; -webkit-appearance:none; padding-inline-end:38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2356697B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
html[dir="rtl"] .mform select{ background-position:left 14px center; }
.mform .check{ display:flex; align-items:center; gap:10px; font-weight:500; padding:12px 14px;
  border:1px solid var(--ods-border); border-radius:12px; background:var(--ods-surface); cursor:pointer; }
.mform .check input{ width:18px; height:18px; accent-color:var(--ods-primary); }
.mform .val-summary{ color:var(--ods-error); margin:0 0 16px; background:#FEF3F2; border:1px solid #FECDCA;
  border-radius:10px; padding:11px 14px; }
.mform .val-summary:empty{ display:none; }
.mform__section{ font-size:.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ods-ink-soft);
  margin:26px 0 15px; padding-top:20px; border-top:1px solid var(--ods-border); }
.mform__section:first-of-type{ border-top:none; padding-top:0; margin-top:6px; }

/* .btn-manage used on a <button> (attendance mark-attended) — reset button chrome */
.data-table button.btn-manage{ cursor:pointer; font-family:inherit; }

/* Certificate verification key-value list */
/* My directory profile: card with a gradient header band + form body */
.profile-card{ padding:0; overflow:hidden; max-width:760px; }
.profile-hero{ display:flex; align-items:center; gap:16px; padding:24px 26px;
  background:linear-gradient(120deg, var(--ods-primary), var(--ods-accent)); color:#fff; }
.profile-hero__avatar{ flex:none; width:60px; height:60px; border-radius:16px; display:grid; place-items:center;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28); color:#fff; font-weight:800; font-size:1.3rem; letter-spacing:.02em; }
.profile-hero__id{ display:flex; flex-direction:column; min-width:0; }
.profile-hero__id strong{ font-size:1.25rem; line-height:1.2; letter-spacing:-.01em; }
.profile-hero__id span{ font-size:.88rem; color:rgba(255,255,255,.85); margin-top:2px; }
.profile-body{ padding:24px 26px 26px; }
.profile-body .mform{ margin:0; }
/* "List me" opt-in callout */
.listing-toggle{ display:flex; align-items:flex-start; gap:11px; margin:6px 0 20px; padding:14px 16px;
  border:1px solid var(--ods-border); border-radius:12px; background:var(--ods-surface-2); cursor:pointer; }
.listing-toggle input{ margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--ods-primary); }
.listing-toggle strong{ display:block; font-size:.92rem; color:var(--ods-ink); }
.listing-toggle .muted{ font-size:.82rem; }
.mform--wide{ max-width:none; }
@media (max-width:560px){ .profile-hero{ padding:20px; gap:13px; } .profile-hero__avatar{ width:52px; height:52px; font-size:1.15rem; } .profile-body{ padding:20px; } }

/* Sandbox (dev) hosted-checkout page */
.sbx{ max-width:400px; margin:0 auto; }
.sbx__card{ background:#fff; border:1px solid var(--ods-border); border-radius:18px; overflow:hidden;
  box-shadow:0 18px 44px rgba(16,40,67,.12); }
.sbx__head{ display:flex; align-items:center; gap:9px; padding:14px 20px; font-weight:600; font-size:.92rem; color:#fff;
  background:linear-gradient(135deg, var(--ods-primary), var(--ods-primary-dark)); }
.sbx__lock svg{ width:16px; height:16px; display:block; }
.sbx__badge{ margin-inline-start:auto; background:rgba(255,255,255,.2); font-size:.62rem; font-weight:700;
  letter-spacing:.09em; padding:3px 9px; border-radius:999px; }
.sbx__body{ padding:24px 24px 22px; text-align:center; }
.sbx__amount-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ods-ink-soft); }
.sbx__amount{ font-size:2.2rem; font-weight:800; color:var(--ods-ink); letter-spacing:-.02em; margin:2px 0 0; }
.sbx__amount span{ font-size:1rem; font-weight:600; color:var(--ods-ink-soft); }
.sbx__desc{ color:var(--ods-ink-soft); margin:4px 0 0; }
.sbx__note{ display:flex; align-items:center; gap:8px; justify-content:center; background:#FFF7E6; border:1px solid #F5C97B;
  color:#8a5a00; border-radius:10px; padding:9px 12px; font-size:.8rem; margin:18px 0; }
.sbx__note svg{ width:16px; height:16px; flex:0 0 auto; }
.sbx__field{ display:flex; align-items:center; gap:10px; border:1px solid var(--ods-border); border-radius:10px;
  padding:12px 14px; margin:0 0 16px; background:#F8FAFC; color:var(--ods-ink-soft); }
.sbx__field svg{ width:20px; height:20px; flex:0 0 auto; }
.sbx__field-text{ font-family:ui-monospace,monospace; letter-spacing:2px; color:var(--ods-ink); }
.sbx__field-meta{ margin-inline-start:auto; font-family:ui-monospace,monospace; font-size:.85rem; }
.sbx__actions form{ margin:0 0 10px; }
.sbx__actions form:last-child{ margin-bottom:0; }
.sbx__foot{ padding:12px 20px; border-top:1px solid var(--ods-border); text-align:center; font-size:.72rem; color:var(--ods-ink-soft); }
.sbx__foot code{ font-family:ui-monospace,monospace; }

/* Payment receipt */
.receipt{ max-width:480px; margin:0 auto; background:#fff; border:1px solid var(--ods-border); border-radius:18px;
  padding:26px 28px; box-shadow:0 14px 40px rgba(16,40,67,.08); }
.receipt__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 6px; }
.receipt__brand{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ods-ink); }
.receipt__brand img{ width:30px; height:30px; object-fit:contain; border-radius:6px; }
.receipt__label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ods-ink-soft); font-weight:700; }
.receipt__meta{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:4px 0 8px; font-size:.88rem; }
.receipt__meta dt{ color:var(--ods-ink-soft); }
.receipt__meta dd{ margin:0; text-align:end; font-family:ui-monospace,monospace; color:var(--ods-ink); }
.receipt__line{ display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid var(--ods-border); }
.receipt__total{ display:flex; justify-content:space-between; gap:12px; padding:14px 0 2px; border-top:2px solid var(--ods-border); font-size:1.1rem; }
.receipt__total strong{ color:var(--ods-primary); }
.verify-badge--pending{ background:#FFF7E6; border:1px solid #F5C97B; }
.verify-badge--pending .verify-badge__disc{ background:#B26B00; }
@media print{
  .topbar, .footer, .receipt-actions{ display:none !important; }
  .receipt{ box-shadow:none; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* Public certificate verification page */
.verify-page{ max-width:520px; margin:0 auto; }
.verify-card{ background:#fff; border:1px solid var(--ods-border); border-radius:18px; padding:28px 30px;
  box-shadow:0 14px 40px rgba(16,40,67,.08); }
.verify-card__brand{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ods-ink); margin:0 0 8px; }
.verify-card__brand img{ width:32px; height:32px; object-fit:contain; border-radius:6px; }
.verify-badge{ display:flex; align-items:center; gap:14px; margin:14px 0 18px; padding:16px 18px; border-radius:14px; }
.verify-badge--ok{ background:#ECFDF3; border:1px solid #A6F4C5; }
.verify-badge--bad{ background:#FEF3F2; border:1px solid #FECDCA; }
.verify-badge__disc{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.verify-badge--ok .verify-badge__disc{ background:#16A34A; }
.verify-badge--bad .verify-badge__disc{ background:#B42318; }
.verify-badge__disc svg{ width:22px; height:22px; }
.verify-badge strong{ display:block; font-size:1.05rem; color:var(--ods-ink); }
.verify-badge span{ color:var(--ods-ink-soft); font-size:.85rem; }
.verify-recheck{ margin-top:18px; padding-top:18px; border-top:1px solid var(--ods-border); }
.verify-recheck label{ display:block; font-weight:600; font-size:.85rem; margin-bottom:8px; }
.verify-recheck__row{ display:flex; gap:8px; }
.verify-recheck__row input{ flex:1; min-height:44px; padding:10px 14px; border:1px solid var(--ods-border); border-radius:10px; }
.verify-recheck__row input:focus{ outline:none; border-color:var(--ods-primary); box-shadow:0 0 0 3px rgba(15,76,129,.12); }

.verify-list{ display:grid; grid-template-columns:auto 1fr; gap:9px 18px; margin:16px 0 0; }
.verify-list dt{ color:var(--ods-ink-soft); font-weight:600; font-size:.9rem; }
.verify-list dd{ margin:0; color:var(--ods-ink); }

/* Content-page body: keep plain prose readable; rich layouts (about-intro, reports) span full width. */
.content-body > p, .content-body > ul, .content-body > ol,
.content-body > h3, .content-body > h2:not(.about-subhead){ max-width:760px; }

/* =====================================================================
   Member card — the "Your membership" panel on the membership page.
   ===================================================================== */
.member-card{ position:relative; overflow:hidden; max-width:480px; margin:0 0 14px; padding:24px 26px;
  border-radius:20px; color:#fff; background:linear-gradient(135deg, var(--ods-primary), var(--ods-primary-dark));
  box-shadow:0 16px 34px rgba(16,40,67,.28); }
.member-card::after{ content:""; position:absolute; width:240px; height:240px; border-radius:50%;
  top:-100px; inset-inline-end:-70px; background:rgba(255,255,255,.08); pointer-events:none; }
.member-card > *{ position:relative; z-index:1; }
.member-card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.member-card__brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:1rem; }
.member-card__brand img{ width:30px; height:30px; border-radius:7px; background:#fff; padding:2px; object-fit:contain; }
.member-card__label{ font-size:.7rem; letter-spacing:2px; text-transform:uppercase; opacity:.72; margin-top:22px; }
.member-card__num{ font-size:1.5rem; font-weight:800; letter-spacing:3px; margin-top:3px; }
.member-card__foot{ display:flex; gap:28px; flex-wrap:wrap; margin-top:18px; }
.member-card__foot > div{ display:flex; flex-direction:column; gap:2px; }
.member-card__foot span{ font-size:.68rem; letter-spacing:1px; text-transform:uppercase; opacity:.7; }
.member-card__foot strong{ font-size:.95rem; font-weight:700; }
.member-card .status-pill{ background:rgba(255,255,255,.18); color:#fff; border:none; }
.member-card .status-pill__dot{ background:#fff; }

/* Digital membership card page — large centered card variant */
.digicard-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.member-card--lg{ max-width:560px; width:100%; padding:30px 32px; margin:0; }
/* diagonal sheen for a premium card feel (behind the content) */
.member-card--lg::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(118deg, transparent 42%, rgba(255,255,255,.12) 50%, transparent 58%); }
.member-card__row{ display:flex; align-items:center; gap:12px; margin:24px 0 10px; position:relative; z-index:1; }
.member-card__chip{ display:block; width:46px; height:34px; border-radius:7px; margin:0;
  background:linear-gradient(135deg,#F6D68A,#D6A44A); position:relative; z-index:1; }
.member-card__chip::before{ content:""; position:absolute; inset:6px 8px; border:1px solid rgba(0,0,0,.22); border-radius:3px; }
.member-card__contactless{ width:22px; height:22px; color:#fff; opacity:.85; }
html[dir="rtl"] .member-card__contactless{ transform:scaleX(-1); }
.member-card__holder{ font-size:1.2rem; font-weight:700; letter-spacing:.4px; margin-top:12px; position:relative; z-index:1; }
.member-card--inactive{ filter:grayscale(.72) contrast(.96); }
.mc-warn{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  max-width:560px; width:100%; background:#FDECEC; border:1px solid #F1A9A9; border-radius:14px; padding:14px 18px;
  color:#8f1a13; font-size:.9rem; }
.digicard-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.digicard-actions svg{ width:15px; height:15px; }
.autorenew-panel{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  width:100%; max-width:440px; margin-top:4px; padding:14px 16px; border:1px solid var(--line,#e4e9f0);
  border-radius:12px; background:var(--surface,#f7f9fc); }
.autorenew-panel__text{ display:flex; flex-direction:column; gap:2px; }
.autorenew-panel__text strong{ font-size:.95rem; }
.autorenew-panel__text .muted{ font-size:.82rem; }
.autorenew-panel form{ margin:0; flex:0 0 auto; }
@media print{
  .topbar, .footer, .page-head, .digicard-actions, .autorenew-panel, .mc-warn, .digicard-wrap p.muted{ display:none !important; }
  .member-card{ box-shadow:none; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  main#main .container{ padding:0 !important; }
}

/* =====================================================================
   Event detail page — banner header + main/registration two-column.
   ===================================================================== */
.event-detail{ max-width:920px; margin:0 auto; }
.event-detail__banner{ border-radius:18px 18px 0 0; padding:32px 30px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--ods-primary), var(--ods-primary-dark)); }
.event-detail__banner::after{ content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  top:-120px; inset-inline-end:-80px; background:rgba(255,255,255,.08); }
.event-detail__banner > *{ position:relative; z-index:1; }
.event-detail__banner .type{ display:inline-flex; align-items:center; font-size:.72rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; background:rgba(255,255,255,.2); padding:5px 11px; border-radius:999px; margin-bottom:12px; }
.event-detail__banner h1{ color:#fff; margin:0 0 10px; }
.event-detail__meta{ display:flex; gap:18px; flex-wrap:wrap; font-size:.9rem; opacity:.94; }
.event-detail__meta span{ display:inline-flex; align-items:center; gap:7px; }
.event-detail__meta svg{ width:16px; height:16px; }
.event-detail__grid{ display:grid; grid-template-columns:1fr 320px; background:#fff;
  border:1px solid var(--ods-border); border-top:none; border-radius:0 0 18px 18px; overflow:hidden; }
.event-detail__main{ padding:28px 30px; line-height:1.6; }
.event-detail__main h2{ margin-top:0; }
.event-detail__panel{ padding:26px; background:var(--ods-surface); border-inline-start:1px solid var(--ods-border); }
.event-detail__price{ font-size:1.7rem; font-weight:800; color:var(--ods-primary); line-height:1; }
.event-detail__facts{ list-style:none; margin:18px 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.event-detail__facts li{ display:flex; align-items:center; gap:10px; color:var(--ods-ink-soft); font-size:.9rem; }
.event-detail__facts svg{ width:17px; height:17px; color:var(--ods-primary); flex:none; }
@media (max-width:760px){
  .event-detail__grid{ grid-template-columns:1fr; }
  .event-detail__panel{ border-inline-start:none; border-top:1px solid var(--ods-border); }
}

/* =====================================================================
   Member portal — quick-access tiles (horizontal icon + label).
   ===================================================================== */
.quick-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.quick-tile{ display:flex; align-items:center; gap:14px; padding:16px 18px; background:#fff;
  border:1px solid var(--ods-border); border-radius:14px; text-decoration:none; box-shadow:var(--shadow-sm);
  transition:transform .16s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.quick-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--ods-accent); text-decoration:none; }
.quick-tile__icon{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:var(--ods-primary-tint); color:var(--ods-primary); }
.quick-tile__icon svg{ width:22px; height:22px; }
.quick-tile__text strong{ display:block; color:var(--ods-ink); font-size:.98rem; }
.quick-tile__text span{ font-size:.8rem; color:var(--ods-ink-soft); }

/* =====================================================================
   Portal registration cards — date badge + event details + action.
   ===================================================================== */
.reg-section-head{ display:flex; align-items:center; gap:11px; margin:30px 0 14px; }
.reg-section-head__icon{ flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--ods-primary) 12%, #fff); color:var(--ods-primary); }
.reg-section-head__icon svg{ width:18px; height:18px; }
.reg-section-head__icon--muted{ background:#EEF2F6; color:var(--ods-ink-soft); }
.reg-section-head h2{ margin:0; font-size:1.15rem; }
.reg-section-head__count{ display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 8px;
  border-radius:999px; background:var(--ods-primary); color:#fff; font-size:.8rem; font-weight:700; line-height:1; }
.reg-section-head__count--muted{ background:#E6EAF0; color:var(--ods-ink-soft); }
.reg-list{ display:flex; flex-direction:column; gap:12px; }
.reg-card{ display:flex; align-items:center; gap:16px; padding:15px 18px; background:#fff;
  border:1px solid var(--ods-border); border-radius:14px; box-shadow:var(--shadow-sm);
  transition:border-color .18s ease, box-shadow .2s ease, transform .16s ease; }
.reg-card:hover{ border-color:var(--ods-accent); box-shadow:var(--shadow); transform:translateY(-1px); }
.reg-card__date{ flex:none; width:60px; height:60px; border-radius:13px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1; color:#fff;
  background:linear-gradient(135deg,var(--ods-primary),var(--ods-accent)); }
.reg-card__date .d{ font-size:1.55rem; font-weight:800; }
.reg-card__date .m{ font-size:.64rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-top:2px; }
.reg-card__main{ flex:1; min-width:0; }
.reg-card__main h3{ margin:0 0 5px; font-size:1rem; }
.reg-card__meta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:.84rem; color:var(--ods-ink-soft); }
.reg-card__meta span{ display:inline-flex; align-items:center; gap:5px; }
.reg-card__meta svg{ width:14px; height:14px; }
.reg-card__action{ flex:none; }
@media (max-width:560px){ .reg-card{ flex-wrap:wrap; } .reg-card__action{ width:100%; } .reg-card__action .btn{ width:100%; } }

/* Operator tenant-manage: setting rows (modules, domains) */
.settings-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--ods-border); flex-wrap:wrap; }
.settings-row:last-child{ border-bottom:none; }
.settings-row__name{ font-weight:600; flex:1; min-width:120px; }
.settings-row form{ margin:0; }

/* =====================================================================
   Panel header — icon badge + title + description (settings cards).
   ===================================================================== */
.panel-head{ display:flex; align-items:flex-start; gap:13px; margin:0 0 18px; padding-bottom:16px; border-bottom:1px solid var(--ods-border); }
.panel-head__icon{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:var(--ods-primary-tint); color:var(--ods-primary); }
.panel-head__icon svg{ width:21px; height:21px; }
.panel-head__t{ flex:1; min-width:0; }
.panel-head__t h3{ margin:0; }
.panel-head__t p{ margin:3px 0 0; font-size:.84rem; color:var(--ods-ink-soft); line-height:1.4; }
.panel-head__end{ flex:none; align-self:center; }

/* =====================================================================
   Operator console: unify all cards to the Provision card style
   (radius 20, soft deep shadow, #EAEEF3 border) via .op-console on <main>.
   ===================================================================== */
.op-console .card,
.op-console .data-card,
.op-console .stat-card{ border-radius:20px; border-color:#EAEEF3;
  box-shadow:0 10px 30px rgba(16,40,67,.06), 0 2px 8px rgba(16,40,67,.04); }
.op-console .card{ padding:26px; }
/* content/form cards are static (like prov-card) — no hover lift */
.op-console .card:hover{ transform:none; border-color:#EAEEF3;
  box-shadow:0 10px 30px rgba(16,40,67,.06), 0 2px 8px rgba(16,40,67,.04); }

/* Pager (shared _Pager partial) */
.pager{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-top:18px; }
.pager__info{ color:#5b6b7c; font-size:.9rem; }
.pager__nav{ display:flex; align-items:center; gap:10px; }
.pager__page{ color:#5b6b7c; font-size:.9rem; min-width:90px; text-align:center; }
.pager .is-disabled{ opacity:.45; pointer-events:none; }

/* Plan form: numbered section groups + polish */
.plan-form{ padding:28px 30px; }
.form-group{ padding:24px 0; border-top:1px solid var(--ods-border); }
.form-group:first-of-type{ border-top:none; padding-top:6px; }
.form-group:last-of-type{ padding-bottom:6px; }
.form-group__head{ display:flex; gap:12px; align-items:flex-start; margin:0 0 18px; }
.form-group__num{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:#EAF1FF; color:var(--ods-primary);
  background:color-mix(in srgb, var(--ods-primary) 12%, #fff);
  font-weight:700; font-size:.82rem; margin-top:2px; }
.form-group__head h4{ margin:0; font-size:1rem; letter-spacing:-.01em; color:var(--ods-ink); }
.form-group__head p{ margin:3px 0 0; color:var(--ods-ink-soft); font-size:.85rem; line-height:1.5; }
.plan-form__actions{ display:flex; gap:10px; margin-top:8px; padding-top:22px; border-top:1px solid var(--ods-border); }

/* Admin edit-form helpers (hints, unit prefix, toggle switch) */
.mform .hint{ display:block; font-weight:400; color:var(--ods-ink-soft); font-size:.8rem; margin-top:6px; }
.mform .field-error{ display:block; color:#B42318; font-size:.8rem; margin-top:6px; }
.mform .field-error:empty{ display:none; }
.input-prefix{ display:flex; align-items:stretch; }
.input-prefix__unit{ display:flex; align-items:center; padding:0 14px; background:#F1F5F9;
  border:1px solid var(--ods-border); border-inline-end:none; border-radius:12px 0 0 12px;
  color:var(--ods-ink-soft); font-weight:600; font-size:.9rem; white-space:nowrap; }
html[dir="rtl"] .input-prefix__unit{ border-radius:0 12px 12px 0; border-inline-end:1px solid var(--ods-border); border-inline-start:none; }
.input-prefix input{ border-start-start-radius:0 !important; border-end-start-radius:0 !important; }
.form-switch{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px;
  border:1px solid var(--ods-border); border-radius:12px; background:#fff; cursor:pointer; margin:0 0 18px; }
.form-switch__label{ font-weight:600; font-size:.9rem; }
.form-switch__label small{ display:block; font-weight:400; color:var(--ods-ink-soft); font-size:.8rem; margin-top:2px; }
.form-switch input{ appearance:none; -webkit-appearance:none; width:44px; height:24px; border-radius:999px;
  background:#CBD5E1; position:relative; cursor:pointer; transition:background .15s; flex:0 0 auto; margin:0; }
.form-switch input:checked{ background:var(--ods-primary); }
.form-switch input::after{ content:""; position:absolute; top:2px; inset-inline-start:2px; width:20px; height:20px;
  border-radius:50%; background:#fff; transition:inset-inline-start .15s; }
.form-switch input:checked::after{ inset-inline-start:22px; }

/* CPD certificate (formal document) */
.certificate{ max-width:820px; margin:0 auto; background:#fff; padding:12px;
  border:2px solid var(--ods-primary); border-radius:8px; box-shadow:0 20px 50px rgba(16,40,67,.14); }
.certificate__inner{ position:relative; padding:46px 50px 40px; text-align:center;
  border:1px solid #C9D7E6; border:1px solid color-mix(in srgb, var(--ods-primary) 32%, #fff); border-radius:4px; }
.certificate__brand{ display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; color:var(--ods-ink); }
.certificate__brand img{ width:34px; height:34px; object-fit:contain; border-radius:6px; }
.certificate__eyebrow{ text-transform:uppercase; letter-spacing:4px; font-size:.72rem; font-weight:700;
  color:var(--ods-primary); margin:22px 0 0; }
.certificate__lead{ color:var(--ods-ink-soft); margin:20px 0 4px; font-size:.95rem; }
.certificate__name{ font-family:Georgia,"Times New Roman",serif; font-size:2.4rem; line-height:1.1;
  color:var(--ods-primary); margin:2px 0 0; }
.certificate__rule{ width:min(260px,60%); height:2px; margin:14px auto 0;
  background:linear-gradient(90deg, transparent, var(--ods-primary), transparent); opacity:.5; }
.certificate__title{ font-family:Georgia,"Times New Roman",serif; font-size:1.45rem; color:var(--ods-ink); margin:4px 0 0; }
.certificate__meta{ margin:18px 0 0; font-size:1rem; color:var(--ods-ink); }
.certificate__meta strong{ color:var(--ods-primary); }
.certificate__seal{ width:84px; height:84px; margin:24px auto 0; color:var(--ods-primary); display:block; }
.certificate__verify{ display:flex; align-items:center; justify-content:center; gap:16px; text-align:start;
  margin:26px 0 0; padding-top:22px; border-top:1px solid var(--ods-border); }
.certificate__verify img{ width:96px; height:96px; image-rendering:pixelated; border:1px solid var(--ods-border);
  border-radius:8px; padding:6px; background:#fff; flex:0 0 auto; }
.certificate__verify-info{ font-size:.85rem; color:var(--ods-ink-soft); line-height:1.7; word-break:break-all; }
.certificate__verify-info a{ color:var(--ods-primary); }
@media (max-width:560px){
  .certificate__inner{ padding:30px 22px; }
  .certificate__name{ font-size:1.9rem; }
  .certificate__verify{ flex-direction:column; text-align:center; }
}
@media print{
  .certificate{ box-shadow:none; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* Event ticket (member) */
.ticket-wrap{ max-width:400px; margin:0 auto; }
.ticket{ background:#fff; border:1px solid var(--ods-border); border-radius:20px;
  box-shadow:0 14px 40px rgba(16,40,67,.10); }
.ticket__body{ padding:26px 26px 22px; }
.ticket__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; }
.ticket__title{ font-size:1.35rem; line-height:1.25; margin:0 0 18px; letter-spacing:-.01em; }
.ticket__meta{ display:grid; gap:11px; }
.ticket__meta-row{ display:flex; align-items:center; gap:11px; font-size:.92rem; color:var(--ods-ink); }
.ticket__meta-row svg{ width:18px; height:18px; color:var(--ods-primary); flex:0 0 auto; }
.ticket__holder{ margin-top:18px; padding-top:16px; border-top:1px solid var(--ods-border);
  display:flex; flex-direction:column; gap:3px; }
.ticket__holder-label{ font-size:.68rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--ods-ink-soft); }
.ticket__holder-name{ font-size:1.05rem; font-weight:700; color:var(--ods-ink); }
.ticket__perf{ position:relative; height:22px; }
.ticket__perf::after{ content:""; position:absolute; top:50%; inset-inline:22px; border-top:2px dashed var(--ods-border); }
.ticket__notch{ position:absolute; top:50%; width:22px; height:22px; border-radius:50%;
  background:var(--ods-bg); transform:translateY(-50%); }
.ticket__notch--l{ inset-inline-start:-11px; }
.ticket__notch--r{ inset-inline-end:-11px; }
.ticket__stub{ padding:6px 26px 26px; text-align:center; }
.ticket__qr{ width:200px; height:200px; image-rendering:pixelated; border:1px solid var(--ods-border);
  border-radius:14px; padding:10px; background:#fff; }
.ticket__code{ margin:16px 0 4px; }
.ticket__code span{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ods-ink-soft); margin-bottom:5px; }
.ticket__code code{ font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:1rem; letter-spacing:2px; color:var(--ods-ink); }
.ticket__hint{ color:var(--ods-ink-soft); font-size:.84rem; margin:10px auto 0; max-width:280px; }
.ticket__actions{ display:flex; gap:10px; justify-content:center; margin-top:20px; }
.ticket__actions svg{ width:15px; height:15px; }
@media print{
  .topbar, .footer, .ticket__actions{ display:none !important; }
  .ticket{ box-shadow:none; }
}

/* Operator danger zone (delete tenant) */
.danger-zone{ border-color:#F1A9A9 !important; }
.panel-head__icon--danger{ background:#FDECEC; color:#B42318; }
.btn--danger{ background:#B42318; border:1px solid #B42318; color:#fff; }
.btn--danger:hover{ background:#8f1a13; border-color:#8f1a13; }

/* Membership renewal nudge (member portal) */
.renew-banner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:#FFF7E6; border:1px solid #F5C97B; border-radius:14px; padding:14px 18px; margin-bottom:22px; }
.renew-banner--urgent{ background:#FDECEC; border-color:#F1A9A9; }
.renew-banner__text{ display:flex; flex-direction:column; gap:2px; }

/* Notification center */
.note-toolbar{ display:flex; gap:10px; align-items:center; }
.note--unread{ border-inline-start:3px solid #0F4C81; background:#F7FAFD; }
.note__dot{ display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#0F4C81; margin-inline-end:8px; vertical-align:middle; }
.note__foot{ display:flex; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid #EEF2F6; }

/* Spacing & width utilities — placed last so source order wins any equal-specificity
   component margin (e.g. .stat-grid, .dash-section-title, .alert). Single-property so
   they override only the one side, matching the inline styles they replace. */
.u-maxw-150{ max-width:150px; }
.u-maxw-220{ max-width:220px; }
.u-maxw-260{ max-width:260px; }
.u-maxw-280{ max-width:280px; }
.u-maxw-340{ max-width:340px; }
.u-maxw-440{ max-width:440px; }
.u-maxw-460{ max-width:460px; }
.u-maxw-520{ max-width:520px; }
.u-maxw-560{ max-width:560px; }
.u-maxw-640{ max-width:640px; }
.u-maxw-720{ max-width:720px; }
.u-maxw-760{ max-width:760px; }
.u-mt-8{ margin-top:8px; }
.u-mt-10{ margin-top:10px; }
.u-mt-12{ margin-top:12px; }
.u-mt-16{ margin-top:16px; }
.u-mt-28{ margin-top:28px; }
.u-mb-10{ margin-bottom:10px; }
.u-mb-16{ margin-bottom:16px; }
.u-mb-26{ margin-bottom:26px; }
.u-mb-30{ margin-bottom:30px; }
.u-mb-32{ margin-bottom:32px; }
.u-head-gap{ margin:28px 0 12px; }
.u-flush-b14{ margin:0 0 14px; }
.u-flush-b16{ margin:0 0 16px; }
.u-upper{ text-transform:uppercase; }
.u-mono{ font-family:monospace; }
.u-mono-soft{ font-family:monospace; color:var(--ods-ink-soft); }
.u-mono-ui{ font-family:ui-monospace,monospace; }
.u-fs-82{ font-size:.82rem; }
.u-fs-84{ font-size:.84rem; }
.u-break{ word-break:break-all; }
.u-nowrap{ white-space:nowrap; }
.u-field-note{ margin:0 0 4px; font-size:.85rem; }
.u-tac{ text-align:center; }
.u-jc-center{ justify-content:center; }
.u-mt-26{ margin-top:26px; }
.u-mb-0{ margin-bottom:0; }
.u-pt-0{ padding-top:0; }
.u-mis-8{ margin-inline-start:8px; }
.u-fw-400{ font-weight:400; }
.u-flex{ display:flex; }
.u-flex-col{ flex-direction:column; }
.u-flex-between{ display:flex; align-items:center; justify-content:space-between; }
.u-items-center{ align-items:center; }
.u-items-end{ align-items:flex-end; }
.u-items-start{ align-items:start; }
.u-jc-end{ justify-content:flex-end; }
.u-wrap{ flex-wrap:wrap; }
.u-gap-8{ gap:8px; }
.u-gap-10{ gap:10px; }
.u-gap-12{ gap:12px; }
.u-flex-1{ flex:1; }
.u-block{ display:block; }
.u-mt-4{ margin-top:4px; }
.u-mt-6{ margin-top:6px; }
.u-mb-14{ margin-bottom:14px; }
.u-flush-b28{ margin:0 0 28px; }
.u-grad-brand{ background:linear-gradient(135deg,var(--ods-primary),var(--ods-accent)); }
.u-chip-light{ background:rgba(255,255,255,.15); color:#fff; }
.u-c-white{ color:#fff; }
.u-c-success{ color:var(--ods-success); }
.u-c-error{ color:var(--ods-error); }
.u-bc-success{ border-color:var(--ods-success); }
.u-fs-1rem{ font-size:1rem; }
.u-fw-600{ font-weight:600; }
.u-w-110{ width:110px; }
.u-w-100{ width:100px; }
.u-m-y3{ margin:.3rem 0; }
.u-mt-r3{ margin:.3rem 0 0; }
.u-mh-5{ margin:.3rem 0 .5rem; }
.u-mh-6{ margin:.3rem 0 .6rem; }
.u-wrap-920{ max-width:920px; margin-inline:auto; }
.u-grid2-520{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:520px; }
.u-panel-480{ max-width:480px; margin:32px auto; text-align:center; }
.u-bio-note{ margin:.5rem 0 0; color:var(--ods-ink-soft); font-size:.88rem; }
.u-note-foot{ font-size:.8rem; margin:14px 0 0; }
.u-pad-y32{ padding-block:32px; }
/* Consistent 20px rhythm — wins over .stat-grid(24) / .grid(gap:24) by source order. */
.u-mb-20{ margin-bottom:20px; }
.u-mt-20{ margin-top:20px; }
.u-gap-20{ gap:20px; }

/* Operator: card-per-feature home editor */
.home-editor .edit-card{ border:1px solid var(--ods-border); border-radius:12px;
  padding:0 18px; margin:0 0 10px; background:var(--ods-surface); overflow:hidden; }
.home-editor__hint{ margin:0 0 12px; }
/* Collapsible section header — click to expand/collapse, with a rotating chevron. */
.home-editor details.edit-card > summary{ cursor:pointer; list-style:none; user-select:none;
  display:flex; align-items:center; gap:10px; margin:0 -18px; padding:13px 18px;
  font-weight:700; font-size:.86rem; color:var(--ods-primary); text-transform:uppercase; letter-spacing:.03em; }
.home-editor details.edit-card > summary::-webkit-details-marker{ display:none; }
.home-editor details.edit-card > summary::after{ content:""; width:8px; height:8px; margin-inline-start:auto; flex:none;
  border-inline-end:2px solid currentColor; border-block-end:2px solid currentColor;
  transform:rotate(45deg); transition:transform .18s ease; opacity:.6; }
.home-editor details.edit-card[open] > summary::after{ transform:rotate(-135deg); }
.home-editor details.edit-card > summary:hover{ background:var(--ods-primary-tint); }
.home-editor details.edit-card[open] > summary{ border-bottom:1px solid var(--ods-border); margin-bottom:12px; }
.home-editor details.edit-card[open]{ padding-bottom:8px; }

/* Operator: section reorder list */
.reorder{ list-style:none; padding:0; margin:0 0 8px; }
.reorder__row{ display:flex; align-items:center; gap:12px;
  padding:12px 14px; border:1px solid var(--ods-border); border-radius:10px; margin-bottom:8px; background:#fff;
  cursor:grab; user-select:none; touch-action:none; transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.reorder__row:hover{ border-color:var(--ods-primary); box-shadow:var(--shadow-sm); }
.reorder__row:active{ cursor:grabbing; }
.reorder__handle{ color:var(--ods-ink-soft); font-size:1.3rem; line-height:1; flex:none; }
.reorder__row:hover .reorder__handle{ color:var(--ods-primary); }
.reorder__name{ font-weight:600; font-size:.95rem; flex:1; }
.reorder__row--dragging{ cursor:grabbing; transform:scale(0.94);
  background:var(--ods-primary); border-color:var(--ods-primary); color:#fff;
  box-shadow:var(--shadow-lg); position:relative; z-index:3; }
.reorder__row--dragging .reorder__handle,
.reorder__row--dragging .reorder__name{ color:#fff; }

/* Operator tenant page: section tabs (one pane visible at a time) */
.op-tabs{ display:flex; flex-wrap:wrap; gap:4px; margin:0 0 22px; border-bottom:1px solid var(--ods-border); }
.op-tab{ appearance:none; -webkit-appearance:none; border:0; background:transparent; padding:10px 16px;
  font:inherit; font-size:.92rem; font-weight:600; color:var(--ods-muted,#5b6b7a); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:8px 8px 0 0; }
.op-tab:hover{ color:var(--ods-ink); background:var(--ods-surface,#f5f8fb); }
.op-tab.is-active{ color:var(--ods-primary); border-bottom-color:var(--ods-primary); }
.op-tab--danger.is-active{ color:#B42318; border-bottom-color:#B42318; }
.op-pane{ display:none; }
.op-pane.is-active{ display:block; animation:op-pane-in .16s ease; }
@keyframes op-pane-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* Operator: friendly brand colour pickers */
.brand-help{ font-size:.85rem; color:var(--ods-muted,#5b6b7a); margin:2px 0 10px; }
.brand-colors{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; margin:6px 0 14px; }
.brand-color{ display:flex; align-items:center; gap:10px; }
.brand-color input[type=color]{ width:40px; height:34px; padding:2px; border:1px solid var(--ods-border);
  border-radius:8px; background:#fff; cursor:pointer; flex:none; }
.brand-color label{ font-size:.88rem; color:var(--ods-ink); margin:0; }
@media (max-width:560px){ .brand-colors{ grid-template-columns:1fr; } }

/* one-click palette presets */
.brand-presets{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.brand-preset{ display:flex; align-items:center; gap:8px; padding:5px 12px 5px 6px; border:1px solid var(--ods-border);
  border-radius:999px; background:#fff; cursor:pointer; font-size:.82rem; color:var(--ods-ink); line-height:1; }
.brand-preset:hover{ border-color:var(--ods-primary); }
.brand-preset__swatch{ width:20px; height:20px; border-radius:50%; border:1px solid rgba(0,0,0,.12); flex:none; }

/* two big base pickers */
.brand-mains{ display:flex; flex-wrap:wrap; gap:22px; margin:0 0 12px; }
.brand-color--lg{ flex-direction:column; align-items:flex-start; gap:6px; }
.brand-color--lg input[type=color]{ width:72px; height:48px; }

/* live preview strip */
.brand-swatch{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px;
  border:1px solid var(--ods-border); border-radius:10px; background:var(--ods-surface,#f5f8fb); margin:0 0 14px; }
.brand-swatch__title{ font-size:.8rem; color:var(--ods-muted,#5b6b7a); margin-inline-end:4px; }
.brand-swatch__btn{ padding:5px 12px; border-radius:8px; color:#fff; font-size:.8rem; font-weight:600;
  text-shadow:0 1px 1px rgba(0,0,0,.18); }

/* advanced fold */
.brand-adv{ margin:0 0 14px; }
.brand-adv > summary{ cursor:pointer; font-size:.85rem; color:var(--ods-primary); padding:4px 0; }
.brand-adv[open] > summary{ margin-bottom:8px; }

/* Operator: tenant home preview box */
.tpreview{ border-radius:14px; padding:20px 22px; color:#fff; overflow:hidden; }
.tpreview__bar{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.tpreview__logo{ height:28px; width:auto; border-radius:4px; padding:0; }
.tpreview__name{ font-weight:700; font-size:.9rem; opacity:.92; }
.tpreview__head{ margin:0 0 6px; font-size:1.25rem; line-height:1.25; color:#fff; }
.tpreview__sub{ margin:0 0 14px; font-size:.9rem; color:rgba(255,255,255,.85); }
.tpreview__cta{ display:inline-block; padding:8px 16px; border-radius:999px; font-weight:600; font-size:.85rem; color:#0A3A63; }
.tpreview__meta{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.tpreview__swatch{ width:22px; height:22px; border-radius:6px; border:1px solid var(--ods-border); flex:none; }
.tpreview__meta .btn{ margin-inline-start:auto; }
.tpreview__label{ margin:14px 0 6px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ods-ink-soft); }
.tpreview__order{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; counter-reset:sec; }
.tpreview__chip{ counter-increment:sec; display:inline-flex; align-items:center; gap:5px; padding:4px 10px 4px 6px;
  border:1px solid var(--ods-border); border-radius:999px; background:#fff; font-size:.8rem; font-weight:600; }
.tpreview__chip::before{ content:counter(sec); display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; background:var(--ods-surface-2); font-size:.66rem; color:var(--ods-ink-soft); }
.tpreview__chip--off{ opacity:.55; text-decoration:line-through; }
.tpreview__chip--custom{ background:var(--ods-accent-tint); border-color:var(--ods-accent); }
.tpreview__chip--custom::before{ content:"✦"; background:var(--ods-accent); color:#fff; }
.tpreview__blocks{ display:flex; flex-direction:column; gap:8px; }
.tpreview__block{ border:1px solid var(--ods-border); border-inline-start:3px solid var(--ods-accent);
  border-radius:10px; padding:12px 14px; background:#fff; }
.tpreview__block--tint{ background:var(--ods-surface); }
.tpreview__block h5{ margin:0 0 5px; font-size:.95rem; color:var(--ods-ink); }
.tpreview__block-body{ font-size:.85rem; color:var(--ods-ink-soft); line-height:1.5; max-height:140px; overflow:hidden; }
.tpreview__block-body > *:first-child{ margin-top:0; }
.tpreview__block-body p{ margin:0 0 6px; }

/* Branding & Home tab: editor cards on one side, a sticky live preview alongside. */
.brand-intro{ font-size:.9rem; color:var(--ods-ink-soft); line-height:1.5; margin:0 0 18px; max-width:72ch; }
.brand-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; }
.brand-layout > .brand-a{ grid-column:1; grid-row:1; margin-bottom:0; }
.brand-layout > .brand-b{ grid-column:1; grid-row:2; margin-bottom:0; }
.brand-layout > .brand-preview-card{ grid-column:2; grid-row:1 / span 2; position:sticky; top:16px;
  align-self:start; max-height:calc(100vh - 32px); overflow:auto; margin-bottom:0; }
@media (max-width:1080px){
  .brand-layout{ grid-template-columns:1fr; }
  .brand-layout > .brand-a,
  .brand-layout > .brand-b,
  .brand-layout > .brand-preview-card{ grid-column:1; grid-row:auto; position:static;
    max-height:none; overflow:visible; margin-bottom:20px; }
}

/* Home editor: numbered sub-cards for repeated items (trust figures, custom blocks, nav links). */
.home-editor .repeat-item{ border:1px solid var(--ods-border); border-radius:10px; padding:14px 14px 2px;
  margin:0 0 12px; background:var(--ods-surface,#f7fafc); }
.home-editor .repeat-item:last-child{ margin-bottom:2px; }
.home-editor .repeat-item__head{ display:flex; align-items:center; gap:9px; margin:0 0 12px;
  font-weight:700; font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ods-ink-soft); }
.home-editor .repeat-item__num{ display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:var(--ods-primary); color:#fff;
  font-size:.75rem; font-weight:700; flex:none; }

/* Modules tab: friendly module name + description per row. */
.module-row__name{ display:block; }
.module-row__desc{ display:block; font-weight:400; font-size:.8rem; color:var(--ods-ink-soft); margin-top:2px; }

/* Registration: choose-a-plan radio cards */
.reg-plans{ display:flex; flex-direction:column; gap:8px; margin:2px 0 18px; }
.reg-plans__label{ font-weight:600; font-size:.85rem; color:var(--ods-ink); }
.reg-plans__error{ color:#B42318; font-size:.8rem; }
.reg-plans__error:empty{ display:none; }
.reg-plan{ display:block; cursor:pointer; position:relative; }
.reg-plan__radio{ position:absolute; opacity:0; width:0; height:0; }
.reg-plan__card{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1.5px solid var(--ods-border); border-radius:12px; padding:11px 14px; background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease; }
.reg-plan__card:hover{ border-color:var(--ods-primary); }
.reg-plan__radio:checked + .reg-plan__card{ border-color:var(--ods-primary); box-shadow:0 0 0 3px var(--ods-primary-tint); }
.reg-plan__radio:focus-visible + .reg-plan__card{ outline:2px solid var(--ods-primary); outline-offset:2px; }
.reg-plan__name{ font-weight:700; font-size:.95rem; display:block; }
.reg-plan__desc{ font-size:.8rem; color:var(--ods-ink-soft); display:block; margin-top:2px; }
.reg-plan__price{ text-align:end; font-size:.8rem; color:var(--ods-ink-soft); white-space:nowrap; }
.reg-plan__price strong{ font-size:1.05rem; color:var(--ods-primary); }
html[dir="rtl"] .reg-plan__price{ text-align:start; }

/* Complete-your-membership card (post-signup) */
.complete-price{ margin:8px 0 14px; font-size:1rem; }
.complete-price strong{ font-size:1.6rem; color:var(--ods-primary); font-weight:800; letter-spacing:-.01em; }
.complete-price__cur{ font-size:1rem; font-weight:600; }

/* Tenant self-service Customize page: welcoming header + readable card width. */
.cz-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--ods-surface,#f5f8fb); border:1px solid var(--ods-border);
  border-inline-start:4px solid var(--ods-primary); border-radius:14px; padding:20px 22px; margin:0 0 20px; }
.cz-hero__text{ min-width:0; }
.cz-hero__text h1{ margin:2px 0 6px; }
.cz-hero__name{ color:var(--ods-primary); }
.cz-hero__text .lead{ margin:0; max-width:70ch; }
.cz-hero__back{ flex:none; }
.cz-card{ max-width:760px; }

/* Customize page cards: stable, premium settings cards (no hover jump while filling forms). */
.cz-page .card{ border-radius:20px; border-color:#EAEEF3; padding:26px;
  box-shadow:0 10px 30px rgba(16,40,67,.06), 0 2px 8px rgba(16,40,67,.04); }
.cz-page .card:hover{ transform:none; border-color:#EAEEF3;
  box-shadow:0 10px 30px rgba(16,40,67,.06), 0 2px 8px rgba(16,40,67,.04); }
/* richer header badge — gradient chip with a soft shadow, matching the stat cards */
.cz-page .panel-head{ align-items:center; }
.cz-page .panel-head__icon{ width:46px; height:46px; border-radius:13px; color:#fff;
  background:linear-gradient(135deg, var(--ods-primary), var(--ods-primary-dark));
  box-shadow:0 8px 16px rgba(16,40,67,.16); }
.cz-page .panel-head__t h3{ font-size:1.08rem; letter-spacing:-.01em; }

/* --- Tenant-admin subscription page --- */
.sub-grid{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:8px; }
@media (min-width:900px){ .sub-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; } }
.sub-status{ padding:22px 24px; }
.sub-status__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding-bottom:16px; border-bottom:1px solid #EEF2F7; }
.sub-status__plan{ font-size:1.3rem; font-weight:700; letter-spacing:-.01em; color:#101E2E; }
.sub-status__body{ padding-top:16px; }
.sub-status__until{ font-size:1.05rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.sub-status__until strong{ color:#101E2E; font-size:1.15rem; }
.sub-note{ margin-top:12px; font-size:.9rem; }
.sub-renew{ margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.sub-renew__hint{ font-size:.85rem; }
.sub-invoices{ padding:20px 22px; }

/* --- Topbar notification bell --- */
.notif-bell{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; color:inherit; text-decoration:none;
  transition:background .12s; }
.notif-bell:hover{ background:rgba(127,127,127,.14); }
.notif-bell svg{ width:20px; height:20px; }
.notif-bell__badge{ position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:#E5484D; color:#fff; font-size:.68rem; font-weight:700; line-height:16px;
  text-align:center; box-shadow:0 0 0 2px var(--bell-ring, #fff); }

/* --- Notification center: tenant-page panel-card styling --- */
.note-card{ padding:22px 24px; }
.note-card .panel-head{ margin-bottom:16px; }
.note-card__body{ color:var(--ods-ink); line-height:1.55; font-size:.94rem; }
.note-card__body p{ margin:0; }
.note-card__body p + p{ margin-top:8px; }
.note-card--unread{ border-inline-start:3px solid var(--ods-primary); background:#F9FBFE; }
/* Panel-head icon tints per notification category (match the tenant page's tinted icon squares) */
.note-ico--renewal{ background:#FEF3E0; color:#B45309; }
.note-ico--finance{ background:#E7F6EE; color:#0E7A4B; }
.note-ico--award{ background:#F1EBFF; color:#6D28D9; }
.note-ico--info{ background:var(--ods-primary-tint); color:var(--ods-primary); }
/* Footer actions as small ghost buttons */
.note__foot .btn-manage{ cursor:pointer; font-family:inherit; display:inline-flex; align-items:center;
  padding:6px 14px; border:1px solid var(--ods-border); border-radius:8px; background:#fff;
  font-size:.83rem; font-weight:600; color:#3A4756; transition:all .12s; }
.note__foot .btn-manage:hover{ border-color:#2563EB; color:#1D4ED8; background:#F5F8FF; }

/* --- Branding logo upload field --- */
.logo-field{ margin-bottom:16px; }
.logo-field > label{ display:block; font-size:.85rem; font-weight:600; color:#3A4756; margin-bottom:8px; }
.logo-field__row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.logo-field__preview{ width:76px; height:76px; flex:none; border:1px solid var(--ods-border);
  border-radius:12px; background:#F7F9FC; display:grid; place-items:center; overflow:hidden; }
.logo-field__preview img{ max-width:100%; max-height:100%; object-fit:contain; }
.logo-field__ph{ font-size:.72rem; color:#93A1B0; text-align:center; padding:4px; }
.logo-field__controls{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:6px; }
.logo-field__controls input[type=file]{ font-size:.86rem; }
.logo-field__remove{ display:inline-flex; align-items:center; gap:7px; font-size:.84rem; color:#B42318;
  font-weight:600; cursor:pointer; width:fit-content; }
.logo-field__remove input{ width:auto; margin:0; accent-color:#B42318; }
/* Logo position & zoom editor */
.logo-adjust{ margin-top:14px; }
.logo-adjust > label{ display:block; font-size:.85rem; font-weight:600; color:#3A4756; margin-bottom:8px; }
.logo-adjust__stage{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.logo-adjust__box{ width:64px; height:64px; flex:none; border:1px solid var(--ods-border); border-radius:12px;
  background:#F7F9FC; overflow:hidden; display:grid; place-items:center; }
.logo-adjust__box img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  transform-origin:center; display:block; }
.logo-adjust__pad{ display:grid; grid-template-columns:repeat(3, 30px); grid-template-rows:repeat(3, 30px); gap:4px; }
.adj-up{ grid-column:2; grid-row:1; } .adj-left{ grid-column:1; grid-row:2; }
.adj-reset{ grid-column:2; grid-row:2; } .adj-right{ grid-column:3; grid-row:2; } .adj-down{ grid-column:2; grid-row:3; }
.logo-adjust__zoom{ display:inline-flex; align-items:center; gap:8px; }
.logo-adjust__zval{ font-size:.82rem; font-weight:700; color:#2563EB; min-width:42px; text-align:center; font-variant-numeric:tabular-nums; }
.adj-btn{ cursor:pointer; width:30px; height:30px; border:1px solid #D8E0EA; border-radius:8px; background:#fff;
  color:#3A4756; font-size:1rem; line-height:1; display:grid; place-items:center; transition:all .12s; padding:0; }
.adj-btn:hover{ border-color:#2563EB; color:#1D4ED8; background:#F5F8FF; }

/* ── Profile (self-service account) ─────────────────────────────────────────
   Reuses .profile-card / .profile-hero / .profile-body from the directory
   profile; these add only what the account page needs on top. */

/* Uploaded picture fills the existing hero avatar box; initials still render
   when there is no image, so the box is styled once and used both ways. */
.profile-hero__avatar img{ width:100%; height:100%; border-radius:inherit; object-fit:cover; display:block; }

/* Read-only detail list on the profile page. */
.deflist{ display:grid; grid-template-columns:1fr; gap:2px 18px; margin:0 0 20px; }
.deflist dt{ font-size:.78rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--ods-muted); padding-top:10px; }
.deflist dd{ margin:0; font-size:.95rem; color:var(--ods-ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
@media (min-width:560px){
  .deflist{ grid-template-columns:170px minmax(0,1fr); }
  .deflist dt{ padding-top:0; }
  .deflist dd{ min-height:1.5rem; }
}

/* Button pair under the profile / at the foot of its forms. */
.profile-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }

/* Picture upload: current image beside the file input. */
.avatar-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; }
.avatar-form__field{ flex:1 1 240px; min-width:0; margin:0; }
.avatar-preview{ flex:none; width:64px; height:64px; border-radius:16px; display:grid; place-items:center;
  background:var(--ods-surface-2); border:1px solid var(--ods-border); color:var(--ods-primary);
  font-weight:800; font-size:1.25rem; overflow:hidden; }
.avatar-preview img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── Notification preferences ───────────────────────────────────────────────
   Member-facing, so it follows the same idiom as the notification centre and
   profile cards: padded card body, panel-head with a tinted icon square, and
   hairline-separated rows — not the back-office .data-table it started as. */
.prefs-card{ padding:22px 24px; }
.prefs-card .panel-head{ margin-bottom:4px; }

/* Channel columns. The legend and the rows share one grid template so the
   checkboxes sit exactly under their headings. */
.pref-legend,
.pref-row{ display:grid; grid-template-columns:minmax(0,1fr) 86px 86px; gap:12px; }
.pref-legend{ align-items:end; padding:12px 0 10px; border-bottom:1px solid var(--ods-border); }
.pref-legend__ch{ text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ods-ink-soft); }
/* "All" appears only once the script un-hides it, so it never shows without behaviour. */
.prefs-all{ display:block; margin:4px auto 0; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.72rem; font-weight:600; color:var(--ods-primary); letter-spacing:0; text-transform:none; }
.prefs-all:hover{ text-decoration:underline; }

.pref-row{ align-items:center; padding:15px 0; border-bottom:1px solid #EEF2F6; }
.pref-row:last-of-type{ border-bottom:0; }
.pref-row__text strong{ display:block; font-size:.94rem; font-weight:650; color:var(--ods-ink); }
.pref-row__text span{ display:block; margin-top:3px; font-size:.84rem; line-height:1.45; color:var(--ods-ink-soft); }
.pref-row__ch{ display:grid; justify-items:center; gap:5px; cursor:pointer; }
.pref-row__ch input{ width:20px; height:20px; accent-color:var(--ods-primary); cursor:pointer; }
/* Per-toggle caption: redundant under the legend on wide screens, essential once it's gone. */
.pref-row__chlabel{ display:none; font-size:.7rem; font-weight:600; color:var(--ods-ink-soft); }

@media (max-width:560px){
  .pref-legend{ display:none; }
  .pref-row{ grid-template-columns:minmax(0,1fr) auto auto; gap:18px; align-items:start; }
  .pref-row__chlabel{ display:block; }
}

/* "Always sent" — a plain list would read as another set of options, so each
   item is marked with the same tinted icon square used elsewhere. */
.prefs-always{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.prefs-always li{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--ods-ink-soft); line-height:1.45; }
.prefs-always svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--ods-primary); }

/* ── Provisioning add-on (sold beside the plan cards, not inside them) ──── */
.addon-opt{ display:block; cursor:pointer; margin-top:12px; }
.addon-opt input{ position:absolute; opacity:0; width:0; height:0; }
.addon-opt__body{ display:flex; flex-direction:column; gap:6px; padding:14px 16px;
  border:1.5px dashed var(--ods-border,#dbe6ef); border-radius:12px; background:var(--ods-surface,#fff);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.addon-opt:hover .addon-opt__body{ border-color:color-mix(in srgb, var(--ods-primary) 40%, #dbe6ef); }
.addon-opt input:checked + .addon-opt__body{ border-style:solid; border-color:var(--ods-primary);
  background:color-mix(in srgb, var(--ods-primary) 5%, #fff);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ods-primary) 15%, transparent); }
.addon-opt input:focus-visible + .addon-opt__body{ outline:2px solid var(--ods-primary); outline-offset:2px; }
.addon-opt__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.addon-opt__name{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--ods-ink); }
.addon-opt__name svg{ width:18px; height:18px; flex:none; color:#25D366; } /* WhatsApp brand green */
.addon-opt__price{ font-weight:800; color:var(--ods-primary); white-space:nowrap; }
.addon-opt__price span{ font-size:.72rem; font-weight:600; color:var(--ods-muted); }
.addon-opt__desc{ font-size:.85rem; color:var(--ods-muted); }
/* The channel isn't built yet — this warning must stay legible whether or not the box is ticked. */
.addon-opt__warn{ display:flex; align-items:flex-start; gap:7px; margin-top:2px; padding:8px 10px;
  border-radius:9px; background:#FEF6E0; color:#7A5606; font-size:.8rem; line-height:1.45; }
.addon-opt__warn svg{ width:15px; height:15px; flex:none; margin-top:2px; }
@media (max-width:640px){ .addon-opt__body{ padding:13px 14px; } }

/* ---- Conference registration steps ---------------------------------------
   A progress rail across the four steps of the registration form. Numbered
   because the steps genuinely are a sequence a delegate moves through, not a
   set of choices — the number tells them how much is left.                  */
.reg-steps{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 22px; padding:0; counter-reset:reg-step; }
.reg-steps li{
  counter-increment:reg-step; position:relative; flex:1 1 140px; min-width:130px;
  padding:11px 14px 11px 40px; border:1px solid var(--line,#e4e9f0); border-radius:11px;
  background:var(--surface,#f7f9fc); color:var(--ods-ink-soft); font-size:.86rem; font-weight:550; }
.reg-steps li::before{
  content:counter(reg-step); position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:#E6EAF0; color:var(--ods-ink-soft); font-size:.74rem; font-weight:700; }
.reg-steps li.is-current{ border-color:var(--ods-accent,#0B7C57); background:#fff; color:var(--ods-ink); }
.reg-steps li.is-current::before{ background:var(--ods-accent,#0B7C57); color:#fff; }
.reg-steps li.is-done{ background:#E7F6EE; border-color:transparent; color:#0E7A4B; }
.reg-steps li.is-done::before{ content:"✓"; background:#16A34A; color:#fff; }
[dir="rtl"] .reg-steps li{ padding:11px 40px 11px 14px; }
[dir="rtl"] .reg-steps li::before{ left:auto; right:12px; }
@media (max-width:640px){ .reg-steps li{ flex-basis:100%; } }


/* ---- Conference registration -----------------------------------------------
   The registration flow reuses the member-facing card language rather than the
   admin one: same surface, radius and shadow as the Membership plan cards, so a
   delegate arriving from the navigation lands somewhere familiar.            */

/* A section inside the registration form. Same shell as .card, with a titled
   head so a long form reads as a few labelled steps rather than one wall.    */
.reg-card{ padding:22px 24px; }
.reg-card__head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.reg-card__icon{ width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:var(--ods-accent-tint); color:var(--ods-accent-dark); }
.reg-card__icon svg{ width:22px; height:22px; }
.reg-card__head h3{ margin:0; font-size:1.02rem; }
.reg-card__head p{ margin:3px 0 0; font-size:.86rem; color:var(--ods-ink-soft); max-width:62ch; }
/* The form card is a container, not a clickable card: keep it still on hover. */
.reg-card:hover{ transform:none; box-shadow:var(--shadow-sm); border-color:var(--ods-border); }

/* Facts about the thing being acted on, above the form that acts on it. Two
   columns so the labels form a readable edge and the values line up.         */
.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0 0 18px;
  padding:0 0 16px; border-bottom:1px solid var(--ods-border); }
.kv dt{ font-size:.8rem; color:var(--ods-ink-soft); }
.kv dd{ margin:0; font-size:.88rem; font-weight:600; }

/* A field and its button on one line, inside a table cell. */
.inline-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.inline-form input{ margin:0; min-width:150px; }

/* The societies whose membership earns the discounted rate. The code carries the
   weight because it is what the delegate selects; the name is there to be
   recognised, so it sits beside it rather than replacing it.                  */
.society-list{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:5px; }
.society-list li{ font-size:.85rem; line-height:1.45; }
.society-list strong{ font-weight:650; }

/* Announced workshops. Published, not purchasable — so this reads as a notice
   board and carries no control a delegate could mistake for a way to book.    */
.workshops{ padding:22px 24px; }
.workshops:hover{ transform:none; box-shadow:var(--shadow-sm); border-color:var(--ods-border); }
.workshops h3{ margin:0 0 6px; font-size:1.02rem; }
.workshops > .muted{ margin:0 0 14px; font-size:.85rem; line-height:1.6; max-width:62ch; }
.workshops__list{ margin:0; padding-inline-start:1.4em; display:grid; gap:7px; }
.workshops__list li{ font-size:.87rem; line-height:1.45; padding-inline-start:2px; }
.workshops__list li::marker{ color:var(--ods-accent-dark); font-weight:650; font-size:.82rem; }

/* Choosing a category or a rate. A radio, but presented as the thing it picks. */
.pick-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.pick-grid--2{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.pick{ position:relative; display:flex; align-items:center; gap:13px; padding:15px 16px; cursor:pointer;
  border:1.5px solid var(--ods-border); border-radius:14px; background:#fff;
  transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); }
.pick:hover{ border-color:var(--ods-accent); background:var(--ods-accent-tint); }
/* The native control still carries the state and the keyboard behaviour — it is
   moved out of sight, not removed, so the label stays a real radio.          */
.pick input{ position:absolute; opacity:0; width:1px; height:1px; }
.pick:has(input:focus-visible){ outline:2px solid var(--ods-accent); outline-offset:2px; }
.pick.is-chosen{ border-color:var(--ods-accent); background:var(--ods-accent-tint); box-shadow:var(--shadow-sm); }
.pick.is-disabled{ opacity:.55; cursor:not-allowed; }
.pick__icon{ width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:var(--ods-accent-tint); color:var(--ods-accent-dark); }
.pick.is-chosen .pick__icon{ background:#fff; }
.pick__icon svg{ width:20px; height:20px; }
.pick__body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.pick__body strong{ font-size:.93rem; font-weight:650; color:var(--ods-ink); }
.pick__note{ font-size:.79rem; color:var(--ods-ink-soft); }
.pick__tick{ width:22px; height:22px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--ods-accent); color:#fff; opacity:0; transform:scale(.7);
  transition:opacity .18s var(--ease), transform .18s var(--ease); }
.pick.is-chosen .pick__tick{ opacity:1; transform:scale(1); }
.pick__tick svg{ width:13px; height:13px; }
/* A rate is a price first — it lines up on the end like the plan cards do.    */
.pick--rate{ align-items:flex-start; }
.pick__price{ flex:none; text-align:end; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.pick__price b{ font-size:1.45rem; font-weight:800; color:var(--ods-primary); letter-spacing:-.02em; line-height:1; }
.pick__price span{ font-size:.72rem; color:var(--ods-ink-soft); letter-spacing:.04em; }
.pick__price em{ font-style:normal; }

/* Multi-select answers (field of work) read better as chips than as a list.   */
.chip-set{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; display:inline-flex; align-items:center; padding:8px 14px; cursor:pointer;
  border:1.5px solid var(--ods-border); border-radius:999px; background:#fff;
  font-size:.84rem; color:var(--ods-ink);
  transition:border-color .18s var(--ease), background .18s var(--ease); }
.chip:hover{ border-color:var(--ods-accent); }
.chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.chip:has(input:focus-visible){ outline:2px solid var(--ods-accent); outline-offset:2px; }
.chip:has(input:checked){ border-color:var(--ods-accent); background:var(--ods-accent-tint);
  color:var(--ods-accent-dark); font-weight:600; }

/* The confirmation code is the only field worth setting apart — it is copied
   from an email, six characters at a time.                                    */
.reg-code{ font-size:1.5rem; letter-spacing:.4em; text-align:center; font-variant-numeric:tabular-nums; }

@media (max-width:640px){
  .reg-card{ padding:18px 16px; }
  .pick-grid{ grid-template-columns:1fr; }
}

/* =====================================================================
   The conference: its banner on the home page, its cards, its rate card.
   Dark where the hero is light — this band replaces the hero while a
   conference is live, and it has to read as a different kind of thing
   rather than as the hero with different words in it.
   ===================================================================== */
.conf-banner{ position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 420px at 90% -20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, var(--ods-primary-dark), var(--ods-primary) 55%, var(--ods-accent-dark)); }
.conf-banner__inner{ display:flex; align-items:center; gap:40px; padding-block:56px 60px; }
.conf-banner__copy{ flex:1; min-width:0; }
.conf-banner__badge{ display:inline-flex; align-items:center; gap:9px; font-size:.8rem; font-weight:600;
  color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  padding:7px 15px; border-radius:var(--radius-pill); margin-bottom:20px; }
.conf-banner__badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--ods-success); flex:none; }
.conf-banner h1{ color:#fff; font-size:clamp(1.9rem,4.2vw,3rem); font-weight:800; margin-bottom:16px;
  letter-spacing:-.01em; }
.conf-banner__when{ display:flex; flex-wrap:wrap; gap:20px; margin-bottom:16px; font-size:.95rem; }
.conf-banner__when span{ display:inline-flex; align-items:center; gap:8px; opacity:.94; }
.conf-banner__when svg{ width:17px; height:17px; flex:none; }
.conf-banner__sub{ font-size:1.05rem; max-width:60ch; margin-bottom:26px; opacity:.92; line-height:1.6; }
.conf-banner__cta{ display:flex; flex-wrap:wrap; gap:14px; }
/* The countdown is the one number worth setting apart: it is why somebody
   registers today rather than meaning to.                                    */
.conf-banner__count{ flex:none; text-align:center; padding:22px 26px; border-radius:18px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); }
.conf-banner__count b{ display:block; font-size:3rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
.conf-banner__count span{ display:block; margin-top:6px; font-size:.8rem; opacity:.85; }
@media (max-width:860px){
  .conf-banner__inner{ flex-direction:column; align-items:flex-start; gap:26px; padding-block:44px 46px; }
  .conf-banner__count{ align-self:stretch; display:flex; align-items:baseline; justify-content:center; gap:10px; }
  .conf-banner__count b{ font-size:2.2rem; }
  .conf-banner__count span{ margin-top:0; }
}

/* Countdown again, in the details sidebar. */
.conf-count{ text-align:center; padding:16px; border-radius:14px; margin-bottom:16px;
  background:var(--ods-primary-tint); color:var(--ods-primary-dark); }
.conf-count b{ display:block; font-size:2.2rem; font-weight:800; line-height:1; }
.conf-count span{ display:block; margin-top:4px; font-size:.78rem; color:var(--ods-ink-soft); }

/* Admin-entered prose. Escaped, with the author's line breaks kept — the
   fields are plain text on purpose (see Conference.VenueDetails).            */
.conf-text{ white-space:pre-line; line-height:1.65; max-width:68ch; }

/* One conference in the list of them. */
.conf-card{ display:flex; align-items:center; gap:16px; text-decoration:none; }
.conf-card:hover{ text-decoration:none; }
.conf-card__year{ flex:none; width:62px; height:62px; border-radius:14px; display:grid; place-items:center;
  background:var(--ods-primary-tint); color:var(--ods-primary); font-weight:800; font-size:.95rem;
  font-variant-numeric:tabular-nums; }
.conf-card__body{ min-width:0; }
.conf-card__body strong{ display:block; color:var(--ods-ink); font-size:1rem; line-height:1.35; }
.conf-card__dates{ display:inline-flex; align-items:center; gap:7px; margin-top:5px;
  font-size:.84rem; color:var(--ods-ink-soft); }
.conf-card__dates svg{ width:15px; height:15px; flex:none; }
.conf-card--past .conf-card__year{ background:var(--ods-surface); color:var(--ods-ink-soft); }

/* Registration step one: the form, and beside it what it is going to cost.
   Stacks form-first below 900px — the rates are context, not the task.        */
.reg-layout{ display:grid; grid-template-columns:minmax(0,560px) minmax(0,340px); gap:24px;
  align-items:start; }
.reg-layout__aside{ position:sticky; top:88px; }
@media (max-width:900px){
  .reg-layout{ grid-template-columns:1fr; max-width:560px; }
  .reg-layout__aside{ position:static; }
}

/* A heading inside the conference dropdown — a label, not a destination. */
.more-menu__sep{ margin-top:6px; padding:8px 14px 4px; border-top:1px solid var(--ods-border);
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ods-ink-soft); }

/* =====================================================================
   The conference site — full-bleed bands, not a detail card. It uses the
   same section/container rhythm as the tenant landing, so the conference
   and the association read as one site rather than as a page bolted on.
   ===================================================================== */
.conf-hero{ position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 420px at 88% -25%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, var(--ods-primary-dark), var(--ods-primary) 55%, var(--ods-accent-dark)); }
.conf-hero__inner{ display:flex; align-items:center; gap:40px; padding-block:64px 68px; }
.conf-hero__copy{ flex:1; min-width:0; }
.conf-hero__eyebrow{ display:inline-block; font-size:.85rem; letter-spacing:.04em; opacity:.9; margin-bottom:14px; }
.conf-hero h1{ color:#fff; font-size:clamp(2rem,4.6vw,3.2rem); font-weight:800; letter-spacing:-.015em;
  margin-bottom:16px; max-width:20ch; }
.conf-hero__sub{ font-size:1.08rem; max-width:62ch; margin-bottom:28px; opacity:.93; line-height:1.65; }
.conf-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.conf-hero__closed{ font-size:.95rem; opacity:.9; padding:10px 0; }
.conf-hero__count{ flex:none; text-align:center; padding:24px 28px; border-radius:18px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); }
.conf-hero__count b{ display:block; font-size:3.2rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
.conf-hero__count span{ display:block; margin-top:6px; font-size:.8rem; opacity:.85; }
@media (max-width:860px){
  .conf-hero__inner{ flex-direction:column; align-items:flex-start; gap:26px; padding-block:46px 48px; }
  .conf-hero__count{ align-self:stretch; display:flex; align-items:baseline; justify-content:center; gap:10px; }
  .conf-hero__count b{ font-size:2.3rem; }
  .conf-hero__count span{ margin-top:0; }
}

/* In-page navigation. Sticky, because what makes a long page feel like a site
   is being able to reach any part of it from any other part.                 */
.conf-subnav{ position:sticky; top:0; z-index:40; background:#fff;
  border-bottom:1px solid var(--ods-border); box-shadow:var(--shadow-sm); }
.conf-subnav__inner{ display:flex; align-items:center; gap:4px; overflow-x:auto; scrollbar-width:none; }
.conf-subnav__inner::-webkit-scrollbar{ display:none; }
.conf-subnav a{ flex:none; padding:14px; font-size:.9rem; font-weight:600; color:var(--ods-ink-soft);
  text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
.conf-subnav a:hover{ color:var(--ods-primary); border-bottom-color:var(--ods-accent); text-decoration:none; }
.conf-subnav__cta{ margin-inline-start:auto; color:var(--ods-primary) !important; }

/* At a glance — the band somebody skims, so the numbers lead. */
.conf-facts{ padding-block:34px; }
.conf-facts__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:14px 40px; }
.conf-facts__list li{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--ods-ink-soft); }
.conf-facts__list svg{ width:20px; height:20px; color:var(--ods-accent-dark); flex:none; }
.conf-facts__list strong{ font-size:1.5rem; font-weight:800; color:var(--ods-primary); line-height:1;
  font-variant-numeric:tabular-nums; }

/* Admin-entered prose: escaped, with the author's line breaks kept. */
.conf-text{ white-space:pre-line; line-height:1.7; max-width:72ch; }
.conf-text--lead{ font-size:1.05rem; }
.conf-panel h3{ margin:0 0 10px; font-size:1rem; }
.conf-panel:hover{ transform:none; box-shadow:var(--shadow-sm); border-color:var(--ods-border); }

/* The programme. Every day open at once: somebody booking flights reads the
   whole thing, and tabs hide exactly the day being checked.                  */
.prog-day + .prog-day{ margin-top:30px; }
.prog-day__head{ display:flex; align-items:baseline; gap:10px; margin:0 0 14px;
  padding-bottom:10px; border-bottom:2px solid var(--ods-primary-tint); font-size:1.05rem; }
.prog-day__head em{ font-style:normal; font-size:.85rem; font-weight:500; color:var(--ods-ink-soft); }
.prog-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.prog-slot{ display:flex; gap:18px; padding:14px 16px; background:#fff;
  border:1px solid var(--ods-border); border-radius:12px; }
.prog-slot__time{ flex:none; width:64px; display:flex; flex-direction:column; gap:2px;
  font-variant-numeric:tabular-nums; }
.prog-slot__time b{ font-size:.95rem; font-weight:700; color:var(--ods-primary); }
.prog-slot__time span{ font-size:.78rem; color:var(--ods-ink-soft); }
.prog-slot__body{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.prog-slot__body strong{ font-size:.98rem; font-weight:650; color:var(--ods-ink); line-height:1.4; }
.prog-slot__who{ font-size:.85rem; color:var(--ods-accent-dark); font-weight:600; }
.prog-slot__abstract{ font-size:.85rem; color:var(--ods-ink-soft); line-height:1.6; white-space:pre-line;
  max-width:72ch; }
.prog-slot__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.prog-slot__meta em{ font-style:normal; font-size:.72rem; font-weight:600; letter-spacing:.03em;
  padding:2px 9px; border-radius:var(--radius-pill);
  background:var(--ods-surface); color:var(--ods-ink-soft); }
.prog-slot__track{ background:var(--ods-accent-tint) !important; color:var(--ods-accent-dark) !important; }
/* A break is scaffolding rather than content — legible, but not competing. */
.prog-slot--break, .prog-slot--social{ background:var(--ods-surface); border-style:dashed; }
.prog-slot--break .prog-slot__body strong{ font-weight:500; color:var(--ods-ink-soft); }
@media (max-width:560px){
  .prog-slot{ flex-direction:column; gap:8px; }
  .prog-slot__time{ flex-direction:row; align-items:baseline; gap:8px; width:auto; }
}

/* Speakers. */
.spk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.spk{ background:#fff; border:1px solid var(--ods-border); border-radius:14px; padding:20px; text-align:center; }
.spk__photo{ width:88px; height:88px; border-radius:50%; object-fit:cover; margin:0 auto 12px; display:block;
  background:var(--ods-primary-tint); }
.spk__photo--initials{ display:grid; place-items:center; font-size:1.6rem; font-weight:800;
  color:var(--ods-primary); letter-spacing:.02em; }
.spk h3{ margin:0 0 3px; font-size:.98rem; }
.spk__affil{ margin:0; font-size:.82rem; color:var(--ods-ink-soft); line-height:1.45; }
.spk__country{ margin:4px 0 0; font-size:.76rem; color:var(--ods-ink-soft); }
.spk__bio{ margin:10px 0 0; font-size:.82rem; color:var(--ods-ink-soft); line-height:1.6; text-align:start;
  white-space:pre-line; }
.spk__sessions{ list-style:none; margin:12px 0 0; padding:12px 0 0; border-top:1px solid var(--ods-border);
  display:grid; gap:5px; text-align:start; }
.spk__sessions li{ font-size:.78rem; color:var(--ods-ink-soft); line-height:1.45; }

/* Announced workshops as a grid rather than a numbered column — sixteen of
   them in one column is a wall nobody reads to the end of.                   */
.wshop-grid{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; counter-reset:wshop; }
.wshop{ position:relative; background:#fff; border:1px solid var(--ods-border); border-radius:12px;
  padding-block:16px; padding-inline:52px 18px; font-size:.9rem; line-height:1.5; color:var(--ods-ink); }
.wshop::before{ counter-increment:wshop; content:counter(wshop);
  position:absolute; inset-inline-start:16px; top:15px; width:24px; height:24px; border-radius:8px;
  display:grid; place-items:center; font-size:.75rem; font-weight:700;
  background:var(--ods-accent-tint); color:var(--ods-accent-dark); }

/* Contact band. */
.conf-contact{ text-align:center; max-width:60ch; margin-inline:auto; }
.conf-contact h2{ margin-bottom:8px; }
.conf-contact p{ color:var(--ods-ink-soft); margin-bottom:20px; }

/* Mobile register bar: follows you down a long page. Never rendered when the
   form is shut, so it cannot offer something that cannot be done.            */
.conf-stickybar{ display:none; }
@media (max-width:760px){
  .conf-stickybar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:sticky; bottom:0; z-index:45; padding:12px 16px; background:#fff;
    border-top:1px solid var(--ods-border); box-shadow:0 -4px 16px rgba(15,76,129,.09); }
  .conf-stickybar span{ font-size:.85rem; color:var(--ods-ink-soft); }
}

/* =====================================================================
   The published fee table. Laid out like the association's own printed
   rate card — a column per period, the one in force today marked — so a
   delegate can see what registering in August saves them.
   ===================================================================== */
.ratecard{ margin-inline:auto; }
/* Four columns will not fit a phone. The table scrolls inside its own box
   rather than making the whole page scroll sideways.                        */
.ratecard__scroll{ overflow-x:auto; border:1px solid var(--ods-border); border-radius:14px;
  background:#fff; -webkit-overflow-scrolling:touch; }
.ratecard__table{ width:100%; min-width:640px; border-collapse:collapse; }

.ratecard__table thead th{ padding:14px 16px; text-align:center; vertical-align:bottom;
  font-size:.8rem; font-weight:700; line-height:1.35; color:#fff;
  background:var(--ods-primary); border-inline-start:1px solid rgba(255,255,255,.16); }
.ratecard__table thead th:first-child{ text-align:start; border-inline-start:0; min-width:260px;
  background:var(--ods-primary-dark); font-size:.95rem; }
.ratecard__table thead th.is-current{ background:var(--ods-accent-dark); }
.ratecard__now{ display:block; margin-top:5px; font-size:.65rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; opacity:.9; }

/* A category heading spanning the table — the printed card groups the same way. */
.ratecard__cat th{ padding:11px 16px; text-align:start; font-size:.86rem; font-weight:700;
  color:var(--ods-ink); background:var(--ods-primary-tint);
  border-top:1px solid var(--ods-border); }
.ratecard__cat small{ display:block; margin-top:2px; font-size:.76rem; font-weight:500;
  color:var(--ods-ink-soft); line-height:1.45; }

.ratecard__table tbody th[scope="row"]{ padding:13px 16px; text-align:start; font-weight:500;
  font-size:.88rem; color:var(--ods-ink); line-height:1.45; border-top:1px solid var(--ods-border); }
.ratecard__table tbody th small{ display:block; margin-top:3px; font-size:.77rem; color:var(--ods-ink-soft);
  line-height:1.45; font-weight:400; }
.ratecard__table tbody td{ padding:13px 16px; text-align:center; white-space:nowrap;
  border-top:1px solid var(--ods-border); border-inline-start:1px solid var(--ods-border); }
.ratecard__table tbody td b{ font-size:1.08rem; font-weight:800; color:var(--ods-primary);
  font-variant-numeric:tabular-nums; }
.ratecard__table tbody td span{ font-size:.7rem; color:var(--ods-ink-soft); letter-spacing:.04em; }
/* The column in force today is the one being read — tinted down the whole height. */
.ratecard__table tbody td.is-current{ background:var(--ods-accent-tint); }
.ratecard__table tbody td.is-current b{ color:var(--ods-accent-dark); }
.ratecard__none{ color:var(--ods-ink-soft); }
.ratecard__table tbody tr.is-full th[scope="row"], .ratecard__table tbody tr.is-full td{ opacity:.55; }

.ratecard__tag{ display:inline-block; margin-inline-start:6px; padding:1px 8px; border-radius:var(--radius-pill);
  font-style:normal; font-size:.68rem; font-weight:700; letter-spacing:.03em;
  background:var(--ods-accent-tint); color:var(--ods-accent-dark); vertical-align:middle; }
.ratecard__tag--full{ background:var(--ods-surface); color:var(--ods-ink-soft); }

.ratecard__foot{ margin:12px 2px 0; font-size:.8rem; color:var(--ods-ink-soft); line-height:1.55; }
.ratecard__foot strong{ color:var(--ods-accent-dark); font-weight:650; }

/* On the registration page the table sits below the form, full width — four
   columns squeezed into the 340px side column would need scrolling to read
   a single price.                                                            */
.reg-fees{ margin-top:34px; }
.reg-fees .section__head{ margin-bottom:16px; }

/* =====================================================================
   The registration form. Two columns with a summary that stays put, so
   the choices and the button that acts on them are visible together —
   it used to be one tall stack with the only button at the bottom.
   ===================================================================== */
/* .mform caps a form at 640px, which is right for a column of questions and
   wrong for two columns of them — the grid inherited the cap and squeezed
   both sides into half a screen.                                            */
.reg-form{ max-width:1080px; margin-inline:auto; }
.reg-form__grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
.reg-form__main{ min-width:0; }
.reg-form__side{ position:sticky; top:88px; }
@media (max-width:900px){
  .reg-form__grid{ grid-template-columns:1fr; }
  /* On a phone the summary belongs after the questions, not before them. */
  .reg-form__side{ position:static; order:2; }
}

/* The title and dialling code are short answers and should not each take a
   third of a row next to a name. Selector matches `.mform .row > *`, which
   sets every field to `flex:1 1 200px` and would otherwise win.            */
.mform .row > .reg-form__title{ flex:0 1 120px; }
.mform .row > .reg-form__dial{ flex:0 1 170px; }

.reg-summary{ background:#fff; border:1px solid var(--ods-border); border-radius:14px; padding:20px;
  box-shadow:var(--shadow-sm); }
.reg-summary h3{ margin:0 0 14px; font-size:1rem; }
.reg-summary__list{ margin:0; display:grid; gap:10px; }
.reg-summary__list > div{ display:grid; gap:2px; }
.reg-summary__list dt{ font-size:.75rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ods-ink-soft); }
.reg-summary__list dd{ margin:0; font-size:.9rem; font-weight:600; color:var(--ods-ink); line-height:1.4; }
.reg-summary__total{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--ods-border); }
.reg-summary__total span{ font-size:.85rem; color:var(--ods-ink-soft); }
.reg-summary__total strong{ font-size:1.35rem; font-weight:800; color:var(--ods-primary);
  font-variant-numeric:tabular-nums; }
.reg-summary__note{ margin:12px 0 0; font-size:.75rem; color:var(--ods-ink-soft); line-height:1.5; }

/* The swapped region, while the server is answering. Dimmed rather than
   emptied — replacing it with a spinner makes the page jump exactly the way
   the full reload used to.                                                 */
.is-loading{ opacity:.55; transition:opacity .12s var(--ease); pointer-events:none; }

/* A button waiting on the server. It is not disabled — see app.js: a disabled
   submit button is left out of the payload, and this form reads intent off it. */
.btn .btn__spinner{ display:none; width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; margin-inline-start:9px; }
.btn.is-busy{ pointer-events:none; opacity:.75; }
.btn.is-busy .btn__spinner{ display:inline-block; animation:btn-spin .7s linear infinite; }
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .btn.is-busy .btn__spinner{ animation-duration:2.4s; }
}

/* Vendor credit on the operator landing. Operator host only. */
.landing-hero__vendor{ margin-top:22px; font-size:.82rem; color:var(--ods-ink-soft); }
.landing-hero__vendor a{ color:var(--ods-primary); font-weight:600; }