:root{
    color-scheme: light;
    --ink:#10231A; --paper:#F6F7F2; --paper-2:#EEF1E9;
    --emerald:#157347; --emerald-d:#0F5233;
    --clay:#C24B34; --amber:#DFA23C; --sage:#D6DDCE;
    --muted:#54615A; --card:#FFFFFF;
    --error:#B0281A; --error-text:#8F1D0F; --focus:#FFDD00;
    /* dark contrast bands (strip, dashboard total, footer) — dark in BOTH modes */
    --band-bg:#10231A; --band-text:#F6F7F2; --band-muted:#9DB6A6; --band-sub:#B9C8BF; --band-strong:#CDDCD2;
    --arrow:%2354615A;
    --shadow:0 1px 2px rgba(16,35,26,.05), 0 12px 30px -18px rgba(16,35,26,.25);
    --radius:14px;
  }
  @media (prefers-color-scheme: dark){
    :root{
      color-scheme: dark;
      --ink:#E7EFE8; --paper:#0D1712; --paper-2:#15211B;
      --emerald:#46B87E; --emerald-d:#63C996;
      --clay:#E37059; --amber:#E7B65C; --sage:#2C3E34;
      --muted:#9FB2A6; --card:#16241D;
      --error:#E0563F; --error-text:#F3A99D;
      --band-bg:#080F0B; --band-text:#E7EFE8; --band-muted:#8CA598; --band-sub:#A7BBAF; --band-strong:#CFE0D5;
      --arrow:%239FB2A6;
      --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.6);
    }
    header.site{ background:rgba(13,23,18,.9) !important; }
    .btn-primary{ color:#08110B; }
    .opt-radio:has(input:checked){ background:rgba(70,184,126,.14); }
    .sample-tag{ color:var(--amber); background:rgba(231,182,92,.14); border-color:rgba(231,182,92,.4); }
    select, .fixfinder select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239FB2A6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
    .fix-list .tick{ background:rgba(70,184,126,.18); }
  }
  *{box-sizing:border-box}
  body{overflow-x:clip}
  html{scroll-behavior:smooth; scroll-padding-top:80px}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
  body{margin:0; background:var(--paper); color:var(--ink);
    font-family:"Public Sans",system-ui,sans-serif; font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
  h1,h2,h3{font-family:"Archivo",sans-serif; line-height:1.06; margin:0; letter-spacing:-.01em}
  .mono{font-family:"IBM Plex Mono",monospace}
  .eyebrow{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--emerald); font-weight:500;}
  a{color:var(--emerald-d); text-underline-offset:3px; text-decoration-thickness:1px}
  .wrap{max-width:1080px; margin:0 auto; padding-inline:22px}
  .section{padding-block:76px; border-top:1px solid var(--sage)}
  main > section.section:first-child{border-top:0}
  .success-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}

  /* ---- Universal visible focus (background-independent, WCAG 2.2) ---- */
  a:focus-visible, button:focus-visible, summary:focus-visible,
  input:focus-visible, select:focus-visible, textarea:focus-visible,
  [tabindex]:focus-visible{
    outline:3px solid transparent;
    box-shadow:0 0 0 3px var(--focus), 0 0 0 6px var(--ink);
    border-radius:4px;
  }
  main:focus{outline:none}

  /* ---- Skip link ---- */
  .skip-link{position:absolute; left:12px; top:-60px; z-index:100;
    background:var(--band-bg); color:var(--band-text); padding:12px 18px; border-radius:0 0 8px 8px;
    font-weight:600; text-decoration:none; transition:top .15s ease;}
  .skip-link:focus{top:0}

  /* ---------- Header ---------- */
  header.site{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(8px);
    background:rgba(246,247,242,.92); border-bottom:1px solid var(--sage);}
  .bar{display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px}
  .brand{display:flex; align-items:center; gap:10px; font-family:"Archivo"; font-weight:800;
    letter-spacing:-.02em; font-size:19px; color:var(--ink); text-decoration:none}
  .brand svg{width:26px; height:32px; flex:none}
  header .brand svg path{stroke:var(--emerald)}
  nav.top{display:flex; gap:26px}
  nav.top a{color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:500; opacity:.82}
  nav.top a:hover{opacity:1; color:var(--emerald-d)}
  .head-actions{display:flex; align-items:center; gap:10px}
  .nav-toggle{display:none; align-items:center; gap:8px; background:transparent;
    border:1.5px solid var(--ink); border-radius:9px; padding:8px 12px; font-family:"Public Sans";
    font-weight:600; font-size:14.5px; color:var(--ink); cursor:pointer}
  .nav-toggle .bars{display:inline-flex; flex-direction:column; gap:3px}
  .nav-toggle .bars span{width:16px; height:2px; background:var(--ink); display:block}
  @media(max-width:820px){
    nav.top{position:absolute; top:64px; left:0; right:0; background:var(--paper);
      border-bottom:1px solid var(--sage); flex-direction:column; gap:0; padding:6px 0;
      box-shadow:var(--shadow); display:none}
    nav.top.open{display:flex}
    nav.top a{padding:14px 22px; opacity:1; border-top:1px solid var(--sage)}
    nav.top a:first-child{border-top:0}
    .nav-toggle{display:inline-flex}
  }
  @media(max-width:560px){
    .brand{font-size:17px}
    .head-actions .btn:not(.keep){display:none}   /* Menu already contains "Report an issue" */
  }

  /* ---------- Buttons ---------- */
  .btn{display:inline-flex; align-items:center; gap:9px; font-family:"Public Sans"; font-weight:600;
    font-size:15.5px; padding:13px 20px; border-radius:11px; border:1.5px solid transparent;
    cursor:pointer; text-decoration:none; transition:transform .12s ease, background .15s ease;}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--emerald); color:#fff}
  .btn-primary:hover{background:var(--emerald-d)}
  .btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
  .btn-ghost:hover{background:var(--ink); color:var(--paper)}
  .btn svg{width:17px;height:17px}
  .btn-sm{padding:10px 16px; font-size:14.5px}

  /* ---------- Hero ---------- */
  .hero{padding-block:64px 72px}
  .hero-grid{display:grid; grid-template-columns:1.25fr .9fr; gap:40px; align-items:center}
  @media(max-width:860px){ .hero-grid{grid-template-columns:1fr; gap:24px} .hero{padding-block:32px 44px} }
  .hero h1{font-size:clamp(30px,7vw,60px); font-weight:800}
  .hero h1 .hl{color:var(--emerald)}
  .hero p.lede{font-size:clamp(17px,2.2vw,20px); color:var(--muted); max-width:38ch; margin:20px 0 28px}
  .cta-row{display:flex; gap:12px; flex-wrap:wrap}
  .hero-id{font-size:13.5px; color:var(--muted); margin-top:18px; max-width:46ch}
  .hero-id strong{color:var(--emerald); font-weight:600}
  .deadline-chip{display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
    background:var(--paper-2); border:1px solid var(--sage); border-radius:999px;
    padding:7px 14px 7px 10px; font-size:13.5px; font-weight:500;}
  .pulse{width:9px;height:9px;border-radius:50%;background:var(--clay); position:relative; flex:none}
  .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--clay);animation:pulse 2s infinite}
  @keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(3);opacity:0}100%{opacity:0}}
  @media (prefers-reduced-motion: reduce){ .pulse::after{animation:none} }
  .print-wrap{display:flex; justify-content:center}
  #print{width:100%; max-width:330px; height:auto; overflow:visible}
  #print path{fill:none; stroke:var(--emerald); stroke-width:1.4; opacity:.9}
  .print-cap{text-align:center; font-family:"IBM Plex Mono"; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:8px}
  @media(max-width:860px){ #print{max-width:200px} }
  .reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} }

  /* ---------- Deadline strip ---------- */
  .strip{background:var(--band-bg); color:var(--band-text); border:0}
  .strip .wrap{display:flex; gap:22px 28px; flex-wrap:wrap; align-items:baseline; justify-content:space-between; padding-top:26px;padding-bottom:26px}
  .strip .item{display:flex; flex-direction:column; gap:2px}
  .strip .k{font-family:"IBM Plex Mono"; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--band-muted)}
  .strip .v{font-family:"Archivo"; font-weight:700; font-size:19px}
  .strip .v.hot{color:var(--amber)}
  .strip a{color:var(--band-text)}
  @media(max-width:600px){ .strip .wrap{display:grid; grid-template-columns:1fr 1fr; gap:18px} }
  @media(max-width:380px){ .strip .wrap{grid-template-columns:1fr} }

  /* ---------- Section head ---------- */
  .shead{max-width:60ch; margin-bottom:34px}
  .shead h2{font-size:clamp(26px,4vw,38px); font-weight:700; margin:12px 0 12px}
  .shead p{color:var(--muted); margin:0}

  /* ---------- Steps ---------- */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  @media(max-width:760px){ .steps{grid-template-columns:1fr} }
  .step{background:var(--card); border:1px solid var(--sage); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
  .step .num{font-family:"IBM Plex Mono"; font-weight:600; color:var(--emerald); font-size:13px; letter-spacing:.1em}
  .step h3{font-size:19px; margin:10px 0 8px; font-weight:600; font-family:"Archivo"}
  .step p{margin:0; font-size:15px; color:var(--muted)}
  .step a{font-weight:600}
  .linkline{margin-top:24px; display:flex; flex-wrap:wrap; gap:10px}
  .pill{display:inline-flex;align-items:center;gap:7px;background:var(--paper-2);border:1px solid var(--sage);border-radius:10px;padding:10px 14px;font-size:14px;font-weight:500;text-decoration:none;color:var(--ink)}
  .pill:hover{border-color:var(--emerald);color:var(--emerald-d)}
  .pill svg{width:14px;height:14px;opacity:.7}

  /* ---------- Accordion ---------- */
  .acc{border:1px solid var(--sage); border-radius:var(--radius); overflow:hidden; background:var(--card)}
  .acc details{border-top:1px solid var(--sage)}
  .acc details:first-child{border-top:0}
  .acc summary{list-style:none; cursor:pointer; padding:18px 20px; font-weight:600; font-size:16px; display:flex; justify-content:space-between; gap:16px; align-items:center}
  .acc summary::-webkit-details-marker{display:none}
  .acc summary .plus{flex:none; width:20px;height:20px; position:relative}
  .acc summary .plus::before,.acc summary .plus::after{content:"";position:absolute;background:var(--emerald);transition:transform .2s}
  .acc summary .plus::before{top:9px;left:2px;width:16px;height:2px}
  .acc summary .plus::after{top:2px;left:9px;width:2px;height:16px}
  .acc details[open] summary .plus::after{transform:scaleY(0)}
  .acc .body{padding:0 20px 20px; color:var(--muted); font-size:15.5px}
  .acc .body b{color:var(--ink)}

  /* ---------- Quick-fix finder ---------- */
  .fixfinder label{display:block; font-weight:600; font-size:15px; margin-bottom:8px}
  .fixfinder select{max-width:560px; font-family:"Public Sans"; font-size:16px; color:var(--ink);
    background:var(--card); border:2px solid var(--sage); border-radius:10px; padding:12px 34px 12px 13px; width:100%;
    appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2354615A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center}
  .fixfinder select:focus{border-color:var(--emerald); outline:none}
  .fix-panel{display:none; margin-top:20px; background:var(--card); border:1px solid var(--sage); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
  .fix-panel.show{display:block}
  .fix-panel h3{font-family:"Archivo"; font-size:18px; margin-bottom:14px}
  .fix-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
  .fix-list li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink)}
  .fix-list .tick{flex:none; width:22px; height:22px; border-radius:50%; background:rgba(21,115,71,.12); display:flex; align-items:center; justify-content:center; margin-top:1px}
  .fix-list .tick svg{width:13px; height:13px; stroke:var(--emerald)}
  .fix-foot{margin-top:16px; padding-top:14px; border-top:1px solid var(--sage); font-size:14.5px; color:var(--muted)}
  .fix-foot a{font-weight:600}

  /* ---------- Form ---------- */
  .form-card{background:var(--card); border:1px solid var(--sage); border-radius:18px; padding:26px; box-shadow:var(--shadow)}
  @media(max-width:680px){ .form-card{padding:20px 18px} }
  fieldset{border:0; margin:0 0 22px; padding:0; min-width:0}
  legend{font-family:"Public Sans"; font-weight:600; font-size:16px; padding:0; margin-bottom:4px}
  .hint{color:var(--muted); font-size:14px; margin:0 0 12px}
  .form-group{margin-bottom:22px}
  label{font-size:15px; font-weight:600; display:block; margin-bottom:7px}
  label .opt{font-weight:400; color:var(--muted)}
  input[type=text],input[type=tel],input[type=email],select,textarea{
    font-family:"Public Sans"; font-size:16px; color:var(--ink);
    background:var(--card); border:2px solid var(--sage); border-radius:10px; padding:12px 13px; width:100%; max-width:100%;}
  select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2354615A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px}
  textarea{min-height:96px; resize:vertical}
  input:focus,select:focus,textarea:focus{border-color:var(--emerald)}

  /* radios */
  .opts{display:flex; flex-direction:column; gap:10px}
  .opt-radio{display:flex; align-items:center; gap:12px; border:2px solid var(--sage);
    border-radius:11px; padding:13px 15px; cursor:pointer; font-weight:500; font-size:15.5px;
    min-height:48px; transition:border-color .12s ease, background .12s ease}
  .opt-radio:hover{border-color:var(--emerald)}
  .opt-radio input{width:20px; height:20px; accent-color:var(--emerald); flex:none; margin:0; cursor:pointer}
  .opt-radio:has(input:checked){border-color:var(--emerald); background:rgba(21,115,71,.06)}

  /* date d/m/y */
  .dmy{display:flex; gap:16px; flex-wrap:wrap}
  .dmy .u{display:flex; flex-direction:column; gap:6px}
  .dmy label{margin:0; font-weight:500; font-size:14px}
  .dmy input{width:70px}
  .dmy input.yr{width:92px}

  /* consent + privacy */
  .consent{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink)}
  .consent input{margin-top:2px; width:22px;height:22px; accent-color:var(--emerald); flex:none}
  .consent label{font-weight:400; margin:0}
  .privacy-note{font-size:13px; color:var(--muted); background:var(--paper-2); border:1px solid var(--sage); border-radius:10px; padding:12px 14px; display:flex; gap:10px}
  .privacy-note svg{width:16px;height:16px;flex:none;margin-top:2px;stroke:var(--emerald)}
  .hp{position:absolute; left:-9999px}

  /* errors */
  .form-group.error, fieldset.error{border-left:4px solid var(--error); padding-left:14px}
  .error-msg{display:none; color:var(--error-text); font-weight:600; font-size:14.5px; margin:0 0 10px}
  .error-msg.show{display:block}
  .error-summary{border:4px solid var(--error); border-radius:8px; padding:20px 22px; margin-bottom:26px}
  .error-summary h3{font-family:"Archivo"; font-size:20px; color:var(--error-text); margin-bottom:10px}
  .error-summary ul{margin:0; padding-left:18px}
  .error-summary a{color:var(--error-text); font-weight:600}

  .success{display:none; text-align:center; padding:20px 8px}
  .success svg{width:46px;height:46px;stroke:var(--emerald);margin-bottom:8px}
  .success h3{font-family:"Archivo";font-size:24px;margin-bottom:8px}
  .success p{color:var(--muted);max-width:44ch;margin:0 auto 18px}

  /* ---------- Dashboard ---------- */
  .dash{display:grid; grid-template-columns:.85fr 1.15fr; gap:26px; align-items:start}
  @media(max-width:820px){ .dash{grid-template-columns:1fr} }
  .totalcard{background:var(--band-bg); color:var(--band-text); border-radius:18px; padding:26px}
  .totalcard .k{font-family:"IBM Plex Mono";font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--band-muted)}
  .totalcard .big{font-family:"Archivo"; font-weight:800; font-size:60px; line-height:1; margin:8px 0 4px}
  .tally{font-family:"IBM Plex Mono"; color:var(--amber); font-size:15px; letter-spacing:2px; margin-top:12px; word-break:break-all; min-height:22px}
  .totalcard .sub{font-size:13.5px; color:var(--band-sub); margin-top:14px}
  .barlist{display:flex; flex-direction:column; gap:14px}
  .bar-row .toprow{display:flex; justify-content:space-between; gap:14px; font-size:14.5px; margin-bottom:6px; font-weight:500}
  .bar-row .toprow .n{font-family:"IBM Plex Mono"; color:var(--muted); flex:none}
  .bar-row .toprow>span:first-child{min-width:0; overflow-wrap:anywhere}
  .track{height:12px; background:var(--paper-2); border-radius:8px; overflow:hidden; border:1px solid var(--sage)}
  .fill{height:100%; width:0; background:var(--clay); border-radius:8px; transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
  .fill.a{background:var(--amber)} .fill.e{background:var(--emerald)}
  .states-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin-top:6px}
  @media(max-width:520px){.states-grid{grid-template-columns:1fr}}
  .st{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px dashed var(--sage);padding:6px 0}
  .st .n{font-family:"IBM Plex Mono";color:var(--muted)}
  .sample-tag{display:inline-flex;align-items:center;gap:7px;font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8a6410;background:rgba(223,162,60,.16);border:1px solid rgba(223,162,60,.5);padding:4px 9px;border-radius:7px;margin-bottom:18px}

  /* ---------- Why / footer ---------- */
  .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  @media(max-width:760px){.why-grid{grid-template-columns:1fr}}
  .why-card{background:var(--card);border:1px solid var(--sage);border-radius:var(--radius);padding:22px}
  .why-card h3{font-family:"Archivo";font-size:18px;margin-bottom:8px}
  .why-card p{margin:0;color:var(--muted);font-size:15px}
  footer{background:var(--band-bg);color:var(--band-text);border-top:0}
  footer .wrap{padding:44px 22px;display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:flex-start}
  footer .brand{color:var(--band-text)}
  footer a{color:var(--band-muted)}
  footer .fnote{max-width:44ch;font-size:14px;color:var(--band-muted);margin-top:12px}
  .ig{display:inline-flex;align-items:center;gap:8px;color:var(--band-text);text-decoration:none;font-weight:600;font-size:15px}
  .ig svg{width:18px;height:18px}

  /* back to top */
  .to-top{position:fixed; right:18px; bottom:18px; z-index:40; background:var(--band-bg); color:var(--band-text);
    border:0; border-radius:12px; padding:11px 14px; font-family:"Public Sans"; font-weight:600; font-size:14px;
    cursor:pointer; box-shadow:var(--shadow); display:none; align-items:center; gap:7px; text-decoration:none}
  .to-top.show{display:inline-flex}
  .to-top svg{width:15px;height:15px}

  @media(max-width:600px){ .wrap{padding-inline:20px} .section{padding-block:48px} .deadline-chip{border-radius:12px; align-items:flex-start} .deadline-chip .pulse{margin-top:5px} }

  /* ---------- Hero deadline highlight + trust badge ---------- */
  .deadline-chip b.hot{ color:var(--clay); font-weight:700 }
  .trust-badge{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); margin:0 0 14px }

  /* ---------- Restructured strip ---------- */
  .strip-inner{ display:flex; flex-wrap:wrap; gap:14px 44px; align-items:center;
    justify-content:space-between; padding-top:26px; padding-bottom:26px }
  .strip-deadline{ display:flex; flex-direction:column; gap:3px }
  .strip-deadline .k{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--band-muted) }
  .strip-deadline .v-big{ font-family:"Archivo",sans-serif; font-weight:800; font-size:30px;
    line-height:1; color:var(--amber) }
  .strip-note{ font-size:15px; color:var(--band-text) }
  .strip-note p{ margin:0 }
  .strip-note .small{ font-size:13px; color:var(--band-muted); margin-top:6px }
  .strip-note a{ color:var(--band-text) }

  /* ---------- Compact issues counter ---------- */
  .counter-inner{ display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center;
    justify-content:space-between; background:var(--card); border:1px solid var(--sage);
    border-radius:var(--radius); padding:20px 24px; box-shadow:var(--shadow); margin-top:30px }
  .counter-inner .k{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px }
  .counter-num{ font-family:"Archivo",sans-serif; font-weight:800; font-size:42px; line-height:1; color:var(--emerald) }

  /* ---------- Data page: stat pair ---------- */
  .stat-row{ display:flex; gap:14px; flex-wrap:wrap }
  .stat-box{ flex:1 1 150px; background:var(--band-bg); color:var(--band-text); border-radius:16px; padding:22px }
  .stat-box .k{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--band-muted) }
  .stat-box .big{ font-family:"Archivo",sans-serif; font-weight:800; font-size:46px; line-height:1; margin-top:8px }
  .data-caption{ font-size:13px; color:var(--muted); margin-top:14px }

  /* current-page indicator in nav */
  nav.top a[aria-current="page"]{ color:var(--emerald-d); opacity:1; font-weight:600 }

  /* ---------- Category hub + guide pages ---------- */
  .cat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
  @media(max-width:680px){ .cat-grid{ grid-template-columns:1fr } }
  .cat-card{ display:block; background:var(--card); border:1px solid var(--sage); border-radius:var(--radius);
    padding:22px; box-shadow:var(--shadow); text-decoration:none; color:var(--ink);
    transition:border-color .12s ease, transform .12s ease }
  .cat-card:hover{ border-color:var(--emerald); transform:translateY(-2px) }
  .cat-card h3{ font-family:"Archivo",sans-serif; font-size:19px; margin:0 0 6px }
  .cat-card p{ margin:0; color:var(--muted); font-size:15px }
  .cat-card .go{ display:inline-block; margin-top:12px; color:var(--emerald-d); font-weight:600; font-size:14.5px }
  .crumb{ font-size:14px; margin-bottom:14px }
  .crumb a{ color:var(--emerald-d); font-weight:600 }
  .crumb span{ color:var(--muted) }
  .draft-note{ display:flex; gap:10px; align-items:flex-start; background:rgba(223,162,60,.14);
    border:1px solid rgba(223,162,60,.55); border-radius:10px; padding:12px 14px; font-size:14px;
    color:var(--ink); margin-bottom:26px }
  .need-box{ background:var(--paper-2); border:1px solid var(--sage); border-radius:12px; padding:18px 20px; margin:20px 0 }
  .need-box h3{ font-family:"Archivo",sans-serif; font-size:17px; margin:0 0 10px }
  .need-box ul{ margin:0; padding-left:20px; color:var(--ink) }
  .need-box li{ margin:6px 0 }
  .guide-steps{ counter-reset:gs; list-style:none; padding:0; margin:18px 0 }
  .guide-steps > li{ counter-increment:gs; position:relative; padding:2px 0 20px 46px; color:var(--ink) }
  .guide-steps > li::before{ content:counter(gs); position:absolute; left:0; top:0; width:30px; height:30px;
    border-radius:50%; background:var(--emerald); color:#fff; font-family:"Archivo",sans-serif; font-weight:700;
    display:flex; align-items:center; justify-content:center; font-size:15px }
@media (prefers-color-scheme: dark){
  .guide-steps > li::before{ color:#08110B }
}

  /* ---------- Two-branch guidance ---------- */
  .startbox{ background:var(--band-bg); color:var(--band-text); border-radius:16px; padding:20px 24px; margin-bottom:22px; display:flex; gap:14px 20px; flex-wrap:wrap; align-items:center; justify-content:space-between }
  .startbox .k{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--band-muted) }
  .startbox h3{ font-family:"Archivo",sans-serif; font-size:20px; margin:4px 0 0 }
  .choose-row{ display:flex; gap:12px; flex-wrap:wrap; margin:4px 0 30px }
  .branch{ background:var(--card); border:1px solid var(--sage); border-radius:16px; padding:24px; box-shadow:var(--shadow); margin-bottom:20px }
  @media(max-width:600px){ .branch{ padding:20px 18px } }
  .branch-tag{ display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--emerald-d); background:rgba(21,115,71,.1); padding:4px 10px; border-radius:999px; margin-bottom:10px }
  .branch h3.branch-title{ font-family:"Archivo",sans-serif; font-size:22px; margin:0 0 4px }
  .branch > p.lead{ color:var(--muted); margin:0 0 6px }
  .fork{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 4px }
  @media(max-width:600px){ .fork{ grid-template-columns:1fr } }
  .fork-opt{ border:1px solid var(--sage); border-radius:12px; padding:14px 16px; background:var(--paper-2) }
  .fork-opt b{ display:block; margin-bottom:4px }
  .fork-opt p{ margin:0; color:var(--muted); font-size:14.5px }
  .fork-opt a{ font-weight:600; font-size:14.5px; display:inline-block; margin-top:6px }
  .need-list{ list-style:none; padding:0; margin:10px 0 0 }
  .need-list li{ padding:11px 0; border-top:1px dashed var(--sage); font-size:15.5px }
  .need-list li:first-child{ border-top:0 }
  .need-list a{ font-weight:600 }
  .need-list .tip{ color:var(--muted); font-size:14px; display:block; margin-top:2px }
@media (prefers-color-scheme: dark){
  .branch-tag{ background:rgba(70,184,126,.16) }
}

  /* ---------- Path chooser as text links ---------- */
  .path-links{ list-style:none; padding:0; margin:0 0 30px }
  .path-links li{ padding:9px 0; border-top:1px solid var(--sage) }
  .path-links li:first-child{ border-top:0 }
  .path-links a{ font-size:17px; font-weight:600; color:var(--emerald-d); text-decoration:underline; text-underline-offset:3px }
  .path-links a:hover{ color:var(--emerald) }

  .acc .body p{ margin:0 0 8px }
  .acc .body ul{ margin:0 0 10px; padding-left:20px }
  .acc .body li{ margin:5px 0 }
  .acc .body a{ font-weight:600 }

  /* ---------- Share this guide ---------- */
  .share-box{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:space-between;
    background:var(--paper-2); border:1px solid var(--sage); border-radius:16px; padding:20px 24px; margin-top:32px }
  .share-box .k{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
  .share-box .lead2{ margin:4px 0 0; font-weight:600; font-size:16px }
  .share-actions{ display:flex; gap:10px; flex-wrap:wrap }
  .btn.btn-wa{ background:#25D366; color:#04310f; border-color:#25D366 }
  .btn.btn-wa:hover{ filter:brightness(.96) }