/* Payday Away pages on dossantossystems.com. Generated by build/payday.js; edit it there. */
@font-face{font-family:Caprasimo;src:url(fonts/caprasimo-latin.woff2?v=b1969861df) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Figtree;src:url(fonts/figtree-latin-var.woff2?v=4ba7d3d096) format('woff2');font-weight:300 900;font-style:normal;font-display:swap}

/* Payday Away's own tokens (the app's Organic look, brief §7) for the content area. The site's
   header and footer keep the company's navy in both schemes. accent is for fills and big
   numerals only; accent-text is the AA colour for links and small accent text. */
:root{color-scheme:light dark;
  --bg:#f5ead8;--surf:#f9f4ed;--well:#ebddc5;--ink:#201e1d;--mute:#645c50;
  --accent:#c67139;--accent-text:#8c491a;--on-accent:#201e1d;--sage:#7a8a5e;--sage-soft:#e1eecc;--peach:#f6a06b;
  --track:#e2d3b9;--deep:#3d472b;--on-deep:#f9f4ed;--on-deep-soft:#e1eecc;
  --err:#a23c1c;--edge:#8a8174;--line:rgba(32,30,29,.12);--frame:#1f1d1a;
  --lift:0 1px 2px rgba(32,30,29,.05),0 14px 34px -18px rgba(32,30,29,.28)}
@media (prefers-color-scheme:dark){:root{
  --bg:#201e1d;--surf:#2e2b25;--well:#2a2723;--ink:#f9f4ed;--mute:#c0b6a5;
  --accent:#f6a06b;--accent-text:#ffc6a5;--on-accent:#201e1d;--sage:#aebf92;--sage-soft:#3d472b;--peach:#f6a06b;
  --track:#433d34;--deep:#3d472b;--on-deep:#f9f4ed;--on-deep-soft:#e1eecc;
  --err:#ffb59a;--edge:#8a8174;--line:rgba(249,244,237,.14);--frame:#0c0b0a;
  --lift:0 0 0 1px rgba(249,244,237,.07)}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#06121C}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 Figtree,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{display:block;max-width:100%}
a{color:var(--accent-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;border-radius:4px}
strong{font-weight:700}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:#62B4E6;color:#06121C;font:700 15px/1 Figtree,system-ui,sans-serif;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* --- the site's chrome, same as the legal pages (build/legal-shell.js) --- */
header.site{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 22px;padding:13px clamp(16px,5vw,84px);background:rgba(8,20,32,.94);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid rgba(142,208,245,.2);color-scheme:dark}
header.site a{text-decoration:none}
header.site .home{display:block;padding:2px 0}
header.site img{height:clamp(19px,2.3vw,26px);width:auto}
header.site nav{display:flex;flex-wrap:wrap;gap:4px clamp(14px,2vw,26px)}
.navlink{display:inline-block;font:400 clamp(11px,.85vw,12.5px)/1 'Courier Prime',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#DCE7EE;padding:10px 0 8px;border-bottom:1px solid transparent}
.navlink:hover,.navlink[aria-current=page]{color:#8ED0F5;border-bottom-color:#8ED0F5}
header.site :focus-visible,footer.site :focus-visible{outline-color:#62B4E6}
footer.site{padding:clamp(40px,6vh,72px) clamp(16px,5vw,84px) clamp(28px,4vh,44px);background:#06121C;border-top:1px solid rgba(142,208,245,.16);color-scheme:dark}
footer.site .row{max-width:1360px;margin:0 auto;display:flex;flex-wrap:wrap;gap:26px clamp(24px,4vw,64px);align-items:flex-start}
footer.site .col{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:2px}
footer.site .lbl{font:400 11.5px/1.2 'Courier Prime',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#7E97A8;margin-bottom:8px}
footer.site a{align-self:flex-start;padding:4px 0;font:400 13.5px/1.6 'Courier Prime',ui-monospace,monospace;letter-spacing:.04em;color:#B8C9D6;text-decoration:none}
footer.site a:hover{color:#8ED0F5}
footer.site .fine{font:400 11.5px/1.7 'Courier Prime',ui-monospace,monospace;letter-spacing:.06em;color:#7E97A8}

/* --- Payday Away content --- */
main{display:block}
main:focus{outline:none}
.wrap{width:100%;max-width:74rem;margin:0 auto;padding-inline:clamp(16px,5vw,84px)}
.narrow{max-width:46rem}
h1,h2{font-family:Caprasimo,Georgia,serif;font-weight:400;letter-spacing:-.005em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.35rem,1.5rem + 3.9vw,4.6rem);line-height:1.04}
h2{font-size:clamp(1.8rem,1.3rem + 2.1vw,2.9rem);line-height:1.08}
h3{font-size:1.1875rem;line-height:1.3;font-weight:700;margin:0}
/* Very narrow (a small phone zoomed in): let a long word break rather than overflow. */
@media (max-width:360px){h1,h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}}
p{margin:0}
.eyebrow{display:block;margin:0 0 .9rem;font-weight:700;font-size:.8125rem;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.lede{font-size:clamp(1.125rem,1rem + .45vw,1.3rem);color:var(--mute)}
section{position:relative}
.band{padding-block:clamp(56px,8vw,112px)}
.band.well{background:var(--well)}
.head{max-width:40rem;margin-bottom:clamp(28px,4vw,48px)}
.card{background:var(--surf);border-radius:clamp(22px,2.2vw,28px);padding:clamp(20px,2.6vw,30px);box-shadow:var(--lift)}
/* Square and full-bleed; rounded here, never bordered (brief §6). */
.app-icon{border-radius:22.4%;aspect-ratio:1;height:auto;box-shadow:0 1px 2px rgba(32,30,29,.12),0 8px 22px -10px rgba(32,30,29,.45)}

/* the progress bar: sage fill on a warm track, fully rounded */
.bar{display:block;height:12px;border-radius:999px;background:var(--track);overflow:hidden}
.bar>span{display:block;width:var(--p,64%);height:100%;border-radius:inherit;background:var(--sage)}
.divider{max-width:40rem}

/* hero */
.hero{overflow:hidden;padding-block:clamp(44px,7vw,100px) clamp(48px,7vw,96px)}
.hero .sun{position:absolute;z-index:0;width:clamp(19rem,44vw,40rem);aspect-ratio:1;border-radius:50%;background:var(--sage-soft);right:max(-12rem,-14vw);top:clamp(-9rem,-8vw,-3rem)}
.hero-grid{position:relative;z-index:1;display:grid;gap:clamp(40px,6vw,72px);align-items:center}
.hero .app-icon{width:clamp(76px,8vw,104px);margin-bottom:clamp(20px,2.4vw,30px)}
.hero .sub{margin-top:clamp(16px,2vw,24px);font-weight:700;font-size:clamp(1.3rem,1.05rem + 1vw,1.75rem);line-height:1.25}
.hero .lede{margin-top:.6rem;max-width:30rem}
.soon{display:inline-flex;align-items:center;gap:.65rem;min-height:48px;margin-top:clamp(24px,3vw,34px);padding:.7rem 1.25rem;border-radius:999px;background:var(--sage-soft);font-weight:700;line-height:1.3}
.soon::before{content:"";flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--accent)}
.badge{display:inline-block;margin-top:clamp(24px,3vw,34px);padding:6px;border-radius:12px}
.badge img{height:50px;width:auto}
.art{position:relative;display:grid;justify-items:center}
.phone{margin:0 auto;width:min(100%,20.5rem);padding:clamp(7px,2.6%,11px);background:var(--frame);border-radius:15.2% / 7.1%;box-shadow:0 40px 80px -40px rgba(32,30,29,.55),0 0 0 1px rgba(255,255,255,.06) inset}
.phone img{width:100%;height:auto;border-radius:13.7% / 6.3%}
/* the big countdown numeral, drawn as a widget: decorative, the h1 says it all */
.countdown{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:.9rem;width:min(100%,21rem);padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,30px) clamp(22px,2.6vw,30px);border-radius:28px;background:var(--surf);box-shadow:0 1px 2px rgba(32,30,29,.06),0 30px 60px -30px rgba(32,30,29,.45);transform:rotate(-2.5deg)}
.cd-lbl{grid-column:1/-1;font-weight:700;font-size:1.125rem;color:var(--mute)}
.cd-num{font:400 clamp(7rem,5rem + 8vw,10rem)/.86 Caprasimo,Georgia,serif;color:var(--accent);margin-top:.35rem}
.cd-unit{padding-bottom:.55rem;font-weight:800;font-size:1.375rem;line-height:1.1}
.countdown .bar{grid-column:1/-1;margin-top:1.1rem}
@media (min-width:860px){.hero-grid{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr)}}

/* what it does */
.grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.grid li{position:relative;overflow:hidden}
.grid p{margin-top:.45rem;color:var(--mute)}
.confetti{position:absolute;top:3px;right:14px;width:5rem;height:auto;pointer-events:none}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* how it works */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));counter-reset:step}
.steps li{counter-increment:step}
.steps li::before{content:counter(step);display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:1.1rem;border-radius:50%;background:var(--sage-soft);color:var(--accent-text);font:400 1.5rem/1 Caprasimo,Georgia,serif}
.steps p{margin-top:.45rem;color:var(--mute)}

/* private + price */
.promise{position:relative;overflow:hidden;background:var(--deep);color:var(--on-deep);border-radius:clamp(24px,2.6vw,28px);padding:clamp(28px,5vw,64px)}
.promise .eyebrow{color:var(--on-deep-soft)}
.promise h2{max-width:20ch}
.promise p{margin-top:1.1rem;max-width:36rem;font-size:clamp(1.0625rem,1rem + .3vw,1.2rem)}
.promise a{display:inline-block;margin-top:1.4rem;padding:.35rem 0;color:inherit;font-weight:700}
.promise :focus-visible{outline-color:var(--on-deep)}
.promise .ring{position:absolute;width:clamp(14rem,30vw,24rem);aspect-ratio:1;border-radius:50%;background:var(--on-deep-soft);opacity:.08;right:-5rem;bottom:-7rem;pointer-events:none}
.price{margin-top:clamp(16px,2vw,24px);display:grid;gap:clamp(12px,3vw,40px);align-items:center}
.price p{margin-top:1rem;color:var(--mute);max-width:32rem}
.price .big{font:400 clamp(4rem,3rem + 5vw,7rem)/1 Caprasimo,Georgia,serif;color:var(--accent);letter-spacing:-.01em}
@media (min-width:760px){.price{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.price .big{justify-self:center}}

/* screenshots */
.shots{margin-top:clamp(28px,4vw,48px);display:grid;grid-auto-flow:column;grid-auto-columns:clamp(11.5rem,40vw,15.5rem);gap:clamp(12px,1.6vw,20px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(16px,5vw,84px);padding:4px clamp(16px,5vw,84px) 22px;list-style:none;margin-bottom:0;scrollbar-color:var(--edge) transparent}
.shots li{scroll-snap-align:start}
.shots img{width:100%;height:auto;border-radius:clamp(16px,1.6vw,22px);box-shadow:var(--lift)}

/* details + faq */
.details{display:grid;gap:0;margin:0;border-top:1px solid var(--line)}
.details div{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;justify-content:space-between;padding:.95rem 0;border-bottom:1px solid var(--line)}
.details dt{font-weight:700}
.details dd{margin:0;color:var(--mute)}
.split{display:grid;gap:clamp(40px,6vw,80px)}
@media (min-width:900px){.split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.qa{display:grid;gap:clamp(12px,1.6vw,18px)}
.qa p{margin-top:.45rem;color:var(--mute)}
.more{margin-top:clamp(20px,2.4vw,28px)}
.pagelinks{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin-top:clamp(36px,5vw,56px);padding-top:1.4rem;border-top:1px solid var(--line);font-weight:700}
.pagelinks a{display:inline-block;padding:.3rem 0}

/* documents: privacy + support */
.doc{padding-block:clamp(36px,6vw,80px) clamp(64px,9vw,120px)}
.crumb{display:inline-flex;align-items:center;gap:.8rem;min-height:44px;margin-bottom:clamp(24px,4vw,40px);color:var(--ink);font-weight:700;text-decoration:none}
.crumb:hover{text-decoration:underline}
.crumb .app-icon{width:44px}
.crumb .bar{width:2.75rem;height:10px}
.doc .meta{margin-top:1rem;color:var(--mute)}
.doc .meta strong{color:var(--ink)}
.doc .short{margin-top:clamp(24px,3vw,36px);background:var(--sage-soft);border-radius:24px;padding:clamp(18px,2.4vw,26px)}
.doc h2{font-size:clamp(1.55rem,1.25rem + 1.2vw,2.1rem);margin:clamp(36px,5vw,52px) 0 .8rem}
.doc h3{margin:1.8rem 0 .35rem}
.doc p{margin:0 0 .9rem}
.doc ul{margin:0 0 .9rem;padding-left:1.3rem}
.doc li{margin:.3rem 0}
.doc li::marker{color:var(--accent-text)}

/* the contact form (same mechanism as Sweep's, this app's colours) */
.contact{margin-top:clamp(24px,3vw,36px);scroll-margin-top:90px}
.field{margin-bottom:1.35rem}
.field label{display:block;margin-bottom:.4rem;font-weight:700}
.field label .opt{font-weight:500;color:var(--mute)}
.field input,.field select,.field textarea{display:block;width:100%;min-height:48px;padding:.7rem .9rem;border:1.5px solid var(--edge);border-radius:14px;background:var(--bg);color:var(--ink);font:inherit;font-size:1.0625rem;line-height:1.4}
.field textarea{min-height:10rem;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 1.25rem) 50%,calc(100% - .9rem) 50%;background-size:.36rem .36rem;background-repeat:no-repeat}
.field ::placeholder{color:var(--mute);opacity:1}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px;border-color:var(--accent-text)}
.field [aria-invalid=true]{border-color:var(--err);border-width:2px}
.hint{margin:.4rem 0 0;font-size:.9375rem;color:var(--mute)}
.err{margin:.4rem 0 0;font-weight:700;font-size:.9375rem;color:var(--err)}
.err:empty,.form-status:empty{display:none}
.form-status{margin:0 0 1.1rem;padding:.8rem 1rem;border-radius:14px;border:2px solid var(--err);font-weight:700}
.send{min-height:52px;min-width:8.5rem;padding:.8rem 2rem;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font:700 1.0625rem/1.2 Figtree,system-ui,sans-serif;cursor:pointer}
.send:hover{filter:brightness(1.06)}
.send:disabled{opacity:.65;cursor:progress}
.after{margin-top:.9rem;font-size:.9375rem;color:var(--mute)}
.sent{padding:clamp(20px,3vw,30px);border-radius:24px;background:var(--sage-soft);font-weight:700;font-size:1.125rem}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media print{header.site,footer.site,.skip,.hero .sun,.countdown,.confetti{display:none}}