@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600;1,700;1,800&family=Work+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

  :root{
    /* Modern minimal — neutral paper, indigo accent, soft diffused shadow */
    --paper: #fafafa; --paper-raised: #ffffff; --paper-band: #f4f4f6; --paper-sunk: #f2f2f5;
    --ink: #16171b; --ink-soft: #53565d; --ink-faint: #8b8e96;
    --line: #26282f; --line-soft: #e6e6ea;
    --accent: #4f46e5; --accent-ink: #362f9e; --accent-soft: #eef0ff; --accent-soft-line: #c7ccfb;
    --good: #16a34a; --good-soft: #e7f8ee; --good-line: #a7e3bd;
    --pend: #d97706; --pend-soft: #fef3e2; --pend-line: #f6cd8e;
    --crit: #dc2626; --crit-soft: #fdeaea; --crit-line: #f3aeae;
    --wa: #1fa855;
    --shadow: 0 1px 2px rgba(15,15,20,.04), 0 8px 24px -12px rgba(15,15,20,.12);
    color-scheme: light dark;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#0d0e11; --paper-raised:#17181c; --paper-band:#131418; --paper-sunk:#131418;
      --ink:#f2f2f4; --ink-soft:#b7b9c0; --ink-faint:#84868d;
      --line:#c9cbd1; --line-soft:#2a2b30;
      --accent:#8583f5; --accent-ink:#c7c6fb; --accent-soft:#201f3a; --accent-soft-line:#37356b;
      --good:#4ade80; --good-soft:#123222; --good-line:#1f5c3c;
      --pend:#f5a742; --pend-soft:#332510; --pend-line:#5c481f;
      --crit:#f28b8b; --crit-soft:#331717; --crit-line:#5c2626;
      --wa:#4ade80;
      --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px -14px rgba(0,0,0,.65);
    }
  }
  :root[data-theme="dark"]{
    --paper:#0d0e11; --paper-raised:#17181c; --paper-band:#131418; --paper-sunk:#131418;
    --ink:#f2f2f4; --ink-soft:#b7b9c0; --ink-faint:#84868d;
    --line:#c9cbd1; --line-soft:#2a2b30;
    --accent:#8583f5; --accent-ink:#c7c6fb; --accent-soft:#201f3a; --accent-soft-line:#37356b;
    --good:#4ade80; --good-soft:#123222; --good-line:#1f5c3c;
    --pend:#f5a742; --pend-soft:#332510; --pend-line:#5c481f;
    --crit:#f28b8b; --crit-soft:#331717; --crit-line:#5c2626;
    --wa:#4ade80;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px -14px rgba(0,0,0,.65);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
  img{ max-width:100%; }
  h1,h2,h3,h4{ font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-weight:700; line-height:1.15; margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.02em; }
  h1{ font-style:normal; font-weight:800; }
  p{ margin:0; }
  a{ color:inherit; }
  button,input,select,textarea{ font:inherit; }
  .mono{ font-family:"IBM Plex Mono",ui-monospace,monospace; }
  .wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }
  section{ position:relative; }
  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-thumb{ background:var(--line-soft); border-radius:10px; }

  .eyebrow{ font-family:"IBM Plex Mono",monospace; font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); display:inline-flex; align-items:center; gap:.55em; }
  .eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }

  .btn{ display:inline-flex; align-items:center; gap:8px; justify-content:center; font-weight:600; font-size:.88rem; padding:.75em 1.3em; border-radius:10px; text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
  .btn-primary{ background:var(--ink); color:var(--paper); }
  .btn-primary:hover{ background:var(--line); }
  .btn-ghost{ border-color:var(--line-soft); color:var(--ink); background:transparent; }
  .btn-ghost:hover{ border-color:var(--line); background:var(--paper-raised); }
  .btn-accent{ background:var(--accent); color:#fff; }
  .btn-wa{ background:var(--wa); color:#fff; }
  .btn-sm{ padding:.55em 1em; font-size:.78rem; }

  /* ===== view switcher ===== */
  .viewbar{ position:sticky; top:0; z-index:60; background:var(--ink); display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px; flex-wrap:wrap; }
  .viewbar .vb-label{ font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#8b9ab8; margin-right:10px; }
  .viewbar button, .viewbar a{ border:1px solid transparent; background:none; color:#c4cddf; font-size:.78rem; font-weight:600; padding:.5em 1.1em; border-radius:20px; cursor:pointer; }
  .viewbar button:hover, .viewbar a:hover{ color:#fff; }
  .viewbar button.active{ background:var(--accent); color:#fff; }
  .site-view{ display:none; }
  .site-view.active{ display:block; }

  /* ===== portal header ===== */
  header.site{ position:sticky; top:44px; z-index:40; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft); }
  .nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 28px; max-width:1120px; margin:0 auto; }
  .brand{ display:flex; align-items:center; gap:10px; font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-weight:700; font-size:1.12rem; letter-spacing:-.02em; text-decoration:none; color:var(--ink); }
  .brand svg{ flex:none; }
  .brand .sub{ font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); display:block; font-weight:500; margin-top:1px; }
  nav.links{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
  nav.links a{ font-size:.85rem; font-weight:500; text-decoration:none; color:var(--ink-soft); white-space:nowrap; }
  nav.links a:hover{ color:var(--ink); }

  /* ===== hero ===== */
  .hero{ padding:80px 0 60px; overflow:hidden; }
  .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
  .hero h1{ font-size:clamp(2.6rem,5vw,4.1rem); margin:18px 0 20px; }
  .hero h1 em{ font-style:italic; color:var(--accent-ink); }
  .hero p.lede{ font-size:1.14rem; color:var(--ink-soft); max-width:46ch; margin-bottom:32px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
  .hero-tags{ display:flex; gap:10px 22px; flex-wrap:wrap; }
  .hero-tags span{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-faint); letter-spacing:.04em; }
  .hero-tags b{ color:var(--ink-soft); font-weight:600; }

  .diagram{ width:100%; height:auto; overflow:visible; }
  .diagram .node-circle{ fill:var(--paper-raised); stroke:var(--line); stroke-width:1.6; }
  .diagram .node-dot{ fill:var(--accent); }
  .diagram .conn{ stroke:var(--line-soft); stroke-width:1.6; }
  .diagram .conn-flow{ stroke:var(--accent); stroke-width:1.6; stroke-dasharray:5 6; }
  .diagram text{ font-family:"IBM Plex Mono",monospace; }
  .diagram .lbl{ font-size:11px; fill:var(--ink-soft); }
  .diagram .num{ font-size:12px; fill:var(--ink); font-weight:500; }
  @media (prefers-reduced-motion: no-preference){ .diagram .conn-flow{ animation:dash 6s linear infinite; } }
  @keyframes dash{ to{ stroke-dashoffset:-110; } }

  .band{ padding:72px 0; }
  .band-alt{ background:var(--paper-band); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
  .head{ max-width:64ch; margin-bottom:44px; }
  .head h2{ font-size:clamp(1.7rem,3vw,2.35rem); margin-top:14px; }
  .head p{ color:var(--ink-soft); margin-top:14px; font-size:1.03rem; }

  .about-grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:56px; align-items:start; }
  .about-grid p{ color:var(--ink-soft); font-size:1.02rem; }
  .about-grid p + p{ margin-top:16px; }
  .about-stat-card{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:12px; padding:22px 24px; box-shadow:var(--shadow); }
  .about-stat-card + .about-stat-card{ margin-top:14px; }
  .about-stat-card .k{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
  .about-stat-card .v{ font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:1.25rem; font-weight:600; margin-top:5px; }

  .network-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:52px 0 20px; flex-wrap:wrap; }
  .network-head h3{ font-size:1.15rem; }
  .network-head span{ font-size:.85rem; color:var(--ink-faint); }
  .network-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; perspective:1000px; }
  .flip-card{ appearance:none; border:none; background:none; padding:0; cursor:pointer; height:150px; width:100%; text-align:left; }
  .flip-inner{ position:relative; width:100%; height:100%; transition:transform .55s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; }
  .flip-card.flipped .flip-inner{ transform:rotateY(180deg); }
  .flip-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:12px; border:1px solid var(--line-soft); padding:16px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--shadow); }
  .flip-front{ background:var(--paper-raised); }
  .flip-front .tap{ font-family:"IBM Plex Mono",monospace; font-size:.62rem; color:var(--ink-faint); }
  .flip-front .name{ font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:1.02rem; }
  .flip-back{ background:var(--ink); color:var(--paper); transform:rotateY(180deg); }
  .flip-back p{ font-size:.78rem; color:#c4cddf; line-height:1.45; }
  .flip-back .name{ font-size:.82rem; font-weight:600; color:var(--accent); font-family:"IBM Plex Mono",monospace; letter-spacing:.03em; text-transform:uppercase; }
  @media (prefers-reduced-motion: reduce){ .flip-inner{ transition:none; } }

  .pipeline{ display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line-soft); }
  .pipe-step{ padding:26px 20px 24px; border-right:1px solid var(--line-soft); position:relative; }
  .pipe-step:last-child{ border-right:none; }
  .pipe-step .num{ font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--accent-ink); }
  .pipe-step h3{ font-size:1.05rem; margin:10px 0 8px; }
  .pipe-step p{ font-size:.87rem; color:var(--ink-soft); }
  .pipe-step::after{ content:"→"; position:absolute; right:-11px; top:30px; color:var(--line-soft); font-size:1rem; background:var(--paper-band); width:20px; text-align:center; }
  .pipe-step:last-child::after{ content:""; }

  .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .card{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:12px; padding:26px 24px; box-shadow:var(--shadow); }
  .card .idx{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-faint); }
  .card h3{ font-size:1.1rem; margin:12px 0 10px; }
  .card ul{ margin:0; padding-left:18px; color:var(--ink-soft); font-size:.9rem; }
  .card ul li + li{ margin-top:5px; }

  /* ===== "Eight workstreams" — colour-cycled cards (scoped to #services only) ===== */
  #services .cards .card{
    border-top-width:4px; transition:transform .15s ease, background .15s ease, border-color .15s ease;
  }
  #services .cards .card:hover{ transform:translateY(-3px); }
  #services .cards .card:nth-child(1){ --cc:#3d5a80; }
  #services .cards .card:nth-child(2){ --cc:#2f7a72; }
  #services .cards .card:nth-child(3){ --cc:#5158a6; }
  #services .cards .card:nth-child(4){ --cc:#c2701e; }
  #services .cards .card:nth-child(5){ --cc:#a8752a; }
  #services .cards .card:nth-child(6){ --cc:#3c7a5c; }
  #services .cards .card:nth-child(7){ --cc:#5c4a8a; }
  #services .cards .card:nth-child(8){ --cc:#c4483f; }
  #services .cards .card{
    border-color: color-mix(in srgb, var(--cc, var(--accent)) 40%, var(--line-soft));
    border-top-color: var(--cc, var(--accent));
    background: color-mix(in srgb, var(--cc, var(--accent)) 9%, var(--paper-raised));
  }
  #services .cards .card:hover{
    background: color-mix(in srgb, var(--cc, var(--accent)) 18%, var(--paper-raised));
    border-color: var(--cc, var(--accent));
  }
  #services .cards .card h3{ color: var(--cc, var(--accent)); }
  #services .cards .card .idx{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%; margin-bottom:2px;
    background: var(--cc, var(--accent)); color:#fff; font-weight:700; font-size:.72rem;
  }

  /* ===== "Event Types We Manage" — colour-cycled cards (scoped to #event-types only) ===== */
  #event-types .cards .card{
    border-top-width:4px; transition:transform .15s ease, background .15s ease, border-color .15s ease;
  }
  #event-types .cards .card:hover{ transform:translateY(-3px); }
  #event-types .cards .card:nth-child(1){ --cc:#1f7a6b; }
  #event-types .cards .card:nth-child(2){ --cc:#3d708a; }
  #event-types .cards .card:nth-child(3){ --cc:#96524f; }
  #event-types .cards .card:nth-child(4){ --cc:#7a4a7d; }
  #event-types .cards .card:nth-child(5){ --cc:#b3591c; }
  #event-types .cards .card:nth-child(6){ --cc:#2b6f8a; }
  #event-types .cards .card{
    border-color: color-mix(in srgb, var(--cc, var(--accent)) 40%, var(--line-soft));
    border-top-color: var(--cc, var(--accent));
    background: color-mix(in srgb, var(--cc, var(--accent)) 9%, var(--paper-raised));
  }
  #event-types .cards .card:hover{
    background: color-mix(in srgb, var(--cc, var(--accent)) 18%, var(--paper-raised));
    border-color: var(--cc, var(--accent));
  }
  #event-types .cards .card h3{ color: var(--cc, var(--accent)); }
  #event-types .cards .card .idx{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%; margin-bottom:2px;
    background: var(--cc, var(--accent)); color:#fff; font-weight:700; font-size:.72rem;
  }

  .naac-wrap{ overflow-x:auto; border:1px solid var(--line-soft); border-radius:12px; background:var(--paper-raised); box-shadow:var(--shadow); }
  table.naac{ width:100%; border-collapse:collapse; min-width:640px; }
  table.naac th{ text-align:left; font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; padding:14px 20px; border-bottom:1px solid var(--line-soft); }
  table.naac td{ padding:16px 20px; border-bottom:1px solid var(--line-soft); font-size:.92rem; color:var(--ink-soft); vertical-align:top; }
  table.naac tr:last-child td{ border-bottom:none; }
  table.naac td.code{ font-family:"IBM Plex Mono",monospace; color:var(--accent-ink); font-weight:500; white-space:nowrap; }
  table.naac td.name{ color:var(--ink); font-weight:600; }

  /* protocol checklist */
  .protocol-progress{ display:flex; align-items:center; gap:16px; margin-bottom:36px; }
  .protocol-progress .bar{ flex:1; height:8px; border-radius:12px; background:var(--paper-raised); overflow:hidden; border:1px solid var(--line-soft); }
  .protocol-progress .fill{ height:100%; background:var(--accent); width:0%; transition:width .4s ease; }
  @media (prefers-reduced-motion: reduce){ .protocol-progress .fill{ transition:none; } }
  .protocol-progress .pct{ font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--ink-soft); white-space:nowrap; }
  .protocol-progress button{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-faint); background:none; border:1px solid var(--line-soft); border-radius:8px; padding:.4em .8em; cursor:pointer; white-space:nowrap; }
  .protocol-progress button:hover{ color:var(--ink); border-color:var(--line); }
  .protocol-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .protocol-phase{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:12px; padding:24px; box-shadow:var(--shadow); }
  .protocol-phase-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; gap:10px; }
  .protocol-phase h3{ font-size:1.02rem; }
  .protocol-phase .count{ font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--accent-ink); white-space:nowrap; }
  .protocol-checklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .protocol-item{ display:flex; align-items:flex-start; gap:10px; }
  .protocol-item input{ margin-top:3px; accent-color:var(--accent); width:15px; height:15px; flex:none; cursor:pointer; }
  .protocol-item label{ font-size:.85rem; color:var(--ink-soft); cursor:pointer; line-height:1.4; }
  .protocol-item.done label{ text-decoration:line-through; color:var(--ink-faint); }
  .protocol-note{ font-size:.78rem; color:var(--ink-faint); margin-top:24px; max-width:70ch; line-height:1.5; }

  /* showcase */
  .stat-band{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; margin-bottom:36px; background:var(--paper-raised); box-shadow:var(--shadow); }
  .stat-item{ padding:22px 24px; border-right:1px solid var(--line-soft); }
  .stat-item:last-child{ border-right:none; }
  .stat-item .num{ font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:2rem; font-weight:600; color:var(--accent-ink); }
  .stat-item .lbl{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px; }
  .showcase-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:44px; align-items:start; }
  .browser-mock{ border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); background:var(--paper-raised); }
  .browser-mock .bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--paper-band); border-bottom:1px solid var(--line-soft); }
  .browser-mock .bar .dot{ width:8px; height:8px; border-radius:50%; background:var(--line-soft); }
  .browser-mock .bar .url{ margin-left:8px; font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--ink-faint); }
  .browser-mock .screen{ padding:34px 28px; background:linear-gradient(160deg,var(--paper-band),var(--paper-raised)); text-align:center; }
  .browser-mock .tag{ display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-soft-line); padding:4px 9px; border-radius:6px; margin-bottom:14px; }
  .browser-mock h4{ font-size:1.35rem; margin:0 0 8px; }
  .browser-mock .sub{ font-size:.85rem; color:var(--ink-soft); margin-bottom:20px; }
  .browser-mock .fake-btn{ display:inline-block; background:var(--ink); color:var(--paper); font-size:.78rem; font-weight:600; padding:.6em 1.3em; border-radius:8px; }
  .browser-mock .foot{ display:flex; justify-content:space-between; padding:12px 18px; font-family:"IBM Plex Mono",monospace; font-size:.64rem; color:var(--ink-faint); border-top:1px solid var(--line-soft); }
  .deliver-list{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:11px; }
  .deliver-list li{ display:flex; gap:11px; align-items:flex-start; font-size:.93rem; color:var(--ink-soft); }
  .deliver-list li::before{ content:"✓"; flex:none; width:19px; height:19px; border-radius:50%; background:var(--good-soft); color:var(--good); font-size:.68rem; display:flex; align-items:center; justify-content:center; margin-top:1px; font-weight:700; }
  .speaker-row{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:22px; }
  .speaker-chip{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-soft); background:var(--paper-band); border:1px solid var(--line-soft); padding:6px 11px; border-radius:20px; }
  .speaker-chip b{ color:var(--ink); font-weight:600; }
  .showcase-links{ display:flex; gap:16px; flex-wrap:wrap; margin-top:6px; }
  .showcase-links a, .showcase-links button{ font-family:"IBM Plex Mono",monospace; font-size:.78rem; text-decoration:none; color:var(--ink-soft); border:none; background:none; border-bottom:1px dashed var(--line-soft); padding:0 0 1px; cursor:pointer; }
  .showcase-links a:hover, .showcase-links button:hover{ color:var(--accent-ink); border-color:var(--accent); }

  /* budget planner */
  .budget-tool{ display:grid; grid-template-columns:.95fr 1.05fr; border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; background:var(--paper-raised); box-shadow:var(--shadow); }
  .budget-form{ padding:34px 32px; border-right:1px solid var(--line-soft); display:flex; flex-direction:column; gap:20px; min-width:0; }
  .field label{ display:flex; justify-content:space-between; font-size:.8rem; font-weight:600; margin-bottom:8px; color:var(--ink); }
  .field label .val{ font-family:"IBM Plex Mono",monospace; color:var(--accent-ink); font-weight:500; }
  .field select, .field input[type="number"], .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"]{ width:100%; padding:.65em .8em; border:1px solid var(--line-soft); border-radius:8px; background:var(--paper); color:var(--ink); font-size:.9rem; }
  .field input[type="range"]{ width:100%; accent-color:var(--accent); }
  .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .toggle-list{ display:flex; flex-direction:column; gap:10px; }
  .toggle-row{ display:flex; align-items:center; gap:10px; font-size:.87rem; color:var(--ink-soft); cursor:pointer; padding:6px 8px; margin:0 -8px; border-radius:8px; transition:background .15s ease, color .15s ease; }
  .toggle-row input{ accent-color:var(--accent); width:16px; height:16px; flex:none; }
  .toggle-row .num-inline{ width:52px; padding:.3em .5em; border:1px solid var(--line-soft); border-radius:8px; background:var(--paper); color:var(--ink); font-size:.82rem; margin-left:auto; }
  .budget-result{ padding:34px 32px; display:flex; flex-direction:column; }
  .budget-result .eyebrow{ margin-bottom:14px; }
  .budget-table{ display:flex; flex-direction:column; border-top:1px solid var(--line-soft); margin-top:6px; }
  .budget-row{ display:flex; justify-content:space-between; gap:12px; padding:10px 8px; margin:0 -8px; border-bottom:1px solid var(--line-soft); font-size:.87rem; color:var(--ink-soft); border-radius:6px; transition:background .15s ease; }
  .budget-row .amt{ font-family:"IBM Plex Mono",monospace; color:var(--ink); white-space:nowrap; }
  .budget-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:18px; margin-top:6px; }
  .budget-total .lbl{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }
  .budget-total .amt{ font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:2rem; font-weight:600; color:var(--accent-ink); }
  .budget-note{ font-size:.78rem; color:var(--ink-faint); margin-top:14px; line-height:1.5; }
  .budget-actions{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }

  /* live event control center */
  .live-cc{ margin-top:34px; text-align:left; background:linear-gradient(165deg,#16233b,#241a4d 60%,#33205e); color:#fff; border-radius:16px; padding:24px 26px; box-shadow:var(--shadow); }
  .live-cc-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#b9c2ea; border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:12px; margin-bottom:16px; }
  .live-cc-top .live{ color:#4ade80; font-weight:700; }
  .live-cc-top .live::before{ content:"●"; margin-right:5px; animation:ccpulse 1.4s infinite; }
  @keyframes ccpulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }
  .live-cc-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
  .live-cc-grid .stat-item{ border-right:1px solid rgba(255,255,255,.14); padding:6px 18px; }
  .live-cc-grid .stat-item:last-child{ border-right:none; }
  .live-cc-grid .stat-item .num{ color:#f3d9a4; font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:1.7rem; font-weight:600; }
  .live-cc-grid .stat-item .lbl{ color:#9aa3d4; font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; margin-top:4px; }
  .live-cc-note{ font-size:.76rem; color:#9aa3d4; margin-top:14px; }

  /* tech / process strip */
  .techstrip{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:30px; }
  .tech-chip{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:14px; padding:18px 12px; text-align:center; box-shadow:var(--shadow); }
  .tech-chip .ic{ width:34px; height:34px; margin:0 auto 10px; border-radius:16px; background:var(--accent-soft); border:1px solid var(--accent-soft-line); display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
  .tech-chip .lbl{ font-size:.78rem; font-weight:600; color:var(--ink-soft); }

  /* final CTA band */
  .final-cta{ background:linear-gradient(135deg,var(--ink),#241a4d); color:#fff; text-align:center; padding:70px 0; }
  .final-cta .eyebrow{ color:#c4cddf; }
  .final-cta .eyebrow::before{ background:#e0ac52; }
  .final-cta h2{ color:#fff; margin:14px 0 12px; }
  .final-cta p{ color:rgba(255,255,255,.75); max-width:52ch; margin:0 auto; }
  .final-cta .btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
  .final-cta .btn-ghost{ border-color:rgba(255,255,255,.3); color:#fff; }
  .final-cta .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

  /* footer columns */
  .foot-cols{ display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:22px; padding-top:32px; border-top:1px solid var(--line-soft); margin-top:28px; }
  .foot-cols h4{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px; }
  .foot-cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
  .foot-cols a, .foot-cols button{ background:none; border:none; padding:0; font:inherit; text-align:left; color:var(--ink-faint); text-decoration:none; font-size:.82rem; cursor:pointer; }
  .foot-cols a:hover, .foot-cols button:hover{ color:var(--ink); }
  .foot-cols p{ font-size:.84rem; color:var(--ink-faint); margin-bottom:2px; max-width:34ch; }
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; border-top:1px solid var(--line-soft); padding-top:22px; margin-top:8px; }
  .foot-bottom p{ font-size:.78rem; color:var(--ink-faint); margin:0; }
  @media (max-width:880px){
    .techstrip{ grid-template-columns:repeat(3,1fr); }
    .live-cc-grid{ grid-template-columns:1fr 1fr; }
    .live-cc-grid .stat-item{ border-right:none; border-bottom:1px solid rgba(255,255,255,.14); padding:10px 0; }
    .foot-cols{ grid-template-columns:repeat(3,1fr); }
  }
  @media (max-width:560px){ .techstrip{ grid-template-columns:1fr 1fr; } .foot-cols{ grid-template-columns:1fr; } }

  /* ===== event execution playbook ===== */
  .exec-pane{ display:none; }
  .exec-pane.active{ display:block; }
  .exec-sub{ margin-top:38px; }
  .exec-sub h4{
    font-size:1rem; margin-bottom:4px; display:inline-flex; align-items:center; gap:.55em;
    color: var(--sec, var(--accent));
  }
  .exec-sub h4::before{
    content:""; width:9px; height:9px; border-radius:50%; flex:none;
    background: var(--sec, var(--accent));
  }
  .exec-sub .sub-note{ font-size:.84rem; color:var(--ink-faint); margin-bottom:16px; }
  .step-list{ display:flex; flex-direction:column; gap:10px; max-width:840px; }
  .step-list summary{ font-size:.92rem; }
  .step-list .faq-a{ line-height:1.65; }

  /* ===== colour-cycled procedure accordion (13-step / event-day / etc, scoped to #execution) ===== */
  #execution .step-list .faq-item{ border-left-width:4px; transition:background .15s ease, border-color .15s ease, transform .15s ease; }
  #execution .step-list .faq-item:nth-child(15n+1){ --cc:#3d5a80; }
  #execution .step-list .faq-item:nth-child(15n+2){ --cc:#2f7a72; }
  #execution .step-list .faq-item:nth-child(15n+3){ --cc:#5158a6; }
  #execution .step-list .faq-item:nth-child(15n+4){ --cc:#c2701e; }
  #execution .step-list .faq-item:nth-child(15n+5){ --cc:#a8752a; }
  #execution .step-list .faq-item:nth-child(15n+6){ --cc:#3c7a5c; }
  #execution .step-list .faq-item:nth-child(15n+7){ --cc:#5c4a8a; }
  #execution .step-list .faq-item:nth-child(15n+8){ --cc:#c4483f; }
  #execution .step-list .faq-item:nth-child(15n+9){ --cc:#1f7a6b; }
  #execution .step-list .faq-item:nth-child(15n+10){ --cc:#3d708a; }
  #execution .step-list .faq-item:nth-child(15n+11){ --cc:#96524f; }
  #execution .step-list .faq-item:nth-child(15n+12){ --cc:#7a4a7d; }
  #execution .step-list .faq-item:nth-child(15n+13){ --cc:#b3591c; }
  #execution .step-list .faq-item{
    border-left-color: color-mix(in srgb, var(--cc, var(--accent)) 55%, var(--line-soft));
    background: color-mix(in srgb, var(--cc, var(--accent)) 5%, var(--paper-raised));
  }
  #execution .step-list .faq-item summary{ color: var(--cc, var(--ink)); }
  #execution .step-list .faq-item[open]{ background: color-mix(in srgb, var(--cc, var(--accent)) 10%, var(--paper-raised)); }
  #execution .step-list .faq-item[open] summary{ border-bottom-color: color-mix(in srgb, var(--cc, var(--accent)) 30%, var(--line-soft)); }
  #execution .step-list .faq-item[open] summary .chev{ border-color: var(--cc, var(--accent)); }

  /* ===== colour-cycled Do / Don't cards (scoped to #execution) ===== */
  #execution .dnd-col{ border-top-width:4px; transition:transform .15s ease, background .15s ease, border-color .15s ease; }
  #execution .dnd-col:hover{ transform:translateY(-3px); }
  #execution .dnd-col.do{
    border-color: color-mix(in srgb, var(--good) 40%, var(--line-soft));
    border-top-color: var(--good);
    background: color-mix(in srgb, var(--good) 8%, var(--paper-raised));
  }
  #execution .dnd-col.do:hover{ background: color-mix(in srgb, var(--good) 15%, var(--paper-raised)); border-color:var(--good); }
  #execution .dnd-col.dont{
    border-color: color-mix(in srgb, var(--crit) 40%, var(--line-soft));
    border-top-color: var(--crit);
    background: color-mix(in srgb, var(--crit) 8%, var(--paper-raised));
  }
  #execution .dnd-col.dont:hover{ background: color-mix(in srgb, var(--crit) 15%, var(--paper-raised)); border-color:var(--crit); }
  #execution .dnd-col li .mk{
    display:inline-flex; align-items:center; justify-content:center;
    width:19px; height:19px; border-radius:50%; font-size:.68rem; font-weight:800; color:#fff; margin-top:1px;
  }
  #execution .dnd-col.do li .mk{ background: var(--good); }
  #execution .dnd-col.dont li .mk{ background: var(--crit); }

  .dnd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; margin-top:22px; }
  .dnd-col{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow); }
  .dnd-col h4{ font-size:.9rem; margin:0 0 12px; display:flex; align-items:center; gap:8px; }
  .dnd-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .dnd-col li{ display:flex; gap:9px; align-items:flex-start; font-size:.85rem; color:var(--ink-soft); line-height:1.5; }
  .dnd-col li .mk{ flex:none; font-weight:800; width:16px; font-size:.9rem; }
  .dnd-col.do h4, .dnd-col.do .mk{ color:var(--good); }
  .dnd-col.dont h4, .dnd-col.dont .mk{ color:var(--crit); }

  .approval-chips{ display:flex; flex-wrap:wrap; gap:9px; }
  /* colour-cycle the approval / report / evidence chip rows through the site's
     15-hue section palette (the same one the scroll-progress bar uses) */
  .approval-chips .chip{ font-weight:500; border-width:1.5px; transition:transform .15s ease; }
  .approval-chips .chip:hover{ transform:translateY(-1px); }
  .approval-chips .chip:nth-child(15n+1){ --cc:#3d5a80; }
  .approval-chips .chip:nth-child(15n+2){ --cc:#2f7a72; }
  .approval-chips .chip:nth-child(15n+3){ --cc:#5158a6; }
  .approval-chips .chip:nth-child(15n+4){ --cc:#a8752a; }
  .approval-chips .chip:nth-child(15n+5){ --cc:#3c7a5c; }
  .approval-chips .chip:nth-child(15n+6){ --cc:#96524f; }
  .approval-chips .chip:nth-child(15n+7){ --cc:#7a4a7d; }
  .approval-chips .chip:nth-child(15n+8){ --cc:#b3591c; }
  .approval-chips .chip:nth-child(15n+9){ --cc:#2b6f8a; }
  .approval-chips .chip:nth-child(15n+10){ --cc:#5f7a34; }
  .approval-chips .chip:nth-child(15n+11){ --cc:#963d55; }
  .approval-chips .chip:nth-child(15n+12){ --cc:#2e5fb3; }
  .approval-chips .chip:nth-child(15n+13){ --cc:#6b4fa8; }
  .approval-chips .chip:nth-child(15n+14){ --cc:#8a6d3b; }
  .approval-chips .chip:nth-child(15n+15){ --cc:#55607a; }
  .approval-chips .chip{
    background: color-mix(in srgb, var(--cc, var(--accent)) 15%, var(--paper-raised));
    border-color: color-mix(in srgb, var(--cc, var(--accent)) 46%, transparent);
    color: color-mix(in srgb, var(--cc, var(--accent-ink)) 82%, var(--ink));
  }

  .kit-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .kit-cols h4{ font-size:.88rem; margin:0 0 10px; color:var(--accent-ink); font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.04em; }
  .kit-cols ul{ margin:0; padding-left:0; list-style:none; color:var(--ink-soft); font-size:.86rem; display:flex; flex-direction:column; gap:7px; }
  @media (max-width:1080px){ .kit-cols{ grid-template-columns:1fr 1fr; } }

  /* ===== colour-cycled kit & stationery checklist columns (scoped to #execution) ===== */
  #execution .kit-cols > div{
    border-top:3px solid var(--cc, var(--accent));
    border-left:1px solid color-mix(in srgb, var(--cc, var(--accent)) 30%, var(--line-soft));
    border-right:1px solid color-mix(in srgb, var(--cc, var(--accent)) 30%, var(--line-soft));
    border-bottom:1px solid color-mix(in srgb, var(--cc, var(--accent)) 30%, var(--line-soft));
    border-radius:14px; padding:18px 20px 20px;
    background: color-mix(in srgb, var(--cc, var(--accent)) 6%, var(--paper-raised));
  }
  #execution .kit-cols > div:nth-child(1){ --cc:#3d5a80; }
  #execution .kit-cols > div:nth-child(2){ --cc:#3c7a5c; }
  #execution .kit-cols > div:nth-child(3){ --cc:#c2701e; }
  #execution .kit-cols h4{ color: var(--cc, var(--accent-ink)); }
  #execution .kit-cols li{ padding-left:16px; position:relative; }
  #execution .kit-cols li::before{
    content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%;
    background: var(--cc, var(--accent));
  }
  /* ===== colour-cycled kit & stationery checklist columns (scoped to #stationery) ===== */
  #stationery .kit-cols > div{
    border-top:3px solid var(--cc, var(--accent));
    border-left:1px solid color-mix(in srgb, var(--cc, var(--accent)) 30%, var(--line-soft));
    border-right:1px solid color-mix(in srgb, var(--cc, var(--accent)) 30%, var(--line-soft));
    border-bottom:1px solid color-mix(in srgb, var(--cc, var(--accent)) 30%, var(--line-soft));
    border-radius:14px; padding:18px 20px 20px;
    background: color-mix(in srgb, var(--cc, var(--accent)) 6%, var(--paper-raised));
  }
  #stationery .kit-cols > div:nth-child(1){ --cc:#8a6a2e; }
  #stationery .kit-cols > div:nth-child(2){ --cc:#3c7a5c; }
  #stationery .kit-cols > div:nth-child(3){ --cc:#5158a6; }
  #stationery .kit-cols h4{ color: var(--cc, var(--accent-ink)); }
  #stationery .kit-cols li{ padding-left:16px; position:relative; }
  #stationery .kit-cols li::before{
    content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%;
    background: var(--cc, var(--accent));
  }

  .duty-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; perspective:1000px; }
  .duty-grid .flip-card{ height:196px; }
  .duty-grid .flip-back p{ font-size:.74rem; line-height:1.45; }
  .duty-grid .flip-back .name{ font-size:.72rem; }

  .rp-timeline{ display:flex; flex-direction:column; border-top:1px solid var(--line-soft); max-width:760px; }
  .rp-row{ display:flex; gap:16px; padding:12px 4px 12px 12px; border-bottom:1px solid var(--line-soft); border-left:3px solid transparent; align-items:baseline; transition:background .15s ease; }
  .rp-row .d{ font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--accent-ink); width:140px; flex:none; font-weight:600; }
  .rp-row .t{ font-size:.88rem; color:var(--ink-soft); }
  .rp-row.bk{ background:var(--pend-soft); border-radius:12px; }

  /* ===== colour-cycled resource-person timeline rows (scoped to #execution; .bk keeps its "backup" semantic colour) ===== */
  #execution .rp-row:nth-child(1){ --cc:#3d5a80; }
  #execution .rp-row:nth-child(2){ --cc:#2f7a72; }
  #execution .rp-row:nth-child(3){ --cc:#5158a6; }
  #execution .rp-row:nth-child(4){ --cc:#c2701e; }
  #execution .rp-row:nth-child(5){ --cc:#3c7a5c; }
  #execution .rp-row:nth-child(6){ --cc:#5c4a8a; }
  #execution .rp-row:nth-child(7){ --cc:#c4483f; }
  #execution .rp-row:nth-child(8){ --cc:#1f7a6b; }
  #execution .rp-row{ border-left-color: color-mix(in srgb, var(--cc, var(--accent)) 50%, transparent); }
  #execution .rp-row .d{ color: var(--cc, var(--accent-ink)); }
  #execution .rp-row:hover{ background: color-mix(in srgb, var(--cc, var(--accent)) 7%, transparent); }
  #execution .rp-timeline .rp-row.bk{ border-left-color: var(--pend); }
  #execution .rp-timeline .rp-row.bk .d, #execution .rp-timeline .rp-row.bk .t{ color: var(--pend); font-weight:600; }
  .rp-row.bk .d, .rp-row.bk .t{ color:var(--pend); font-weight:600; }
  .rp-note{ background:var(--pend-soft); border:1px solid var(--pend-line); color:var(--pend); font-size:.82rem; border-radius:10px; padding:12px 16px; margin-top:14px; max-width:760px; }

  .rs-total{ font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--ink-faint); margin-top:10px; }
  .rs-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }

  .runsheet-table table.naac{ min-width:720px; }
  .runsheet-table td.code{ white-space:nowrap; }
  .runsheet-table tr.rp-hl{ background: var(--accent-soft); }
  .runsheet-table tr.rp-hl td{ font-weight:600; color:var(--ink); }
  .runsheet-table tr.rp-hl td.code{ color:var(--accent-ink); }

  .phase-proc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:20px; }
  .phase-proc-card{
    background:var(--paper-raised); border:1px solid var(--line-soft); border-top-width:3px; border-radius:14px;
    padding:22px 24px; box-shadow:var(--shadow); transition:transform .15s ease, background .15s ease;
  }
  .phase-proc-card:hover{ transform:translateY(-3px); }
  /* colour-cycle each meal card through the site's 15-hue section palette */
  .phase-proc-card:nth-child(4n+1){ --cc:#3d5a80; }
  .phase-proc-card:nth-child(4n+2){ --cc:#2f7a72; }
  .phase-proc-card:nth-child(4n+3){ --cc:#a8752a; }
  .phase-proc-card:nth-child(4n+4){ --cc:#7a4a7d; }
  .phase-proc-card{
    border-color: color-mix(in srgb, var(--cc, var(--accent)) 40%, var(--line-soft));
    border-top-width:4px; border-top-color: var(--cc, var(--accent));
    background: color-mix(in srgb, var(--cc, var(--accent)) 11%, var(--paper-raised));
  }
  .phase-proc-card:hover{
    background: color-mix(in srgb, var(--cc, var(--accent)) 20%, var(--paper-raised));
    border-color: var(--cc, var(--accent));
  }
  .phase-proc-card .rng{
    font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.04em; border-radius:8px; padding:3px 9px; display:inline-block; margin-bottom:10px;
    color:#fff; font-weight:700;
    background: var(--cc, var(--accent));
    border: 1px solid var(--cc, var(--accent));
  }
  .phase-proc-card h4{ font-size:.98rem; margin:0 0 12px; }
  .phase-proc-card ul{ margin:0; padding-left:18px; color:var(--ink-soft); font-size:.85rem; display:flex; flex-direction:column; gap:8px; line-height:1.5; }
  @media (max-width:880px){ .phase-proc-grid{ grid-template-columns:1fr; } }

  /* ===== protocol directory ===== */
  .proto-fields{ display:flex; flex-direction:column; gap:12px; padding-top:2px; }
  .proto-fields .pf-row{ display:flex; gap:16px; align-items:flex-start; }
  .proto-fields .pf-label{ flex:0 0 150px; font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; padding-top:2px; }
  .proto-fields .pf-val{ flex:1; font-size:.88rem; color:var(--ink-soft); line-height:1.6; }
  @media (max-width:640px){
    .proto-fields .pf-row{ flex-direction:column; gap:4px; }
    .proto-fields .pf-label{ flex:none; }
  }

  @media (max-width:880px){
    .dnd-grid, .kit-cols{ grid-template-columns:1fr; }
    .duty-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:560px){ .duty-grid{ grid-template-columns:1fr 1fr; } }

  /* ===== media & photography ===== */
  .media-grid{ grid-template-columns:repeat(4,1fr); }
  .media-grid .card{ padding:20px 18px; border-top-width:3px; transition:transform .15s ease, background .15s ease; }
  .media-grid .card:hover{ transform:translateY(-3px); }
  .media-grid .card h3{ font-size:.98rem; margin:10px 0 8px; }
  .media-grid .card ul{ font-size:.82rem; }
  /* colour-cycle the 8 photo-moment cards through the site's 15-hue section palette */
  .media-grid .card:nth-child(8n+1){ --cc:#3d5a80; }
  .media-grid .card:nth-child(8n+2){ --cc:#2f7a72; }
  .media-grid .card:nth-child(8n+3){ --cc:#5158a6; }
  .media-grid .card:nth-child(8n+4){ --cc:#a8752a; }
  .media-grid .card:nth-child(8n+5){ --cc:#3c7a5c; }
  .media-grid .card:nth-child(8n+6){ --cc:#96524f; }
  .media-grid .card:nth-child(8n+7){ --cc:#7a4a7d; }
  .media-grid .card:nth-child(8n+8){ --cc:#b3591c; }
  .media-grid .card{
    border-color: color-mix(in srgb, var(--cc, var(--accent)) 40%, var(--line-soft));
    border-top-width:4px; border-top-color: var(--cc, var(--accent));
    background: color-mix(in srgb, var(--cc, var(--accent)) 11%, var(--paper-raised));
  }
  .media-grid .card:hover{
    background: color-mix(in srgb, var(--cc, var(--accent)) 20%, var(--paper-raised));
    border-color: var(--cc, var(--accent));
  }
  .media-grid .card .idx{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%; margin-bottom:2px;
    background: var(--cc, var(--accent)); color:#fff; font-weight:700; font-size:.72rem;
  }

  /* ===== photo caption generator — a colourful tool card, tinted with the section's own colour ===== */
  .capgen{
    max-width:680px; border:1px solid color-mix(in srgb, var(--sec, var(--accent)) 35%, var(--line-soft));
    border-radius:16px; padding:22px 24px 24px;
    background: color-mix(in srgb, var(--sec, var(--accent)) 4%, var(--paper-raised));
  }
  .capgen .field select, .capgen .field input{
    border-color: color-mix(in srgb, var(--sec, var(--accent)) 40%, var(--line-soft));
  }
  .capgen .field select:focus, .capgen .field input:focus{
    outline:none; border-color: var(--sec, var(--accent));
    background: color-mix(in srgb, var(--sec, var(--accent)) 6%, var(--paper));
  }
  .capgen .cn-box{
    border-color: color-mix(in srgb, var(--sec, var(--accent)) 45%, var(--line-soft));
    background: color-mix(in srgb, var(--sec, var(--accent)) 8%, var(--paper-sunk));
  }
  @media (max-width:1080px){ .media-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .media-grid{ grid-template-columns:1fr; } }

  /* ===== "Video Evidence" / "NAAC Peer Team Readiness Checklist" — colourful interactive cards ===== */
  .cc-grid .dnd-col{
    transition: transform .15s ease, background .15s ease;
    border-color: color-mix(in srgb, var(--cc, var(--accent)) 40%, var(--line-soft));
    border-top-width:4px; border-top-color: var(--cc, var(--accent));
    background: color-mix(in srgb, var(--cc, var(--accent)) 11%, var(--paper-raised));
  }
  .cc-grid .dnd-col:hover{
    transform:translateY(-3px);
    background: color-mix(in srgb, var(--cc, var(--accent)) 20%, var(--paper-raised));
    border-color: var(--cc, var(--accent));
  }
  .cc-grid .dnd-col:nth-child(1){ --cc:#2b6f8a; }
  .cc-grid .dnd-col:nth-child(2){ --cc:#5f7a34; }
  .cc-grid .dnd-col h4{ color: var(--cc, var(--accent)); }
  .cc-grid .dnd-col .mk{
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:50%; flex:none;
    background: var(--cc, var(--accent)); color:#fff; font-weight:700;
  }

  /* ===== registration form ===== */
  .reg-card{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:14px; box-shadow:var(--shadow); padding:30px 32px; max-width:780px; }
  .reg-toggle{ display:flex; gap:10px; margin-bottom:26px; }
  .reg-toggle button{ flex:1; border:1px solid var(--line-soft); background:var(--paper); color:var(--ink-soft); font-weight:600; font-size:.9rem; padding:.85em 1em; border-radius:14px; cursor:pointer; }
  .reg-toggle button.active{ background:var(--sec, var(--ink)); border-color:var(--sec, var(--ink)); color:#fff; }
  #reg-form{ display:flex; flex-direction:column; gap:16px; }
  #reg-form .two-col{ gap:16px; }
  .field textarea{ width:100%; padding:.65em .8em; border:1px solid var(--line-soft); border-radius:8px; background:var(--paper); color:var(--ink); font-size:.9rem; font-family:inherit; resize:vertical; }
  .reg-sub-label{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-soft-line); border-radius:8px; padding:6px 10px; width:fit-content; margin-bottom:2px; }
  .opt{ font-weight:400; color:var(--ink-faint); font-size:.78rem; }
  .reg-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
  .reg-msg{ display:none; font-size:.86rem; padding:12px 16px; border-radius:10px; }
  .reg-msg.ok{ background:var(--good-soft); border:1px solid var(--good-line); color:var(--good); }
  .reg-msg.err{ background:var(--crit-soft); border:1px solid var(--crit-line); color:var(--crit); }
  @media (max-width:640px){ .reg-card{ padding:24px 20px; } #reg-form .two-col{ grid-template-columns:1fr; } }

  @media print{
    .viewbar, header.site, footer.site, .hero, #about, #pipeline, #services, #event-types, #naac, #protocol, #execution, #fnb, #media, #register, #work, #platform, #techstack, .why-band, #faq, #contact, .final-cta, #view-template, #view-console{ display:none !important; }
    body{ background:#fff; }
  }

  /* platform section */
  .phase-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .phase-card{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:12px; padding:26px 24px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
  .phase-card .ph{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-soft-line); border-radius:6px; padding:4px 9px; width:fit-content; }
  .phase-card h3{ font-size:1.12rem; margin:14px 0 10px; }
  .phase-card ul{ margin:0 0 18px; padding-left:18px; color:var(--ink-soft); font-size:.88rem; }
  .phase-card ul li + li{ margin-top:5px; }
  .phase-card .btn{ margin-top:auto; }

  .why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 28px; }
  .why-item{ display:flex; gap:14px; align-items:flex-start; }
  .why-item .tick{ flex:none; width:22px; height:22px; border-radius:50%; border:1.6px solid var(--accent); display:flex; align-items:center; justify-content:center; margin-top:2px; }
  .why-item .tick svg{ width:11px; height:11px; }
  .why-item p{ font-size:.95rem; color:var(--ink-soft); }
  .why-item strong{ color:var(--ink); }

  .faq-list{ display:flex; flex-direction:column; gap:12px; max-width:800px; }
  details.faq-item{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:12px; box-shadow:var(--shadow); }
  details.faq-item summary{ list-style:none; cursor:pointer; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:600; font-size:.96rem; }
  details.faq-item summary::-webkit-details-marker{ display:none; }
  details.faq-item summary .chev{ flex:none; width:20px; height:20px; border-radius:50%; border:1.4px solid var(--line-soft); display:flex; align-items:center; justify-content:center; transition:transform .25s ease; }
  details.faq-item[open] summary .chev{ transform:rotate(45deg); border-color:var(--accent); }
  details.faq-item[open] summary{ border-bottom:1px solid var(--line-soft); }
  details.faq-item .faq-a{ padding:4px 22px 20px; font-size:.9rem; color:var(--ink-soft); }
  @media (prefers-reduced-motion: reduce){ details.faq-item summary .chev{ transition:none; } }

  .contact-band{ background:var(--ink); color:var(--paper); border-radius:14px; padding:56px 52px; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
  .contact-band h2{ color:var(--paper); }
  .contact-band .eyebrow{ color:var(--accent); }
  .contact-band .eyebrow::before{ background:var(--accent); }
  .contact-band p.lede{ color:#c4cddf; margin-top:14px; max-width:46ch; }
  .contact-list{ display:flex; flex-direction:column; gap:14px; }
  .contact-row{ display:flex; align-items:center; gap:14px; padding:16px 18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px; }
  .contact-row .k{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#8b9ab8; }
  .contact-row .v{ font-weight:600; margin-top:2px; }
  .contact-row a{ text-decoration:none; color:var(--paper); }
  .contact-cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

  footer.site{ padding:40px 0 48px; }
  .foot-grid{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line-soft); padding-top:28px; }
  .foot-grid p{ font-size:.82rem; color:var(--ink-faint); }
  .foot-links{ display:flex; gap:20px; }
  .foot-links a, .foot-links button{ font-size:.82rem; color:var(--ink-faint); text-decoration:none; background:none; border:none; padding:0; cursor:pointer; }
  .foot-links a:hover, .foot-links button:hover{ color:var(--ink); }

  [data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
  [data-reveal].in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

  /* ===================== TEMPLATE VIEW ===================== */
  .sample-bar{ background:var(--crit); color:#fff; font-family:"IBM Plex Mono",monospace; font-size:.74rem; padding:9px 20px; text-align:center; line-height:1.5; }
  .sample-bar button{ color:#fff; text-decoration:underline; font-weight:600; background:none; border:none; cursor:pointer; font-size:inherit; font-family:inherit; padding:0; }
  .fillp{ color:var(--crit); background:var(--crit-soft); border-radius:6px; padding:.05em .3em; font-weight:600; }
  #view-template .mhero{ padding:60px 0 50px; text-align:center; }
  #view-template .mhero .eyebrow{ justify-content:center; }
  #view-template .mhero h1{ font-size:clamp(2rem,4.4vw,3.1rem); margin:16px auto 14px; max-width:22ch; }
  #view-template .mhero p.tag{ color:var(--ink-soft); font-size:1.05rem; max-width:56ch; margin:0 auto 26px; }
  .mhero-chips{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
  .chip{ font-family:"IBM Plex Mono",monospace; font-size:.74rem; background:var(--paper-raised); border:1px solid var(--line-soft); padding:7px 13px; border-radius:20px; color:var(--ink-soft); }
  .mhero-ctas{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
  #view-template .stat-band{ max-width:640px; margin:36px auto 0; }
  #view-template .stat-item{ text-align:center; }
  .obj-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; max-width:900px; }
  .obj-list li{ display:flex; gap:11px; font-size:.93rem; color:var(--ink-soft); }
  .obj-list li::before{ content:"→"; color:var(--accent); flex:none; font-weight:600; }
  .theme-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .theme-chip{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:12px; padding:14px 16px; font-size:.85rem; color:var(--ink-soft); box-shadow:var(--shadow); }
  .theme-chip b{ font-family:"IBM Plex Mono",monospace; color:var(--accent-ink); font-size:.7rem; display:block; margin-bottom:5px; }
  .speaker-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .speaker-card{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:12px; padding:20px; text-align:center; box-shadow:var(--shadow); }
  .speaker-avatar{ width:56px; height:56px; border-radius:50%; background:var(--accent-soft); border:1.5px solid var(--accent-soft-line); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-weight:600; color:var(--accent-ink); }
  .speaker-card .name{ font-weight:600; font-size:.9rem; }
  .speaker-card .role{ font-size:.76rem; color:var(--ink-faint); margin-top:4px; }
  .sched-wrap{ overflow-x:auto; border:1px solid var(--line-soft); border-radius:12px; background:var(--paper-raised); box-shadow:var(--shadow); }
  #view-template table.sched{ width:100%; border-collapse:collapse; min-width:600px; }
  #view-template table.sched th{ text-align:left; font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; padding:12px 18px; border-bottom:1px solid var(--line-soft); }
  #view-template table.sched td{ padding:14px 18px; border-bottom:1px solid var(--line-soft); font-size:.87rem; color:var(--ink-soft); }
  #view-template table.sched tr:last-child td{ border-bottom:none; }
  #view-template table.sched td.time{ font-family:"IBM Plex Mono",monospace; color:var(--ink); white-space:nowrap; }
  .register-band{ background:var(--ink); color:var(--paper); border-radius:14px; padding:48px 44px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
  .register-band h2{ color:var(--paper); }
  .register-band .eyebrow{ color:var(--accent); }
  .register-band .eyebrow::before{ background:var(--accent); }
  .register-band p{ color:#c4cddf; margin-top:12px; }
  .register-band .fillp{ background:rgba(232,220,220,.18); color:#f2c9c9; }
  .reg-box{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:12px; }
  .reg-box .k{ font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:#8b9ab8; }
  .reg-box .v{ font-weight:600; }
  .cf-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; max-width:70ch; }
  .cf-list li{ display:flex; gap:11px; font-size:.9rem; color:var(--ink-soft); }
  .cf-list li::before{ content:"✓"; flex:none; width:18px; height:18px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-size:.62rem; display:flex; align-items:center; justify-content:center; margin-top:2px; font-weight:700; }
  .dl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .dl-card{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:12px; padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
  .dl-card .ic{ width:30px; height:30px; border-radius:12px; background:var(--accent-soft); border:1px solid var(--accent-soft-line); display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--accent-ink); font-weight:600; }
  .dl-card .name{ font-size:.86rem; font-weight:600; }
  .dl-card .stub{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--ink-faint); }
  .committee-grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 30px; }
  .committee-line{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:.88rem; }
  .committee-line .role{ color:var(--ink-faint); font-family:"IBM Plex Mono",monospace; font-size:.72rem; }
  .made-by{ display:inline-flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--ink-soft); border:1px solid var(--line-soft); padding:8px 16px; border-radius:20px; background:none; cursor:pointer; }
  .made-by:hover{ color:var(--ink); border-color:var(--line); }
  .made-by b{ color:var(--accent-ink); }

  /* ===================== CONSOLE VIEW ===================== */
  #view-console{ background:var(--paper-sunk); }
  .console-note{ background:var(--paper-band); border-bottom:1px solid var(--line-soft); font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-soft); text-align:center; padding:8px 16px; }
  .console-note b{ color:var(--accent-ink); }
  .app{ display:grid; grid-template-columns:238px 1fr; min-height:80vh; font-size:14.5px; }
  .cside{ background:var(--paper-raised); border-right:1px solid var(--line-soft); display:flex; flex-direction:column; padding:20px 16px; gap:18px; }
  .cside-nav{ display:flex; flex-direction:column; gap:3px; }
  .cside-nav button{ display:flex; align-items:center; gap:10px; text-align:left; border:none; background:none; padding:8px 10px; border-radius:10px; font-size:.85rem; font-weight:500; color:var(--ink-soft); cursor:pointer; }
  .cside-nav button .dot{ width:6px; height:6px; border-radius:50%; background:var(--line-soft); flex:none; }
  .cside-nav button:hover{ background:var(--paper-sunk); color:var(--ink); }
  .cside-nav button.active{ background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }
  .cside-nav button.active .dot{ background:var(--accent); }
  .cnav-label{ font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); padding:0 10px; margin:8px 0 2px; display:flex; align-items:center; gap:8px; }
  .phase-tag{ font-size:.56rem; background:var(--paper-sunk); border:1px solid var(--line-soft); border-radius:8px; padding:1px 6px; color:var(--ink-soft); }
  .cside-foot{ margin-top:auto; padding:12px 10px; border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:10px; }
  .avatar{ width:30px; height:30px; border-radius:50%; background:var(--accent-soft); border:1px solid var(--accent-soft-line); display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--accent-ink); font-weight:600; flex:none; }
  .cside-foot .who{ font-size:.78rem; font-weight:600; }
  .cside-foot .role{ font-size:.68rem; color:var(--ink-faint); }

  .cmain{ display:flex; flex-direction:column; min-width:0; }
  .ctopbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 28px; border-bottom:1px solid var(--line-soft); background:var(--paper-raised); flex-wrap:wrap; }
  .ctopbar h2{ font-size:1.2rem; }
  .ctopbar .crumb{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--ink-faint); margin-top:5px; display:block; }
  .ccontent{ padding:26px 28px 60px; flex:1; }
  .cscreen{ display:none; }
  .cscreen.active{ display:block; }

  .panel{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:14px; box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden; }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line-soft); gap:12px; flex-wrap:wrap; }
  .panel-head h3{ font-size:.95rem; }
  .panel-head .hint{ font-size:.74rem; color:var(--ink-faint); }
  .panel-body{ padding:20px; }
  .grid-c2{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; align-items:start; }
  .grid-c2e{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
  .table-scroll{ overflow-x:auto; }
  #view-console table.ct{ width:100%; border-collapse:collapse; }
  #view-console table.ct th{ text-align:left; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; padding:9px 20px; border-bottom:1px solid var(--line-soft); background:var(--paper-sunk); }
  #view-console table.ct td{ padding:12px 20px; border-bottom:1px solid var(--line-soft); font-size:.85rem; vertical-align:middle; }
  #view-console table.ct tr:last-child td{ border-bottom:none; }
  #view-console table.ct td.name{ font-weight:600; }
  .csub{ display:block; font-weight:400; font-size:.74rem; color:var(--ink-faint); margin-top:1px; }

  .pill{ display:inline-flex; align-items:center; gap:5px; font-family:"IBM Plex Mono",monospace; font-size:.68rem; font-weight:600; padding:4px 10px; border-radius:20px; white-space:nowrap; }
  .pill::before{ content:""; width:6px; height:6px; border-radius:50%; }
  .pill-ok{ background:var(--good-soft); color:var(--good); border:1px solid var(--good-line); }
  .pill-ok::before{ background:var(--good); }
  .pill-pend{ background:var(--pend-soft); color:var(--pend); border:1px solid var(--pend-line); }
  .pill-pend::before{ background:var(--pend); }
  .pill-crit{ background:var(--crit-soft); color:var(--crit); border:1px solid var(--crit-line); }
  .pill-crit::before{ background:var(--crit); }
  .pill-neutral{ background:var(--paper-sunk); color:var(--ink-faint); border:1px solid var(--line-soft); }
  .pill-neutral::before{ background:var(--ink-faint); }

  .cstat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
  .cstat{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow); }
  .cstat .k{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
  .cstat .v{ font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:1.7rem; font-weight:600; margin-top:6px; font-variant-numeric:tabular-nums; }
  .cstat .d{ font-size:.72rem; margin-top:5px; font-weight:600; color:var(--good); }
  .cstat .d.warn{ color:var(--pend); }
  .cstat .d.bad{ color:var(--crit); }
  .cstat .d.flat{ color:var(--ink-faint); font-weight:500; }

  .spark{ display:flex; align-items:flex-end; gap:4px; height:64px; }
  .spark i{ flex:1; background:var(--accent-soft); border:1px solid var(--accent-soft-line); border-bottom:none; border-radius:6px 2px 0 0; }
  .spark i.hi{ background:var(--accent); border-color:var(--accent); }

  .cprogress{ height:9px; border-radius:10px; background:var(--paper-sunk); border:1px solid var(--line-soft); overflow:hidden; }
  .cprogress .fill{ height:100%; background:var(--good); }
  .cprogress-label{ display:flex; justify-content:space-between; font-size:.74rem; color:var(--ink-soft); margin-bottom:5px; }

  .search-row{ display:flex; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
  .search-row input, .search-row select{ padding:.55em .9em; border:1px solid var(--line-soft); border-radius:12px; background:var(--paper); color:var(--ink); font-size:.82rem; }
  .search-row input{ flex:1; min-width:180px; }
  .scan-box{ border:1.5px dashed var(--line-soft); border-radius:16px; padding:34px 20px; text-align:center; color:var(--ink-faint); font-size:.82rem; }
  .scan-box .icon{ font-size:1.8rem; margin-bottom:10px; }

  .ccommittee-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .ccommittee-card{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:14px; padding:16px; box-shadow:var(--shadow); display:flex; gap:12px; align-items:flex-start; }
  .ccommittee-card .name{ font-weight:600; font-size:.86rem; }
  .ccommittee-card .role{ font-family:"IBM Plex Mono",monospace; font-size:.66rem; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-soft-line); padding:2px 7px; border-radius:8px; display:inline-block; margin:4px 0 8px; }
  .ccommittee-card .ph{ font-size:.74rem; color:var(--ink-faint); }
  .ccommittee-card a{ font-size:.72rem; color:var(--ink-soft); text-decoration:none; border-bottom:1px dashed var(--line-soft); }

  .cert-preview{ background:var(--paper-raised); border:2px solid var(--accent-soft-line); border-radius:16px; padding:34px 30px; text-align:center; position:relative; }
  .cert-preview::before{ content:""; position:absolute; inset:8px; border:1px solid var(--accent-soft-line); border-radius:12px; pointer-events:none; }
  .cert-preview .org{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }
  .cert-preview h3{ font-size:1.5rem; margin:14px 0 4px; }
  .cert-preview .who{ font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-style:italic; font-size:1.25rem; color:var(--accent-ink); margin:10px 0; }
  .cert-preview .desc{ font-size:.82rem; color:var(--ink-soft); max-width:44ch; margin:0 auto; }
  .cert-preview .meta{ display:flex; justify-content:center; gap:26px; margin-top:22px; font-size:.7rem; color:var(--ink-faint); font-family:"IBM Plex Mono",monospace; }
  .qr{ width:52px; height:52px; margin:16px auto 0; background:repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%) 0 0/10px 10px, var(--paper-raised); border:2px solid var(--ink); border-radius:8px; }

  .cform-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .cfield{ display:flex; flex-direction:column; gap:6px; }
  .cfield.full{ grid-column:1 / -1; }
  .cfield label{ font-size:.78rem; font-weight:600; }
  .cfield input, .cfield select{ padding:.65em .8em; border:1px solid var(--line-soft); border-radius:12px; background:var(--paper); color:var(--ink); font-size:.85rem; }
  .radio-row{ display:flex; gap:10px; flex-wrap:wrap; }
  .radio-opt{ flex:1; min-width:130px; border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px; cursor:pointer; font-size:.82rem; }
  .radio-opt input{ margin-right:6px; accent-color:var(--accent); }
  .radio-opt .fee{ font-family:"IBM Plex Mono",monospace; color:var(--accent-ink); font-weight:600; display:block; margin-top:3px; font-size:.78rem; }
  .fee-total{ background:var(--accent-soft); border:1px solid var(--accent-soft-line); border-radius:14px; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; margin:18px 0; }
  .fee-total .amt{ font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:1.5rem; font-weight:600; color:var(--accent-ink); }
  .welcome-card{ background:linear-gradient(135deg, var(--ink), #23324e); color:var(--paper); border-radius:16px; padding:26px 28px; margin-bottom:20px; }
  .welcome-card h3{ color:var(--paper); font-size:1.3rem; }
  .welcome-card p{ color:#c4cddf; font-size:.85rem; margin-top:6px; }
  .welcome-card .pill-ok{ margin-top:14px; }
  .sched-list{ display:flex; flex-direction:column; }
  .sched-row{ display:flex; gap:16px; padding:13px 20px; border-bottom:1px solid var(--line-soft); align-items:baseline; }
  .sched-row:last-child{ border-bottom:none; }
  .sched-row .t{ font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--ink-faint); width:110px; flex:none; }
  .sched-row .s{ font-size:.85rem; }
  .sched-row .s .who{ display:block; font-size:.72rem; color:var(--ink-faint); margin-top:2px; }

  .evi-summary{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
  .evi-ring{ position:relative; width:110px; height:110px; flex:none; }
  .evi-ring svg{ transform:rotate(-90deg); }
  .evi-ring .track{ fill:none; stroke:var(--paper-sunk); stroke-width:10; }
  .evi-ring .arc{ fill:none; stroke:var(--good); stroke-width:10; stroke-linecap:round; }
  .evi-ring .pct{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:1.4rem; font-weight:600; }
  .evi-ring .pct small{ font-family:"IBM Plex Mono",monospace; font-size:.58rem; color:var(--ink-faint); font-weight:500; }
  .evi-list{ display:flex; flex-direction:column; gap:10px; flex:1; min-width:240px; }
  .evi-row{ display:flex; align-items:center; gap:12px; font-size:.85rem; }
  .evi-row .lbl{ flex:1; }
  .evi-row .cnt{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-faint); white-space:nowrap; }

  .rating-row{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
  .rating-row .lbl{ width:160px; flex:none; font-size:.82rem; color:var(--ink-soft); }
  .rating-row .bar{ flex:1; height:12px; border-radius:14px; background:var(--paper-sunk); border:1px solid var(--line-soft); overflow:hidden; }
  .rating-row .bar i{ display:block; height:100%; background:var(--accent); }
  .rating-row .num{ font-family:"IBM Plex Mono",monospace; font-size:.76rem; width:34px; text-align:right; }
  .theme-tag{ display:inline-block; font-size:.76rem; background:var(--paper-sunk); border:1px solid var(--line-soft); border-radius:20px; padding:5px 12px; margin:0 6px 8px 0; color:var(--ink-soft); }
  .theme-tag b{ color:var(--ink); }
  .quote{ border-left:3px solid var(--accent); padding:6px 0 6px 14px; font-size:.82rem; color:var(--ink-soft); font-style:italic; margin-bottom:12px; }

  .tg-input-row{ display:flex; gap:10px; flex-wrap:wrap; }
  .tg-input-row input{ flex:1; min-width:220px; padding:.7em .9em; border:1px solid var(--line-soft); border-radius:12px; background:var(--paper); color:var(--ink); font-size:.9rem; }
  .tg-input-row select{ padding:.6em .8em; border:1px solid var(--line-soft); border-radius:12px; background:var(--paper); color:var(--ink); font-size:.85rem; }
  .tg-out{ margin-top:18px; display:none; }
  .tg-out.show{ display:block; }
  .tg-title{ font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:1.15rem; font-weight:600; margin-bottom:4px; }
  .tg-sub{ font-size:.78rem; color:var(--ink-faint); margin-bottom:14px; }
  .tg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .tg-chip{ background:var(--paper-sunk); border:1px solid var(--line-soft); border-radius:10px; padding:12px 14px; font-size:.84rem; display:flex; gap:10px; align-items:baseline; }
  .tg-chip b{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--accent-ink); flex:none; }
  .tg-note{ font-size:.72rem; color:var(--ink-faint); margin-top:14px; }

  .ms-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .ms-card{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
  .ms-card .thumb{ height:86px; display:flex; align-items:center; justify-content:center; font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:.9rem; color:#fff; text-align:center; padding:0 14px; }
  .ms-card .meta{ padding:12px 14px; }
  .ms-card .meta .nm{ font-weight:600; font-size:.84rem; }
  .ms-card .meta .st{ margin-top:7px; }
  .lang-row{ display:flex; gap:8px; margin-top:8px; }
  .lang-chip{ font-family:"IBM Plex Mono",monospace; font-size:.64rem; border:1px solid var(--line-soft); border-radius:8px; padding:2px 7px; color:var(--ink-soft); }
  .lang-chip.on{ background:var(--good-soft); border-color:var(--good-line); color:var(--good); }

  .crm-profile{ display:flex; gap:14px; align-items:flex-start; }
  .crm-profile .avatar{ width:44px; height:44px; font-size:.85rem; }
  .crm-history{ display:flex; flex-direction:column; margin-top:14px; }
  .crm-ev{ display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:.82rem; align-items:baseline; }
  .crm-ev:last-child{ border-bottom:none; }
  .crm-ev .yr{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--ink-faint); width:64px; flex:none; }
  .next-step{ background:var(--accent-soft); border:1px solid var(--accent-soft-line); border-radius:14px; padding:14px 16px; font-size:.82rem; color:var(--accent-ink); margin-top:14px; }
  .next-step b{ display:block; font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:5px; }

  .bars{ display:flex; align-items:flex-end; gap:14px; height:130px; padding:6px 4px 0; }
  .bars .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; justify-content:flex-end; }
  .bars .bar{ width:100%; max-width:44px; background:var(--accent-soft); border:1px solid var(--accent-soft-line); border-radius:8px 3px 0 0; }
  .bars .bar.hi{ background:var(--accent); border-color:var(--accent); }
  .bars .lbl{ font-family:"IBM Plex Mono",monospace; font-size:.64rem; color:var(--ink-faint); }
  .geo-row{ display:flex; align-items:center; gap:12px; margin-bottom:10px; font-size:.82rem; }
  .geo-row .lbl{ width:120px; flex:none; color:var(--ink-soft); }
  .geo-row .bar{ flex:1; height:10px; border-radius:10px; background:var(--paper-sunk); border:1px solid var(--line-soft); overflow:hidden; }
  .geo-row .bar i{ display:block; height:100%; background:var(--line); }
  .geo-row .num{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; width:36px; text-align:right; color:var(--ink-soft); }

  @media (max-width:920px){
    nav.links{ display:none; }
    .hero-grid{ grid-template-columns:1fr; }
    .about-grid{ grid-template-columns:1fr; }
    .network-grid{ grid-template-columns:repeat(2,1fr); }
    .pipeline{ grid-template-columns:1fr 1fr; }
    .pipe-step{ border-right:none; border-bottom:1px solid var(--line-soft); }
    .pipe-step::after{ content:""; }
    .cards, .phase-grid{ grid-template-columns:1fr 1fr; }
    .protocol-grid{ grid-template-columns:1fr; }
    .showcase-grid{ grid-template-columns:1fr; }
    .stat-band{ grid-template-columns:1fr; }
    .stat-item{ border-right:none; border-bottom:1px solid var(--line-soft); }
    .stat-item:last-child{ border-bottom:none; }
    .budget-tool{ grid-template-columns:1fr; }
    .budget-form{ border-right:none; border-bottom:1px solid var(--line-soft); }
    .why-grid{ grid-template-columns:1fr; }
    .contact-band{ grid-template-columns:1fr; padding:40px 26px; }
    .obj-list{ grid-template-columns:1fr; }
    .theme-grid, .speaker-grid, .dl-grid{ grid-template-columns:1fr 1fr; }
    .committee-grid2{ grid-template-columns:1fr; }
    .register-band{ grid-template-columns:1fr; padding:36px 26px; }
    .app{ grid-template-columns:1fr; }
    .cside{ flex-direction:row; overflow-x:auto; align-items:center; padding:12px 14px; }
    .cside-nav{ flex-direction:row; align-items:center; }
    .cnav-label{ margin:0; white-space:nowrap; }
    .cside-foot{ display:none; }
    .grid-c2, .grid-c2e{ grid-template-columns:1fr; }
    .cstat-grid{ grid-template-columns:1fr 1fr; }
    .tg-grid{ grid-template-columns:1fr; }
    .ms-grid, .ccommittee-grid{ grid-template-columns:1fr 1fr; }
    .cform-grid{ grid-template-columns:1fr; }
    .rating-row .lbl{ width:120px; }
  }
  @media (max-width:560px){
    .network-grid{ grid-template-columns:1fr 1fr; }
    .pipeline{ grid-template-columns:1fr; }
    .cards, .phase-grid{ grid-template-columns:1fr; }
    .two-col{ grid-template-columns:1fr; }
    .hero{ padding:60px 0 40px; }
    .contact-band{ border-radius:0; margin:0 -28px; }
    .theme-grid, .speaker-grid, .dl-grid, .ms-grid, .ccommittee-grid{ grid-template-columns:1fr; }
    .cstat-grid{ grid-template-columns:1fr; }
    .ccontent{ padding:20px 16px 44px; }
  }

  /* ===== toolkit tabs ===== */
  .tk-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
  .tk-tabs button{ border:1px solid var(--line-soft); background:var(--paper-raised); color:var(--ink-soft); font-weight:600; font-size:.85rem; padding:.65em 1.2em; border-radius:20px; cursor:pointer; }
  .tk-tabs button.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .tk-pane{ display:none; }
  .tk-pane.active{ display:block; }
  .tk-panel{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:14px; box-shadow:var(--shadow); padding:30px 30px 28px; }
  .tk-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:22px; }
  .tk-row .field{ flex:1; min-width:160px; margin:0; }
  .tl-list{ display:flex; flex-direction:column; border-top:1px solid var(--line-soft); }
  .tl-row{ display:flex; gap:16px; padding:12px 4px; border-bottom:1px solid var(--line-soft); align-items:baseline; }
  .tl-row .d{ font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--accent-ink); width:120px; flex:none; font-weight:600; }
  .tl-row .t{ font-size:.9rem; color:var(--ink-soft); }
  .tl-row .ph{ font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin-left:auto; white-space:nowrap; }
  .tl-row.ev{ background:var(--accent-soft); border-radius:12px; }
  .tl-row.ev .t{ color:var(--accent-ink); font-weight:600; }
  .tl-warn{ background:var(--pend-soft); border:1px solid var(--pend-line); color:var(--pend); font-size:.85rem; border-radius:10px; padding:12px 16px; margin-bottom:14px; display:none; }
  .qz-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }
  .qz-item{ display:flex; justify-content:space-between; gap:16px; align-items:center; padding:12px 16px; border:1px solid var(--line-soft); border-radius:10px; font-size:.9rem; color:var(--ink-soft); flex-wrap:wrap; }
  .qz-item .opts{ display:flex; gap:14px; flex:none; }
  .qz-item label{ display:flex; gap:6px; align-items:center; font-weight:600; cursor:pointer; }
  .qz-item input{ accent-color:var(--accent); }
  .qz-result{ display:none; margin-top:20px; padding:22px 24px; border-radius:14px; border:1px solid var(--line-soft); }
  .qz-result .score{ font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:2rem; font-weight:600; }
  .qz-bar{ height:10px; border-radius:10px; background:var(--paper-sunk); border:1px solid var(--line-soft); overflow:hidden; margin:12px 0; }
  .qz-bar i{ display:block; height:100%; background:var(--accent); }
  .cn-out{ display:none; margin-top:20px; }
  .cn-box{ background:var(--paper-sunk); border:1px solid var(--line-soft); border-radius:10px; padding:20px 22px; font-size:.9rem; color:var(--ink-soft); line-height:1.7; white-space:pre-wrap; }
  /* ===== resources ===== */
  .res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .res-card{
    background:var(--paper-raised); border:1px solid var(--line-soft); border-top-width:4px; border-radius:10px;
    padding:20px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; text-decoration:none;
    transition:transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .res-card:hover{ transform:translateY(-3px); }
  .res-card .ic{ width:34px; height:34px; border-radius:10px; background:var(--accent-soft); border:1px solid var(--accent-soft-line); display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--accent-ink); font-weight:600; }
  .res-card .nm{ font-weight:600; font-size:.92rem; }
  .res-card .ds{ font-size:.8rem; color:var(--ink-soft); }
  .res-card .mt{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--ink-faint); margin-top:auto; }
  /* colour-cycle the 12 resource cards through the site's 15-hue section palette */
  .res-card:nth-child(1){ --cc:#3d5a80; }
  .res-card:nth-child(2){ --cc:#2f7a72; }
  .res-card:nth-child(3){ --cc:#5158a6; }
  .res-card:nth-child(4){ --cc:#c2701e; }
  .res-card:nth-child(5){ --cc:#a8752a; }
  .res-card:nth-child(6){ --cc:#3c7a5c; }
  .res-card:nth-child(7){ --cc:#5c4a8a; }
  .res-card:nth-child(8){ --cc:#c4483f; }
  .res-card:nth-child(9){ --cc:#1f7a6b; }
  .res-card:nth-child(10){ --cc:#3d708a; }
  .res-card:nth-child(11){ --cc:#96524f; }
  .res-card:nth-child(12){ --cc:#7a4a7d; }
  .res-card{
    border-top-color: var(--cc, var(--accent));
    background: color-mix(in srgb, var(--cc, var(--accent)) 8%, var(--paper-raised));
  }
  .res-card:hover{
    background: color-mix(in srgb, var(--cc, var(--accent)) 16%, var(--paper-raised));
  }
  /* .res-card .ic's own colour is set later, after the shared .ic/.ev-date/.fm-cat/.dl-card rule it must win over */
  /* ===== events / verify ===== */
  .ev-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:22px; align-items:start; }
  .ev-card{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:10px; padding:20px 22px; box-shadow:var(--shadow); display:flex; gap:18px; align-items:flex-start; margin-bottom:12px; }
  .ev-date{ flex:none; text-align:center; background:var(--accent-soft); border:1px solid var(--accent-soft-line); border-radius:10px; padding:8px 14px; }
  .ev-date .dd{ font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:1.4rem; font-weight:600; color:var(--accent-ink); }
  .ev-date .mm{ font-family:"IBM Plex Mono",monospace; font-size:.64rem; text-transform:uppercase; color:var(--accent-ink); }
  .ev-card .nm{ font-weight:600; }
  .ev-card .ds{ font-size:.82rem; color:var(--ink-soft); margin-top:4px; }
  .verify-box{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:14px; box-shadow:var(--shadow); padding:24px; }
  .verify-box input{ width:100%; padding:.7em .9em; border:1px solid var(--line-soft); border-radius:12px; background:var(--paper); color:var(--ink); font-size:.9rem; margin:12px 0; font-family:"IBM Plex Mono",monospace; }
  .verify-out{ display:none; margin-top:14px; font-size:.86rem; padding:14px 16px; border-radius:10px; }
  .verify-out.ok{ background:var(--good-soft); border:1px solid var(--good-line); color:var(--good); }
  .verify-out.bad{ background:var(--crit-soft); border:1px solid var(--crit-line); color:var(--crit); }
  /* ===== enquiry form ===== */
  .enq-form{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:20px; display:flex; flex-direction:column; gap:12px; }
  .enq-form input, .enq-form textarea{ width:100%; padding:.65em .8em; border:1px solid rgba(255,255,255,.2); border-radius:12px; background:rgba(255,255,255,.08); color:var(--paper); font:inherit; font-size:.88rem; }
  .enq-form input::placeholder, .enq-form textarea::placeholder{ color:#8b9ab8; }
  .enq-form textarea{ resize:vertical; min-height:60px; }
  .enq-msg{ display:none; font-size:.84rem; padding:10px 14px; border-radius:12px; }
  .enq-msg.ok{ background:rgba(111,190,151,.15); color:#8fd6b2; border:1px solid rgba(111,190,151,.4); }
  .enq-msg.err{ background:rgba(229,133,133,.12); color:#f0a8a8; border:1px solid rgba(229,133,133,.4); }
  /* ===== newsletter ===== */
  .newsletter{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:var(--paper-band); border:1px solid var(--line-soft); border-radius:14px; padding:20px 24px; margin-bottom:28px; }
  .newsletter .t{ font-weight:600; font-size:.95rem; }
  .newsletter .s{ font-size:.8rem; color:var(--ink-faint); display:block; font-weight:400; }
  .newsletter input{ flex:1; min-width:200px; padding:.65em .9em; border:1px solid var(--line-soft); border-radius:12px; background:var(--paper-raised); color:var(--ink); font-size:.88rem; }
  /* ===== floating whatsapp ===== */
  .wa-float{ position:fixed; right:22px; bottom:22px; z-index:70; width:54px; height:54px; border-radius:50%; background:var(--wa); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.28); text-decoration:none; }
  .wa-float svg{ width:28px; height:28px; fill:#fff; }
  .wa-float:hover{ transform:scale(1.06); }
  @media (max-width:920px){ .res-grid{ grid-template-columns:1fr 1fr; } .ev-grid{ grid-template-columns:1fr; } }
  @media (max-width:560px){ .res-grid{ grid-template-columns:1fr; } }

  /* ===== before/after ===== */
  .diff-legend{ display:flex; justify-content:space-between; gap:16px; margin-bottom:18px; }
  .diff-legend .col-h{ flex:1; text-align:center; font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:10px 12px; border-radius:10px; }
  .diff-legend .col-h.before{ background:var(--crit-soft); color:var(--crit); border:1px solid var(--crit-line); }
  .diff-legend .col-h.after{ background:var(--good-soft); color:var(--good); border:1px solid var(--good-line); }
  .diff-legend .mid{ width:130px; flex:none; }
  .diff-rows{ display:flex; flex-direction:column; gap:10px; }
  .diff-row{ display:grid; grid-template-columns:1fr 130px 1fr; gap:16px; align-items:stretch; }
  .diff-cell{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:10px; padding:14px 16px; font-size:.87rem; color:var(--ink-soft); display:flex; gap:10px; align-items:flex-start; box-shadow:var(--shadow); }
  .diff-cell .mk{ flex:none; width:19px; height:19px; border-radius:50%; font-size:.66rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:2px; }
  .diff-cell.before{ border-left:3px solid var(--crit); }
  .diff-cell.before .mk{ background:var(--crit-soft); color:var(--crit); }
  .diff-cell.after{ border-left:3px solid var(--good); }
  .diff-cell.after .mk{ background:var(--good-soft); color:var(--good); }
  .diff-stage{ display:flex; align-items:center; justify-content:center; text-align:center; font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-soft-line); border-radius:20px; padding:6px 10px; align-self:center; }
  .diff-punch{ margin-top:26px; background:var(--ink); color:var(--paper); border-radius:14px; padding:22px 26px; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
  .diff-punch p{ font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:1.15rem; font-weight:600; }
  .diff-punch small{ display:block; font-family:"Work Sans"; font-size:.78rem; font-weight:400; color:#8b9ab8; margin-top:4px; }
  @media (max-width:880px){
    .diff-legend{ display:none; }
    .diff-row{ grid-template-columns:1fr; gap:8px; }
    .diff-stage{ justify-self:start; }
    .diff-cell.before::before{ content:"WITHOUT A SYSTEM"; font-family:"IBM Plex Mono",monospace; font-size:.58rem; color:var(--crit); display:block; }
    .diff-cell.after::before{ content:"WITH SEMINAR"; font-family:"IBM Plex Mono",monospace; font-size:.58rem; color:var(--good); display:block; }
    .diff-cell{ flex-direction:column; }
  }

  /* ===== formats library ===== */
  .fm-bar{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:14px; box-shadow:var(--shadow); padding:20px 22px; margin-bottom:28px; }
  .fm-bar .fm-note{ font-size:.78rem; color:var(--ink-faint); margin-bottom:14px; }
  .fm-fields{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .fm-fields input, .fm-fields select{ width:100%; padding:.6em .8em; border:1px solid var(--line-soft); border-radius:12px; background:var(--paper); color:var(--ink); font-size:.85rem; }
  .fm-cat{ margin:34px 0 14px; display:flex; align-items:baseline; gap:12px; }
  .fm-cat .tag{ font-family:"IBM Plex Mono",monospace; font-size:.8rem; font-weight:600; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-soft-line); border-radius:12px; padding:3px 10px; flex:none; }
  .fm-cat h3{ font-size:1.1rem; }
  .fmt-pre{ background:var(--paper-sunk); border:1px solid var(--line-soft); border-radius:10px; padding:18px 20px; font-family:"IBM Plex Mono",monospace; font-size:.78rem; line-height:1.65; color:var(--ink-soft); white-space:pre-wrap; overflow-x:auto; margin:0 22px 14px; }
  .fmt-actions{ padding:0 22px 18px; display:flex; gap:10px; }
  .fm-gate{ background:var(--ink); color:var(--paper); border-radius:14px; padding:26px 28px; margin-top:34px; display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center; }
  .fm-gate h3{ color:var(--paper); font-size:1.15rem; }
  .fm-gate p{ font-size:.84rem; color:#c4cddf; margin-top:6px; }
  .fm-gate-form{ display:flex; flex-direction:column; gap:10px; }
  .fm-gate-form input{ padding:.6em .8em; border:1px solid rgba(255,255,255,.2); border-radius:12px; background:rgba(255,255,255,.08); color:var(--paper); font-size:.86rem; }
  .fm-gate-form input::placeholder{ color:#8b9ab8; }
  @media (max-width:880px){ .fm-fields{ grid-template-columns:1fr; } .fm-gate{ grid-template-columns:1fr; } }

  /* ===== per-section identity colors ===== */
  #about{ --sec:#3d5a80; }      /* steel blue */
  #pipeline{ --sec:#2f7a72; }   /* teal */
  #services{ --sec:#5158a6; }   /* indigo */
  #event-types{ --sec:#c2701e; } /* amber */
  #naac{ --sec:#a8752a; }       /* brass */
  #protocol{ --sec:#3c7a5c; }   /* green */
  #execution{ --sec:#5c4a8a; }  /* deep violet */
  #fnb{ --sec:#c4483f; }        /* tomato */
  #media{ --sec:#1f7a6b; }      /* deep teal */
  #techstack{ --sec:#3d708a; }  /* dusty cyan */
  #difference{ --sec:#96524f; } /* rosewood */
  #work{ --sec:#7a4a7d; }       /* plum */
  #budget{ --sec:#b3591c; }     /* terracotta */
  #toolkit{ --sec:#2b6f8a; }    /* petrol */
  #resources{ --sec:#5f7a34; }  /* moss */
  #formats{ --sec:#963d55; }    /* burgundy */
  #events{ --sec:#2e5fb3; }     /* royal blue */
  #register{ --sec:#b0305c; }   /* berry */
  #platform{ --sec:#6b4fa8; }   /* violet */
  .why-band{ --sec:#8a6d3b; }   /* bronze */
  #faq{ --sec:#55607a; }        /* slate */

  :root{ --sec-pct:7%; --sec-line-pct:34%; --sec-ink-pct:74%; }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --sec-pct:14%; --sec-line-pct:50%; --sec-ink-pct:52%; } }
  :root[data-theme="dark"]{ --sec-pct:14%; --sec-line-pct:50%; --sec-ink-pct:52%; }

  #about,#pipeline,#services,#naac,#protocol,#difference,#work,#budget,#toolkit,#resources,#formats,#events,#platform,.why-band,#faq{
    background: color-mix(in srgb, var(--sec) var(--sec-pct), var(--paper));
    border-top: 1px solid color-mix(in srgb, var(--sec) var(--sec-line-pct), transparent);
    border-bottom: none;
  }
  #about::before,#pipeline::before,#services::before,#naac::before,#protocol::before,#difference::before,#work::before,#budget::before,#toolkit::before,#resources::before,#formats::before,#events::before,#platform::before,.why-band::before,#faq::before{
    content:""; position:absolute; top:0; left:0; right:0; height:4px; pointer-events:none;
    background: linear-gradient(90deg, var(--sec), color-mix(in srgb, var(--sec) 10%, transparent) 75%);
  }
  .eyebrow{ color: color-mix(in srgb, var(--sec, var(--accent-ink)) var(--sec-ink-pct), var(--ink)); }
  .eyebrow::before{ background: var(--sec, var(--accent)); }
  .head h2::after, .about-grid h2::after{
    content:""; display:block; width:58px; height:4px; border-radius:6px; margin-top:14px;
    background: var(--sec, var(--accent));
  }
  .contact-band h2::after{ background: var(--accent); }
  .card .idx, .pipe-step .num, .protocol-phase .count, .stat-item .num, .tl-row .d{
    color: color-mix(in srgb, var(--sec, var(--accent-ink)) var(--sec-ink-pct), var(--ink));
  }
  .res-card .ic, .ev-date, .fm-cat .tag, .dl-card .ic{
    background: color-mix(in srgb, var(--sec, var(--accent)) 15%, var(--paper-raised));
    border-color: color-mix(in srgb, var(--sec, var(--accent)) 42%, transparent);
    color: color-mix(in srgb, var(--sec, var(--accent-ink)) var(--sec-ink-pct), var(--ink));
  }
  /* per-card colour wins over the section-wide .ic colouring above */
  .res-grid .res-card .ic{
    background: var(--cc, var(--accent)); border-color: var(--cc, var(--accent)); color:#fff;
  }
  .ev-date .dd, .ev-date .mm{ color: color-mix(in srgb, var(--sec, var(--accent-ink)) var(--sec-ink-pct), var(--ink)); }
  #toolkit .tk-tabs button.active{ background: var(--sec); border-color: var(--sec); color:#fff; }
  .exec-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:0; }
  .exec-tabs button{ border:1px solid var(--line-soft); background:var(--paper-raised); color:var(--ink-soft); font-weight:600; font-size:.85rem; padding:.65em 1.2em; border-radius:20px; cursor:pointer; }
  .exec-tabs button.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  #execution .exec-tabs button.active{ background: var(--sec); border-color: var(--sec); color:#fff; }
  #protocol .protocol-progress .fill{ background: var(--sec); }
  #work .deliver-list li::before{
    background: color-mix(in srgb, var(--sec) 15%, var(--paper-raised));
    color: color-mix(in srgb, var(--sec) 80%, var(--ink));
  }
  .why-item .tick{ border-color: var(--sec, var(--accent)); }
  details.faq-item[open] summary .chev{ border-color: var(--sec, var(--accent)); }
  .proof-tag{ background: color-mix(in srgb, var(--sec, var(--accent)) 14%, var(--paper-raised)); }
  .phase-card .ph{
    background: color-mix(in srgb, var(--sec, var(--accent)) 14%, var(--paper-raised));
    border-color: color-mix(in srgb, var(--sec, var(--accent)) 42%, transparent);
    color: color-mix(in srgb, var(--sec, var(--accent-ink)) var(--sec-ink-pct), var(--ink));
  }
  .pipe-step::after{ background: transparent; }

  /* ===== Academic Press masthead — section headers, deep colour + gold accent =====
     Deliberately theme-invariant (like the fixed-navy bands below): the gold/navy
     accent pairing doesn't shift between light and dark, it just always sits on the
     section's own --sec colour. */
  .ap-head{
    background: var(--sec, var(--accent));
    border-radius: 16px;
    padding: 46px 44px 40px;
    margin-bottom: 40px;
    max-width: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--shadow);
  }
  .ap-head::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    opacity:.05;
    background-image: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px);
  }
  .ap-head > *{ position:relative; z-index:1; }
  .ap-head .eyebrow{
    color:rgba(255,255,255,.85); gap:.75em; letter-spacing:.14em; font-weight:600;
  }
  .ap-head .eyebrow::before{
    content: attr(data-mono);
    width:34px; height:34px; border-radius:50%; flex:none;
    border:1.5px solid rgba(255,255,255,.4); background:rgba(255,255,255,.1);
    display:inline-flex; align-items:center; justify-content:center;
    font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-weight:700; font-size:.92rem; color:#fff;
  }
  .ap-head h2{ color:#fff; font-size:clamp(2.05rem,3.6vw,2.85rem); max-width:27ch; font-style:normal; }
  .ap-head h2 .hl{
    display:inline; box-decoration-break:clone; -webkit-box-decoration-break:clone;
    background-image: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55));
    background-repeat:no-repeat; background-position:0 100%; background-size:100% 2px; padding-bottom:.1em;
  }
  .ap-head h2::after{
    content:""; display:block; width:56px; margin-top:22px; height:3px;
    background:rgba(255,255,255,.55); border-radius:6px;
  }
  .ap-head > p, .ap-head p{ color:rgba(255,255,255,.82); max-width:66ch; margin-top:22px; }
  .ap-head p a{ color:#fff; text-decoration-color:rgba(255,255,255,.55); }
  .ap-head p a:hover{ text-decoration-color:#fff; }
  @media (max-width:640px){
    .ap-head{ padding:34px 26px 30px; border-radius:14px; }
    .ap-head h2{ font-size:1.75rem; }
    .ap-head .eyebrow::before{ width:30px; height:30px; font-size:.82rem; }
  }

  /* fixed-navy bands: identical in light and dark themes */
  .viewbar{ background:#131f35; }
  .contact-band, .register-band, .fm-gate, .diff-punch, .flip-back{ background:#16233b; color:#eef1f6; }
  .contact-band h2, .register-band h2, .fm-gate h3{ color:#eef1f6; }
  .contact-row a, .reg-box .v, .diff-punch p{ color:#eef1f6; }
  .enq-form input, .enq-form textarea, .fm-gate-form input{ color:#eef1f6; }
  .contact-band .btn-primary, .register-band .btn-accent{ background:var(--accent); color:#fff; }

  /* ===== rainbow scroll progress ===== */
  .scroll-progress{ position:fixed; top:0; left:0; right:0; height:4px; z-index:95; pointer-events:none; }
  .scroll-progress i{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left;
    background:linear-gradient(90deg,#3d5a80,#2f7a72,#5158a6,#a8752a,#3c7a5c,#96524f,#7a4a7d,#b3591c,#2b6f8a,#5f7a34,#963d55,#2e5fb3,#6b4fa8,#8a6d3b,#55607a); }
  /* ===== scroll-spy nav ===== */
  nav.links a{ border-bottom:2px solid transparent; padding-bottom:2px; transition:color .15s ease; }
  nav.links a.spy-on{ color:var(--spy, var(--ink)); border-bottom-color:var(--spy, var(--accent)); font-weight:600; }
  /* colour each nav link to its own section — same 15-hue palette as the mastheads —
     so hovering (or the active/spy-on link) lights up with that section's colour + glow */
  nav.links a[href="/about"]{ --nc:#3d5a80; }
  nav.links a[href="/process"]{ --nc:#2f7a72; }
  nav.links a[href="/services"]{ --nc:#5158a6; }
  nav.links a[href="/event-types"]{ --nc:#c2701e; }
  nav.links a[href="/naac"]{ --nc:#a8752a; }
  nav.links a[href="/protocol"]{ --nc:#3c7a5c; }
  nav.links a[href="/execution"]{ --nc:#5c4a8a; }
  nav.links a[href="/food-beverage"]{ --nc:#c4483f; }
  nav.links a[href="/media"]{ --nc:#1f7a6b; }
  nav.links a[href="/showcase"]{ --nc:#7a4a7d; }
  nav.links a[href="/budget"]{ --nc:#b3591c; }
  nav.links a[href="/toolkit"]{ --nc:#2b6f8a; }
  nav.links a[href="/resources"]{ --nc:#5f7a34; }
  nav.links a[href="/download"]{ --nc:#963d55; }
  nav.links a[href="/events"]{ --nc:#2e5fb3; }
  nav.links a[href="/register"]{ --nc:#b0305c; }
  nav.links a[href="/platform"]{ --nc:#6b4fa8; }
  nav.links a[href^="/"]:not(.btn):hover, nav.links a[href^="/"]:not(.btn):focus-visible{
    color: var(--nc, var(--accent));
  }
  nav.links a.btn.btn-ghost.btn-sm{
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
    transition: box-shadow .2s ease, color .2s ease;
  }
  nav.links a.btn.btn-ghost.btn-sm:hover, nav.links a.btn.btn-ghost.btn-sm:focus-visible{
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--accent-ink);
  }
  /* ===== hero eyebrow badge — colourful, since the hero has no section colour ===== */
  .hero .eyebrow{
    background: color-mix(in srgb, var(--accent) 16%, var(--paper-raised));
    border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    border-radius: 20px;
    padding: .45em 1.1em .45em .8em;
  }
  /* ===== budget donut ===== */
  .donut-wrap{ position:relative; width:150px; margin:4px auto 16px; }
  .donut-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
  .donut-center .dl{ font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
  .donut-center .dv{ font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:1.05rem; font-weight:600; color:var(--ink); }
  .bd-dot{ display:inline-block; width:9px; height:9px; border-radius:6px; margin-right:8px; flex:none; vertical-align:baseline; }
  /* ===== confetti + done state ===== */
  #protocol{ overflow:hidden; }
  .cf-piece{ position:absolute; width:8px; height:13px; top:-24px; border-radius:6px; pointer-events:none; z-index:5; }
  .protocol-done{ background:var(--good-soft); border:1px solid var(--good-line); color:var(--good); border-radius:14px;
    padding:14px 18px; margin-bottom:22px; font-size:.92rem; font-weight:600; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .protocol-done a{ color:var(--good); font-weight:600; }

  /* ===== NAAC documentation procedure walkthrough ===== */
  #naacproc{ --sec:#7d4522; }
  .np-steps{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
  .np-steps button{ flex:1; min-width:130px; border:1px solid var(--line-soft); border-top-width:3px; background:var(--paper-raised); border-radius:14px;
    padding:12px 10px; cursor:pointer; text-align:left; transition:transform .15s ease, background .15s ease, border-color .15s ease; }
  .np-steps button:hover{ transform:translateY(-2px); background:color-mix(in srgb, var(--cc, var(--sec)) 10%, var(--paper-raised)); }
  .np-steps button .n{ font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.06em; color:var(--ink-faint); display:block; }
  .np-steps button .t{ font-weight:600; font-size:.88rem; color:var(--ink); }
  .np-steps button.active{ border-color:var(--cc, var(--sec)); background:color-mix(in srgb, var(--cc, var(--sec)) 14%, var(--paper-raised)); }
  .np-steps button.active .n{ color:var(--cc, var(--sec)); }
  .np-steps button.active .t{ color:var(--cc, var(--sec)); }
  .np-steps button.done{ border-top-color:var(--cc, var(--good)); }
  .np-steps button.done .n::after{ content:" ✓"; color:var(--cc, var(--good)); }
  /* colour-cycle the six wizard steps and their matching folders, tied by the shared data-np / data-fo index */
  .np-steps button[data-np="0"]{ --cc:#3d5a80; }
  .np-steps button[data-np="1"]{ --cc:#3c7a5c; }
  .np-steps button[data-np="2"]{ --cc:#c2701e; }
  .np-steps button[data-np="3"]{ --cc:#5158a6; }
  .np-steps button[data-np="4"]{ --cc:#7a4a7d; }
  .np-steps button[data-np="5"]{ --cc:#963d55; }
  .np-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:22px; align-items:start; }
  .np-detail{ background:var(--paper-raised); border:1px solid var(--line-soft); border-left:4px solid var(--cc, var(--sec)); border-radius:14px; box-shadow:var(--shadow); padding:26px 28px; transition:border-color .2s ease; }
  .np-detail h3{ font-size:1.15rem; margin-bottom:8px; color:var(--cc, var(--ink)); }
  .np-detail .crit{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--cc, var(--sec)); background:color-mix(in srgb, var(--cc, var(--sec)) 12%, var(--paper-raised)); border:1px solid color-mix(in srgb, var(--cc, var(--sec)) 40%, transparent); border-radius:8px; padding:3px 9px; display:inline-block; margin-bottom:12px; }
  .np-detail p{ font-size:.9rem; color:var(--ink-soft); margin-bottom:14px; }
  .np-detail ul{ margin:0; padding-left:18px; font-size:.87rem; color:var(--ink-soft); }
  .np-detail ul li + li{ margin-top:6px; }
  .np-nav{ display:flex; gap:10px; margin-top:20px; }
  .np-tree{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:14px; box-shadow:var(--shadow); padding:20px 22px; font-family:"IBM Plex Mono",monospace; font-size:.74rem; line-height:2; color:var(--ink-faint); }
  .np-tree .hd{ font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; color:var(--ink-soft); }
  .np-tree .fo{ opacity:.45; transition:opacity .3s ease, color .2s ease; }
  .np-tree .fo.on{ opacity:1; color:var(--cc, var(--ink)); }
  .np-tree .fo.on::after{ content:" ✓"; color:var(--cc, var(--good)); font-weight:700; }
  .np-tree .fo.now{ color:var(--cc, var(--sec)); font-weight:600; }
  .np-tree .fo[data-fo="0"], .np-tree .fo[data-fo="1"]{ --cc:#3d5a80; }
  .np-tree .fo[data-fo="2"], .np-tree .fo[data-fo="3"]{ --cc:#3c7a5c; }
  .np-tree .fo[data-fo="4"], .np-tree .fo[data-fo="5"], .np-tree .fo[data-fo="6"], .np-tree .fo[data-fo="7"]{ --cc:#c2701e; }
  .np-tree .fo[data-fo="8"], .np-tree .fo[data-fo="9"], .np-tree .fo[data-fo="10"]{ --cc:#5158a6; }
  .np-tree .fo[data-fo="11"], .np-tree .fo[data-fo="12"]{ --cc:#7a4a7d; }
  .np-tree .fo[data-fo="13"], .np-tree .fo[data-fo="14"]{ --cc:#963d55; }
  .np-complete{ display:none; margin-top:14px; background:var(--good-soft); border:1px solid var(--good-line); color:var(--good); border-radius:10px; padding:12px 15px; font-family:"Work Sans"; font-size:.84rem; font-weight:600; }
  @media (max-width:880px){ .np-grid{ grid-template-columns:1fr; } }



  /* ===== budget planner — restored expanded add-on catalogue, customization panel, reordering, print letterhead ===== */
  .toggle-row .num-inline.num-amt{ width:88px; }
  .toggle-row.toggle-row-static{ cursor:default; }
  .toggle-row-static > span:first-child{ color:var(--ink); font-weight:600; }
  .toggle-row .num-stepper{ display:flex; align-items:center; gap:4px; margin-left:auto; }
  .toggle-row .num-stepper .num-inline{ width:34px; padding:.3em .2em; text-align:center; margin-left:0; -moz-appearance:textfield; appearance:textfield; }
  .toggle-row .num-stepper .num-inline::-webkit-inner-spin-button,
  .toggle-row .num-stepper .num-inline::-webkit-outer-spin-button{ -webkit-appearance:none; appearance:none; margin:0; }
  .num-btn{ width:22px; height:22px; flex:none; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-soft); border-radius:6px; background:var(--paper); color:var(--ink); font-size:.9rem; font-weight:700; line-height:1; cursor:pointer; }
  .num-btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .num-btn:active{ transform:scale(.94); }

  .custom-items{ display:flex; flex-direction:column; gap:10px; }
  .custom-item-row{ display:flex; align-items:center; gap:8px; }
  .custom-item-row .custom-item-label{ flex:1; min-width:0; padding:.3em .5em; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink-soft); font-size:.87rem; font-family:inherit; }
  .custom-item-row .custom-item-label:focus{ border-color:var(--line-soft); background:var(--paper); outline:none; }
  .custom-item-row .custom-item-remove{ flex:none; width:20px; height:20px; border:none; background:transparent; color:var(--ink-faint); cursor:pointer; font-size:1rem; line-height:1; }
  .custom-item-row .custom-item-remove:hover{ color:var(--crit); }
  .custom-item-add{ display:flex; gap:8px; margin-top:2px; flex-wrap:wrap; }
  .custom-item-add input[type="text"]{ flex:1; min-width:120px; padding:.4em .6em; border:1px solid var(--line-soft); border-radius:6px; background:var(--paper); color:var(--ink); font-size:.82rem; }
  .custom-item-add input[type="number"]{ width:100px; padding:.4em .6em; border:1px solid var(--line-soft); border-radius:6px; background:var(--paper); color:var(--ink); font-size:.82rem; }

  .budget-customize{ margin:4px 0 18px; border:1px solid var(--line-soft); border-radius:8px; background:var(--paper); }
  .budget-customize summary{ cursor:pointer; padding:10px 14px; font-size:.82rem; font-weight:600; color:var(--ink); list-style:none; display:flex; align-items:center; gap:6px; }
  .budget-customize summary::-webkit-details-marker{ display:none; }
  .budget-customize summary::before{ content:"▸"; font-size:.7rem; color:var(--ink-faint); transition:transform .15s ease; display:inline-block; }
  .budget-customize[open] summary::before{ transform:rotate(90deg); }
  .customize-grid{ padding:2px 14px 16px; display:flex; flex-direction:column; gap:14px; }
  .customize-grid .field{ display:flex; flex-direction:column; gap:5px; }
  .customize-grid label{ font-size:.78rem; color:var(--ink-soft); font-weight:600; }
  .customize-grid .opt{ font-weight:400; color:var(--ink-faint); }
  .customize-grid input[type="text"], .customize-grid input[type="date"]{ padding:.5em .6em; border:1px solid var(--line-soft); border-radius:6px; background:var(--paper); color:var(--ink); font-size:.85rem; }
  .customize-grid .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .cz-inline-pair{ display:flex; align-items:center; gap:6px; }
  .cz-inline-pair input[type="number"]{ width:70px; padding:.4em .5em; border:1px solid var(--line-soft); border-radius:6px; background:var(--paper); color:var(--ink); font-size:.85rem; }
  .cz-inline-pair select{ padding:.4em .3em; border:1px solid var(--line-soft); border-radius:6px; background:var(--paper); color:var(--ink); font-size:.82rem; }
  .cz-inline-pair input[type="checkbox"]{ accent-color:var(--accent); width:16px; height:16px; }
  .cz-suffix{ font-size:.82rem; color:var(--ink-faint); }
  .cz-check-label{ display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:600; font-size:.82rem; color:var(--ink); }
  .cz-check-label input{ accent-color:var(--accent); width:16px; height:16px; }
  .customize-grid input[type="color"]{ width:52px; height:30px; padding:0; border:1px solid var(--line-soft); border-radius:6px; background:var(--paper); cursor:pointer; }
  .cz-logo-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .cz-logo-row input[type="file"]{ font-size:.78rem; max-width:220px; }
  .cz-logo-preview{ display:flex; align-items:center; gap:8px; }
  .cz-logo-preview img{ max-height:32px; max-width:100px; border:1px solid var(--line-soft); border-radius:6px; background:#fff; padding:2px; }

  .budget-row{ position:relative; padding-right:30px; }
  .row-reorder{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:1px; }
  .row-btn{ width:16px; height:14px; padding:0; border:none; background:transparent; color:var(--ink-faint); font-size:.6rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .row-btn:hover{ color:var(--accent); }
  .budget-row.discount .amt{ color:var(--good); }
  .budget-row.gst .amt{ color:var(--ink-soft); }

  .budget-note-wrap{ display:flex; align-items:flex-start; gap:8px; margin-top:14px; }
  .budget-note-wrap .budget-note{ flex:1; margin-top:0; font-family:inherit; border:1px solid transparent; border-radius:6px; padding:4px 6px; resize:vertical; background:transparent; }
  .budget-note-wrap .budget-note:focus{ border-color:var(--line-soft); background:var(--paper); outline:none; color:var(--ink-soft); }
  .note-reset{ flex:none; border:none; background:transparent; color:var(--ink-faint); font-size:.72rem; cursor:pointer; padding:4px 0; white-space:nowrap; }
  .note-reset:hover{ color:var(--accent); }

  .budget-result .eyebrow{ color:var(--budget-accent, var(--accent-ink)); }
  .budget-result .btn-primary{ background:var(--budget-accent, var(--accent)); border-color:var(--budget-accent, var(--accent)); }
  .budget-total .amt{ color:var(--budget-accent, var(--accent-ink)); }
  .donut-center .dv{ color:var(--budget-accent, var(--ink)); }
  .print-letterhead{ display:none; }
  .print-letterhead[hidden]{ display:none; }


  /* ===== budget planner — smart suggestion nudge ===== */
  .nudge{ display:flex; gap:10px; align-items:flex-start; background:var(--accent-soft); border:1px solid var(--accent-soft-line); border-radius:8px; padding:12px 34px 12px 14px; position:relative; }
  .nudge-x{ position:absolute; top:8px; right:8px; width:20px; height:20px; border:none; background:transparent; color:var(--accent-ink); opacity:.6; font-size:1rem; line-height:1; cursor:pointer; }
  .nudge-x:hover{ opacity:1; }
  .nudge-ic{ flex:none; color:var(--accent-ink); margin-top:1px; }
  .nudge-lbl{ font-family:"IBM Plex Mono",monospace; font-size:.64rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-ink); }
  .nudge-text{ font-size:.83rem; color:var(--ink); margin-top:3px; line-height:1.5; }
  .pill-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
  .add-pill{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; font-weight:600; color:var(--accent-ink); background:var(--paper-raised); border:1px solid var(--accent-soft-line); border-radius:20px; padding:5px 11px; cursor:pointer; }
  .add-pill:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

  /* ===== budget planner — saved templates ===== */
  .saved-list{ display:flex; flex-direction:column; gap:8px; }
  .saved-empty{ font-size:.8rem; color:var(--ink-faint); }
  .saved-item{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line-soft); border-radius:6px; background:var(--paper-raised); }
  .saved-item .si-info{ flex:1; min-width:0; }
  .saved-item .si-name{ font-size:.83rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .saved-item .si-meta{ font-size:.7rem; color:var(--ink-faint); margin-top:1px; }
  .saved-item .si-actions{ display:flex; gap:6px; flex:none; }
  .saved-add-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .saved-add-row input[type="text"]{ flex:1; min-width:160px; padding:.5em .6em; border:1px solid var(--line-soft); border-radius:6px; background:var(--paper); color:var(--ink); font-size:.85rem; }

  /* ===== budget planner — payment milestones ===== */
  .milestone-row{ display:flex; align-items:center; gap:10px; }
  .ms-label{ flex:1; min-width:0; font-size:.82rem; color:var(--ink); font-weight:600; }
  .ms-label .opt{ display:block; font-weight:400; margin-top:1px; }
  .ms-amt{ flex:none; font-family:"IBM Plex Mono",monospace; font-size:.85rem; color:var(--ink); min-width:80px; text-align:right; }

  /* ===== budget planner — share link ===== */
  .share-panel{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); }
  .link-row{ display:flex; gap:8px; }
  .share-link-input{ flex:1; min-width:0; padding:.5em .6em; border:1px solid var(--line-soft); border-radius:6px; background:var(--paper); color:var(--ink-soft); font-size:.8rem; font-family:"IBM Plex Mono",monospace; }

  @media print{
    .wa-float{ display:none !important; }
    .budget-form, .budget-customize, .budget-actions, .row-reorder, .note-reset, .nudge, .share-panel{ display:none !important; }
    .budget-tool{ grid-template-columns:1fr !important; box-shadow:none !important; border:none !important; }
    .budget-result{ padding:0 !important; }
    .print-letterhead:not([hidden]){ display:flex !important; align-items:center; gap:14px; padding-bottom:14px; margin-bottom:16px; border-bottom:2px solid var(--budget-accent, var(--accent)); }
    .pl-logo{ max-height:56px; max-width:140px; }
    .pl-org{ font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:1.2rem; font-weight:700; color:#111; }
    .pl-event{ font-size:.95rem; color:#333; margin-top:2px; }
    .pl-meta{ font-size:.78rem; color:#555; margin-top:2px; }
  }
  @media (max-width:880px){
    .customize-grid .two-col{ grid-template-columns:1fr; }
  }

  /* ===== execution checklist item badges — who (Topic Engine / College-RP) + when (Pre / Event Day / Post) ===== */
  #execution .step-title{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; }
  :root{ --rp:#b45309; --rp-soft:#fef3e2; --rp-line:#f3d19b; }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --rp:#fbbf24; --rp-soft:#3a2a0f; --rp-line:#6b4e1f; } }
  :root[data-theme="dark"]{ --rp:#fbbf24; --rp-soft:#3a2a0f; --rp-line:#6b4e1f; }
  .item-badges{ display:inline-flex; gap:5px; flex-wrap:wrap; }
  .badge-who, .badge-when{
    display:inline-flex; align-items:center; font-family:"IBM Plex Mono",monospace;
    font-size:.6rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
    padding:2px 8px; border-radius:20px; line-height:1.6; white-space:nowrap;
  }
  .badge-who.bw-te{ background:var(--accent-soft); color:var(--accent-ink); border:1px solid var(--accent-soft-line); }
  .badge-who.bw-college{ background:var(--good-soft); color:var(--good); border:1px solid var(--good-line); }
  .badge-who.bw-rp{ background:var(--rp-soft); color:var(--rp); border:1px solid var(--rp-line); }
  .badge-when{ background:var(--paper-band); color:var(--ink-soft); border:1px solid var(--line-soft); }
  #execution .approval-chips .chip .item-badges,
  #execution .kit-cols li .item-badges,
  #execution .rp-row .item-badges,
  #execution .duty-grid .item-badges{ margin-left:8px; vertical-align:middle; }
  #execution .runsheet-table .item-badges{ margin-left:6px; }
  @media print{
    .item-badges{ display:none !important; }
  }

  /* ===== budget add-on list grouping ===== */
  .toggle-group-label{ display:flex; align-items:center; gap:8px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-ink); margin:20px 0 8px; padding:7px 12px; border-radius:8px; border-left:4px solid var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--paper)); }
  .toggle-group-label:first-child{ margin-top:0; }
  .toggle-group-label::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
  .cater-heads{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:4px 0 10px; }
  .cater-head-item{ display:flex; flex-direction:column; gap:4px; }
  .cater-head-item label{ font-size:.72rem; color:var(--ink-soft); }
  .cater-head-item input[type="number"]{ width:100%; padding:.4em .5em; border:1px solid var(--line-soft); border-radius:8px; background:var(--paper); color:var(--ink); font-size:.85rem; }
  .cater-head-auto .cater-head-val{ display:block; padding:.4em .5em; border:1px dashed var(--line-soft); border-radius:8px; background:var(--paper-band); color:var(--ink-soft); font-size:.85rem; }
  .cater-head-note{ font-weight:400; color:var(--ink-faint); text-transform:none; letter-spacing:0; }
  .cater-matrix-hint{ font-size:.76rem; color:var(--ink-faint); margin:0 0 10px; }
  .cater-matrix-wrap{ overflow-x:auto; margin-bottom:6px; -webkit-overflow-scrolling:touch; border:1px solid var(--line-soft); border-radius:12px; min-width:0; max-width:100%; }
  .cm-table{ width:100%; border-collapse:collapse; font-size:.82rem; min-width:520px; }
  .cm-table th, .cm-table td{ padding:6px 8px; border-bottom:1px solid var(--line-soft); text-align:left; }
  .cm-table thead th{ font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:700; white-space:nowrap; background:var(--paper-band); }
  .cm-table tbody th{ font-weight:400; color:var(--ink-soft); white-space:nowrap; }
  .cm-table tbody tr:last-child td, .cm-table tbody tr:last-child th{ border-bottom:none; }
  .cm-cell{ display:flex; align-items:center; gap:6px; cursor:pointer; }
  .cm-rate{ width:60px; padding:.3em .4em; border:1px solid var(--line-soft); border-radius:6px; background:var(--paper); color:var(--ink); font-size:.8rem; }
  .cm-table tbody tr:hover{ background:var(--paper-band); }
  @media (max-width: 640px){ .cater-heads{ grid-template-columns:repeat(2,1fr); } }

  /* ===== catering matrix — colour-code the 4 categories (RP / Presenters / Delegates / Audience)
     so the eye can track a column at a glance; soft tints derive from --paper via color-mix so
     they stay correct automatically in dark mode too. ===== */
  :root{
    --cat-rp:#6d28d9; --cat-rp-soft: color-mix(in srgb, var(--cat-rp) 14%, var(--paper));
    --cat-pres:#0891b2; --cat-pres-soft: color-mix(in srgb, var(--cat-pres) 14%, var(--paper));
    --cat-del:#d97706; --cat-del-soft: color-mix(in srgb, var(--cat-del) 14%, var(--paper));
    --cat-aud:#db2777; --cat-aud-soft: color-mix(in srgb, var(--cat-aud) 14%, var(--paper));
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){ --cat-rp:#a78bfa; --cat-pres:#22d3ee; --cat-del:#fbbf24; --cat-aud:#f472b6; }
  }
  :root[data-theme="dark"]{ --cat-rp:#a78bfa; --cat-pres:#22d3ee; --cat-del:#fbbf24; --cat-aud:#f472b6; }
  .cater-head-item:nth-child(1){ border-left:3px solid var(--cat-rp); padding-left:8px; }
  .cater-head-item:nth-child(2){ border-left:3px solid var(--cat-pres); padding-left:8px; }
  .cater-head-item:nth-child(3){ border-left:3px solid var(--cat-del); padding-left:8px; }
  .cater-head-item:nth-child(4){ border-left:3px solid var(--cat-aud); padding-left:8px; }
  .cater-head-item:nth-child(1) label{ color:var(--cat-rp); font-weight:600; }
  .cater-head-item:nth-child(2) label{ color:var(--cat-pres); font-weight:600; }
  .cater-head-item:nth-child(3) label{ color:var(--cat-del); font-weight:600; }
  .cater-head-item:nth-child(4) label{ color:var(--cat-aud); font-weight:600; }
  .cater-matrix-wrap{ position:relative; }
  .cater-matrix-wrap::before{ content:""; display:block; height:4px; background:linear-gradient(90deg, var(--cat-rp), var(--cat-pres), var(--cat-del), var(--cat-aud)); }
  .cm-table thead th:nth-child(2), .cm-table tbody td:nth-child(2){ background:var(--cat-rp-soft); }
  .cm-table thead th:nth-child(3), .cm-table tbody td:nth-child(3){ background:var(--cat-pres-soft); }
  .cm-table thead th:nth-child(4), .cm-table tbody td:nth-child(4){ background:var(--cat-del-soft); }
  .cm-table thead th:nth-child(5), .cm-table tbody td:nth-child(5){ background:var(--cat-aud-soft); }
  .cm-table thead th:nth-child(2){ color:var(--cat-rp); }
  .cm-table thead th:nth-child(3){ color:var(--cat-pres); }
  .cm-table thead th:nth-child(4){ color:var(--cat-del); }
  .cm-table thead th:nth-child(5){ color:var(--cat-aud); }
  .cm-table tbody td:nth-child(2) input[type="checkbox"]{ accent-color:var(--cat-rp); }
  .cm-table tbody td:nth-child(3) input[type="checkbox"]{ accent-color:var(--cat-pres); }
  .cm-table tbody td:nth-child(4) input[type="checkbox"]{ accent-color:var(--cat-del); }
  .cm-table tbody td:nth-child(5) input[type="checkbox"]{ accent-color:var(--cat-aud); }
  .cater-head-auto .cater-head-val{ border-left:3px solid var(--cat-aud); color:var(--cat-aud); font-weight:600; }

  /* ===== global interaction polish — hover/focus states on list & table rows ===== */
  .toggle-row:hover{ background:var(--paper-band); color:var(--ink); }
  .budget-row:hover{ background:var(--paper-band); }
  .toggle-row input:focus-visible, .toggle-row .num-inline:focus-visible, .num-stepper button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  /* ===== colour-code each add-on group's header (data-group already carries the
     group identity, so we key off it directly) — soft border tints derive from
     each hue via color-mix so they stay readable in dark mode automatically. ===== */
  :root{
    --grp-resource:#4f46e5; --grp-travel:#059669; --grp-creative:#db2777; --grp-onsite:#ea580c;
    --grp-stage:#9333ea; --grp-catering:#0891b2; --grp-payments:#ca8a04; --grp-custom:#64748b;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --grp-resource:#818cf8; --grp-travel:#34d399; --grp-creative:#f472b6; --grp-onsite:#fb923c;
      --grp-stage:#c084fc; --grp-catering:#22d3ee; --grp-payments:#fbbf24; --grp-custom:#94a3b8;
    }
  }
  :root[data-theme="dark"]{
    --grp-resource:#818cf8; --grp-travel:#34d399; --grp-creative:#f472b6; --grp-onsite:#fb923c;
    --grp-stage:#c084fc; --grp-catering:#22d3ee; --grp-payments:#fbbf24; --grp-custom:#94a3b8;
  }
  .toggle-group-label[data-group="resource"]{ color:var(--grp-resource); border-left-color:var(--grp-resource); background:color-mix(in srgb, var(--grp-resource) 14%, var(--paper)); }
  .toggle-group-label[data-group="resource"]::before{ background:var(--grp-resource); box-shadow:0 0 0 3px color-mix(in srgb, var(--grp-resource) 28%, transparent); }
  .toggle-group-label[data-group="travel"]{ color:var(--grp-travel); border-left-color:var(--grp-travel); background:color-mix(in srgb, var(--grp-travel) 14%, var(--paper)); }
  .toggle-group-label[data-group="travel"]::before{ background:var(--grp-travel); box-shadow:0 0 0 3px color-mix(in srgb, var(--grp-travel) 28%, transparent); }
  .toggle-group-label[data-group="creative"]{ color:var(--grp-creative); border-left-color:var(--grp-creative); background:color-mix(in srgb, var(--grp-creative) 14%, var(--paper)); }
  .toggle-group-label[data-group="creative"]::before{ background:var(--grp-creative); box-shadow:0 0 0 3px color-mix(in srgb, var(--grp-creative) 28%, transparent); }
  .toggle-group-label[data-group="onsite"]{ color:var(--grp-onsite); border-left-color:var(--grp-onsite); background:color-mix(in srgb, var(--grp-onsite) 14%, var(--paper)); }
  .toggle-group-label[data-group="onsite"]::before{ background:var(--grp-onsite); box-shadow:0 0 0 3px color-mix(in srgb, var(--grp-onsite) 28%, transparent); }
  .toggle-group-label[data-group="stage"]{ color:var(--grp-stage); border-left-color:var(--grp-stage); background:color-mix(in srgb, var(--grp-stage) 14%, var(--paper)); }
  .toggle-group-label[data-group="stage"]::before{ background:var(--grp-stage); box-shadow:0 0 0 3px color-mix(in srgb, var(--grp-stage) 28%, transparent); }
  .toggle-group-label[data-group="catering"]{ color:var(--grp-catering); border-left-color:var(--grp-catering); background:color-mix(in srgb, var(--grp-catering) 14%, var(--paper)); }
  .toggle-group-label[data-group="catering"]::before{ background:var(--grp-catering); box-shadow:0 0 0 3px color-mix(in srgb, var(--grp-catering) 28%, transparent); }
  .toggle-group-label[data-group="payments"]{ color:var(--grp-payments); border-left-color:var(--grp-payments); background:color-mix(in srgb, var(--grp-payments) 14%, var(--paper)); }
  .toggle-group-label[data-group="payments"]::before{ background:var(--grp-payments); box-shadow:0 0 0 3px color-mix(in srgb, var(--grp-payments) 28%, transparent); }
  .toggle-group-label[data-group="custom"]{ color:var(--grp-custom); border-left-color:var(--grp-custom); background:color-mix(in srgb, var(--grp-custom) 14%, var(--paper)); }
  .toggle-group-label[data-group="custom"]::before{ background:var(--grp-custom); box-shadow:0 0 0 3px color-mix(in srgb, var(--grp-custom) 28%, transparent); }

  :root{
    --fld-event:#2563eb; --fld-standard:#0d9488; --fld-intl:#c026d3; --fld-participants:#e11d48;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){ --fld-event:#60a5fa; --fld-standard:#2dd4bf; --fld-intl:#e879f9; --fld-participants:#fb7185; }
  }
  :root[data-theme="dark"]{ --fld-event:#60a5fa; --fld-standard:#2dd4bf; --fld-intl:#e879f9; --fld-participants:#fb7185; }
  .field label.field-label-hl{ font-weight:800; padding:5px 10px; border-radius:7px; border-left:4px solid var(--fld-accent, var(--accent)); background:color-mix(in srgb, var(--fld-accent, var(--accent)) 14%, var(--paper)); color:var(--fld-accent, var(--ink)); }
  .field-label-hl[data-field="event-type"]{ --fld-accent: var(--fld-event); }
  .field-label-hl[data-field="standard"]{ --fld-accent: var(--fld-standard); }
  .field-label-hl[data-field="intl-fee"]{ --fld-accent: var(--fld-intl); }
  .field-label-hl[data-field="participants"]{ --fld-accent: var(--fld-participants); }

  /* ===== bugfix: elements that set their own `display` (flex/grid/etc.) via a
     class selector silently defeat the browser's default [hidden]{display:none}
     rule, because same-specificity author CSS always beats the UA stylesheet
     regardless of source order. Concretely this made the "hidden" toggle-row for
     International resource-person honorarium (and the smart-suggestion nudge's
     dismiss button) stay visually visible even after JS set .hidden = true. This
     rule guarantees [hidden] always wins, for every element, everywhere. ===== */
  [hidden]{ display:none !important; }
  /* ===== generic item popup — every ".faq-item" (execution/protocol/faq/format-library)
     opens its content in a modal instead of expanding inline; the click-intercept and
     modal markup live in site.js (see JS_RANGES in build_multipage.py). ===== */
  .item-popup-overlay{ position:fixed; inset:0; background:rgba(15,20,30,.55); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:24px; z-index:400; }
  .item-popup-overlay[hidden]{ display:none; }
  .item-popup{ background:var(--paper-raised); color:var(--ink); width:100%; max-width:620px; max-height:86vh; overflow-y:auto; border-radius:16px; box-shadow:0 24px 60px -20px rgba(15,20,30,.45); position:relative; padding:30px 30px 24px; }
  .item-popup-close{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:1px solid var(--line-soft); background:var(--paper-raised); color:var(--ink-soft); font-size:1.2rem; line-height:1; cursor:pointer; }
  .item-popup-close:hover{ background:var(--paper-sunk); }
  .item-popup-title{ font-family:"Work Sans",sans-serif; font-weight:700; font-size:1.08rem; margin:0 34px 16px 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
  .item-popup-title .item-badges{ margin-left:0 !important; }
  .item-popup-body{ font-size:.92rem; line-height:1.7; color:var(--ink-soft); }
  .item-popup-body .faq-a{ padding:0; font-size:.92rem; }
  .item-popup-body .fmt-pre{ margin-left:0; margin-right:0; }
  .item-popup-body .fmt-actions{ padding-left:0; padding-right:0; }
  @media (max-width:560px){ .item-popup{ padding:24px 18px 18px; } }
  @media print{ .item-popup-overlay{ display:none !important; } }
  .res-card .item-badges{ margin-top:-4px; }

  /* ===== colour-cycled Home "Explore Seminar" site-map cards ===== */
  #sitemap-cards.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  #sitemap-cards .card{ display:block; text-decoration:none; border-top-width:4px; transition:transform .15s ease, background .15s ease, border-color .15s ease; }
  #sitemap-cards .card:hover{ transform:translateY(-3px); }
  #sitemap-cards .card:nth-child(1){ --cc:#3d5a80; }
  #sitemap-cards .card:nth-child(2){ --cc:#2f7a72; }
  #sitemap-cards .card:nth-child(3){ --cc:#5158a6; }
  #sitemap-cards .card:nth-child(4){ --cc:#c2701e; }
  #sitemap-cards .card:nth-child(5){ --cc:#a8752a; }
  #sitemap-cards .card:nth-child(6){ --cc:#3c7a5c; }
  #sitemap-cards .card:nth-child(7){ --cc:#5c4a8a; }
  #sitemap-cards .card:nth-child(8){ --cc:#c4483f; }
  #sitemap-cards .card:nth-child(9){ --cc:#8a6a2e; }
  #sitemap-cards .card:nth-child(10){ --cc:#1f7a6b; }
  #sitemap-cards .card:nth-child(11){ --cc:#7a4a7d; }
  #sitemap-cards .card:nth-child(12){ --cc:#b3591c; }
  #sitemap-cards .card:nth-child(13){ --cc:#2b6f8a; }
  #sitemap-cards .card:nth-child(14){ --cc:#5f7a34; }
  #sitemap-cards .card:nth-child(15){ --cc:#963d55; }
  #sitemap-cards .card:nth-child(16){ --cc:#2e5fb3; }
  #sitemap-cards .card:nth-child(17){ --cc:#b0305c; }
  #sitemap-cards .card:nth-child(18){ --cc:#6b4fa8; }
  #sitemap-cards .card{
    border-color: color-mix(in srgb, var(--cc, var(--accent)) 40%, var(--line-soft));
    border-top-color: var(--cc, var(--accent));
    background: color-mix(in srgb, var(--cc, var(--accent)) 9%, var(--paper-raised));
  }
  #sitemap-cards .card:hover{
    background: color-mix(in srgb, var(--cc, var(--accent)) 18%, var(--paper-raised));
    border-color: var(--cc, var(--accent));
  }
  #sitemap-cards .card h3{ color: var(--cc, var(--accent)); }
  #sitemap-cards .card .idx{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%; margin-bottom:2px;
    background: var(--cc, var(--accent)); color:#fff; font-weight:700; font-size:.72rem;
  }
  @media (max-width:880px){ #sitemap-cards.cards{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ #sitemap-cards.cards{ grid-template-columns:1fr; } }

  /* ===== nav v2 — mega-menu header + mobile drawer (Phase 1 nav redesign) ===== */
  .nav-hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; border:1px solid var(--line-soft); border-radius:8px; background:var(--paper-raised); flex:none; }
  .nav-hamburger span{ display:block; width:18px; height:2px; background:var(--ink); margin:0 auto; border-radius:2px; }

  nav.nav-v2{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
  .nav-v2 .nav-item{ font-size:.84rem; font-weight:500; color:var(--ink-soft); padding:9px 11px; border-radius:7px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; text-decoration:none; background:none; border:none; cursor:pointer; font-family:inherit; }
  .nav-v2 .nav-item:hover{ color:var(--ink); background:var(--paper-sunk); }
  .nav-v2 .nav-item.spy-on{ background:var(--paper-sunk); color:var(--spy,var(--ink)); box-shadow:inset 0 -2px 0 var(--spy,var(--accent)); }
  .nav-v2 .nav-trigger.et{ font-weight:600; }
  .nav-v2 .car{ font-size:.6rem; opacity:.6; transition:transform .15s ease; }
  .nav-menu{ position:relative; }
  .nav-menu.open > .nav-trigger{ background:var(--paper-sunk); color:var(--et,var(--ink)); box-shadow:inset 0 -2px 0 var(--et,var(--accent)); }
  .nav-menu.open > .nav-trigger .car{ transform:rotate(180deg); color:var(--et,var(--ink)); }
  .nav-v2 .nav-cta{ margin-left:6px; flex:none; }

  .mm-panel{ display:none; position:absolute; top:100%; left:0; min-width:640px; background:var(--paper-raised); border-top:3px solid var(--mm-hue,var(--accent)); box-shadow:0 18px 44px -18px rgba(15,15,20,.28); border-radius:0 0 12px 12px; z-index:30; }
  .nav-menu.open .mm-panel{ display:block; }
  .mm-grid{ display:grid; gap:0; padding:26px 24px 22px; }
  .mm-grid--4{ grid-template-columns:1fr 1.2fr 1.3fr 1fr; }
  .mm-grid--3{ grid-template-columns:repeat(3,1fr); min-width:520px; }
  .mm-col{ padding:0 22px; border-right:1px solid var(--line-soft); display:flex; flex-direction:column; gap:3px; }
  .mm-col:first-child{ padding-left:0; }
  .mm-col:last-child{ border-right:none; }
  .mm-col-title{ font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; font-weight:600; }
  .mm-link{ display:block; font-size:.88rem; color:var(--ink-soft); padding:7px 9px; margin:0 -9px; border-radius:7px; text-decoration:none; }
  .mm-link:hover{ background:var(--paper-sunk); color:var(--ink); }
  .mm-cta{ margin-top:6px; display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700; color:#fff; background:var(--mm-hue,var(--accent)); padding:9px 13px; border-radius:9px; text-decoration:none; }
  .mm-gallery-tile{ display:block; border-radius:11px; overflow:hidden; border:1px solid var(--line-soft); text-decoration:none; }
  .mm-gallery-thumb{ height:74px; background:color-mix(in srgb, var(--mm-hue,var(--accent)) 35%, white); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
  .mm-gallery-tile span{ display:block; padding:8px 10px; font-size:.8rem; font-weight:600; color:var(--ink); }

  /* mobile drawer */
  .nav-drawer-overlay{ display:none; position:fixed; inset:0; background:rgba(15,15,20,.4); z-index:60; }
  .nav-drawer-overlay.open{ display:block; }
  .nav-drawer{ position:absolute; top:0; right:0; bottom:0; width:min(390px,88vw); background:var(--paper); box-shadow:-16px 0 40px -16px rgba(0,0,0,.35); display:flex; flex-direction:column; }
  .nd-topbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line-soft); }
  .nd-brand{ font-weight:700; }
  .nd-close{ width:34px; height:34px; border-radius:9px; background:var(--paper-sunk); border:none; font-size:.95rem; color:var(--ink-soft); cursor:pointer; }
  .nd-body{ flex:1; overflow-y:auto; padding:6px 0 16px; }
  .d-item{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; font-size:.94rem; font-weight:600; border-bottom:1px solid var(--line-soft); cursor:pointer; text-decoration:none; color:var(--ink); }
  .d-item.plain{ font-weight:500; cursor:default; }
  .d-item .car{ transition:transform .15s ease; }
  .d-item.open .car{ transform:rotate(180deg); }
  .d-panel{ background:var(--paper-band); border-bottom:1px solid var(--line-soft); padding:4px 18px 12px; }
  .d-cluster-title{ font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin:12px 0 6px; font-weight:600; }
  .d-link{ display:block; padding:8px 4px; font-size:.86rem; color:var(--ink-soft); text-decoration:none; }
  .d-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-size:.84rem; font-weight:700; color:#fff; background:var(--dcta,var(--accent)); padding:8px 13px; border-radius:8px; text-decoration:none; }
  .et-collapsed{ display:flex; align-items:center; gap:10px; }
  .et-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
  .cta-dock{ padding:14px 16px calc(14px + 10px); border-top:1px solid var(--line-soft); }
  .cta-dock a{ display:block; text-align:center; background:var(--ink); color:#fff; font-weight:700; font-size:.9rem; padding:13px; border-radius:11px; text-decoration:none; }

  @media (max-width:920px){
    nav.nav-v2{ display:none; }
    .nav-hamburger{ display:flex; }
  }

  /* ===== homepage "choose your event type" teaser cards ===== */
  #event-type-cards.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  #event-type-cards .et-card{ display:block; text-decoration:none; background:var(--paper-raised); border:1px solid var(--line-soft); border-top-width:4px; border-radius:12px; padding:22px 20px; box-shadow:var(--shadow); transition:transform .15s ease; }
  #event-type-cards .et-card:hover{ transform:translateY(-3px); }
  #event-type-cards .et-card:nth-child(1){ border-top-color:#1f7a6b; }
  #event-type-cards .et-card:nth-child(1) .ico{ background:#1f7a6b; }
  #event-type-cards .et-card:nth-child(1) .go{ color:#1f7a6b; }
  #event-type-cards .et-card:nth-child(2){ border-top-color:#3d708a; }
  #event-type-cards .et-card:nth-child(2) .ico{ background:#3d708a; }
  #event-type-cards .et-card:nth-child(2) .go{ color:#3d708a; }
  #event-type-cards .et-card:nth-child(3){ border-top-color:#96524f; }
  #event-type-cards .et-card:nth-child(3) .ico{ background:#96524f; }
  #event-type-cards .et-card:nth-child(3) .go{ color:#96524f; }
  #event-type-cards .et-card:nth-child(4){ border-top-color:#7a4a7d; }
  #event-type-cards .et-card:nth-child(4) .ico{ background:#7a4a7d; }
  #event-type-cards .et-card:nth-child(4) .go{ color:#7a4a7d; }
  #event-type-cards .et-card:nth-child(5){ border-top-color:#2b6f8a; }
  #event-type-cards .et-card:nth-child(5) .ico{ background:#2b6f8a; }
  #event-type-cards .et-card:nth-child(5) .go{ color:#2b6f8a; }
  #event-type-cards .et-card:nth-child(6){ border-top-color:#b3591c; }
  #event-type-cards .et-card:nth-child(6) .ico{ background:#b3591c; }
  #event-type-cards .et-card:nth-child(6) .go{ color:#b3591c; }
  #event-type-cards .ico{ width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff; margin-bottom:12px; }
  #event-type-cards .et-card h3{ font-size:1.05rem; margin-bottom:6px; }
  #event-type-cards .et-card p{ font-size:.85rem; color:var(--ink-soft); }
  #event-type-cards .et-card .go{ margin-top:12px; font-size:.78rem; font-weight:700; }
  @media (max-width:880px){ #event-type-cards.cards{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ #event-type-cards.cards{ grid-template-columns:1fr; } }

  .cpb-lede{ margin:0 0 16px; font-size:.98rem; color:var(--ink); }
  .cpb-section{ margin:0 0 14px; }
  .cpb-section h4{ margin:0 0 4px; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); font-weight:700; }
  .cpb-section p{ margin:0; }
  .cpb-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft); }
  .cpb-actions .btn{ cursor:pointer; }

  /* ===== interactive event roadmap (replaces the old static poster image) =====
     Colors below are scoped to .rm- and .rmi- roadmap components only — they
     do not touch the site-wide --accent/--good/--crit palette or the shared
     .btn classes used elsewhere on the site. */
  :root{ --rm-pre-bg:#5eead4; --rm-pre-bg-soft:#ccfbf1; --rm-pre-line:#0d9488; --rm-pre-ink:#0f766e;
         --rm-day-bg:#fdba74; --rm-day-bg-soft:#ffedd5; --rm-day-line:#ea580c; --rm-day-ink:#9a3412;
         --rm-post-bg:#c4b5fd; --rm-post-bg-soft:#ede9fe; --rm-post-line:#7c3aed; --rm-post-ink:#5b21b6;
         --rm-grad: linear-gradient(135deg,#7c3aed 0%,#ec4899 60%,#f59e0b 100%); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
    --rm-pre-bg:#0f3d38; --rm-pre-bg-soft:#0f3d38; --rm-pre-line:#2dd4bf; --rm-pre-ink:#5eead4;
    --rm-day-bg:#3a2410; --rm-day-bg-soft:#3a2410; --rm-day-line:#fb923c; --rm-day-ink:#fdba74;
    --rm-post-bg:#2a1f4d; --rm-post-bg-soft:#2a1f4d; --rm-post-line:#a78bfa; --rm-post-ink:#d8b4fe;
    --rm-grad: linear-gradient(135deg,#a78bfa 0%,#f472b6 60%,#fbbf24 100%); } }
  :root[data-theme="dark"]{
    --rm-pre-bg:#0f3d38; --rm-pre-bg-soft:#0f3d38; --rm-pre-line:#2dd4bf; --rm-pre-ink:#5eead4;
    --rm-day-bg:#3a2410; --rm-day-bg-soft:#3a2410; --rm-day-line:#fb923c; --rm-day-ink:#fdba74;
    --rm-post-bg:#2a1f4d; --rm-post-bg-soft:#2a1f4d; --rm-post-line:#a78bfa; --rm-post-ink:#d8b4fe;
    --rm-grad: linear-gradient(135deg,#a78bfa 0%,#f472b6 60%,#fbbf24 100%); }

  .rm-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:34px 0 16px; padding-top:26px; border-top:1px solid var(--line-soft); }
  .rm-head .rm-h3{ font-size:1.05rem; font-weight:700; margin-bottom:4px; }
  .rm-head .rm-sub{ font-size:.86rem; color:var(--ink-soft); margin:0; max-width:56ch; }
  .rm-actions{ display:flex; gap:8px; flex:none; flex-wrap:wrap; }
  .rm-actions .btn-primary, .rmi-actions .btn-primary{ background:var(--rm-grad); border-color:transparent; box-shadow:0 6px 18px -6px rgba(124,58,237,.5); }
  .rm-actions .btn-primary:hover, .rmi-actions .btn-primary:hover{ filter:brightness(1.06); }

  /* ===== roadmap toolbar — each action its own academic, institutional
     tint (reusing the site's existing phase/accent hues) instead of one
     flat grey "ghost" look repeated six times.
     .rm-actions (event.html / admin/roadmap.html) sits on the plain page
     background, so it gets a pale tinted chip with dark text. .rmi-actions
     (roadmap-infographic.html) sits inside that page's solid-gold .ap-head
     banner, which already sets every child to white text/translucent-white
     borders for legibility on the gold field (see ".rmi-actions .btn-ghost"
     below) — so it keeps that white text and only gets a richer, per-action
     tinted fill layered under it (needs the extra ".btn" to outrank that
     existing same-specificity rule). ===== */
  .rm-actions .btn-ghost{
    background: color-mix(in srgb, var(--tc, var(--ink-soft)) 12%, var(--paper-raised));
    border-color: color-mix(in srgb, var(--tc, var(--ink-soft)) 45%, var(--line-soft));
    color: color-mix(in srgb, var(--tc, var(--ink-soft)) 78%, var(--ink));
    font-weight:600;
  }
  .rm-actions .btn-ghost:hover{
    background: color-mix(in srgb, var(--tc, var(--ink-soft)) 22%, var(--paper-raised));
    border-color: var(--tc, var(--line));
  }
  #rm-ig-open{ --tc:#3d5a80; }       /* navy — opens the full Event Roadmap and Timeline view */
  #rm-report{ --tc:#0d9488; }        /* teal — matches the Pre-Seminar phase colour */
  #rm-image{ --tc:#7c3aed; }         /* violet — matches the Post-Seminar phase colour */
  #rm-timeline-pdf{ --tc:#b45309; }  /* amber-brown — a download action */
  #rm-print{ --tc:#ea580c; }         /* orange — matches the Event-Day phase colour */

  .rmi-actions .btn.btn-ghost{
    background: color-mix(in srgb, var(--tc, #000000) 58%, #000000 10%);
    border-color: color-mix(in srgb, var(--tc, #ffffff) 55%, #ffffff);
  }
  .rmi-actions .btn.btn-ghost:hover{
    background: color-mix(in srgb, var(--tc, #000000) 72%, #000000 10%);
    border-color: #fff;
  }
  #rmi-share{ --tc:#3d5a80; }
  #rmi-report{ --tc:#0d9488; }
  #rmi-image{ --tc:#7c3aed; }
  #rmi-pdf{ --tc:#b45309; }
  #rmi-print{ --tc:#ea580c; }

  .rm-legend{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:var(--paper-band); border:1px solid var(--line-soft); border-radius:10px; padding:10px 14px; margin-bottom:20px; font-size:.82rem; color:var(--ink-soft); }
  .rm-legend .rm-legend-sep{ margin-left:auto; color:var(--ink-faint); }

  /* ===== journey roadmap (event.html, #rm-columns) — one continuous,
     individually-numbered HORIZONTAL timeline (scrolls sideways),
     replacing the old 3-column layout. The line's color is set
     per-instance via the --rmj-line-gradient custom property (computed
     in JS from the actual phase boundaries), so it always lines up with
     the real task count. .rmj-scroll clips/scrolls; .rmj-timeline is an
     inline-flex row sized to fit its content, so the ::before line
     (left:0;right:0) always spans exactly the full scrollable width. */
  .rmj-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px; }
  .rmj-timeline{
    position:relative; display:inline-flex; align-items:stretch; min-width:100%; box-sizing:border-box;
    /* height must clear (31px connector) + (tallest possible stop-card) on both
       sides of the centerline, or .rmj-scroll's overflow-y:hidden silently clips
       card content. Measured worst case across a full range of event dates,
       with the event date+countdown chip and the 3-way status checkboxes both
       present: ~195px card height here — 500px gives a comfortable margin. */
    height:500px; padding:0 36px; --rmj-line-gradient:var(--line-soft);
  }
  .rmj-timeline::before{
    content:""; position:absolute; top:50%; left:0; right:0; height:3px; margin-top:-1.5px;
    background:var(--rmj-line-gradient); border-radius:2px; opacity:.55; z-index:0;
  }

  .rmj-waypoint{ position:relative; z-index:1; flex:none; width:190px; height:100%; }
  .rmj-waypoint-badge{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
    display:inline-block; white-space:nowrap; font-family:"IBM Plex Mono",monospace; font-size:.64rem; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; padding:.32em .75em; border-radius:999px;
    background:var(--paper-raised); border:1px solid var(--line-soft); color:var(--ink-soft); box-shadow:0 0 0 4px var(--paper);
  }
  .rmj-waypoint[data-phase="pre"] .rmj-waypoint-badge{ border-color:var(--rm-pre-line); color:var(--rm-pre-ink); background:var(--rm-pre-bg-soft); }
  .rmj-waypoint[data-phase="day"] .rmj-waypoint-badge{ border-color:var(--rm-day-line); color:var(--rm-day-ink); background:var(--rm-day-bg-soft); }
  .rmj-waypoint[data-phase="post"] .rmj-waypoint-badge{ border-color:var(--rm-post-line); color:var(--rm-post-ink); background:var(--rm-post-bg-soft); }
  .rmj-waypoint-title{
    position:absolute; left:2px; right:2px; bottom:calc(50% + 20px); text-align:center;
    font-size:.92rem; font-weight:700; line-height:1.25;
  }
  .rmj-waypoint-week{
    position:absolute; left:2px; right:2px; top:calc(50% + 20px); text-align:center;
    font-family:"IBM Plex Mono",monospace; font-size:.64rem; line-height:1.35; color:var(--ink-faint);
  }
  .rmj-waypoint-mini-bar{ position:absolute; left:24px; right:24px; top:calc(50% + 56px); height:4px; border-radius:3px; background:var(--paper-band); overflow:hidden; }
  .rmj-waypoint-mini-fill{ display:block; height:100%; background:var(--good); border-radius:3px; }

  /* Vertical budget from the centerline outward, top side (bottom side mirrors it):
     circle (17px radius, centered on the line) -> 14px visible connector -> card's near edge.
     So the circle spans center±17, the connector fills center+17..center+31, and the
     card starts at center+31 — no overlap between the number circle and card content. */
  .rmj-stop{ position:relative; z-index:1; flex:none; width:196px; height:100%; }
  .rmj-stop::after{
    content:""; position:absolute; left:50%; width:2px; margin-left:-1px; background:var(--line-soft); z-index:0;
  }
  .rmj-stop.rmj-top::after{ bottom:calc(50% + 17px); height:14px; }
  .rmj-stop.rmj-bottom::after{ top:calc(50% + 17px); height:14px; }

  .rmj-stop-btn{
    position:absolute; left:6px; right:6px; z-index:1; display:flex; flex-direction:column; gap:5px; text-align:left;
    background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:12px; box-shadow:var(--shadow);
    padding:10px 12px; cursor:pointer; font:inherit; color:var(--ink); transition:background .12s ease, border-color .12s ease, transform .12s ease;
  }
  .rmj-stop.rmj-top .rmj-stop-btn{ bottom:calc(50% + 31px); }
  .rmj-stop.rmj-bottom .rmj-stop-btn{ top:calc(50% + 31px); }
  .rmj-stop-btn:hover{ border-color:var(--accent-soft-line); transform:translateY(-1px); }
  .rmj-stop-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  /* .rmj-stop-num is nested inside .rmj-stop-btn in the markup, and the
     button is itself position:absolute — which makes the BUTTON, not the
     outer .rmj-stop, the containing block for the circle. So its offset
     is expressed relative to the button's own near edge, not as a
     percentage of the stop's height: the button's near edge already sits
     31px out from the line, and the circle (17px radius) needs its center
     ON the line, i.e. its far edge 31+17=48px back past the button's edge. */
  .rmj-stop-num{
    position:absolute; left:50%; transform:translateX(-50%); width:34px; height:34px; border-radius:50%; z-index:2;
    display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:700;
    background:var(--ink); color:var(--paper); flex:none; box-shadow:0 0 0 4px var(--paper);
  }
  .rmj-stop.rmj-top .rmj-stop-num{ bottom:-48px; }
  .rmj-stop.rmj-bottom .rmj-stop-num{ top:-48px; }
  .rmj-stop[data-phase="pre"] .rmj-stop-num{ background:var(--rm-pre-line); }
  .rmj-stop[data-phase="day"] .rmj-stop-num{ background:var(--rm-day-line); }
  .rmj-stop[data-phase="post"] .rmj-stop-num{ background:var(--rm-post-line); }
  .rmj-stop.rm-done .rmj-stop-num{ background:var(--good); font-size:0; }
  .rmj-stop.rm-done .rmj-stop-num::before{ content:"✓"; font-size:.9rem; }

  .rmj-stop-body{ display:flex; flex-direction:column; gap:5px; min-width:0; }
  .rmj-stop-body .txt{ font-size:.84rem; line-height:1.3; }
  .rmj-stop.rm-done .rmj-stop-body .txt{ color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--good); }
  .rmj-stop.rm-dim{ opacity:.4; }

  @media (max-width:760px){
    /* mobile stop-cards are narrower (154px) so text wraps more; measured
       worst case across a full range of event dates, with the event
       date+countdown chip and status checkboxes both present: ~248px card
       height — 620px gives a comfortable margin above that. */
    .rmj-timeline{ height:620px; padding:0 20px; }
    .rmj-waypoint{ width:130px; }
    .rmj-waypoint-title{ font-size:.82rem; bottom:calc(50% + 16px); }
    .rmj-waypoint-week{ top:calc(50% + 16px); font-size:.6rem; }
    .rmj-waypoint-mini-bar{ top:calc(50% + 48px); left:14px; right:14px; }
    .rmj-stop{ width:154px; }
    .rmj-stop-btn{ padding:8px 10px; }
    .rmj-stop-body .txt{ font-size:.78rem; }
  }

  .rm-pop-label{ font-family:"IBM Plex Mono",monospace; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:14px 0 5px; }
  .rm-pop-label:first-child{ margin-top:0; }
  .item-popup-body ul{ margin:0; padding-left:19px; }
  .item-popup-body ul li{ margin-bottom:4px; }

  .rm-print-detail{ display:none; }

  @media print{
    /* Forces portrait for every print job on this stylesheet (site-wide -- no page
       in this codebase currently prints anything that wants landscape), so printing
       the roadmap timeline -- normally a wide, horizontally-scrolling strip -- comes
       out as a proper vertical, portrait page instead of whatever orientation the
       browser/OS last remembered. Paired with the .rmj-timeline reformatting below,
       which already turns the horizontal strip into a stacked, single-column list. */
    @page{ size:portrait; margin:14mm 12mm; }
    .rm-head .rm-actions, .rm-legend{ display:none !important; }
    .rmj-scroll{ overflow:visible !important; margin:0; padding:0; }
    .rmj-timeline{
      display:block !important; height:auto !important; padding:0 !important; min-width:0 !important;
    }
    .rmj-timeline::before{ display:none; }
    .rmj-waypoint{ position:relative !important; width:100% !important; height:auto !important; text-align:left; border-bottom:2px solid #000; padding-bottom:6px; margin:18px 0 8px; }
    .rmj-waypoint-badge, .rmj-waypoint-title, .rmj-waypoint-week, .rmj-waypoint-mini-bar{ position:static !important; transform:none !important; text-align:left !important; margin:2px 0 !important; box-shadow:none; }
    .rmj-stop{ position:relative !important; width:100% !important; height:auto !important; }
    .rmj-stop::after{ display:none; }
    .rmj-stop-btn{ position:static !important; display:flex !important; flex-direction:row !important; align-items:center; gap:8px; width:100% !important; padding:4px 0 !important; box-shadow:none; border:none; cursor:default; }
    .rmj-stop-btn:hover{ background:none; transform:none; }
    .rmj-stop-num{ position:static !important; transform:none !important; width:22px; height:22px; font-size:.66rem; box-shadow:none; }
    .rmj-timeline .item-badges{ display:inline-flex !important; }
    .rm-print-detail{ display:block; margin:2px 0 12px 30px; padding:6px 12px; border-left:2px solid #ddd; font-size:.8rem; color:#333; }
    .rm-print-detail .rm-pop-label{ color:#666; }
    .rm-print-detail ul{ margin:2px 0; padding-left:16px; }
  }

  /* ===== event countdown card (shared by event.html #rm-countdown and
     roadmap-infographic.html #rmi-countdown) + the daily WhatsApp/Email
     reminders panel (event.html only) + the page-wide floating pill. ===== */
  .rm-countdown{ margin-bottom:22px; }
  .rm-cd-empty{ margin:0; padding:16px 18px; border:1px dashed var(--line-soft); border-radius:12px; background:var(--paper-band); color:var(--ink-faint); font-size:.86rem; }
  .rm-cd-hero{ background:var(--rm-grad); border-radius:14px; padding:18px 22px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
  .rm-cd-lbl{ font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
  .rm-cd-event{ font-size:1.05rem; font-weight:700; margin-top:3px; }
  .rm-cd-digits{ display:flex; gap:8px; }
  .rm-cd-digit{ background:rgba(255,255,255,.16); border-radius:10px; padding:7px 11px; text-align:center; min-width:52px; }
  .rm-cd-digit .n{ font-family:"IBM Plex Mono",monospace; font-size:1.3rem; font-weight:700; line-height:1; }
  .rm-cd-digit .u{ font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; opacity:.8; margin-top:2px; }
  .rm-cd-today{ font-size:1rem; font-weight:700; }
  .rm-cd-sub-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
  .rm-cd-pill{ display:inline-flex; align-items:center; gap:5px; background:var(--paper-band); border:1px solid var(--line-soft); border-radius:20px; padding:5px 12px; font-size:.8rem; color:var(--ink-soft); }
  .rm-cd-pill b{ color:var(--ink); }
  .rm-cd-pill.rm-health-good{ background:var(--good-soft); border-color:var(--good-line); color:var(--good); }
  .rm-cd-pill.rm-health-good b{ color:var(--good); }
  .rm-cd-pill.rm-health-behind{ background:var(--crit-soft); border-color:var(--crit-line); color:var(--crit); }
  .rm-cd-pill.rm-health-behind b{ color:var(--crit); }

  /* overdue / at-risk panel (shared by #rm-overdue and #rmi-overdue) */
  .rm-overdue-panel{ margin:0 0 22px; padding:16px 20px; border:1px solid var(--crit-line); border-radius:14px; background:var(--crit-soft); }
  .rm-overdue-panel h3{ margin:0 0 4px; font-size:1rem; color:var(--crit); }
  .rm-od-note{ font-size:.82rem; color:var(--ink-soft); margin:0 0 12px; }
  .rm-od-list{ display:flex; flex-direction:column; gap:8px; }
  .rm-od-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:10px; padding:8px 12px; }
  .rm-od-badge{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; background:var(--crit); color:#fff; border-radius:6px; padding:2px 7px; white-space:nowrap; flex:none; }
  .rm-od-txt{ flex:1 1 160px; font-size:.86rem; color:var(--ink); }
  .rm-od-open{ background:none; border:1px solid var(--line-soft); border-radius:8px; padding:4px 10px; font-size:.78rem; cursor:pointer; color:var(--accent); flex:none; font-family:inherit; }
  .rm-od-open:hover{ background:var(--paper-band); }

  /* per-task note field, inside the shared item-popup body */
  .rm-notes-field{ margin:0 0 14px; }
  .rm-notes-label{ display:block; font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:4px; }
  .rm-notes-hint{ font-weight:400; color:var(--ink-faint); font-size:.76rem; }
  .rm-note-input{ width:100%; box-sizing:border-box; border:1px solid var(--line-soft); border-radius:8px; padding:8px 10px; font-family:inherit; font-size:.85rem; resize:vertical; background:var(--paper-raised); color:var(--ink); }
  .rm-note-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .rm-note-saved{ display:inline-block; margin-top:4px; font-size:.76rem; color:var(--good); min-height:1em; }
  .rm-note-dot{ font-size:.85em; }

  /* Task status: to-do / attempted / done, shown as three real checkboxes
     acting as a single-select group (see rmStatusControlHtml/
     rmWireStatusGroup in site.js) — on every timeline/infographic task
     card and inside the shared task popup. Replaces the old red
     "overdue by N days" due-date chip that used to sit here, and the
     popup's old single "mark done" toggle. .rm-status-compact is the
     size that fits inside a small timeline card; the popup uses the
     roomier default sizing below it. */
  .rm-status-group{ display:flex; flex-wrap:wrap; gap:4px; margin:2px 0; }
  .rm-status-opt{ display:inline-flex; align-items:center; gap:5px; font-size:.78rem; font-weight:600; padding:5px 10px; border-radius:7px; border:1px solid var(--line-soft); background:var(--paper-band); color:var(--ink-faint); cursor:pointer; user-select:none; }
  .rm-status-opt input{ width:14px; height:14px; margin:0; flex:none; accent-color:var(--ink-soft); }
  .rm-status-opt.rm-status-attempted.is-active{ background:var(--pend-soft); color:var(--pend); border-color:var(--pend-line); }
  .rm-status-opt.rm-status-attempted input{ accent-color:var(--pend); }
  .rm-status-opt.rm-status-done.is-active{ background:var(--good-soft); color:var(--good); border-color:var(--good-line); }
  .rm-status-opt.rm-status-done input{ accent-color:var(--good); }
  .rm-status-opt.rm-status-todo.is-active{ background:var(--paper-sunk); color:var(--ink-soft); border-color:var(--line-soft); }

  .rm-status-compact{ gap:3px; }
  .rm-status-compact .rm-status-opt{ font-size:.6rem; padding:3px 6px; border-radius:6px; gap:3px; }
  .rm-status-compact .rm-status-opt input{ width:11px; height:11px; }

  .rm-pop-status{ margin:0 0 14px; }
  .rm-pop-status-label{ display:block; font-family:"IBM Plex Mono",monospace; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }

  /* the event's own fixed date + a live ticking countdown, shown on every
     task box/row and refreshed every second by JS (see the setInterval
     tick near rmEventTickText in site.js) — distinct from the per-task
     due chip above, which is that task's own step deadline */
  .rm-ev-tick{
    display:inline-flex; align-items:center; gap:5px;
    font-family:"IBM Plex Mono",monospace; font-size:.64rem; font-weight:700; letter-spacing:.01em;
    padding:3px 9px; border-radius:7px; max-width:100%;
    color:#1a1406; text-shadow:none;
    background:#ffe27a;
    border:2px solid #111;
    box-shadow:0 0 0 1px rgba(0,0,0,.1), 0 0 9px 2px rgba(255,193,7,.55);
    animation:rmEvTickGlow 2.6s ease-in-out infinite;
  }
  @keyframes rmEvTickGlow{
    0%,100%{ box-shadow:0 0 0 1px rgba(0,0,0,.1), 0 0 7px 1px rgba(255,193,7,.4); }
    50%{ box-shadow:0 0 0 1px rgba(0,0,0,.22), 0 0 14px 4px rgba(255,193,7,.8); }
  }
  @media (prefers-reduced-motion: reduce){ .rm-ev-tick{ animation:none; } }
  .rm-pop-ev-tick{ margin:0 0 10px; }
  .rm-pop-ev-tick .rm-ev-tick{ font-size:.72rem; padding:4px 11px; }

  .rm-reminders{ margin:22px 0; padding:20px 22px 22px; border:1px solid var(--line-soft); border-radius:14px; background:var(--paper-band); }
  /* <details>/<summary> makes the whole block collapsible with no JS —
     the summary swaps in for the old plain <h3>, styled to match, with a
     custom chevron replacing the native disclosure triangle so it looks
     the same across browsers and flips on [open]. */
  .rm-reminders summary{ font-size:1.02rem; font-weight:700; margin-bottom:4px; color:var(--ink); cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; user-select:none; }
  .rm-reminders summary::-webkit-details-marker{ display:none; }
  .rm-reminders summary::before{ content:"▸"; display:inline-block; font-size:.78rem; color:var(--ink-faint); transition:transform .15s ease; }
  .rm-reminders[open] summary::before{ transform:rotate(90deg); }
  .rm-reminders summary:hover::before, .rm-reminders summary:focus-visible::before{ color:var(--ink); }
  .rm-reminders summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
  .rm-reminders summary + .rm-rem-note{ margin-top:2px; }
  .rm-rem-note{ font-size:.84rem; color:var(--ink-soft); margin:0 0 16px; max-width:64ch; }
  .rm-rem-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin-bottom:16px; }
  @media (max-width:680px){ .rm-rem-grid{ grid-template-columns:1fr; } }
  .rm-rem-preview{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:10px; padding:12px 14px; font-family:"IBM Plex Mono",monospace; font-size:.78rem; line-height:1.5; white-space:pre-wrap; color:var(--ink-soft); margin:0 0 16px; max-height:220px; overflow:auto; }
  .rm-rem-actions{ display:flex; gap:10px; flex-wrap:wrap; }

  .rm-float-cd{
    position:fixed; right:18px; bottom:18px; z-index:60; display:flex; align-items:center; gap:8px;
    background:var(--paper-raised); border:1px solid var(--line-soft); box-shadow:var(--shadow); border-radius:999px;
    padding:9px 16px 9px 12px; font-size:.82rem; color:var(--ink); cursor:pointer; transition:transform .12s ease;
  }
  .rm-float-cd:hover{ transform:translateY(-2px); }
  .rm-float-cd .dot{ width:8px; height:8px; border-radius:50%; background:var(--rm-day-line); flex:none; }
  .rm-float-cd b{ font-family:"IBM Plex Mono",monospace; }
  @media print{ .rm-float-cd{ display:none !important; } }
  @media (max-width:520px){ .rm-float-cd{ right:12px; bottom:12px; font-size:.76rem; padding:8px 13px 8px 10px; } }

  /* ===== "Interactive Infographic" popup (event.html only) — same poster
     markup/renderer as roadmap-infographic.html, shown in a large modal
     instead of a separate page. Sits below the shared item-popup (400) and
     doc-composer (410) overlays so opening a task from inside it layers
     correctly on top. ===== */
  .rm-ig-overlay{ position:fixed; inset:0; background:rgba(15,20,30,.6); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:14px; z-index:390; }
  .rm-ig-modal{ background:var(--paper-raised); color:var(--ink); width:100%; max-width:1720px; height:min(95vh,1400px); display:flex; flex-direction:column; border-radius:14px; box-shadow:0 24px 60px -20px rgba(15,20,30,.45); overflow:hidden; }
  .rm-ig-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:16px 24px; border-bottom:1px solid var(--line-soft); background:var(--paper-band); }
  .rm-ig-modal-head h3{ margin:0; font-size:1rem; }
  .rm-ig-modal-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .rm-ig-close{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line-soft); background:var(--paper-raised); color:var(--ink-soft); font-size:1.2rem; line-height:1; cursor:pointer; }
  .rm-ig-close:hover{ background:var(--paper-sunk); }
  .rm-ig-modal-body{ flex:1; overflow:auto; padding:20px 26px 28px; }
  @media (max-width:900px){ .rm-ig-overlay{ padding:0; } .rm-ig-modal{ height:100vh; max-width:100%; border-radius:0; } .rm-ig-modal-head h3{ font-size:.9rem; } }

  /* ===== interactive roadmap INFOGRAPHIC (standalone poster, roadmap-infographic.html) ===== */
  .rmi-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .rmi-actions{ flex:none; }
  .rmi-actions .btn-ghost{ border-color:rgba(255,255,255,.35); color:#fff; }
  .rmi-actions .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); }

  .rmi-poster{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:10px 4px 26px; margin:0 -4px; }
  .rmi-grid{ display:flex; flex-direction:column; min-width:860px; }

  /* ===== full-screen pop-up for the roadmap poster (roadmap-infographic.html) =====
     Toggled by adding/removing .rmi-fs-active on the shell that already wraps
     the zoom bar + poster — no duplicate #rmi-grid, so the existing zoom/pan
     and task-popup wiring keeps working unchanged, just repositioned to cover
     the viewport. .rmi-fs-bar/.rmi-fs-close stay invisible until active.
     z-index:390 matches .rm-ig-overlay (event.html's equivalent full-screen
     roadmap modal) deliberately, so it stacks BELOW .item-popup-overlay
     (400) — a phase-node click while full screen must still show its
     task-detail popup on top, not behind the poster. */
  .rmi-fs-bar{ display:none; }
  .rmi-fs-shell.rmi-fs-active{
    position:fixed; inset:0; z-index:390; background:var(--paper);
    display:flex; flex-direction:column; padding:0 20px 20px;
  }
  .rmi-fs-shell.rmi-fs-active .rmi-fs-bar{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:16px 0; border-bottom:1px solid var(--line-soft); margin-bottom:14px; flex:none;
  }
  .rmi-fs-title{ font-family:"Work Sans",sans-serif; font-weight:700; font-size:1.02rem; color:var(--ink); }
  .rmi-fs-close{
    border:1px solid var(--line-soft); background:var(--paper-raised); color:var(--ink);
    border-radius:20px; padding:.5em 1.1em; font-size:.85rem; font-weight:600; cursor:pointer; flex:none;
  }
  .rmi-fs-close:hover{ background:var(--paper-sunk); }
  .rmi-fs-shell.rmi-fs-active .rmi-zoom-bar{ flex:none; }
  .rmi-fs-shell.rmi-fs-active .rmi-poster{ flex:1; overflow:auto; }
  @media (max-width:600px){ .rmi-fs-shell.rmi-fs-active{ padding:0 12px 12px; } }

  .rmi-row{ display:grid; grid-template-columns:repeat(7, minmax(112px,1fr)); gap:14px; }
  .rmi-row-top{ align-items:end; padding-bottom:16px; }
  .rmi-row-bottom{ align-items:start; padding-top:16px; }
  .rmi-row-line{ position:relative; align-items:center; padding:16px 0; }
  .rmi-row-line::before{
    content:""; position:absolute; left:7.2%; right:7.2%; top:50%; height:3px;
    background:var(--line-soft); transform:translateY(-50%); z-index:0;
  }

  .rmi-slot{ position:relative; min-width:0; display:flex; }
  .rmi-row-top .rmi-slot::after{
    content:""; position:absolute; left:50%; bottom:-16px; width:2px; height:16px;
    background:var(--line-soft); transform:translateX(-50%);
  }
  .rmi-row-bottom .rmi-slot::before{
    content:""; position:absolute; left:50%; top:-16px; width:2px; height:16px;
    background:var(--line-soft); transform:translateX(-50%);
  }

  .rmi-card{
    width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left;
    background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:12px; box-shadow:var(--shadow);
    padding:14px 14px 12px; cursor:pointer; font:inherit; color:var(--ink);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .rmi-card:hover, .rmi-card:focus-visible{ transform:translateY(-3px); border-color:var(--line); box-shadow:0 10px 26px -10px rgba(124,58,237,.35); }
  .rmi-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .rmi-card.pre{ background:linear-gradient(160deg,#99f6e4 0%,var(--rm-pre-bg) 100%); border-color:var(--rm-pre-line); box-shadow:0 6px 20px -10px rgba(13,148,136,.45); }
  .rmi-card.day{ background:linear-gradient(160deg,#fed7aa 0%,var(--rm-day-bg) 100%); border-color:var(--rm-day-line); box-shadow:0 6px 20px -10px rgba(234,88,12,.4); }
  .rmi-card.post{ background:linear-gradient(160deg,#ddd6fe 0%,var(--rm-post-bg) 100%); border-color:var(--rm-post-line); box-shadow:0 6px 20px -10px rgba(124,58,237,.4); }
  .rmi-card-ico{ font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 1px 4px rgba(0,0,0,.12) inset; }
  .rmi-card-title{ font-size:.86rem; font-weight:700; }
  .rmi-card.pre .rmi-card-title{ color:var(--rm-pre-ink); }
  .rmi-card.day .rmi-card-title{ color:var(--rm-day-ink); }
  .rmi-card.post .rmi-card-title{ color:var(--rm-post-ink); }
  .rmi-card-week{ font-family:"IBM Plex Mono",monospace; font-size:.62rem; color:var(--ink-faint); }

  .rmi-node{ background:none; border:none; padding:0; margin:0; cursor:pointer; justify-self:center; position:relative; z-index:1; }
  .rmi-node-circle{
    display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
    background:var(--paper-raised); border:3px solid var(--ink-faint); font-family:"IBM Plex Mono",monospace;
    font-weight:700; font-size:.92rem; color:var(--ink); transition:transform .15s ease, border-color .15s ease;
    box-shadow:0 3px 10px -3px rgba(0,0,0,.25);
  }
  .rmi-node:hover .rmi-node-circle, .rmi-node:focus-visible .rmi-node-circle{ transform:scale(1.14); }
  .rmi-node:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:50%; }
  .rmi-node.pre .rmi-node-circle{ border-color:var(--rm-pre-ink); color:#fff; background:var(--rm-pre-line); --rm-glow:rgba(13,148,136,.65); }
  .rmi-node.day .rmi-node-circle{ border-color:var(--rm-day-ink); color:#fff; background:var(--rm-day-line); --rm-glow:rgba(234,88,12,.65); }
  .rmi-node.post .rmi-node-circle{ border-color:var(--rm-post-ink); color:#fff; background:var(--rm-post-line); --rm-glow:rgba(124,58,237,.65); }
  .rmi-node.pre .rmi-node-circle, .rmi-node.day .rmi-node-circle, .rmi-node.post .rmi-node-circle{
    animation: rm-node-glow 2.2s ease-in-out infinite;
  }
  .rmi-node:hover .rmi-node-circle, .rmi-node:focus-visible .rmi-node-circle{ animation-play-state:paused; }
  @keyframes rm-node-glow{
    0%, 100%{ box-shadow:0 3px 10px -3px rgba(0,0,0,.25), 0 0 0 0 var(--rm-glow, transparent); }
    50%{ box-shadow:0 3px 10px -3px rgba(0,0,0,.25), 0 0 16px 5px var(--rm-glow, transparent); }
  }
  @media (prefers-reduced-motion: reduce){
    .rmi-node.pre .rmi-node-circle, .rmi-node.day .rmi-node-circle, .rmi-node.post .rmi-node-circle{
      animation:none; box-shadow:0 3px 10px -3px rgba(0,0,0,.25), 0 0 12px 3px var(--rm-glow, transparent);
    }
  }

  .rmi-task-row{
    width:100%; display:flex; align-items:center; gap:8px; text-align:left; background:var(--paper-band);
    border:1px solid var(--line-soft); border-left:4px solid var(--line-soft); border-radius:9px; padding:7px 10px 7px 10px; font:inherit;
    color:var(--ink); transition:background .12s ease, border-color .12s ease, transform .12s ease;
    margin-bottom:6px;
  }
  .rmi-task-row:hover{ background:var(--paper-band); border-color:var(--line-soft); transform:translateX(2px); }
  .rmi-row-open{
    flex:1; min-width:0; display:flex; align-items:center; gap:9px; text-align:left; background:none; border:none;
    padding:0; margin:0; font:inherit; color:inherit; cursor:pointer;
  }
  .rmi-row-open:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  .rmi-row-draft-btn{
    flex:none; font-size:.72rem; font-weight:700; padding:6px 11px; border-radius:8px; border:1px solid var(--line-soft);
    background:var(--paper-raised); color:var(--ink-soft); cursor:pointer; white-space:nowrap;
    transition:background .12s ease, border-color .12s ease, color .12s ease;
  }
  .rmi-row-draft-btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .rmi-row-draft-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  .rmi-task-row[data-phase="pre"] .rmi-row-draft-btn:hover{ background:var(--rm-pre-line); border-color:var(--rm-pre-line); }
  .rmi-task-row[data-phase="day"] .rmi-row-draft-btn:hover{ background:var(--rm-day-line); border-color:var(--rm-day-line); }
  .rmi-task-row[data-phase="post"] .rmi-row-draft-btn:hover{ background:var(--rm-post-line); border-color:var(--rm-post-line); }
  .rmi-task-row[data-phase="pre"]{ background:linear-gradient(90deg, rgba(94,234,212,.4), rgba(204,251,241,.65)); border-color:var(--rm-pre-line); border-left:6px solid var(--rm-pre-line); box-shadow:0 2px 8px -4px rgba(13,148,136,.4); }
  .rmi-task-row[data-phase="day"]{ background:linear-gradient(90deg, rgba(253,186,116,.4), rgba(255,237,213,.65)); border-color:var(--rm-day-line); border-left:6px solid var(--rm-day-line); box-shadow:0 2px 8px -4px rgba(234,88,12,.4); }
  .rmi-task-row[data-phase="post"]{ background:linear-gradient(90deg, rgba(196,181,253,.4), rgba(237,233,254,.65)); border-color:var(--rm-post-line); border-left:6px solid var(--rm-post-line); box-shadow:0 2px 8px -4px rgba(124,58,237,.4); }
  .rmi-task-row[data-phase="pre"]:hover{ filter:brightness(.97); }
  .rmi-task-row[data-phase="day"]:hover{ filter:brightness(.97); }
  .rmi-task-row[data-phase="post"]:hover{ filter:brightness(.97); }
  .rmi-task-row .dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-faint); flex:none; }
  .rmi-task-row[data-phase="pre"] .dot{ background:var(--rm-pre-line); box-shadow:0 0 0 3px rgba(13,148,136,.25); }
  .rmi-task-row[data-phase="day"] .dot{ background:var(--rm-day-line); box-shadow:0 0 0 3px rgba(234,88,12,.25); }
  .rmi-task-row[data-phase="post"] .dot{ background:var(--rm-post-line); box-shadow:0 0 0 3px rgba(124,58,237,.25); }
  .rmi-task-row .txt{ flex:1; display:flex; flex-direction:column; gap:1px; }
  .rmi-task-row .rmi-row-title{ font-size:.86rem; font-weight:600; }
  .rmi-task-row .rmi-row-hint{ font-size:.78rem; font-weight:800; font-style:normal; color:var(--ink); line-height:1.4; }
  .rmi-task-row[data-phase="pre"] .rmi-row-hint{ color:var(--rm-pre-ink); }
  .rmi-task-row[data-phase="day"] .rmi-row-hint{ color:var(--rm-day-ink); }
  .rmi-task-row[data-phase="post"] .rmi-row-hint{ color:var(--rm-post-ink); }
  .rmi-task-row.rm-done .rmi-row-hint{ display:none; }
  .rmi-task-row .item-badges{ flex:none; }

  .rmi-back{
    display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0; margin-bottom:10px;
    font:inherit; font-size:.82rem; font-weight:600; color:var(--accent-ink); cursor:pointer;
  }
  .rmi-back:hover{ text-decoration:underline; }
  .rmi-back:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

  .rm-note-inline{ font-size:.82rem; color:var(--ink-faint); margin-top:18px; text-align:center; }
  .rm-note-inline a{ color:inherit; text-decoration-color:var(--line); }

  @media (max-width:640px){
    .rmi-node-circle{ width:34px; height:34px; font-size:.82rem; }
    .rmi-card{ padding:11px 11px 10px; }
    .rmi-card-title{ font-size:.8rem; }
  }

  @media print{
    .rmi-actions{ display:none !important; }
    .rmi-poster{ overflow:visible; padding:0; margin:0; }
    .rmi-grid{ min-width:0; }
    .rmi-row{ grid-template-columns:repeat(7, 1fr); gap:8px; }
    .rmi-card{ box-shadow:none; border:1px solid #999; break-inside:avoid; background:#fff !important; }
    .rmi-card.pre, .rmi-card.day, .rmi-card.post{ background:#fff !important; }
    .rmi-node-circle{ border-width:2px; background:#fff !important; }
    .rmi-row-line::before{ background:#999; }
    .rmi-row-top .rmi-slot::after, .rmi-row-bottom .rmi-slot::before{ background:#999; }
  }

  /* ===== roadmap controls: date, role filter, progress — shared by both
     the card-list roadmap (event.html) and the standalone infographic ===== */
  .rm-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(236,72,153,.06)); border:1px solid var(--line-soft); border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:.84rem; }
  .rm-ctrl-group{ display:flex; align-items:center; gap:8px; }
  .rm-ctrl-label{ font-weight:600; color:var(--ink-soft); white-space:nowrap; }
  .rm-ctrl-date{ font:inherit; font-size:.82rem; padding:.4em .6em; border:1px solid var(--line-soft); border-radius:7px; background:var(--paper-raised); color:var(--ink); }
  .rm-role-toggle{ gap:0; border:1px solid var(--line-soft); border-radius:8px; overflow:hidden; }
  .rm-role-btn{ font:inherit; font-size:.78rem; font-weight:600; padding:.5em .9em; border:none; background:var(--paper-raised); color:var(--ink-soft); cursor:pointer; border-right:1px solid var(--line-soft); }
  .rm-role-btn:last-child{ border-right:none; }
  .rm-role-btn:hover{ background:var(--paper-band); }
  .rm-role-btn.active{ background:var(--rm-grad); color:#fff; }
  .rm-progress-wrap{ display:flex; align-items:center; gap:10px; margin-left:auto; flex:1; min-width:180px; }
  .rm-progress-bar{ flex:1; height:8px; border-radius:5px; background:var(--line-soft); overflow:hidden; min-width:80px; }
  .rm-progress-fill{ height:100%; width:0%; background:var(--rm-grad); border-radius:5px; transition:width .3s ease; }
  .rm-progress-text{ font-size:.76rem; color:var(--ink-faint); white-space:nowrap; font-family:"IBM Plex Mono",monospace; }
  .rm-celebrate{
    background:linear-gradient(135deg,#fef9c3,#fde68a); border:1px solid #fbbf24; color:#92400e; font-weight:700;
    text-align:center; border-radius:10px; padding:10px 14px; margin:0 0 16px; font-size:.9rem;
    animation:rmCelebratePop .5s ease;
  }
  @keyframes rmCelebratePop{ 0%{ transform:scale(.9); opacity:0; } 60%{ transform:scale(1.03); opacity:1; } 100%{ transform:scale(1); } }


  /* per-task done / role-dim state (card-list + infographic task rows) */
  .rm-item.rm-done .txt, .rmi-task-row.rm-done .txt{ text-decoration:line-through; opacity:.65; }
  .rm-item.rm-done .dot, .rmi-task-row.rm-done .dot{ background:var(--good); }
  .rm-item.rm-dim, .rmi-task-row.rm-dim{ opacity:.32; }
  .rm-item.rm-dim:hover, .rmi-task-row.rm-dim:hover{ opacity:.6; }

  /* per-phase / per-step progress + "you are here" date status */
  .rm-col-label{ justify-content:space-between; }
  .rm-col-count{ font-family:"IBM Plex Mono",monospace; font-size:.62rem; font-weight:700; letter-spacing:0; text-transform:none; opacity:.8; }
  .rm-step-head{ position:relative; }
  .rm-step-mini-bar{ margin-left:auto; width:54px; height:5px; border-radius:4px; background:var(--line-soft); overflow:hidden; flex:none; }
  .rm-step-mini-fill{ height:100%; background:var(--good); border-radius:4px; }
  .rm-day-badge{ display:inline-block; margin-left:8px; font-family:"IBM Plex Mono",monospace; font-size:.62rem; font-weight:700; padding:.15em .55em; border-radius:5px; text-transform:uppercase; letter-spacing:.04em; vertical-align:middle; }
  .rm-day-badge.rm-current{ background:var(--accent-soft); color:var(--accent-ink); }
  .rm-day-badge.rm-overdue{ background:var(--crit-soft); color:var(--crit); }
  .rm-day-badge.rm-upcoming{ background:var(--paper-band); color:var(--ink-faint); }
  .rm-day-badge.rm-past-done{ background:var(--good-soft); color:var(--good); }
  .rm-step.rm-current{ outline:2px solid var(--accent); outline-offset:2px; }
  .rm-step.rm-overdue{ outline:2px solid var(--crit); outline-offset:2px; }

  /* infographic: same status language applied to cards + nodes */
  .rmi-card-mini-bar{ width:100%; height:4px; border-radius:3px; background:rgba(0,0,0,.12); overflow:hidden; margin-top:2px; }
  .rmi-card-mini-fill{ height:100%; background:var(--good); border-radius:3px; }
  .rmi-card-day{ font-family:"IBM Plex Mono",monospace; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.1em .5em; border-radius:5px; align-self:flex-start; }
  .rmi-card-day.rm-current{ background:var(--accent-soft); color:var(--accent-ink); }
  .rmi-card-day.rm-overdue{ background:var(--crit-soft); color:var(--crit); }
  .rmi-card-day.rm-upcoming{ background:rgba(0,0,0,.08); color:var(--ink-faint); }
  .rmi-card-day.rm-past-done{ background:var(--good-soft); color:var(--good); }
  .rmi-card-role{ font-size:.62rem; font-weight:700; color:var(--ink-soft); }
  .rmi-card.rm-current{ outline:2px solid var(--accent); outline-offset:2px; }
  .rmi-card.rm-overdue{ outline:2px solid var(--crit); outline-offset:2px; }
  .rmi-node.rm-current .rmi-node-circle{ outline:2px solid var(--accent); outline-offset:2px; }
  .rmi-node.rm-overdue .rmi-node-circle{ outline:2px solid var(--crit); outline-offset:2px; }

  /* zoom / pan toolbar for the infographic poster */
  .rmi-zoom-bar{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  .rmi-zoom-btn{ font:inherit; font-size:.8rem; font-weight:700; min-width:30px; height:30px; padding:0 10px; border-radius:7px; border:1px solid var(--line-soft); background:var(--paper-raised); color:var(--ink); cursor:pointer; white-space:nowrap; }
  .rmi-zoom-btn#rmi-zoom-in, .rmi-zoom-btn#rmi-zoom-out{ padding:0; width:30px; }
  .rmi-zoom-btn:hover{ background:var(--paper-band); }
  .rmi-zoom-hint{ font-size:.74rem; color:var(--ink-faint); }
  .rmi-poster.rmi-dragging{ cursor:grabbing; }
  .rmi-poster.rmi-dragging .rmi-grid{ cursor:grabbing; }

  /* scroll-reveal + self-drawing connector line */
  .rmi-poster:not(.rmi-revealed) .rmi-card,
  .rmi-poster:not(.rmi-revealed) .rmi-node{ opacity:0; transform:translateY(16px); }
  .rmi-poster.rmi-revealed .rmi-card,
  .rmi-poster.rmi-revealed .rmi-node{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }
  .rmi-row-line::before{ transform-origin:left center; }
  .rmi-poster:not(.rmi-revealed) .rmi-row-line::before{ transform:translateY(-50%) scaleX(0); }
  .rmi-poster.rmi-revealed .rmi-row-line::before{ transform:translateY(-50%) scaleX(1); transition:transform .9s ease .2s; }

  @media print{
    .rm-controls, .rm-celebrate, .rm-status-group, .rmi-zoom-bar{ display:none !important; }
    .rm-item.rm-dim, .rmi-task-row.rm-dim{ opacity:1; }
    .rmi-poster:not(.rmi-revealed) .rmi-card, .rmi-poster:not(.rmi-revealed) .rmi-node{ opacity:1; transform:none; }
    .rm-ev-tick{ animation:none; box-shadow:none; background:#ffe27a !important; color:#1a1406 !important; text-shadow:none; border:2px solid #111; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  }

  /* ===== document composer: draft any roadmap task as a letter, notice,
     circular, approval or certificate — live preview, PDF/Word export,
     shareable link. Shared by both event.html and roadmap-infographic.html
     via the rmPopupBody() "Draft this as a document" button. ===== */
  .rm-doc-cta-row{ margin-bottom:14px; }
  .rm-doc-cta-row .btn{ width:100%; justify-content:center; }
  .rm-doc-overlay{ position:fixed; inset:0; background:rgba(15,20,30,.55); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:24px; z-index:410; }
  .rm-doc-overlay[hidden]{ display:none; }
  .rm-doc-popup{ background:var(--paper-raised); color:var(--ink); width:100%; max-width:960px; max-height:88vh; overflow-y:auto; border-radius:16px; box-shadow:0 24px 60px -20px rgba(15,20,30,.45); position:relative; padding:30px 30px 26px; }
  .rm-doc-popup::before{ content:""; display:block; height:5px; margin:-30px -30px 22px; border-radius:16px 16px 0 0; background:var(--rm-grad); }
  .rm-doc-close{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:1px solid var(--line-soft); background:var(--paper-raised); color:var(--ink-soft); font-size:1.2rem; line-height:1; cursor:pointer; }
  .rm-doc-close:hover{ background:var(--paper-sunk); }
  .rm-doc-popup h3{ font-family:"Work Sans",sans-serif; font-size:1.08rem; margin:0 34px 16px 0; }
  @media (max-width:560px){ .rm-doc-popup{ padding:24px 18px 18px; } .rm-doc-popup::before{ margin:-24px -18px 18px; } }
  .rm-doc-popup .te-popup-footer{ margin:20px -30px -26px; }
  @media (max-width:560px){ .rm-doc-popup .te-popup-footer{ margin:16px -18px -18px; } }

  .rm-doc-layout{ display:grid; grid-template-columns:280px 1fr; gap:24px; }
  .rm-doc-form-col{ display:flex; flex-direction:column; gap:12px; }
  .rm-doc-field{ display:flex; flex-direction:column; gap:4px; font-size:.78rem; font-weight:600; color:var(--ink-soft); }
  .rm-doc-field input, .rm-doc-field select, .rm-doc-field textarea{ font:inherit; font-size:.84rem; font-weight:400; padding:.55em .7em; border:1px solid var(--line-soft); border-radius:8px; background:var(--paper-raised); color:var(--ink); }
  .rm-doc-type-dropdown{
    font-weight:700 !important; border-width:2px !important; cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .rm-doc-type-dropdown[data-doctype="Letter"]{ border-color:#2563eb !important; background:#eff6ff !important; color:#1d4ed8 !important; }
  .rm-doc-type-dropdown[data-doctype="Notice"]{ border-color:#ea580c !important; background:#fff7ed !important; color:#c2410c !important; }
  .rm-doc-type-dropdown[data-doctype="Circular"]{ border-color:#7c3aed !important; background:#f5f3ff !important; color:#6d28d9 !important; }
  .rm-doc-type-dropdown[data-doctype="Approval"]{ border-color:#059669 !important; background:#ecfdf5 !important; color:#047857 !important; }
  .rm-doc-type-dropdown[data-doctype="Certificate"]{ border-color:#db2777 !important; background:#fdf2f8 !important; color:#be185d !important; }
  .rm-doc-field textarea{ min-height:130px; resize:vertical; line-height:1.5; }
  .rm-doc-field input:focus, .rm-doc-field select:focus, .rm-doc-field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .rm-doc-2col{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .rm-doc-accent-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .rm-doc-swatch{ width:24px; height:24px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; box-shadow:0 0 0 1px var(--line-soft); }
  .rm-doc-swatch.rm-doc-active{ border-color:var(--ink); transform:scale(1.15); }

  .rm-doc-preview-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
  .rm-doc-preview-scroll{ max-height:56vh; overflow:auto; border-radius:10px; background:var(--paper-sunk); padding:18px; }
  .rm-doc-preview{ background:#ffffff; color:#1c1c1c; border-radius:3px; padding:38px 36px; min-height:420px; box-shadow:0 6px 22px -8px rgba(0,0,0,.25); font-family:Georgia,'Times New Roman',serif; font-size:.84rem; line-height:1.7; }
  .rm-doc-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
  .rm-doc-actions .btn-primary{ background:var(--rm-grad); border-color:transparent; box-shadow:0 6px 18px -6px rgba(124,58,237,.5); }
  .rm-doc-actions .btn-primary:hover{ filter:brightness(1.06); }
  .rm-doc-share-msg{ font-size:.78rem; color:var(--good); font-weight:600; }
  @media (max-width:760px){ .rm-doc-layout{ grid-template-columns:1fr; } .rm-doc-preview-scroll{ max-height:44vh; } }
  @media print{ .rm-doc-overlay{ display:none !important; } }

  /* ===== SOP & Formats Library (/download): unique per-row colour + full-screen pop-up ===== */
  #fm-list .faq-item{ border-left-width:4px; transition:background .15s ease, border-color .15s ease, transform .15s ease; }
  #fm-list .faq-item:nth-child(13n+1){ --cc:#3d5a80; }
  #fm-list .faq-item:nth-child(13n+2){ --cc:#2f7a72; }
  #fm-list .faq-item:nth-child(13n+3){ --cc:#5158a6; }
  #fm-list .faq-item:nth-child(13n+4){ --cc:#c2701e; }
  #fm-list .faq-item:nth-child(13n+5){ --cc:#a8752a; }
  #fm-list .faq-item:nth-child(13n+6){ --cc:#3c7a5c; }
  #fm-list .faq-item:nth-child(13n+7){ --cc:#5c4a8a; }
  #fm-list .faq-item:nth-child(13n+8){ --cc:#c4483f; }
  #fm-list .faq-item:nth-child(13n+9){ --cc:#1f7a6b; }
  #fm-list .faq-item:nth-child(13n+10){ --cc:#3d708a; }
  #fm-list .faq-item:nth-child(13n+11){ --cc:#96524f; }
  #fm-list .faq-item:nth-child(13n+12){ --cc:#7a4a7d; }
  #fm-list .faq-item:nth-child(13n+13){ --cc:#b3591c; }
  #fm-list .faq-item{
    border-left-color: color-mix(in srgb, var(--cc, var(--accent)) 55%, var(--line-soft));
    background: color-mix(in srgb, var(--cc, var(--accent)) 5%, var(--paper-raised));
  }
  #fm-list .faq-item summary{ color: var(--cc, var(--ink)); }
  #fm-list .faq-item summary .chev.fmt-chev-full{
    width:auto; height:auto; padding:2px 7px; border-radius:6px; font-size:.68rem; font-weight:700;
    border-color:var(--cc, var(--accent)); color:var(--cc, var(--accent));
  }
  body.fmt-full-open{ overflow:hidden; }
  .fmt-full-backdrop{ position:fixed; inset:0; background:rgba(15,12,25,.6); backdrop-filter:blur(2px); z-index:9998; }
  .fmt-full-backdrop[hidden]{ display:none; }
  /* NOTE: deliberately NOT scoped under "#fm-list" below -- opening a row moves it out to
     be a direct child of <body> (a portal, so position:fixed is never confined by some
     ancestor's transform/filter), so any selector requiring the "#fm-list" ancestor would
     stop matching the instant it's needed. The per-row --cc custom property is likewise
     frozen as an inline style at setup time (see the JS below) rather than left to the
     "#fm-list .faq-item:nth-child(...)" rule above, for the same reason. Two classes
     (.faq-item.fmt-full) still safely outrank the base "details.faq-item" rule's specificity. */
  .faq-item.fmt-full{
    position:fixed; inset:24px; z-index:9999; margin:0 auto; max-width:800px; max-height:calc(100vh - 48px);
    display:flex; flex-direction:column; overflow:hidden; border-radius:12px;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.55);
  }
  .faq-item.fmt-full > summary{ display:none; }
  .faq-item.fmt-full .fmt-pre{ flex:1; overflow:auto; }
  .faq-item.fmt-full .fmt-actions{ flex:none; flex-wrap:wrap; }
  .fmt-full-head{ display:none; }
  .faq-item.fmt-full .fmt-full-head{
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex:none;
    padding:16px 22px; border-bottom:3px double color-mix(in srgb, var(--cc, var(--accent)) 55%, var(--line-soft));
    background: color-mix(in srgb, var(--cc, var(--accent)) 8%, var(--paper-raised));
  }
  .fmt-full-head-text{ display:flex; flex-direction:column; gap:6px; min-width:0; }
  .fmt-full-badge{
    align-self:flex-start; font-family:"IBM Plex Mono",monospace; font-size:.66rem; font-weight:600;
    letter-spacing:.03em; color:#fff; background:var(--cc, var(--accent)); padding:3px 9px; border-radius:4px;
  }
  .fmt-full-title{ margin:0; font-family:"Playfair Display",Georgia,serif; font-size:1.12rem; font-weight:600; color:var(--ink); }
  .fmt-full-close{
    flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--line-soft);
    background:var(--paper-raised); color:var(--ink-soft); cursor:pointer; font-size:.9rem;
  }
  .fmt-full-close:hover{ border-color:var(--cc, var(--accent)); color:var(--cc, var(--accent)); }
  @media (max-width:640px){
    .faq-item.fmt-full{ inset:0; border-radius:0; max-width:100%; max-height:100vh; }
  }

  /* ----- shared item-popup (#item-popup-overlay): full screen, header stays put, only the
     body scrolls (matches the SOP-library .fmt-full head/body split above). ----- */
  .item-popup-overlay{ padding:24px; }
  .item-popup{
    max-width:1040px; width:100%; height:100%; max-height:100%;
    display:flex; flex-direction:column; overflow:hidden;
  }
  .item-popup-title{ flex:none; }
  .item-popup-body{ flex:1 1 auto; overflow-y:auto; padding-right:2px; }
  @media (max-width:640px){
    .item-popup-overlay{ padding:0; }
    .item-popup{ border-radius:0; max-width:100%; }
  }

  /* ----- "Draft this as a document" custom letter builder: same full-screen treatment. ----- */
  .rm-doc-overlay{ padding:24px; }
  .rm-doc-popup{
    max-width:1200px; width:100%; height:100%; max-height:100%; overflow-y:auto;
  }
  .rm-doc-preview-scroll{ max-height:min(64vh, calc(100vh - 420px)); }
  @media (max-width:640px){
    .rm-doc-overlay{ padding:0; }
    .rm-doc-popup{ border-radius:0; max-width:100%; }
  }

  /* ----- editable format-letter text: any .fmt-pre made contenteditable in JS (both the
     SOP-library full-screen rows and any item-popup that embeds a format preview) gets a
     visible "you can type here" affordance instead of looking like plain read-only text. ----- */
  .fmt-pre[contenteditable="true"]{
    outline:1px dashed var(--line-soft); outline-offset:6px; border-radius:6px;
    cursor:text; transition:outline-color .15s ease, background-color .15s ease;
  }
  .fmt-pre[contenteditable="true"]:hover{ outline-color:var(--accent-soft-line); }
  .fmt-pre[contenteditable="true"]:focus{
    outline:2px solid var(--accent); outline-offset:6px; background:var(--accent-soft);
  }
  .fmt-edit-hint{
    display:flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600;
    color:var(--ink-faint); margin:0 0 6px;
  }