/* Stickerfi shared styles — global base, responsive switching, and interactive states
   (converted from the design-tool runtime; breakpoint 860px matches the original matchMedia). */

/* Base (hoisted from the identical per-page <style> blocks) */
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#232b3a;background:#fafbfd;-webkit-font-smoothing:antialiased}
a{color:#5b74c4}a:hover{color:#7960aa}

/* Focus ring (original used :focus; :focus-visible avoids the ring on mouse clicks) */
a:focus-visible,button:focus-visible{outline:3px solid #56B1E3;outline-offset:2px}
.focus-inset:focus-visible{outline-offset:-3px}
.focus-white:focus-visible{outline-color:#fff}

/* Desktop / mobile switching (replaces the runtime's sc-if desktop/mobile branches) */
@media (max-width:860px){.desktop-only{display:none !important}}
@media (min-width:861px){.mobile-only{display:none !important}}

/* Header nav */
.nav-link{color:#c9d1e2;text-decoration:none}
.nav-link:hover{color:#fff}

/* Collapsible mobile menu (values from the original menuMaxH/menuOp logic) */
.mobile-menu{overflow:hidden;max-height:0;opacity:0;transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .2s ease;will-change:max-height}
.mobile-menu.open{max-height:175px;opacity:1}

/* Buttons */
.btn-grad,.btn-grad-sm{background:linear-gradient(135deg,#56B1E3,#6882C0,#7960AA)}
.btn-grad-sm{box-shadow:0 4px 14px rgba(104,130,192,.35)}
.btn-grad-sm:hover{box-shadow:0 6px 20px rgba(104,130,192,.5)}
.btn-grad{box-shadow:0 6px 18px rgba(104,130,192,.4)}
.btn-grad:hover{box-shadow:0 8px 26px rgba(104,130,192,.55)}
.btn-outline{background:#fff;color:#26324b;border:1.5px solid #d8deea}
.btn-outline:hover{border-color:#6882c0;color:#6882c0}
.btn-white{background:#fff;color:#26324b;box-shadow:0 8px 24px rgba(30,40,70,.25)}
.btn-white:hover{box-shadow:0 10px 30px rgba(30,40,70,.35)}
.btn-ghost{background:rgba(255,255,255,.14)}
.btn-ghost:hover{background:rgba(255,255,255,.24)}
.card-link{box-shadow:0 0 0 3px #fff,0 1px 2px rgba(35,43,58,.05),0 12px 28px rgba(104,130,192,.14)}
.card-link:hover{box-shadow:0 0 0 3px #fff,0 2px 4px rgba(35,43,58,.08),0 18px 38px rgba(104,130,192,.24)}
.link-btn{color:#5b74c4}
.link-btn:hover{color:#7960aa}

/* Footer */
.footer-link{color:#aab3c7;text-decoration:none}
.footer-link:hover{color:#fff}

/* Contact form fields (the a/button focus rule above doesn't cover inputs) */
.field:focus-visible{outline:3px solid #56B1E3;outline-offset:2px;border-color:#6882c0}

/* Carousels (used with assets/carousel.js) */
.slide{opacity:0;pointer-events:none;transition:opacity .7s ease}
.slide.active{opacity:1;pointer-events:auto}
.dot{background:#d8deea}
.dot.active{background:linear-gradient(135deg,#56B1E3,#7960AA)}

/* Demo page install modal */
.modal{display:none}
.modal.open{display:flex}
.modal-x{background:#f1f4f9}
.modal-x:hover{background:#e3e8f1}

/* Demo page: full-height editor mode (funnel hands off to editor).
   !important beats the sections' inline padding, same as .desktop-only above. */
body.demo-editor #demo-intro{display:none}
body.demo-editor #demo-stage{padding-top:0 !important}

/* Demo page: "Live demo" banner in the sticky header while the editor is loaded.
   On mobile it replaces the install CTA so the two gradient bars don't stack. */
.demo-banner{display:none}
body.demo-editor .demo-banner{display:flex;align-items:center;justify-content:center;gap:9px}
body.demo-editor .mobile-cta{display:none !important}
.live-dot{animation:live-pulse 2s ease-in-out infinite}
@keyframes live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.72)}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* Pricing fee card: dividers only when the cells stack (mobile) */
@media (max-width:860px){.fee-cell{border-top:1px solid #e3e8f1}}

/* Features h1: gradient span stays on one line on desktop */
.h1-grad{white-space:nowrap}
@media (max-width:860px){.h1-grad{white-space:normal}}

/* Features before/after wipe.
   Timeline from the original script: 0.9s initial delay, then a 10s ping-pong —
   wipe right 2.8s (0–28%), hold wiped to 5.4s (54%), wipe back 2.8s (54–82%),
   hold un-wiped to 10s. The line is visible for ~2.9s from the start of each sweep. */
.wipe-after{clip-path:inset(0 100% 0 0);animation:wipe-after 10s ease-in-out .9s infinite}
.wipe-before{clip-path:inset(0 0 0 0%);animation:wipe-before 10s ease-in-out .9s infinite}
.wipe-line{left:0;opacity:0;animation:wipe-line 10s ease-in-out .9s infinite}
@keyframes wipe-after{
  0%{clip-path:inset(0 100% 0 0)}
  28%{clip-path:inset(0 0% 0 0)}
  54%{clip-path:inset(0 0% 0 0)}
  82%{clip-path:inset(0 100% 0 0)}
  100%{clip-path:inset(0 100% 0 0)}
}
@keyframes wipe-before{
  0%{clip-path:inset(0 0 0 0%)}
  28%{clip-path:inset(0 0 0 100%)}
  54%{clip-path:inset(0 0 0 100%)}
  82%{clip-path:inset(0 0 0 0%)}
  100%{clip-path:inset(0 0 0 0%)}
}
@keyframes wipe-line{
  0%{left:0%;opacity:1}
  28%{left:100%;opacity:1}
  29%{left:100%;opacity:0}
  53%{left:100%;opacity:0}
  54%{left:100%;opacity:1}
  82%{left:0%;opacity:1}
  83%{left:0%;opacity:0}
  100%{left:0%;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .wipe-after{animation:none;clip-path:inset(0 0% 0 0)}   /* after image fully shown */
  .wipe-before{animation:none;clip-path:inset(0 0 0 100%)} /* "Uploaded photo" badge hidden */
  .wipe-line{animation:none;opacity:0}
}

/* Privacy policy: label + description rows (a <dl>; the two columns stack on mobile) */
.pp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:2px 28px;padding:14px 0;border-top:1px solid #e3e8f1}
.pp-row:first-child{border-top:0;padding-top:0}
@media (max-width:860px){.pp-row{grid-template-columns:1fr;gap:4px}}