:root{--ink:#16251f;--muted:#53615b;--line:#dfe7e2;--canvas:#f5f7f4;--paper:#fff;--green:#176b52;--green-dark:#0b4a38;--green-soft:#e7f4ef;--lime:#d8eea8;--blue:#dfeef9;--orange:#faead6;--shadow:0 18px 50px #1a392d17;--font-sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--text-meta:13px;--text-body:17px;--text-lead:20px;--text-card:26px;--text-section:34px;--text-display:46px}*{box-sizing:border-box}html{background:var(--canvas);color:var(--ink);scroll-behavior:smooth;font-family:var(--font-sans);font-size:var(--text-body)}body{margin:0}button,a{font:inherit}input,select,textarea{font-family:inherit;font-size:var(--text-body)}small{font-size:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #f0b84c}.app-shell{min-height:100vh}.sidebar{border-right:1px solid var(--line);background:#fbfcfa;flex-direction:column;width:260px;padding:24px 20px;display:flex;position:fixed;inset:0 auto 0 0}.brand{color:var(--ink);align-items:center;gap:12px;text-decoration:none;display:flex}.brand-mark{background:var(--green);color:#fff;border-radius:16px;justify-content:center;align-items:center;width:46px;height:46px;font-size:34px;display:inline-flex}.brand strong,.brand small{display:block}.brand strong{font-size:20px}.brand small{color:var(--muted);margin-top:2px;font-size:13px}.nav-list{gap:8px;margin-top:48px;display:grid}.nav-item{color:#4e5d56;border-radius:16px;align-items:center;gap:12px;padding:12px;font-size:17px;font-weight:600;text-decoration:none;display:flex}.nav-item span{text-align:center;width:23px;font-size:26px}.nav-item:hover,.nav-item.current{background:var(--green-soft);color:var(--green-dark)}.help-card{background:var(--green-soft);border-radius:16px;flex-direction:column;gap:8px;margin-top:auto;padding:16px;display:flex}.help-card strong{font-size:17px}.help-card>span:not(.eyebrow){color:var(--muted);font-size:17px}.help-card button,.help-card>a{color:var(--green-dark);text-align:left;text-underline-offset:3px;background:0 0;border:0;padding:4px 0 0;font-size:17px;font-weight:700;text-decoration:underline}.main-content{max-width:1540px;min-height:100vh;margin-left:260px;padding:32px 48px 64px}.topbar{justify-content:space-between;align-items:center;display:flex}.eyebrow{color:var(--green);font-size:13px;font-weight:700}.eyebrow.light{color:#bfe8d9}.topbar h1{margin:4px 0;font-size:clamp(34px,3vw,46px);font-weight:600}.topbar p{color:var(--muted);margin:0;font-size:17px}.profile{align-items:center;gap:12px;display:flex}.profile-copy{text-align:right}.profile-copy strong,.profile-copy small{display:block}.profile-copy strong{font-size:17px}.profile-copy small{color:var(--muted);margin-top:4px;font-size:13px}.avatar{background:var(--lime);color:var(--green-dark);border-radius:50%;justify-content:center;align-items:center;width:43px;height:43px;font-size:17px;font-weight:700;display:flex}.demo-banner{color:#66521c;background:#fff7df;border:1px solid #f1d990;border-radius:16px;align-items:center;gap:8px;margin-top:24px;padding:8px 12px;font-size:17px;display:flex}.dashboard-grid,.secondary-grid{grid-template-columns:minmax(0,1.28fr) minmax(340px,.72fr);gap:20px;margin-top:20px;display:grid}.payment-card,.change-card,.timeline-card,.meter-card{box-shadow:var(--shadow);border-radius:16px}.payment-card{background:radial-gradient(circle at 100% 0%, #52a88459, transparent 38%), linear-gradient(135deg, var(--green-dark), var(--green));color:#fff;min-height:395px;padding:24px;position:relative;overflow:hidden}.payment-card:after{content:"";border:1px solid #ffffff1f;border-radius:50%;width:260px;height:260px;position:absolute;top:112px;right:-135px}.payment-card-heading,.section-heading{justify-content:space-between;align-items:flex-start;display:flex}.amount{letter-spacing:-.035em;margin-top:8px;font-size:46px;line-height:1.1}.status-pill{background:#ffffff24;border:1px solid #fff3;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700}.due-date{align-items:center;gap:8px;margin-top:16px;font-size:17px;display:flex}.due-date>span:first-child{background:#ffffff1f;border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.due-date strong{margin-top:2px;font-size:17px;display:block}.obligation-grid{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:24px;display:grid}.obligation{background:#ffffff17;border:1px solid #ffffff1c;border-radius:16px;flex-direction:column;min-height:70px;padding:12px;display:flex}.obligation span{color:#c9ded6;font-size:13px}.obligation strong{margin-top:auto;font-size:17px}.primary-action{background:var(--lime);color:var(--green-dark);z-index:1;border:0;border-radius:16px;justify-content:space-between;align-items:center;width:100%;margin-top:20px;padding:16px;font-size:17px;font-weight:700;display:flex;position:relative}.card-note{color:#bad6cc;max-width:85%;margin:12px 4px 0;font-size:13px;line-height:1.45}.change-card,.timeline-card,.meter-card{background:var(--paper);padding:24px}.section-heading h2,.meter-card h2{margin:4px 0 0;font-size:26px;font-weight:600}.delta{background:var(--orange);color:#9b5b10;border-radius:999px;padding:8px;font-size:13px;font-weight:700}.change-card>p,.meter-card>p{color:var(--muted);margin:16px 0 20px;font-size:17px;line-height:1.55}.change-list{border-bottom:1px solid var(--line);border-top:1px solid var(--line)}.change-list>div{grid-template-columns:37px 1fr auto;align-items:center;gap:12px;padding:12px 0;display:grid}.change-list>div+div{border-top:1px solid var(--line)}.change-icon{border-radius:8px;justify-content:center;align-items:center;width:37px;height:37px;font-size:20px;display:flex}.change-icon.water{background:var(--blue);color:#28739f}.change-icon.common{background:var(--green-soft);color:var(--green)}.change-list strong,.change-list small{display:block}.change-list strong{font-size:17px}.change-list small{color:var(--muted);margin-top:4px;font-size:13px}.change-list b{color:#a75828;font-size:17px}.change-list b.saving{color:var(--green)}.secondary-action,.text-action{color:var(--green);background:0 0;border:0;font-size:17px;font-weight:700}.secondary-action{border:1px solid var(--line);border-radius:8px;width:100%;margin-top:16px;padding:12px}.secondary-grid{grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr)}.text-action{padding:4px}.timeline{margin:24px 0 0;padding:0 0 0 8px;list-style:none;display:grid}.timeline li{border-left:1px solid var(--line);grid-template-columns:75px 1fr;gap:4px;padding:0 0 20px 24px;display:grid;position:relative}.timeline li:last-child{border-color:#0000;padding-bottom:0}.timeline-dot{box-shadow:0 0 0 1px var(--line);background:#b5c2bc;border:4px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;top:1px;left:-7px}.timeline li.accent .timeline-dot{background:var(--green)}.timeline time{color:var(--muted);grid-row:span 2;padding-top:2px;font-size:13px}.timeline strong{font-size:17px}.timeline p{color:var(--muted);margin:0;font-size:17px}.meter-card{box-shadow:none;background:linear-gradient(150deg,#eff7e1,#e5f2ed)}.meter-illustration{background:var(--paper);color:var(--green-dark);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;width:75px;height:75px;margin-bottom:24px;display:flex;box-shadow:0 9px 25px #164e3b1a}.meter-illustration span{font-size:34px}.meter-illustration small{font-size:13px;font-weight:700}.mobile-nav{display:none}@media (max-width:1080px){.dashboard-grid,.secondary-grid{grid-template-columns:1fr}.change-card{min-height:0}}@media (max-width:760px){.sidebar{display:none}.main-content{margin:0;padding:24px 16px 102px}.profile-copy{display:none}.demo-banner{align-items:flex-start;line-height:1.45}.dashboard-grid,.secondary-grid{margin-top:16px}.payment-card,.change-card,.timeline-card,.meter-card{border-radius:16px;padding:20px}.payment-card-heading{display:block}.status-pill{margin-top:16px;display:inline-block}.obligation-grid{grid-template-columns:repeat(2,1fr)}.card-note{max-width:100%}.timeline li{grid-template-columns:62px 1fr;padding-left:16px}.mobile-nav{border-top:1px solid var(--line);padding:8px 8px max(8px, env(safe-area-inset-bottom));z-index:10;background:#fffffff5;grid-template-columns:repeat(5,1fr);align-items:center;display:grid;position:fixed;bottom:0;left:0;right:0}.mobile-nav a{color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:44px;font-size:13px;text-decoration:none;display:flex}.mobile-nav a span{font-size:26px}.mobile-nav a.current{color:var(--green);font-weight:700}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}