/* Competitor-surface study 2026-10-24.
   Original CSS/branding; follows observed layout and interaction hierarchy
   without transferring any competitor-owned assets or code. */
.ss-home{width:min(1280px,calc(100% - 38px));max-width:1280px}
.ss-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:54px;align-items:center;padding:76px 30px 86px}
.ss-copy,.ss-dashboard,.ss-hero>div{min-width:0;max-width:100%}
.ss-copy h1,.ss-hero h1{font-size:clamp(38px,4.1vw,59px)!important;line-height:1.09!important;max-width:100%!important;letter-spacing:-.058em!important;overflow-wrap:normal;word-break:normal}
.ss-copy>p:not(.ss-overline){font-size:17px!important;line-height:1.6!important;margin-top:18px!important}
.ss-dashboard{transform:none;width:100%;min-width:0}
.ss-dash-main{min-width:0}.ss-dash-rows>div{grid-template-columns:minmax(0,1fr) 86px 84px;gap:7px;min-width:0}
.ss-dash-rows span,.ss-dash-rows strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-hero-points{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:20px 0 7px}
.ss-hero-points span{font-size:12px;line-height:1.35;font-weight:700;padding:9px 11px;color:var(--ss-accent);background:var(--ss-soft);border-radius:9px}
.ss-ribbon{border-radius:0;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 38px;flex-wrap:wrap;font-family:Inter,system-ui,sans-serif;font-size:15px}
.ss-ribbon strong{font-size:22px;letter-spacing:-.035em}.ss-ribbon span{font-size:13px;line-height:1.4}.ss-ribbon a{text-decoration:none;font-weight:800;color:white!important;background:#193f2e;border-radius:8px;padding:10px 14px;font-size:13px}
.ss-ribbon-quote{background:linear-gradient(100deg,#d4efb4,#a7de98);color:#1c422d}
.ss-ribbon-expense{background:#014f37;color:white;padding:14px 26px}
.ss-ribbon-expense strong{font-size:14px}.ss-ribbon-expense span{font-size:12px;color:#d4f7e0}
.ss-estimates .ss-hero{grid-template-columns:1fr;gap:34px;text-align:center;justify-items:center;padding:74px 34px 88px;background:radial-gradient(circle at 85% 12%,#e4f7df 0,transparent 45%),radial-gradient(circle at 6% 77%,#f0f7f0 0,transparent 30%),#fbfefb}
.ss-estimates .ss-copy{width:min(920px,100%)}.ss-estimates .ss-copy h1{font-size:clamp(38px,5.1vw,67px)!important;max-width:900px!important;margin:15px auto 20px!important}
.ss-estimates .ss-copy>p:not(.ss-overline){max-width:680px;margin-left:auto!important;margin-right:auto!important;color:#546b5e!important}
.ss-estimates .ss-hero-points,.ss-estimates .ss-actions{justify-content:center}
.ss-estimates .ss-dashboard{width:min(840px,100%);border:1px solid #dce8de;box-shadow:0 24px 70px #294f3030}
.ss-estimates .ss-dashboard .ss-dash-main{padding:27px 32px}
.ss-estimates .ss-dashboard .ss-dash-total{margin:22px 0}
.ss-estimates .ss-dash-rows>div{grid-template-columns:minmax(0,1fr) 116px 140px;padding:18px 10px;text-align:left}
.ss-estimates .ss-dashboard .ss-dash-rows strong{text-align:right}
.ss-estimates .ss-copy>small{display:block}
.ss-invoices .ss-hero{background:#f8fbff;border-radius:22px;margin-top:21px;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);padding:70px 46px;gap:48px}
.ss-invoices .ss-hero h1{font-size:clamp(41px,4.15vw,60px)!important;color:#101d36!important}
.ss-invoices .ss-hero-points span{background:#e9f2ff;color:#1d5bbb}
.ss-paper-dashboard{box-shadow:0 25px 70px #254a8821;padding:35px;border-radius:8px;min-height:520px;border:1px solid #d5e1f1;transform:rotate(1deg)}
.ss-paper-top{display:flex;justify-content:space-between;align-items:start;border-bottom:3px solid #3266d0;padding-bottom:26px;gap:16px}
.ss-paper-top span{font-size:10px;color:#74819a;letter-spacing:.12em;font-weight:700}.ss-paper-top h2{font-size:39px!important;letter-spacing:-.05em!important;margin:8px 0 0!important;color:#152f60!important}
.ss-paper-top strong{font-size:13px;color:#47628c}.ss-paper-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:24px 0 30px}
.ss-paper-meta div{display:grid;gap:5px}.ss-paper-meta small{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#94a0af}
.ss-paper-meta b{font-size:14px}.ss-paper-meta span{font-size:12px;color:#6e7c8e}
.ss-paper-lines{width:100%;border-top:1px solid #dfe6ef;border-bottom:1px solid #dfe6ef}.ss-paper-lines>div{display:grid;grid-template-columns:minmax(0,2fr) 45px 95px;gap:8px;align-items:center;padding:12px 0;color:#293d5c;font-size:12px}
.ss-paper-lines>div:first-child{font-size:10px;color:#8e9aab;background:#f5f8fb;padding:9px 5px;letter-spacing:.1em}
.ss-paper-lines>div span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-paper-lines>div strong,.ss-paper-lines>div span:last-child{text-align:right}.ss-paper-sum{display:flex;justify-content:space-between;align-items:center;padding:30px 0;gap:10px}
.ss-paper-sum span{font-size:13px;color:#5b7189}.ss-paper-sum strong{font-size:25px;letter-spacing:-.03em;color:#1f4d9e}
.ss-paper-bottom{display:flex;justify-content:space-between;border-top:1px solid #e4ebf5;padding-top:20px;gap:8px;color:#8190a3;font-size:11px}
.ss-expenses .ss-hero{background:radial-gradient(circle at 70% 90%,#11543e 0,transparent 50%),#002f23;border-radius:18px;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:40px;padding:65px 53px;margin-top:18px;color:white}
.ss-expenses .ss-hero h1{color:#fff!important;font-size:clamp(40px,4.25vw,60px)!important;font-weight:750!important}
.ss-expenses .ss-copy>p:not(.ss-overline){color:#d6ede2!important}
.ss-expenses .ss-overline{color:#3edc9e!important}
.ss-expenses .ss-copy>small{color:#b3d4c7}
.ss-expenses .ss-hero-points span{background:#124d3a;color:#e4fff3}
.ss-expenses .ss-actions>a:not(.ss-btn){color:#b7f0d5!important}
.ss-expenses .ss-btn{background:#00c98b!important;color:#003c2a!important;border:0!important}
.ss-expenses .ss-dashboard{border-radius:14px;box-shadow:0 15px 55px #00180f50;background:#fff;overflow:hidden}
.ss-expenses .ss-dash-top{background:#f6faf7;color:#0e5036;border-bottom:1px solid #dde8df}
.ss-expenses .ss-dash-main{padding:25px}.ss-expenses .ss-dash-main h2{font-size:28px!important}
.ss-expenses .ss-dash-total{background:#ecf9f2;border-color:#d4f0df}
.ss-expenses .ss-dash-rows>div{grid-template-columns:minmax(0,1fr) 88px 80px}
.ss-expenses .ss-dash-rows em{background:#f1f7f3;color:#21764c}
.ss-expenses .ss-features{background:#f4faf6;padding:65px 40px;border-radius:18px;margin-top:24px}
.ss-expenses .ss-feature-grid article{background:#e9f5ed}
@media(max-width:1020px){.ss-invoices .ss-hero,.ss-expenses .ss-hero{padding:50px 30px;gap:24px}.ss-paper-dashboard{padding:24px;min-height:0}.ss-copy h1,.ss-hero h1{font-size:clamp(37px,4.5vw,52px)!important}}
@media(max-width:800px){.ss-hero,.ss-invoices .ss-hero,.ss-expenses .ss-hero{grid-template-columns:1fr;gap:32px}.ss-copy h1,.ss-estimates .ss-copy h1,.ss-invoices .ss-hero h1,.ss-expenses .ss-hero h1{font-size:clamp(37px,7vw,56px)!important}.ss-invoices .ss-dashboard,.ss-expenses .ss-dashboard{max-width:600px;margin:0 auto}.ss-estimates .ss-hero{padding:46px 23px 60px}.ss-expenses .ss-features{padding:37px 18px}}
@media(max-width:560px){.ss-home{width:calc(100% - 18px)}.ss-ribbon{padding:14px 16px;gap:9px}.ss-ribbon strong{font-size:15px}.ss-ribbon span{font-size:11px}.ss-ribbon a{font-size:11px;padding:7px 11px}.ss-hero,.ss-invoices .ss-hero,.ss-expenses .ss-hero,.ss-estimates .ss-hero{padding:36px 18px 44px;margin-top:0;border-radius:0}
.ss-hero-points{gap:7px}.ss-hero-points span{font-size:11px;padding:7px 9px}.ss-hero h1,.ss-copy h1,.ss-estimates .ss-copy h1,.ss-invoices .ss-hero h1,.ss-expenses .ss-hero h1{font-size:clamp(34px,9vw,43px)!important;overflow-wrap:break-word}.ss-copy>p:not(.ss-overline){font-size:15px!important}.ss-dashboard{min-width:0;transform:none}.ss-estimates .ss-dash-rows>div{grid-template-columns:minmax(0,1fr) 74px 74px;padding:13px 4px}.ss-estimates .ss-dashboard .ss-dash-main{padding:15px}.ss-invoices .ss-paper-dashboard{padding:15px;transform:none}.ss-paper-top h2{font-size:28px!important}.ss-paper-meta{gap:10px}.ss-paper-lines>div{grid-template-columns:minmax(0,1fr) 29px 70px;font-size:10px}.ss-paper-sum strong{font-size:20px}.ss-expenses .ss-dash-main{padding:14px}.ss-dash-rows>div,.ss-expenses .ss-dash-rows>div{grid-template-columns:minmax(0,1fr) 74px 70px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.ss-dashboard{transform:none!important;transition:none!important}}


/* Actual desktop screenshot QA: nested white expense dashboard inherited white text from the dark green hero. */
.ss-expenses .ss-dashboard,.ss-expenses .ss-dashboard *{color:#163d2e}
.ss-expenses .ss-dash-top,.ss-expenses .ss-dash-top *{color:#17573b}
.ss-expenses .ss-dash-total strong{color:#133f2e!important}
.ss-expenses .ss-dash-rows em{color:#196642!important}
.ss-expenses .ss-dash-main>p{color:#247c52!important}