/* Public, private pay-calendar utility. Matches Ocean design without importing
 * account CSS or third-party assets. Accessible on narrow phone widths. */
:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--bg:#0e1721;--panel:#182b3e;--panel2:#1c364b;--edge:#37556e;--ink:#eff8ff;--soft:#b9cedd;--blue:#8ec8f3;--blue2:#c4e4fb;--danger:#ffc0b9}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;min-width:0;color:var(--ink);background:radial-gradient(ellipse 78% 420px at 50% 0,#183b5b 0,transparent 100%),var(--bg);line-height:1.55}
a{color:inherit;text-underline-offset:3px}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #b9e3ff;outline-offset:3px}
[hidden]{display:none!important}
.payday-site-header{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1240px;margin:auto;padding:20px clamp(16px,4vw,40px)}
.payday-brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);font-size:clamp(16px,2.3vw,20px);font-weight:780;text-decoration:none;min-width:0}
.payday-brand img{width:46px;height:46px;object-fit:contain}
.payday-site-link{color:var(--blue2);font-weight:740;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:8px 0}
.payday-site-link:hover,.payday-footer a:hover{text-decoration:underline}
.payday-container{max-width:1090px;margin:auto;padding:0 clamp(16px,4vw,40px) 68px}
.payday-intro{text-align:center;padding:clamp(28px,5vw,58px) 0 32px}
.payday-eyebrow{margin:0 0 10px;color:var(--blue);font-size:11px;letter-spacing:.14em;font-weight:800}
.payday-intro h1{margin:0 auto 16px;max-width:880px;font-size:clamp(31px,5.8vw,64px);line-height:1.1;letter-spacing:-.05em;font-weight:840;text-wrap:balance}
.payday-intro h1 span{display:block;color:var(--blue2);font-size:clamp(25px,4.1vw,43px);margin-top:9px}
.payday-intro>p:last-child{color:var(--soft);font-size:clamp(15px,1.7vw,18px);max-width:700px;margin:0 auto}
.payday-tool,.payday-results,.payday-explain,.payday-cta{border:1px solid var(--edge);border-radius:20px;padding:clamp(18px,3.8vw,32px);background:var(--panel);min-width:0}
.payday-tool{box-shadow:0 16px 60px #050f194a}
.payday-tool-intro h2,.payday-results-header h2,.payday-explain h2,.payday-cta h2{margin:0;letter-spacing:-.025em;font-size:clamp(22px,3vw,31px);line-height:1.2}
.payday-tool-intro p{color:var(--soft);margin:7px 0 22px;max-width:690px}
.payday-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.payday-fields label{display:grid;gap:8px;align-content:start;min-width:0;font-size:13px;font-weight:700}
.payday-fields label small{color:var(--soft);font-weight:500}
.payday-fields input{display:block;width:100%;min-width:0;height:48px;padding:10px 12px;border-radius:11px;border:1px solid #65849c;background:#101e2d;color:var(--ink);font-size:16px;line-height:1.35}
.payday-fields input:focus{outline:3px solid #8ec8f378;outline-offset:1px;border-color:var(--blue)}
.payday-fields input::-webkit-calendar-picker-indicator{filter:invert(.85);cursor:pointer}
.payday-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin-top:21px}
.payday-primary,.payday-example{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:47px;border-radius:12px;padding:11px 17px;font-size:14px;font-weight:780;text-align:center;text-decoration:none}
.payday-primary{border:1px solid var(--blue);color:#122637;background:var(--blue)}
.payday-primary:hover{background:#b2ddfb;color:#081d30}
.payday-example{background:transparent;border:1px solid var(--edge);color:var(--ink)}
.payday-example:hover{border-color:var(--blue)}
.payday-privacy,.payday-sample-note{font-size:12px;color:var(--soft);margin:15px 0 0}
.payday-privacy span{color:var(--blue);font-size:10px;margin-right:5px}
.payday-error{border-left:3px solid var(--danger);color:#ffe9e7;background:#402b34;padding:10px 12px;border-radius:9px;margin:14px 0}
.payday-results{margin-top:24px;scroll-margin-top:24px;background:#15293b}
.payday-results-header{display:flex;justify-content:space-between;align-items:end;gap:15px;flex-wrap:wrap}
.payday-results-header>p{color:var(--soft);max-width:260px;font-size:12px;margin:0}
.payday-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:22px 0}
.payday-fact{display:grid;gap:6px;border:1px solid var(--edge);background:#1b344a;border-radius:14px;padding:16px;min-width:0}
.payday-fact-label{font-weight:650;font-size:12px;color:var(--soft)}
.payday-fact-value{font-size:clamp(23px,3.5vw,35px);letter-spacing:-.045em;line-height:1.12;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.payday-fact-note{font-size:11px;color:var(--soft)}
.payday-interpretation{padding:17px 18px;background:#24394c;border-left:3px solid var(--blue);border-radius:12px;margin-bottom:22px}
.payday-interpretation strong{font-size:14px}
.payday-interpretation p{font-size:13px;color:var(--soft);margin:7px 0 0}
.payday-results h3{font-size:17px;margin:10px 0 14px}
.payday-months{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.payday-month{border:1px solid var(--edge);border-radius:12px;padding:14px;background:#192e41;min-width:0}
.payday-month.is-extra{border:1px solid #9acbed;background:linear-gradient(160deg,#214560,#192e41)}
.payday-month-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px}
.payday-month-head strong{font-size:14px}
.payday-count{color:#d3e9f8;font-size:11px}
.payday-month.is-extra .payday-count{border-radius:99px;background:#91c9ef;color:#142b40;padding:3px 8px;font-weight:800}
.payday-dates{font-size:12px;margin:9px 0 0;color:var(--soft)}
.payday-month-total{display:block;color:var(--blue2);font-size:12px;font-weight:700;margin-top:7px}
.payday-note{color:var(--soft);font-size:12px;margin:20px 0 0}
.payday-explain{margin-top:24px;background:transparent}
.payday-explain h2{max-width:750px}
.payday-explain-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:16px}
.payday-explain-columns>div{min-width:0}
.payday-explain h3{font-size:16px;margin:6px 0}
.payday-explain-columns p{font-size:13px;color:var(--soft);margin:0}
.payday-cta{text-align:center;margin-top:24px;background:radial-gradient(ellipse at 50% 0,#254c70,#192b40 74%);padding-block:36px}
.payday-cta h2{margin:0 auto;max-width:750px}
.payday-cta>p:not(.payday-eyebrow){max-width:720px;margin:12px auto;color:var(--soft)}
.payday-cta .payday-primary{margin:16px auto 4px}
.payday-cta>p:last-child{font-size:12px}
.payday-footer{max-width:1090px;padding:0 clamp(16px,4vw,40px) 24px;margin:auto;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--soft)}
@media(max-width:760px){.payday-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.payday-explain-columns{grid-template-columns:1fr;gap:17px}}
@media(max-width:570px){.payday-site-header{padding:13px 16px}.payday-brand img{width:38px;height:38px}.payday-site-link{font-size:11px}.payday-intro{padding:30px 0 24px}.payday-intro h1{font-size:clamp(28px,8vw,39px)}.payday-intro h1 span{font-size:clamp(23px,6.5vw,31px)}.payday-fields,.payday-summary,.payday-months{grid-template-columns:minmax(0,1fr)}.payday-fields{gap:15px}.payday-buttons{display:grid;grid-template-columns:1fr}.payday-primary,.payday-example{width:100%}.payday-results-header{display:block}.payday-results-header>p{margin-top:9px}.payday-footer{display:grid;gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}