/* Hometill: Budget Planner · loaded only by the Hometill pages (body.ht), generated by hometill.py.
   Tokens = the app's Compás palette (clarito-app docs/design/TOKENS.md §1, light and dark). Type = §2: SF Pro only (system-ui),
   so these pages load no web fonts. Monochrome controls; green only where it means money left ("Libre"), as in the app.
   site.css stays untouched: the Hometill pages remap its variables under body.ht, so the shared header and footer keep their structure. */

body.ht{
  --ht-canvas:#F3F2EE;--ht-surface:#FFFFFF;--ht-fill:#EAE8E2;--ht-rule:#DEDBD4;--ht-line:rgba(21,24,26,.22);
  --ht-ink:#15181A;--ht-ink2:#5C6165;--ht-accent:#15181A;--ht-on-accent:#FFFFFF;
  --ht-in:#1A7F4F;--ht-in-fill:#EEF7F1;--ht-dawn-a:#FBE3C8;--ht-dawn-b:#F6EFE4;
  --ht-nav:rgba(243,242,238,.86);
  --ht-text:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ht-shadow:0 30px 60px -30px rgba(21,24,26,.28),0 10px 24px -12px rgba(21,24,26,.14);
}
@media (prefers-color-scheme:dark){
  body.ht{
    --ht-canvas:#0E1011;--ht-surface:#1A1C1E;--ht-fill:#26292B;--ht-rule:#303336;--ht-line:rgba(241,240,236,.26);
    --ht-ink:#F1F0EC;--ht-ink2:#A4A9AD;--ht-accent:#F1F0EC;--ht-on-accent:#15181A;
    --ht-in:#3FAF78;--ht-in-fill:#17321F;--ht-dawn-a:#24272B;--ht-dawn-b:#141618;
    --ht-nav:rgba(14,16,17,.86);
    --ht-shadow:0 30px 60px -30px rgba(0,0,0,.65),0 10px 24px -12px rgba(0,0,0,.45);
  }
}

/* ---- Remap site.css variables ---- */
body.ht{
  --cream:var(--ht-canvas);--ink:var(--ht-ink);--ink2:var(--ht-ink2);--teal:var(--ht-accent);--orange:var(--ht-accent);
  --sand:var(--ht-fill);--mint:var(--ht-fill);--peach:var(--ht-fill);--butter:var(--ht-fill);--sky:var(--ht-fill);
  --serif:var(--ht-text);--sans:var(--ht-text);--shadow:var(--ht-shadow);--r:20px;
  font-family:var(--ht-text);background:var(--ht-canvas);color:var(--ht-ink);
}
body.ht h1,body.ht h2{font-family:var(--ht-text);font-weight:700;letter-spacing:-.02em;line-height:1.08}
body.ht h1{font-size:clamp(38px,5.6vw,68px)}
body.ht h2{font-size:clamp(28px,3.6vw,44px)}
body.ht h3{font-family:var(--ht-text);font-size:19px;font-weight:600;letter-spacing:0;line-height:1.3}
body.ht .accent{font-style:normal;color:var(--ht-ink2)}
body.ht :is(.brand,.btn,.lang,.platforms,b,strong,.faq summary){font-weight:600}
body.ht .eyebrow{text-transform:none;letter-spacing:.01em;font:600 15px/1.2 var(--ht-text);color:var(--ht-ink2)}
body.ht .eyebrow::before{background:var(--ht-ink2)}
body.ht a{color:inherit}
body.ht .skip:focus{background:var(--ht-surface);color:var(--ht-ink)}
body.ht .lead{color:var(--ht-ink2)}

/* Shared header and footer: same structure, Hometill surfaces (and dark mode) */
body.ht .nav{background:var(--ht-nav);border-bottom-color:var(--ht-rule)}
body.ht .lang{border-color:var(--ht-line)}
body.ht .langs div{background:var(--ht-surface);box-shadow:var(--ht-shadow);border:1px solid var(--ht-rule)}
body.ht footer .wrap{border-top-color:var(--ht-rule)}

/* Buttons and pills: monochrome, like the app's controls */
body.ht .btn{min-height:48px;border-radius:999px}
body.ht :is(.btn-orange,.btn-ink){background:var(--ht-accent);color:var(--ht-on-accent);box-shadow:none}
body.ht .btn-ghost{border-color:var(--ht-line);color:var(--ht-ink)}
body.ht .soon{color:var(--ht-ink2)}
body.ht .soon b{text-transform:none;letter-spacing:.01em;font-size:13px;font-weight:600;background:var(--ht-fill);color:var(--ht-ink);padding:6px 10px;white-space:nowrap}
body.ht .platforms{color:var(--ht-ink2)}

/* Hero: the real icon («Amanece clarito») on a dawn wash, three promises */
.ht-meta{margin-top:22px;font-size:15px;color:var(--ht-ink2)}
.ht-stage{position:relative;border-radius:40px;aspect-ratio:1/1;max-width:500px;width:100%;margin-left:auto;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--ht-dawn-a),var(--ht-dawn-b));box-shadow:inset 0 0 0 1px var(--ht-rule)}
.ht-stage picture{display:block;width:48%}
img.ht-icon{border-radius:22.5%}
.ht-hero-icon{display:block;width:100%;height:auto;box-shadow:var(--ht-shadow)}
.ht-chips{list-style:none;margin:0;padding:0}
.ht-chip{position:absolute;background:var(--ht-surface);color:var(--ht-ink);border:1px solid var(--ht-rule);border-radius:999px;
  padding:9px 15px;font:600 14px/1.2 var(--ht-text);box-shadow:var(--ht-shadow);white-space:nowrap}
.ht-chip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ht-in);margin-right:8px;vertical-align:1px}
.ht-chip.c0{left:6%;top:7%}
.ht-chip.c1{right:5%;bottom:16%}
.ht-chip.c2{left:8%;bottom:5%}
@media(max-width:900px){.ht-stage{margin:0 auto;max-width:440px}}
@media(max-width:420px){.ht-chip{font-size:13px;padding:8px 12px}.ht-chip.c1{right:3%}.ht-chip.c2{left:4%}}

/* Checklists (drawn in CSS so they follow light and dark): the app's "money in" green */
.ht-checks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.ht-checks li{position:relative;padding-left:30px;color:var(--ht-ink2);max-width:60ch}
.ht-checks li::before{content:"";position:absolute;left:0;top:.25em;width:20px;height:20px;border-radius:50%;background:var(--ht-in-fill)}
.ht-checks li::after{content:"";position:absolute;left:7.5px;top:calc(.25em + 4.5px);width:5px;height:9px;border:solid var(--ht-in);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Not financial advice */
.ht-note{background:var(--ht-surface);border-radius:20px;padding:clamp(26px,3.4vw,40px);border:1px solid var(--ht-rule);border-left:6px solid var(--ht-ink)}
body.ht .ht-note h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:12px}
.ht-note p{color:var(--ht-ink2);max-width:70ch}
body.ht .ht-note a{display:inline-block;margin-top:14px;font-weight:600;color:var(--ht-ink)}

/* Final block and the support header */
body.ht .final{background:var(--ht-surface);border:1px solid var(--ht-rule)}
body.ht .final picture{display:block}
body.ht .final img.logo.ht-icon{width:clamp(130px,15vw,200px);height:auto;animation:none;filter:none;box-shadow:var(--ht-shadow)}
body.ht .final.ht-head{grid-template-columns:auto 1fr}
@media(max-width:760px){body.ht .final.ht-head{grid-template-columns:1fr}body.ht .final.ht-head img.logo.ht-icon{width:104px}}

/* FAQ */
body.ht .faq details{border-bottom-color:var(--ht-rule)}
body.ht .faq summary::after{color:var(--ht-ink2)}
body.ht .faq p{color:var(--ht-ink2)}
body.ht .faq p+p{margin-top:10px}
body.ht .faq a{color:var(--ht-ink);text-underline-offset:3px}

/* Legal and support pages (the Bluvli layout, Hometill colours) */
.ht-crumbs{font-size:14px;color:var(--ht-ink2);margin-bottom:18px}
body.ht .ht-crumbs a{color:var(--ht-ink);text-decoration:none}
.ht-crumbs a:hover{text-decoration:underline}
body.ht .legal{max-width:780px;margin:0 auto}
body.ht .legal h1{font-size:clamp(36px,5vw,58px)}
body.ht .legal .updated{margin-top:14px;color:var(--ht-ink2);font-size:15px}
body.ht .legal .tldr{background:var(--ht-fill);border-radius:20px;padding:clamp(24px,3vw,34px);margin-top:34px}
body.ht .legal .tldr h2,body.ht .legal .toc h2{font-size:clamp(22px,2.2vw,26px);margin-bottom:14px}
body.ht .legal .toc{margin-top:34px}
body.ht .legal .toc ol{margin:0;padding:0;list-style:none;columns:2;column-gap:36px;font-size:15.5px}
body.ht .legal .toc li{margin:0 0 8px;break-inside:avoid}
body.ht .legal .toc a{color:var(--ht-ink);text-decoration:none}
body.ht .legal .toc a:hover{text-decoration:underline}
body.ht .legal section{scroll-margin-top:84px}
body.ht .legal section>h2{font-size:clamp(24px,2.5vw,30px);margin:56px 0 16px}
body.ht .legal p{margin-top:12px}
body.ht .legal ul{margin:12px 0 0;padding-left:22px}
body.ht .legal li{margin-top:8px}
body.ht .legal li ul{margin-top:4px}
body.ht .legal ul.ht-checks{padding-left:0;margin-top:0}
body.ht .legal ul.ht-checks li{margin-top:0}
body.ht .legal a{color:var(--ht-ink);text-underline-offset:3px}
@media(max-width:640px){body.ht .legal .toc ol{columns:1}}
.ht-topics{max-width:820px;margin:0 auto}
.ht-topics section{scroll-margin-top:84px}
body.ht .ht-topics h2{font-size:clamp(26px,3vw,36px);margin:64px 0 6px}
.ht-topics section:first-child h2{margin-top:0}
.ht-jump{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto 10px;max-width:820px;padding:0;list-style:none}
body.ht .ht-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;border:1.5px solid var(--ht-line);text-decoration:none;font-weight:600;font-size:14.5px}
body.ht .ht-jump a:hover{border-color:var(--ht-ink)}
.ht-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font-weight:600;font-size:15px}
body.ht .ht-links a{color:var(--ht-ink)}