/* TrueBudget brand layer over the Wedding reference stylesheets (wedding-base, upgrade, wedding-redesign).
   Layout and sizes come from Wedding; only colours, logo and the passwordless auth card differ.
   Palette (branding/final/README.md): ink #1E2430, evergreen #1F5C4A (buttons, white text on it, the "Budget" part of the
   wordmark), evergreen dark #174637, amber #D9A23A (small accents only), dark amber #A8741A for icons and stars on white
   (3:1 or more), pale green #F1F7F4 / #DCEBE4, cream #FBFAF5. */
:root{--ink:#1E2430;--muted:#545B68;--teal:#1F5C4A;--paper:#F1F7F4;--rule:#B7D0C5;--blush:#DCEBE4;--cream:#FBFAF5;--coral:#A8741A;--orange:#D9A23A;--action:#1F5C4A;--action-dark:#174637;scrollbar-color:var(--teal) var(--paper)}
button,.button{background:var(--action)}button:hover,.button:hover{background:var(--action-dark);color:#fff}
.secondary,.button.secondary{background:transparent;color:var(--ink)}.secondary:hover,.button.secondary:hover{background:var(--paper);color:var(--ink)}
.gallery-arrow,.gallery-arrow:hover,.dialog-close,.dialog-close:hover,.set-tabs>button,.set-enlarge,.set-enlarge:hover,.thumbs button,.app-thumbnails button{color:var(--ink)}
.gallery-arrow{background:#fff}.gallery-arrow:hover{background:var(--paper)}.dialog-close,.set-enlarge,.set-enlarge:hover,.app-thumbnails button{background:transparent}.thumbs button{background:#fff}.set-tabs>button{background:#fff}.set-tabs>button:hover{background:var(--paper)}.set-tabs>button[aria-pressed=true]{background:var(--blush)}
.set-dialog-actions .secondary{background:#fff;border:1px solid var(--rule)}
a:hover{color:var(--teal)}
.benefits svg,.planning-benefits svg,#reviews .review-stars,#reviews .verified-user svg,.success-symbol{color:var(--coral)}
.attributes{color:var(--teal)}
.brand img{width:auto;height:24px;max-width:none}
@media(max-width:800px){.brand img{width:auto;height:22px}}
.success-actions .secondary{background:var(--blush);color:var(--ink)}
.app-success .button.secondary:hover,.app-success .button.secondary:focus-visible{background:var(--action-dark);color:#fff;border-color:var(--action-dark)}

/* Passwordless auth card, sized like the Clerk card on the Wedding reference. */
#auth{width:100%;display:flex;justify-content:center}
.auth-card{width:360px;max-width:100%;border-radius:12px;background:#fff;box-shadow:0 5px 15px #00000014,0 15px 35px -5px #00000033,0 0 0 1px #00000012;overflow:hidden;color:var(--ink)}
.auth-card-main{padding:24px;display:flex;flex-direction:column}
.auth-title{font:700 22px/1.25 Arial,Helvetica,sans-serif;letter-spacing:-.02em;margin:0;text-align:center;color:var(--ink)}
.auth-subtitle{font-size:14px;line-height:1.5;margin:8px auto 20px;text-align:center;color:var(--muted)}
.auth-card .auth-social{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;padding:10px 14px;border-radius:6px;background:#fff;color:var(--ink);font-size:14px;font-weight:500;box-shadow:0 0 0 1px #00000012,0 2px 3px -1px #00000014,0 1px 0 #00000005}
.auth-card .auth-social:hover{background:var(--paper);color:var(--ink)}
.auth-divider{display:flex;align-items:center;gap:16px;margin:20px 0 4px;color:var(--muted);font-size:13px}.auth-divider:before,.auth-divider:after{content:'';flex:1;height:1px;background:#00000012}
.auth-card label{font-size:13px;margin:16px 0 6px}
.auth-card input{min-height:44px;padding:10px 12px;border-radius:7px;font-size:16px}
.auth-card .auth-primary{width:100%;min-height:44px;margin-top:16px;padding:10px 14px;border-radius:6px;font-size:14px;font-weight:500}
.auth-message{font-size:13px;margin:12px 0 0;text-align:center}.auth-message:empty{display:none}
.auth-footer{padding:16px 20px;text-align:center;font-size:13px;color:var(--muted);background:#00000008;border-top:1px solid #0000000d}.auth-footer a{color:var(--action);font-weight:600;text-decoration:none}
@media(max-width:500px){.auth-card{width:100%}.auth-card-main{padding:20px}}
/* "Start Your Paycheck Budget Today" is longer than the Wedding line and must stay on one line, so it scales with the viewport. */
@media(max-width:800px){.hero .offer h1,.guide-checkout h1{font-size:min(clamp(30px,8vw,38px),7.4vw)}}
.form-page .auth-card .auth-title{font:700 22px/1.25 Arial,Helvetica,sans-serif;letter-spacing:-.02em;margin:0;text-align:center}
/* Keep the checkout title on one line on desktop, as on Wedding; the TrueBudget wording is longer. */
@media(min-width:801px){.guide-checkout h1{font-size:32px;white-space:nowrap}}
/* The TrueBudget CTA is a few characters longer than Wedding's; tighten padding on phones so it stays on one line. */
@media(max-width:800px){.hero .offer .button{padding-inline:12px;letter-spacing:-.01em}}
.brand .brand-accent{color:var(--teal)}

/* The full headline also runs on phones, so it wraps instead of staying on one line. */
@media(max-width:800px){.hero .offer h1{text-wrap:balance;white-space:normal;font-size:clamp(27px,7.4vw,34px);line-height:1.12}}

/* The sign-in button uses the brand button colour (Nik, 02.10.2026). */
.auth-card .auth-primary{background:var(--action);color:#fff}.auth-card .auth-primary:hover{background:var(--action-dark);color:#fff}