/* Nelvio SEO article styles — paired with style.css for nav/footer */
.seo-main{background:#fff;color:#0a0a0b;padding:clamp(90px,12vw,140px) clamp(18px,5vw,40px) 0}
.seo-wrap{max-width:760px;margin:0 auto}
.seo-crumb{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:#9a9298;margin-bottom:1.4rem}
.seo-crumb a{color:#FF0303;text-decoration:none}
.seo-wrap h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.1rem,5vw,3.3rem);line-height:1.05;letter-spacing:-1.2px;margin:0 0 1.1rem;color:#0a0a0b}
.seo-lead{font-size:1.22rem;line-height:1.6;color:#2c2830;margin:0 0 2.6rem;font-weight:400}
.seo-body h2{font-family:'Fraunces',serif;font-weight:800;font-size:clamp(1.5rem,3.3vw,2rem);letter-spacing:-.5px;margin:2.8rem 0 .9rem;color:#0a0a0b}
.seo-body h3{font-family:'Inter',sans-serif;font-weight:800;font-size:1.18rem;margin:1.8rem 0 .6rem;color:#0a0a0b}
.seo-body p{font-size:1.04rem;line-height:1.72;color:#26222a;margin:0 0 1.1rem}
.seo-body ul,.seo-body ol{font-size:1.04rem;line-height:1.7;color:#26222a;margin:0 0 1.2rem;padding-left:1.3rem}
.seo-body li{margin-bottom:.5rem}
.seo-body a{color:#FF0303;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.seo-body strong{font-weight:700;color:#0a0a0b}
.seo-body code{font-family:'JetBrains Mono',monospace;font-size:.86em;background:#f4f1f2;border:1px solid #e8e4e6;border-radius:4px;padding:.05em .35em}
.seo-take{border-left:3px solid #FF0303;background:#faf7f8;padding:.8rem 1.1rem;border-radius:0 8px 8px 0;font-size:.96rem;color:#3a343c;margin:1.2rem 0 2.4rem}
.seo-take b{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:2px;text-transform:uppercase;color:#FF0303;display:block;margin-bottom:.3rem}
.seo-faq{margin:3rem 0 1rem}
.seo-faq h2{margin-bottom:1rem}
.seo-faq details{border:1px solid #e8e4e6;border-radius:10px;padding:.2rem 1.2rem;margin-bottom:.7rem}
.seo-faq summary{font-family:'Inter',sans-serif;font-weight:700;font-size:1.04rem;cursor:pointer;padding:1rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;color:#0a0a0b}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{content:'+';color:#FF0303;font-weight:800}
.seo-faq details[open] summary::after{content:'–'}
.seo-faq details p{font-size:1rem;line-height:1.65;color:#3a343c;margin:0 0 1rem}
.seo-related{border:1px solid #e8e4e6;border-radius:14px;padding:1.6rem 1.8rem;margin:2.6rem 0}
.seo-related .lbl{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:#FF0303;margin-bottom:.8rem}
.seo-related ul{list-style:none;padding:0;margin:0}
.seo-related li{margin-bottom:.55rem}
.seo-related a{color:#0a0a0b;text-decoration:none;font-weight:600;border-bottom:1px solid #FF0303;padding-bottom:1px}
.seo-cta{background:#0a0a0b;color:#fff;border-radius:18px;padding:clamp(2rem,5vw,3rem);margin:3rem 0 0;position:relative;overflow:hidden}
.seo-cta::after{content:'';position:absolute;width:300px;height:300px;right:-90px;bottom:-110px;background:radial-gradient(circle,rgba(255,3,3,.5),transparent 62%);filter:blur(16px)}
.seo-cta h2{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(1.6rem,4vw,2.3rem);letter-spacing:-.5px;margin:0 0 .7rem;position:relative;color:#fff}
.seo-cta h2 em{color:#FF0303;font-style:italic}
.seo-cta p{position:relative;color:rgba(255,255,255,.74);font-size:1.05rem;line-height:1.6;margin:0 0 1.4rem;max-width:52ch}
.seo-cta a{position:relative;display:inline-block;background:#FF0303;color:#fff;font-weight:700;text-decoration:none;padding:.9rem 1.6rem;border-radius:40px}
.seo-foot-space{height:5rem}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-top:1.5rem}
.hub-card{border:1px solid #e8e4e6;border-radius:12px;padding:1.1rem 1.3rem}
.hub-card a{color:#0a0a0b;text-decoration:none;font-weight:700;font-size:1.02rem}
.hub-card .kw{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:1.5px;text-transform:uppercase;color:#9a9298;margin-top:.3rem;display:block}
.hub-sec{font-family:'Fraunces',serif;font-weight:900;font-size:1.6rem;margin:2.4rem 0 .2rem}
/* ---- Mobile/tablet hardening: bigger touch targets, zero visual change on desktop ---- */
@media (max-width:1024px){
  /* whole hub card becomes the tap target, not just the link text */
  .hub-card{position:relative}
  .hub-card a::after{content:'';position:absolute;inset:0}
  /* related-guide links: expand hit area without moving the red underline off the text */
  .seo-related li{margin-bottom:.95rem}
  .seo-related a{position:relative;display:inline-block}
  .seo-related a::after{content:'';position:absolute;left:-.3rem;right:-.3rem;top:-.5rem;bottom:-.5rem}
  /* breadcrumb links: invisible enlarged touch area */
  .seo-crumb a{position:relative;display:inline-block}
  .seo-crumb a::after{content:'';position:absolute;left:-.4rem;right:-.4rem;top:-.7rem;bottom:-.7rem}
}

/* ═══ wow: work · guide-template polish (v4) ═══
   Hover states + one-shot reveals only; nothing ambient, nothing looping.
   Reveals gated to >=769px so the <=768 force-visible net stays intact. */

/* breadcrumb: site-consistent underline draw on hover.
   ::before is used because the <=1024 tap-target block above owns ::after. */
.seo-crumb a{position:relative;display:inline-block}
.seo-crumb a::before{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:#FF0303;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease,cubic-bezier(.65,.05,0,1));pointer-events:none}
.seo-crumb a:hover::before{transform:scaleX(1)}

/* hub cards: hover lift + red keyword tick (CSS-drawn, no pseudo text) */
.hub-card{transition:transform .4s var(--ease,cubic-bezier(.65,.05,0,1))}
.hub-card:hover{transform:translateY(-4px)}
.hub-card .kw::after{content:'';display:inline-block;width:.52em;height:.28em;margin-left:.55em;border-left:2px solid #FF0303;border-bottom:2px solid #FF0303;vertical-align:.08em;opacity:0;transform:rotate(-45deg) scale(.5);transition:opacity .3s ease,transform .3s var(--ease,cubic-bezier(.65,.05,0,1))}
.hub-card:hover .kw{color:#FF0303}
.hub-card:hover .kw::after{opacity:1;transform:rotate(-45deg) scale(1)}

/* related-guide links: arrow slides in on hover.
   >=1025px only — below that the tap-target ::after owns the pseudo. */
@media (min-width:1025px){
  .seo-related a{position:relative;display:inline-block;transition:transform .3s var(--ease,cubic-bezier(.65,.05,0,1))}
  .seo-related a::after{content:'\2192';position:absolute;right:-1.2em;top:-.08em;color:#FF0303;opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .3s var(--ease,cubic-bezier(.65,.05,0,1));pointer-events:none}
  .seo-related a:hover{transform:translateX(4px)}
  .seo-related a:hover::after{opacity:1;transform:none}
}

/* FAQ: smooth open/close where the engine supports it (::details-content +
   interpolate-size). details/summary semantics untouched; engines without
   support keep the instant toggle. */
.seo-faq details{interpolate-size:allow-keywords}
.seo-faq details::details-content{opacity:0;block-size:0;overflow-y:clip;transition:content-visibility .38s allow-discrete,opacity .3s ease,block-size .38s var(--ease,cubic-bezier(.65,.05,0,1))}
.seo-faq details[open]::details-content{opacity:1;block-size:auto}

/* CTA: the corner glow swells on hover only (never ambient) */
.seo-cta::after{opacity:.85;transition:transform .9s var(--ease,cubic-bezier(.65,.05,0,1)),opacity .9s ease}
.seo-cta:hover::after{opacity:1;transform:scale(1.16)}

/* one-shot reveals (hub cards stagger in; take blocks slide from their rule) */
@media (min-width:769px) and (prefers-reduced-motion:no-preference){
  .hub-grid .hub-card.fade-up.visible{animation:hubIn .7s var(--ease,cubic-bezier(.65,.05,0,1)) backwards}
  .hub-grid .hub-card.fade-up.visible:nth-child(2){animation-delay:.08s}
  .hub-grid .hub-card.fade-up.visible:nth-child(3){animation-delay:.16s}
  .hub-grid .hub-card.fade-up.visible:nth-child(4){animation-delay:.24s}
  .hub-grid .hub-card.fade-up.visible:nth-child(5){animation-delay:.32s}
  .seo-take.fade-up{transform:translateX(-28px)}
  .seo-take.fade-up.visible{transform:none}
}
@keyframes hubIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ── wcag text tokens (audit) ── */
.seo-body a,.seo-crumb a,.seo-take b{color:#e00000}
.seo-crumb,.hub-card .kw{color:#757077}
.seo-cta a{background:#d40000}