/* 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{
  --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;
}}
*{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;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;min-height:64px;overflow:hidden}
.brand{display:inline-flex;align-items:center;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}
nav.links a{color:var(--muted);text-decoration:none;font-size:15px;padding:6px 7px;border-radius:8px;white-space:nowrap}
@media (max-width:599px){nav.links a.contact{display:none}nav.links a{font-size:14px;padding:6px 5px}.brand{font-size:17px;gap:7px}}
@media (max-width:359px){nav.links a{font-size:14px;padding:6px 5px}}
nav.links a:hover{color:var(--ink);background:var(--card)}
nav.links a[aria-current]{color:var(--ink)}

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;gap:8px 20px}

/* ---- 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 .tablewrap{overflow-x:auto;margin:16px 0}
.prose .tablewrap table{margin:0;min-width:420px}
.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}
}