@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
/* Investezo v2 design (24 Oct 2026): warm paper, ink, one gold accent; one dark block per page. Keeps every v1 class. */
:root{--ink:#16130D;--ink2:rgba(22,19,13,.74);--mut:rgba(22,19,13,.60);--faint:rgba(22,19,13,.40);--line:rgba(22,19,13,.09);--line2:rgba(22,19,13,.16);
--paper:#F6F4EE;--paper2:#EFECE3;--card:#FFFFFF;--gold:#C99A2E;--goldd:#8A6414;--goldt:#F8F0DA;--goldb:#EAD8A6;--glow:#F6D77A;--night:#0C0E0B;--night2:#151812;
--red:#C8402F;--clay:#B4532A;--r:22px;--sh:0 1px 2px rgba(22,19,13,.04),0 8px 28px -12px rgba(22,19,13,.12);
--g:var(--gold);--gd:var(--goldd);--bg:var(--paper)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--goldd);text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:var(--ink)}
.w{max-width:1120px;margin:0 auto;padding:0 20px}
::selection{background:var(--glow);color:var(--ink)}
/* header: floating pill */
header{position:sticky;top:0;z-index:50;padding:12px 0;background:linear-gradient(var(--paper) 40%,rgba(246,244,238,0))}
header .w{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border:1px solid var(--line);border-radius:999px;padding:0 10px 0 20px;box-shadow:0 6px 24px -14px rgba(22,19,13,.25)}
.brand{display:inline-flex;align-items:center;gap:0;font-weight:800;font-size:19px;letter-spacing:-.2px;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand i{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:23px;color:var(--goldd);margin-left:1px}
.brand .mk{width:22px;height:22px;margin-right:9px;flex:none;border-radius:7px;background:radial-gradient(circle at 30% 28%,var(--glow),var(--gold) 55%,#7A5310);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
header nav{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none}header nav::-webkit-scrollbar{display:none}
header nav a{margin:0;padding:8px 12px;border-radius:999px;color:var(--ink2);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}header nav a:hover{background:var(--paper2);color:var(--ink)}
header nav a.live{border:1px solid var(--line2);color:var(--ink);margin-left:6px}header nav a.live:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 3px rgba(201,154,46,.18);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(201,154,46,0)}}
/* type */
h1{font-size:clamp(34px,5.2vw,62px);line-height:1.02;margin:16px 0 16px;letter-spacing:-1.4px;font-weight:800}
h1 em,h2 em,.serif{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.5px}
h1 em{color:var(--goldd)}
h2{letter-spacing:-.6px;line-height:1.12}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--ink2);margin:0 0 22px;max-width:640px}
.kick{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--goldd);background:var(--goldt);border:1px solid var(--goldb);border-radius:999px;padding:5px 12px}
/* hero (inner pages) */
.hero{padding:44px 0 40px}.hero .w{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:start}
ul.ticks{list-style:none;padding:0;margin:0 0 20px}ul.ticks li{padding:7px 0 7px 30px;position:relative;color:var(--ink2)}
ul.ticks li:before{content:"";position:absolute;left:2px;top:12px;width:16px;height:16px;border-radius:50%;background:var(--goldt);box-shadow:inset 0 0 0 1px var(--goldb)}
ul.ticks li:after{content:"";position:absolute;left:7px;top:16px;width:6px;height:3.5px;border-left:2px solid var(--goldd);border-bottom:2px solid var(--goldd);transform:rotate(-45deg)}
/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh)}
.card h2{font-size:21px;margin:0 0 6px}.card p.s{margin:0 0 16px;color:var(--mut);font-size:14.5px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.g3 .card h3{margin:0 0 6px;font-size:17px;letter-spacing:-.2px}.g3 .card p{margin:0;color:var(--mut);font-size:14.5px}
.hub .card{display:block;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative}
.hub .card:hover{transform:translateY(-3px);border-color:var(--goldb);box-shadow:0 1px 2px rgba(22,19,13,.04),0 18px 40px -18px rgba(22,19,13,.28)}
.hub .card:after{content:"\2192";position:absolute;right:20px;top:20px;color:var(--faint);font-size:18px;transition:transform .2s,color .2s}.hub .card:hover:after{transform:translateX(3px);color:var(--goldd)}
/* forms */
label{display:block;font-size:13px;font-weight:700;margin:12px 0 5px;color:var(--ink)}
input,textarea,select{width:100%;font:inherit;font-size:15px;padding:11px 14px;border:1px solid var(--line2);border-radius:12px;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
textarea{min-height:96px;resize:vertical}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,154,46,.16)}
input[type=color]{padding:4px;height:44px}input[type=checkbox]{width:auto}
.chk{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:13px;color:var(--mut);margin-top:14px}.chk input{width:auto;margin-top:3px;accent-color:var(--ink)}
.hp{position:absolute;left:-9999px}
button.go,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;width:100%;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:14px 22px;font:inherit;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s}
button.go:hover,.btn:hover{background:#000;color:#fff;transform:translateY(-1px)}button.go[disabled]{opacity:.55;transform:none}
.btn{width:auto;margin-top:0}.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}.btn.ghost:hover{background:#fff;color:var(--ink)}
.msg{margin-top:10px;font-size:14px}.msg.ok{color:var(--goldd)}.msg.err{color:var(--red)}
/* bands */
section.band{padding:56px 0;border-top:0}section.band+section.band{border-top:1px solid var(--line)}
section.band h2{font-size:clamp(26px,3vw,36px);margin:0 0 18px}
.fact{font-size:14.5px;color:var(--mut)}.fact b{color:var(--ink)}.src{font-size:12px;color:var(--faint)}
details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin-bottom:10px;transition:box-shadow .2s}details[open]{box-shadow:var(--sh)}
summary{font-weight:700;cursor:pointer;list-style:none;position:relative;padding-right:28px}summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:0;top:-2px;font-size:22px;font-weight:400;color:var(--goldd);transition:transform .2s}details[open] summary:after{transform:rotate(45deg)}
details p{color:var(--ink2);margin:10px 0 2px}
/* calculators and tables */
.calc .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.out{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.out table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}.out td,.out th{padding:7px 4px;border-bottom:1px solid var(--line);text-align:right}.out th:first-child,.out td:first-child{text-align:left}
.neg{color:var(--red)}.big{font-size:24px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
/* footer */
footer{padding:44px 0 56px;margin-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--mut)}footer p{margin:6px 0}
footer .fw{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;margin-bottom:26px}
footer .fw b{display:block;color:var(--ink);font-size:13px;margin-bottom:8px}footer .fw a{display:block;color:var(--ink2);text-decoration:none;padding:3px 0}footer .fw a:hover{color:var(--goldd)}
footer .big-brand{font-size:28px;font-weight:800;letter-spacing:-.6px;color:var(--ink)}footer .big-brand i{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;color:var(--goldd);font-size:33px}
footer a{color:var(--ink2)}
/* dark block (one per page) */
.night{background:var(--night);color:#F4F1E8}.night a{color:var(--glow)}.night .lead{color:rgba(244,241,232,.76)}
/* small helpers used by v2 pages */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink2);white-space:nowrap}
.chip b{color:var(--ink);font-variant-numeric:tabular-nums}
.sect-h{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.sect-h h2{margin:0!important}.sect-h p{margin:0;color:var(--mut);max-width:420px;font-size:15px}
@media(max-width:860px){.hero .w{grid-template-columns:1fr;gap:26px}.g3{grid-template-columns:1fr}header .w{padding:0 6px 0 14px}header nav a{padding:8px 9px;font-size:13.5px}header nav a.live{margin-left:2px}footer .fw{grid-template-columns:1fr 1fr}.sect-h{display:block}.sect-h p{margin-top:6px}section.band{padding:44px 0}}
@media(max-width:520px){header nav a:not(.keep){display:none}header nav a.keep{display:inline-block}header nav a .lt{display:none}.brand{font-size:18px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* body text justified on every page (Will, 22 Oct 2026); centred or styled blocks keep their own alignment */
html body main :is(p,li,dd,blockquote,figcaption){text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto}
html body main :is(td,th,button,label,nav) :is(p,li){text-align:inherit}
html body main :is(.hx,.lv,.tl,.gd,.chip,.sect-h,.card.hub-c) p{text-align:left;hyphens:manual;-webkit-hyphens:manual}
/* ideas box restyle (overrides ideas.css greens) */
html body .izsteps li:before{background:var(--goldt);color:var(--goldd);box-shadow:inset 0 0 0 1px var(--goldb)}
html body .izok{background:var(--goldt);border:1px solid var(--goldb)}
html body .izl{border-color:var(--line);border-radius:16px}html body .izl th{background:var(--paper);color:var(--mut)}html body .izl th,html body .izl td{border-bottom-color:var(--line)}
html body .izempty{border-color:var(--line2)}html body .p-done{background:var(--goldt);color:var(--goldd)}html body .p-new{background:var(--paper2);color:var(--mut)}

/* social profile chips in the footer (26-IDE-003, 24 Oct 2026) */
footer .soc{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
footer .soc a{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 9px;border:1px solid var(--line2);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-size:13px;font-weight:600;line-height:1.2}
footer .soc a:hover{border-color:var(--gold);color:var(--goldd)}
footer .soc svg{width:18px;height:18px;flex:none;color:var(--ink)}
footer .soc a:hover svg{color:var(--goldd)}

/* 26-IDE-020 + 26-IDE-018 (Will, 24 Oct 2026): every page opens with the same dark rounded block as the home page,
   and on phones text sits 20 px from the screen edge on every page (8 px block margin + 12 px inside). */
main>section.hero:first-child{position:relative;margin:0 12px;border-radius:28px;padding:52px 0 48px;color:#F3F7F1;overflow:hidden;background:radial-gradient(90% 120% at 88% 0%,rgba(201,154,46,.20),rgba(201,154,46,0) 58%),radial-gradient(70% 90% at 0% 100%,rgba(85,196,106,.07),rgba(85,196,106,0) 60%),#0B110A}
main>section.hero:first-child h1{color:#fff}
main>section.hero:first-child h1 em{color:transparent;background:linear-gradient(90deg,#F6D77A,#E0A93B 45%,#C99A2E);-webkit-background-clip:text;background-clip:text}
main>section.hero:first-child .lead,main>section.hero:first-child>.w>p,main>section.hero:first-child>.w>div:not(.card)>p,main>section.hero:first-child ul.ticks li{color:rgba(243,247,241,.80)}
main>section.hero:first-child .kick{color:#E3C77E;background:rgba(20,15,8,.55);border-color:rgba(227,199,126,.35)}
main>section.hero:first-child>.w>a:not(.btn),main>section.hero:first-child>.w>p a,main>section.hero:first-child>.w>div:not(.card) a:not(.btn){color:#F1D58B}
main>section.hero:first-child .crumb,main>section.hero:first-child .crumb a{color:rgba(243,247,241,.62)}
main>section.hero:first-child ul.ticks li:before{background:rgba(246,215,122,.12);box-shadow:inset 0 0 0 1px rgba(227,199,126,.4)}
main>section.hero:first-child ul.ticks li:after{border-color:#F1D58B}
main>section.hero:first-child .card{color:var(--ink)}
main>section.hero:first-child .chip{background:rgba(255,255,255,.06);border-color:rgba(227,199,126,.3);color:rgba(243,247,241,.85)}main>section.hero:first-child .chip b{color:#fff}
main>section.hero:first-child>.w>.btn,main>section.hero:first-child>.w>div:not(.card) .btn:not(.ghost){background:#F1D58B;color:#16130D}main>section.hero:first-child>.w .btn.ghost:not(.card .btn){color:#F3F7F1;border-color:rgba(246,244,238,.4)}
main>section.hero:first-child>.w>.fact,main>section.hero:first-child>.w>div:not(.card) .fact,main>section.hero:first-child>.w>.src,main>section.hero:first-child>.w>div:not(.card) .src{color:rgba(243,247,241,.62)}main>section.hero:first-child .fact b{color:#fff}
main>section.hero:first-child>.w>label,main>section.hero:first-child>.w>div:not(.card)>label{color:#F3F7F1}
main>section.hero-s:first-child{padding:40px 0 34px}main>section.hero-s:first-child h1{font-size:clamp(30px,4.4vw,52px);margin:12px 0 12px}
main>section.hero-s:first-child .lead{margin-bottom:6px}
@media(max-width:600px){main>section.hero:first-child{margin:0 8px;border-radius:24px;padding:36px 0 32px}main>section.hero:first-child>.w{padding:0 12px}main>section.hero-s:first-child{padding:30px 0 26px}}
main>section.hero:first-child .meta,main>section.hero:first-child .meta a{color:rgba(243,247,241,.62)}main>section.hero:first-child .meta a{text-decoration:underline}
@media(max-width:600px){html body main>section.hero:first-child :is(p,li){text-align:left;-webkit-hyphens:manual;hyphens:manual}}