@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');
/* Coping Cat Parents: shared modern layer (load after each page's own styles) */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* announcement bar */
.ann{background:#0D375B;color:#fff;font-size:13.5px;position:relative;z-index:21}
.ann .wrap{display:flex;align-items:center;justify-content:center;gap:12px;min-height:40px;padding-block:6px;text-align:center}
.ann a{color:#ECC301;font-weight:600;white-space:nowrap}
.ann .tag{background:#53A535;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.ann .x{background:none;border:0;color:#B9CCE0;font-size:20px;line-height:1;cursor:pointer;position:absolute;right:12px;top:50%;transform:translateY(-50%);padding:4px 8px}
.ann .x:hover{color:#fff}

/* glass header */
.ccp-h{background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);transition:box-shadow .25s,min-height .25s}
.ccp-h.scrolled{box-shadow:0 8px 24px -14px rgba(13,55,91,.55)}
.ccp-nav .top a{position:relative;transition:color .15s}
.ccp-nav .top a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:#53A535;transition:right .2s}
.ccp-nav .top a:hover{color:#12446F;text-decoration:none}
.ccp-nav .top a:hover::after,.ccp-nav .top a.cur::after{right:0}
.ccp-nav .btns a{border-radius:6px}

/* buttons and cards */
.btn,.a-learn,.a-buy,.pinfo .a-learn{border-radius:8px;transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover,.a-learn:hover,.a-buy:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(0,0,0,.45)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #ECC301;outline-offset:2px}
.cond,.worry,.kidcard,.post,.res,.lk,.path,.tool,.prod{transition:transform .2s,box-shadow .2s}
.cond:hover,.kidcard:hover,.post:hover,.res:hover,.lk:hover,.path:hover,.tool:hover{transform:translateY(-4px);box-shadow:0 18px 32px -20px rgba(13,55,91,.55)}
.cond img,.worry img,.kidcard img,.post .im img,.tool img{transition:transform .5s}
.cond:hover img,.kidcard:hover img,.post:hover .im img,.tool:hover img{transform:scale(1.05)}
.cond,.kidcard,.post .im,.tool{overflow:hidden}
.cond,.res,.post,.lk,.path,.tool,.inst,.inst-card,.card{border-radius:10px}
.hx-img,.vid,.fig img,.mosaic img{border-radius:12px}

/* reveal on scroll (content stays readable if JS is off) */
.js .rv{opacity:.001;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* video play overlay */
.vid{position:relative}
.vid .play{position:absolute;left:50%;top:calc(50% - 16px);transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:0;background:rgba(255,255,255,.95);box-shadow:0 10px 30px -8px rgba(0,0,0,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.vid .play::before{content:"";border-left:22px solid #12446F;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.vid .play::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:ring 2s ease-out infinite}
.vid .play:hover{transform:translate(-50%,-50%) scale(1.08)}
.vid.playing .play{display:none}
.vid .dur{position:absolute;right:12px;top:12px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;pointer-events:none}
.vid.playing .dur{display:none}
@keyframes ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
@media (prefers-reduced-motion:reduce){.vid .play::after{animation:none}}

/* back to top */
.totop{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:44px;height:44px;border-radius:50%;border:0;background:#12446F;color:#fff;font-size:20px;cursor:pointer;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s,transform .2s;z-index:30}
.totop.on{opacity:1;pointer-events:auto;transform:none}

/* sticky help bar (parent pages) */
.helpbar{position:fixed;left:18px;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateY(140%);z-index:29;background:#fff;border-radius:999px;box-shadow:0 16px 40px -14px rgba(13,55,91,.6);display:flex;align-items:center;gap:12px;padding:8px 8px 8px 20px;max-width:calc(100% - 32px);transition:transform .35s ease}
.helpbar.on{transform:none}
.helpbar span{font-size:14px;color:#333}
.helpbar a.go{background:#53A535;color:#fff;font-weight:600;font-size:14px;padding:9px 16px;border-radius:999px;white-space:nowrap}
.helpbar a.go:hover{text-decoration:none;filter:brightness(.95)}
.helpbar .x{background:none;border:0;font-size:18px;color:#888;cursor:pointer;padding:4px 8px}
@media (max-width:560px){.helpbar span{font-size:12.5px}.helpbar{border-radius:16px}}

@media (max-width:640px){.ann .long{display:none}.ann .wrap{justify-content:flex-start;padding-right:40px;font-size:12.5px}}
.ann .short{display:none}@media (max-width:640px){.ann .short{display:inline}}

/* compact header on phones */
@media (max-width:640px){
 .ccp-h{position:relative}
 .ccp-h .wrap{min-height:0;gap:10px;padding-block:10px}
 .logo img{height:34px;width:auto;display:block}.logo .txt{font-size:22px}
 .ccp-nav{width:100%;gap:8px}
 .ccp-nav .top{flex-wrap:nowrap;overflow-x:auto;gap:16px;width:100%;font-size:14px;padding-bottom:4px}
 .ccp-nav .top a{white-space:nowrap;font-size:14px}
 .ccp-nav .btns{width:100%}.ccp-nav .btns a{flex:1;text-align:center;padding:8px 4px}
 .helpbar{left:12px;right:12px;max-width:none;justify-content:space-between}
}

/* one-line header menu on desktop */
@media (min-width:1000px){
 .ccp-nav{flex-direction:row;align-items:center;gap:26px}
 .ccp-nav .top{flex-wrap:nowrap;gap:22px}
 .ccp-nav .top a{white-space:nowrap}
 .ccp-nav .btns a{white-space:nowrap;border-radius:999px;padding:8px 16px}
 .ccp-h .wrap{flex-wrap:nowrap;min-height:76px}
}

/* Equipped & Empowered newsletter (matches the OCD & Anxiety Institute sign-up) */
.ee{background:#53A535;color:#fff;padding:60px 0;font-family:'Work Sans','Open Sans',Helvetica,sans-serif}
.ee .in{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:56px;align-items:start}
.ee .l{display:flex;flex-direction:column;gap:16px}
.ee .hd{display:flex;align-items:center;gap:14px}
.ee .hd svg{width:48px;height:48px;flex:none}
.ee .hd span{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#fff}
.ee h2{font-family:inherit;font-weight:500;font-size:clamp(20px,2.8vw,30px);letter-spacing:4px;text-transform:uppercase;line-height:1.1;margin:0;color:#fff;text-align:left}
.ee .sub{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#ECC301;font-weight:600}
.ee .lead{font-size:19px;font-weight:600;letter-spacing:-.2px;max-width:440px}
.ee .l p.d{font-size:15.5px;color:rgba(255,255,255,.88);max-width:440px}
.ee .card{background:#fff;color:#000;border-radius:22px;padding:28px;box-shadow:0 20px 40px -24px rgba(0,0,0,.45)}
.ee form{display:flex;flex-direction:column;gap:18px}
.ee .opt{font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:#6E6E6E}
.ee .roles{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.ee .roles label{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.ee .roles input{accent-color:#12446F}
.ee .row{display:flex;gap:10px;flex-wrap:wrap;padding-top:16px;border-top:1px solid #E6E6E6}
.ee input[type=email]{flex:1 1 150px;min-width:150px;font:inherit;font-size:15px;font-weight:500;background:#F7F7F7;border:1px solid #DCDCDC;border-radius:40px;padding:14px 20px;outline:none}
.ee input[type=email]:focus{border-color:#12446F}
.ee button[type=submit]{background:#12446F;color:#fff;font:inherit;font-weight:700;font-size:12px;letter-spacing:1.3px;text-transform:uppercase;padding:14px 26px;border:none;border-radius:40px;cursor:pointer;transition:background .2s}
.ee button[type=submit]:hover{background:#0D375B}
.ee .fine{font-size:12px;color:#6E6E6E}
.ee .msg{font-size:14px;border-radius:6px;padding:12px 16px;display:none}
.ee .msg.ok{display:block;color:#0b3d24;background:#e7faf0;border:1px solid #13ce66}
.ee .msg.err{display:block;color:#661d1d;background:#ffeded;border:1px solid #ff4949}
img[src*="separation-teen"]{object-position:center 12%!important}

/* animated anxiety cycles on guide pages */
.cycle.cy-anim{display:block;margin:10px auto 22px;width:100%;max-width:600px;height:auto}
.cy-lead{font-weight:600;color:#12446F;margin-top:18px}
.cy-anim .cy-n{opacity:0;transform:scale(.85);transform-box:fill-box;transform-origin:center;transition:opacity .45s ease,transform .45s cubic-bezier(.3,1.4,.6,1)}
.cy-anim .cy-n.on{opacity:1;transform:none}
.cy-anim .cy-n.pulse rect{animation:cyPulse .9s ease}
.cy-anim .cy-a{opacity:0}
.cy-anim .cy-a.on{opacity:1;transition:stroke-dashoffset .6s ease}
.cy-anim .cy-mid{opacity:0;transition:opacity .6s ease}.cy-anim .cy-mid.on{opacity:1}
@keyframes cyPulse{0%{filter:none}40%{filter:brightness(1.18) drop-shadow(0 0 6px rgba(18,68,111,.45))}100%{filter:none}}
.cy-anim.static .cy-n,.cy-anim.static .cy-a,.cy-anim.static .cy-mid{opacity:1;transform:none}

/* Finding help + Books: landing-page card style */
.art .inst{border-radius:24px;box-shadow:0 24px 48px -30px rgba(18,68,111,.8)}
.art .inst .btn{border-radius:999px}
.dirs{gap:14px}
.dir{border:0;border-radius:22px;padding:18px 18px 16px;box-shadow:0 18px 40px -28px rgba(18,68,111,.6);border-top:6px solid #3FA6F2;position:relative}
.dir:nth-child(6n+2){border-top-color:#ECC301}.dir:nth-child(6n+3){border-top-color:#53A535}.dir:nth-child(6n+4){border-top-color:#12446F}.dir:nth-child(6n+5){border-top-color:#E0526A}.dir:nth-child(6n+6){border-top-color:#8E6CD1}
.dir .org{font-weight:600;color:#12446F;font-size:15px}
.dir .act{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#12446F}
.dir .act::after{content:"\2192";width:24px;height:24px;border-radius:50%;background:#12446F;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;transition:transform .2s}
.dir:hover .act::after{transform:translateX(3px)}
.refnet{border-radius:24px;padding:22px 26px;box-shadow:0 24px 48px -30px rgba(18,68,111,.8)}
.fallback{border-radius:22px;background:#E8F3FD;padding:20px 24px}
.urgent{border-radius:22px;border-left:0;background:#FDECEC;box-shadow:inset 6px 0 0 #E0526A;padding:18px 22px}
.bkcol h3{color:#12446F}
details.bk{border:0;border-radius:20px;box-shadow:0 14px 30px -24px rgba(18,68,111,.6);margin-bottom:12px;border-left:6px solid var(--bc,#53A535)}
details.bk summary{list-style:none;padding:16px 18px;gap:10px}
details.bk summary::-webkit-details-marker{display:none}
details.bk summary::after{content:"";width:26px;height:26px;border-radius:50%;background:#12446F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;flex:none;transition:transform .25s}
details.bk[open] summary::after{transform:rotate(180deg)}
details.bk summary em{margin-left:auto;background:var(--bc,#53A535)}
details.bk:nth-of-type(2){--bc:#3FA6F2}details.bk:nth-of-type(3){--bc:#ECC301}
details.bk:nth-of-type(3) summary em{color:#12446F}
details.bk ul{padding:0 18px 14px}

.refnet{grid-template-columns:minmax(0,300px) 1fr auto;padding:0 22px 0 0;overflow:hidden}
.refnet .map{grid-column:1;grid-row:1/4;width:100%;height:100%;min-height:130px;object-fit:cover;object-position:center 0%;display:block}
.refnet .k,.refnet b,.refnet span:not(.k):not(.go){grid-column:2}
.refnet .k{align-self:end}
.refnet span:not(.k):not(.go){align-self:start}
.refnet .go{grid-column:3}
@media (max-width:760px){.refnet{grid-template-columns:1fr;padding:0 0 18px}.refnet .map{grid-row:auto;height:150px}.refnet .k,.refnet b,.refnet span:not(.k):not(.go),.refnet .go{grid-column:1;margin-left:20px;margin-right:20px}.refnet .k{margin-top:14px}}

/* red flags: one box, one warning icon */
.flagbox{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid #E3EAF2;border-left:6px solid var(--c);border-radius:22px;padding:22px 24px;box-shadow:0 18px 40px -28px rgba(18,68,111,.6)}
.flagbox .ficon{flex:none;width:46px;height:46px;border-radius:50%;background:var(--c);color:#fff;font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center}
.flagbox > div{flex:1;min-width:0}
.flagbox > div > p:first-child{font-weight:600;color:#12446F;margin-top:6px}
.flagbox .flags{display:block;columns:2;column-gap:32px;margin:10px 0 0;padding:0;list-style:none}
.flagbox .flags li{break-inside:avoid;background:none;border:0;border-radius:0;box-shadow:none;padding:6px 0 6px 18px;margin:0;position:relative;font-size:15px;line-height:1.5}
.flagbox .flags li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--c);display:block}
@media (max-width:760px){.flagbox{flex-direction:column}.flagbox .flags{columns:1}}

/* one header size for every inner page (home page hero is separate) */
.hero,.p-hero,.s-hero,.g-hero,.bio-hero,.pr-hero,.wc-hero{padding:52px 0 48px!important;min-height:300px;display:flex;align-items:center}
.hero>.wrap,.p-hero>.wrap,.s-hero>.wrap,.g-hero>.wrap,.bio-hero>.wrap,.pr-hero>.wrap,.wc-hero>.wrap{width:100%}
.hero h1,.p-hero h1,.s-hero h1,.g-hero h1,.bio-hero h1,.pr-hero h1,.wc-hero h1{font-size:clamp(30px,4.4vw,42px)!important;line-height:1.12!important;margin-bottom:12px!important}
.hero .wrap>p,.p-hero .wrap>p,.s-hero .wrap>p,.pr-hero .wrap>p,.wc-hero .wrap>p,.g-hero .wrap p:not(.crumb){font-size:17px!important}
.g-hero img{max-height:190px!important;width:auto!important;max-width:260px;object-fit:cover}
.bio-hero img{max-height:220px!important;width:auto!important;object-fit:cover}
@media (max-width:760px){.hero,.p-hero,.s-hero,.g-hero,.bio-hero,.pr-hero,.wc-hero{min-height:0;padding:40px 0 36px!important}}
/* a taller shared minimum so pages with tabs or jump links still match */
@media (min-width:761px){.hero,.p-hero,.s-hero,.g-hero,.bio-hero,.pr-hero,.wc-hero{min-height:360px!important;padding:44px 0 40px!important;box-sizing:border-box}}
.hero p{margin-bottom:20px!important}
.p-hero .jump{margin-top:16px!important}