@import url("tokens.css");
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
.site-header { max-width:1160px; margin:auto; padding:22px 28px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:9px; font-size:18px; font-weight:900; letter-spacing:-.4px; }
.brand span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--lime); }
.site-header nav { display:flex; align-items:center; gap:18px; color:var(--muted); font-size:12px; font-weight:800; }
.site-header nav a:hover,.site-header nav .active { color:var(--ink); }
.site-header .header-cta { padding:11px 16px; border-radius:12px; background:var(--ink); color:white; }
main { max-width:1160px; margin:auto; padding:0 28px; }
.breadcrumb { display:flex; gap:8px; padding-top:30px; color:var(--muted); font-size:11px; }
.breadcrumb a { text-decoration:underline; text-underline-offset:3px; }
.intro { max-width:850px; padding:68px 0 50px; }
.eyebrow,.step { margin:0 0 13px; color:#6f7d51; font-size:10px; font-weight:900; letter-spacing:1.7px; }
.intro h1 { max-width:820px; margin:0 0 22px; font-size:clamp(46px,7vw,78px); line-height:.98; letter-spacing:-4px; }
.intro>p:not(.eyebrow) { max-width:750px; margin:0; color:var(--muted); font-size:18px; line-height:1.65; }
.intro-trust { display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; color:#69705f; font-size:11px; font-weight:750; }
.calculator-layout { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(350px,.72fr); gap:24px; align-items:start; }
.calculator-form { padding:34px; border:1px solid var(--line); border-radius:28px; background:white; }
.form-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:23px; }
.form-heading h2 { margin:0; font-size:24px; letter-spacing:-.8px; }
.form-heading .step { margin-bottom:5px; font-size:8px; }
.text-button { padding:0; border:0; background:transparent; color:#597d20; font-size:11px; font-weight:850; text-decoration:underline; text-underline-offset:4px; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.field { display:grid; gap:8px; color:#354052; font-size:12px; font-weight:800; }
.field-wide { grid-column:1/-1; }
.field small { color:#8a9382; font-size:9px; font-weight:600; line-height:1.45; }
.input-with-unit { min-height:52px; display:flex; align-items:center; gap:8px; padding:0 15px; border:1px solid var(--line); border-radius:13px; background:#fafbf8; transition:border-color .2s,box-shadow .2s,background .2s; }
.input-with-unit:focus-within { border-color:#88ad4d; background:white; box-shadow:0 0 0 4px rgba(199,243,107,.3); }
.input-with-unit b { color:#7a8472; font-size:12px; }
.input-with-unit input { width:100%; min-width:0; padding:15px 0; border:0; outline:0; background:transparent; color:var(--ink); font-weight:800; }
.input-with-unit input::placeholder { color:#aab1a4; }
.unit-after b { order:2; }
.expense-heading { margin-top:38px; padding-top:29px; border-top:1px solid var(--line); }
.reset-button { margin-top:24px; padding:10px 0 0; border:0; background:transparent; color:var(--muted); font-size:10px; font-weight:800; text-decoration:underline; text-underline-offset:4px; }
.result-card { position:sticky; top:20px; padding:30px; border-radius:28px; background:var(--ink); color:white; box-shadow:0 26px 70px rgba(17,24,39,.23); }
.result-eyebrow { margin:0 0 18px; color:var(--lime); font-size:9px; font-weight:900; letter-spacing:1.4px; }
.profit-result { padding-bottom:24px; border-bottom:1px solid #303846; }
.profit-result>span { color:#aab2bd; font-size:11px; }
.profit-result strong { display:block; margin:5px 0 8px; color:var(--lime); font-size:clamp(46px,5vw,64px); line-height:1; letter-spacing:-3px; }
.result-card.negative .profit-result strong { color:#ff8278; }
.profit-result p { margin:0; color:#b5bdc8; font-size:10px; line-height:1.5; }
.result-list { margin:14px 0 0; }
.result-list div { display:flex; justify-content:space-between; gap:20px; padding:12px 0; }
.result-list dt { color:#aab2bd; font-size:11px; }.result-list dd { margin:0; font-size:12px; font-weight:850; }
.expense-share { margin-top:11px; padding:18px; border-radius:15px; background:#1c2431; }
.expense-share>div { display:flex; justify-content:space-between; gap:20px; color:#b8c0cb; font-size:9px; line-height:1.4; }
.expense-share b { color:white; }
.progress-track { display:block; height:6px; margin-top:12px; overflow:hidden; border-radius:999px; background:#343e4d; }
.progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:var(--lime); transition:width .25s; }
.result-card.negative .progress-track i { background:#ff8278; }
.save-cta { margin-top:18px; padding:19px; border-radius:16px; background:var(--lime); color:var(--ink); }
.save-cta p { margin:0 0 14px; font-size:10px; line-height:1.5; }.save-cta p b { display:block; font-size:12px; }
.save-cta a { display:flex; justify-content:space-between; gap:20px; font-size:10px; font-weight:900; }
.estimate-note { display:block; margin-top:14px; color:#788291; font-size:8px; line-height:1.45; text-align:center; }
.content-section { margin:110px 0 0; padding:60px; display:grid; grid-template-columns:1fr .9fr; gap:80px; align-items:center; border-radius:32px; background:#e9eddf; }
.content-intro h2 { margin:0 0 16px; font-size:clamp(38px,5vw,58px); line-height:1; letter-spacing:-2.5px; }
.content-intro>p:not(.eyebrow) { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.guide-link { display:flex; justify-content:space-between; gap:25px; margin-top:23px; padding:14px 16px; border-radius:12px; background:white; color:var(--ink); font-size:10px; font-weight:900; }
.formula-card { padding:30px; border-radius:24px; background:white; box-shadow:0 18px 45px rgba(17,24,39,.09); }
.formula-card>* { display:block; text-align:center; }.formula-card span { color:var(--muted); font-size:15px; font-weight:800; }.formula-card b { margin:8px 0; color:#82916a; font-size:20px; }.formula-card strong { padding-top:16px; border-top:1px solid var(--line); color:#5f8c1d; font-size:31px; letter-spacing:-1px; }
.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; padding:90px 0; }
.guide-grid article { padding:28px; border:1px solid var(--line); border-radius:22px; background:white; }
.guide-grid article>span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--lime); font-size:9px; font-weight:900; }
.guide-grid h2 { margin:21px 0 10px; font-size:18px; letter-spacing:-.4px; }.guide-grid p { margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.closing-cta { padding:70px; border-radius:34px; background:var(--ink); color:white; text-align:center; }
.closing-cta .eyebrow { color:var(--lime); }.closing-cta h2 { max-width:780px; margin:0 auto 18px; font-size:clamp(38px,5vw,58px); line-height:1.04; letter-spacing:-2.5px; }
.closing-cta>p:not(.eyebrow) { max-width:650px; margin:0 auto; color:#aeb7c3; font-size:13px; line-height:1.7; }
.closing-cta>div { display:flex; justify-content:center; flex-wrap:wrap; gap:11px; margin-top:30px; }
.primary-button,.secondary-button { padding:15px 18px; border-radius:13px; font-size:12px; font-weight:900; }
.primary-button { display:flex; gap:35px; background:var(--lime); color:var(--ink); }.secondary-button { border:1px solid #3c4553; color:#dfe4eb; }
.faq-section { max-width:850px; margin:0 auto; padding:105px 0; }
.faq-section>h2 { margin:0 0 32px; font-size:clamp(36px,4vw,52px); letter-spacing:-2px; }
.faq-section details { border-top:1px solid var(--line); }.faq-section details:last-of-type { border-bottom:1px solid var(--line); }
.faq-section summary { padding:21px 0; font-size:14px; font-weight:850; cursor:pointer; }
.faq-section details p { max-width:700px; margin:0; padding:0 0 22px; color:var(--muted); font-size:12px; line-height:1.7; }
footer { max-width:1104px; margin:0 auto; padding:32px 0; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:15px; } footer nav a { text-decoration:underline; text-underline-offset:3px; }
.noscript { position:fixed; right:15px; bottom:15px; margin:0; padding:13px; border-radius:10px; background:#fff0ef; color:#8c2d26; font-size:12px; }
@media(max-width:850px) {
  .site-header { padding:18px; }.site-header nav>a:not(.header-cta) { display:none; }
  main { padding:0 20px; }.breadcrumb { padding-top:18px; }.intro { padding:52px 0 40px; }.intro h1 { letter-spacing:-2.5px; }
  .calculator-layout { grid-template-columns:1fr; }.result-card { position:static; }
  .content-section { margin-top:75px; padding:36px 24px; grid-template-columns:1fr; gap:35px; }.content-intro h2,.closing-cta h2 { letter-spacing:-1.5px; }
  .guide-grid { grid-template-columns:1fr; padding:60px 0; }.closing-cta { padding:52px 24px; }
  .faq-section { padding:75px 0; } footer { margin:0 20px; flex-direction:column; align-items:flex-start; gap:18px; }
}
@media(max-width:520px) {
  .site-header .header-cta { padding:10px 12px; }.calculator-form,.result-card { padding:23px; border-radius:22px; }
  .field-grid { grid-template-columns:1fr; }.field-wide { grid-column:auto; }
  .form-heading { align-items:start; }.expense-grid { gap:15px; }
  .intro h1 { font-size:45px; }.intro>p:not(.eyebrow) { font-size:16px; }.intro-trust { gap:10px 15px; }
  .closing-cta>div { display:grid; }.primary-button { justify-content:space-between; }.secondary-button { text-align:center; }
}