/* Page-type sheet for guides + 7 blog articles. */
body{line-height:1.65}
h1,h2,h3,.display{line-height:1.12}
.read{max-width:var(--read);margin:0 auto;padding:0 26px}

.bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(120% 70% at 50% -10%, #11314e 0%, var(--deep) 36%, var(--abyss) 80%)}
.rays{position:fixed;inset:0;top:-10%;height:70vh;z-index:-1;pointer-events:none;opacity:.4;
  background:linear-gradient(174deg, rgba(var(--cyan-bright-rgb),.10), transparent 42%),
   conic-gradient(from 180deg at 52% -8%, transparent 0deg, rgba(var(--cyan-bright-rgb),.07) 8deg, transparent 16deg, rgba(var(--cyan-bright-rgb),.05) 26deg, transparent 34deg, rgba(var(--cyan-bright-rgb),.08) 44deg, transparent 52deg);
  -webkit-mask:linear-gradient(to bottom, #000 0%, transparent 86%);mask:linear-gradient(to bottom, #000 0%, transparent 86%)}
.caustic{position:fixed;inset:0;top:-6%;height:86vh;z-index:-1;pointer-events:none;opacity:.55;background:radial-gradient(38% 30% at 16% 10%, rgba(var(--cyan-bright-rgb),.09), transparent 62%),radial-gradient(32% 26% at 86% 6%, rgba(var(--cyan-rgb),.07), transparent 60%),radial-gradient(40% 34% at 70% 22%, rgba(233,199,158,.045), transparent 66%);-webkit-mask:linear-gradient(#000,transparent 82%);mask:linear-gradient(#000,transparent 82%)}

.jellyv{position:relative;width:min(var(--js,200px),60vw);margin:0 auto;display:grid;place-items:center}

.crumb{font-size:.8rem;color:var(--ink-faint);margin:34px 0 0}
.crumb a:hover{color:var(--cyan)}
.arthead{padding:8px 0 18px;text-align:center}
.arthead h1{font-size:clamp(2.2rem,5.2vw,3.5rem);margin:16px auto 0;max-width:20ch}
/* Two short-titled v2 articles (how-to-kegels, how-long-kegels) use a larger headline treatment
   than the 5-article majority above; ArticleLayout adds .arthead--lg for them via the largeHead
   frontmatter flag. Same specificity as the base rule, so this must stay after it. */
.arthead--lg h1{font-size:clamp(2.3rem,5.4vw,3.7rem);max-width:18ch}
.arthead .dek{color:var(--ink-dim);font-size:clamp(1.05rem,2.1vw,1.22rem);max-width:54ch;margin:20px auto 0}
.artmeta{margin-top:18px;font-size:.82rem;color:var(--ink-faint);display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.artmeta a{color:var(--cyan)}.artmeta a:hover{border-bottom:1px solid var(--cyan)}

.prose{padding:14px 0 10px}
.prose p{color:var(--ink-dim);font-size:1.1rem;margin-top:20px}
.prose h2{font-size:clamp(1.55rem,3.4vw,2.1rem);margin:46px 0 0}
.prose h2 + p{margin-top:16px}
.prose ul{margin:18px 0 0;padding-left:0;list-style:none;display:grid;gap:12px}
.prose li{display:flex;gap:12px;color:var(--ink-dim);font-size:1.06rem}
.prose li::before{content:"";flex:0 0 7px;height:7px;border-radius:50%;margin-top:11px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.prose a.inline{color:var(--cyan);border-bottom:1px solid rgba(var(--cyan-rgb),.4)}
.prose a.inline:hover{border-color:var(--cyan)}
.prose em{color:var(--ink);font-style:italic}

.signs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.signcard{padding:26px;border-radius:18px;border:1px solid var(--line);background:rgba(8,22,38,.4)}
.signcard h3{font-family:'Inter',sans-serif;font-weight:600;font-size:1.08rem;margin-bottom:16px}
.signcard ul{list-style:none;display:grid;gap:13px}
.signcard li{display:flex;gap:11px;color:var(--ink-dim);font-size:1rem;line-height:1.5}
.signcard li::before{flex:0 0 auto;font-weight:700;margin-top:1px}
.signcard--wrong li::before{content:"\2715";color:var(--ink-faint)}
.signcard--right li::before{content:"\2713";color:var(--cyan-bright)}
@media(max-width:680px){.signs{grid-template-columns:1fr}}

.timeline{margin-top:28px}
.tl{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line)}
.tl:last-child{border-bottom:1px solid var(--line)}
.tl__when{font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:1.15rem;color:var(--cyan-bright);line-height:1.3}
.tl__what{color:var(--ink-dim);font-size:1.05rem}
@media(max-width:600px){.tl{grid-template-columns:1fr;gap:6px}.tl__when{font-size:1.05rem}}

.callout{margin:34px 0 6px;padding:26px 28px;border-radius:18px;border:1px solid rgba(var(--cyan-rgb),.3);background:linear-gradient(135deg, rgba(var(--cyan-rgb),.10), rgba(8,22,38,.35));border-left:3px solid var(--cyan)}
.callout .eyebrow{color:var(--cyan-bright)}
.callout h3{font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:1.4rem;margin:10px 0 0}
.callout p{color:var(--ink-dim);font-size:1.05rem;margin-top:12px}
.callout a.inline{color:var(--cyan);border-bottom:1px solid rgba(var(--cyan-rgb),.4)}

.cta-band{margin:48px auto;max-width:var(--read);padding:38px 30px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(135deg, rgba(var(--cyan-rgb),.10), rgba(8,22,38,.45));text-align:center}
.cta-band h3{font-size:1.7rem;margin:0 auto;max-width:20ch}
.cta-band p{color:var(--ink-dim);margin:12px auto 22px;max-width:42ch}
.cta-band .row{display:flex;justify-content:center}
.ios-note{font-size:.76rem;color:var(--ink-faint);margin-top:14px}

.faq{margin-top:18px}
.q summary{list-style:none;display:flex;justify-content:space-between;gap:18px;font-size:1.08rem;color:var(--ink)}
.q p{color:var(--ink-dim);margin-top:14px;font-size:1.02rem}
.q a.inline{color:var(--cyan);border-bottom:1px solid rgba(var(--cyan-rgb),.4)}

.related{margin-top:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.rel{padding:20px 22px;border-radius:16px;border:1px solid var(--line);background:var(--card);transition:.22s}
.rel:hover{border-color:rgba(var(--cyan-rgb),.4);transform:translateY(-2px)}
.rel b{font-family:'Inter',sans-serif;font-weight:600;font-size:1rem;display:block}
.rel span{color:var(--ink-dim);font-size:.9rem;display:block;margin-top:4px}
@media(max-width:680px){.related{grid-template-columns:1fr}}

.srcline{margin-top:34px;font-size:.9rem;color:var(--ink-faint)}
.srcline a{color:var(--cyan)}.srcline a:hover{border-bottom:1px solid var(--cyan)}
.disclaimer{margin-top:16px;font-size:.82rem;color:var(--ink-faint);line-height:1.6}

.section{padding:56px 0;position:relative}
.section--tint{background:linear-gradient(180deg, transparent, rgba(8,22,38,.5) 12%, rgba(8,22,38,.5) 88%, transparent)}
.section h2.center{text-align:center;font-size:clamp(1.7rem,3.6vw,2.3rem)}

.footer{border-top:1px solid var(--line);padding:46px 0 60px;margin-top:30px}

@media(max-width:680px){.section{padding:44px 0}}

.steps{margin-top:26px}
.step{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:2.8rem;line-height:.9;color:var(--cyan-bright);opacity:.85}
.step__b h3{font-family:'Inter',sans-serif;font-weight:600;font-size:1.18rem;margin-bottom:8px}
.step__b p{color:var(--ink-dim);font-size:1.05rem;margin:0}
.step__b p + p{margin-top:10px}