/* Sign in / create account popup for the KareIQ and Kare@Home websites (KareNest has its own copy
   in karenest/site.css). Colours follow each site: set --ap-accent / --ap-dark on <body> if needed. */
.ap{--ap-accent:#11998e;--ap-dark:#0f3d4c;--ap-gold:#b08a3e;border:0;padding:40px 34px 30px;width:100%;max-width:min(440px,calc(100vw - 24px));border-radius:28px;background:#fbf8f2;color:#16304a;text-align:center;box-shadow:0 40px 100px -30px rgba(10,30,50,.55);font-family:inherit}
.ap[open]{animation:apIn .45s cubic-bezier(.2,.9,.25,1.15)}
@keyframes apIn{from{transform:translateY(24px) scale(.96);opacity:0}}
.ap::backdrop{background:rgba(10,28,40,.6);backdrop-filter:blur(4px)}
.ap *{box-sizing:border-box}
.ap-x{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--ap-dark);font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:0 8px 20px -12px rgba(10,30,50,.4)}
.ap-x:hover{background:#eef6f5}
.ap-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--ap-gold)}
.ap h2{margin:12px 0 0;font-family:"Libre Caslon Text","Fraunces",Georgia,serif;font-weight:400;font-size:clamp(28px,6vw,34px);line-height:1.15;color:#16304a}
.ap-sub{margin:10px 0 0;color:#5d6b7a;font-size:15px}
.ap-prov{display:grid;gap:10px;margin-top:22px}
.ap-prov a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;border-radius:999px;border:1px solid #e6ddc8;background:#fff;color:#16304a;font-weight:600;font-size:15px;text-decoration:none;transition:border-color .2s,transform .2s}
.ap-prov a:hover{border-color:var(--ap-accent);transform:translateY(-1px)}
.ap-prov svg{width:20px;height:20px;flex:none}
.ap-or{display:flex;align-items:center;gap:12px;margin:18px 0 0;color:#8a96a3;font-size:13px}
.ap-or::before,.ap-or::after{content:"";flex:1;height:1px;background:#e6ddc8}
.ap-note{margin:10px 0 0;font-size:13px;color:#5d6b7a;min-height:0}
.ap-form{display:grid;gap:12px;margin-top:18px;text-align:left}
.ap-form[hidden]{display:none}
.ap-form input{width:100%;font:inherit;font-size:16px;padding:15px 20px;border-radius:999px;border:1px solid #e6ddc8;background:#fff;color:#16304a;transition:border-color .2s,box-shadow .2s}
.ap-form input:focus{outline:none;border-color:var(--ap-accent);box-shadow:0 0 0 4px rgba(17,153,142,.15)}
.ap-form input[aria-invalid="true"]{border-color:#c0306a;background:#fdf1f6}
.ap-pw{position:relative}
.ap-pw input{padding-right:78px}
.ap-peek{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--ap-accent);font-weight:600;font-size:14px;padding:8px 12px;border-radius:999px;cursor:pointer}
.ap-err{margin:0;color:#c0306a;font-size:14px;min-height:1.2em;text-align:center}
.ap-go{min-height:54px;border:0;border-radius:999px;background:var(--ap-dark);color:#fff;font:700 13px/1 inherit;font-family:inherit;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.ap-go:hover{background:var(--ap-accent)}
.ap-go[disabled]{opacity:.7;cursor:progress}
.ap-alt{margin:0;text-align:center;font-size:14px}
.ap-alt a,.ap-switch button{color:var(--ap-accent);font-weight:600}
.ap-switch{margin:18px 0 0;font-size:15px;color:#3f4f60}
.ap-switch button{border:0;background:none;font:inherit;font-weight:700;cursor:pointer;padding:6px 4px;text-decoration:underline;text-underline-offset:3px}
.ap .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:480px){.ap{padding:36px 20px 24px;border-radius:24px}}
@media (prefers-reduced-motion:reduce){.ap[open]{animation:none}}