/* CompareSG house style v1.1 (2026-09-21). Extracted from the beginner piano report, 2026-09-20.
   v1.1: .two and .two-col use min(...,100%) so cards never overflow a 320px screen.
   Fixed system: change only the accent colour, icons and copy per vertical. */
:root{
  --bg:#f6ecd6; --paper:#fffaf0; --ink:#231c17; --muted:#6a5f54;
  --accent:#2b5fd9; --accent-ink:#ffffff;
  --marigold:#f4b93a; --pandan:#7cc7a0; --rose:#f0a3b3; --blue:#a9c1f7; --tomato:#e2552f;
  --shadow:#231c17; --track:#efe3c6; --hatch:rgba(255,255,255,.65); --tick:rgba(35,28,23,.30);
  --display:"Chewy","Fredoka One","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#171310; --paper:#221c18; --ink:#f4e9d5; --muted:#b8ab9a;
    --accent:#7ea6ff; --accent-ink:#0d1731;
    --marigold:#7a5a12; --pandan:#215a41; --rose:#6c3444; --blue:#233a73; --tomato:#ff8a66;
    --shadow:#050403; --track:#2c241e; --hatch:rgba(0,0,0,.45); --tick:rgba(244,233,213,.30);
  }
}
:root[data-theme="dark"]{
  --bg:#171310; --paper:#221c18; --ink:#f4e9d5; --muted:#b8ab9a;
  --accent:#7ea6ff; --accent-ink:#0d1731;
  --marigold:#7a5a12; --pandan:#215a41; --rose:#6c3444; --blue:#233a73; --tomato:#ff8a66;
  --shadow:#050403; --track:#2c241e; --hatch:rgba(0,0,0,.45); --tick:rgba(244,233,213,.30);
}
*{box-sizing:border-box}
html{scroll-padding-top:12px}
body{overflow-x:hidden;margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:4px}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;margin:0}
h1{font-size:clamp(1.9rem,5.2vw,3rem);letter-spacing:.005em}
h2{font-size:clamp(1.7rem,4vw,2.4rem);margin-bottom:.35em}
h3{font-size:1.35rem}
p{margin:.55em 0}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0 4px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:1.5rem;color:var(--accent);text-decoration:underline dotted;text-decoration-thickness:3px;text-underline-offset:5px}
.brand .ico{width:30px;height:30px;color:var(--ink)}
.err{font-size:.95rem}
.hero{padding:10px 0 8px}
.hero .sub{font-family:var(--display);font-size:clamp(1.2rem,3vw,1.6rem);color:var(--muted);margin:.35em 0 .2em}
.meta{font-weight:700;margin:.6em 0}
.summary{font-size:1.05rem;font-weight:700;max-width:62ch;margin:.5em 0 .9em}
.card{background:var(--paper);border:3px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--shadow);padding:16px 18px;transform:rotate(var(--tilt,0deg))}
.t1{--tilt:-1deg}.t2{--tilt:.9deg}.t3{--tilt:-.5deg}.t4{--tilt:1.3deg}
.c-marigold{background:var(--marigold)}.c-pandan{background:var(--pandan)}.c-rose{background:var(--rose)}.c-blue{background:var(--blue)}
.c-marigold,.c-pandan,.c-rose,.c-blue{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .c-marigold,:root:not([data-theme="light"]) .c-pandan,:root:not([data-theme="light"]) .c-rose,:root:not([data-theme="light"]) .c-blue{color:#f4e9d5}}
:root[data-theme="dark"] .c-marigold,:root[data-theme="dark"] .c-pandan,:root[data-theme="dark"] .c-rose,:root[data-theme="dark"] .c-blue{color:#f4e9d5}
.c-marigold a,.c-pandan a,.c-rose a,.c-blue a{color:inherit}
.ladderbox{padding:18px 18px 14px;margin:6px 0 10px;--tilt:0deg}
.ladderbox h2{margin-bottom:.05em;font-size:clamp(1.5rem,3.6vw,2rem)}
.ladder{list-style:none;margin:8px 0 0;padding:0}
.ladder li{display:grid;grid-template-columns:2rem minmax(0,1.25fr) minmax(0,1.6fr) 8.2rem;gap:6px 14px;align-items:center;padding:9px 0;border-top:2px solid var(--track)}
.ladder li.axis{border-top:0;padding:0 0 2px}
.axisline{position:relative;height:1.3em;font-size:.82rem;color:var(--muted);font-weight:700}
.axisline span{position:absolute;transform:translateX(-100%);white-space:nowrap;padding-right:2px}
.rank{font-family:var(--display);font-size:1.5rem;text-align:center;line-height:1}
.who a{font-weight:800;font-size:1.05rem}
.note{display:block;font-size:.88rem;color:var(--muted);line-height:1.35}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.tag{font-size:.78rem;font-weight:800;border:2px solid var(--ink);border-radius:999px;padding:0 8px;background:var(--bg)}
.track{position:relative;height:30px;background:var(--track);border:3px solid var(--ink);border-radius:10px;overflow:hidden}
.track::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to right,transparent calc(var(--t1,50%) - 1px),var(--tick) calc(var(--t1,50%) - 1px),var(--tick) var(--t1,50%),transparent var(--t1,50%)),
  linear-gradient(to right,transparent calc(var(--t2,75%) - 1px),var(--tick) calc(var(--t2,75%) - 1px),var(--tick) var(--t2,75%),transparent var(--t2,75%))}
.fill{height:100%;background:var(--accent);border-right:3px solid var(--ink)}
.fill.hatch{background-image:repeating-linear-gradient(135deg,transparent 0 6px,var(--hatch) 6px 10px)}
.price{text-align:right;line-height:1.2}
.price strong{font-family:var(--display);font-weight:400;font-size:1.55rem;display:block}
.price span{font-size:.8rem;color:var(--muted);font-weight:700}
.legend{font-size:.88rem;color:var(--muted);margin:10px 0 2px}
.legend i{display:inline-block;width:26px;height:12px;vertical-align:-1px;border:2px solid var(--ink);border-radius:4px;margin-right:6px;background:var(--accent)}
.legend i.h{background-image:repeating-linear-gradient(135deg,transparent 0 4px,var(--hatch) 4px 7px)}
section{padding:26px 0 6px}
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:16px 4px 4px}
.stat{text-align:center;padding:14px 10px}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:2.3rem;line-height:1.05}
.stat span{font-size:.92rem;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;margin:18px 4px 6px}
.two-col{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.fact p{margin:.35em 0}
.fhead{display:flex;align-items:center;gap:10px}
.ico{width:34px;height:34px;flex:none}
.foot{font-size:.9rem;font-weight:700}
.src{font-size:.8rem;opacity:.85}
.band .big{font-family:var(--display);font-size:1.9rem;margin:.1em 0}
.names{font-size:.9rem;font-weight:700}
.tablewrap{overflow-x:auto;margin:10px 0 4px;background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
caption{text-align:left;padding:10px 14px;font-weight:800;font-size:1rem}
th,td{padding:8px 14px;text-align:left;vertical-align:top;border-top:2px solid var(--track)}
thead th{border-top:0;font-weight:800;background:var(--track)}
td.na{color:var(--muted)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:22px;margin:14px 4px}
.boring{margin:44px 0 20px;padding:24px 22px;background:transparent;border:3px dashed var(--ink);border-radius:8px}
.boring h2{font-family:var(--body);font-weight:900;font-size:1.6rem}
.boring h3{font-family:var(--body);font-weight:900;font-size:1.05rem;margin-top:1.3em}
.boring ul{padding-left:1.2em}
.boring li{margin:.3em 0}
details.who-we{margin-top:14px}
details.who-we summary{cursor:pointer;font-weight:800}
footer{padding:20px 0 46px;font-weight:700}
footer .brand{font-size:1.2rem}
.cta{font-size:1.15rem;margin-top:.8em}
.vis{position:absolute;left:-9999px}
@media (max-width:720px){
  body{font-size:16px}
  .ladder li{grid-template-columns:1.6rem minmax(0,1fr) auto;grid-template-areas:"rank who price" "track track track"}
  .ladder li .rank{grid-area:rank}.ladder li .who{grid-area:who}.ladder li .price{grid-area:price}.ladder li .track{grid-area:track}
  .ladder li.axis{display:none}
  .ladder .note{display:none}
  .ladder .price span{display:none}
  .ladder li .who a{font-size:1rem}
  .ladder li{padding:7px 0}
  .ladderbox{padding:14px 14px 10px}
  .glance,.grid,.two{margin-right:10px;margin-left:0}
  h1{font-size:1.75rem}
  .summary{font-size:.95rem;margin:.4em 0 .7em}
  .ladderbox h2{font-size:1.35rem}
  .ladderbox > .note{font-size:.82rem}
  .ladder .who{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
  .ladder .tags{margin-top:0}
  .ladder li .who a{font-size:.98rem}
  .rank{font-size:1.25rem}
  .price strong{font-size:1.35rem}
  .card{box-shadow:4px 4px 0 var(--shadow)}
  .card{--tilt:0deg;transform:none}
}


/* ==========================================================================
   CompareSG site additions (v1, 2026-09-21).
   Loaded AFTER csg-house-style.css, which is unchanged. This file only adds
   what a multi-page site needs: navigation, the home page, forms, prose pages.
   Every colour comes from the house tokens, so light and dark mode just work.
   ========================================================================== */

/* Per-report accents. Same mechanism the reports use: only tokens change. */
.acc-blue{--accent:#2b5fd9;--accent-ink:#ffffff}
.acc-rose{--accent:#b3225a;--accent-ink:#ffffff}
.acc-tomato{--accent:#e2552f;--accent-ink:#ffffff}
.acc-pandan{--accent:#1f8a5f;--accent-ink:#ffffff}
.acc-caramel{--accent:#b3792f;--accent-ink:#ffffff}
.acc-marigold{--accent:#c9932a;--accent-ink:#231c17}
.acc-mint{--accent:#1b8a8a;--accent-ink:#ffffff}
.acc-lavender{--accent:#6c5ba6;--accent-ink:#ffffff}
.acc-olive{--accent:#5f6b12;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .acc-blue{--accent:#7ea6ff;--accent-ink:#0d1731}
  :root:not([data-theme="light"]) .acc-rose{--accent:#ff8fb1;--accent-ink:#3a0a1c}
  :root:not([data-theme="light"]) .acc-tomato{--accent:#ff8a66;--accent-ink:#2a0d04}
  :root:not([data-theme="light"]) .acc-pandan{--accent:#6fe3ae;--accent-ink:#062a1c}
  :root:not([data-theme="light"]) .acc-caramel{--accent:#e0a868;--accent-ink:#2a1704}
  :root:not([data-theme="light"]) .acc-marigold{--accent:#f4c76b;--accent-ink:#2a1c04}
  :root:not([data-theme="light"]) .acc-mint{--accent:#7de9e9;--accent-ink:#04302e}
  :root:not([data-theme="light"]) .acc-lavender{--accent:#b8a9e8;--accent-ink:#241c3d}
  :root:not([data-theme="light"]) .acc-olive{--accent:#cfe07a;--accent-ink:#1f2604}
}
:root[data-theme="dark"] .acc-blue{--accent:#7ea6ff;--accent-ink:#0d1731}
:root[data-theme="dark"] .acc-rose{--accent:#ff8fb1;--accent-ink:#3a0a1c}
:root[data-theme="dark"] .acc-tomato{--accent:#ff8a66;--accent-ink:#2a0d04}
:root[data-theme="dark"] .acc-pandan{--accent:#6fe3ae;--accent-ink:#062a1c}
:root[data-theme="dark"] .acc-caramel{--accent:#e0a868;--accent-ink:#2a1704}
:root[data-theme="dark"] .acc-marigold{--accent:#f4c76b;--accent-ink:#2a1c04}
:root[data-theme="dark"] .acc-mint{--accent:#7de9e9;--accent-ink:#04302e}
:root[data-theme="dark"] .acc-lavender{--accent:#b8a9e8;--accent-ink:#241c3d}
:root[data-theme="dark"] .acc-olive{--accent:#cfe07a;--accent-ink:#1f2604}

/* Line icons (the house icons are line drawings too) */
.ico.line,svg.line{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Skip link */
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:8px;z-index:20;background:var(--paper);color:var(--ink);padding:8px 12px;border:3px solid var(--ink);border-radius:10px}

/* Header navigation */
.top .nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;font-weight:800;font-size:.98rem}
.top .nav a[aria-current="page"]{text-decoration-style:wavy}

/* Home */
.homehero{padding:14px 0 6px}
.homehero h1{font-size:clamp(2.2rem,6.2vw,3.7rem);text-wrap:balance}
.lede{font-size:1.15rem;font-weight:700;max-width:56ch;margin:.7em 0 .3em}
.kicker{font-family:var(--display);font-size:1.05rem;color:var(--muted);margin:0 0 2px}
.ladderbox .cta-row{margin:14px 0 4px}
.sectionhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.sectionhead .note{font-size:.95rem}

/* Home hero: headline on the left, one big sticker on the right (no dead space) */
.herosplit{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:center}
.herosticker[hidden]{display:none}
.herosticker{display:block;text-decoration:none;--tilt:2.2deg;padding:20px 22px;margin:6px 6px 6px 0}
.herosticker:hover{box-shadow:7px 7px 0 var(--shadow)}
.herosticker:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.herosticker .kicker{display:block;color:inherit;font-family:var(--body);font-weight:900;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px}
.herosticker .bigstat{display:block;color:inherit;font-size:clamp(2rem,4.6vw,2.9rem);margin:.1em 0 .1em}
.herosticker .statlabel{display:block}
.herosticker .go{display:block;margin-top:6px;color:inherit}

/* Buttons */
.btn{display:inline-block;font-family:var(--display);font-size:1.2rem;line-height:1.1;background:var(--accent);color:var(--accent-ink);
  border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--shadow);padding:9px 16px;text-decoration:none;cursor:pointer}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--shadow)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow)}
.card .btn{color:var(--accent-ink)}
.btn:focus-visible{outline:3px solid var(--marigold);outline-offset:3px}

/* Report cards (whole card is one link, via a stretched pseudo-element) */
.bigstat{font-family:var(--display);font-size:clamp(1.7rem,4.4vw,2rem);line-height:1.05;color:var(--accent);margin:.35em 0 0}
.statlabel{font-weight:700;margin:.15em 0 .5em}
.go{margin-top:auto;padding-top:10px;font-family:var(--display);font-size:1.15rem;color:var(--ink)}

/* Principle cards on the home page */
.principles{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.principles h3{font-size:1.25rem}

/* Two cards side by side (min() keeps 320px screens from overflowing) */
.pair{align-items:start;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px;margin:14px 4px}

/* Tag list (planned verticals) */
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px;padding:0;list-style:none}
.tagrow .tag{font-size:.9rem;padding:2px 12px}

/* Long-form pages */
.pagehead{padding:14px 0 4px}
.pagehead h1{max-width:20ch}
.prose{max-width:70ch}
.prose h2{margin-top:1.7em;font-size:clamp(1.5rem,3.4vw,2rem)}
.prose h3{margin-top:1.3em}
.prose ul{padding-left:1.2em}
.prose li{margin:.35em 0}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px;padding:0;list-style:none}
.toc a{display:inline-block;font-size:.85rem;font-weight:800;border:2px solid var(--ink);border-radius:999px;padding:2px 12px;background:var(--paper);text-decoration:none;color:var(--ink)}
.toc a:hover{background:var(--marigold)}
.pledge{margin:26px 4px 10px}
.pledge h3{font-size:1.5rem;margin-bottom:.2em}
.corr{margin:14px 0}
.corr table{min-width:0}

/* Forms */
.formcard{max-width:640px;margin:18px 4px 10px;--tilt:0deg}
.field{margin:0 0 18px}
.field label{display:block;font-weight:800;margin-bottom:6px}
.field .hint{display:block;font-weight:600;color:var(--muted);font-size:.9rem;margin-top:2px}
.field input,.field select,.field textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:3px solid var(--ink);border-radius:12px;padding:10px 12px}
.field textarea{min-height:150px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.honey{position:absolute;left:-9999px;height:0;overflow:hidden}

/* Footer: links on the left, a contact card on the right */
.formcard + .foot{margin-top:16px}
.footgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:26px;align-items:start}
.footcard{margin:4px 6px 0 0;--tilt:1.2deg;padding:16px 20px}
.footcard p{margin:.4em 0}
.footcard .cta{font-size:1.1rem;margin:.2em 0 .5em}
.footcard .mailline{font-weight:800}
.mailline{margin:.5em 0}
.footcard .byline{font-size:.95rem;font-weight:700}
.footnav{display:flex;flex-wrap:wrap;gap:4px 18px;margin:.5em 0}
.sitefoot .src{font-weight:600;font-size:.88rem;color:var(--muted);max-width:60ch}

/* "More reports" line inside a report's footer */
.morereports{font-size:.95rem}

/* 404 */
.lost{text-align:center;padding:40px 0 20px}
.lost .bigstat{font-size:clamp(3rem,14vw,6rem);color:var(--tomato)}

@media (max-width:860px){
  .herosplit{grid-template-columns:1fr}
  .herosticker{display:none}
  .footgrid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .footcard{margin-right:10px;--tilt:0deg;transform:none}
  .top .nav{width:100%;gap:2px 16px;font-size:.92rem}
  .homehero h1{max-width:none}
  .grid.cards,.principles,.pair{margin-right:10px;margin-left:0}
  .formcard{margin-right:10px;margin-left:0}
  .pledge{margin-right:10px;margin-left:0}
}
@media (prefers-reduced-motion: reduce){
  .btn,.btn:hover,.btn:active{transform:none}
}

/* ---- Phone repair (vertical 10): slate accent ---- */
.acc-slate{--accent:#3f5b7a;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-slate{--accent:#a9c3e0;--accent-ink:#0e1a28}}
:root[data-theme="dark"] .acc-slate{--accent:#a9c3e0;--accent-ink:#0e1a28}

/* Ladders published without rank numbers (from vertical 10): three columns instead of four */
.ladder:not(:has(.rank)) li{grid-template-columns:minmax(0,1.25fr) minmax(0,1.6fr) 8.2rem}
@media (max-width:720px){.ladder:not(:has(.rank)) li.row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who price" "track track"}}

/* ---- Comparisons page: search, categories, paging ---- */
.findcount{font-weight:700;color:var(--muted);margin:10px 4px 0;min-height:1.4em}
.nomatch{margin:14px 4px}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 4px;font-weight:800}
.pager button{font:800 .95rem var(--body);border:3px solid var(--ink);border-radius:12px;padding:6px 14px;background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--shadow)}
.pager button[disabled]{opacity:.4;cursor:default;box-shadow:none}
.repcell[hidden]{display:none}
.pager[hidden],.nomatch[hidden]{display:none}

mark{background:var(--marigold);color:var(--ink);border-radius:4px;padding:0 2px}
.kwmatch{font-size:.88rem;font-weight:700;margin:.4em 0 0}

/* Home rotating card: each comparison in its own colour */
.herosticker.tint{background:color-mix(in srgb,var(--accent) 26%,var(--paper));color:var(--ink)}
.herosticker.tint .bigstat{color:var(--ink)}

/* No rank numbers on any ladder (home page featured ladder included) */
.ladder .rank{display:none}.ladder:has(.rank) li.axis>:first-child{display:none}
.ladder:has(.rank) li{grid-template-columns:minmax(0,1.25fr) minmax(0,1.6fr) 8.2rem}
@media (max-width:720px){.ladder:has(.rank) li.row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who price" "track track"}}

/* pet grooming (24 Sep 2026) */
.acc-plum{--accent:#8a2e82;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-plum{--accent:#e39ad9;--accent-ink:#2a0a26}}
:root[data-theme="dark"] .acc-plum{--accent:#e39ad9;--accent-ink:#2a0a26}
.acc-cherry{--accent:#c0152f;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-cherry{--accent:#ff6b78;--accent-ink:#2a0508}}
:root[data-theme="dark"] .acc-cherry{--accent:#ff6b78;--accent-ink:#2a0508}

/* kids' swimming lessons (25 Sep 2026): pool accent, ocean blue */
.acc-pool{--accent:#0a6fa8;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-pool{--accent:#5cc3f0;--accent-ink:#04202f}}
:root[data-theme="dark"] .acc-pool{--accent:#5cc3f0;--accent-ink:#04202f}
/* massage (vertical 14): teak; foot reflexology (vertical 15): pine */
.acc-teak{--accent:#7d4e34;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-teak{--accent:#e3b08f;--accent-ink:#2a1508}}
:root[data-theme="dark"] .acc-teak{--accent:#e3b08f;--accent-ink:#2a1508}
.acc-pine{--accent:#2f6b45;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-pine{--accent:#8fd6a8;--accent-ink:#06220f}}
:root[data-theme="dark"] .acc-pine{--accent:#8fd6a8;--accent-ink:#06220f}
.acc-heather{--accent:#5b4fb3;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-heather{--accent:#b9b0f5;--accent-ink:#1b1540}}
:root[data-theme="dark"] .acc-heather{--accent:#b9b0f5;--accent-ink:#1b1540}
/* eyelash extensions (vertical 17, 26 Sep 2026): iris, a vivid violet */
.acc-iris{--accent:#7a2cc2;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-iris{--accent:#c79bff;--accent-ink:#1e0838}}
:root[data-theme="dark"] .acc-iris{--accent:#c79bff;--accent-ink:#1e0838}
/* gym membership (vertical 18): iron, a neutral graphite, clear of slate (phone repair) and pool (swimming) */
.acc-iron{--accent:#4d4d52;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-iron{--accent:#c4c4cc;--accent-ink:#17171a}}
:root[data-theme="dark"] .acc-iron{--accent:#c4c4cc;--accent-ink:#17171a}
/* SIM only plans (vertical 19): fuchsia, clear of rose (armpit), plum (pet grooming) and cherry (nail salons) */
.acc-fuchsia{--accent:#b8127f;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-fuchsia{--accent:#ff7fd0;--accent-ink:#3a0626}}
:root[data-theme="dark"] .acc-fuchsia{--accent:#ff7fd0;--accent-ink:#3a0626}
/* Broadband (vertical 20): lime, clear of olive (Brazilian), pandan (aircon) and pine (foot reflexology) */
.acc-lime{--accent:#3d7a0a;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-lime{--accent:#a6e05a;--accent-ink:#1a2a04}}
:root[data-theme="dark"] .acc-lime{--accent:#a6e05a;--accent-ink:#1a2a04}
/* tuition centres (26 Sep 2026): inkblue, a dark school-ink blue; checked by colour distance against every accent */
.acc-inkblue{--accent:#243a6b;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-inkblue{--accent:#a9bdf2;--accent-ink:#0f1a33}}
:root[data-theme="dark"] .acc-inkblue{--accent:#a9bdf2;--accent-ink:#0f1a33}
/* pilates (26 Sep 2026): mauve, a dusty pink-purple; nearest accent (rose) 28.8 apart by colour distance, against 15.3 for the closest existing pair */
.acc-mauve{--accent:#94506e;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-mauve{--accent:#e0a9c2;--accent-ink:#3a1628}}
:root[data-theme="dark"] .acc-mauve{--accent:#e0a9c2;--accent-ink:#3a1628}
/* car servicing (26 Sep 2026): rust, a burnt orange-brown; nearest accent (tomato) 22.1 apart by colour distance, against 15.3 for the closest existing pair */
.acc-rust{--accent:#a4451c;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-rust{--accent:#f0a079;--accent-ink:#3a1206}}
:root[data-theme="dark"] .acc-rust{--accent:#f0a079;--accent-ink:#3a1206}
/* coworking space (vertical 24, 26 Sep 2026): clay. Nearest existing accent rust (CIELAB distance 21.9); 6.6:1 on the paper colour */
.acc-clay{--accent:#9a3b3b;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-clay{--accent:#f29a8e;--accent-ink:#2a0c0a}}
:root[data-theme="dark"] .acc-clay{--accent:#f29a8e;--accent-ink:#2a0c0a}
/* vet clinics (27 Sep 2026): lagoon, nearest accent iron at 21.3 by colour distance; 8.2:1 on the paper colour */
.acc-lagoon{--accent:#085559;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-lagoon{--accent:#69b6bf;--accent-ink:#06262a}}
:root[data-theme="dark"] .acc-lagoon{--accent:#69b6bf;--accent-ink:#06262a}
/* insights (2 Oct 2026): lacquer (Huat insight), nearest accent tomato at 10.3 by colour distance; 5.2:1 on the paper colour; dark #d89c8c, nearest dark accent teak at 10.9 (the proposed #ff8a66 is tomato's dark colour) */
.acc-lacquer{--accent:#c2381a;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-lacquer{--accent:#d89c8c;--accent-ink:#3a1208}}
:root[data-theme="dark"] .acc-lacquer{--accent:#d89c8c;--accent-ink:#3a1208}
/* insights (2 Oct 2026): jade (school CCA insight), nearest accent pine at 10.3 by colour distance; 5.1:1 on the paper colour; dark #1cbf80, nearest dark accent pandan at 17.1 (the proposed #5fd0a0 is 6.9 from pandan) */
.acc-jade{--accent:#16795c;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-jade{--accent:#1cbf80;--accent-ink:#06261a}}
:root[data-theme="dark"] .acc-jade{--accent:#1cbf80;--accent-ink:#06261a}
/* insight (3 Oct 2026): monsoon (rain by area insight), nearest accent slate at 11.1 by colour distance; 7.9:1 on the paper colour; dark #7ab0dd, nearest dark accent pool at 12.3 (the proposed #1f6fae / #7cc4f0 were 4.6 / 6.6 from pool; new colours agreed with Ben) */
.acc-monsoon{--accent:#1a5280;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-monsoon{--accent:#7ab0dd;--accent-ink:#06202e}}
:root[data-theme="dark"] .acc-monsoon{--accent:#7ab0dd;--accent-ink:#06202e}
/* insight (7 Oct 2026): filament (electricity by estate insight), nearest accent caramel at 14.8 by colour distance; 5.0:1 on the paper colour; dark #f2b84b, nearest dark accent marigold at 11.8 */
.acc-filament{--accent:#a35a00;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-filament{--accent:#f2b84b;--accent-ink:#2b1a00}}
:root[data-theme="dark"] .acc-filament{--accent:#f2b84b;--accent-ink:#2b1a00}
/* insight (7 Oct 2026): terracotta (HDB block age insight; the brief's "clay" was taken and too close to copper and caramel), nearest accent copper at 11.7 by colour distance; 8.0:1 on the paper colour; dark #fcba8a, nearest dark accent rust at 10.7 */
.acc-terracotta{--accent:#7e3c00;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-terracotta{--accent:#fcba8a;--accent-ink:#2a1405}}
:root[data-theme="dark"] .acc-terracotta{--accent:#fcba8a;--accent-ink:#2a1405}
/* insight (7 Oct 2026): skyline (tallest HDB block insight; the brief's #5b3f9e and dark #b9a2f0 were too close to heather and lavender), nearest accent heather at 12.2 by colour distance; 8.5:1 on the paper colour; dark #c09cea, nearest dark accent lavender at 11.4; 7.4:1 on the dark paper (Ben, 8 Oct 2026) */
.acc-skyline{--accent:#5a3690;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-skyline{--accent:#c09cea;--accent-ink:#1d1038}}
:root[data-theme="dark"] .acc-skyline{--accent:#c09cea;--accent-ink:#1d1038}
/* house movers (27 Sep 2026): khaki, nearest accent teak at 23.7 by colour distance; 7.0:1 on the paper colour; dark #e8dc3c, nearest dark accent olive at 27.9 */
.acc-khaki{--accent:#595931;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-khaki{--accent:#e8dc3c;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-khaki{--accent:#e8dc3c;--accent-ink:#221c18}
/* LASIK (27 Sep 2026): indigo, nearest accent heather at 25.5 by colour distance; 13.7:1 on the paper colour; dark #ee7fff, nearest dark accent iris at 25.5 */
.acc-indigo{--accent:#3a1466;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-indigo{--accent:#ee7fff;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-indigo{--accent:#ee7fff;--accent-ink:#221c18}
/* eyebrow embroidery (27 Sep 2026): cocoa, nearest accent clay at 22.0 by colour distance; 12.9:1 on the paper colour; dark #ff9932, nearest dark accent tomato at 29.2 */
.acc-cocoa{--accent:#59180d;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-cocoa{--accent:#ff9932;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-cocoa{--accent:#ff9932;--accent-ink:#221c18}
/* teeth whitening (27 Sep 2026): sapphire, nearest accent indigo at 24.5 by colour distance; 12.4:1 on the paper colour; dark #e6f0ff, nearest dark accent iron at 15.8 */
.acc-sapphire{--accent:#161c93;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-sapphire{--accent:#e6f0ff;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-sapphire{--accent:#e6f0ff;--accent-ink:#221c18}
/* car rental (27 Sep 2026): brick, nearest accent cocoa at 20.0 by colour distance; 10.6:1 on the paper colour; dark #f7b825, nearest dark accent cocoa at 22.7 */
.acc-brick{--accent:#593131;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-brick{--accent:#f7b825;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-brick{--accent:#f7b825;--accent-ink:#221c18}
/* health screening (27 Sep 2026): mulberry, nearest accent mauve at 25.3 by colour distance; 13.0:1 on the paper colour; dark #25f7e2, nearest dark accent pandan at 21.2 */
.acc-mulberry{--accent:#590d3e;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-mulberry{--accent:#25f7e2;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-mulberry{--accent:#25f7e2;--accent-ink:#221c18}
/* pet hotel (27 Sep 2026): orchid, nearest accent iris at 23.3 by colour distance; 6.2:1 on the paper colour; dark #bfbb7c, nearest dark accent olive at 22.7 */
.acc-orchid{--accent:#a518a5;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-orchid{--accent:#bfbb7c;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-orchid{--accent:#bfbb7c;--accent-ink:#221c18}
/* buffet catering (27 Sep 2026): aubergine, nearest accent mauve at 20.7 by colour distance; 9.3:1 on the paper colour; dark #cdf725, nearest dark accent khaki at 26.9 */
.acc-aubergine{--accent:#593a59;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-aubergine{--accent:#cdf725;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-aubergine{--accent:#cdf725;--accent-ink:#221c18}
/* photo studios (27 Sep 2026): fern, nearest accent pine at 19.9 by colour distance (the best free colour left; none reaches 20); 8.2:1 on the paper colour; dark #25f725, nearest dark accent aubergine at 45.0 */
.acc-fern{--accent:#0d5914;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-fern{--accent:#25f725;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-fern{--accent:#25f725;--accent-ink:#221c18}
/* plumbers (27 Sep 2026): navy, nearest accent inkblue at 18.4 by colour distance (no free colour reaches 20); 11.2:1 on the paper colour; dark #56aff7, nearest dark accent blue at 16.0 */
.acc-navy{--accent:#13337f;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-navy{--accent:#56aff7;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-navy{--accent:#56aff7;--accent-ink:#221c18}
/* physiotherapy (27 Sep 2026): grape, nearest accent indigo at 19.5 by colour distance (no free colour reaches 20); 9.0:1 on the paper colour; dark #f788ee, nearest dark accent indigo at 13.6 */
.acc-grape{--accent:#672493;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-grape{--accent:#f788ee;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-grape{--accent:#f788ee;--accent-ink:#221c18}
/* dry cleaning (27 Sep 2026): bronze, nearest accent khaki at 19.2 by colour distance (no free colour reaches 20); 7.0:1 on the paper colour; dark #bfa92f, nearest dark accent marigold at 19.7 */
.acc-bronze{--accent:#6b5410;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-bronze{--accent:#bfa92f;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-bronze{--accent:#bfa92f;--accent-ink:#221c18}
/* tcm and acupuncture (28 Sep 2026): claret #6b102b, nearest accent cocoa at 18.8 by colour distance; 11.6:1 on the paper colour; dark #25f783, nearest dark accent fern at 35.7 */
.acc-claret{--accent:#6b102b;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-claret{--accent:#25f783;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-claret{--accent:#25f783;--accent-ink:#221c18}
/* wedding banquets (28 Sep 2026): raspberry #a53a75, nearest accent rose at 18.0 by colour distance; 5.8:1 on the paper colour; dark #56bf60, nearest dark accent lime at 26.1 */
.acc-raspberry{--accent:#a53a75;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-raspberry{--accent:#56bf60;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-raspberry{--accent:#56bf60;--accent-ink:#221c18}
/* facials (28 Sep 2026): amethyst #7c467f, nearest accent plum at 17.7 by colour distance; 6.6:1 on the paper colour; dark #4bd134, nearest dark accent claret at 25.0 */
.acc-amethyst{--accent:#7c467f;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-amethyst{--accent:#4bd134;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-amethyst{--accent:#4bd134;--accent-ink:#221c18}
/* botox and fillers (28 Sep 2026): cobalt #295ba5, nearest accent pool at 16.8 by colour distance; 6.4:1 on the paper colour; dark #8ef725, nearest dark accent fern at 21.9 */
.acc-cobalt{--accent:#295ba5;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-cobalt{--accent:#8ef725;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-cobalt{--accent:#8ef725;--accent-ink:#221c18}
/* electricians (28 Sep 2026): crimson, nearest accent cherry at 16.7 by colour distance; 8.5:1 on the paper colour; dark #b2f7a0, nearest dark accent olive at 21.4 */
.acc-crimson{--accent:#931616;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-crimson{--accent:#b2f7a0;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-crimson{--accent:#b2f7a0;--accent-ink:#221c18}
/* car coating (28 Sep 2026): copper, nearest accent teak at 16.4 by colour distance; 5.6:1 on the paper colour; dark #25f7ad, nearest dark accent pandan at 20.7 */
.acc-copper{--accent:#935624;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-copper{--accent:#25f7ad;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-copper{--accent:#25f7ad;--accent-ink:#221c18}
/* will writing (28 Sep 2026): violet, nearest accent amethyst at 16.3 by colour distance; 10.5:1 on the paper colour; dark #1cbfae, nearest dark accent mulberry at 20.4 */
.acc-violet{--accent:#4a306b;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-violet{--accent:#1cbfae;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-violet{--accent:#1cbfae;--accent-ink:#221c18}
/* braces and Invisalign (28 Sep 2026): juniper, nearest accent pine at 16.2 by colour distance; 7.5:1 on the paper colour; dark #8fbf69, nearest dark accent raspberry at 19.3 */
.acc-juniper{--accent:#3a5946;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-juniper{--accent:#8fbf69;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-juniper{--accent:#8fbf69;--accent-ink:#221c18}
/* home page: 8 newest + "Show all N" grouped by category, with a find-by-name box (tidy-up batch, 28 Sep 2026) */
.compsearch{margin:14px 4px 2px;max-width:420px}
.compsearch input{width:100%;font:700 1.05rem var(--body);padding:10px 14px;border:3px solid var(--ink);border-radius:12px;background:var(--paper);color:var(--ink)}
.compsearch input:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.catgroup{margin-top:30px}
.catgroup h3{margin:0 0 4px}
#homefindcount{font-size:.95rem;margin:8px 4px 0}
#showallbtn{font:inherit;cursor:pointer;border:none}
#homegrid-flat[hidden],#homegrid-grouped[hidden]{display:none}
/* laundry service (1 Oct 2026): spruce #106b5d, nearest accent pine at 14.9 by colour distance (colour_pick.py's list, 1 Oct 2026; no free colour reaches 16 after the earlier eight); 6.1:1 on the paper colour; dark #3ddbf7, nearest dark accent mint at 16.5 */
.acc-spruce{--accent:#106b5d;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-spruce{--accent:#3ddbf7;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-spruce{--accent:#3ddbf7;--accent-ink:#221c18}
/* company incorporation (1 Oct 2026): moss #4d6b30, nearest accent pine at 15.4 by colour distance (colour_pick.py's list after the laundry page was added); 5.8:1 on the paper colour; dark #a6bf1c, nearest dark accent lime at 19.2 */
.acc-moss{--accent:#4d6b30;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-moss{--accent:#a6bf1c;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-moss{--accent:#a6bf1c;--accent-ink:#221c18}
/* house painting (1 Oct 2026, batch-6): umber #594531, 15.7 from the nearest light accent (brick) by colour_pick.py's distance, 8.7:1 on the paper colour; dark #f7eaa0, nearest dark accent orchid at 18.2 */
.acc-umber{--accent:#594531;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-umber{--accent:#f7eaa0;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-umber{--accent:#f7eaa0;--accent-ink:#221c18}
/* steamboat buffet (1 Oct 2026, batch-8): damson #590d59, 15.8 from the nearest light accent (indigo) by colour_pick.py's distance, 12.4:1 on the paper colour; dark #f79e56, nearest dark accent cocoa at 16.2 */
.acc-damson{--accent:#590d59;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-damson{--accent:#f79e56;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-damson{--accent:#f79e56;--accent-ink:#221c18}
/* dental filling (2 Oct 2026, batch-9): teal #13697f, 14.0 from the nearest light accent (lagoon) by colour_pick.py's distance, 6.0:1 on the paper colour; dark #a0e1f7, nearest dark accent slate at 15.2 */
.acc-teal{--accent:#13697f;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-teal{--accent:#a0e1f7;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-teal{--accent:#a0e1f7;--accent-ink:#221c18}
/* bento box (2 Oct 2026, batch-9): walnut #59370d, 14.8 from the nearest light accent (teak) by colour_pick.py's distance, 10.2:1 on the paper colour; dark #f7d4a0, nearest dark accent umber at 14.5 */
.acc-walnut{--accent:#59370d;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-walnut{--accent:#f7d4a0;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-walnut{--accent:#f7d4a0;--accent-ink:#221c18}
/* ===== Insights and the new home page (2 Oct 2026, Ben). Adapted from the approved demo's CSS; house tokens only, no new colours
   beyond the lacquer and jade accents above. Kind badges: Insight on pandan, Comparison on blue, ink border. ===== */
.kind{font-weight:900;font-size:.82rem;border:2px solid var(--ink);border-radius:999px;padding:0 10px;color:var(--ink);line-height:1.5}
.k-ins{background:var(--pandan)}
.k-cmp{background:var(--blue)}
.nhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ndate{font-size:.85rem;font-weight:800;color:var(--muted)}
/* Newest on CompareSG */
.newestwrap{margin-top:14px}
.slotlabel{font-weight:900;margin:4px 0 8px}
.newestwrap > .nhead{margin:0 0 8px}
.newest{--tilt:0deg;padding:20px 22px}
.newest h2{margin:.3em 0 .1em;font-size:clamp(1.5rem,3.6vw,2rem)}
.newest h2 a{color:inherit;text-decoration:none}
.newest h2 a:hover{text-decoration:underline;text-decoration-thickness:3px}
.newest .glance{margin:14px 4px 6px}
.newest .nlead{font-weight:700;max-width:62ch;margin:.9em 0 .4em}
.newest .go{display:inline-block;margin-top:.2em;padding-top:0;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
/* Recently added */
/* "How it is made" has five cards since insights: three to a row on desktop (3 + 2, as in the demo), so the fifth never sits alone */
#how .principles{grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
/* The latest comparison's ladder under the Newest card when an insight is newest (Ben, 2 Oct 2026) */
.latestwrap{margin-top:26px}
/* insight (8 Oct 2026): hansard (Parliament's words insight; the brief called it plum, a name pet grooming already uses), nearest accent amethyst at 10.7 by colour distance; 8.3:1 on the paper colour; dark #d9a0cc, nearest dark accent mauve at 10.5; 7.9:1 on the dark paper (Ben, 8 Oct 2026) */
.acc-hansard{--accent:#7a2e6e;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-hansard{--accent:#d9a0cc;--accent-ink:#2a0f25}}
:root[data-theme="dark"] .acc-hansard{--accent:#d9a0cc;--accent-ink:#2a0f25}
/* insight (8 Oct 2026): turmeric (Rare HDB flat models insight), nearest accent bronze at 14.8 by colour distance; 5.0:1 on the paper colour; dark #ffeb7a, nearest dark accent at 17.1; 14.0:1 on the dark paper (brief accent-and-icon-proposal.txt) */
.acc-turmeric{--accent:#7e6c07;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-turmeric{--accent:#ffeb7a;--accent-ink:#2a2300}}
:root[data-theme="dark"] .acc-turmeric{--accent:#ffeb7a;--accent-ink:#2a2300}
/* insight (8 Oct 2026): voltage (EV chargers by estate insight), nearest accent iris at 37.5 by colour distance; 9.0:1 on white, 8.7:1 on the paper colour; dark #e9ff6b, nearest dark accent khaki at 18.6; 15.2:1 on the dark paper (brief, checked with tools/colour_pick.py) */
.acc-voltage{--accent:#2a08ea;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-voltage{--accent:#e9ff6b;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-voltage{--accent:#e9ff6b;--accent-ink:#221c18}
/* insight (9 Oct 2026): checkout (online shopping insight; v5 colours after the v4 violet failed the rule of 10 against skyline), nearest accent iris at 22.3 by colour distance; 6.7:1 on white, 6.4:1 on the paper colour; dark #f0c0fc, nearest dark accent hansard at 14.3; 10.9:1 on the dark paper (brief, checked with tools/colour_pick.py) */
.acc-checkout{--accent:#8a00de;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-checkout{--accent:#f0c0fc;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-checkout{--accent:#f0c0fc;--accent-ink:#221c18}
/* insight (10 Oct 2026): emerald (Which town has the most clinics insight), nearest accent fern at 13.6 by colour distance; 5.6:1 on the paper colour; 4.56:1 on its card tray; dark #00d478, nearest dark accent raspberry at 16.1; 8.6:1 on the dark paper (brief, checked with build/accent_nums.py) */
.acc-emerald{--accent:#007538;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-emerald{--accent:#00d478;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-emerald{--accent:#00d478;--accent-ink:#221c18}
/* insight (10 Oct 2026): collar (Dog rules by home insight), nearest accent iris at 21.8 by colour distance; 9.8:1 on the paper colour; 7.52:1 on its card tray; dark #7b87f4, nearest dark accent blue at 18.4; 5.3:1 on the dark paper, 3.96:1 on its dark card tray, so build/accent_nums.py derives the dark number colour (brief, checked with build/accent_nums.py) */
.acc-collar{--accent:#1022c6;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-collar{--accent:#7b87f4;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-collar{--accent:#7b87f4;--accent-ink:#221c18}
/* insight (10 Oct 2026): garnet (Poly courses insight), nearest accent crimson at 16.9 by colour distance; 8.5:1 on the paper colour; 6.49:1 on its card tray; dark #fe8890, nearest dark accent cherry at 14.4; 7.3:1 on the dark paper, 5.01:1 on its dark card tray (brief, checked with build/accent_nums.py) */
.acc-garnet{--accent:#980030;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-garnet{--accent:#fe8890;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-garnet{--accent:#fe8890;--accent-ink:#221c18}
/* insight (11 Oct 2026): signal (Longest bus route insight), nearest accent lacquer at 14.3 by colour distance; 6.1:1 on the paper colour; 4.71:1 on its card tray; dark #fe8442, nearest dark accent cocoa at 16.1; 6.9:1 on the dark paper, 4.82:1 on its dark card tray (brief, checked with build/accent_nums.py) */
.acc-signal{--accent:#c20000;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-signal{--accent:#fe8442;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-signal{--accent:#fe8442;--accent-ink:#221c18}
/* insight (11 Oct 2026): rosewood (Active ageing centres insight), nearest accent teak at 16.0 by colour distance; 5.2:1 on the paper colour; 4.35:1 on its card tray (number colour derived by build/accent_nums.py); dark #ffc0bf, nearest dark accent lacquer at 15.9; 10.9:1 on the dark paper, 6.61:1 on its dark card tray (brief, checked with build/accent_nums.py) */
.acc-rosewood{--accent:#945a59;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-rosewood{--accent:#ffc0bf;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-rosewood{--accent:#ffc0bf;--accent-ink:#221c18}
/* insight (11 Oct 2026): ruby (Age at first marriage insight), nearest accents cherry and garnet at 15.6 by colour distance; 5.9:1 on the paper colour; 4.55:1 on its card tray; dark #ff639f, nearest dark accent rose at 20.3; 6.0:1 on the dark paper, 4.43:1 on its dark card tray (number colour derived by build/accent_nums.py) (brief, checked with build/accent_nums.py) */
.acc-ruby{--accent:#c40048;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-ruby{--accent:#ff639f;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-ruby{--accent:#ff639f;--accent-ink:#221c18}
/* insight (11 Oct 2026): pomelo (Food in season insight), nearest accent fern at 13.4 by colour distance; 7.0:1 on the paper colour; 5.67:1 on its card tray; dark #d4f5b8, nearest dark accent crimson at 18.6; 14.1:1 on the dark paper, 7.91:1 on its dark card tray (brief, checked with build/accent_nums.py) */
.acc-pomelo{--accent:#396105;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-pomelo{--accent:#d4f5b8;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-pomelo{--accent:#d4f5b8;--accent-ink:#221c18}
/* insight (12 Oct 2026): bougainvillea (Biggest condos insight), nearest accent orchid at 14.6 by colour distance; 5.8:1 on the paper colour; 4.49:1 on its card tray (number colour derived by build/accent_nums.py); dark #f3a6ff, nearest dark accent plum at 14.3; 9.4:1 on the dark paper, 5.97:1 on its dark card tray (brief, checked with build/accent_nums.py) */
.acc-bougainvillea{--accent:#ac00be;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-bougainvillea{--accent:#f3a6ff;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-bougainvillea{--accent:#f3a6ff;--accent-ink:#221c18}
/* insight (12 Oct 2026): pedal (MRT bicycle racks insight), nearest accent collar at 20.4 by colour distance; 5.7:1 on the paper colour; 4.61:1 on its card tray (build/accent_nums.py); dark #84cc00, nearest dark accent cobalt at 19.4; 8.5:1 on the dark paper, 5.66:1 on its dark card tray (brief, checked with build/accent_nums.py) */
.acc-pedal{--accent:#0054f0;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-pedal{--accent:#84cc00;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-pedal{--accent:#84cc00;--accent-ink:#221c18}
/* insight (12 Oct 2026): wine (HDB home business guide), nearest accents mulberry and claret at 15.8 by colour distance; 10.1:1 on the paper colour; 7.68:1 on its card tray (build/accent_nums.py); dark #d071a4, nearest dark accent rose at 17.3; 5.3:1 on the dark paper, 3.92:1 on its dark card tray, so the build derives its dark number colour (build/accent_nums.py) */
.acc-wine{--accent:#7e0746;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-wine{--accent:#d071a4;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-wine{--accent:#d071a4;--accent-ink:#221c18}
/* insight (13 Oct 2026): persimmon (HDB rental guide), nearest accent lacquer at 13.8 by colour distance; 5.1:1 on the paper colour; 4.15:1 on its card tray, so the build derives its number colour (build/accent_nums.py); dark #f1d7c6, nearest dark accent rosewood at 16.9; 12.3:1 on the dark paper, 7.21:1 on its dark card tray (build/accent_nums.py) */
.acc-persimmon{--accent:#b84900;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-persimmon{--accent:#f1d7c6;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-persimmon{--accent:#f1d7c6;--accent-ink:#221c18}
/* insight (13 Oct 2026): smoke (haze by region), nearest accent bronze at 16.5 by colour distance; 9.6:1 on the paper colour; 7.60:1 on its card tray (build/accent_nums.py); dark #9f9880, nearest dark accent teak at 22.9; 5.8:1 on the dark paper, 4.20:1 on its dark card tray, so the build derives its dark number colour (build/accent_nums.py) */
.acc-smoke{--accent:#414600;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-smoke{--accent:#9f9880;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-smoke{--accent:#9f9880;--accent-ink:#221c18}
/* insight (13 Oct 2026): prompt (AI use by sector), nearest accent sapphire at 15.8 by colour distance; 11.8:1 on the paper colour; 8.89:1 on its card tray (build/accent_nums.py); dark #ab7aff, nearest dark accent iris at 21.6; 5.6:1 on the dark paper, 4.11:1 on its dark card tray, so the build derives its dark number colour (build/accent_nums.py) */
.acc-prompt{--accent:#3f009e;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-prompt{--accent:#ab7aff;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-prompt{--accent:#ab7aff;--accent-ink:#221c18}
/* insight (13 Oct 2026): bluebin (Bottle deposit refunds), nearest accent blue at 14.5 by colour distance; 6.15:1 on the paper colour; 4.96:1 on its card tray (build/accent_nums.py); dark #0a8ffc, nearest dark accent collar at 17.3; 5.09:1 on the dark paper, 3.93:1 on its dark card tray, so the build derives its dark number colour (build/accent_nums.py) */
.acc-bluebin{--accent:#005cbf;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-bluebin{--accent:#0a8ffc;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-bluebin{--accent:#0a8ffc;--accent-ink:#221c18}
/* insight (14 Oct 2026): trending (What Singapore Googled), nearest accent voltage at 16.4 by colour distance; 5.90:1 on the paper colour; 4.77:1 on its card tray (build/accent_nums.py); dark #9a88ff, nearest dark accent collar at 10.3; 5.88:1 on the dark paper, 4.26:1 on its dark card tray, so the build derives its dark number colour (build/accent_nums.py) */
.acc-trending{--accent:#6038f8;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-trending{--accent:#9a88ff;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-trending{--accent:#9a88ff;--accent-ink:#221c18}
/* insight (14 Oct 2026): brass (CPF Retirement Sums), nearest accent caramel at 14.0 by colour distance; 5.64:1 on the paper colour; 4.65:1 on its card tray (build/accent_nums.py); dark #f8cc08, nearest dark accent brick at 14.4; 10.93:1 on the dark paper, 6.69:1 on its dark card tray (build/accent_nums.py) */
.acc-brass{--accent:#885c00;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-brass{--accent:#f8cc08;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-brass{--accent:#f8cc08;--accent-ink:#221c18}
/* insight (14 Oct 2026): petrol (Income tax at your salary), nearest accent slate at 14.6 by colour distance; 11.01:1 on the paper colour; 8.56:1 on its card tray (build/accent_nums.py); dark #009fbf, nearest dark accent pool at 16.3; 5.38:1 on the dark paper, 4.11:1 on its dark card tray, so the build derives its dark number colour (build/accent_nums.py) */
.acc-petrol{--accent:#003e59;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-petrol{--accent:#009fbf;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-petrol{--accent:#009fbf;--accent-ink:#221c18}
/* insight (15 Oct 2026): hibiscus (Annual and sick leave insight), nearest accent plum at 13.4 by colour distance; 8.6:1 on the paper colour; 6.54:1 on its card tray; dark #fc94cc, nearest dark accent rose at 13.0; 8.2:1 on the dark paper, 5.45:1 on its dark card tray (number colour derived by build/accent_nums.py) */
.acc-hibiscus{--accent:#880080;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-hibiscus{--accent:#fc94cc;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-hibiscus{--accent:#fc94cc;--accent-ink:#221c18}
/* insight (15 Oct 2026): paddy (Public holiday pay insight), nearest accent lime at 12.5 by colour distance; 6.1:1 on the paper colour; 4.91:1 on its card tray; dark #7ef195, nearest dark accent crimson at 15.2; 12.0:1 on the dark paper, 7.13:1 on its dark card tray (number colour derived by build/accent_nums.py) */
.acc-paddy{--accent:#007016;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-paddy{--accent:#7ef195;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-paddy{--accent:#7ef195;--accent-ink:#221c18}
/* insight (16 Oct 2026): cypress (SGD to yen, won, ringgit and baht insight), nearest accent fern at 15.5 by colour distance; 10.8:1 on the paper colour; 8.44:1 on its card tray; dark #8dfe77, nearest dark accent claret at 19.6; 13.3:1 on the dark paper, 7.71:1 on its dark card tray (number colour derived by build/accent_nums.py) */
.acc-cypress{--accent:#1d430f;--accent-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-cypress{--accent:#8dfe77;--accent-ink:#221c18}}
:root[data-theme="dark"] .acc-cypress{--accent:#8dfe77;--accent-ink:#221c18}

/* ===== Index cards (9 Oct 2026, Ben: Option B). One card for /comparisons/, /insights/ and the home page lists: the house .card
   (dark paper, cream border, tilt) with an accent-tinted headline tray. Colour survives only as the card's accent (icon and big
   number). The whole card is the link: one a.stretch per card, its ::after covers the card. ===== */
.grid.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;align-items:stretch;margin:18px 4px 8px}
.cards > .repcell{display:flex}
.cards > .repcell > .card{flex:1}
.cards > .repcell[hidden]{display:none}
.cards .card{display:flex;flex-direction:column;position:relative;min-width:0}
.cards .card:hover{--tilt:0deg;box-shadow:7px 7px 0 var(--shadow)}
.chead{display:flex;align-items:center;gap:10px}
.chead .icon{width:34px;height:34px;flex:none;color:var(--accent)}
.ctitle{font-size:1.35rem}
.ctitle a.stretch{color:var(--ink);text-decoration:none}
.ctitle a.stretch::after{content:"";position:absolute;inset:0;border-radius:16px}
.ctitle a.stretch:focus-visible{outline:none}
.ctitle a.stretch:focus-visible::after{outline:3px solid var(--marigold);outline-offset:4px}
.cdesc{font-size:.95rem;margin:.5em 0 .7em}
.statband{background:color-mix(in srgb,var(--accent) 14%,var(--paper));border:2px solid var(--accent);border-radius:12px;padding:10px 12px;margin:0 0 .6em}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .statband{background:color-mix(in srgb,var(--accent) 20%,var(--paper))}}
:root[data-theme="dark"] .statband{background:color-mix(in srgb,var(--accent) 20%,var(--paper))}
.statband .stat{font-family:var(--display);font-size:1.95rem;line-height:1.1;color:var(--accent-num,var(--accent));text-align:left;padding:0;margin:0}
.statband .stat .nb{white-space:nowrap;font-size:inherit;font-weight:inherit}  /* beats the house ".stat span" rule */
.statband .statline{font-weight:800;margin:.25em 0 0}
.cmeta{font-size:.9rem;color:var(--muted);font-weight:700;margin:.1em 0}
.clink{margin:0;margin-top:auto;padding-top:14px;font-family:var(--display);font-size:1.15rem;color:var(--ink)}
.kindrow{margin:0 0 .5em}
.kindrow .tag.kind{font-size:.72rem;padding:0 8px;line-height:1.5}
@media (max-width:900px){.grid.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.cards .card:hover{box-shadow:4px 4px 0 var(--shadow)}}
@media (max-width:600px){.grid.cards{grid-template-columns:minmax(0,1fr)}}

/* number colour per accent, derived at build time by accent_nums.py (accents themselves unchanged) */
.acc-amethyst{--accent-num:#7c467f}.acc-aubergine{--accent-num:#593a59}.acc-blue{--accent-num:#2b5dd3}.acc-bluebin{--accent-num:#005cbf}.acc-bougainvillea{--accent-num:#a901bb}.acc-brass{--accent-num:#885c00}.acc-brick{--accent-num:#593131}.acc-bronze{--accent-num:#6b5410}.acc-caramel{--accent-num:#8b5f28}.acc-checkout{--accent-num:#8a00de}.acc-cherry{--accent-num:#c0152f}.acc-claret{--accent-num:#6b102b}.acc-clay{--accent-num:#9a3b3b}.acc-cobalt{--accent-num:#295ba5}.acc-cocoa{--accent-num:#59180d}.acc-collar{--accent-num:#1022c6}.acc-copper{--accent-num:#935624}.acc-crimson{--accent-num:#931616}.acc-cypress{--accent-num:#1d430f}.acc-damson{--accent-num:#590d59}.acc-emerald{--accent-num:#007538}.acc-fern{--accent-num:#0d5914}.acc-filament{--accent-num:#995502}.acc-fuchsia{--accent-num:#b8127f}.acc-garnet{--accent-num:#980030}.acc-grape{--accent-num:#672493}.acc-hansard{--accent-num:#7a2e6e}.acc-heather{--accent-num:#5b4fb3}.acc-hibiscus{--accent-num:#880080}.acc-indigo{--accent-num:#3a1466}.acc-inkblue{--accent-num:#243a6b}.acc-iris{--accent-num:#7a2cc2}.acc-iron{--accent-num:#4d4d52}.acc-jade{--accent-num:#177358}.acc-juniper{--accent-num:#3a5946}.acc-khaki{--accent-num:#595931}.acc-lacquer{--accent-num:#b8361a}.acc-lagoon{--accent-num:#085559}.acc-lavender{--accent-num:#6b5aa5}.acc-lime{--accent-num:#3b730b}.acc-marigold{--accent-num:#886523}.acc-mauve{--accent-num:#94506e}.acc-mint{--accent-num:#1d7271}.acc-monsoon{--accent-num:#1a5280}.acc-moss{--accent-num:#4d6b30}.acc-mulberry{--accent-num:#590d3e}.acc-navy{--accent-num:#13337f}.acc-olive{--accent-num:#5f6b12}.acc-orchid{--accent-num:#a518a5}.acc-paddy{--accent-num:#007016}.acc-pandan{--accent-num:#207551}.acc-pedal{--accent-num:#0054f0}.acc-persimmon{--accent-num:#ac4502}.acc-petrol{--accent-num:#003e59}.acc-pine{--accent-num:#2f6b45}.acc-plum{--accent-num:#8a2e82}.acc-pomelo{--accent-num:#396105}.acc-pool{--accent-num:#0b6ba1}.acc-prompt{--accent-num:#3f009e}.acc-raspberry{--accent-num:#a53a75}.acc-rose{--accent-num:#b3225a}.acc-rosewood{--accent-num:#8e5756}.acc-ruby{--accent-num:#c40048}.acc-rust{--accent-num:#a4451c}.acc-sapphire{--accent-num:#161c93}.acc-signal{--accent-num:#c20000}.acc-skyline{--accent-num:#5a3690}.acc-slate{--accent-num:#3f5b7a}.acc-smoke{--accent-num:#414600}.acc-spruce{--accent-num:#106b5d}.acc-teak{--accent-num:#7d4e34}.acc-teal{--accent-num:#13697f}.acc-terracotta{--accent-num:#7e3c00}.acc-tomato{--accent-num:#ae4629}.acc-trending{--accent-num:#6038f8}.acc-turmeric{--accent-num:#776608}.acc-umber{--accent-num:#594531}.acc-violet{--accent-num:#4a306b}.acc-voltage{--accent-num:#2a08ea}.acc-walnut{--accent-num:#59370d}.acc-wine{--accent-num:#7e0746}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-amethyst{--accent-num:#4bd134}:root:not([data-theme="light"]) .acc-aubergine{--accent-num:#cdf725}:root:not([data-theme="light"]) .acc-blue{--accent-num:#7ea6ff}:root:not([data-theme="light"]) .acc-bluebin{--accent-num:#329ef5}:root:not([data-theme="light"]) .acc-bougainvillea{--accent-num:#f3a6ff}:root:not([data-theme="light"]) .acc-brass{--accent-num:#f8cc08}:root:not([data-theme="light"]) .acc-brick{--accent-num:#f7b825}:root:not([data-theme="light"]) .acc-bronze{--accent-num:#bfa92f}:root:not([data-theme="light"]) .acc-caramel{--accent-num:#e0a868}:root:not([data-theme="light"]) .acc-checkout{--accent-num:#f0c0fc}:root:not([data-theme="light"]) .acc-cherry{--accent-num:#ff707c}:root:not([data-theme="light"]) .acc-claret{--accent-num:#25f783}:root:not([data-theme="light"]) .acc-clay{--accent-num:#f29a8e}:root:not([data-theme="light"]) .acc-cobalt{--accent-num:#8ef725}:root:not([data-theme="light"]) .acc-cocoa{--accent-num:#ff9932}:root:not([data-theme="light"]) .acc-collar{--accent-num:#8c95f0}:root:not([data-theme="light"]) .acc-copper{--accent-num:#25f7ad}:root:not([data-theme="light"]) .acc-crimson{--accent-num:#b2f7a0}:root:not([data-theme="light"]) .acc-cypress{--accent-num:#8dfe77}:root:not([data-theme="light"]) .acc-damson{--accent-num:#f79e56}:root:not([data-theme="light"]) .acc-emerald{--accent-num:#00d478}:root:not([data-theme="light"]) .acc-fern{--accent-num:#25f725}:root:not([data-theme="light"]) .acc-filament{--accent-num:#f2b84b}:root:not([data-theme="light"]) .acc-fuchsia{--accent-num:#ff7fd0}:root:not([data-theme="light"]) .acc-garnet{--accent-num:#fe8890}:root:not([data-theme="light"]) .acc-grape{--accent-num:#f788ee}:root:not([data-theme="light"]) .acc-hansard{--accent-num:#d9a0cc}:root:not([data-theme="light"]) .acc-heather{--accent-num:#b9b0f5}:root:not([data-theme="light"]) .acc-hibiscus{--accent-num:#fc94cc}:root:not([data-theme="light"]) .acc-indigo{--accent-num:#ee7fff}:root:not([data-theme="light"]) .acc-inkblue{--accent-num:#a9bdf2}:root:not([data-theme="light"]) .acc-iris{--accent-num:#c79bff}:root:not([data-theme="light"]) .acc-iron{--accent-num:#c4c4cc}:root:not([data-theme="light"]) .acc-jade{--accent-num:#1cbf80}:root:not([data-theme="light"]) .acc-juniper{--accent-num:#8fbf69}:root:not([data-theme="light"]) .acc-khaki{--accent-num:#e8dc3c}:root:not([data-theme="light"]) .acc-lacquer{--accent-num:#d89c8c}:root:not([data-theme="light"]) .acc-lagoon{--accent-num:#69b6bf}:root:not([data-theme="light"]) .acc-lavender{--accent-num:#b8a9e8}:root:not([data-theme="light"]) .acc-lime{--accent-num:#a6e05a}:root:not([data-theme="light"]) .acc-marigold{--accent-num:#f4c76b}:root:not([data-theme="light"]) .acc-mauve{--accent-num:#e0a9c2}:root:not([data-theme="light"]) .acc-mint{--accent-num:#7de9e9}:root:not([data-theme="light"]) .acc-monsoon{--accent-num:#7ab0dd}:root:not([data-theme="light"]) .acc-moss{--accent-num:#a6bf1c}:root:not([data-theme="light"]) .acc-mulberry{--accent-num:#25f7e2}:root:not([data-theme="light"]) .acc-navy{--accent-num:#56aff7}:root:not([data-theme="light"]) .acc-olive{--accent-num:#cfe07a}:root:not([data-theme="light"]) .acc-orchid{--accent-num:#bfbb7c}:root:not([data-theme="light"]) .acc-paddy{--accent-num:#7ef195}:root:not([data-theme="light"]) .acc-pandan{--accent-num:#6fe3ae}:root:not([data-theme="light"]) .acc-pedal{--accent-num:#84cc00}:root:not([data-theme="light"]) .acc-persimmon{--accent-num:#f1d7c6}:root:not([data-theme="light"]) .acc-petrol{--accent-num:#1da8c2}:root:not([data-theme="light"]) .acc-pine{--accent-num:#8fd6a8}:root:not([data-theme="light"]) .acc-plum{--accent-num:#e39ad9}:root:not([data-theme="light"]) .acc-pomelo{--accent-num:#d4f5b8}:root:not([data-theme="light"]) .acc-pool{--accent-num:#5cc3f0}:root:not([data-theme="light"]) .acc-prompt{--accent-num:#b386fa}:root:not([data-theme="light"]) .acc-raspberry{--accent-num:#56bf60}:root:not([data-theme="light"]) .acc-rose{--accent-num:#ff8fb1}:root:not([data-theme="light"]) .acc-rosewood{--accent-num:#ffc0bf}:root:not([data-theme="light"]) .acc-ruby{--accent-num:#fe6aa2}:root:not([data-theme="light"]) .acc-rust{--accent-num:#f0a079}:root:not([data-theme="light"]) .acc-sapphire{--accent-num:#e6f0ff}:root:not([data-theme="light"]) .acc-signal{--accent-num:#fe8442}:root:not([data-theme="light"]) .acc-skyline{--accent-num:#c09cea}:root:not([data-theme="light"]) .acc-slate{--accent-num:#a9c3e0}:root:not([data-theme="light"]) .acc-smoke{--accent-num:#a79f88}:root:not([data-theme="light"]) .acc-spruce{--accent-num:#3ddbf7}:root:not([data-theme="light"]) .acc-teak{--accent-num:#e3b08f}:root:not([data-theme="light"]) .acc-teal{--accent-num:#a0e1f7}:root:not([data-theme="light"]) .acc-terracotta{--accent-num:#fcba8a}:root:not([data-theme="light"]) .acc-tomato{--accent-num:#ff8a66}:root:not([data-theme="light"]) .acc-trending{--accent-num:#a190fc}:root:not([data-theme="light"]) .acc-turmeric{--accent-num:#ffeb7a}:root:not([data-theme="light"]) .acc-umber{--accent-num:#f7eaa0}:root:not([data-theme="light"]) .acc-violet{--accent-num:#1cbfae}:root:not([data-theme="light"]) .acc-voltage{--accent-num:#e9ff6b}:root:not([data-theme="light"]) .acc-walnut{--accent-num:#f7d4a0}:root:not([data-theme="light"]) .acc-wine{--accent-num:#d583ab}}
:root[data-theme="dark"] .acc-amethyst{--accent-num:#4bd134}:root[data-theme="dark"] .acc-aubergine{--accent-num:#cdf725}:root[data-theme="dark"] .acc-blue{--accent-num:#7ea6ff}:root[data-theme="dark"] .acc-bluebin{--accent-num:#329ef5}:root[data-theme="dark"] .acc-bougainvillea{--accent-num:#f3a6ff}:root[data-theme="dark"] .acc-brass{--accent-num:#f8cc08}:root[data-theme="dark"] .acc-brick{--accent-num:#f7b825}:root[data-theme="dark"] .acc-bronze{--accent-num:#bfa92f}:root[data-theme="dark"] .acc-caramel{--accent-num:#e0a868}:root[data-theme="dark"] .acc-checkout{--accent-num:#f0c0fc}:root[data-theme="dark"] .acc-cherry{--accent-num:#ff707c}:root[data-theme="dark"] .acc-claret{--accent-num:#25f783}:root[data-theme="dark"] .acc-clay{--accent-num:#f29a8e}:root[data-theme="dark"] .acc-cobalt{--accent-num:#8ef725}:root[data-theme="dark"] .acc-cocoa{--accent-num:#ff9932}:root[data-theme="dark"] .acc-collar{--accent-num:#8c95f0}:root[data-theme="dark"] .acc-copper{--accent-num:#25f7ad}:root[data-theme="dark"] .acc-crimson{--accent-num:#b2f7a0}:root[data-theme="dark"] .acc-cypress{--accent-num:#8dfe77}:root[data-theme="dark"] .acc-damson{--accent-num:#f79e56}:root[data-theme="dark"] .acc-emerald{--accent-num:#00d478}:root[data-theme="dark"] .acc-fern{--accent-num:#25f725}:root[data-theme="dark"] .acc-filament{--accent-num:#f2b84b}:root[data-theme="dark"] .acc-fuchsia{--accent-num:#ff7fd0}:root[data-theme="dark"] .acc-garnet{--accent-num:#fe8890}:root[data-theme="dark"] .acc-grape{--accent-num:#f788ee}:root[data-theme="dark"] .acc-hansard{--accent-num:#d9a0cc}:root[data-theme="dark"] .acc-heather{--accent-num:#b9b0f5}:root[data-theme="dark"] .acc-hibiscus{--accent-num:#fc94cc}:root[data-theme="dark"] .acc-indigo{--accent-num:#ee7fff}:root[data-theme="dark"] .acc-inkblue{--accent-num:#a9bdf2}:root[data-theme="dark"] .acc-iris{--accent-num:#c79bff}:root[data-theme="dark"] .acc-iron{--accent-num:#c4c4cc}:root[data-theme="dark"] .acc-jade{--accent-num:#1cbf80}:root[data-theme="dark"] .acc-juniper{--accent-num:#8fbf69}:root[data-theme="dark"] .acc-khaki{--accent-num:#e8dc3c}:root[data-theme="dark"] .acc-lacquer{--accent-num:#d89c8c}:root[data-theme="dark"] .acc-lagoon{--accent-num:#69b6bf}:root[data-theme="dark"] .acc-lavender{--accent-num:#b8a9e8}:root[data-theme="dark"] .acc-lime{--accent-num:#a6e05a}:root[data-theme="dark"] .acc-marigold{--accent-num:#f4c76b}:root[data-theme="dark"] .acc-mauve{--accent-num:#e0a9c2}:root[data-theme="dark"] .acc-mint{--accent-num:#7de9e9}:root[data-theme="dark"] .acc-monsoon{--accent-num:#7ab0dd}:root[data-theme="dark"] .acc-moss{--accent-num:#a6bf1c}:root[data-theme="dark"] .acc-mulberry{--accent-num:#25f7e2}:root[data-theme="dark"] .acc-navy{--accent-num:#56aff7}:root[data-theme="dark"] .acc-olive{--accent-num:#cfe07a}:root[data-theme="dark"] .acc-orchid{--accent-num:#bfbb7c}:root[data-theme="dark"] .acc-paddy{--accent-num:#7ef195}:root[data-theme="dark"] .acc-pandan{--accent-num:#6fe3ae}:root[data-theme="dark"] .acc-pedal{--accent-num:#84cc00}:root[data-theme="dark"] .acc-persimmon{--accent-num:#f1d7c6}:root[data-theme="dark"] .acc-petrol{--accent-num:#1da8c2}:root[data-theme="dark"] .acc-pine{--accent-num:#8fd6a8}:root[data-theme="dark"] .acc-plum{--accent-num:#e39ad9}:root[data-theme="dark"] .acc-pomelo{--accent-num:#d4f5b8}:root[data-theme="dark"] .acc-pool{--accent-num:#5cc3f0}:root[data-theme="dark"] .acc-prompt{--accent-num:#b386fa}:root[data-theme="dark"] .acc-raspberry{--accent-num:#56bf60}:root[data-theme="dark"] .acc-rose{--accent-num:#ff8fb1}:root[data-theme="dark"] .acc-rosewood{--accent-num:#ffc0bf}:root[data-theme="dark"] .acc-ruby{--accent-num:#fe6aa2}:root[data-theme="dark"] .acc-rust{--accent-num:#f0a079}:root[data-theme="dark"] .acc-sapphire{--accent-num:#e6f0ff}:root[data-theme="dark"] .acc-signal{--accent-num:#fe8442}:root[data-theme="dark"] .acc-skyline{--accent-num:#c09cea}:root[data-theme="dark"] .acc-slate{--accent-num:#a9c3e0}:root[data-theme="dark"] .acc-smoke{--accent-num:#a79f88}:root[data-theme="dark"] .acc-spruce{--accent-num:#3ddbf7}:root[data-theme="dark"] .acc-teak{--accent-num:#e3b08f}:root[data-theme="dark"] .acc-teal{--accent-num:#a0e1f7}:root[data-theme="dark"] .acc-terracotta{--accent-num:#fcba8a}:root[data-theme="dark"] .acc-tomato{--accent-num:#ff8a66}:root[data-theme="dark"] .acc-trending{--accent-num:#a190fc}:root[data-theme="dark"] .acc-turmeric{--accent-num:#ffeb7a}:root[data-theme="dark"] .acc-umber{--accent-num:#f7eaa0}:root[data-theme="dark"] .acc-violet{--accent-num:#1cbfae}:root[data-theme="dark"] .acc-voltage{--accent-num:#e9ff6b}:root[data-theme="dark"] .acc-walnut{--accent-num:#f7d4a0}:root[data-theme="dark"] .acc-wine{--accent-num:#d583ab}

.csgbar{max-width:980px;margin:0 auto;padding:12px 20px 6px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;font-family:var(--body,"Nunito","Segoe UI",system-ui,sans-serif)}
.csgbar .brand{order:1;display:inline-flex;align-items:center;gap:8px;font-family:var(--display,"Chewy","Trebuchet MS",system-ui,sans-serif);font-size:1.5rem;color:#2b5fd9;text-decoration:underline dotted;text-decoration-thickness:3px;text-underline-offset:5px}
.csgbar .brand .ico{width:30px;height:30px;color:var(--ink,#231c17)}
.csgbar .nav{order:2;margin-left:auto;width:auto;display:flex;flex-wrap:wrap;gap:4px 20px;font-weight:800;font-size:.98rem}
.csgbar .nav a{color:#2b5fd9;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.csgbar .nav a[aria-current="page"]{text-decoration-style:wavy}
.csgbar .csgsearchbtn{order:3;display:inline-grid;place-items:center;width:40px;height:40px;border:3px solid var(--ink,#231c17);border-radius:12px;background:var(--paper,#fffaf0);color:var(--ink,#231c17);cursor:pointer;box-shadow:3px 3px 0 var(--shadow,#231c17);padding:0}
.csgbar .csgsearchbtn svg{width:20px;height:20px}
.csgbar .csgsearchbtn[aria-expanded="true"]{background:var(--marigold,#f4b93a)}
.csgbar .csgsearchbtn:focus-visible,.csgbar .nav a:focus-visible,.csgbar .brand:focus-visible{outline:3px solid var(--marigold,#f4b93a);outline-offset:3px}
.csgsearch{order:4;flex-basis:100%;min-width:0;max-width:100%;display:flex;gap:10px;margin:4px 0 2px}
.csgsearch[hidden]{display:none}
.csgsearch input{flex:1 1 0;width:0;min-width:0;font:700 1.05rem var(--body,"Nunito",system-ui,sans-serif);padding:10px 14px;border:3px solid var(--ink,#231c17);border-radius:12px;background:var(--paper,#fffaf0);color:var(--ink,#231c17)}
.csgsearch input:focus-visible{outline:3px solid var(--marigold,#f4b93a);outline-offset:2px}
.csgsearch button{font:800 1rem var(--body,"Nunito",system-ui,sans-serif);border:3px solid var(--ink,#231c17);border-radius:12px;padding:8px 14px;background:#2b5fd9;color:#fff;cursor:pointer}
.csgbar .vis{position:absolute;left:-9999px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .csgbar .brand,:root:not([data-theme="light"]) .csgbar .nav a{color:#7ea6ff}:root:not([data-theme="light"]) .csgsearch button{background:#7ea6ff;color:#0d1731}}
:root[data-theme="dark"] .csgbar .brand,:root[data-theme="dark"] .csgbar .nav a{color:#7ea6ff}
:root[data-theme="dark"] .csgsearch button{background:#7ea6ff;color:#0d1731}
@media (max-width:720px){.csgbar .csgsearchbtn{order:2;margin-left:auto}.csgbar .nav{order:3;margin-left:0;width:100%;gap:2px 16px;font-size:.92rem}.csgbar .brand{font-size:1.3rem}}