/* ════════════════════════════════════════════════════════════════════════════
   assoc-theme.css — ONE design system for the associate tab pages (unify, 29 Oct 2026)
   ────────────────────────────────────────────────────────────────────────────
   The povguy.sg V2 design (home-v2.html / about-v2.html: Sora + Figtree + DM Mono,
   ink / blue / green on #FAFAFA paper) applied to the pages that still wear the
   old associate template: /calculators /projects /distress /yield /weekly and
   /project/*.

   CONVERSION HOSTS ONLY. pov-whitelabel.js (the blocking <head> script every one
   of those pages loads first) writes this <link> and adds class "pov-v2" to <html>
   ONLY on povguy.sg, www.povguy.sg, *.vercel.app and localhost — the same list as
   middleware.js CONVERSION_HOSTS and assoc-tabs.js. Other associates' domains
   never load this file, and every rule below is scoped under html.pov-v2 anyway.

   The header / footer / sticky bar markup is built by assoc-tabs.js and is the
   same markup as home-v2's <nav id="nav">; the rules for it below mirror
   home-v2's inline nav CSS value for value. Change the two together.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── V2 type: the same self-hosted faces home-v2 declares ── */
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dmmono-400-ext.woff2?v=22cf4911) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dmmono-400-lat.woff2?v=1a0430d4) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dmmono-500-ext.woff2?v=a706ab20) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dmmono-500-lat.woff2?v=f425382c) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/figtree-ext.woff2?v=a310474d) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/figtree-lat.woff2?v=57fd1acf) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/sora-ext.woff2?v=5ad15d91) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/sora-lat.woff2?v=779e9507) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── tokens (V2) ── */
html.pov-v2{
 --ground:#FAFAFA; --surface:#FFFFFF; --sunk:#F2F2F1; --sunk-2:#E9E9E8;
 --ink:#141414; --ink-2:#3E3E3E; --muted:#666666; --faint:#7B7B7B;
 --line:#E4E4E3; --line-2:#D4D4D3;
 --dark:#0E0E10; --dark-2:#16161A; --dark-line:rgba(255,255,255,.13);
 --blue:#1A44F0; --blue-2:#3D63FF; --blue-wash:#EDF0FE;
 --green:#0FA968; --green-ink:#0A7346; --green-wash:#E8F6F0;
 --red:#C4382A; --red-2:#E0533F; --red-wash:#FBEEEC; --gold:#8A6A16;
 --display:"Sora",system-ui,sans-serif; --serif:"Sora",system-ui,sans-serif;
 --sans:"Figtree",system-ui,sans-serif; --mono:"DM Mono",ui-monospace,Menlo,monospace;
 --r:14px; --r-s:10px; --r-l:20px; --pill:100px; --r-pill:100px;
 --sh:0 1px 2px rgba(22,24,26,.04), 0 12px 32px -20px rgba(22,24,26,.18);
 --sh-lift:0 2px 8px rgba(22,24,26,.06), 0 26px 56px -28px rgba(22,24,26,.28);
 --ease:cubic-bezier(.22,1,.36,1);
 --nav:116px; --max:1220px; --maxw:1220px;
 /* the old template derives every accent from --brand (pov-assoc.js sets it
    inline from profile.brand_color — the teal). !important beats that inline value. */
 --brand:#1A44F0 !important; --brand-2:#3D63FF !important; --brand-on:#FFFFFF !important;
 --brand-wash:#EDF0FE !important; --brand-line:rgba(26,68,240,.24) !important;
 --lime:#C6F000; --lime-ink:#141414;
 --up:#0A7346; --down:#C4382A; --warn:#8A6A16;
 scroll-padding-top:calc(var(--nav) + 14px);
}
html.pov-v2 body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.66;
 padding-top:var(--nav);overflow-x:clip;width:100%}
html.pov-v2 ::selection{background:#C6F000;color:#141414}
html.pov-v2 :focus-visible{outline-color:var(--blue)}

/* ── the old chrome is gone before first paint (no flash) ── */
html.pov-v2 header.anav[data-assoc-nav],
html.pov-v2 footer.afoot[data-assoc-foot],
html.pov-v2 .fab,
html.pov-v2 .pov-tabs-legacy{display:none!important}

/* ════ HEADER — mirrors home-v2 <nav id="nav"> ════ */
html.pov-v2 nav#nav{position:fixed;top:0;left:0;right:0;height:auto;z-index:200;background:rgba(250,250,250,.82);
 -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border-bottom:1px solid transparent;
 transition:border-color .4s,background .4s;font-family:var(--sans)}
html.pov-v2 nav#nav.solid{border-bottom-color:var(--line);background:rgba(250,250,250,.95)}
html.pov-v2 #nav .nav-in{max-width:var(--max);margin:0 auto;padding:0 28px;height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px}
html.pov-v2 #nav .logo{text-decoration:none;display:flex;align-items:center;min-width:0}
html.pov-v2 #nav .logo img{height:19px;width:auto;display:block}
html.pov-v2 #nav .logo-txt{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.03em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.pov-v2 #nav .nav-right{display:flex;align-items:center;gap:10px;flex:none}
html.pov-v2 .cta{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:-.01em;padding:11px 20px;border-radius:var(--pill);text-decoration:none;
 white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer}
html.pov-v2 .cta[hidden]{display:none}
html.pov-v2 .cta-green{background:var(--green);color:#fff;box-shadow:0 1px 2px rgba(15,169,104,.2),0 10px 24px -12px rgba(15,169,104,.6)}
html.pov-v2 .cta-green:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,169,104,.24),0 18px 36px -14px rgba(15,169,104,.7)}
html.pov-v2 .cta-blue{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(26,68,240,.2),0 10px 24px -12px rgba(26,68,240,.6)}
html.pov-v2 .cta-blue:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(26,68,240,.24),0 18px 36px -14px rgba(26,68,240,.7)}
html.pov-v2 .cta-ghost{border:1px solid var(--line-2);color:var(--ink);background:transparent}
/* the tab row (assoc-tabs.js .pov-tabs) as the second row of the nav */
html.pov-v2 #nav .nav-tabs{position:relative;max-width:var(--max);margin:0 auto;padding:0 28px;height:46px}
html.pov-v2 #nav .pov-tabs{position:static;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;height:46px;font-family:var(--display)}
html.pov-v2 #nav .pov-tabs .pt-in{max-width:none;padding:0;height:46px;gap:0}
html.pov-v2 #nav .pov-tabs .pt-brand{display:none}
html.pov-v2 #nav .pov-tabs nav{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
html.pov-v2 #nav .pov-tabs ul{padding:0;gap:4px}
html.pov-v2 #nav .pov-tabs a.pt-t{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:-.01em;min-height:36px;padding:0 15px;border-radius:var(--pill);color:var(--ink-2);transition:background .25s var(--ease),color .25s var(--ease)}
html.pov-v2 #nav .pov-tabs a.pt-t:hover{background:var(--sunk);color:var(--ink)}
html.pov-v2 #nav .pov-tabs a.pt-t[aria-current=page]{background:var(--ink);color:#fff}
html.pov-v2 #nav .pov-subtabs{display:none}
html.pov-v2 #nav .tabs-more{position:absolute;top:5px;right:6px;height:36px;width:36px;display:none;align-items:center;justify-content:center;pointer-events:none;
 border-radius:50%;background:rgba(250,250,250,.96);box-shadow:-14px 0 14px 2px rgba(250,250,250,.9)}
html.pov-v2 #nav .tabs-more::after{content:'';width:7px;height:7px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg);margin-left:-3px}
html.pov-v2 #nav .nav-tabs.ovf .tabs-more{display:flex}
@media(max-width:760px){
 html.pov-v2 #nav .nav-in{padding:0 20px}
 html.pov-v2 #nav .nav-tabs{padding:0 12px}
 html.pov-v2 #nav .pov-tabs a.pt-t{font-size:12px;padding:0 8px;min-height:40px}
 html.pov-v2 #nav .pov-tabs ul{gap:2px}
 html.pov-v2 #nav .logo{padding:10px 0}
 html.pov-v2 .cta{min-height:48px}
 html.pov-v2 #nav .nav-right .cta{min-height:44px;padding:0 16px}
}
@media(max-width:620px){html.pov-v2 #nav .nav-right .cta-green{display:none}}
/* sub-pills (Undervalued / Rental yield, About / Weekly) — V2 .tab, in the page flow under the nav */
html.pov-v2 .pov-subtabs{max-width:var(--max);margin:0 auto;padding:22px 28px 0;display:flex;gap:9px;flex-wrap:wrap}
html.pov-v2 .pov-subtabs a{font-family:var(--display);font-weight:600;font-size:13.5px;padding:0 20px;min-height:42px;display:inline-flex;align-items:center;border-radius:var(--pill);
 border:1px solid var(--line-2);color:var(--muted);text-decoration:none;background:transparent;transition:.28s var(--ease)}
html.pov-v2 .pov-subtabs a:hover{color:var(--ink);background:var(--sunk)}
html.pov-v2 .pov-subtabs a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:#fff}
html.pov-v2 .pov-offtab{max-width:var(--max);margin:14px auto 0;padding:10px 16px;font-size:14px;background:#FFF7DB;border:1px solid #F0D27A;border-radius:12px}
@media(max-width:760px){html.pov-v2 .pov-subtabs{padding:16px 20px 0}}

/* ════ FOOTER — home-v2's compliance footer ════ */
html.pov-v2 footer.v2foot{border-top:1px solid var(--line);padding:52px 0;background:var(--ground)}
html.pov-v2 .v2foot .wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
html.pov-v2 .v2foot .foot{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center}
html.pov-v2 .v2foot .foot p{font-size:12.5px;color:var(--faint);line-height:1.8;margin:0}
html.pov-v2 .v2foot .foot a{color:var(--muted);text-decoration:none}
html.pov-v2 .v2foot .foot a:hover{color:var(--ink)}
html.pov-v2 .v2foot .powered{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);text-decoration:none}
html.pov-v2 .v2foot .powered img{height:17px;width:auto;display:block;opacity:.82}
html.pov-v2 .v2foot .foot-disc{flex-basis:100%;font-size:11.5px;color:var(--faint);line-height:1.7;max-width:84ch}
@media(max-width:760px){html.pov-v2 .v2foot .wrap{padding:0 20px}}

/* ════ MOBILE STICKY CTA — home-v2 .sticky ════ */
html.pov-v2 .v2sticky{position:fixed;left:0;right:0;bottom:0;z-index:190;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(14,14,16,.94);
 -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--dark-line);transform:translateY(110%);transition:transform .35s var(--ease)}
html.pov-v2 .v2sticky.on{transform:none}
html.pov-v2 .v2sticky .in{display:flex;gap:8px;max-width:560px;margin:0 auto}
html.pov-v2 .v2sticky .cta{flex:1 1 0;text-align:center;font-size:14px;min-height:48px}
@media(min-width:900px){html.pov-v2 .v2sticky{display:none}}
@media(max-width:899px){html.pov-v2 footer.v2foot{padding-bottom:110px}}

/* ════ LEAD-MAGNET BAND — styled by assoc-tabs.js (LM_CSS), which also serves about-v2 ════ */

/* ════ PAGE BODIES — the old template's parts, restyled to V2 tokens ════ */
html.pov-v2 .wrap{max-width:var(--max);padding-inline:28px}
@media(max-width:760px){html.pov-v2 .wrap{padding-inline:20px}}
html.pov-v2 .display,html.pov-v2 .h1{font-family:var(--display);font-weight:600;letter-spacing:-.045em;line-height:1.04}
html.pov-v2 .h1{font-size:clamp(34px,5.2vw,64px)}
html.pov-v2 .h2{font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.08;font-size:clamp(26px,3.4vw,42px)}
html.pov-v2 .h3{font-family:var(--display);font-weight:600;letter-spacing:-.03em}
html.pov-v2 .h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em}
html.pov-v2 em.a{font-weight:600;color:var(--blue)}
html.pov-v2 .lede{font-size:17px;color:var(--muted);line-height:1.66;font-weight:300}
html.pov-v2 .eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.22em;color:var(--blue)}
html.pov-v2 .sec-head .eyebrow::before{background:var(--blue)}
html.pov-v2 .sec{padding:clamp(56px,8vw,104px) 0}
html.pov-v2 main > section.sec:first-child{padding-top:clamp(28px,5vw,64px)}
/* buttons → V2 .cta */
html.pov-v2 .btn{font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:-.01em;padding:13px 24px;border-radius:var(--pill);
 transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s}
html.pov-v2 .btn-p{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 1px 2px rgba(26,68,240,.2),0 10px 24px -12px rgba(26,68,240,.6)}
html.pov-v2 .btn-p:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(26,68,240,.24),0 18px 36px -14px rgba(26,68,240,.7)}
html.pov-v2 .btn-g{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
html.pov-v2 .btn-g:hover{background:var(--sunk);border-color:var(--line-2);transform:translateY(-2px)}
html.pov-v2 .btn-t{color:var(--blue)}
html.pov-v2 .btn-lime{background:#C6F000;color:#141414}
html.pov-v2 .btn-sm{font-size:12.5px;padding:10px 16px}
html.pov-v2 .btn-lg{font-size:14.5px;padding:16px 28px}
/* selection controls → V2 ink-on chips */
html.pov-v2 .chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;border-radius:var(--pill);
 border:1px solid var(--line-2);background:transparent;color:var(--muted)}
html.pov-v2 .chip:hover{color:var(--ink);border-color:var(--muted)}
html.pov-v2 .chip[aria-pressed="true"],html.pov-v2 .seg[aria-pressed="true"],html.pov-v2 .vt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
html.pov-v2 .calctab{font-family:var(--display);font-weight:600;font-size:13.5px;padding:12px 22px;border-radius:var(--pill);border:1px solid var(--line-2);background:transparent;color:var(--muted)}
html.pov-v2 .calctab:hover{color:var(--ink);background:var(--sunk);border-color:var(--line-2)}
html.pov-v2 .calctab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
html.pov-v2 .pill{border-color:var(--line-2);font-family:var(--display);font-weight:500;font-size:13px}
html.pov-v2 .pill:hover{border-color:var(--ink);color:var(--ink)}
html.pov-v2 .pill-live{background:#C6F000;color:#141414;border-color:#C6F000}
/* surfaces → V2 cards */
html.pov-v2 .card,html.pov-v2 .pcard,html.pov-v2 .wcardh,html.pov-v2 .cattile,html.pov-v2 .tablewrap,html.pov-v2 .reslist,html.pov-v2 .stats,html.pov-v2 .figure{border-radius:var(--r-l);border-color:var(--line)}
html.pov-v2 .card,html.pov-v2 .pcard,html.pov-v2 .wcardh,html.pov-v2 .cattile,html.pov-v2 .tablewrap{box-shadow:var(--sh)}
html.pov-v2 .card-link:hover,html.pov-v2 .pcard:hover,html.pov-v2 .wcardh:hover,html.pov-v2 .cattile:hover{border-color:var(--line-2);box-shadow:var(--sh-lift);transform:translateY(-4px)}
html.pov-v2 .card .go{color:var(--blue)}
html.pov-v2 .stat .n{font-family:var(--display);font-weight:600;letter-spacing:-.04em}
html.pov-v2 .leadblock,html.pov-v2 .closeblock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh)}
html.pov-v2 .leadblock li::marker{color:var(--blue)}
html.pov-v2 .note{border-left-color:var(--blue);background:var(--blue-wash)}
/* calculator results → V2 dark panel */
html.pov-v2 .result{background:var(--dark);color:#fff;border-radius:var(--r-l);
 background-image:radial-gradient(120% 140% at 0% 0%,rgba(26,68,240,.26) 0%,transparent 55%)}
html.pov-v2 .result .rv{font-family:var(--display);font-weight:600;letter-spacing:-.045em}
html.pov-v2 .breakdown{border-top-color:rgba(255,255,255,.16)}
html.pov-v2 .result.result-2{background:var(--surface);background-image:none;color:var(--ink);border:1px solid var(--line)}
html.pov-v2 .result.result-2 .rl{color:var(--blue)}
html.pov-v2 .result.result-2 .breakdown{border-top-color:var(--line)}
/* inputs */
html.pov-v2 .inp{border-radius:var(--r-s);border-color:var(--line-2)}
html.pov-v2 .inp:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,68,240,.14)}
/* tables */
html.pov-v2 table.t thead th{color:var(--faint);background:var(--sunk)}
html.pov-v2 .t tr.drow:hover,html.pov-v2 .t tr.drow:focus-visible{background:var(--blue-wash)}
html.pov-v2 .t tr.drow:hover .waicon,html.pov-v2 .t tr.drow:focus-visible .waicon{color:var(--green-ink)}
/* project pages */
html.pov-v2 .crumb a,html.pov-v2 .phero .pin nav a{color:var(--blue)}
html.pov-v2 .stickycta{background:rgba(14,14,16,.94);color:#fff;border-top:1px solid var(--dark-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.pov-v2 .stickycta .scwho b{font-family:var(--display);font-weight:600;color:#fff}
html.pov-v2 .stickycta .scwho span{color:rgba(255,255,255,.62)}
html.pov-v2 .stickycta .btn-p{background:var(--green);border-color:var(--green);box-shadow:none}
html.pov-v2 .stickycta .btn-g{color:#fff;border-color:rgba(255,255,255,.3)}
/* lead modal (pov-assoc.js) */
html.pov-v2 .amodal .sheet{border-radius:var(--r-l)}
@media(max-width:619px){html.pov-v2 .amodal .sheet{border-radius:var(--r-l) var(--r-l) 0 0}}


/* ════════════════════════════════════════════════════════════════════════════
   THEME ATTRIBUTES — sections v2 / site builder phase 1 (31 Oct 2026)
   ────────────────────────────────────────────────────────────────────────────
   content.theme {preset, accent, fontPair, mode} is written onto <html> as
   data-theme / data-accent / data-font / data-mode by home-v2.html (applyTheme)
   and assoc-tabs.js (tab pages). The DEFAULT values — povguy-dark-hero / blue /
   sora-figtree / light — have NO rules here on purpose: they are the V2 look
   exactly, so povguy.sg paints as before. Only the alternatives are styled.
   Unlike everything above, these rules are NOT scoped to html.pov-v2: home-v2
   and about-v2 link this file too (they never get class pov-v2, so nothing
   above touches them). Tab pages: the html.pov-v2 token block sits earlier in
   this file with equal specificity, so these later rules win; the old-template
   --brand tokens are !important there, hence the html.pov-v2[...] repeats.
   Enums must match site-content.ts THEME_PRESETS / THEME_ACCENTS / THEME_FONTS / THEME_MODES.
   Fonts: only the faces already self-hosted in /fonts (Sora, Figtree, DM Mono).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── accent: the V2 "blue" token family ── */
html[data-accent="green"]{--blue:#0A8F5A;--blue-2:#16A870;--blue-wash:#E7F5EE}
html[data-accent="teal"]{--blue:#0F766E;--blue-2:#14958A;--blue-wash:#E6F4F2}
html[data-accent="ink"]{--blue:#141414;--blue-2:#3E3E3E;--blue-wash:#EDEDEC}
html[data-accent="gold"]{--blue:#8A6A16;--blue-2:#A8841F;--blue-wash:#FAF4E4}
html.pov-v2[data-accent="green"]{--brand:#0A8F5A!important;--brand-2:#16A870!important;--brand-wash:#E7F5EE!important;--brand-line:rgba(10,143,90,.24)!important}
html.pov-v2[data-accent="teal"]{--brand:#0F766E!important;--brand-2:#14958A!important;--brand-wash:#E6F4F2!important;--brand-line:rgba(15,118,110,.24)!important}
html.pov-v2[data-accent="ink"]{--brand:#141414!important;--brand-2:#3E3E3E!important;--brand-wash:#EDEDEC!important;--brand-line:rgba(20,20,20,.22)!important}
html.pov-v2[data-accent="gold"]{--brand:#8A6A16!important;--brand-2:#A8841F!important;--brand-wash:#FAF4E4!important;--brand-line:rgba(138,106,22,.26)!important}
/* the button glow follows the accent instead of V2's hard-coded blue */
html:not([data-accent="blue"]) .cta-blue{box-shadow:0 1px 2px rgba(0,0,0,.10),0 10px 24px -12px color-mix(in srgb,var(--blue) 65%,transparent)}
html:not([data-accent="blue"]) .cta-blue:hover{box-shadow:0 2px 4px rgba(0,0,0,.12),0 18px 36px -14px color-mix(in srgb,var(--blue) 72%,transparent)}
/* an ink button disappears on the dark blocks: it turns white there */
html[data-accent="ink"] .hero:not(.hero-min) .cta-blue,html[data-accent="ink"] .close .cta-blue,html[data-accent="ink"] .sticky .cta-blue,
html[data-accent="ink"] .v2sticky .cta-blue,html[data-accent="ink"] .cta-band.dark .cta-blue{background:#fff;color:#141414}
html[data-accent="ink"] .hero.hero-min .cta-blue{background:#fff;color:#141414}
html[data-theme="clean-light"][data-accent="ink"]:not([data-mode="dark"]) .hero .cta-blue{background:#141414;color:#fff}

/* ── fontPair ── */
html[data-font="figtree-figtree"]{--display:"Figtree",system-ui,sans-serif;--serif:"Figtree",system-ui,sans-serif}
html[data-font="sora-sora"]{--sans:"Sora",system-ui,sans-serif}

/* ── mode: dark (any preset) and the midnight preset (always dark, navy) ── */
html[data-mode="dark"]{color-scheme:dark;
 --ground:#0E0E10;--surface:#16161A;--sunk:#1D1D22;--sunk-2:#26262C;
 --ink:#EDEDEE;--ink-2:#C8C8CC;--muted:#A3A3A9;--faint:#8C8C93;--line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.22);
 --sh:0 1px 2px rgba(0,0,0,.3),0 12px 32px -20px rgba(0,0,0,.6);--sh-lift:0 2px 8px rgba(0,0,0,.35),0 26px 56px -28px rgba(0,0,0,.7)}
html[data-theme="midnight"]{color-scheme:dark;
 --ground:#0A0F1E;--surface:#101833;--sunk:#152040;--sunk-2:#1C2A50;--dark:#060A16;--dark-2:#0B1124;
 --ink:#EEF1FA;--ink-2:#C9D0E6;--muted:#9EA8C6;--faint:#8792B4;--line:rgba(160,180,255,.14);--line-2:rgba(160,180,255,.26);
 --sh:0 1px 2px rgba(0,0,0,.3),0 12px 32px -20px rgba(0,0,0,.7);--sh-lift:0 2px 8px rgba(0,0,0,.4),0 26px 56px -28px rgba(0,0,0,.8)}
html[data-theme="midnight"][data-accent="blue"]{--blue:#5B7CFF;--blue-2:#7B96FF;--blue-wash:rgba(91,124,255,.14)}
html[data-mode="dark"][data-accent="blue"]{--blue:#4D6BFF;--blue-2:#7088FF;--blue-wash:rgba(77,107,255,.14)}
html.pov-v2[data-theme="midnight"]{--brand-wash:rgba(91,124,255,.14)!important}
/* on dark grounds an ink accent becomes the light ink */
html[data-mode="dark"][data-accent="ink"],html[data-theme="midnight"][data-accent="ink"]{--blue:#EDEDEE;--blue-2:#FFFFFF;--blue-wash:rgba(255,255,255,.08)}
html[data-mode="dark"][data-accent="ink"] .cta-blue,html[data-theme="midnight"][data-accent="ink"] .cta-blue{color:#141414}
html[data-mode="dark"][data-accent="gold"],html[data-theme="midnight"][data-accent="gold"]{--blue:#D2A93C;--blue-2:#E4C060;--blue-wash:rgba(210,169,60,.12)}
html[data-mode="dark"][data-accent="teal"],html[data-theme="midnight"][data-accent="teal"]{--blue:#1FA396;--blue-2:#36BFB1;--blue-wash:rgba(31,163,150,.14)}
/* V2's light-only literals, on a dark ground */
html[data-mode="dark"] #nav.solid,html[data-theme="midnight"] #nav.solid{background:color-mix(in srgb,var(--ground) 94%,transparent);border-bottom-color:var(--line)}
html.pov-v2[data-mode="dark"] nav#nav,html.pov-v2[data-theme="midnight"] nav#nav{background:color-mix(in srgb,var(--ground) 86%,transparent)}
html.pov-v2[data-mode="dark"] nav#nav.solid,html.pov-v2[data-theme="midnight"] nav#nav.solid{background:color-mix(in srgb,var(--ground) 95%,transparent)}
html[data-mode="dark"] #nav .logo img,html[data-theme="midnight"] #nav .logo img,
html[data-mode="dark"] .powered img,html[data-theme="midnight"] .powered img,
html[data-mode="dark"] .cov-by img,html[data-theme="midnight"] .cov-by img{filter:brightness(0) invert(1)}
html[data-mode="dark"] #nav .pov-tabs a.pt-t[aria-current=page],html[data-theme="midnight"] #nav .pov-tabs a.pt-t[aria-current=page]{color:var(--ground)}
html[data-mode="dark"] .tabs-more,html[data-theme="midnight"] .tabs-more{background:color-mix(in srgb,var(--ground) 96%,transparent);box-shadow:-14px 0 14px 2px color-mix(in srgb,var(--ground) 90%,transparent)}
html[data-mode="dark"] .adbar,html[data-theme="midnight"] .adbar{background:color-mix(in srgb,var(--ground) 95%,transparent)}
html[data-mode="dark"] .dcat,html[data-theme="midnight"] .dcat{color:#141414}
html[data-mode="dark"] .dthumb.noimg,html[data-theme="midnight"] .dthumb.noimg{background:var(--sunk-2)}
html[data-mode="dark"] .cta-band.light,html[data-theme="midnight"] .cta-band.light{background:var(--sunk)}
html[data-mode="dark"] body::after,html[data-theme="midnight"] body::after{opacity:.10;mix-blend-mode:screen}

/* ── preset: clean-light — the hero on the page ground instead of the dark photo wash ── */
html[data-theme="clean-light"] .hero{background:var(--ground);color:var(--ink)}
html[data-theme="clean-light"] .hero h1{color:var(--ink);-webkit-text-fill-color:var(--ink)}
html[data-theme="clean-light"] .hero h1 em{color:var(--blue);-webkit-text-fill-color:var(--blue)}
html[data-theme="clean-light"] .hero .hero-sub{color:var(--ink-2)}
html[data-theme="clean-light"] .hero .hero-sub b{color:var(--ink)}
html[data-theme="clean-light"] .hero .hero-id{color:var(--faint)}
html[data-theme="clean-light"] .hero .kicker{color:var(--muted)}
html[data-theme="clean-light"] .hero-wash{background:linear-gradient(95deg,var(--ground) 0%,color-mix(in srgb,var(--ground) 94%,transparent) 34%,
 color-mix(in srgb,var(--ground) 62%,transparent) 50%,color-mix(in srgb,var(--ground) 10%,transparent) 70%,transparent 84%)}
@media(max-width:900px){html[data-theme="clean-light"] .hero-wash{background:linear-gradient(180deg,color-mix(in srgb,var(--ground) 20%,transparent) 0%,
 color-mix(in srgb,var(--ground) 30%,transparent) 22%,color-mix(in srgb,var(--ground) 88%,transparent) 46%,var(--ground) 64%,var(--ground) 100%)}}
html[data-theme="clean-light"] .hero .cta-ghost{border-color:var(--line-2);color:var(--ink);background:transparent}
html[data-theme="clean-light"] .hero .cta-ghost:hover{background:var(--sunk)}
html[data-theme="clean-light"] .hero-alt{color:var(--muted)}
html[data-theme="clean-light"] .hero-wa{color:var(--ink)}
html[data-theme="clean-light"] .hero-live{background:var(--surface);border-color:var(--line);color:var(--ink)}
html[data-theme="clean-light"] .hero.hero-min{background-image:radial-gradient(110% 90% at 8% 0%,var(--blue-wash) 0%,transparent 60%)}
html[data-theme="clean-light"]:not([data-mode="dark"]) #nav:not(.solid) .logo img{filter:none}
html[data-theme="clean-light"] #nav:not(.solid) .logo-txt{color:var(--ink)}
html[data-theme="clean-light"] #nav:not(.solid) .pov-tabs a.pt-t{color:var(--ink-2)}
html[data-theme="clean-light"] #nav:not(.solid) .pov-tabs a.pt-t:hover{background:var(--sunk);color:var(--ink)}
html[data-theme="clean-light"] #nav:not(.solid) .pov-tabs a.pt-t[aria-current=page]{background:var(--ink);color:var(--ground)}
html[data-theme="clean-light"] #nav:not(.solid) .tabs-more{background:color-mix(in srgb,var(--ground) 96%,transparent);box-shadow:-14px 0 14px 2px color-mix(in srgb,var(--ground) 90%,transparent)}
html[data-theme="clean-light"] #nav:not(.solid) .tabs-more::after{border-color:var(--ink)}

/* ── preset: midnight — the navy carries into the dark blocks ── */
html[data-theme="midnight"] .hero,html[data-theme="midnight"] .close{background-color:var(--dark)}
html[data-theme="midnight"] .hero.hero-min{background-image:radial-gradient(110% 90% at 8% 0%,rgba(91,124,255,.26) 0%,transparent 60%)}
html[data-theme="midnight"] .ticker{background:var(--surface)}