/* Good For It pages (makenzo.io/good-for-it). Mirrors the app: near-black ground, acid for money
   in and the one action, coral for money out, Anton for big words, Space Grotesk to read,
   JetBrains Mono for amounts, 2px lines and hard offset shadows instead of blur. */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-latin.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/space-grotesk-var.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/jetbrains-mono-700-latin.woff2) format("woff2")}

:root{
  --ink:#0C0C10;--surface:#17171D;--line:#2A2A33;--bone:#F5F4F0;--muted:#A09FA6;--dim:#5E5D66;
  --acid:#C8FF3E;--coral:#FF5C3A;
  --gutter:clamp(16px,5vw,72px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--ink)}
body{font-family:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--bone);-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
a{color:var(--acid);text-underline-offset:4px}
a:hover{color:var(--bone)}
a:focus-visible,button:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
img{display:block;max-width:100%}
.display{font-family:"Anton",Impact,"Arial Narrow Bold",sans-serif;font-weight:400;text-transform:uppercase;line-height:1;padding-top:.08em}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0}
.skip{position:absolute;left:-9999px;top:12px;z-index:10;padding:10px 14px;background:var(--acid);color:var(--ink);font-weight:700;text-decoration:none}
.skip:focus{left:12px}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--gutter);border-bottom:2px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;color:var(--bone);text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.brand svg{flex:none}
.site-nav{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:15px;font-weight:500}
.site-nav a{color:var(--muted);text-decoration:none}
.site-nav a:hover{color:var(--bone)}
@media (max-width:640px){.site-nav .optional{display:none}}

/* Buttons: the app's pill with a hard shadow */
.pill{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:0 26px;border:2px solid var(--ink);border-radius:16px;background:var(--bone);color:var(--ink);font-size:18px;font-weight:700;text-decoration:none;box-shadow:6px 6px 0 var(--ink)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(32px,5vw,72px);padding:clamp(48px,8vw,100px) var(--gutter) clamp(56px,8vw,110px);background:var(--acid);color:var(--ink)}
.hero h1{margin:18px 0 22px;font-size:clamp(84px,11vw,158px);line-height:.92}
.hero p.lede{margin:0 0 30px;max-width:560px;font-size:clamp(18px,1.6vw,22px);line-height:1.45;font-weight:500}
.hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.hero .cta span{font-size:15px;font-weight:500}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}.phone{justify-self:center;width:min(360px,calc(100% - 14px))}}

/* The phone: the real home screen, drawn in HTML */
.phone{margin:0;width:min(360px,100%);border-radius:48px;background:var(--ink);color:var(--bone);border:10px solid var(--ink);box-shadow:14px 14px 0 var(--ink);overflow:hidden}
.phone .top{background:var(--acid);color:var(--ink);padding:40px 18px 16px}
.phone .label{font-size:10px;font-weight:700;letter-spacing:.12em}
.phone .big{font-size:78px;margin:6px 0 6px}
.phone .low{margin:0;font-size:13px;font-weight:500;line-height:1.6}
.phone .low .mono{background:var(--ink);color:var(--coral);padding:1px 6px}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:12px;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--ink)}
.week div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:60px;border-right:2px solid var(--ink);background:var(--ink);color:var(--bone)}
.week div:last-child{border-right:0}
.week .w{font-size:8px;font-weight:700}
.week .n{font-family:"Anton",Impact,sans-serif;font-size:16px;line-height:1}
.week .b{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:8px;color:var(--acid)}
.week .past{background:var(--surface);color:var(--dim)}
.week .past .b{color:var(--dim)}
.week .today{background:var(--acid);color:var(--ink)}
.week .today .b{color:var(--ink)}
.phone .panel{padding:16px 18px 22px}
.phone .panel h3{margin:0 0 4px;font-size:22px}
.row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:2px solid var(--line)}
.row .d{width:62px;flex:none;white-space:nowrap;font-size:10px;font-weight:700;color:var(--muted)}
.row .n{flex:1;font-size:14px;font-weight:700}
.row .a{font-size:13px}
.in{color:var(--acid)}.out{color:var(--coral)}

/* Sections */
section{padding:clamp(64px,9vw,110px) var(--gutter) 0}
section h2{margin:0 0 clamp(28px,4vw,48px);font-size:clamp(48px,6vw,76px)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{border:2px solid var(--line);border-radius:24px;padding:32px;background:var(--surface)}
.card .k{display:block;color:var(--acid);font-size:15px;margin-bottom:14px}
.card h3{margin:0 0 14px;font-size:clamp(30px,2.6vw,36px);line-height:1.05}
.card p{margin:0;font-size:17px;line-height:1.55;color:var(--muted)}
.features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.features div{padding-top:22px;border-top:2px solid var(--bone)}
.features h3{margin:0 0 10px;font-size:19px;font-weight:700}
.features p{margin:0;font-size:16px;line-height:1.55;color:var(--muted)}
@media (max-width:960px){.steps{grid-template-columns:1fr}.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.features{grid-template-columns:1fr}}

.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.price{border:2px solid var(--line);border-radius:24px;padding:40px}
.price .amount{margin:14px 0 16px;font-size:clamp(64px,7vw,88px)}
.price .amount small{font-size:.36em}
.price p{margin:0;font-size:17px;line-height:1.55;color:var(--muted)}
.price.pro{border-color:var(--ink);background:var(--acid);color:var(--ink);box-shadow:10px 10px 0 var(--bone)}
.price.pro p{color:var(--ink);font-weight:500}
@media (max-width:760px){.prices{grid-template-columns:1fr}.price.pro{margin-right:10px}}

.private{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:start;padding:clamp(32px,5vw,56px);border-radius:28px;background:var(--surface)}
.private h2{margin:0;font-size:clamp(44px,5vw,64px)}
.private p{margin:0;font-size:19px;line-height:1.6;color:var(--muted)}
@media (max-width:860px){.private{grid-template-columns:1fr}}

/* Long-form pages (privacy, support) */
.doc{max-width:760px;margin:0 auto;padding:clamp(48px,8vw,96px) var(--gutter) clamp(40px,6vw,72px)}
.doc h1{margin:14px 0 10px;font-size:clamp(56px,8vw,96px)}
.doc .updated{margin:0 0 36px;font-size:14px;color:var(--muted)}
.doc h2{margin:40px 0 12px;font-family:"Space Grotesk",sans-serif;font-size:22px;font-weight:700;text-transform:none;line-height:1.3;padding:0}
.doc p,.doc li{font-size:17px;line-height:1.6;color:var(--muted)}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 16px;padding-left:22px}
.doc li{margin:0 0 8px}
.doc strong{color:var(--bone);font-weight:700}
.doc .eyebrow{color:var(--acid)}

/* Footer */
.site-footer{margin-top:clamp(64px,9vw,110px);padding:30px var(--gutter);border-top:2px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:14px;color:var(--muted)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--bone)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}