@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root{--blue:#315aa6;--orange:#ff7900;--green:#79c900;--ink:#17355c;--paper:#f7fbf3;--muted:#61748a;--line:#dce8d6;--card:#fff}*{box-sizing:border-box}body{margin:0;background:linear-gradient(165deg,#f9fcf7 0%,#f3f8ef 70%,#eef5ed 100%);color:var(--ink);font-family:"DM Sans",sans-serif} .app-shell{max-width:670px;margin:auto;padding:30px 20px 16px}.hero{padding:3px 8px 29px}.brand{display:flex;align-items:center;gap:8px;margin-bottom:29px}.brand-mark{position:relative;width:42px;height:38px;background:var(--blue);border-radius:0 19px 3px 3px;color:#fff;font-weight:700;font-size:31px;line-height:42px;text-align:center}.brand-mark i,.brand-mark b,.brand-mark em{position:absolute;background:var(--green);border-radius:100% 0 100% 0;display:block;transform:rotate(-8deg)}.brand-mark i{width:15px;height:22px;left:16px;top:-19px}.brand-mark b{width:14px;height:20px;left:31px;top:-22px;transform:rotate(37deg)}.brand-mark em{width:10px;height:14px;left:35px;top:-5px;transform:rotate(68deg)}.brand strong{display:block;letter-spacing:1.2px;font-size:17px;color:var(--orange)}.brand strong span{color:var(--orange)}.brand small{display:block;color:var(--blue);font-size:8px;font-weight:700;letter-spacing:.35px}.eyebrow{text-transform:uppercase;letter-spacing:1.7px;font-size:10px;color:var(--green);font-weight:700;margin:0 0 8px}.hero h1{font-family:"Playfair Display",serif;font-size:36px;line-height:1.1;margin:0 0 13px;letter-spacing:-.8px}.hero h1 span{color:var(--orange)}.intro{color:var(--muted);font-size:15px;line-height:1.55;margin:0;max-width:440px}.card{background:var(--card);border:1px solid rgba(220,232,214,.9);box-shadow:0 10px 30px rgba(26,70,55,.06);border-radius:21px;padding:23px;margin-bottom:16px}.section-heading{display:flex;justify-content:space-between;align-items:flex-start}.section-heading h2{font-family:"Playfair Display",serif;font-size:25px;margin:0}.privacy{font-size:10px;color:var(--muted);background:#f2f8ee;border-radius:99px;padding:7px 9px}.unit-switch{background:#eff5eb;border-radius:10px;padding:3px;display:flex;margin:21px 0 17px}.unit-switch button{border:0;background:transparent;color:var(--muted);font:600 13px "DM Sans";padding:10px;flex:1;border-radius:8px;cursor:pointer}.unit-switch button.active{background:#fff;color:var(--blue);box-shadow:0 2px 7px rgba(37,83,125,.1)}.inputs{display:grid;grid-template-columns:1fr 1fr;gap:13px}.inputs label{font-size:12px;font-weight:700;color:#45607e}.inputs label span{float:right;color:#8b9aae;font-weight:500}.inputs input{display:block;border:1px solid #dce8d6;border-radius:10px;width:100%;margin-top:7px;padding:13px;font:500 17px "DM Sans";color:var(--ink);outline:none;background:#fbfdf9}.inputs input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(121,201,0,.13)}.inputs .full{grid-column:1/-1}.hidden{display:none!important}.primary{background:linear-gradient(90deg,var(--blue),#3c6fba);border:0;border-radius:11px;color:#fff;font:700 15px "DM Sans";width:100%;padding:16px;margin-top:21px;cursor:pointer;box-shadow:0 7px 14px rgba(49,90,166,.2)}.primary span{float:right;font-size:19px;line-height:14px}.result{border-top:4px solid var(--green);padding-top:20px}.score{display:flex;gap:13px;align-items:center;margin:3px 0 20px}.score>span{font:700 51px/1 "Playfair Display";color:var(--blue);letter-spacing:-2px}.score strong,.score small{display:block}.score strong{font-size:16px;color:var(--orange)}.score small{color:var(--muted);font-size:12px;margin-top:4px}.scale{position:relative;margin:4px 0 29px;padding-top:12px}.scale-colors{height:9px;display:grid;grid-template-columns:18.5fr 6.4fr 5fr 10.1fr;overflow:hidden;border-radius:99px}.scale-colors i:nth-child(1){background:#78c9d7}.scale-colors i:nth-child(2){background:var(--green)}.scale-colors i:nth-child(3){background:#facb3e}.scale-colors i:nth-child(4){background:#f28b55}.scale-marker{position:absolute;top:0;left:50%;width:15px;height:15px;border:3px solid white;background:var(--blue);border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.25);transform:translateX(-50%);z-index:1}.scale-labels{display:grid;grid-template-columns:18.5fr 6.4fr 5fr 10.1fr;font-size:8px;color:#6c7a8c;margin-top:7px}.scale-labels span:nth-child(n+2){text-align:center}.weight-range{border-left:3px solid var(--orange);padding:3px 0 3px 11px;margin-bottom:13px}.weight-range span,.weight-range strong{display:block}.weight-range span{font-size:11px;color:var(--muted)}.weight-range strong{font-size:17px;margin-top:3px}.result-copy{font-size:14px;line-height:1.5;color:#49617b;margin:0 0 17px}.guidance{background:#f5f9f1;padding:15px;border-radius:12px}.guidance h3{font-size:13px;margin:0 0 5px}.guidance p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}.text-button{border:0;padding:0;margin-top:11px;background:transparent;color:var(--blue);font:700 12px "DM Sans";cursor:pointer}.note{display:flex;gap:10px;padding:4px 5px 8px;color:#718096;font-size:11px;line-height:1.5}.note span{width:16px;height:16px;border:1px solid #9aacb6;border-radius:50%;text-align:center;font-size:11px;font-weight:bold;flex:0 0 auto} .note p{margin:0}footer{text-align:center;color:#8491a0;font-size:10px;padding:12px 16px 28px}@media(min-width:700px){.app-shell{padding-top:42px}.hero h1{font-size:42px}}