/* Hero quick links and the glass phone presentation. */
.hero-shortcuts{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:30px;transition:opacity .6s ease,transform .6s ease}
html.sfq-intro:not(.sfq-s-hero) .hero-shortcuts{opacity:0;transform:translateY(12px);pointer-events:none}
.hero-device{min-width:0}
.hero-device>.store-row{justify-content:center;margin-top:38px;gap:12px;transition:opacity .8s ease,transform .8s ease}
html.sfq-intro:not(.sfq-s-hero) .hero-device>.store-row{opacity:0;transform:translateY(14px)}
.iphone-fold{background:rgba(14,10,13,.04)}
.iphone-fold .ip-screen{isolation:auto;position:relative;background:linear-gradient(145deg,rgba(45,32,38,.12),rgba(9,8,12,.22));backdrop-filter:blur(2px) saturate(1.2);-webkit-backdrop-filter:blur(2px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ip-screen .ip-status{position:relative;z-index:2}
.ip-screen .app-screens{z-index:2;mix-blend-mode:screen}
.ip-screen .app-like{background:rgba(5,5,8,.38)}
.ip-screen .al-nav{background:rgba(34,29,35,.65)}
.ip-screen::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 26%,transparent 67%,rgba(255,151,170,.05));box-shadow:inset 0 1px 1px rgba(255,255,255,.3),inset 1px 0 1px rgba(255,255,255,.12)}

@media(max-width:640px){
 .hero-shortcuts{padding:0 18px;gap:8px;margin-bottom:32px}
 .hero-shortcuts .pill{padding:10px 14px;font-size:.82rem}
 .hero-device>.store-row{margin-top:30px;gap:10px}
 .hero-device .store-badge{padding:10px 13px}
 .hero-device .sb-text{font-size:1rem}
}
@media(hover:none),(max-width:640px){
 .hero-shortcuts .px-short{display:inline-grid;grid-template-columns:1fr;opacity:1}
 .hero-shortcuts .px-full{display:none}
}
@media(max-width:360px){.hero-shortcuts .pill{padding:9px 11px;font-size:.76rem}}

@media(min-width:981px){.hero{padding:100px 0 90px}.hero-device .radar-stage{min-height:510px}.hero-device>.store-row{margin-top:30px}}

/* Ember accents, crossed by a narrow red scanning light. */
.hero{--ember:#f5a347;--ember-light:#ffd497}
#heroHeadline em.w{background-image:linear-gradient(100deg,var(--ember) 0%,var(--ember-light) 40%,#ff303f 48%,#ff6670 50%,var(--ember) 56%,var(--ember-light) 100%);background-size:280% 100%;animation:wordUp .8s var(--ease) forwards,emberTextScan 6s linear infinite;animation-delay:calc(.15s + var(--i,0)*.09s),0s}
@keyframes emberTextScan{0%,15%{background-position:100% 0}75%,100%{background-position:0% 0}}
.hero-shortcuts .pill{color:var(--ember);border-color:rgba(245,163,71,.48);background:rgba(245,163,71,.065)}
.hero-shortcuts .pill:is(:hover,:focus-visible){color:var(--ember-light);border-color:rgba(245,163,71,.8);background:rgba(245,163,71,.12);box-shadow:0 8px 26px rgba(255,46,59,.18),inset 0 0 18px rgba(245,163,71,.08)}
.pc-main{container-type:inline-size;min-width:0}
.pc-rate{flex-wrap:nowrap;white-space:nowrap;gap:.14em;font-size:clamp(1.4rem,13cqi,4rem);max-width:100%}
.pc-rate>*{flex:none}
@media(prefers-reduced-motion:reduce){#heroHeadline em.w{animation:none;opacity:1;transform:none;background-position:0 0}}
/* Blend the phone's dark UI into the real scene behind the hero grid. */
.hero .hero-grid{z-index:auto}
.hero-device{mix-blend-mode:screen}
/* Payroll input and calculated quote. The red bar is an output, not another input. */
.quote-calculator{width:100%;margin-top:28px;font-size:.94rem;line-height:1.45}
.quote-payroll-value,.quote-price-value{display:block;margin:5px 0 18px;font:750 clamp(1.7rem,8cqi,2.65rem)/1.2 var(--font-display);letter-spacing:-.025em}
.quote-payroll-value{color:#ffc477;text-shadow:0 0 24px rgba(245,163,71,.18)}
.quote-price-value{color:#ff4051;text-shadow:0 0 24px rgba(255,46,59,.25)}
.quote-price-value span{font-size:.8em}
.quote-slider{--salary-fill:0%;display:block;appearance:none;-webkit-appearance:none;width:100%;height:14px;margin:0;border:1px solid #4b3c30;border-radius:20px;cursor:pointer;background:linear-gradient(90deg,#f5a347,#ffbf74) 0 0/var(--salary-fill) 100% no-repeat,repeating-linear-gradient(90deg,#262326 0 14px,#1c191c 14px 28px)}
.quote-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:25px;height:25px;border:2px solid #ffedce;border-radius:50%;background:linear-gradient(145deg,#ffbf70,#f18a30);box-shadow:0 0 14px rgba(245,163,71,.5)}
.quote-slider::-moz-range-thumb{width:22px;height:22px;border:2px solid #ffedce;border-radius:50%;background:#f5a347;box-shadow:0 0 14px rgba(245,163,71,.5)}
.quote-slider:focus-visible{outline:2px solid #ffc477;outline-offset:9px}
.quote-scale{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font:400 .76rem/1.4 var(--font-mono);color:var(--ink-dim)}
.quote-cost{border-top:1px solid rgba(255,255,255,.1);margin-top:25px;padding-top:22px}
.quote-price-bar{appearance:none;-webkit-appearance:none;display:block;width:100%;height:12px;border:0;border-radius:20px;overflow:hidden;background:repeating-linear-gradient(90deg,#262326 0 14px,#1c191c 14px 28px)}
.quote-price-bar::-webkit-progress-bar{background:repeating-linear-gradient(90deg,#262326 0 14px,#1c191c 14px 28px);border-radius:20px}
.quote-price-bar::-webkit-progress-value{background:linear-gradient(90deg,#ff5c66,#ff2e3b);border-radius:20px;box-shadow:0 0 12px #ff2e3b}
.quote-price-bar::-moz-progress-bar{background:#ff2e3b;border-radius:20px}
.quote-formula{font-size:.83rem;margin-top:16px;color:var(--ink)}
.price-card:has(.quote-calculator) .pc-for{display:none}
.price-card:has(.quote-calculator) .pc-rate{margin-top:28px}
.price-card:has(.quote-calculator) .pc-cta{margin-top:28px}
.quote-features[hidden],.quote-panel[hidden]{display:none!important}
.quote-panel{scroll-margin-top:90px;animation:quoteEnter .3s ease both}
.quote-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px}
.quote-panel-head h3{font:500 .78rem/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.18em;color:var(--gold-bright)}
.quote-back{border:0;background:none;color:var(--ink-dim);font:inherit;font-size:.76rem;cursor:pointer;white-space:nowrap;padding:8px 0}
.quote-back:hover{color:var(--ink)}
.quote-intro{font-size:1.05rem;margin-bottom:16px}
.quote-form{display:flex;flex-direction:column;gap:8px}
.quote-form label{font-weight:500;font-size:.88rem;margin-top:8px}
.quote-form input,.quote-form textarea{display:block;width:100%;min-width:0;padding:12px 14px;border:1px solid rgba(255,46,59,.5);border-radius:10px;background:rgba(255,46,59,.035);color:var(--ink);font:inherit;font-size:.9rem;line-height:1.5}
.quote-form textarea{resize:vertical;min-height:100px;max-height:300px}
.quote-form :is(input,textarea)::placeholder{color:#9b8e94}
.quote-form :is(input,textarea):focus-visible{outline:2px solid #ff5c66;outline-offset:2px}
.quote-form .btn{width:100%;font-size:.91rem;padding:13px 14px}
.quote-submit{margin-top:16px}
.quote-email{background:rgba(255,46,59,.04);border:1px solid #ff4051;color:var(--ink)}
.quote-email:hover{background:rgba(255,46,59,.14)}
.quote-email-address{text-align:center;font-size:.9rem;color:var(--ink-dim);margin-top:6px}
.quote-help{font-size:.73rem;line-height:1.5;color:var(--ink-faint);text-align:center;margin-top:4px}
@keyframes quoteEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:420px){.quote-panel-head{align-items:flex-start;flex-direction:column;gap:3px}.quote-scale{font-size:.66rem}.quote-formula{font-size:.74rem}}
@media(prefers-reduced-motion:reduce){.quote-panel{animation:none}}

/* Scan once when the label expands; keep the idle pills still. */
.hero-shortcuts .px-full::after{display:block}
@media(prefers-reduced-motion:reduce){.hero-shortcuts .pill-x .px-full::after{animation:none!important}}
#priceCard{scroll-margin-top:90px}

/* Percentage suffixes stay compact so the full range fits on one line. */
.pc-rate .pc-percent{font-size:.58em;letter-spacing:-.03em}
.pc-rate{font-size:clamp(1.25rem,11.4cqi,4rem)}

/* The shortcut row stays below the header throughout the whole homepage. */
.hero-shortcuts-space{margin-bottom:30px}
.hero-shortcuts.hero-shortcuts-fixed{--ember:#f5a347;--ember-light:#ffd497;position:fixed;top:var(--shortcuts-top,64px);left:0;right:0;z-index:96;width:100%;max-width:none;margin:0;padding:14px 20px;background:rgba(17,14,17,.46);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px rgba(255,255,255,.035),0 8px 24px #0002;pointer-events:auto}
.hero-shortcuts-fixed .pill{pointer-events:auto;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hero-shortcuts-fixed.is-scrolled .pill{background:rgba(35,23,15,.55);box-shadow:inset 0 1px rgba(255,230,195,.06),0 4px 16px #0002}
.hero-shortcuts-fixed.is-scrolled .pill:is(:hover,:focus-visible){background:rgba(65,40,21,.7)}
.has-fixed-shortcuts main section[id]{scroll-margin-top:var(--shortcuts-clearance,180px)}
body:has(.nav.nav-open) .hero-shortcuts-fixed{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:640px){.hero-shortcuts-space{margin-bottom:32px}.hero-shortcuts.hero-shortcuts-fixed{padding:12px}}

html.sfq-intro:not(.sfq-s-hero) .hero-shortcuts-fixed{visibility:hidden}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hero-shortcuts.hero-shortcuts-fixed{background:rgba(17,14,17,.93)}}

/* Editable sample task data, matching the phone's glass presentation. */
.task-demo{container-type:inline-size;width:100%;height:100%;overflow:hidden;color:#f4f1f2;font-family:Inter,system-ui,sans-serif}
.task-demo-content{font-size:4.5cqi;line-height:1.45;background:rgba(8,8,10,.12)}
.td-brand{display:flex;align-items:center;justify-content:space-between;padding:2cqi 5cqi 3cqi}.td-brand [data-sfq-logo]{font-size:7cqi}.td-avatar{display:grid;place-items:center;width:7cqi;height:7cqi;background:#ff2e3b22;border-radius:50%;color:#ff5c66;font-size:3.5cqi}
.td-project{display:flex;align-items:center;gap:3cqi;padding:3cqi 5cqi;background:linear-gradient(#c41625aa,#7f101a22);font-size:5cqi}.td-project span{margin-left:auto;font-size:3.5cqi}
.td-panel{margin:0 2cqi;padding:5cqi 4cqi;border:1px solid #ffffff30;border-radius:8cqi;background:linear-gradient(135deg,#ffffff12,#ffffff04)}
.td-summary,.td-grid,.td-requirements{background:rgba(17,18,21,.48);border:1px solid #ffffff08;border-radius:6cqi}
.td-summary{padding:4cqi}.td-badges{display:flex;flex-wrap:wrap;gap:2cqi;max-width:65cqi}.td-badges span{padding:1cqi 2cqi;border-radius:9cqi;background:#a7192325;color:#ff525a;font-size:3.5cqi;white-space:nowrap}.td-summary h3{font-family:Inter,system-ui,sans-serif;font-size:6.3cqi;line-height:1.2;letter-spacing:-.03em;margin:4cqi 0 1cqi;text-wrap:wrap}
.td-grid{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;margin-top:4cqi}.td-grid>div{display:flex;align-items:flex-start;gap:3cqi;padding:4cqi 3cqi;min-width:0}.td-grid>div:nth-child(odd){border-right:1px solid #ffffff0d}.td-grid>div:nth-child(-n+2){border-bottom:1px solid #ffffff0d}.td-grid i{display:grid;place-items:center;flex:0 0 10cqi;height:10cqi;background:#16c86a20;border-radius:3cqi;color:#25d779;font-size:6cqi;font-style:normal}.td-grid small{display:block;color:#aeb6c0;font-size:3.7cqi}.td-grid strong{display:block;margin-top:1cqi;font-size:4.2cqi;font-weight:500}.td-grid .td-date{color:#ff525a;font-size:3.9cqi;white-space:nowrap}.td-opened{margin:3cqi 0 4cqi;color:#aeb6c0;font-size:3.8cqi;line-height:1.6}.td-requirements{padding:4cqi}.td-requirements>small{color:#aeb6c0;font-size:3.6cqi}.td-requirements p{display:flex;gap:3cqi;margin-top:3cqi;font-size:4cqi}.td-requirements i{color:#25d779;font-style:normal}.td-requirements b{font-weight:650}

.task-demo-content{transform:translateY(-8%)}.task-detail-screen.is-active .task-demo-content{animation:taskScreenPan 4s ease-in-out both}@media(prefers-reduced-motion:reduce){.task-detail-screen.is-active .task-demo-content{animation:none;transform:translateY(-18%)}}

/* A short, skippable brand intro. Only opacity changes during the handoff. */
.sfq-splash{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,rgba(111,22,32,.24),transparent 58%),#0b090b;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility 0s .45s}
html.sfq-intro .sfq-splash{opacity:1;visibility:visible;pointer-events:auto;transition:none}
html.sfq-intro:has(.sfq-splash){overflow:hidden}
.sfq-splash-center{text-align:center;padding:28px;width:100%}
.sfq-splash-logo{font-size:clamp(52px,12vw,140px);max-width:100%}
.sfq-splash-logo .logo-fallback{font-size:inherit}
.sfq-splash-center p{margin-top:28px;color:#c6bfc2;font-size:clamp(14px,2vw,18px);letter-spacing:.08em}
.sfq-splash-skip{position:absolute;right:max(28px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:20px;padding:13px 22px;border:1px solid rgba(245,163,71,.5);border-radius:999px;background:rgba(245,163,71,.06);color:#ffc477;font:500 15px/1.3 var(--font-body);cursor:pointer;transition:background .2s ease,border-color .2s ease}
.sfq-splash-skip:hover{background:rgba(245,163,71,.14);border-color:#f5a347}
.sfq-splash-skip:focus-visible{outline:2px solid #ff5260;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.sfq-splash{display:none;transition:none}}