/* -------------------------------------------------------
       TopKlussers – Mobile-first helpers (with Tailwind CDN)
       ------------------------------------------------------- */

    /* Brand palette fallbacks */
    :root{
      --tk-ink:#0B1020;--tk-soft:#F7F7FB;--tk-brand:#0EA5E9;--tk-good:#10B981;--tk-warn:#F59E0B;
    }

    /* Global fixes */
    html,body{max-width:100%;overflow-x:hidden;}
    img,svg,video,canvas{max-width:100%;height:auto;}
    *{min-width:0;}
    p,li,span,small{word-break:break-word;overflow-wrap:anywhere;}
    html{scroll-behavior:smooth;}
    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto;}
      *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
      .motion-ok{animation:none!important}
    }

    /* Shadows */
    .shadow-glow{box-shadow:0 10px 30px rgba(14,165,233,.25)}
    .shadow-xl{box-shadow:0 20px 40px rgba(0,0,0,.08)}

    /* Keyframes as utilities (matching Tailwind config) */
    @keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
    @keyframes pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
    @keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}70%{box-shadow:0 0 0 12px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
    @keyframes slideIn{0%{transform:translateX(100%)}100%{transform:translateX(0)}}
    @keyframes pulseBrand{0%{box-shadow:0 0 0 0 rgba(14,165,233,.45)}70%{box-shadow:0 0 0 14px rgba(14,165,233,0)}100%{box-shadow:0 0 0 0 rgba(14,165,233,0)}}
    @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
    .animate-fadeUp{animation:fadeUp .5s ease-out forwards}
    .animate-pop{animation:pop .45s cubic-bezier(.2,.9,.2,1) forwards}
    .animate-pulseRing{animation:pulseRing 1.6s ease-out}
    .animate-slideIn{animation:slideIn .3s ease-out forwards}
    .animate-pulseBrand{animation:pulseBrand 1.8s ease-out infinite}
    .animate-float{animation:float 3s ease-in-out infinite}

    /* Hero H1 clamp */
    section .space-y-6>h1{
      font-size:clamp(2rem,7.5vw,3rem);line-height:1.1;letter-spacing:-.01em;
    }

    /* Prevent blurred circles from causing x-scroll */
    section > .absolute.inset-0{mask-image:linear-gradient(#000,#000);-webkit-mask-image:linear-gradient(#000,#000);overflow:hidden;pointer-events:none;max-width:120vw;max-height:120vh}

    /* CTA card small screens */
    @media (max-width:380px){
      .group.relative.block.w-full .relative.flex.items-center{padding:.9rem 1rem;border-radius:.9rem}
    }
    @media (max-width:480px){
      .group.relative.block.w-full .absolute.inset-0.blur-lg{filter:blur(14px);opacity:.25}
    }

    /* Grids breathing room on phones */
    @media (max-width:640px){
      .p-5{padding:1rem}
    }

    /* Storyboard SVG niceties */
    svg.w-full{display:block;height:auto}
    svg [stroke-dasharray]{shape-rendering:geometricPrecision}

    /* Drawers & modal */
    #pro-signup-app .animate-slideIn,
    #client-signup-app .animate-slideIn,
    #login-modal .animate-slideIn{
      height:100dvh;max-height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
      padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
    }
    #login-backdrop{touch-action:none}

    /* Larger tap targets on tiny screens */
    @media (max-width:480px){
      input[type="email"],input[type="password"],input[type="text"],input[type="tel"],textarea,select{
        font-size:16px;padding:.65rem .75rem;
      }
      label.block.text-sm{font-size:.9rem}
    }

    /* Focus ring polish */
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="text"]:focus,
    input[type="tel"]:focus,
    textarea:focus,select:focus{
      outline:none;border-color:var(--tk-brand);box-shadow:0 0 0 3px rgba(14,165,233,.1)
    }

    /* Buttons */
    button[type="submit"],button[type="button"]{cursor:pointer;transition:transform .15s ease,opacity .15s ease}
    button[type="submit"]:hover:not(:disabled),button[type="button"]:hover:not(:disabled){transform:translateY(-1px)}
    button[type="submit"]:active:not(:disabled),button[type="button"]:active:not(:disabled){transform:translateY(0)}
    button:disabled{cursor:not-allowed;opacity:.5}

    /* Footer tidy */
    footer .grid{row-gap:1.25rem}
    footer p,footer a{word-break:break-word}

    /* Brand fallbacks (rarely needed with Play CDN, kept for safety) */
    .bg-soft{background-color:var(--tk-soft)!important}
    .text-ink{color:var(--tk-ink)!important}
    .text-brand{color:var(--tk-brand)!important}
    .text-good{color:var(--tk-good)!important}
    .text-warn{color:var(--tk-warn)!important}
    .bg-brand{background-color:var(--tk-brand)!important}
    .bg-brand\/10{background-color:rgba(14,165,233,.1)!important}
    .bg-brand\/5{background-color:rgba(14,165,233,.05)!important}
    .bg-good\/10{background-color:rgba(16,185,129,.1)!important}
    .border-brand\/20{border-color:rgba(14,165,233,.2)!important}
    .border-good\/30{border-color:rgba(16,185,129,.3)!important}

    /* Selection */
    ::selection{background-color:rgba(14,165,233,.2);color:var(--tk-ink)}
    :focus-visible{outline:2px solid var(--tk-brand);outline-offset:2px}

    /* Keep rounded containers from clipping inner shadows while still preventing overflow */
    .rounded-3xl,.rounded-2xl,.rounded-xl{overflow:hidden}