/* ============================================================
   SEOST Authority Pillars — supplementary components
   Built on the seostdmc design tokens (navy/cyan, Archivo/Newsreader/Inter).
   Loaded AFTER home-replica/styles.css so :root tokens + .wrap/.btn/.nav/.foot exist.
   ============================================================ */

/* content is visible by default (authority pages shouldn't hide behind scroll JS) */
.pill .reveal{opacity:1!important;transform:none!important}

.pill{background:var(--bg);color:var(--white);font-family:var(--body)}
.pill .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.pill section{position:relative}

/* ---------- HERO ---------- */
.phero{position:relative;padding:clamp(130px,16vw,190px) 0 clamp(54px,7vw,92px);overflow:hidden;
  background:radial-gradient(120% 90% at 78% 8%,rgba(41,171,226,.22),transparent 60%),
             linear-gradient(180deg,#0a0c20 0%,var(--bg) 70%)}
.phero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.phero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:900px){.phero__grid{grid-template-columns:1fr;gap:34px}}
.pkick{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:var(--cyan-hi);
  background:rgba(41,171,226,.1);border:1px solid rgba(41,171,226,.32);border-radius:999px;padding:7px 14px;margin:0 0 20px}
.pkick::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.phero h1{font-family:var(--disp);font-weight:900;line-height:.98;letter-spacing:-.02em;margin:0;
  font-size:clamp(2.7rem,7vw,5rem)}
.phero h1 .cy{color:var(--cyan)}
.phero__sub{font-family:var(--serif);font-style:italic;color:var(--mute);font-size:clamp(1.12rem,2.1vw,1.5rem);line-height:1.4;margin:22px 0 0;max-width:40ch}
.phero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.pbyline{display:flex;align-items:center;gap:13px;margin-top:30px}
.pbyline img{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid var(--cyan)}
.pbyline b{display:block;font-weight:700;font-size:.98rem}
.pbyline span{display:block;color:var(--mute);font-size:.82rem}
.phero__card{background:linear-gradient(165deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:20px;padding:26px 26px 22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.phero__card h4{font-family:var(--disp);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;color:var(--cyan-hi);margin:0 0 16px}
.phero__card ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.phero__card li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:var(--white)}
.phero__card li svg{flex:0 0 20px;width:20px;height:20px;color:var(--cyan);margin-top:1px}
.phero__card li span{color:var(--mute)}

/* ---------- SECTION HEADER ---------- */
.sec{padding:clamp(56px,8vw,104px) 0}
.sec--alt{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.sec--line{border-top:1px solid var(--line)}
.sechead{max-width:720px;margin:0 0 clamp(34px,5vw,58px)}
.sechead--center{margin-inline:auto;text-align:center}
.eyebrow{font-family:var(--disp);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.74rem;color:var(--cyan);margin:0 0 14px}
.sechead h2{font-family:var(--disp);font-weight:900;letter-spacing:-.015em;line-height:1.03;font-size:clamp(1.9rem,4.4vw,3.1rem);margin:0}
.sechead h2 .dot{color:var(--cyan)}
.sechead p{font-family:var(--serif);color:var(--mute);font-size:clamp(1.05rem,1.8vw,1.28rem);line-height:1.5;margin:16px 0 0}

/* ---------- INTRO (2-col serif lede) ---------- */
.pintro__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
@media(max-width:820px){.pintro__grid{grid-template-columns:1fr;gap:20px}}
.pintro__lede{font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.34;color:var(--white);margin:0;font-style:italic}
.pintro__body{color:var(--mute);font-size:1.02rem;line-height:1.72}
.pintro__body p{margin:0 0 14px}
.pintro__body strong{color:var(--white)}

/* ---------- TOPIC CARD GRID (the pillars of SEO) ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tgrid{grid-template-columns:1fr}}
.tcard{display:flex;flex-direction:column;gap:12px;background:linear-gradient(165deg,var(--panel),#0d1026);border:1px solid var(--line);border-radius:16px;padding:24px 22px;
  text-decoration:none;color:inherit;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.tcard:hover{transform:translateY(-4px);border-color:rgba(41,171,226,.5);box-shadow:0 24px 44px -26px rgba(41,171,226,.4)}
.tcard__ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(41,171,226,.12);border:1px solid rgba(41,171,226,.3)}
.tcard__ic svg{width:24px;height:24px;color:var(--cyan);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tcard h3{font-family:var(--disp);font-weight:800;font-size:1.12rem;margin:2px 0 0}
.tcard p{color:var(--mute);font-size:.92rem;line-height:1.55;margin:0;flex:1}
.tcard__go{display:inline-flex;align-items:center;gap:7px;color:var(--cyan-hi);font-weight:600;font-size:.86rem;margin-top:4px}
.tcard:hover .tcard__go{color:#fff}

/* ---------- HOW-IT-WORKS (icon columns on panel) ---------- */
.works{background:linear-gradient(180deg,#0a0c20,var(--bg2));border-block:1px solid var(--line)}
.works__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px);counter-reset:w}
@media(max-width:860px){.works__grid{grid-template-columns:1fr;gap:26px}}
.wcol{position:relative;padding-top:12px}
.wcol__n{font-family:var(--anton);font-size:2.4rem;color:var(--navy);-webkit-text-stroke:1px var(--cyan);line-height:1}
.wcol h3{font-family:var(--disp);font-weight:800;font-size:1.3rem;margin:12px 0 8px}
.wcol p{color:var(--mute);line-height:1.65;font-size:.98rem;margin:0}

/* ---------- STAT STRIP ---------- */
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
@media(max-width:720px){.pstats{grid-template-columns:repeat(2,1fr);gap:26px}}
.pstat b{display:block;font-family:var(--anton);font-size:clamp(2.4rem,5vw,3.4rem);color:var(--cyan);line-height:1}
.pstat span{display:block;color:var(--mute);font-size:.9rem;margin-top:8px;letter-spacing:.02em}

/* ---------- GUIDE CARDS (cluster articles) ---------- */
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.ggrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ggrid{grid-template-columns:1fr}}
.gcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s var(--ease),border-color .25s}
.gcard:hover{transform:translateY(-4px);border-color:rgba(41,171,226,.5)}
.gcard__top{height:6px;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.gcard__in{padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.gchip{align-self:flex-start;font-family:var(--disp);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;color:var(--cyan-hi);background:rgba(41,171,226,.1);border:1px solid rgba(41,171,226,.26);border-radius:999px;padding:5px 11px}
.gcard h3{font-family:var(--disp);font-weight:800;font-size:1.12rem;line-height:1.2;margin:2px 0 0}
.gcard p{color:var(--mute);font-size:.92rem;line-height:1.55;margin:0;flex:1}
.gcard__foot{display:flex;align-items:center;justify-content:space-between;color:var(--cyan-hi);font-weight:600;font-size:.84rem;margin-top:4px}
.gcard__foot .rt{color:var(--mute);font-weight:500}

/* ---------- CTA BAND ---------- */
.ctaband{background:
  radial-gradient(90% 140% at 15% 20%,rgba(41,171,226,.26),transparent 55%),
  linear-gradient(120deg,var(--navy),#15163a);border-block:1px solid var(--line)}
.ctaband__in{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:820px){.ctaband__in{grid-template-columns:1fr;gap:24px}}
.ctaband h2{font-family:var(--disp);font-weight:900;font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.04;margin:0}
.ctaband p{font-family:var(--serif);color:#d8dcf3;font-size:1.12rem;line-height:1.5;margin:14px 0 0}
.ctaband__act{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ctaband__meta{color:#c7cbe6;font-size:.86rem}

/* ---------- QUOTE ---------- */
.pquote{text-align:center;max-width:900px;margin-inline:auto}
.pquote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.3vw,2.3rem);line-height:1.34;margin:0;color:var(--white)}
.pquote blockquote .u{background:linear-gradient(transparent 62%,rgba(41,171,226,.35) 0);padding:0 2px}
.pquote__by{display:inline-flex;align-items:center;gap:12px;margin-top:26px}
.pquote__by img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--cyan)}
.pquote__by b{font-weight:700}.pquote__by span{color:var(--mute);font-size:.86rem;display:block}

/* ---------- FAQ ---------- */
.pfaq__grid{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(24px,4vw,56px)}
@media(max-width:820px){.pfaq__grid{grid-template-columns:1fr;gap:22px}}
.pfaq__item{border-top:1px solid var(--line);padding:20px 0}
.pfaq__item:last-child{border-bottom:1px solid var(--line)}
.pfaq__q{font-family:var(--disp);font-weight:700;font-size:1.12rem;margin:0 0 9px;display:flex;gap:10px;align-items:flex-start}
.pfaq__q::before{content:"Q";font-family:var(--anton);color:var(--cyan);font-size:1rem;line-height:1.3}
.pfaq__a{color:var(--mute);line-height:1.68;margin:0}

/* ---------- AUTHOR BOX ---------- */
.abox{display:flex;gap:20px;align-items:center;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:18px;padding:24px 26px}
@media(max-width:620px){.abox{flex-direction:column;text-align:center}}
.abox img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--cyan);flex:0 0 auto}
.abox__k{font-family:var(--disp);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.68rem;color:var(--cyan-hi);margin:0 0 5px}
.abox h3{font-family:var(--disp);font-weight:800;font-size:1.3rem;margin:0 0 7px}
.abox p{color:var(--mute);line-height:1.6;margin:0;font-size:.96rem}
.abox .upd{display:block;margin-top:9px;color:var(--gray);font-size:.8rem}

/* ---------- authority NAV tweaks (reuse .nav) ---------- */
.nav__links a{font-size:.93rem}
.breadcrumb{color:var(--mute);font-size:.8rem;margin:0 0 18px;display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:var(--cyan-hi);text-decoration:none}

/* ============================================================
   SITEWIDE RULES (operator design standards)
   ============================================================ */

/* 1 — nav goes solid once scrolling starts (sitewide) */
.nav--scrolled{background:rgba(8,10,28,.95)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 12px 34px -20px rgba(0,0,0,.85)}

/* 2 — HERO: centered, with a per-page background image + overlay */
.phero{padding:clamp(140px,16vw,196px) 0 clamp(54px,7vw,92px)}
.phero__bg{position:absolute;inset:0;z-index:0}
.phero__bg img{width:100%;height:100%;object-fit:cover}
.phero__bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 0%,rgba(41,171,226,.22),transparent 55%),
  linear-gradient(180deg,rgba(8,10,28,.82),rgba(8,10,28,.92) 70%,var(--bg))}
.phero .wrap{position:relative;z-index:1;text-align:center}
.phero__in{max-width:860px;margin-inline:auto}
.phero .breadcrumb{justify-content:center}
.phero .pkick{margin-inline:auto}
.phero h1{margin-inline:auto;max-width:16ch}
.phero__sub{margin-inline:auto}
.phero__cta{justify-content:center}
.pbyline{justify-content:center}
/* centered "what this covers" check row (replaces side card) */
.checkrow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:30px auto 0;max-width:820px}
.checkrow span{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:.86rem;color:#dfe2f3}
.checkrow span svg{width:16px;height:16px;color:var(--cyan);flex:0 0 16px}

/* 3 — eyebrows + section headers centered sitewide */
.sechead{margin-inline:auto;text-align:center}
.eyebrow{text-align:center}

/* 4 — cards: centered content sitewide */
.tcard,.bcard{align-items:center;text-align:center}
.tcard__ic,.bcard__ic{margin-inline:auto}
.tcard__go{justify-content:center}
.gcard__in{text-align:center;align-items:center}
.gchip{align-self:center}
.gcard__foot{justify-content:center;gap:16px}

/* 5 — EVEN GRIDS: never a lonely last-row item */
.tgrid{grid-template-columns:repeat(3,1fr)} /* fed exactly 6 or 9 cards */
.audience{display:grid!important;grid-template-columns:repeat(3,1fr);gap:12px;max-width:860px;margin-inline:auto}
.audience span{justify-content:center;text-align:center;display:flex;align-items:center}
@media(max-width:700px){.audience{grid-template-columns:1fr 1fr}}

/* 6 — SILO WATERMARK (replaces hero photos; one per topic) */
.phero{overflow:hidden}
.phero__bg{display:none} /* photos retired on silos */
.phero__wm{position:absolute;top:clamp(74px,11vw,150px);right:clamp(12px,5vw,90px);z-index:0;margin:0;
  font-family:var(--anton);font-weight:400;line-height:.78;letter-spacing:-.03em;
  font-size:clamp(130px,22vw,360px);white-space:nowrap;pointer-events:none;user-select:none;
  color:rgba(244,245,251,.05);-webkit-text-stroke:2px rgba(41,171,226,.12);
  animation:wmfloat 10s var(--ease) infinite}
@keyframes wmfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@media(prefers-reduced-motion:reduce){.phero__wm{animation:none}}

/* 7 — bulletproof card centering */
.tcard,.bcard{display:flex;flex-direction:column;align-items:center;text-align:center}
.tcard__ic,.bcard__ic{margin:0 auto 14px}

/* 8 — world-class micro-motion on icons + cards (sitewide) */
.tcard__ic,.bcard__ic,.tcard__ic svg,.bcard__ic svg{transition:transform .32s var(--ease),box-shadow .32s,background .32s}
.tcard:hover .tcard__ic,.bcard:hover .bcard__ic{transform:translateY(-3px) scale(1.08);background:rgba(41,171,226,.22);box-shadow:0 12px 26px -8px rgba(41,171,226,.55)}
.tcard:hover .tcard__ic svg,.bcard:hover .bcard__ic svg{transform:scale(1.08) rotate(-3deg)}
.tcard:hover .tcard__go{gap:11px}
.btn.lg{transition:transform .25s var(--ease),box-shadow .25s,filter .25s}
.btn--accent.lg:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(41,171,226,.6)}