@font-face{font-family:DM;src:url('./assets/dm-sans.woff2')}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:#f7f8f4;color:#23483e;font-family:DM,Arial,sans-serif}button,a{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #648852;outline-offset:4px}header{max-width:1080px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:24px}header a{text-decoration:none;font-size:14px}header>span{font-size:28px;font-weight:700}main{max-width:1080px;margin:auto;padding:16px 24px 70px}.intro{margin:18px 0 28px}.intro>p:first-child{font-size:11px;letter-spacing:2px}.intro h1{font-size:38px;font-weight:500;line-height:1.15;letter-spacing:-1px;margin:12px 0 18px}.intro p{font-size:15px}.intro small{color:#738178;font-size:12px}nav{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 40px}nav a{font-size:12px;text-decoration:none;border:1px solid #dee5d9;border-radius:18px;padding:9px 12px}#variations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}.label{display:flex;align-items:center;gap:10px}.label>span{font-size:12px;color:#738178}h2{font-size:19px;font-weight:500;margin:0}.note{font-size:12px;color:#738178;line-height:1.5;min-height:36px;margin:8px 0 16px}.card{background:white;border:1px solid #e2e7df;border-radius:26px;padding:22px;min-height:350px}.identity{font-size:12px;display:flex;align-items:center;gap:9px;color:#697b73}.identity>span{font-size:18px;color:#254e42}.card h3{font-size:23px;line-height:1.2;font-weight:500;letter-spacing:-.4px;margin:22px 0}.choices,.payment-options{display:grid;gap:9px}.choice,.later{width:100%;min-height:65px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #e2e7df;background:#f2f5ed;border-radius:23px;padding:13px 16px;text-align:left}.choice-name,.later{font-size:18px;font-weight:450;letter-spacing:-.2px}.action{margin-right:8px;display:inline-flex;align-items:center;gap:5px;flex-shrink:0;color:#2e634b;font-size:12px;font-weight:500;white-space:nowrap}svg{width:16px;height:16px;flex-shrink:0}.choice:hover,.later:hover{background:#eaf0e3}.note:empty{display:none}.label{margin-bottom:16px}
.result{text-align:center;padding:34px 0}.result-icon{color:#2e634b}.result p{font-size:16px}.result small{display:block;color:#738178;font-size:12px}.result button{display:block;margin:28px auto 0;border:0;background:transparent;padding:10px;font-size:13px}@media(max-width:700px){main{padding:8px 16px 50px}header{padding:20px 16px}.intro h1{font-size:32px}#variations{grid-template-columns:1fr;gap:32px}.card{padding:20px}.note{min-height:0}nav{gap:6px}.card h3{font-size:24px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


@media(max-width:370px){.card{padding:17px}.choice,.later{padding-inline:12px;gap:7px}.choice-name,.later{font-size:13px}.action{font-size:11px;gap:4px}}
@media(max-width:400px){.choice{gap:6px;padding-inline:13px}.action{font-size:11px;margin-right:6px;gap:4px}}

/* Four new interpretations of the retained Soft fill baseline. */
.variation:not(.v1) .choice-name{white-space:nowrap}
.variation:not(.v1) .payment-amount{font-variant-numeric:tabular-nums}
.v2 .choice,.v2 .later{background:#f0f4e9;border-color:#e4e9dc}
.v2 .choice-name,.v2 .later{font-size:18px;letter-spacing:-.55px}
.v2 .payment-label{font-weight:550}
.v2 .payment-amount{color:#758669;font-weight:400;margin-left:3px}
.v2 .action{color:#386149;font-weight:450}
.v3 .choice,.v3 .later{background:#f7f6f0;border-color:#e9e6db;border-radius:21px}
.v3 .choice-name,.v3 .later{font-family:Georgia,'Times New Roman',serif;font-size:19px;letter-spacing:-.6px}
.v3 .payment-amount{font-style:italic;color:#6e7c5d;margin-left:2px}
.v3 .action{color:#3d604c}
.v4 .choice,.v4 .later{background:#fff;border:1px solid #cad8c4;border-radius:18px;box-shadow:inset 0 0 0 3px #f8faf5}
.v4 .choice-name,.v4 .later{letter-spacing:-.45px;font-size:18px}
.v4 .payment-amount{color:#557451;text-decoration:underline;text-decoration-color:#d5e2c8;text-underline-offset:5px;text-decoration-thickness:2px;margin-left:2px}
.v4 .action svg{stroke-width:1.4}
.v5 .choices{background:#f2f5ed;border:1px solid #e2e7df;border-radius:23px;gap:0;overflow:hidden}
.v5 .payment-options{gap:0}
.v5 .choice,.v5 .later{background:transparent;border:0;border-radius:0;position:relative;min-height:65px}
.v5 .choice::after{content:'';position:absolute;left:16px;right:16px;bottom:0;height:1px;background:#dde5d7}
.v5 .choice-name,.v5 .later{font-size:18px;letter-spacing:-.4px}
.v5 .payment-amount{color:#6d8069;margin-left:2px}
.variation:not(.v1) .choice:hover,.variation:not(.v1) .later:hover{background:#eaf0e3}
@media(max-width:400px){.variation:not(.v1) .choice-name,.variation:not(.v1) .later{font-size:17px}.v3 .choice-name,.v3 .later{font-size:18px}.variation:not(.v1) .payment-amount{margin-left:0}.variation:not(.v1) .action{margin-right:3px}.v5 .later{padding-inline:13px}}
