/* Goodhands website. The palette and shapes are the app's own (tiptracker/src/ui/tokens.ts):
   #F2F2F7 ground, white cards with #E5E5EA hairlines, #1C1C1E text, green #0A7C5F;
   dark = black ground, #1C1C1E cards, #30D158 green. System font, like the app (Roboto / SF). */
:root{
  --ground:#F2F2F7;--card:#FFFFFF;--well:#F2F2F7;--line:#E5E5EA;
  --ink:#1C1C1E;--muted:#5C5C61;--green:#0A7C5F;--on-green:#FFFFFF;--soft:#DDF1E8;--green-text:#076B51;
  --warn:#9A5200;--warn-soft:#FBEEDC;--bar:#C7C7CC;--bezel:#1C1C1E;--bezel-edge:#3A3A3C;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#000000;--card:#1C1C1E;--well:#2C2C2E;--line:#2C2C2E;
  --ink:#F5F5F7;--muted:#A1A1A6;--green:#30D158;--on-green:#000000;--soft:#0F2A18;--green-text:#30D158;
  --warn:#FFB340;--warn-soft:#2E2410;--bar:#48484A;--bezel:#2C2C2E;--bezel-edge:#48484A;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ground:#000000;--card:#1C1C1E;--well:#2C2C2E;--line:#2C2C2E;
  --ink:#F5F5F7;--muted:#A1A1A6;--green:#30D158;--on-green:#000000;--soft:#0F2A18;--green-text:#30D158;
  --warn:#FFB340;--warn-soft:#2E2410;--bar:#48484A;--bezel:#2C2C2E;--bezel-edge:#48484A;
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}
/* theme toggle */
.theme-btn{display:inline-grid;place-items:center;width:44px;height:44px;margin-left:2px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;flex:none}
.theme-btn:hover{background:var(--card);color:var(--ink)}
.theme-btn svg{width:20px;height:20px}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .sun{display:none}:root:not([data-theme="light"]) .theme-btn .moon{display:block}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text",Roboto,"Segoe UI","Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
a{color:var(--green)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}

/* ---- page frame ---- */
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
@media (min-width:860px){.wrap{padding:0 32px}}
header.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:18px 0;min-height:64px;overflow:hidden}
.brand{display:inline-flex;align-items:center;min-height:44px;gap:9px;font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand svg{width:26px;height:26px;flex:none}
.brand .sub{color:var(--muted);font-weight:400;white-space:nowrap}
@media (max-width:599px){.brand .sub{display:none}}
nav.links{display:flex;gap:2px;justify-content:flex-end;flex:none;margin-left:auto}
/* phones: brand on the first row, links on the second (the nav no longer fits on one row) */
@media (max-width:599px){header.top{padding:8px 0 4px;gap:0 12px}nav.links{flex:1 1 100%;justify-content:flex-start;margin-left:-9px}nav.links .theme-btn{margin-left:auto}}
nav.links{align-items:center}
nav.links a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;font-size:15px;padding:0 8px;border-radius:8px;white-space:nowrap}
@media (max-width:599px){nav.links a.contact,nav.links a.priv{display:none}nav.links a{font-size:15px;padding:0 9px}.brand{font-size:17px;gap:7px}}
@media (max-width:359px){nav.links a{font-size:14px;padding:0 6px}}
nav.links a:hover{color:var(--ink);background:var(--card)}
nav.links a[aria-current]{color:var(--ink)}
/* Tip Tracker header (header.top.tt): phones and tablets get two rows, brand + language + theme on the first, the four
   section links on the second; from 860px it is one row. Every link and the theme button are at least 44px tall. */
header.tt{padding:8px 0 4px;gap:0 8px}
header.tt .hdr-end{display:flex;align-items:center;gap:2px;margin-left:auto;flex:none}
header.tt .hdr-end a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;font-size:15px;padding:0 8px;border-radius:8px;white-space:nowrap}
header.tt .hdr-end a:hover{color:var(--ink);background:var(--card)}
header.tt .hdr-end .theme-btn{margin-left:0}
header.tt nav.links{order:2;flex:1 1 100%;flex-wrap:wrap;justify-content:flex-start;margin-left:-9px}
header.tt nav.links a{padding:0 9px;font-size:15px}
header.tt nav.links a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--green);border-radius:8px 8px 0 0}
@media (max-width:359px){header.tt nav.links a{font-size:14px;padding:0 6px}header.tt nav.links{margin-left:-6px}}
@media (min-width:860px){
  header.tt{padding:18px 0;gap:4px 12px}
  header.tt nav.links{order:0;flex:none;flex-wrap:nowrap;margin-left:auto;justify-content:flex-end}
  header.tt nav.links a{padding:0 8px}
  header.tt .hdr-end{margin-left:0}
}

/* home: the two free calculators, compact, inside the hero text */
.home-tools{margin:22px 0 0}
.home-tools h2{font-size:17px;line-height:1.3;letter-spacing:-.01em;margin:0 0 8px}
.home-tools h2 span{display:block;font-weight:400;font-size:14px;color:var(--muted);letter-spacing:0}
.home-tools .list a.rowlink{min-height:52px;padding:11px 14px}
.home-tools .list .l{font-size:16px;font-weight:600}
.home-tools .list .l small{font-weight:400}
.home-tools-all{display:inline-flex;align-items:center;min-height:44px;gap:4px;font-size:15px;color:var(--green-text);font-weight:600;text-decoration:none}
.home-tools-all:hover{text-decoration:underline}

/* calculators hub: one card per tool */
.tool-cards{list-style:none;margin:20px 0 8px;padding:0;display:grid;gap:12px}
@media (min-width:640px){.tool-cards{grid-template-columns:1fr 1fr}}
.tool-card{background:var(--card);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:10px}
.prose .tool-card h2{font-size:20px;line-height:1.25;margin:0}
.prose .tool-card p{margin:0;color:var(--muted);font-size:16px;line-height:1.45;flex:1}
.tool-card .btn{align-self:stretch;text-align:center}
@media (min-width:640px){.tool-card .btn{align-self:flex-start}}

h1{font-size:clamp(34px,6.5vw,54px);line-height:1.08;letter-spacing:-.025em;font-weight:700;margin:0 0 16px;max-width:14ch}
h2{font-size:28px;line-height:1.2;letter-spacing:-.5px;font-weight:700;margin:0 0 10px}
.lead{font-size:19px;line-height:1.45;color:var(--muted);margin:0 0 24px;max-width:36ch}
p{max-width:60ch}
.muted{color:var(--muted)}
.small{font-size:14px;line-height:1.5;color:var(--muted)}

/* buttons borrowed from the app: 52dp primary, radius 14 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:14px;background:var(--green);color:var(--on-green);font-weight:600;font-size:16px;text-decoration:none;border:0;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn.secondary{background:var(--card);color:var(--ink)}
.btn.outline{background:transparent;color:var(--green);border:1.5px solid var(--green);min-height:44px;border-radius:12px;font-size:15px}

/* ---- sections ---- */
.hero{padding:24px 0 8px}
.row{display:grid;gap:28px;align-items:center;padding:40px 0}
.row .text{max-width:520px}
.row .text p{margin:0 0 14px}
.row .text p:last-child{margin-bottom:0}
.phone-wrap{display:flex;justify-content:center}
@media (min-width:860px){
  .hero{padding:40px 0 16px}
  .row{grid-template-columns:1fr 1fr;gap:48px;padding:56px 0}
  .row.flip .phone-wrap{order:-1}
  .row .text{justify-self:start}
  .row.flip .text{justify-self:end}
}
.note{font-size:14px;line-height:1.5;color:var(--muted);margin:14px 0 0}

/* app-style list card (Settings rows): label left, value right, hairlines between */
.list{background:var(--card);border-radius:18px;overflow:hidden;margin:0;padding:0;list-style:none}
.list li,.list a.rowlink{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:14px 16px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.list li:first-child,.list a.rowlink:first-child{border-top:0}
.list .l{font-size:16px}
.list .l small{display:block;color:var(--muted);font-size:14px;line-height:1.4;margin-top:2px}
.list .v{color:var(--muted);font-size:15px;white-space:nowrap;flex:none}
.list .v.green{color:var(--green-text);font-weight:600}
.list a.rowlink:hover{background:var(--well)}
.chev{color:var(--muted);margin-left:2px}
section.plain{padding:24px 0}
section.plain h2{margin-bottom:14px}
.disclaimer{font-size:14px;line-height:1.55;color:var(--muted);max-width:62ch;margin:32px 0 0;padding-top:16px;border-top:1px solid var(--line)}

footer{margin-top:48px;padding:24px 0 48px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
footer a{color:var(--muted)}
footer .cols{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
footer .cols>a,footer .cols>span{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
footer .cols>span a{display:inline-flex;align-items:center;min-height:44px;margin-left:4px}

/* ---- prose (privacy, guides) ---- */
.prose{max-width:680px;padding:8px 0 24px}
.prose h1{font-size:clamp(30px,5.5vw,42px);max-width:none}
.prose h2{font-size:24px;margin:40px 0 10px}
.prose h3{font-size:19px;margin:28px 0 8px}
.prose p,.prose li{max-width:none;font-size:17px;line-height:1.6}
.prose li{margin:4px 0}
.prose blockquote{margin:16px 0;padding:12px 16px;background:var(--card);border-radius:14px;color:var(--muted)}
.prose table{border-collapse:separate;border-spacing:0;width:100%;font-size:15px;line-height:1.45;background:var(--card);border-radius:14px;overflow:hidden;margin:16px 0}
.prose th,.prose td{padding:10px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.prose th{color:var(--muted);font-weight:600;border-top:0}
.prose .meta{color:var(--muted);font-size:15px;margin:-8px 0 24px}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.prose code{font-size:.92em;background:var(--card);padding:1px 5px;border-radius:5px}
.prose pre{background:var(--card);border-radius:14px;padding:12px 14px;margin:16px 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.5}
.prose pre code{background:none;padding:0;font-size:inherit}
.prose .tablewrap{overflow-x:auto;margin:16px 0;border-radius:14px;-webkit-overflow-scrolling:touch}
.prose .tablewrap table{margin:0}
/* long tables with 5+ columns: scroll inside the wrapper, first column stays put, an edge shadow shows there is more */
@media (max-width:859px){.prose .tablewrap.scroll table{min-width:880px}}
@media (min-width:860px){.prose .tablewrap.scroll th,.prose .tablewrap.scroll td{padding:10px 8px}}
.prose .tablewrap.scroll th:first-child,.prose .tablewrap.scroll td:first-child{position:sticky;left:0;background:var(--card);z-index:1;box-shadow:1px 0 0 var(--line)}
.prose .tablewrap.scroll{background:linear-gradient(to left,var(--card) 40%,transparent) right/32px 100% no-repeat local,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.22),transparent) right/14px 100% no-repeat scroll,var(--card)}
.prose .tablewrap.scroll table{background:transparent}
.prose .tablewrap.scroll td:not(:first-child),.prose .tablewrap.scroll th:not(:first-child){background:transparent}
/* phones: wide-text tables become one card per row, each cell labeled with its column header */
@media (max-width:599px){
  .prose .tablewrap.reflow{overflow:visible}
  .prose .tablewrap.reflow table,.prose .tablewrap.reflow tbody,.prose .tablewrap.reflow tr,.prose .tablewrap.reflow td{display:block;width:100%}
  .prose .tablewrap.reflow thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .prose .tablewrap.reflow tr{padding:10px 14px;border-top:1px solid var(--line)}
  .prose .tablewrap.reflow tbody tr:first-child{border-top:0}
  .prose .tablewrap.reflow td{border:0;padding:3px 0;overflow-wrap:break-word}
  .prose .tablewrap.reflow td:first-child{font-weight:600;padding-top:2px}
  .prose .tablewrap.reflow td:not(:first-child){display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:12px;align-items:baseline}
  .prose .tablewrap.reflow td:not(:first-child)::before{content:attr(data-label);font-size:14px;font-weight:600;color:var(--muted);line-height:1.4}
  .prose .tablewrap.reflow td:empty{display:none}
  .prose th,.prose td{padding:10px}
  .prose .tablewrap.fit th,.prose .tablewrap.fit td{padding:9px 7px}
  .prose .tablewrap.fit th:first-child,.prose .tablewrap.fit td:first-child{padding-left:12px}
}
.guidecta{background:var(--card);border-radius:18px;padding:18px;margin:36px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.guidecta p{margin:0;max-width:40ch}
.guidecta b{display:block;font-size:17px}
.guidecta span{color:var(--muted);font-size:15px}

/* ---- phone frame ---- */
.phone{font-size:12.5px;width:24em;height:52em;border-radius:3.2em;background:var(--bezel);padding:.55em;box-shadow:0 0 0 1px var(--bezel-edge),0 24px 48px -24px rgba(0,0,0,.45);position:relative;flex:none;font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif}
@media (min-width:400px){.phone{font-size:13.2px}}
@media (min-width:860px){.phone{font-size:13.6px}}
.screen{position:absolute;inset:.55em;border-radius:2.7em;background:var(--ground);overflow:hidden;color:var(--ink);line-height:1.3}
.status{height:2.6em;display:flex;align-items:flex-end;justify-content:space-between;padding:0 1.6em .3em;font-size:.95em;font-weight:600}
.status i{display:inline-block;width:1.5em;height:.7em;border:1px solid currentColor;border-radius:.2em;position:relative;opacity:.85}
.status i::after{content:"";position:absolute;inset:.12em;right:.3em;background:currentColor;border-radius:.08em}
.scr{position:absolute;top:2.6em;left:0;right:0;bottom:4.9em;padding:.8em 1.15em 1em;display:flex;flex-direction:column;gap:.85em;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none;overflow:hidden}
.scr.on{opacity:1;transform:none}
.scr.notabs{bottom:0}
.ttl{display:flex;justify-content:space-between;align-items:center;padding:0 .3em;gap:.6em}
.ttl h3{margin:0;font-size:1.85em;letter-spacing:-.03em;font-weight:700;line-height:1.15}
.ttl h3.t{font-size:1.5em}
.cap{font-size:.92em;color:var(--muted)}
.cap.ink{color:var(--ink)}
.c{background:var(--card);border-radius:1.4em;padding:1.1em 1.2em;display:flex;flex-direction:column;gap:.55em}
.c.tight{padding:.9em 1.2em}
.c.flat{padding:0}
.hrow{display:flex;align-items:baseline;gap:.8em;flex-wrap:wrap}
.money{font-size:2.9em;font-weight:700;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.rate{font-size:1.1em;font-weight:600;color:var(--green)}
.caps{display:flex;gap:1em;flex-wrap:wrap;font-size:.92em}
.bstrong{font-weight:600;font-size:1.08em}
.inrow{display:flex;gap:.6em;align-items:center}
.well{flex:1;min-width:0;min-height:3.4em;border-radius:.9em;background:var(--well);padding:.8em .9em;font-size:1.05em;display:flex;align-items:center;border:1.5px solid transparent;white-space:nowrap;overflow:hidden}
.well .ph{color:var(--muted);text-overflow:ellipsis;overflow:hidden}
.well .t{white-space:nowrap}
.well.typing .ph{display:none}
.caret{display:inline-block;width:1.5px;height:1.1em;background:var(--green);vertical-align:-.2em;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.send{width:3.4em;height:3.4em;flex:none;border-radius:.9em;background:var(--green);color:var(--on-green);display:grid;place-items:center;font-size:1em;font-weight:700;transition:transform .15s}
.send span{font-size:1.6em;line-height:1}
.press{transform:scale(.9)}
.fields{display:flex;gap:.6em}
.f{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3em}
.f .cap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f .well{min-height:3.2em;padding:.6em .7em;font-size:1em}
.f.flag .well{border-color:var(--warn)}
.f .well.ph{color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.btnrow{display:flex;justify-content:space-between;align-items:center;gap:.6em}
.obtn{min-height:2.9em;padding:0 1.1em;border:1.5px solid var(--green);border-radius:.9em;color:var(--green);font-weight:600;display:inline-flex;align-items:center;font-size:1em}
.pbtn{min-height:3.6em;border-radius:1em;background:var(--green);color:var(--on-green);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:1.05em;transition:transform .15s,opacity .15s}
.pbtn.sec{background:var(--card);color:var(--ink)}
.rh{display:flex;justify-content:space-between;align-items:center;padding:.6em 1.2em .3em;font-size:.9em}
.rh .lab{font-weight:600;letter-spacing:.04em;color:var(--muted)}
.rh .link{color:var(--green);font-weight:600;font-size:1.05em}
.r{display:flex;justify-content:space-between;align-items:center;padding:.85em 1.2em;border-top:1px solid var(--line);font-size:1.05em;min-height:3.4em}
.r b{font-weight:600;font-variant-numeric:tabular-nums}
.r.new{max-height:0;padding-top:0;padding-bottom:0;min-height:0;border-top-width:0;opacity:0;overflow:hidden;transition:all .4s ease}
.r.new.in{max-height:4em;padding:.85em 1.2em;min-height:3.4em;border-top-width:1px;opacity:1}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:.6em;padding-top:.7em;border-top:1px solid var(--line)}
.tot .cap{flex:1}
.tot .v{font-size:1.75em;font-weight:700;font-variant-numeric:tabular-nums}
.tot2{display:flex;justify-content:space-between;align-items:baseline}
.tot2 .v{font-size:1.2em;font-weight:600;color:var(--green-text);font-variant-numeric:tabular-nums}
.quote{font-size:1.05em;line-height:1.55}
.hl{font-weight:600;background:var(--soft);color:var(--green-text);border-radius:.2em;padding:0 .1em}
.hl.w{background:var(--warn-soft);color:var(--warn)}
.fade{transition:opacity .35s}
.dim{opacity:0}
.actions{display:flex;gap:.7em;margin-top:auto}
.actions .pbtn{flex:1}
.actions .pbtn.main{flex:1.6}
.scr.notabs.on ~ .tabs{opacity:0}
/* bottom tabs */
.tabs{transition:opacity .25s;position:absolute;left:0;right:0;bottom:0;height:4.9em;background:var(--card);border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:flex-start;padding-top:.55em}
.tab{display:flex;flex-direction:column;align-items:center;gap:.15em;font-size:.88em;font-weight:600;color:var(--muted);width:25%}
.tab svg{width:1.6em;height:1.6em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tab .pill{width:4.2em;height:2.2em;border-radius:1.1em;display:grid;place-items:center}
.tab.on{color:var(--green)}
.tab.on .pill{background:var(--soft)}
/* switch (rules) */
.sw{width:3.2em;height:1.9em;border-radius:1em;background:var(--green);position:relative;flex:none}
.sw.off{background:var(--line)}
.sw.off::after{right:auto;left:.2em}
.sw::after{content:"";position:absolute;top:.2em;right:.2em;width:1.5em;height:1.5em;border-radius:50%;background:#fff}
/* segmented (stats) */
.seg{display:flex;gap:2px;padding:3px;border-radius:.8em;background:var(--card);font-size:.92em}
.seg span{padding:.45em .9em;border-radius:.6em;color:var(--muted);font-weight:600}
.seg span.on{background:var(--well);color:var(--ink)}
.c.navc{flex-direction:row;justify-content:space-between;align-items:center;padding:.15em .6em;border-radius:1em;font-weight:600;font-size:1.05em}
.navc i{font-style:normal;color:var(--muted);padding:.4em .7em;font-size:1.3em}
.tiles{display:flex;gap:.6em}
.tile{flex:1;min-width:0;overflow:hidden;background:var(--card);border-radius:1.05em;padding:.75em .7em;display:flex;flex-direction:column;gap:.15em}
.tile .cap{font-size:.85em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile b{font-size:1.25em;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tile b.g{color:var(--green)}
.bars{display:flex;align-items:flex-end;gap:3px;height:4.6em}
.bars i{flex:1;background:var(--bar);border-radius:2px 2px 0 0;height:var(--h);transform:scaleY(0);transform-origin:bottom;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bars i.g{background:var(--green)}
.bars i.stub{height:3%;background:var(--line);transform:none}
.bars.go i{transform:scaleY(1)}
.axis{display:flex;justify-content:space-between;font-size:.88em;color:var(--muted)}
.wd{display:flex;align-items:center;gap:.7em;font-size:.92em}
.wd span:first-child{width:2.7em;color:var(--muted)}
.wd .track{flex:1;height:.9em;border-radius:.45em;background:var(--well);overflow:hidden}
.wd .track i{display:block;height:100%;background:var(--bar);width:var(--w);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.wd.top span{color:var(--ink);font-weight:600}
.wd.top .track i{background:var(--green)}
.wd .val{width:4.2em;text-align:right;font-variant-numeric:tabular-nums}
.wd.top .val{color:var(--green);font-weight:600}
.go .wd .track i{transform:scaleX(1)}
.bars i,.wd .track i{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .scr,.r.new,.bars i,.wd .track i,.fade,.send,.pbtn{transition:none!important}
  .caret{animation:none}
}
.sources{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.sources h2{font-size:20px;margin:0 0 6px}
.sources ol{padding-left:22px;margin:12px 0 0;display:grid;gap:8px;font-size:15px}
.sources li{overflow-wrap:anywhere}

/* ---- breadcrumbs, short answer, related guides, hub groups ---- */
.crumbs{font-size:14px;color:var(--muted);padding:0;margin:0 0 6px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:center;min-width:0}
.crumbs li{display:flex;align-items:center;flex:none;white-space:nowrap}
.crumbs li:last-child{flex:0 1 auto;min-width:0;overflow:hidden}
.crumbs li:last-child span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs li+li::before{content:"›";padding:0 8px;color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}
.prose .answer{font-size:18px;line-height:1.55;background:var(--card);border-left:4px solid var(--green);border-radius:0 14px 14px 0;padding:14px 16px;margin:0 0 16px}
.prose .meta a{color:var(--muted)}
.prose .meta time{white-space:nowrap}
.related{margin-top:36px}
.related h2{font-size:20px;margin:0 0 12px}
.related .list .l,.hub .list .l{font-size:16px;line-height:1.35}
.hub .group{margin-top:28px}
.hub .group h2{font-size:20px;margin:0 0 10px}

/* ---- blog (/blog, /es/blog): same frame as guides, plus a kicker and dated rows ---- */
.prose .kicker{color:var(--green);font-size:14px;font-weight:600;letter-spacing:.02em;margin:0 0 6px}
.prose.post .tablewrap{-webkit-overflow-scrolling:touch;border-radius:14px}
.prose.post .tablewrap:not(.reflow) table{min-width:560px}
@media (min-width:600px){.prose.post .tablewrap.reflow table{min-width:560px}}
.list .l small time{white-space:nowrap}
.prose.post h1,.prose.post h2,.prose.post h3,.prose.post p,.prose.post li{overflow-wrap:break-word}

/* ---- feedback form (/feedback, /es/comentarios) ---- */
.fb-page{max-width:640px}
.fb-form{display:grid;gap:22px;margin:8px 0 0}
.fb-form[hidden],.fb-done[hidden],.fb-status[hidden]{display:none}
.fb-choices{border:0;margin:0;padding:0;display:grid;gap:10px}
.fb-choices legend{font-weight:600;font-size:17px;padding:0;margin:0 0 10px}
@media (min-width:640px){.fb-choices{grid-template-columns:repeat(3,1fr)}}
.fb-choice{position:relative;display:block;cursor:pointer}
.fb-choice input{position:absolute;opacity:0;width:1px;height:1px}
.fb-choice-box{display:flex;flex-direction:column;gap:4px;min-height:64px;height:100%;padding:14px 16px;background:var(--card);border:2px solid var(--line);border-radius:16px;transition:border-color .15s,background .15s}
.fb-choice-box b{font-size:17px;line-height:1.3}
.fb-choice-box small{font-size:14px;line-height:1.4;color:var(--muted)}
.fb-choice:hover .fb-choice-box{border-color:var(--bar)}
.fb-choice input:checked+.fb-choice-box{border-color:var(--green);background:var(--soft)}
.fb-choice input:checked+.fb-choice-box b{color:var(--green-text)}
.fb-choice input:focus-visible+.fb-choice-box{outline:2px solid var(--green);outline-offset:3px}
.fb-field label{display:block;font-weight:600;font-size:17px}
.prose .fb-hint{font-size:14px;line-height:1.45;color:var(--muted);margin:2px 0 8px}
.fb-field textarea,.fb-field input{display:block;width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;min-height:52px}
.fb-field textarea{resize:vertical;min-height:150px;line-height:1.5}
.fb-field textarea:focus,.fb-field input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--soft)}
.fb-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.fb-send{justify-self:start;min-width:160px}
.fb-send:disabled{opacity:.6;cursor:default}
.prose .fb-status{margin:0;padding:12px 14px;border-radius:14px;font-size:16px;background:var(--card)}
.prose .fb-status.err{background:var(--warn-soft);color:var(--warn)}
.fb-done{background:var(--card);border-radius:18px;padding:20px;margin:8px 0 0;border-left:4px solid var(--green)}
.fb-done:focus{outline:none}
.prose .fb-done p{margin:0 0 14px}
.prose .fb-done .fb-done-title{font-size:20px;font-weight:700}
.prose .fb-alt{font-size:15px;color:var(--muted);margin:22px 0 0}
.fb-privacy{margin-top:32px;padding-top:16px;border-top:1px solid var(--line)}
.prose .fb-privacy h2{font-size:18px;margin:0 0 6px}
.prose .fb-privacy p{font-size:15px;line-height:1.55;color:var(--muted)}

/* early-access signup (#early-access) */
.ea{flex-direction:column;align-items:stretch}
.ea p{max-width:none}
.ea-form{display:flex;flex-direction:column;gap:12px}
.ea-form[hidden],.ea-done[hidden],.ea-status[hidden]{display:none}
.ea-row{display:flex;flex-wrap:wrap;gap:12px}
.ea-field{flex:1 1 220px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.ea-field input,.ea-field select{font:inherit;font-size:17px;color:var(--ink);background:var(--well);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;min-height:52px;width:100%}
.ea-field input:focus,.ea-field select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--soft)}
.ea .btn{align-self:flex-start}
.ea-status{margin:0;padding:10px 14px;border-radius:12px;background:var(--warn-soft);color:var(--warn);font-size:15px}
.ea-note{margin:0;font-size:13px;color:var(--muted)}
.ea-done{margin:0;font-size:17px;font-weight:600;color:var(--green-text)}

/* ---- tip-out calculator (/tools/tip-out-calculator, /es/herramientas/calculadora-tip-out) ---- */
.prose.tool{max-width:none}
.prose.tool>h1,.prose.tool>.answer,.prose.tool>.meta,.tool-text{max-width:680px}
.calc-tool{display:grid;gap:20px;margin:8px 0 8px}
@media (min-width:900px){.calc-tool{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}.calc-results{position:sticky;top:16px}}
.calc{display:grid;gap:14px;min-width:0}
.calc-group{border:0;margin:0;padding:16px;background:var(--card);border-radius:18px;min-width:0}
.calc-group>legend{float:left;width:100%;padding:0;margin:0 0 10px;font-weight:700;font-size:17px}
.calc-group>legend+*{clear:both}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc-grid.three{grid-template-columns:1fr 1fr;align-items:end}
.calc-grid.three .calc-f:first-child{grid-column:1/-1}
@media (min-width:520px){.calc-grid.three{grid-template-columns:1fr 1fr 1fr}.calc-grid.three .calc-f:first-child{grid-column:auto}}
.calc-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.calc-f label{font-size:15px;font-weight:600;line-height:1.3}
.calc-opt{font-weight:400;color:var(--muted)}
.prose .calc-hint{font-size:14px;line-height:1.45;color:var(--muted);margin:8px 0 0}
.calc-f .calc-hint{margin:0}
.calc-in{display:flex;align-items:center;background:var(--well);border:1.5px solid var(--line);border-radius:12px;min-height:48px;padding:0 12px;gap:4px}
.calc-in:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--soft)}
.calc-in span{color:var(--muted);font-size:17px}
.calc-in input,.calc-in select{flex:1;min-width:0;width:100%;border:0;background:transparent;font:inherit;font-size:17px;color:var(--ink);padding:10px 0;outline:none;font-variant-numeric:tabular-nums}
.calc-in select{appearance:auto;padding-right:0;cursor:pointer}
.calc-in select option{color:#1C1C1E;background:#fff}
.calc-rule{border:0;border-top:1px solid var(--line);margin:12px 0 0;padding:12px 0 0;display:grid;grid-template-columns:5.5em 1fr;gap:10px 12px;min-width:0}
.calc-rule[hidden]{display:none}
.calc-rule legend{float:left;padding:0;font-size:14px;color:var(--muted);font-weight:600;grid-column:1/-1}
.calc-rule .calc-who{grid-column:1/-1}
@media (min-width:520px){.calc-rule{grid-template-columns:minmax(0,1fr) 5.5em minmax(0,1.5fr)}.calc-rule .calc-who{grid-column:auto}}
.calc-add{margin-top:14px}
.calc-add[hidden]{display:none}
.calc-results{min-width:0}
.prose .calc-results h2{font-size:20px;margin:0 0 10px}
#calc-out{display:grid;gap:12px}
#calc-out .list li{min-height:48px;padding:11px 16px}
#calc-out .list .l{font-size:15px;line-height:1.35}
#calc-out .list .l small{font-size:13px}
#calc-out .list .v{color:var(--ink);font-size:16px}
#calc-out .calc-strong .l,#calc-out .calc-strong .v{font-size:17px}
.calc-real{background:var(--soft);border-radius:18px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px}
.calc-real span{font-weight:600;color:var(--green-text)}
.calc-real b{font-size:30px;letter-spacing:-.02em;color:var(--green-text);grid-row:span 2}
.calc-real small{font-size:13px;color:var(--muted)}
.prose .calc-empty{margin:0;padding:16px;background:var(--card);border-radius:18px;color:var(--muted);font-size:16px}
.prose .calc-notes{margin:0;padding:12px 16px 12px 32px;background:var(--warn-soft);color:var(--warn);border-radius:14px}
.prose .calc-notes li{font-size:15px;line-height:1.45;margin:2px 0}
.calc-state{background:var(--card);border-radius:18px;padding:14px 16px}
.prose .calc-state p{font-size:15px;line-height:1.5;margin:8px 0 0}
.prose .calc-state .calc-state-h{margin:0 0 8px}
.calc-state .calc-mini{background:var(--well);border-radius:12px}
.calc-state .calc-mini li{min-height:40px!important;padding:8px 12px!important}
.calc-state .calc-mini li+li{border-top-color:var(--card)}
.prose .calc-state .calc-flag{color:var(--warn);background:var(--warn-soft);border-radius:10px;padding:8px 12px}
.calc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.calc-actions .btn{min-height:48px}
.calc-actions .btn.outline{min-height:48px}
.prose .calc-status{margin:10px 0 0;font-size:14px;color:var(--green-text);overflow-wrap:anywhere}
.prose .calc-nojs{background:var(--warn-soft);color:var(--warn);border-radius:14px;padding:12px 16px}
.tool-text{margin-top:8px}
/* ---- real hourly calculator: period switch, estimate block ---- */
.calc-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--well);border-radius:12px;padding:4px}
.calc-seg label{position:relative;display:block}
.calc-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.calc-seg span{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:9px;font-size:16px;font-weight:600;color:var(--muted);text-align:center;padding:0 8px}
.calc-seg input:checked+span{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.calc-seg input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
.calc-grid.one{grid-template-columns:1fr;margin-top:12px}
.calc-grid.bottom{align-items:end}
.calc-st{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.calc-f[hidden]{display:none}
.calc-est .list{margin-top:6px}
.prose .calc-est-h{margin:4px 0 0;font-weight:700;font-size:16px}
.prose .calc-est .small,.prose .calc-tax{font-size:14px;line-height:1.5;color:var(--muted)}
.prose .calc-est .small{margin:6px 0 0}
.prose .calc-tax{margin:0;padding:0 4px}
/* ---- calculators: trust line, example row, "More options", phone summary bar ---- */
.calc-trust{list-style:none;margin:-6px 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.prose .calc-trust li{margin:0;font-size:14px;line-height:1.3;color:var(--green-text);background:var(--soft);border-radius:999px;padding:6px 11px}
.prose .calc-trust a{color:inherit;position:relative}
/* invisible 44px hit area around the small Sources pill */
.prose .calc-trust a::after{content:"";position:absolute;left:-11px;right:-11px;top:50%;height:44px;transform:translateY(-50%)}
.calc{grid-template-columns:minmax(0,1fr)}
.calc>*{min-width:0}
.calc-intro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:4px 2px 0}
.prose .calc-intro p{margin:0;font-size:16px;color:var(--muted)}
.calc-intro .btn{min-height:48px;padding:0 18px}
.calc-more{padding:0}
.calc-more summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 16px;font-weight:700;font-size:16px;cursor:pointer;list-style:none;border-radius:18px}
.calc-more summary::-webkit-details-marker{display:none}
.calc-more summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.calc-more[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.calc-more summary:focus-visible{outline-offset:-2px}
.calc-more-in{padding:0 16px 16px}
.calc-sum{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;height:56px;padding:0 16px;border-radius:14px;background:var(--green);color:var(--on-green);text-decoration:none;font-size:15px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.calc-sum-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc-sum-t b{font-size:16px}
.calc-sum-go{flex:none;font-weight:600;font-size:14px;opacity:.9}
@media (max-width:379px){.calc-sum-go{display:none}}
@media (min-width:900px){.calc-sum{display:none}}
@media (prefers-reduced-motion:reduce){.calc-more summary::after{transition:none}}
.calc-in input::placeholder{color:var(--muted);opacity:.75;font-weight:400}