/* ============================================================
   SEO BLOGS PAGE — AI chat demo · proof stories
   ============================================================ */

/* hero stacks vertically (same fix as g-hero) */
.s-hero{flex-direction:column;}
.s-hero .hero2-inner{width:100%;}

/* ---------- AI chat demo ---------- */
.ai-demo{max-width:620px;margin:3rem auto 0;}
.ai-msg{display:flex;margin-bottom:.9rem;}
.ai-msg.ai-user{justify-content:flex-end;}
.ai-msg.ai-bot{justify-content:flex-start;gap:.7rem;align-items:flex-start;}
.ai-bubble{
  display:inline-block;max-width:85%;text-align:left;
  padding:.95rem 1.25rem;border-radius:20px;
  font-size:1rem;font-weight:600;line-height:1.5;
}
.ai-user .ai-bubble{
  background:linear-gradient(135deg,#1b8df6,#0a6fd4);color:#fff;
  border-bottom-right-radius:6px;
  box-shadow:0 10px 28px rgba(27,141,246,.3);
  animation:aiIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
.ai-bot .ai-bubble{
  background:rgba(21,39,65,.85);color:#cfe3f7;
  border:1px solid rgba(127,166,204,.25);
  border-bottom-left-radius:6px;
  animation:aiIn .5s cubic-bezier(.34,1.56,.64,1) .6s both;
}
.ai-av{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(27,141,246,.3), rgba(0,68,255,.2));
  border:1px solid rgba(111,193,255,.5);color:#6fc1ff;font-size:1.1rem;
  animation:aiIn .5s cubic-bezier(.34,1.56,.64,1) .5s both;
}
.ai-hl{
  color:#6fc1ff;
  background:rgba(27,141,246,.14);
  border-radius:6px;padding:.05em .3em;
}
@keyframes aiIn{
  0%{opacity:0;transform:translateY(12px) scale(.92);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
.ai-caption{
  margin-top:1rem;font-size:.92rem;font-weight:700;color:#9db8d6;text-align:center;
}

/* ---------- proof stories ---------- */
.proof-stories{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.4rem;
  max-width:1000px;margin:2.6rem auto 0;
}
.ps-card{
  border-radius:20px;padding:1.7rem;text-align:left;
  background:linear-gradient(170deg, rgba(21,39,65,.6), rgba(13,25,44,.85));
  border:1px solid rgba(127,166,204,.2);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ps-card:hover{
  transform:translateY(-4px);
  border-color:rgba(27,141,246,.5);
  box-shadow:0 20px 50px rgba(0,0,0,.4), 0 0 26px rgba(27,141,246,.12);
}
.ps-stat{
  font-size:2.4rem;font-weight:900;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(135deg,#6fc1ff,#1b8df6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:.6rem;min-height:2.5rem;display:flex;align-items:center;
}
.ps-stat i{
  font-size:2rem;
  background:linear-gradient(135deg,#6fc1ff,#1b8df6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ps-where{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#7fa6cc;margin-bottom:.7rem;
}
.ps-where i{color:var(--accent);}
.ps-card p{margin:0;font-size:.95rem;color:#9db8d6;line-height:1.6;}
.ps-card p b{color:#eef4fb;}
.ps-card.ps-big{
  background:linear-gradient(170deg, rgba(27,141,246,.14), rgba(13,25,44,.9));
  border-color:rgba(27,141,246,.4);
}

@media(max-width:900px){
  .proof-stories{grid-template-columns:1fr;max-width:460px;}
}
@media(prefers-reduced-motion:reduce){
  .ai-bubble,.ai-av{animation:none;opacity:1;}
}

/* ============================================================
   v2 REDESIGN (20260702) — live typing chat · scrape pipeline ·
   photocopy slop stack · specimen duel
   ============================================================ */

/* ---------- hero chat: typing state ---------- */
.ai-caret{
  display:inline-block;width:2px;height:1.05em;background:#fff;
  vertical-align:-.15em;margin-left:2px;
  animation:aiBlink 1s steps(1) infinite;
}
.ai-bot .ai-caret{background:#6fc1ff;}
@keyframes aiBlink{50%{opacity:0;}}
.ai-typing{display:inline-flex;gap:5px;align-items:center;padding:.3em 0;}
.ai-typing i{
  width:7px;height:7px;border-radius:50%;background:#7fa6cc;display:block;
  animation:aiDot 1.2s ease-in-out infinite;
}
.ai-typing i:nth-child(2){animation-delay:.18s;}
.ai-typing i:nth-child(3){animation-delay:.36s;}
@keyframes aiDot{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-4px);opacity:1;}}
.ai-demo.live .ai-bubble{animation:none;opacity:1;}
.ai-demo.live .ai-av{animation:none;opacity:1;}
.ai-user .ai-bubble{min-height:1.5em;}

/* ---------- scrape pipeline: blogs feed the AI core ---------- */
.scrape-stage{
  max-width:860px;margin:2.6rem auto 0;position:relative;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.4rem;
}
.scrape-lane{
  position:relative;overflow:hidden;height:150px;border-radius:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 100%);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 100%);
}
.scrape-belt{
  position:absolute;top:50%;left:0;display:flex;gap:.9rem;width:max-content;
  transform:translateY(-50%);
  animation:scrapeFlow 14s linear infinite;
}
@keyframes scrapeFlow{to{transform:translate(-50%,-50%);}}
.doc-chip{
  flex:0 0 auto;width:150px;border-radius:12px;padding:.75rem .85rem;
  background:rgba(21,39,65,.85);border:1px solid rgba(127,166,204,.25);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.doc-chip i{color:#6fc1ff;font-size:1rem;}
.doc-chip b{display:block;font-size:.72rem;color:#cfe3f7;line-height:1.3;margin-top:.3rem;}
.doc-chip span{display:block;font-size:.6rem;color:#7fa6cc;margin-top:.25rem;font-family:ui-monospace,Menlo,monospace;}
.ai-core{
  position:relative;width:110px;height:110px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.15rem;
  background:radial-gradient(circle at 35% 30%, rgba(111,193,255,.35), rgba(27,141,246,.12) 60%, rgba(11,20,36,.9));
  border:1px solid rgba(111,193,255,.5);
  box-shadow:0 0 44px rgba(27,141,246,.35), inset 0 0 26px rgba(27,141,246,.2);
  animation:corePulse 3.2s ease-in-out infinite;
}
.ai-core i{font-size:1.7rem;color:#bfe1ff;}
.ai-core small{font-size:.58rem;font-weight:800;letter-spacing:.14em;color:#9dc8f2;text-transform:uppercase;}
@keyframes corePulse{50%{box-shadow:0 0 64px rgba(27,141,246,.55), inset 0 0 34px rgba(27,141,246,.3);}}
.scrape-out{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;}
.scrape-out .ai-bubble{animation:none;font-size:.9rem;}
.scrape-out .so-cap{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7fa6cc;}
@media(max-width:820px){
  .scrape-stage{grid-template-columns:1fr;justify-items:center;gap:1rem;}
  .scrape-lane{width:100%;height:120px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
  .scrape-out{align-items:center;text-align:center;}
}

/* ---------- photocopy slop stack ---------- */
.slop-stack{max-width:640px;margin:2.4rem auto 0;display:flex;flex-direction:column;gap:.9rem;}
.slop-copy{
  position:relative;border-radius:14px;padding:1.1rem 1.3rem;
  background:rgba(21,39,65,.55);border:1px solid rgba(127,166,204,.2);
  border-left:3px solid rgba(127,193,255,.5);
}
.slop-copy .gen{
  display:block;margin-bottom:.5rem;
  font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#7fc1ff;line-height:1.4;
}
.slop-copy p{margin:0;font-size:.95rem;line-height:1.55;color:#c4d6ee;}
/* the copies degrade through blur + speckle, not crooked rotation (Jeff: shape
   was "slightly off"). The label fades from accent to gray each pass. */
.slop-copy.g2{border-left-color:rgba(143,163,189,.4);}
.slop-copy.g2 .gen{color:#8fa3bd;}
.slop-copy.g2 p{filter:blur(.6px);opacity:.78;}
.slop-copy.g3{border-left-color:rgba(143,163,189,.25);}
.slop-copy.g3 .gen{color:#6a7f96;}
.slop-copy.g3 p{filter:blur(1.4px) grayscale(.6);opacity:.5;}
.slop-cap{text-align:center;font-size:.85rem;color:#7fa6cc;margin:1rem auto 0;max-width:640px;font-weight:700;}

/* ---------- specimen duel: slop vs counter story ---------- */
.duel{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:980px;margin:2.6rem auto 0;}
.spec{
  border-radius:18px;overflow:hidden;
  border:1px solid rgba(127,166,204,.2);
  background:linear-gradient(180deg, rgba(21,39,65,.55), rgba(13,25,44,.85));
}
.spec .spec-head{
  display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1.2rem;font-size:.78rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid rgba(127,166,204,.15);
}
.spec.slop .spec-head{color:#f29a9a;background:rgba(210,74,74,.08);}
.spec.human .spec-head{color:#7fe0a8;background:rgba(53,208,127,.08);}
.spec blockquote{
  margin:0;padding:1.4rem 1.5rem;font-size:1rem;line-height:1.7;color:#cfe3f7;
  font-style:italic;
}
.spec.slop blockquote{color:#93a7c0;}
.spec .spec-tag{
  display:flex;align-items:center;gap:.5rem;
  padding:.85rem 1.2rem;font-size:.82rem;font-weight:700;
  border-top:1px dashed rgba(127,166,204,.2);
}
.spec.slop .spec-tag{color:#f2b0b0;}
.spec.human .spec-tag{color:#8fe6b8;}
.spec.human{border-color:rgba(53,208,127,.35);box-shadow:0 18px 50px rgba(0,0,0,.35);}
@media(max-width:820px){.duel{grid-template-columns:1fr;max-width:520px;}}

@media(prefers-reduced-motion:reduce){
  .ai-caret,.ai-typing i{animation:none;}
  .scrape-belt{animation:none;}
  .ai-core{animation:none;}
}

/* ============================================================
   v3 (20260702) — two-col hero · chat-app scraper · shift viz ·
   photocopier polish · dose cards
   ============================================================ */

/* ---------- hero: chat beside the copy on desktop ---------- */
@media(min-width:1080px){
  .s-hero{position:relative;}
  .s-hero .hero2-inner{padding-right:clamp(440px,44vw,520px);}
  .s-hero h1{font-size:clamp(2.9rem,4.7vw,3.75rem);}
  .s-hero .ai-demo{
    position:absolute;right:clamp(24px,5vw,110px);top:50%;
    transform:translateY(-50%);width:min(460px,36vw);margin:0;z-index:2;
  }
}

/* ---------- the shift: watched vs read ---------- */
.shift-viz{
  display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;
  max-width:860px;margin:2.6rem auto 0;
}
.sv-panel{
  border-radius:18px;overflow:hidden;position:relative;
  border:1px solid rgba(127,166,204,.2);
  background:linear-gradient(180deg, rgba(15,31,54,.6), rgba(11,20,36,.85));
}
.sv-head{
  display:flex;align-items:center;gap:.5rem;padding:.85rem 1.2rem;
  font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid rgba(127,166,204,.14);
}
.sv-old .sv-head{color:#8fa3bd;}
.sv-new .sv-head{color:#7fc1ff;background:rgba(27,141,246,.07);}
/* the old panel reads as faded, dying analytics next to the vivid AI panel */
.sv-old{filter:saturate(.55);}
.sv-metrics{padding:1.2rem 1.2rem .6rem;}
.sv-metric{margin-bottom:1rem;}
.sv-metric span{display:block;font-size:.72rem;font-weight:700;color:#7fa6cc;margin-bottom:.35rem;}
.sv-line{
  display:block;height:26px;border-radius:6px;position:relative;overflow:hidden;
  /* a bar-chart signal that trails off to the right, then flatlines */
  background:
    repeating-linear-gradient(90deg, rgba(143,163,189,.5) 0 4px, transparent 4px 10px),
    rgba(127,166,204,.05);
  -webkit-mask:linear-gradient(90deg,#000 52%,rgba(0,0,0,.15));mask:linear-gradient(90deg,#000 52%,rgba(0,0,0,.15));
  animation:svFlatline 6s ease-in-out infinite;
}
.sv-line.l1{animation-delay:0s;}
.sv-line.l2{animation-delay:.7s;}
.sv-line.l3{animation-delay:1.4s;}
@keyframes svFlatline{
  0%,25%{opacity:.9;filter:none;}
  55%,80%{opacity:.3;filter:grayscale(1);}
  100%{opacity:.9;}
}
.sv-foot{
  padding:.8rem 1.2rem;font-size:.8rem;font-weight:700;
  border-top:1px dashed rgba(127,166,204,.18);
}
.sv-old .sv-foot{color:#8fa3bd;}
.sv-new .sv-foot{color:#7fe0a8;}
.sv-doc{position:relative;padding:1.3rem 1.2rem;overflow:hidden;}
.sv-docline{
  display:block;height:9px;border-radius:5px;margin-bottom:.65rem;
  background:rgba(207,227,247,.22);
}
.sv-docline.w60{width:60%;}
.sv-docline.w95{width:95%;}
.sv-docline.w85{width:85%;}
.sv-docline.w75{width:75%;}
.sv-docline.w90{width:90%;}
.sv-scan{
  position:absolute;left:0;right:0;height:34px;top:-40px;
  background:linear-gradient(180deg, transparent, rgba(27,141,246,.22) 45%, rgba(111,193,255,.4) 50%, rgba(27,141,246,.22) 55%, transparent);
  box-shadow:0 0 24px rgba(27,141,246,.35);
  animation:svScan 4.5s linear infinite;
}
@keyframes svScan{0%{top:-40px;}100%{top:110%;}}
@media(max-width:760px){.shift-viz{grid-template-columns:1fr;max-width:440px;}}

/* the conclusion "trend-punch" lines had no rule, so they sat full-width and
   left-aligned. Center them with a readable measure. */
.trend-punch{
  max-width:720px;margin:2.4rem auto 0;text-align:center;
  font-size:1.15rem;line-height:1.6;font-weight:600;color:var(--text);
}
.trend-punch b{color:var(--accent);}
/* deleted eyebrows leave the h2 as first child; kill the gap it opens under the
   section padding */
.prose h2:first-child{margin-top:0;}
/* "Feed the machine..." ran to 3+ lines; size it down to land in two */
.feed-h2{font-size:clamp(1.7rem,3.6vw,2.5rem);}
/* Jeff: too much vertical space between sections on this page. Tighten the
   rhythm. seo.css only loads on seo-blogs, so this stays scoped to this page. */
.edu, .types, .squeeze, .density{padding-top:5rem;padding-bottom:5rem;}

/* ---------- chat-app scraper (the machine, as the apps people know) ---------- */
.ai-app{
  max-width:620px;margin:2.6rem auto 0;border-radius:22px;overflow:hidden;
  border:1px solid rgba(127,166,204,.25);
  background:linear-gradient(180deg, rgba(15,31,54,.85), rgba(11,20,36,.95));
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.aa-bar{
  display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;
  background:rgba(10,19,34,.9);border-bottom:1px solid rgba(127,166,204,.15);
  font-size:.78rem;font-weight:700;color:#9db8d6;
}
.aa-bar i{color:#6fc1ff;}
.aa-thread{padding:1.2rem 1.2rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;}
.aa-msg{max-width:85%;padding:.8rem 1.05rem;border-radius:16px;font-size:.92rem;line-height:1.5;font-weight:600;}
.aa-msg.user{
  align-self:flex-end;color:#fff;border-bottom-right-radius:6px;
  background:linear-gradient(135deg,#1b8df6,#0a6fd4);
}
.aa-msg.bot{
  align-self:flex-start;color:#cfe3f7;border-bottom-left-radius:6px;
  background:rgba(21,39,65,.85);border:1px solid rgba(127,166,204,.25);
}
.aa-tool{
  align-self:stretch;border-radius:14px;overflow:hidden;
  border:1px solid rgba(27,141,246,.3);background:rgba(13,25,44,.7);
}
.aa-tool-head{
  display:flex;align-items:center;gap:.5rem;padding:.65rem 1rem;
  font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:#7fc1ff;
  border-bottom:1px solid rgba(127,166,204,.12);
}
.aa-tool-head i{animation:aaPulse 1.6s ease-in-out infinite;}
@keyframes aaPulse{50%{opacity:.35;}}
.aa-tool .scrape-lane{height:96px;border-radius:0;margin:0;}
.aa-tool .doc-chip{width:132px;padding:.6rem .7rem;}
.aa-tool .doc-chip b{font-size:.66rem;}
@media(max-width:640px){.aa-msg{max-width:95%;}}

/* ---------- photocopier stack: bigger, speckled ---------- */
.slop-stack{max-width:720px;}
.slop-copy{padding:1.4rem 1.6rem;position:relative;}
.slop-copy .gen{
  font-size:.64rem;line-height:1.4;
}
.slop-copy p{font-size:1.08rem;line-height:1.6;position:relative;z-index:1;}
.slop-copy::after{ /* photocopier speckle layer, heavier each pass */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.slop-copy.g2::after{opacity:.14;}
.slop-copy.g3::after{opacity:.32;}
.slop-copy.g2 p{filter:blur(.5px) contrast(.9);opacity:.8;}
.slop-copy.g3 p{filter:blur(1.2px) contrast(.75) grayscale(.6);opacity:.55;}
.slop-cap{font-size:.95rem;max-width:720px;}

/* ---------- how many blogs: dose cards ---------- */
.dose-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;
  max-width:860px;margin:2.6rem auto 0;
}
.dose{
  position:relative;border-radius:20px;padding:2rem 1.8rem 1.8rem;text-align:center;
  border:1px solid rgba(127,166,204,.2);
  background:linear-gradient(180deg, rgba(21,39,65,.55), rgba(13,25,44,.85));
  overflow:hidden;
}
.dose.great{
  border-color:rgba(27,141,246,.5);
  background:
    radial-gradient(90% 100% at 50% 0%, rgba(27,141,246,.14), transparent 60%),
    linear-gradient(180deg, rgba(21,39,65,.6), rgba(13,25,44,.9));
  box-shadow:0 24px 60px rgba(27,141,246,.12);
}
.dose-docs{position:relative;height:104px;margin-bottom:1.1rem;}
.doc-page{
  position:absolute;left:50%;top:0;width:74px;height:96px;margin-left:-37px;
  border-radius:8px;border:1px solid rgba(127,166,204,.35);
  background:
    linear-gradient(180deg, rgba(127,166,204,.35) 0 6px, transparent 6px),
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(207,227,247,.25) 14px 17px),
    linear-gradient(180deg, #16263f, #0e1c31);
  background-position:0 12px, 0 22px, 0 0;
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-size:60% 6px, 82% 60%, 100% 100%;
  background-origin:content-box;padding:0 8px;
  box-shadow:0 14px 30px rgba(0,0,0,.4);
  animation:docBob 5s ease-in-out infinite;
}
.doc-page.p2{
  transform:rotate(7deg) translateX(26px);animation-delay:.8s;
  border-color:rgba(27,141,246,.5);
}
.dose.great .doc-page:first-child{transform:rotate(-6deg) translateX(-26px);}
@keyframes docBob{50%{margin-top:-8px;}}
.dose-count{font-size:1.9rem;font-weight:900;letter-spacing:-.02em;color:#eef4fb;}
.dose-verdict{
  display:inline-block;margin:.3rem 0 .9rem;font-size:.66rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;
}
.dose .dose-verdict{background:rgba(127,166,204,.12);color:#9db8d6;border:1px solid rgba(127,166,204,.3);}
.dose.great .dose-verdict{background:rgba(27,141,246,.15);color:#7fc1ff;border:1px solid rgba(27,141,246,.4);}
.dose p{font-size:.9rem;color:#9db8d6;line-height:1.55;margin:0 0 1rem;}
.dose .pkg-feats{text-align:left;display:inline-block;}
.dose-ribbon{
  position:absolute;top:0;right:0;z-index:2;
  background:linear-gradient(90deg,#1b8df6,#0a6fd4);color:#fff;
  font-size:.56rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:.42rem .85rem;
  border-top-right-radius:20px;border-bottom-left-radius:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
@media(max-width:760px){.dose-grid{grid-template-columns:1fr;max-width:440px;}}

@media(prefers-reduced-motion:reduce){
  .sv-line,.sv-scan,.aa-tool-head i,.doc-page{animation:none;}
}

.dose-price{margin:.2rem 0 .9rem;font-size:1rem;color:#9db8d6;}
.dose-price b{font-size:1.5rem;font-weight:900;color:#6fc1ff;letter-spacing:-.02em;}