/* ---------- Skimly brand: pulled from the film + mascot ---------- */
:root{
  --water:#18BDE8;      /* pool water */
  --water-dk:#0E9AC6;
  --deep:#073B4A;       /* deep water / ink */
  --teal:#14A39A;       /* mascot hoodie */
  --orange:#F2690C;     /* mascot shorts, ring, glasses */
  --orange-dk:#D55707;
  --sand:#FFF7EA;       /* pool deck */
  --paper:#FFFFFF;
  --line:#E6DCCB;
  --ink:#08313D;
  --muted:#5B7883;
  --shadow:0 10px 30px rgba(7,59,74,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--sand);color:var(--ink);
  font:16px/1.6 Figtree,system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:"Baloo 2",Figtree,sans-serif;font-weight:800;line-height:1.05;text-wrap:balance}
p{margin:0}
a{color:inherit}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--orange);color:#fff;font-weight:900;letter-spacing:.01em;
  padding:16px 26px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  box-shadow:0 8px 20px rgba(242,105,12,.35);transition:transform .15s,background .15s,box-shadow .15s;
  font-size:1.02rem;font-family:Figtree,sans-serif;
}
.btn:hover,.btn:focus-visible{background:var(--orange-dk);transform:translateY(-2px);box-shadow:0 12px 26px rgba(242,105,12,.42)}
.btn-sm{padding:11px 18px;font-size:.92rem;box-shadow:0 6px 14px rgba(242,105,12,.3)}
.btn-lg{padding:18px 34px;font-size:1.12rem}
.btn-block{width:100%;padding:18px}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:20px;
  padding:14px clamp(16px,4vw,40px);padding-top:calc(14px + env(safe-area-inset-top,0px));
  transition:background .3s,box-shadow .3s;
}
.nav.solid{background:rgba(255,247,234,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo{width:38px;height:38px;border-radius:50%;object-fit:cover;filter:drop-shadow(0 2px 8px rgba(7,59,74,.35))}
.brandname{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.45rem;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 12px rgba(7,59,74,.5)}
.nav.solid .brandname{color:var(--deep);text-shadow:none}
.navlinks{margin-left:auto;display:flex;gap:24px;font-weight:700;font-size:.95rem}
.navlinks a{color:#fff;text-decoration:none;text-shadow:0 2px 10px rgba(7,59,74,.55)}
.nav.solid .navlinks a{color:var(--deep);text-shadow:none}
.navlinks a:hover{color:var(--orange)}
@media (max-width:760px){.navlinks{display:none}}

/* ---------- scroll film ---------- */
.film{position:relative;height:460vh;background:var(--deep)}
.film-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--deep)}
.film-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(7,59,74,.55) 0%,rgba(7,59,74,.12) 26%,rgba(7,59,74,.08) 55%,rgba(7,59,74,.62) 100%);
}
.caps{position:absolute;inset:0;display:grid;place-items:center;padding:0 clamp(20px,6vw,60px)}
.cap{
  grid-area:1/1;max-width:820px;text-align:center;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  opacity:0;transform:translateY(26px) scale(.985);will-change:opacity,transform;
  text-shadow:0 4px 26px rgba(7,59,74,.55);
}
.cap h1{font-size:clamp(2.6rem,8.2vw,5.6rem)}
.cap h2{font-size:clamp(2.1rem,6.4vw,4.2rem)}
.cap .sub{font-size:clamp(1.05rem,2.4vw,1.45rem);font-weight:500}
.cap .sub b{color:#FFD9B0}
.eyebrow{
  font-weight:900;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(242,105,12,.92);padding:7px 14px;border-radius:999px;text-shadow:none;
}
.eyebrow.dark{background:var(--orange);display:inline-block}
.scrollhint{
  position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  color:#fff;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.9;transition:opacity .4s;
}
.scrollhint span{width:2px;height:34px;background:linear-gradient(#fff,transparent);border-radius:2px;animation:drip 1.8s infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
.scrollhint.gone{opacity:0}

/* ---------- trust bar ---------- */
.trustbar{
  position:relative;z-index:2;background:var(--deep);color:#fff;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
}
.trust{padding:26px 18px;text-align:center;display:flex;flex-direction:column;gap:3px;background:var(--deep);box-shadow:1px 0 0 rgba(255,255,255,.09)}
.trust b{font-family:"Baloo 2",sans-serif;font-size:1.1rem;color:#7FE3FF}
.trust span{font-size:.88rem;color:#BBD7E0}
@media (max-width:720px){.trustbar{grid-template-columns:repeat(2,1fr)}}

/* ---------- sections ---------- */
section:not(.film):not(.trustbar){padding:clamp(56px,8vw,110px) clamp(18px,5vw,48px)}
.h-lg{font-size:clamp(2rem,4.6vw,3.2rem)}
.center{text-align:center}
.lead{font-size:1.1rem;color:var(--muted);max-width:60ch}
.narrow{margin:14px auto 0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}

.quote{background:var(--sand)}
.quote-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.quote-copy{display:flex;flex-direction:column;gap:18px;position:sticky;top:110px}
.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ticks li{position:relative;padding-left:30px;font-weight:500}
.ticks li::before{
  content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
@media (max-width:860px){.quote-inner{grid-template-columns:1fr}.quote-copy{position:static}}

/* ---------- calculator ---------- */
.calc{padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:9px}
label,.label{font-weight:700;font-size:.92rem;color:var(--deep)}
input[type=text],input[type=date],#zip{
  font:inherit;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);width:100%;
}
#zip:focus,input:focus{outline:3px solid rgba(24,189,232,.35);border-color:var(--water)}
.hint{font-size:.84rem;color:var(--muted)}
.hint.bad{color:#B23A2E;font-weight:700}
.hint.good{color:#1E7A4C;font-weight:700}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.seg[aria-label="Screened"]{grid-template-columns:repeat(2,1fr)}
.opt{
  font:inherit;cursor:pointer;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 10px;
  display:flex;flex-direction:column;gap:2px;font-weight:700;color:var(--deep);transition:.15s;text-align:left;
}
.opt em{font-style:normal;font-weight:500;font-size:.78rem;color:var(--muted)}
.opt:hover{border-color:var(--water)}
.opt.is-on{border-color:var(--water);background:#EAF9FE;box-shadow:inset 0 0 0 1px var(--water)}
.days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.day{
  font:inherit;font-weight:800;cursor:pointer;padding:12px 4px;border-radius:12px;border:1.5px solid var(--line);
  background:#fff;color:var(--deep);transition:.15s;
}
.day:hover{border-color:var(--water)}
.day.is-on{background:var(--deep);border-color:var(--deep);color:#fff}
.priceout{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:linear-gradient(120deg,#EAF9FE,#FFF3E4);border:1.5px dashed var(--water);border-radius:16px;padding:16px 18px;
}
.pl{display:block;font-size:.85rem;font-weight:700;color:var(--muted)}
.pv{font-family:"Baloo 2",sans-serif;font-size:2.5rem;line-height:1;color:var(--deep)}
.pv::before{content:"$";font-size:1.3rem;vertical-align:super;margin-right:2px}
.pv small{font-size:.95rem;font-weight:700;color:var(--muted)}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:.82rem;font-weight:600;color:var(--muted)}
.fineprint{font-size:.82rem;color:var(--muted);text-align:center}

/* ---------- how ---------- */
.how{background:var(--paper)}
.how-head{
  max-width:1120px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,46px);
  align-items:center;
}
.how-head>div{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.mascot{
  width:clamp(150px,20vw,260px);height:auto;
  filter:drop-shadow(0 18px 30px rgba(7,59,74,.18));
  animation:bob 4.5s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-14px) rotate(1.2deg)}}
@media (max-width:700px){
  .how-head{grid-template-columns:1fr;justify-items:center;text-align:center}
  .how-head>div{align-items:center}
  .mascot{width:clamp(130px,42vw,200px)}
}
.steps{max-width:1120px;margin:46px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{position:relative;padding:34px 26px 28px;border-radius:22px;background:var(--sand);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.step .num{
  position:absolute;top:-18px;left:26px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--orange);color:#fff;font-family:"Baloo 2",sans-serif;font-size:1.4rem;font-weight:800;
  box-shadow:0 6px 16px rgba(242,105,12,.4);
}
.step h3{font-size:1.28rem;margin-top:8px}
.step p{color:var(--muted)}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:34px}}

/* ---------- prices ---------- */
.plans{max-width:1120px;margin:40px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.plan{padding:30px 26px;display:flex;flex-direction:column;gap:14px;position:relative}
.plan h3{font-size:1.35rem}
.amount{font-family:"Baloo 2",sans-serif;font-size:2.7rem;line-height:1;color:var(--deep)}
.amount small{font-size:.9rem;font-weight:700;color:var(--muted)}
.plan ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--muted)}
.plan.featured{border:2px solid var(--orange);box-shadow:0 16px 40px rgba(242,105,12,.16)}
.tag{position:absolute;top:-14px;right:22px;background:var(--orange);color:#fff;font-size:.76rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
@media (max-width:860px){.plans{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{background:var(--paper)}
.qs{max-width:760px;margin:34px auto 0;display:flex;flex-direction:column;gap:10px}
details{background:var(--sand);border:1px solid var(--line);border-radius:16px;padding:16px 20px}
summary{cursor:pointer;font-weight:800;color:var(--deep);list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--orange);font-size:1.3rem;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--muted)}

/* ---------- footer ---------- */
.foot{background:var(--deep);color:#CFE6ED;padding:50px clamp(18px,5vw,48px) calc(40px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.foot-mascot{width:110px;height:auto;margin-bottom:-6px}
.foot .brandname{color:#fff;text-shadow:none}
.foot-brand{display:flex;align-items:baseline;gap:10px}
.by{font-size:.85rem;color:#8FB6C2}
.foot p{max-width:60ch;font-size:.9rem}
.small{font-size:.8rem;color:#7FA3B0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scrollhint span,.mascot{animation:none}
  .cap{transition:none}
}

/* ================= app pages (book / status / pro / admin) ================= */
.app{min-height:100svh;display:flex;flex-direction:column}
.appbar{
  display:flex;align-items:center;gap:12px;padding:14px clamp(16px,4vw,40px);
  padding-top:calc(14px + env(safe-area-inset-top,0px));
  background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;
}
.appbar .brandname{color:var(--deep);text-shadow:none;font-size:1.25rem}
.appbar .right{margin-left:auto;font-size:.86rem;color:var(--muted);font-weight:600}
.wrap2{width:100%;max-width:1060px;margin:0 auto;padding:clamp(20px,4vw,40px) clamp(16px,4vw,32px) 70px}
.wrap-narrow{max-width:720px}
.steps-bar{display:flex;gap:8px;align-items:center;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:18px}
.steps-bar b{color:var(--deep)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--line)}
.dot.on{background:var(--orange)}
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,3vw,32px);align-items:start}
@media (max-width:840px){.grid2{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(18px,3vw,28px);box-shadow:var(--shadow)}
.panel h2{font-size:1.5rem;margin-bottom:4px}
.panel h3{font-size:1.1rem}
.rowline{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.95rem}
.rowline:last-child{border-bottom:0}
.rowline span:first-child{color:var(--muted)}
.rowline b{text-align:right}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
textarea{font:inherit;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;resize:vertical;min-height:80px;background:#fff;color:var(--ink);width:100%}
.stripebox{
  border:1.5px dashed var(--water);background:#F2FBFE;border-radius:16px;padding:16px 18px;
  display:flex;gap:12px;align-items:flex-start;
}
.stripebox b{display:block;color:var(--deep)}
.stripebox p{font-size:.88rem;color:var(--muted)}
.lock{width:34px;height:34px;border-radius:10px;background:var(--water);display:grid;place-items:center;color:#fff;font-weight:900;flex:0 0 auto}
.sticky-side{position:sticky;top:96px}
@media (max-width:840px){.sticky-side{position:static}}
.note{font-size:.86rem;color:var(--muted)}
.err{background:#FDECEA;border:1px solid #F3BDB6;color:#9E2B20;border-radius:12px;padding:12px 14px;font-size:.9rem;font-weight:600}
.ok-badge{display:inline-flex;align-items:center;gap:8px;background:#E4F6EC;color:#1E7A4C;border-radius:999px;padding:8px 14px;font-weight:800;font-size:.86rem}
.pill2{display:inline-block;border-radius:999px;padding:5px 11px;font-size:.78rem;font-weight:800}
.s-pending{background:#FFF0DB;color:#A5660A}
.s-accepted{background:#E4F6EC;color:#1E7A4C}
.s-unmatched{background:#FDECEA;color:#B23A2E}
.s-expired,.s-closed,.s-declined{background:#EFEFEF;color:#666}
.s-sent{background:#E7F6FC;color:#0E7490}
.timeline{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.tl{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--sand)}
.tl .who{font-weight:800;color:var(--deep)}
.tl .when{font-size:.82rem;color:var(--muted)}
.tl .right{margin-left:auto}
.countdown{font-family:"Baloo 2",sans-serif;font-size:2rem;color:var(--orange);line-height:1}
.mascot-mini{width:66px;height:auto;flex:0 0 auto}
.hero-status{display:flex;gap:16px;align-items:center}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:760px}
.tbl th{text-align:left;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 12px;background:var(--sand);position:sticky;top:0}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.scrollx{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.kpi span{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}
.kpi b{display:block;font-family:"Baloo 2",sans-serif;font-size:1.9rem;color:var(--deep);line-height:1.1}
.mini{font:inherit;font-size:.82rem;font-weight:800;padding:7px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--deep);cursor:pointer}
.mini:hover{border-color:var(--orange);color:var(--orange)}
.btn-ghost{background:#fff;color:var(--deep);border:1.5px solid var(--line);box-shadow:none}
.btn-ghost:hover{background:#fff;border-color:var(--orange);color:var(--orange)}
.jobcard{border:2px solid var(--orange);border-radius:20px;padding:clamp(18px,3vw,26px);background:#fff;box-shadow:0 14px 34px rgba(242,105,12,.14)}
.jobprice{font-family:"Baloo 2",sans-serif;font-size:3rem;color:var(--deep);line-height:1}
.jobprice small{font-size:1rem;color:var(--muted);font-weight:700}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.demo-flag{background:var(--deep);color:#CFE6ED;font-size:.8rem;text-align:center;padding:8px 14px}
.demo-flag b{color:#7FE3FF}
.kpi b span,.jobprice span,.pv span{font:inherit;color:inherit}