:root{--navy:#10384b;--paper:#f4f7f6;--ink:#173b49;--muted:#536d77;--teal:#087f83;--gold:#a27642;--blue:#517fa4;--line:#d7e4e3}
body{background:radial-gradient(ellipse at 95% 0%,#dceeea 0,transparent 32%),radial-gradient(ellipse at 0% 18%,#e5eff6 0,transparent 26%),var(--paper)}
header{border-bottom-color:#cadcdb}.pill{background:#ffffffa6;color:#397476;border-color:#c4dddd}.brand{color:#124b5b}h1{font-size:clamp(44px,5.3vw,67px);letter-spacing:-2.8px;line-height:1.1}h1 em{font-style:normal;color:#0b7d81}.hero{gap:48px;padding-top:54px}.primary{background:linear-gradient(120deg,#0c8384,#126579);box-shadow:0 5px 15px #106a741c}.primary:hover{background:linear-gradient(120deg,#076e70,#0b5264)}
.outlook{background:linear-gradient(135deg,#103b53 0%,#096b74 85%);padding:34px 34px 62px;min-height:360px;box-shadow:0 18px 40px #14536b1e}.outlook-label{font-size:10px!important;letter-spacing:1.5px;font-weight:700;color:#b2dfde!important}.outlook-route{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:25px 0}.outlook-route span{border:1px solid #ffffff2a;padding:6px 11px;border-radius:30px;font-size:12px;background:#ffffff0a}.outlook-route i{font-size:16px;font-style:normal;color:#e4bf88}.outlook h2{font-size:29px;max-width:none;letter-spacing:-.8px}.outlook>p:not(.outlook-label){font-size:16px;line-height:1.65}.hero-link{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:16px;font-weight:600;color:white;text-decoration:none;border-top:1px solid #ffffff30;margin-top:24px;padding-top:16px;position:relative;z-index:1}.hero-link:hover{text-decoration:underline}.outlook-waves{position:absolute;bottom:-142px;left:-30px;width:120%;height:170px;border-radius:50%;border:1px solid #b6e1dc45;box-shadow:0 -16px 0 #6aafa91a,0 -32px 0 #b6e1dc0c;transform:rotate(-8deg);pointer-events:none}
.roles{border-top:0;padding-top:6px}.role-grid{gap:16px}.role-grid article{padding:22px 20px 4px;border:1px solid #d4e8e3;border-top:3px solid #3eaaa1;border-radius:14px;background:linear-gradient(160deg,#edf7f3,#ffffff)}.role-grid article:nth-child(2){border-color:#e2dfcf;border-top-color:#baa272;background:linear-gradient(160deg,#f6f3e9,#fff)}.role-grid article:nth-child(3){border-color:#d6e2ed;border-top-color:#6f9dbc;background:linear-gradient(160deg,#edf3fa,#fff)}.role-grid h3{font-size:20px}.owner-note{background:#e8f1ed;border-left-color:#5b9c96;margin-top:17px}.nav-instruction{font-size:15px;color:var(--muted);margin:0 0 16px;max-width:820px}.nav-instruction strong{color:var(--ink)}.click-icon{display:inline-flex;align-items:center;justify-content:center;background:#d9ece8;color:#167c79;border-radius:50%;width:32px;height:32px;margin-right:8px;font-size:21px}.tabs{background:transparent;padding:0;gap:12px;margin-bottom:24px}.tabs button{display:flex;align-items:center;text-align:left;gap:12px;padding:19px 16px;background:#fff;border:1px solid #cedfdf;border-bottom:3px solid #b8d6d0;box-shadow:0 3px 9px #1a526708;transition:transform .15s,box-shadow .15s;position:relative}.tabs button:hover{transform:translateY(-3px);box-shadow:0 8px 18px #15516417}.tabs button:nth-child(2){border-bottom-color:#8fb2ce}.tabs button:nth-child(3){border-bottom-color:#c6b58b}.tabs button[aria-selected=true]{background:linear-gradient(120deg,#135b66,#103e54);border-color:#17616b;color:#fff;box-shadow:0 8px 20px #123a4b1b}.tab-number{font-size:12px;font-weight:600;color:#527c83;background:#e8f1f0;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.tabs button[aria-selected=true] .tab-number{background:#ffffff19;color:#b4e3dd}.tab-copy{flex:1}.tab-copy strong{display:block;font-size:16px}.tab-copy small{display:block;font-size:11px;font-weight:400;margin-top:5px;line-height:1.4}.tab-arrow{font-size:19px;font-weight:400}.tabs button[aria-selected=true] .tab-arrow{transform:rotate(45deg);color:#bce3e0}.panel{border-color:#d6e4e3;box-shadow:0 12px 36px #153a5010}.rate-card:first-child{background:linear-gradient(160deg,#f0f9f4,#f9fcfa);border-color:#cbe2d9}.rate-card:nth-child(2){background:linear-gradient(160deg,#eff5fc,#fafbfd);border-color:#d4e0ec}.rate-card:first-child h4{color:#176e5c}.rate-card:nth-child(2) h4{color:#315a83}.rate-card:nth-child(2) .rate-total strong{color:#315a83}.edit-badge{background:#e4f3ed;color:#206b59}.recommendations{background:#f6f8fb;border:1px solid #dfe7ec;padding:24px;border-radius:13px}.controls{background:linear-gradient(150deg,#eff6f7,#f2f7f0);border:1px solid #dce8e1}.customer-total{background:linear-gradient(120deg,#edf5f4,#f2f5fa);padding:18px;border-radius:11px}.compare-box{background:linear-gradient(110deg,#f3f3e9,#eef6f5)}.supplier-adjust{border-top:1px solid #cbdcda;border-bottom:1px solid #cbdcda;padding:13px 0;margin:0 0 22px}.supplier-adjust summary{font-size:14px;font-weight:600;cursor:pointer;min-height:28px}.supplier-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:14px}.supplier-fields label{font-size:12px}.supplier-fields input{padding:10px}.supplier-adjust p{margin:8px 0 0}
.projection{margin-top:38px;padding:30px;border-radius:17px;border:1px solid #c6dddf;background:linear-gradient(135deg,#edf6f4 0%,#f4f7fc 100%);overflow:hidden}.projection-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.projection-heading h3{font-size:27px;letter-spacing:-.8px;margin-bottom:12px}.projection-heading p:not(.eyebrow){font-size:15px;color:var(--muted);max-width:700px;margin-bottom:20px}.projection-heading .eyebrow{font-size:10px;margin-bottom:9px;color:#287777}.projection-badge{white-space:nowrap;background:#d9ece7;color:#216d60;font-size:10px;font-weight:700;padding:7px 10px;border-radius:20px;letter-spacing:.3px}.projection-controls{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:20px}.projection-condition{grid-column:1/-1;max-width:420px}.projection-condition select{margin-bottom:0}.projection-condition .small{margin:8px 0 0}.volume-buttons{display:flex;gap:8px}.volume-buttons button{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;background:#fff;border:1px solid #c8dbd9;color:#4c6973;border-radius:10px;padding:10px 7px;min-height:73px}.volume-buttons button strong{font-size:23px;line-height:1.1}.volume-buttons button span{font-size:11px;margin-top:3px}.volume-buttons button[aria-pressed=true]{background:#196977;border-color:#196977;color:white;box-shadow:0 4px 12px #19697722}.volume-buttons button:hover{border-color:#167c84}.projection-controls .small{font-size:12px;margin-top:10px;margin-bottom:0}.mix-labels{display:flex;justify-content:space-between;gap:12px}.mix-labels>span:last-child{text-align:right}.mix-labels strong{display:block;font-size:22px;color:#207465;line-height:1.3}.mix-labels>span:last-child strong{color:#426e9e}.mix-labels small{display:block;font-size:12px;color:var(--muted)}.mix-control input{margin:6px 0 0;accent-color:#337c8b}.projection-results{display:grid;grid-template-columns:1fr 1.15fr;gap:16px}.projection-results>div{padding:24px;border-radius:12px;border:1px solid #cadfdd;background:#fff}.projection-results>div>span{font-size:10px;font-weight:700;letter-spacing:1px;display:block;color:#53777a}.projection-results strong{display:block;font-family:Manrope,Arial,sans-serif;font-size:clamp(25px,3.3vw,40px);font-weight:800;letter-spacing:-1.6px;line-height:1.25;margin:13px 0 8px;white-space:nowrap}.projection-results small{display:block;font-size:12px;color:var(--muted)}.projection-results .projection-year{background:linear-gradient(120deg,#14576c,#177771);border-color:transparent;color:white;box-shadow:0 8px 22px #16586e1b}.projection-year>span{color:#c6e9e5!important}.projection-year small{color:#cce6e6}.projection-formula{font-size:13px;color:#4e6c75;margin:16px 0;line-height:1.6}.projection-range{border-top:1px solid #d1e0e0;padding-top:14px}.projection-range summary{font-size:14px;font-weight:600;color:#24677a;cursor:pointer;min-height:32px}.projection-range table{font-size:15px;margin-bottom:5px}.projection-range th{background:transparent;font-size:10px}.projection-range td{font-size:16px}.selected-volume{background:#e2eeeb}.projection-disclaimer{font-size:12px;color:#5a747a;line-height:1.6;margin:16px 0 0}.next-scenario{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px}.next-scenario p{font-size:13px;color:var(--muted);margin:0}.next-scenario button{min-height:49px;padding:13px 19px;border-radius:9px;background:#e5eff4;border:1px solid #c7dce3;color:#1c5a70;font-size:15px;font-weight:700}.next-scenario button span{padding-left:15px}.next-scenario button:hover{background:#d6e8ef}.save-strip{padding-top:34px}
@media(max-width:1000px){.tab-copy strong{font-size:14px}.tab-copy small{font-size:10px}.tabs button{gap:8px;padding:17px 11px}.tab-number{width:27px;height:27px}.tab-arrow{display:none}.projection{padding:24px}.projection-results strong{font-size:32px}.hero{gap:30px}.outlook{padding:28px 26px 50px}.outlook-route{gap:5px}.outlook-route span{padding:5px 8px}}
@media(max-width:650px){body{background:radial-gradient(ellipse at 100% 0%,#e0eeeb,transparent 25%),var(--paper)}header{padding:20px 18px}.hero{padding-top:36px;gap:25px}.hero h1{font-size:44px;letter-spacing:-1.8px}.hero h1 em{display:inline}.outlook{min-height:0;padding:26px 24px 45px}.outlook h2{font-size:28px}.outlook-route{gap:8px;margin:20px 0}.outlook-route span{font-size:12px;padding:6px 10px}.role-grid{gap:12px}.role-grid article{padding:19px 18px 1px}.role-grid p{font-size:16px}.roles{padding-top:0}.nav-instruction{font-size:14px;line-height:1.7}.tabs{gap:9px}.tabs button{gap:13px;padding:16px;min-height:83px}.tab-copy strong{font-size:17px}.tab-copy small{font-size:12px}.tab-number{width:34px;height:34px}.tab-arrow{display:block}.recommendations{padding:20px 16px}.customer-total{padding:14px}.customer-total strong{font-size:29px}.projection{margin-top:27px;padding:21px 16px;border-radius:12px}.projection-heading{display:block}.projection-heading h3{font-size:25px}.projection-badge{display:inline-block;margin:0 0 18px}.projection-controls{grid-template-columns:1fr;gap:19px}.projection-condition{max-width:none}.projection-results{grid-template-columns:1fr;gap:12px}.projection-results>div{padding:20px}.projection-results strong{font-size:38px;letter-spacing:-1.2px}.projection-results>div>span{font-size:10px}.projection-range td{font-size:13px;padding:12px 6px}.projection-range th{font-size:9px;padding:12px 6px}.next-scenario{flex-direction:column;align-items:stretch;gap:9px}.next-scenario button{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center}.projection-condition label{font-size:15px}}
@media(prefers-reduced-motion:reduce){.tabs button:hover{transform:none}.tabs button{transition:none}}
.minimum-hint{padding:12px 14px;border-left:3px solid #7ca99e;background:#e3efea;border-radius:0 7px 7px 0;font-size:13px;line-height:1.6;color:#365f61}.karla-result{margin-top:22px;padding:25px;border:1px solid #a9cfc1;border-radius:14px;background:linear-gradient(120deg,#e2f3e9,#ecf6f4)}.karla-result>span{display:block;font-size:11px;font-weight:700;letter-spacing:1px;color:#2c7568}.karla-result>strong{display:block;font-family:Manrope,Arial,sans-serif;font-size:43px;letter-spacing:-1.6px;line-height:1.3;margin:10px 0;color:#146d5e}.karla-result p{font-size:15px;margin:9px 0;color:#325f5d}.karla-result small{font-size:12px;color:#51756c;display:block;margin-top:14px}.minimum-card{background:#fff;border:1px solid #d6e4e4;border-radius:10px;padding:18px}.minimum-card h4{font-size:17px;margin-bottom:16px}.minimum-card>div{display:grid;grid-template-columns:1fr auto;gap:4px;padding:12px 0;border-top:1px solid #e0e9e7}.minimum-card span{font-size:14px}.minimum-card strong{font-size:22px;color:#147c76}.minimum-card small{grid-column:1/-1;font-size:11px;color:var(--muted)}.annual-sale-inputs{padding:20px;border-radius:12px;background:#ffffffa8;border:1px solid #cde1df;margin-bottom:25px}.annual-sale-inputs>p{font-size:14px;color:#526f75}.annual-sale-inputs>div{display:grid;grid-template-columns:1fr 1fr;gap:18px}.annual-sale-inputs label{font-size:14px}.projection-owner-note{font-size:15px;font-weight:600;color:#285f65;border-top:1px solid #c9dedd;padding-top:18px;margin-top:18px}.projection-results{grid-template-columns:.85fr 1.35fr;align-items:stretch}.projection-results .projection-year{padding:28px;background:linear-gradient(120deg,#104a64,#0d7b69);box-shadow:0 10px 27px #146a7028;border:1px solid #76b8a766}.projection-year strong{font-size:clamp(31px,3.9vw,48px);line-height:1.3;color:#f3fff9;transform-origin:left center}.projection-year>span{font-size:11px!important;letter-spacing:1.1px}.projection-year small{font-size:13px}.annual-positive{animation:annualGlow 3.2s ease-in-out infinite}@keyframes annualGlow{0%,100%{text-shadow:0 0 0 #bbf3b800;transform:scale(1)}50%{text-shadow:0 0 22px #bbf3b84d;transform:scale(1.025)}}.volume-buttons{gap:6px}.volume-buttons button{padding:10px 5px}.volume-buttons button span{font-size:10px}.volume-buttons button strong{font-size:22px}
@media(max-width:850px){.projection-results{grid-template-columns:1fr}.projection-year strong{font-size:42px}}
@media(max-width:650px){.annual-sale-inputs>div{grid-template-columns:1fr;gap:12px}.annual-sale-inputs{padding:17px}.karla-result{padding:21px}.karla-result>strong{font-size:39px}.projection-results .projection-year{padding:24px 19px}.projection-year strong{font-size:clamp(28px,9vw,42px);letter-spacing:-1.3px}.volume-buttons button{min-height:67px}.volume-buttons button strong{font-size:22px}.volume-buttons button span{font-size:9px}.projection-owner-note{font-size:14px}}
@media(prefers-reduced-motion:reduce){.annual-positive{animation:none}}